Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

button styling

Browse Source
This commit is contained in:
Nils Schneider 2015-03-21 18:05:45 +01:00
parent 6ace01e48e
commit 66d912ee10
1 changed files with 16 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
history.html
View File

@ -24,7 +24,7 @@
button { button {
font-family: "ionicons"; font-family: "ionicons";
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
border-radius: 0.9em; border-radius: 0.9em;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
border: none; border: none;
@ -32,10 +32,18 @@
height: 1.8em; height: 1.8em;
width: 1.8em; width: 1.8em;
font-size: 20pt; font-size: 20pt;
transition: box-shadow 0.5s, color 0.5s;
outline: none;
} }
button:hover { button:hover {
background: white;
color: #dc0067; color: #dc0067;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
}
button:active {
box-shadow: inset 0px 5px 20px rgba(0, 0, 0, 0.19), inset 0px 3px 6px rgba(0, 0, 0, 0.23);
} }
button.close { button.close {
@ -57,45 +65,20 @@
} }
#sidebarhandle { #sidebarhandle {
cursor: pointer;
font-family: sans;
font-size: 20pt;
position: absolute; position: absolute;
right: -2.5em; right: -2.5em;
top: 0.7em; top: 0.7em;
z-index: 10; z-index: 10;
background: rgba(255, 255, 255, 0.7); transition: right 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s;
height: 1.8em;
width: 1.8em;
border-radius: 0.9em;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
text-align: center;
display: table;
transition: right 0.5s;
} }
#sidebar.hidden #sidebarhandle { #sidebarhandle:after {
}
#sidebarhandle span {
display: table-cell;
vertical-align: middle;
font-family: "ionicons";
transition: transform 0.5s;
}
#sidebarhandle span:after {
padding-right: 0.125em; padding-right: 0.125em;
content: "\f124"; content: "\f124";
} }
#sidebar.hidden #sidebarhandle span { #sidebar.hidden #sidebarhandle {
transform: rotate(-180deg); transform: scale(-1, 1);
}
#sidebarhandle:hover {
background: white;
color: #dc0067;
} }
.hostname { .hostname {
@ -210,9 +193,9 @@
<div id="map"> <div id="map">
</div> </div>
<div id="sidebar"> <div id="sidebar">
<div id="sidebarhandle"> <button id="sidebarhandle">
<span></span> </button>
</div>
<div id="sidebardata"> <div id="sidebardata">
<div id="nodeinfo" class="hidden"> <div id="nodeinfo" class="hidden">
</div> </div>