X-Git-Url: https://git.rapsys.eu/airbundle/blobdiff_plain/bfd7fa5ffd7e23d925f2dd80a8734e97a0abcec6..fa5c64919ccc6d11210ff7a07e2ebbf386f5de9a:/Resources/public/css/screen.css?ds=sidebyside diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index c63abc3..24248d5 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -1,6 +1,6 @@ /* Reset link */ a { - text-decoration: none; + /*text-decoration: none;*/ color: #066; } @@ -38,41 +38,92 @@ 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; +} + +header { + margin: 0 0 .5rem; +} + +header h2 { + margin: 0; + padding: .5rem .5rem .3rem; + border-bottom: 0 none; +} + +nav strong { + display: block; + font-size: 1.17rem; + margin: 0 0 .5rem; + padding: .4rem; +} + +h2, h3, h4, h5, header, nav strong { + background-color: #cff; + border-bottom: .1rem solid #00c3f9; +} + +strong { + font-weight: bold; +} + +p { + margin: 0 .5rem .3rem; + font-size: .9rem; +} + +pre { + margin: 0 .5rem .3rem; + font-size: .8rem; +} + +dl { + margin: 0 .5rem .5rem; +} + +dl:first-child, +dl:only-child, +dl:first-of-type { + margin-top: .5rem; } -p, dt { - font-size: 1rem; + font-size: .9rem; + font-weight: bold; } dd { font-size: .9rem; + margin-left: 1rem; } body { @@ -81,6 +132,33 @@ body { color: #066; } +nav, +section, +article { + 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,13 +183,10 @@ form { display: flex; flex-direction: column; flex-wrap: wrap; + margin: 0 .5rem .5rem; text-align: center; } -/*form header .message { - margin: 0; -}*/ - form .row { flex-direction: row; } @@ -130,21 +205,8 @@ form div:last-of-type { margin-bottom: 0; } -/*form section div { - display: flex; - flex-direction: row; - align-content: space-around; - justify-content: center; -} - -form section section { - display: flex; - flex-direction: column; -}*/ - form label { width: 12rem; - /*padding: .2rem 1rem .2rem 0;*/ padding-right: 1rem; text-align: right; } @@ -157,6 +219,7 @@ form textarea, form section section { width: 24rem; padding: .1rem; + margin: 0 auto; } form select { @@ -171,6 +234,10 @@ form button { } form .message { + margin: 0 0 .5rem 0; +} + +form div .message { margin: .25rem 0 0 0; } @@ -180,6 +247,7 @@ form .message { padding-right: 0; padding-bottom: .2rem; text-align: center; + margin: 0 auto; } .col input, @@ -194,10 +262,6 @@ form .message { width: 8rem; } -/*.col section { - width: auto; -}*/ - .col .row { flex-direction: column; } @@ -209,54 +273,61 @@ form .message { /* Header */ #header { + background-color: transparent; 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 img { - margin: .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; +#header li { + display: flex; + flex: 1 1 auto; border-radius: .2rem; - padding: .25rem .5rem; - margin: 0 0 0 .5rem; 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 */ @@ -278,16 +349,20 @@ form .message { 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; + /*border-color: #c33333; + color: #c33333;*/ + border-color: #930; background-color: #f9c3c3; - color: #c33333; + color: #930; } .dangerous, @@ -327,9 +402,12 @@ p.message { .dangerous, .dangerous button, .dangerous select { - border-color: #c39333; + /*border-color: #c39333; background-color: #f9c333; - color: #936333; + color: #936333;*/ + border-color: #930; + background-color: #fc9; + color: #930; } .warning { @@ -352,397 +430,262 @@ p.message { #form, #recover, #regulation { - border: .1rem solid #00c3f9; border-radius: .5rem; + /*border: .1rem solid #00c3f9; margin: .5rem; margin-top: 0; display: flex; - flex-direction: column; + flex-direction: column;*/ } -#dashboard h2, -#form h2, -#recover h2, -#regulation h2 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: 0; - padding: .5rem; +.panel { + display: flex; + flex-direction: row; + margin: 0 .5rem .5rem; + gap: .5rem; } -#dashboard h3 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: 0; - padding: .3rem; +.grid { + display: grid; + border-style: solid; + border-color: #00c3f9; + border-radius: .2rem; + box-sizing: border-box; + border-collapse: collapse; + grid-gap: .1rem; + flex: 1 1 auto; } -#dashboard h4 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; +.grid article, +.grid section { + border-collapse: inherit; + border-color: inherit; + border-radius: inherit; + border-style: inherit; + border-width: .1rem; + box-sizing: inherit; + flex-grow: inherit; margin: 0; - padding: .2rem; -} - -#form form, -#recover form { - padding: .5rem; + min-height: 5rem; + overflow: hidden; } -/*#dashboard .calendar h3 { - margin: -.3rem; - margin-bottom: .3rem; -}*/ - -#dashboard .subgrid .cell { - padding: .3rem; +.grid h3 { + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -#dashboard .subgrid h4 { - margin: -.3rem; - margin-bottom: .3rem; +.grid ul { + display: block; + margin: .1rem; + font-size: .8rem; + list-style: none inside none; } -/*#dashboard h4 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: -.5rem; - margin-bottom: .5rem; +.grid li { + border-width: .1rem; + border-style: solid; + border-radius: .2rem; + white-space: nowrap; padding: .1rem; -}*/ - -#dashboard .panel { display: flex; + margin: 0 0 .1rem; flex-direction: row; - flex-wrap: nowrap; - place-content: space-between; - border: 0; - margin: 0; - padding: 0 .5rem .5rem .5rem; + justify-content: space-between; } -#dashboard .panel:only-child, -#dashboard .panel:first-child, -#dashboard .panel:first-of-type { - padding-top: .5rem; +.grid li a:first-letter { + color: inherit; } - -#dashboard .panel:only-child, -#dashboard .panel:last-child, -#dashboard .panel:last-of-type { - padding-bottom: .5rem; +/*XXX: required by ul display:block for overflow:hidden*/ +.grid li:only-child, +.grid li:last-child, +.grid li:last-of-type { + margin: 0; } -#dashboard .candidate section, -#dashboard .location section { - flex-direction: column; - flex-grow: 1; - border: .1rem solid #00c3f9; - border-radius: .3rem; - padding: 0; +.grid a { + overflow-x: hidden; + text-overflow: ellipsis; } -#dashboard .location h4 { - border-width: 0; +.grid p { + margin: 0 0 .3rem; } -#dashboard .grid { - display: flex; - flex-flow: row wrap; - border-style: solid; - border-color: #00c3f9; - border-radius: .2rem; - /*border-width: .1rem 0 0 .1rem;*/ - flex-grow: 1; - /*box-sizing: inherit;*/ - box-sizing: border-box; - border-collapse: collapse; - /*box-sizing: border-box; - display: table; - 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; +.grid p:only-child, +.grid p:last-child, +.grid p:last-of-type { + margin: 0; } - /*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; +.current, +.current h3 { + background-color: #cfc; + border-color: #008000; + color: #008000; } -#dashboard .dlgrid { - display: flex; - flex-flow: row wrap; - gap: .5rem; +.current h3:first-letter { + color: #00b000; } -#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; +.granted, +.granted a { + background-color: #cff; + border-color: #00c3f9; } -#dashboard dl:first-child, -#dashboard dl:only-child, -#dashboard dl:first-of-type { - margin-top: .5rem; +.disputed, +.disputed a { + border-color: #930; + background-color: #fc9; + color: #930; } -#dashboard dt { - font-size: .9rem; - font-weight: bold; +.canceled, +.canceled a, +.canceled h2, +.canceled header { + color: #963; + background-color: #fddddd; + border-color: #963; } -#dashboard dd { - font-size: .9rem; - margin-left: 1rem; +.locked, +.locked a { + border-color: #930; + background-color: #f9c3c3; + color: #930; } -#dashboard ul { - /*padding: 0 .1rem;*/ - margin: .1rem; +.pending, +.pending a { + background-color: #ccc; + border-color: #066; } -#dashboard li { - font-size: .8rem; - margin-bottom: .1rem; +.highlight, +.highlight a { + border-color: #3333c3; + background-color: #c3c3f9; + color: #3333c3; } -#dashboard li:only-child, -#dashboard li:last-child { - margin-bottom: 0; +.disabled { + filter: grayscale(66%); } -#dashboard .subgrid { - display: flex; - flex-flow: row wrap; - border-style: solid; - border-color: #00c3f9; - border-width: .1rem 0 0 .1rem; - border-radius: .2rem; - flex-grow: 1; - box-sizing: inherit; - box-sizing: border-box; - border-collapse: collapse; - margin: .5rem; +.calendar a { + display: grid; + /*grid-template-columns: 1fr auto fit-content(1fr);*/ + grid-template-columns: max-content 1fr max-content; + flex: 1 1 auto; + grid-gap: .1rem; } -#dashboard .subgrid:only-child, -#dashboard .subgrid:last-child, -#dashboard .subgrid:last-of-type { - margin-bottom: 0; +.calendar .reducible { + overflow-x: hidden; + text-overflow: ellipsis; + text-align: center; } -#dashboard .cell { - border-color: inherit; - border-style: inherit; - border-width: .1rem; - border-radius: inherit; - flex-grow: inherit; - box-sizing: inherit; - border-collapse: inherit; +.calendar .info { + line-height: 1rem; } -#dashboard .subgrid .cell { - border-radius: 0; - border-width: 0 .1rem .1rem 0; -} -#dashboard .subgrid .cell:only-child, -#dashboard .subgrid .cell:last-child, -#dashboard .subgrid .cell:last-of-type { - border-radius: inherit; +.calendar .pseudonym { + grid-column: span 3; } -#dashboard .fourth { - min-height: 5rem; - width: calc(100% / 4 - (6/7*.1rem)); +.seven { + grid-template-columns: repeat(7, 1fr); } -#dashboard .seventh { - min-height: 5rem; - width: calc(100% / 7 - (6/7*.1rem)); +.four { + grid-template-columns: repeat(4, 1fr); } -#dashboard .third { - min-height: 5rem; - width: calc(100% / 3 - (6/7*.1rem)); +.three { + grid-template-columns: repeat(3, 1fr); } -#dashboard .session { - border: .1rem solid #00c3f9; - border-radius: .2rem; - white-space: nowrap; - display: flex; - flex-direction: row; - justify-content: space-between; - padding: .1rem; +.two { + grid-template-columns: repeat(2, 1fr); } -#dashboard .session a { - overflow-x: hidden; +.location h3 { + border-style: none; + flex: 1 1 auto; + white-space: nowrap; + overflow: hidden; text-overflow: ellipsis; } -#dashboard .session a:first-letter { - color: #066; -} - -#dashboard .disabled { - /*color: #acc; - background-color: #bee;*/ - filter: grayscale(33%); -} - -#dashboard .current { - background-color: #cff; -} - -#dashboard .current h3 { - text-decoration: underline solid #00c3f9; +.location p { + margin: 0 .5rem .5rem; } -#dashboard .next { - background-color: #eff; +.location .grid article, +.location .grid section { + min-height: auto; } -#dashboard .pending { - background-color: #ccc; +.location form { + margin: .5rem auto; } -#dashboard .granted { - background-color: #cff; - /*background-color: #33b679; - border-color: #33b679;*/ +.location form .row { + flex-direction: column; } -#dashboard .disputed { - background-color: #fcc; +.location form div { + margin-left: auto; + margin-right: auto; } -#dashboard .orphaned { - background-color: #fc9; +.location label { + width: 20rem; + padding-right: 0; + text-align: center; } -#dashboard .highlight { - border-color: #3333c3; - background-color: #c3c3f9; - color: #3333c3; +.location input, +.location textarea { + width: 20rem; + margin: 0 .1rem; } -#dashboard .form { - margin: 0 0 0 .5rem; +.form { + margin: 0; display: flex; flex-direction: column; gap: .5rem; } -#dashboard .form a, -#dashboard .form h2 { - white-space: nowrap; +.form h2 { font-size: 1.17rem; - padding: .3rem; + padding: .4rem; +} + +.form a { + white-space: nowrap; } -#dashboard .form section { +.form section { + margin: 0; border: .05rem solid #00c3f9; border-radius: .2rem; + width: 100%; } -#dashboard .form form { - padding: .5rem; +.form form { 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 { -} - -#regulation dl { - /*display: flex; - flex-direction: row; - justify-content: space-around; - padding-bottom: .5rem;*/ - padding: .25rem; - margin-bottom: .5rem; -} - -#regulation dt { - font-size: .9rem; - font-weight: bold; - padding-bottom: .2rem; -} - -#regulation dd { - font-size: .9rem; - margin-left: 1.5rem; -} - -#regulation dd:before { -} - -#regulation dl:only-child, -#regulation dl:last-child, -#regulation dl:last-of-type, -#regulation dt:only-child, -#regulation dt:last-child, -#regulation dt:last-of-type, -#regulation dd:only-child, -#regulation dd:last-child, -#regulation dd:last-of-type { - margin-bottom: 0; -} - /* Footer */ #footer { border: .1rem solid #00c3f9; @@ -757,10 +700,6 @@ p.message { background-color: #cff; } -#footer details { - font-weight: bold; -} - #footer summary::after { display: none; } @@ -769,36 +708,32 @@ p.message { display: none; } -/* 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; - } +#footer ul { + list-style: none inside none; + margin: 0; +} - #dashboard .calendar { - place-content: center; - flex-direction: column; - flex-wrap: wrap; +/* viewport responsive hack */ +@media ( max-width: 1400px ) { + .location label, + .location input, + .location textarea { + width: 12rem; } +} - #dashboard .panel:only-child, - #dashboard .panel:last-child, - #dashboard .panel:last-of-type { - margin-bottom: .5rem; +@media ( max-width: 900px ) { + .panel { + flex-flow: column wrap; } - #dashboard .form { - margin: .5rem auto 0 auto; + .form { flex-direction: row; } form label { width: 6rem; + line-height: 2rem; } form input, @@ -808,10 +743,12 @@ p.message { form textarea, form section section { width: 20rem; + line-height: 2rem; } form button { width: 6rem; + line-height: 2rem; } .col label, @@ -825,24 +762,43 @@ p.message { .col button { width: 12rem; - box-sizing: fit-content; } - #dashboard .seventh:nth-child(7n+1), + .seven { + grid-template-columns: repeat(4, 1fr); + } + + .calendar .sunday { + grid-column: span 2; + } + + /*.grid section:nth-child(7n) { + grid-column: span 2; + }*/ + + .four { + grid-template-columns: repeat(3, 1fr); + } + + /*#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, @@ -850,28 +806,87 @@ 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; + + .seven { + grid-template-columns: repeat(2, 1fr); + } + + /*.grid section:nth-child(7n) { + grid-column: span 2; + margin-bottom: .5rem; + } + + .grid section:only-child, + .grid section:last-child, + .grid section:last-of-type { + margin-bottom: 0; + }*/ + + .calendar .sunday { + margin-bottom: .5rem; + } + + .calendar .sunday:only-child, + .calendar .sunday:last-child { + margin-bottom: 0; } - #header nav a { - width: auto; - margin: 0 0 .5rem .5rem; + + .four, + .three { + grid-template-columns: repeat(2, 1fr); } - #dashboard .seventh:nth-child(n) { - width: calc(100% / 2 - (6/7*.1rem)); + /*#dashboard .seventh:nth-child(n) { + width: calc(100% / 2 - .1rem); } #dashboard .seventh:nth-child(7n) { width: calc(100%); + }*/ +} + +@media ( max-width: 450px ) { + form .row, + .grid, + .form, + #footer { + flex-direction: column; + } + + .seven { + grid-template-columns: repeat(1, 1fr); + } + + /*.grid section:nth-child(n) { + grid-column: auto; + }*/ + .calendar .sunday { + grid-column: auto; + } + + .four, + .three { + grid-template-columns: repeat(1, 1fr); } } -@media ( max-width: 500px ) { +@media ( max-width: 260px ) { + .col label, + .col input, + .col option, + .col optgroup, + .col select, + .col textarea { + width: 10rem; + } + + .col button { + width: 10rem; + } }