X-Git-Url: https://git.rapsys.eu/airbundle/blobdiff_plain/d1a3b2d7fc85ab0fab4c0361ab369eb7523832ca..f30bae21701a9fed737e81a426e58e76eb193b5e:/Resources/public/css/screen.css?ds=inline diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 622d099..9edb527 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -38,40 +38,56 @@ dt, h1, h2, h3, h4, h5, h6, label, legend, th, details { /* Default styling */ h1 { font-size: 2rem; - margin: 1.34rem 0; } h2 { font-size: 1.5rem; - margin: 1.245rem 0; + margin: 0 0 .5rem; + padding: .5rem; } h3 { font-size: 1.17rem; - margin: 1.17rem 0; + margin: 0 0 .5rem; + padding: .4rem; } h4 { font-size: 1rem; - margin: 1.33rem 0; + margin: 0 0 .5rem; + padding: .3rem; } h5 { font-size: .85rem; - margin: 1.386rem 0; + margin: 0 0 .5rem; + padding: .2rem; } h6 { font-size: .67rem; - margin: 1.561rem 0; + margin: 0 0 .5rem; + padding: .1rem; } -p, -dt { - font-size: 1rem; +nav strong { + display: block; + font-size: 1.17rem; + margin: 0 0 .5rem; + padding: .4rem; } -dd { +h2, h3, h4, h5, nav strong { + background-color: #cff; + border-bottom: .1rem solid #00c3f9; +} + +strong { + font-weight: bold; +} + +p { + margin: 0 .5rem .3rem; font-size: .9rem; } @@ -81,6 +97,32 @@ body { color: #066; } +nav, +section { + margin: 0 .5rem .5rem; + border: .1rem solid #00c3f9; + border-radius: .3rem; +} + +ul { + display: grid; + margin: 0 .5rem .3rem; + font-size: .9rem; + list-style: ' - ' inside none; + gap: .3rem; +} + +nav ul { + list-style: none inside none; + margin-bottom: .5rem; + gap: .5rem; +} + +nav ul ul { + margin-top: .5rem; + margin-bottom: 0; +} + /* Form */ label { font-size: .8rem; @@ -105,15 +147,19 @@ form { display: flex; flex-direction: column; flex-wrap: wrap; - line-height: normal; + margin: 0 .5rem .5rem; text-align: center; } -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; } @@ -123,7 +169,7 @@ form div:last-of-type { margin-bottom: 0; } -form section div { +/*form section div { display: flex; flex-direction: row; align-content: space-around; @@ -133,11 +179,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; } @@ -157,18 +204,20 @@ form select { 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 */ .col label { width: 8rem; - padding: .2rem 0; + padding-right: 0; + padding-bottom: .2rem; text-align: center; } @@ -184,11 +233,11 @@ form section .message { width: 8rem; } -.col section { +/*.col section { width: auto; -} +}*/ -.col div { +.col .row { flex-direction: column; } @@ -202,52 +251,57 @@ form section .message { border: .1rem solid #00c3f9; border-top: 0; border-radius: 0 0 .5rem .5rem; - margin: .5rem; - margin-top: 0; + margin: 0 .5rem .5rem; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; - /*min-width: 180px;*/ + line-height: 32px; + font-size: 32px; + padding: .5rem; + gap: .5rem; } #header h1 { padding: 0; margin: 0; - vertical-align: middle; white-space: nowrap; + width: 171px; + height: 32px; } -#header h1 a { - display: block; - padding: .5rem; +#header h2 { + display: none; } #header nav { display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: flex-end; - padding: .5rem; + flex: 1 1 auto; + border-style: none; + margin: 0; } -#header nav h2 { - display: none; +#header ul { + display: flex; + flex: 1 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin: 0; + gap: .5rem; } -#header nav a { - flex-grow: 1; - text-align: center; - border-radius: .25rem; - padding: .375rem .5rem .25rem .5rem; - margin: 0 0 0 .5rem; +#header li { + display: flex; + flex: 1 1 auto; + border-radius: .2rem; border: .1rem solid #00c3f9; - font-weight: bold; background-color: #cff; + justify-content: center; } -#header nav a:first-child { - margin: 0; +#header ul a { + text-align: center; + font-weight: bold; } /* Message */ @@ -265,13 +319,28 @@ form section .message { .message::before, .message::after { - line-height: 100%; margin: auto 0; padding: 0 .25rem; } -p.message { - margin: .5rem; +.message ul { + margin: 0; + list-style: none inside none; + gap: .1rem; +} + +.mortal, +.mortal button, +.mortal select { + border-color: #c33333; + background-color: #f9c3c3; + color: #c33333; +} + +.dangerous, +.mortal { + border-radius: .2rem; + padding: .5rem 0; } .error { @@ -302,6 +371,14 @@ p.message { /*content: "⌘";*/ } +.dangerous, +.dangerous button, +.dangerous select { + border-color: #c39333; + background-color: #f9c333; + color: #936333; +} + .warning { border-color: #c39333; background-color: #f9c333; @@ -319,74 +396,108 @@ p.message { /* Dashboard */ #dashboard, -#regulation, -#form { +#form, +#recover, +#regulation { border: .1rem solid #00c3f9; border-radius: .5rem; margin: .5rem; margin-top: 0; - overflow: hidden; display: flex; flex-direction: column; } -#dashboard h2, -#regulation h2, -#form h2 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; +.panel { + display: flex; + flex-direction: row; + margin: 0 .5rem .5rem; + gap: .5rem; +} + +.grid { + display: flex; + flex-flow: row wrap; + border-style: solid; + border-color: #00c3f9; + border-radius: .2rem; + flex: 1 1 auto; + box-sizing: border-box; + border-collapse: collapse; + gap: .1rem; +} + +.grid section { margin: 0; - padding: .5rem; } -#form h3, -#dashboard h3 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; +.grid h3 { margin: 0; - padding: .3rem; } -#dashboard h4 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; +.grid ul { + display: block; + margin: .1rem; + font-size: .8rem; + list-style: none inside none; +} + +.grid p { + margin: 0 0 .3rem; +} + +.grid p:only-child, +.grid p:last-child, +.grid p:last-of-type { margin: 0; - padding: .2rem; } -#form form { - padding: .5rem; +.form { + margin: 0; + display: flex; + flex-direction: column; + gap: .5rem; } -#form .recover { - border: .1rem solid #00c3f9; - border-radius: .3rem; - margin: 0 .5rem .5rem; +.form h2 { + font-size: 1.17rem; + padding: .4rem; } -/*#dashboard .calendar h3 { - margin: -.3rem; - margin-bottom: .3rem; -}*/ +.form a { + white-space: nowrap; +} -#dashboard .subgrid .cell { - padding: .3rem; +.form section { + margin: 0; + border: .05rem solid #00c3f9; + border-radius: .2rem; } -#dashboard .subgrid h4 { - margin: -.3rem; - margin-bottom: .3rem; +.form form { + gap: .5rem; } -/*#dashboard h4 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: -.5rem; - margin-bottom: .5rem; - padding: .1rem; -}*/ +#location section { + display: flex; + flex: 1 1 auto; + flex-direction: column; +} + +#location h3 { + margin: 0; + border-style: none; + flex: 1 1 auto; +} + +#location form { + margin-top: .5rem; +} -#dashboard .panel { +#location form label { + width: 4.5rem; +} + +/*#dashboard .panel { display: flex; flex-direction: row; flex-wrap: nowrap; @@ -407,7 +518,7 @@ p.message { #dashboard .panel:last-child, #dashboard .panel:last-of-type { padding-bottom: .5rem; -} +}*/ #dashboard .candidate section, #dashboard .location section { @@ -422,32 +533,17 @@ p.message { border-width: 0; } -#dashboard .grid { +/*#dashboard .grid { display: flex; flex-flow: row wrap; border-style: solid; border-color: #00c3f9; border-radius: .2rem; - /*border-width: .1rem 0 0 .1rem;*/ - line-height: normal; flex-grow: 1; - /*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; - border: 0 none; - width: fit-content; - border-collapse: collapse;*/ - /*width: calc(100% - 12rem); - border-collapse: collapse;*/ - /*width: calc(100% - 12rem);*/ gap: .1rem; -} +}*/ /*margin: 0; #dashboard .grid:only-child, @@ -456,15 +552,14 @@ p.message { margin-bottom: 0; }*/ -#dashboard .candidate .grid, +/*#dashboard .candidate .grid, #dashboard .location .grid { padding: .5rem; -} +}*/ #dashboard .dlgrid { display: flex; flex-flow: row wrap; - line-height: normal; gap: .5rem; } @@ -495,22 +590,6 @@ p.message { margin-left: 1rem; } -#dashboard ul { - /*padding: 0 .1rem;*/ - margin: .1rem; -} - -#dashboard li { - font-size: .8rem; - line-height: 1rem; - margin-bottom: .1rem; -} - -#dashboard li:only-child, -#dashboard li:last-child { - margin-bottom: 0; -} - #dashboard .subgrid { display: flex; flex-flow: row wrap; @@ -518,9 +597,7 @@ 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; border-collapse: collapse; margin: .5rem; @@ -554,7 +631,7 @@ p.message { #dashboard .fourth { min-height: 5rem; - width: calc(100% / 4 - (6/7*.1rem)); + width: calc(100% / 4 - (3/4*.1rem)); } #dashboard .seventh { @@ -564,7 +641,7 @@ p.message { #dashboard .third { min-height: 5rem; - width: calc(100% / 3 - (6/7*.1rem)); + width: calc(100% / 3 - (2/3*.1rem)); } #dashboard .session { @@ -628,15 +705,6 @@ p.message { color: #3333c3; } -#dashboard .form { - margin: 0 0 0 .5rem; - border: .05rem solid #00c3f9; - border-radius: .2rem; - padding: .5rem; - display: flex; - flex-direction: column; -} - /* Weather * TODO: drop >24°C @@ -734,36 +802,25 @@ p.message { display: none; } +#footer ul { + list-style: none inside none; + margin: 0; +} + /* viewport responsive hack */ @media ( max-width: 900px ) { - #header nav { - padding: 0 0 .5rem 0; - } - - #header nav a { - margin: .5rem .5rem 0 0; - white-space: nowrap; - } - - #dashboard .calendar { + .panel { place-content: center; - flex-direction: column; - flex-wrap: wrap; - } - - #dashboard .panel:only-child, - #dashboard .panel:last-child, - #dashboard .panel:last-of-type { - margin-bottom: .5rem; + flex-flow: column wrap; } - #dashboard .form { - margin: .5rem auto 0 auto; + .form { flex-direction: row; } form label { width: 6rem; + line-height: 2rem; } form input, @@ -773,10 +830,12 @@ p.message { form textarea, form section section { width: 20rem; + line-height: 2rem; } form button { width: 6rem; + line-height: 2rem; } .col label, @@ -790,24 +849,27 @@ p.message { .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)); + width: calc(100% / 4 - (3/4*.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)); + width: calc(100% / 3 - (2/3*.1rem)); } } @media ( max-width: 600px ) { + form label { + margin: 0 auto; + } + form input, form option, form optgroup, @@ -815,22 +877,15 @@ p.message { form textarea, form section section { width: 14rem; + margin: 0 auto; } #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)); + width: calc(100% / 2 - .1rem); } #dashboard .seventh:nth-child(7n) { @@ -838,5 +893,14 @@ p.message { } } -@media ( max-width: 500px ) { +@media ( max-width: 450px ) { + form .row, + .grid, + .form { + flex-direction: column; + } + + #dashboard .seventh:nth-child(n) { + width: calc(100%); + } }