view btns

master
Sandra 5 years ago
parent df15d8c230
commit 377c27a529

@ -11,7 +11,7 @@ body {
top: 25%;
width: 82%;
height: auto;
right: 8%;
left: 7%;
text-align: : center;
z-index: 5;
@ -32,33 +32,32 @@ body {
/*links*/
a:link {
/*a:link {
text-decoration: none;
color: black;
color: #371F10;
}
a:visited {
text-decoration: none;
color: black;
color: #371F10;
}
a:hover {
text-decoration: none;
color: blue;
}
}*/
h1 {
position: fixed;
/*position: fixed;
right:0%;
top:5%;
text-align: right;
background-color: rgba(11,239,235,0.7);
padding: 3px 35px 3px 10px;
z-index: 10;
color: black;
font-size: 27px;
color: #371F10;
color: #371F10;*/
max-width: 90%;
}
@ -71,29 +70,27 @@ h2{
padding: 3px 35px 3px 10px;
z-index: 10;
font-size: 20px;
/* opacity: 0.7;*/
color: #371F10;
color: #371F10;
}
.viewnav {
position: fixed;
bottom: 0%;
left: 0%;
bottom: 1%;
right: 1%;
background-color: transparent;
width: 10%;
z-index: 10;
opacity: 0.7;
width: 5%;
z-index: 9;
}
.collapsible2 {
background-color: transparent;
color: red;
background-color: transparent;
color: #371F10;
cursor: pointer;
padding: 0px;
width: 100%;
height: auto;
border: none;
text-align: left;
text-align: center;
outline: none;
font-size: 40px;
z-index: 10;
@ -109,19 +106,19 @@ h2{
position: absolute;
max-height: 0;
overflow: hidden;
width: 100%;
width: auto;
transition: max-height 0.3s ease-out;
background-color: transparent;
color: white;
z-index: 10;
text-align: center;
bottom: 50%;
bottom: 100%;
}
/* Grid buttons */
.header {
/*.header {
position: absolute;
text-align: center;
@ -132,35 +129,51 @@ h2{
width: auto;
height: auto;
background-color: pink;
}
}*/
p {
display: inline-block;
position: relative;
}
.btnov {
border: none;
outline: none;
width: 110px;
text-align: center;
padding: 0px 0px;
background-color: transparent;
cursor: pointer;
font-size: 20px;
margin-right: 5px;
z-index: 9;
color: #371F10;
}
.btn {
border: none;
outline: none;
width: 110px;
text-align: center;
padding: 12px 0px;
padding: 0px 0px;
background-color: transparent;
cursor: pointer;
font-size: 18px;
font-size: 30px;
margin-right: 5px;
z-index: 9;
border: solid 1px;
color: #371F10;
}
.btn:hover {
background-color: black;
color: blue;
color:rgba(11,239,235);
/* color: blue;*/
}
.btn:active {
background-color: black;
color: white;
color:rgba(11,239,235);
}
@ -183,7 +196,7 @@ p {
display: inline-block;
right:0%;
background-color: white;
color: black;
color: #371F10;
cursor: pointer;
padding: 18px;
width: 3%;
@ -198,7 +211,7 @@ p {
}
.active, .collapsible:hover {
background-color: #0BEFEB;
color: blue;
}
@ -210,7 +223,7 @@ p {
width: auto;
transition: max-height 0.2s ease-out;
background-color: white;
color: black;
color: #371F10;
z-index: 10;
text-align: left;
opacity: 0.7;
@ -223,7 +236,7 @@ a.content:link {
}
.metadata_organization {
font-size: 14px;
/*font-size: 14px;*/
}
.fbtn {

@ -14,11 +14,10 @@
<h1>{{ page.name }} &#8629;</h1>
<div class="viewnav">
<div class="collapsible2 viewbtn">&#10063;</div>
<div class="collapsible2 viewbtn">&#9634;</div>
<div class="content2">
<!-- <div class="header" id="myHeader"> -->
<p><button class="btn" onclick="myFunction()">&#9607;</button></p>
<p><button class="btn" onclick="myFunction2()">&#9619;</button></p>
<p><button class="btn active" onclick="myFunction()">&#9635;</button></p>
<p><button class="btnov active" onclick="myFunction2()">&#9580;&#9580;</button></p>
</div>
</div>
<div>

Loading…
Cancel
Save