62 lines
910 B
SCSS
62 lines
910 B
SCSS
@use "sass:color";
|
|
@use "../variables" as *;
|
|
|
|
div.plate_container {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
border: 2px solid $color-dark;
|
|
grid-column: right / right;
|
|
grid-row: upper / 3;
|
|
|
|
h2 {
|
|
margin-bottom: 1%;
|
|
text-align: center;
|
|
}
|
|
|
|
&>div {
|
|
display: grid;
|
|
grid-template-rows: auto auto;
|
|
grid-template-rows: auto auto;
|
|
|
|
&>h2:nth-of-type(1) {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
&>h2:nth-of-type(2) {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
&>div {
|
|
grid-column:2;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
div.plate_container--heatmap-notice {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
left: 0.5em;
|
|
|
|
animation: 1s 1 attention_on_load;
|
|
}
|
|
}
|
|
|
|
@keyframes attention_on_load {
|
|
from{
|
|
color: $color-light;
|
|
transform: scale(1.05);
|
|
}
|
|
to {
|
|
color: inherit;
|
|
}
|
|
}
|