Adrian Gaudebert
22a620594b
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).
116 lines
2.1 KiB
CSS
116 lines
2.1 KiB
CSS
* {
|
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
box-sizing: border-box;
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
body {
|
|
background: #3f3552;
|
|
color: #fefdfd;
|
|
font-size: 100%;
|
|
font-weight: 300;
|
|
line-height: 1.3;
|
|
/**/
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
header {
|
|
background: #281c3d;
|
|
text-align: center;
|
|
padding: 1rem 0 2rem 0;
|
|
}
|
|
header h1 {
|
|
font-size: 3rem;
|
|
margin: 0;
|
|
}
|
|
header h2 {
|
|
color: #9c9c9c;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.btn,
|
|
.btn:hover,
|
|
.btn:focus {
|
|
background-color: #18AE90;
|
|
border: 0;
|
|
border-bottom: 0.3rem solid #017F66;
|
|
border-right: 0.2rem solid #079478;
|
|
border-radius: 0 0.2rem 0 0.3rem;
|
|
color: #FEFDFD;
|
|
cursor: pointer;
|
|
height: 100%;
|
|
position: relative;
|
|
-moz-user-select: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
.btn:active {
|
|
border: none;
|
|
border-radius: 0;
|
|
top: 0.3rem;
|
|
left: 0.2rem;
|
|
height: 97%;
|
|
}
|
|
|
|
.audio-btn .status-icon {
|
|
background: url('../img/play.svg') no-repeat center center;
|
|
display: block;
|
|
height: 30px;
|
|
bottom: 0.3rem;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.audio-btn:active .status-icon {
|
|
bottom: 0;
|
|
}
|
|
.audio-btn .status-icon.playing {
|
|
background: url('../img/stop.svg') no-repeat center center;
|
|
}
|
|
|
|
.sounds {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 10rem);
|
|
grid-gap: 2rem 1rem;
|
|
margin: 2rem auto;
|
|
text-align: center;
|
|
width: 21rem;
|
|
}
|
|
.sounds div {
|
|
display: table;
|
|
height: 10rem;
|
|
}
|
|
.sounds div label {
|
|
cursor: pointer;
|
|
display: table-cell;
|
|
padding: 0 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@media (min-width: 36rem) {
|
|
.sounds {
|
|
grid-gap: 2rem;
|
|
grid-template-columns: repeat(3, 10rem);
|
|
width: 34rem;
|
|
}
|
|
}
|
|
@media (min-width: 48rem) {
|
|
.sounds {
|
|
grid-gap: 2rem;
|
|
grid-template-columns: repeat(4, 10rem);
|
|
width: 46rem;
|
|
}
|
|
}
|
|
@media (min-width: 60rem) {
|
|
.sounds {
|
|
grid-gap: 2rem;
|
|
grid-template-columns: repeat(5, 10rem);
|
|
width: 58rem;
|
|
}
|
|
}
|