Browse Source
This commit changes the way the UI is displayed. Buttons are bigger and square, with the status icon at the bottom. It makes use of CSS grids to show all buttons nicely aligned. It also makes the UI squishy, showing more columns the wider the screen (up to 5 columns).merge-requests/1/head
4 changed files with 151 additions and 128 deletions
@ -0,0 +1,55 @@
|
||||
/* Spinner */ |
||||
/* Source: http://tobiasahlin.com/spinkit/ */ |
||||
|
||||
.spinner { |
||||
margin: 100px auto; |
||||
width: 50px; |
||||
height: 40px; |
||||
text-align: center; |
||||
font-size: 10px; |
||||
} |
||||
|
||||
.spinner > div { |
||||
background-color: #dbdbdb; |
||||
height: 100%; |
||||
width: 6px; |
||||
display: inline-block; |
||||
|
||||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; |
||||
animation: sk-stretchdelay 1.2s infinite ease-in-out; |
||||
} |
||||
|
||||
.spinner .rect2 { |
||||
-webkit-animation-delay: -1.1s; |
||||
animation-delay: -1.1s; |
||||
} |
||||
|
||||
.spinner .rect3 { |
||||
-webkit-animation-delay: -1.0s; |
||||
animation-delay: -1.0s; |
||||
} |
||||
|
||||
.spinner .rect4 { |
||||
-webkit-animation-delay: -0.9s; |
||||
animation-delay: -0.9s; |
||||
} |
||||
|
||||
.spinner .rect5 { |
||||
-webkit-animation-delay: -0.8s; |
||||
animation-delay: -0.8s; |
||||
} |
||||
|
||||
@-webkit-keyframes sk-stretchdelay { |
||||
0%, 40%, 100% { -webkit-transform: scaleY(0.4) } |
||||
20% { -webkit-transform: scaleY(1.0) } |
||||
} |
||||
|
||||
@keyframes sk-stretchdelay { |
||||
0%, 40%, 100% { |
||||
transform: scaleY(0.4); |
||||
-webkit-transform: scaleY(0.4); |
||||
} 20% { |
||||
transform: scaleY(1.0); |
||||
-webkit-transform: scaleY(1.0); |
||||
} |
||||
} |
Loading…
Reference in new issue