X-Git-Url: https://git.rapsys.eu/.gitweb.cgi/airbundle/blobdiff_plain/44c55046c5a0307270fe105ea01b38452a89fc68..a452c80cd4523cc9dc2f58619942961277135d52:/Resources/public/css/screen.css diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index ee9eb27..c63abc3 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -98,25 +98,29 @@ textarea { font-size: .75rem; color: #066; background-color: transparent; + box-sizing: border-box; } form { display: flex; flex-direction: column; flex-wrap: wrap; - line-height: normal; text-align: center; } -form header { - margin-bottom: .5rem; -} - -form header .message { +/*form header .message { margin: 0; +}*/ + +form .row { + flex-direction: row; } form div { + display: flex; + align-content: space-around; + justify-content: center; + flex-direction: column; margin-bottom: .5rem; } @@ -126,7 +130,7 @@ form div:last-of-type { margin-bottom: 0; } -form section div { +/*form section div { display: flex; flex-direction: row; align-content: space-around; @@ -136,11 +140,12 @@ form section div { form section section { display: flex; flex-direction: column; -} +}*/ form label { width: 12rem; - padding: .2rem 1rem .2rem 0; + /*padding: .2rem 1rem .2rem 0;*/ + padding-right: 1rem; text-align: right; } @@ -148,50 +153,56 @@ form input, form option, form optgroup, form select, -form textarea { +form textarea, +form section section { width: 24rem; padding: .1rem; } form select { - box-sizing: content-box; padding: 0 .1rem .1rem .1rem; } form button { width: 10rem; - margin: .5rem auto 0 auto; + /*margin: .5rem auto 0 auto;*/ + margin: 0 auto; padding: 0 .1rem .2rem .1rem; } -form section .message { +form .message { margin: .25rem 0 0 0; } /* Vertical form */ -form.col label { +.col label { width: 8rem; - padding: .2rem 0; + padding-right: 0; + padding-bottom: .2rem; text-align: center; } -form.col input, -form.col option, -form.col optgroup, -form.col select, -form.col textarea { +.col input, +.col option, +.col optgroup, +.col select, +.col textarea { width: 8rem; } -form.col button { +.col button { width: 8rem; } -form.col div { +/*.col section { + width: auto; +}*/ + +.col .row { flex-direction: column; } -form.col div.date { +.col div.date { flex-direction: row; justify-content: space-between; } @@ -203,34 +214,30 @@ form.col div.date { border-radius: 0 0 .5rem .5rem; margin: .5rem; margin-top: 0; - padding: .5rem; - left: 0; - right: 0; display: flex; + flex-direction: row; + flex-wrap: nowrap; justify-content: space-between; - min-width: 180px; + /*min-width: 180px;*/ } #header h1 { - order: 0; padding: 0; margin: 0; vertical-align: middle; white-space: nowrap; } -#header h1 a { - display: flex; +#header img { + margin: .5rem; } #header nav { - order: 3; - margin-left: auto; display: flex; - flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; + padding: .5rem; } #header nav h2 { @@ -238,15 +245,20 @@ form.col div.date { } #header nav a { + flex-grow: 1; text-align: center; - border-radius: .25rem; - padding: .375rem .5rem .25rem .5rem; - margin: 0 0 .1rem .5rem; + border-radius: .2rem; + padding: .25rem .5rem; + margin: 0 0 0 .5rem; border: .1rem solid #00c3f9; font-weight: bold; background-color: #cff; } +#header nav a:first-child { + margin: 0; +} + /* Message */ .message { margin: 0 .5rem .5rem; @@ -262,13 +274,26 @@ form.col div.date { .message::before, .message::after { - line-height: 100%; margin: auto 0; padding: 0 .25rem; } p.message { - margin: 0; + margin: .5rem; +} + +.mortal, +.mortal button, +.mortal select { + border-color: #c33333; + background-color: #f9c3c3; + color: #c33333; +} + +.dangerous, +.mortal { + border-radius: .2rem; + padding: .5rem 0; } .error { @@ -299,6 +324,14 @@ p.message { /*content: "⌘";*/ } +.dangerous, +.dangerous button, +.dangerous select { + border-color: #c39333; + background-color: #f9c333; + color: #936333; +} + .warning { border-color: #c39333; background-color: #f9c333; @@ -316,71 +349,44 @@ p.message { /* Dashboard */ #dashboard, -#regulation, -#form { +#form, +#recover, +#regulation { border: .1rem solid #00c3f9; border-radius: .5rem; margin: .5rem; margin-top: 0; - overflow: hidden; - padding: .5rem; display: flex; flex-direction: column; } #dashboard h2, -#regulation h2, -#form h2 { +#form h2, +#recover h2, +#regulation h2 { background-color: #cff; border-bottom: .1rem solid #00c3f9; - margin: -.5rem; - margin-bottom: .5rem; + margin: 0; padding: .5rem; - padding-bottom: .5rem; } #dashboard h3 { background-color: #cff; + border-bottom: .1rem solid #00c3f9; margin: 0; - margin: -.3rem -.1rem; - margin-bottom: .3rem; padding: .3rem; - border-bottom: .1rem solid #00c3f9; } #dashboard h4 { background-color: #cff; - margin: 0; - padding: .3rem; border-bottom: .1rem solid #00c3f9; -} - -#form .recover { - border: .1rem solid #00c3f9; - border-radius: .3rem; - margin-top: 1rem; - padding: .5rem; -} - -#form h3 { - background-color: #cff; - margin: -.5rem; - margin-bottom: .5rem; - padding: .3rem; -} - -#form h3, -#dashboard h3, -#dashboard h4 { -} - -#dashboard .location h3 { margin: 0; - border-bottom: 0; + padding: .2rem; } -#dashboard .location .cell { - padding: 0; +#form form, +#recover form { + padding: .5rem; } /*#dashboard .calendar h3 { @@ -411,14 +417,34 @@ p.message { flex-wrap: nowrap; place-content: space-between; border: 0; - margin: 0 0 .5rem 0; - padding: 0; + margin: 0; + padding: 0 .5rem .5rem .5rem; } +#dashboard .panel:only-child, +#dashboard .panel:first-child, +#dashboard .panel:first-of-type { + padding-top: .5rem; +} + + #dashboard .panel:only-child, #dashboard .panel:last-child, #dashboard .panel:last-of-type { - margin-bottom: 0; + padding-bottom: .5rem; +} + +#dashboard .candidate section, +#dashboard .location section { + flex-direction: column; + flex-grow: 1; + border: .1rem solid #00c3f9; + border-radius: .3rem; + padding: 0; +} + +#dashboard .location h4 { + border-width: 0; } #dashboard .grid { @@ -427,15 +453,13 @@ p.message { border-style: solid; border-color: #00c3f9; border-radius: .2rem; - border-width: .1rem 0 0 .1rem; - line-height: normal; + /*border-width: .1rem 0 0 .1rem;*/ flex-grow: 1; - box-sizing: inherit; + /*box-sizing: inherit;*/ box-sizing: border-box; border-collapse: collapse; /*box-sizing: border-box; display: table; - line-height: normal; padding: 0; flex-grow: 1; table-layout: fixed; @@ -445,12 +469,67 @@ p.message { /*width: calc(100% - 12rem); border-collapse: collapse;*/ /*width: calc(100% - 12rem);*/ + gap: .1rem; } + /*margin: 0; #dashboard .grid:only-child, #dashboard .grid:last-child, #dashboard .grid:last-of-type { margin-bottom: 0; +}*/ + +#dashboard .candidate .grid, +#dashboard .location .grid { + padding: .5rem; +} + +#dashboard .dlgrid { + display: flex; + flex-flow: row wrap; + gap: .5rem; +} + +#dashboard dl { + /*margin: .5rem; + padding: .25rem; + border: .1rem solid #00c3f9; + border-radius: .2rem; + flex-grow: 1; + box-sizing: border-box; + border-collapse: collapse;*/ + margin: 0 .5rem .5rem .5rem; +} + +#dashboard dl:first-child, +#dashboard dl:only-child, +#dashboard dl:first-of-type { + margin-top: .5rem; +} + +#dashboard dt { + font-size: .9rem; + font-weight: bold; +} + +#dashboard dd { + font-size: .9rem; + margin-left: 1rem; +} + +#dashboard ul { + /*padding: 0 .1rem;*/ + margin: .1rem; +} + +#dashboard li { + font-size: .8rem; + margin-bottom: .1rem; +} + +#dashboard li:only-child, +#dashboard li:last-child { + margin-bottom: 0; } #dashboard .subgrid { @@ -460,7 +539,6 @@ p.message { border-color: #00c3f9; border-width: .1rem 0 0 .1rem; border-radius: .2rem; - line-height: normal; flex-grow: 1; box-sizing: inherit; box-sizing: border-box; @@ -477,19 +555,11 @@ p.message { #dashboard .cell { border-color: inherit; border-style: inherit; - border-width: 0 .1rem .1rem 0; - border-radius: .2rem; + border-width: .1rem; + border-radius: inherit; flex-grow: inherit; box-sizing: inherit; border-collapse: inherit; - font-size: .8rem; - padding: .3rem .1rem; -} - -#dashboard .cell:only-child, -#dashboard .cell:last-child, -#dashboard .cell:last-of-type { - border-radius: inherit; } #dashboard .subgrid .cell { @@ -504,44 +574,52 @@ p.message { #dashboard .fourth { min-height: 5rem; - width: calc(100% / 4); + width: calc(100% / 4 - (6/7*.1rem)); } #dashboard .seventh { min-height: 5rem; - width: calc(100% / 7); + width: calc(100% / 7 - (6/7*.1rem)); } #dashboard .third { min-height: 5rem; - width: calc(100% / 3); + width: calc(100% / 3 - (6/7*.1rem)); } #dashboard .session { border: .1rem solid #00c3f9; border-radius: .2rem; + white-space: nowrap; + display: flex; + flex-direction: row; + justify-content: space-between; padding: .1rem; - margin: .1rem; +} + +#dashboard .session a { overflow-x: hidden; - white-space: nowrap; text-overflow: ellipsis; } -#dashboard .session:only-child, -#dashboard .session:last-child, -#dashboard .session:last-of-type { - margin-bottom: 0; +#dashboard .session a:first-letter { + color: #066; } #dashboard .disabled { - color: #acc; - background-color: #bee; + /*color: #acc; + background-color: #bee;*/ + filter: grayscale(33%); } #dashboard .current { background-color: #cff; } +#dashboard .current h3 { + text-decoration: underline solid #00c3f9; +} + #dashboard .next { background-color: #eff; } @@ -571,12 +649,61 @@ p.message { } #dashboard .form { - border: .1rem solid #00c3f9; + margin: 0 0 0 .5rem; + display: flex; + flex-direction: column; + gap: .5rem; +} + +#dashboard .form a, +#dashboard .form h2 { + white-space: nowrap; + font-size: 1.17rem; + padding: .3rem; +} + +#dashboard .form section { + border: .05rem solid #00c3f9; border-radius: .2rem; +} + +#dashboard .form form { padding: .5rem; - margin-left: .5rem; + gap: .5rem; +} + +/* Weather + * TODO: drop +>24°C +#dashboard .cleary a::before { + content: "☀"; +} + +>17°C +#dashboard .sunny a::before { + content: "⛅"; +} + +>10°C +#dashboard .cloudy a::before { + content: "☁"; } +<=10°C +#dashboard .winty a::before { + content: "❄️"; +} + +>0mm +#dashboard .rainy a::before { + content: "🌂"; +} + +>2mm +#dashboard .stormy a::before { + content: "☔"; +}*/ + /* Regulation */ #regulation { } @@ -643,9 +770,14 @@ p.message { } /* viewport responsive hack */ -@media ( max-width: 850px ) { - #header { - flex-wrap: wrap; +@media ( max-width: 900px ) { + #header nav { + padding: 0 0 .5rem 0; + } + + #header nav a { + margin: .5rem .5rem 0 0; + white-space: nowrap; } #dashboard .calendar { @@ -662,6 +794,7 @@ p.message { #dashboard .form { margin: .5rem auto 0 auto; + flex-direction: row; } form label { @@ -672,11 +805,73 @@ p.message { form option, form optgroup, form select, - form textarea { + form textarea, + form section section { width: 20rem; } form button { width: 6rem; } + + .col label, + .col input, + .col option, + .col optgroup, + .col select, + .col textarea { + width: 12rem; + } + + .col button { + width: 12rem; + box-sizing: fit-content; + } + + #dashboard .seventh:nth-child(7n+1), + #dashboard .seventh:nth-child(7n+2), + #dashboard .seventh:nth-child(7n+3), + #dashboard .seventh:nth-child(7n+4) { + width: calc(100% / 4 - (6/7*.1rem)); + } + + #dashboard .seventh:nth-child(7n+5), + #dashboard .seventh:nth-child(7n+6), + #dashboard .seventh:nth-child(7n+7) { + width: calc(100% / 3 - (6/7*.1rem)); + } +} + +@media ( max-width: 600px ) { + form input, + form option, + form optgroup, + form select, + form textarea, + form section section { + width: 14rem; + } + + #header { + flex-direction: column; + } + #header nav { + justify-content: space-between; + padding: 0 .5rem 0 0; + } + #header nav a { + width: auto; + margin: 0 0 .5rem .5rem; + } + + #dashboard .seventh:nth-child(n) { + width: calc(100% / 2 - (6/7*.1rem)); + } + + #dashboard .seventh:nth-child(7n) { + width: calc(100%); + } +} + +@media ( max-width: 500px ) { }