mnml/client/assets/styles/controls.less
2019-09-13 12:22:13 +10:00

110 lines
1.9 KiB
Plaintext

@import 'colours.less';
aside {
grid-area: ctrl;
display: grid;
grid-template-areas:
"timer controls"
"timer controls"
"timer controls";
grid-template-columns: min-content 1fr;
grid-template-rows: 1fr;
padding-left: 1em;
.controls {
grid-area: controls;
display: grid;
grid-auto-rows: 1fr;
grid-gap: 0.5em 0;
}
// fix chrome being inconsistent
table {
height: 100%;
}
div {
text-align: right;
}
button {
width: 100%;
font-size: 150%;
margin-bottom: 0.5em;
}
button.ready:enabled {
&:hover {
color: forestgreen;
border-color: forestgreen;
}
&:active, &:focus {
background: forestgreen;
color: black;
border-color: forestgreen;
}
}
.timer-container {
grid-area: timer;
display: flex;
flex: 1 1 100%;
height: 100%;
min-height: 100%;
width: 0.25em;
max-width: 0.25em;
margin: 0 1em 0 0;
border: none;
}
.timer {
background: whitesmoke;
transition-property: all;
transition-duration: 0.25s;
transition-delay: 0;
transition-timing-function: ease;
}
}
.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
color: forestgreen;
}
.ready {
color: forestgreen;
transition-property: color, background;
transition-duration: 0.25s;
transition-timing-function: ease;
}
.team-page-ctrl {
display: flex;
height: 3em;
align-items: center;
}
.team-page-ctrl h2 {
padding: 0 0.75em 0 0.75em;
}
.abandon {
&:hover {
color: @red;
border-color: @red;
};
&:active, &.confirming {
background: @red;
color: black;
border: 1px solid black;
}
}