view btns

master
Sandra 5 years ago
parent df15d8c230
commit 377c27a529

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

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

Loading…
Cancel
Save