guest_worker/www/worker_specs/style.css

222 lines
3.4 KiB
CSS
Raw Normal View History

2019-11-01 18:30:50 +01:00
@font-face {
font-family: 'bebas';
src: url('font/BebasNeue-Regular.ttf');
}
@font-face {
font-family: 'freesans';
src: url('font/FreeSans.ttf')
}
:root{
--base-font-size: 17px;
2020-01-21 16:09:24 +01:00
--big-font-size: calc(var(--base-font-size)*1.5);
--bigger-font-size: calc(var(--big-font-size)*1.5);
/* --spec_name-font-size: 120%;
--spec_value-font-size: 250%; */
2019-11-01 18:30:50 +01:00
--base-color: #271601; /* tekst */
--alt-color: #FFF5DF; /* achtergrond */
/* /////// GAT VOORKANT PLEK & POSITIE //////// */
/* */ /* */
2020-01-22 18:31:09 +01:00
/* */ --pos-x: 557px; /* */
2020-01-22 18:38:59 +01:00
/* */ --pos-y: 110px; /* */
2019-11-01 20:21:24 +01:00
/* */ --width: 420px; /* 115mm */
2020-01-22 18:38:59 +01:00
/* */ --height: 970px; /* 270mm */
2019-11-01 18:30:50 +01:00
/* */ /* */
/* //////////////////////////////////////////// */
}
html, body{
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
font-family: 'bebas';
font-size: var(--base-font-size);
line-height: 1.1;
2019-11-01 20:21:24 +01:00
background: var(--alt-color);
2019-11-01 18:30:50 +01:00
overflow: hidden;
}
#wrapper{
position: absolute;
left: var(--pos-x);
2020-01-13 16:13:42 +01:00
bottom: calc(100vh - (var(--pos-y) + var(--height)));
2019-11-01 18:30:50 +01:00
width: var(--width);
2020-01-13 16:13:42 +01:00
height: auto;
2019-11-01 18:30:50 +01:00
background: var(--alt-color);
box-sizing: border-box;
padding: 2%;
}
2020-01-13 16:13:42 +01:00
#wrapper .hit{
display:block;
}
2020-01-21 16:09:24 +01:00
2020-01-13 16:13:42 +01:00
.transition{
overflow:hidden;
2020-01-21 16:09:24 +01:00
display: block;
2020-01-13 16:13:42 +01:00
position:relative;
2020-01-21 16:09:24 +01:00
padding-left: calc(50% + 20px);
font-size: var(--base-font-size);
2020-01-13 16:13:42 +01:00
height: 40px;
2020-01-21 16:09:24 +01:00
/* text-align: center; */
2020-01-13 16:13:42 +01:00
animation-duration: 3s;
animation-name: slidein;
2020-01-22 17:31:58 +01:00
margin: 10px 0px;
2020-01-13 16:13:42 +01:00
}
2020-01-21 16:09:24 +01:00
.transition p{
2020-01-22 17:31:58 +01:00
/* height: 100%; */
margin: 12px 2px 2px 2px;
}
.transition.no_arrow{
padding: 0;
text-align: center;
2020-01-21 16:09:24 +01:00
}
2020-01-22 17:31:58 +01:00
.transition:not(.no_arrow)::before{
2020-01-13 16:13:42 +01:00
content:'⇩'; /*'⇓';*/
display:block;
position:absolute;
2020-01-21 16:09:24 +01:00
font-family:'monospace';
font-size: 80px;
top:10px;
2020-01-22 17:40:17 +01:00
left:calc(50% - 24px);
2020-01-13 16:13:42 +01:00
line-height:0;
2020-01-21 16:09:24 +01:00
2020-01-13 16:13:42 +01:00
}
2020-01-21 16:09:24 +01:00
2020-01-13 16:13:42 +01:00
.state{
overflow:hidden;
animation-duration: 3s;
animation-name: slidein;
transition: max-height 1s;
2020-01-21 16:09:24 +01:00
/* max-height: 200px; */
margin: 2px;
border:solid 2px black;
2020-01-22 17:31:58 +01:00
padding: 12px;
2020-01-21 16:09:24 +01:00
}
.state h2{
font-family: 'bebas';
font-size: var(--bigger-font-size);
margin: 2px;
font-weight: normal;
}
.state p{
margin: 0;
font-family: 'bebas';
font-size: var(--big-font-size);
2020-01-22 18:30:06 +01:00
opacity: 1;
transition: opacity .5s;
2020-01-21 16:09:24 +01:00
}
.state img{
max-width: 100%;
}
.state .descriptor{
font-family: 'freesans';
font-size: var(--base-font-size);
2020-01-22 17:31:58 +01:00
margin-top: calc(var(--base-font-size)/2);
2020-01-13 16:13:42 +01:00
}
.state.assignment-hidden {
/*On abandon etc.*/
max-height: 0px;
2020-01-22 18:30:06 +01:00
opacity: 0;
2020-01-13 16:13:42 +01:00
}
2020-01-21 16:09:24 +01:00
2020-01-13 16:13:42 +01:00
@keyframes slidein {
from {
max-height:0;
}
to {
2020-01-22 16:04:13 +01:00
max-height: 600px;
2020-01-13 16:13:42 +01:00
}
}
/*
2019-11-01 18:30:50 +01:00
#worker_specs{
display:grid;
grid-template-columns: 1fr ;
grid-template-rows: repeat(50, 1fr 2fr);
}
.grid-item{
color: var(--base-color);
}
.spec_name{
font-size: var(--spec_name-font-size);
font-family: 'freesans';
}
.spec_value{
font-size: var(--spec_value-font-size);
padding-bottom: 3%;
2019-11-04 09:25:39 +01:00
white-space:nowrap;
2019-11-01 18:30:50 +01:00
}
.phase{
display:none;
}
.phase:not(#worker_specs){
padding-top: 100%;
text-align: center;
}
.narrative_phase_text{
font-size: var(--spec_value-font-size);
}
#hit_id{
font-size: 190%;
position: relative;
top: 5px;
}
2020-01-21 16:09:24 +01:00
*/
2020-01-22 16:04:13 +01:00
.columns{
display: flex;
flex-direction: row;
2020-01-22 17:31:58 +01:00
2020-01-22 16:04:13 +01:00
}
.columns .column{
flex-grow: 1;
2020-01-22 17:31:58 +01:00
width: 50%;
2020-01-22 16:04:13 +01:00
}
2020-01-22 16:18:09 +01:00
2020-01-22 17:31:58 +01:00
2020-01-22 16:18:09 +01:00
.scan img{
vertical-align:bottom;
2020-01-22 17:31:58 +01:00
}