danbarber/tube-status-server
1
0
Fork 0
mirror of https://github.com/danbee/tube-status-server synced 2025-03-04 08:39:12 +00:00
Code Issues Releases Wiki Activity

Make footer buttons a bar.

Browse Source
This commit is contained in:
Dan Barber 2013-01-28 11:44:30 +00:00
parent 9f1d3d4ba9
commit b51b392abe
2 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
stylesheets/main.css
View File

@ -122,20 +122,36 @@ footer {
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5); } box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5); }
footer li { footer li {
display: inline-block; display: inline-block;
width: 48%; } width: 49%; }
footer li:first-child a {
margin-left: 0;
border-radius: 0.3em 0 0 0.3em; }
footer li:last-child a {
border-radius: 0 0.3em 0.3em 0; }
footer li a { footer li a {
font-size: 0.8em; font-size: 0.8em;
height: 4.2em; height: 4.2em;
padding: 0.4em; padding: 0.4em;
color: white; color: rgba(255, 255, 255, 0.6);
display: block; display: block;
border-radius: 0.3em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } border: 1px solid black;
margin-left: -1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); }
footer li a.selected { footer li a.selected {
background: rgba(255, 255, 255, 0.1); color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.15)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
border: 1px solid black; border: 1px solid black;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); } box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4); }
footer li a:before { footer li a:before {
display: block; display: block;
font-size: 1.5em; font-size: 1.5em;

21
stylesheets/main.scss
View File

@ -78,19 +78,30 @@ footer {
@include box-shadow(0 -2px 3px rgba(0, 0, 0, 0.5)); @include box-shadow(0 -2px 3px rgba(0, 0, 0, 0.5));
li { li {
display: inline-block; display: inline-block;
width: 48%; width: 49%;
&:first-child a {
margin-left: 0;
border-radius: 0.3em 0 0 0.3em;
}
&:last-child a {
border-radius: 0 0.3em 0.3em 0;
}
a { a {
font-size: 0.8em; font-size: 0.8em;
height: 4.2em; height: 4.2em;
padding: 0.4em; padding: 0.4em;
color: white; color: rgba(255, 255, 255, 0.6);
display: block; display: block;
border-radius: 0.3em;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid black;
margin-left: -1px;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4));
&.selected { &.selected {
background: rgba(255, 255, 255, 0.1); color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3);
@include linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
border: 1px solid black; border: 1px solid black;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4)); @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4));
} }
&:before { &:before {
display: block; display: block;