X-Git-Url: https://git.rapsys.eu/.gitweb.cgi/airbundle/blobdiff_plain/f35ed1ffc7729083cb671250b01589351f2f5b4c..672a568871fb5f23f6653d94226b98efbbe93ef5:/Resources/public/css/screen.css diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index c1016d9..6d7d54c 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; } @@ -20,49 +20,110 @@ a::first-letter { /* Font styling */ html, body, dd, li, p, td { - font-family: 'Droid Sans', sans-serif; + /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif; + font-display: swap; } -button, code, input, option, pre, select, textarea { +button, code, input, option, optgroup, pre, select, textarea { font-family: 'Droid Sans Mono', monospace; + font-display: swap; } dt, h1, h2, h3, h4, h5, h6, label, legend, th, details { font-family: 'Droid Serif', serif; + font-display: swap; } /* 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; +} + +dt { + font-size: .9rem; + font-weight: bold; +} + +dd { + font-size: .9rem; + margin-left: 1rem; } body { @@ -71,493 +132,559 @@ 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; + white-space: nowrap; +} + +button, +input, +select, +option, +optgroup, +textarea { + border: .05rem solid #00c3f9; + border-radius: .2rem; + font-size: .75rem; + color: #066; + background-color: transparent; + box-sizing: border-box; +} + +form { + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin: 0 .5rem .5rem; + text-align: center; +} + +form .row { + flex-direction: row; +} + +form div { + display: flex; + align-content: space-around; + justify-content: center; + flex-direction: column; + margin-bottom: .5rem; +} + +form div:only-child, +form div:last-child, +form div:last-of-type { + margin-bottom: 0; +} + +form label { + width: 12rem; + padding-right: 1rem; + text-align: right; +} + +form input, +form option, +form optgroup, +form select, +form textarea, +form section section { + width: 24rem; + padding: .1rem; + margin: 0 auto; +} + +form select { + padding: 0 .1rem .1rem .1rem; +} + +form button { + width: 10rem; + /*margin: .5rem auto 0 auto;*/ + margin: 0 auto; + padding: 0 .1rem .2rem .1rem; +} + +form .message { + margin: 0 0 .5rem 0; +} + +form div .message { + margin: .25rem 0 0 0; +} + +/* Vertical form */ +.col label { + width: 8rem; + padding-right: 0; + padding-bottom: .2rem; + text-align: center; + margin: 0 auto; +} + +.col input, +.col option, +.col optgroup, +.col select, +.col textarea { + width: 8rem; +} + +.col button { + width: 8rem; +} + +.col .row { + flex-direction: column; +} + +.col div.date { + flex-direction: row; + justify-content: space-between; +} + /* Header */ #header { + background-color: transparent; border: .1rem solid #00c3f9; border-top: 0; border-radius: 0 0 .5rem .5rem; - margin: .5rem; - margin-top: 0; - padding: .5rem; - left: 0; - right: 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 { - order: 0; padding: 0; - margin: 0; - vertical-align: middle; + margin: auto; white-space: nowrap; + width: 171px; + height: 32px; } -#header h1 a { - display: flex; +#header h2 { + display: none; } -/*#header h2 { - order: 1; - font-size: 1.5rem; +#header nav { + display: flex; + flex: 1 1 auto; + border-style: none; margin: 0; - white-space: nowrap; } -#header h2:before { - content: ">\00a0"; -}*/ - -#header nav { - order: 3; - margin-left: auto; +#header ul { display: flex; + flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; - align-items: center; - justify-content: flex-end; + margin: 0; + gap: .5rem; } -#header nav h2 { - display: none; +#header li { + display: flex; + flex: 1 1 auto; + border-radius: .2rem; + border: .1rem solid #00c3f9; + background-color: #cff; + justify-content: center; } -#header nav a { +#header ul a { text-align: center; - border-radius: .25rem; - padding: .375rem .5rem .25rem .5rem; - margin: 0 0 .1rem .5rem; - border: .1rem solid #00c3f9; font-weight: bold; - background-color: #cff; } /* Message */ -div.error::before, -div.error::after { - content: "⚠"; - line-height: 100%; - margin: auto 0; -} - -div.error { +.message { + margin: 0 .5rem .5rem; display: flex; flex-direction: row; justify-content: space-between; - border: .05rem solid #c33333; - background-color: #f9c3c3; - color: #c33333; font-size: .9rem; padding: .2rem; border-radius: .2rem; text-align: center; + border: .05rem solid transparent; } -div.flash { - margin: 0 .5rem .5rem; -} - -/*ul#error::before, -ul#error::after, -ul.error::before, -ul.error::after, -ul#notice::before, -ul#notice::after { - content: "⚠"; - padding: .1rem .5rem 0 .5rem; - position: absolute; -} - -ul#error::before, -ul#error::after { - padding-top: .2rem; +.message::before, +.message::after { + margin: auto 0; + padding: 0 .25rem; } -ul#notice::before, -ul#notice::after { - content: "ℹ"; - padding-top: .3rem; +.message ul { + margin: 0; + list-style: none inside none; + gap: .1rem; } -ul#notice::after, -ul#error::after { - margin-left: 37.8rem; +.mortal, +.mortal button, +.mortal select { + /*border-color: #c33333; + color: #c33333;*/ + border-color: #930; + background-color: #f9c3c3; + color: #930; } -ul.error::after { - margin-left: 34rem; +.dangerous, +.mortal { + border-radius: .2rem; + padding: .5rem 0; } -ul#notice, -ul#error, -ul.error { - display: flex; - flex-direction: column; - justify-content: center; - box-sizing: border-box; - text-align: center; - border: .05rem solid #c33333; +.error { + border-color: #c33333; background-color: #f9c3c3; color: #c33333; - font-size: .9rem; - padding: .2rem; - border-radius: .2rem; - width: 40rem; - margin: 0 auto .5rem auto; } -ul.error { - width: 36rem; - margin: .2rem 0 0 0; +.error::before, +.error::after { + /*XXX: display /!\ symbol */ + content: "⚠"; } -ul#notice { - border: .05rem solid #3333c3; +.notice { + border-color: #3333c3; background-color: #c3c3f9; color: #3333c3; } -ul.error { - margin-top: .2rem; -}*/ +.notice::before, +.notice::after { + /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm + * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + /*XXX: display i symbol */ + content: "ℹ"; + /*XXX: display # symbol */ + /*content: "⌘";*/ +} -/* Content */ -#form, -#content, -#policy, -#dashboard { - border: .1rem solid #00c3f9; - border-radius: .5rem; - margin: .5rem; - margin-top: 0; - overflow: hidden; - padding: .5rem; +.dangerous, +.dangerous button, +.dangerous select { + /*border-color: #c39333; + background-color: #f9c333; + color: #936333;*/ + border-color: #930; + background-color: #fc9; + color: #930; } -section h2 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: -.5rem; - margin-bottom: .5rem; - padding: .5rem; - padding-bottom: .5rem; +.warning { + border-color: #c39333; + background-color: #f9c333; + color: #936333; } -section h3 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: -.45rem; - margin-bottom: .45rem; - padding: .45rem; - padding-bottom: .5rem; +.warning::before, +.warning::after { + /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm + * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + content: "?"; + /*XXX: display # symbol */ + /*content: "⌘";*/ } -section h4 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: -.25rem; - margin-bottom: .25rem; - padding: .4rem; +/* Dashboard */ +#dashboard, +#form, +#recover, +#regulation { + border-radius: .5rem; + /*border: .1rem solid #00c3f9; + margin: .5rem; + margin-top: 0; + display: flex; + flex-direction: column;*/ } -/* Form */ -form { +.panel { display: flex; - flex-direction: column; - border: .05rem solid #00c3f9; - border-radius: .2rem; - padding: .5rem; + flex-direction: row; + margin: 0 .5rem .5rem; + gap: .5rem; } -form section { - margin-bottom: 1rem; +.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; +} + +.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; + min-height: 5rem; + overflow: hidden; } -form section:only-child, -form section:last-child, -form section:last-of-type { - margin-bottom: .5rem; +.grid h3 { + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -form section section, -form section section:only-child, -form section section:last-child, -form section section:last-of-type { - width: 50%; - margin-bottom: 0; +.grid ul { + display: block; + margin: .1rem; + font-size: .8rem; + list-style: none inside none; } -form div { +.grid li { + border-width: .1rem; + border-style: solid; + border-radius: .2rem; + white-space: nowrap; + padding: .1rem; display: flex; + margin: 0 0 .1rem; flex-direction: row; - justify-content: center; - margin-bottom: .5rem; + justify-content: space-between; } -form div:only-child, -form div:last-child, -form div:last-of-type { - margin-bottom: 0; +.grid li a:first-letter { + color: inherit; } -form section div.error { - margin: 0 1rem; +/*XXX: required by ul display:block for overflow:hidden*/ +.grid li:only-child, +.grid li:last-child, +.grid li:last-of-type { + margin: 0; } -form section section div.error { - margin: .25rem 0 0 0; +.grid a { + overflow-x: hidden; + text-overflow: ellipsis; } -label { - min-width: 10rem; - font-size: .85rem; - padding: .2rem 1rem .2rem 0; - text-align: right; - white-space: nowrap; +.grid p { + margin: 0 0 .3rem; } -button, -input, -select, -textarea { - box-sizing: border-box; - width: 100%; - padding: .1rem; - border: .05rem solid #00c3f9; - border-radius: .2rem; - font-size: .8rem; - color: #066; +.grid p:only-child, +.grid p:last-child, +.grid p:last-of-type { + margin: 0; } -button.submit { - width: 25%; - min-width: 8rem; - margin: 0 auto; - padding: .2rem .1rem; +.current, +.current h3 { + background-color: #cfc; + border-color: #008000; + color: #008000; } -/* Vertical form */ -.form_col { - margin-left: .5rem; - width: 10rem; +.current h3:first-letter { + color: #00b000; } -.form_col div { - flex-direction: column; +.granted, +.granted a { + background-color: #cff; + border-color: #00c3f9; } -.form_col div.error { - flex-direction: row; +.disputed, +.disputed a { + border-color: #930; + background-color: #fc9; + color: #930; } -.form_col label { - text-align: center; +.canceled, +.canceled a, +.canceled h2, +.canceled header { + color: #963; + background-color: #fddddd; + border-color: #963; } -.form_col section section, -.form_col section section:only-child, -.form_col section section:last-child, -.form_col section section:last-of-type { - width: auto; +.locked, +.locked a { + border-color: #930; + background-color: #f9c3c3; + color: #930; } -.form_col div.date { - flex-direction: row; - justify-content: space-between; +.pending, +.pending a { + background-color: #ccc; + border-color: #066; } -/* Dashboard */ -#dashboard .panel { - display: flex; - flex-direction: row; - flex-wrap: wrap; - place-content: space-between; +.highlight, +.highlight a { + border-color: #3333c3; + background-color: #c3c3f9; + color: #3333c3; } -#dashboard .grid { - display: table; - border: .05rem solid #00c3f9; - flex-grow: 1; - border-radius: .2rem; /* marche pas sur chrome */ - table-layout: fixed; - width: calc(100% - 12rem); - border-collapse: collapse; +.disabled { + filter: grayscale(66%); } -#dashboard .cell { - display: table-cell; - text-align: left; - border: .05rem solid #00c3f9; - font-size: initial; - height: 8rem; +.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 dl.cell { - height: 3rem; +.calendar .reducible { + overflow-x: hidden; + text-overflow: ellipsis; + text-align: center; } -#dashboard .cell h3 { - font-size: 1rem; - padding: .25rem; - margin: 0; +.calendar .info { + line-height: 1rem; + text-align: right; } -#dashboard .cell dd { - text-align: center; +.calendar .pseudonym { + grid-column: span 2; } -#dashboard .seventh { - width: calc(100% / 7); +.seven { + grid-template-columns: repeat(7, 1fr); } -#dashboard .disabled { - color: #acc; - background-color: #bee; +.four { + grid-template-columns: repeat(4, 1fr); } -#dashboard .current { - background-color: #cff; +.three { + grid-template-columns: repeat(3, 1fr); } -#dashboard .next { - background-color: #eff; +.two { + grid-template-columns: repeat(2, 1fr); } -#dashboard .session { - border-radius: .2rem; - border: .1rem solid #00c3f9; - font-size: .8rem; - padding: .2rem; - margin: 0 .1rem .1rem .1rem; - overflow-x: hidden; +.location h3 { + border-style: none; + flex: 1 1 auto; white-space: nowrap; + overflow: hidden; text-overflow: ellipsis; } -#dashboard .pending { - background-color: #ccc; -} - -#dashboard .granted { - background-color: #cff; - /*background-color: #33b679; - border-color: #33b679;*/ +.location p { + margin: 0 .5rem .5rem; } -#dashboard .disputed { - background-color: #fcc; +.location .grid article, +.location .grid section { + min-height: auto; } -#dashboard .orphaned { - background-color: #fc9; +.location form { + margin: .5rem auto; } -/* Policy */ -#policy { - display: flex; +.location form .row { flex-direction: column; - /*border: .1rem solid #00c3f9; - border-radius: .5rem; - margin: .5rem; - margin-top: 0; - overflow: hidden; - padding: .5rem;*/ } - -/*#policy h4 { - background-color: #cff; - border-bottom: .1rem solid #00c3f9; - margin: -.24rem -.24rem .24rem -.24rem; - padding: .24rem; - padding-bottom: .3rem; -}*/ - -#policy section { - display: flex; - flex-direction: column; - border: .05rem solid #00c3f9; - border-radius: .2rem; - padding: .5rem; - margin-bottom: 1rem; -} - -#policy section section { - padding: .25rem; - padding-bottom: .5rem; - margin-bottom: .5rem; +.location form div { + margin-left: auto; + margin-right: auto; } -#policy section:only-child, -#policy section:last-child, -#policy section:last-of-type { - margin-bottom: .5rem; +.location label { + width: 20rem; + padding-right: 0; + text-align: center; } -#policy section section:only-child, -#policy section section:last-child, -#policy section section:last-of-type { - margin-bottom: 0; +.location input, +.location textarea { + width: 20rem; + margin: 0 .1rem; } -/*#policy div { +.form { + margin: 0; display: flex; - flex-direction: row; - justify-content: space-around; - margin-bottom: .5rem; -} - -#policy div:only-child, -#policy div:last-child, -#policy div:last-of-type { - margin-bottom: 0; -}*/ -/* - * XXX: TODO: - * see https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl - * see https://www.w3.org/Style/Examples/007/fonts.fr.html - * see https://fonts.googleapis.com/css?family=Droid+Sans:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Sans+Mono:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Serif:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i - * see https://fonts.google.com/?query=droi - * see https://fonts.google.com/specimen/Inconsolata - * see https://fonts.google.com/specimen/Tangerine%20light,light+italic+regular+semi-bold+bold+extra-bold - * see https://fonts.google.com/?selection.family=Roboto:100i - * see https://developers.google.com/fonts/docs/getting_started - */ - -#policy dl { - /*display: flex; - flex-direction: row; - justify-content: space-around; - padding-bottom: .5rem;*/ - padding: .25rem; - margin-bottom: .5rem; + flex-direction: column; + gap: .5rem; } -#policy dt { - font-size: .9rem; - font-weight: bold; - padding-bottom: .2rem; +.form h2 { + font-size: 1.17rem; + padding: .4rem; } -#policy dd { - font-size: .9rem; - margin-left: 1.5rem; +.form a { + white-space: nowrap; } -#policy dd:before { +.form section { + margin: 0; + border: .05rem solid #00c3f9; + border-radius: .2rem; + width: 100%; } -#policy dl:only-child, -#policy dl:last-child, -#policy dl:last-of-type, -#policy dt:only-child, -#policy dt:last-child, -#policy dt:last-of-type, -#policy dd:only-child, -#policy dd:last-child, -#policy dd:last-of-type { - margin-bottom: 0; +.form form { + gap: .5rem; } /* Footer */ @@ -574,10 +701,6 @@ button.submit { background-color: #cff; } -#footer details { - font-weight: bold; -} - #footer summary::after { display: none; } @@ -586,27 +709,185 @@ button.submit { display: none; } +#footer ul { + list-style: none inside none; + margin: 0; +} + /* viewport responsive hack */ -@media ( max-width: 650px ) { +@media ( max-width: 1400px ) { + .location label, + .location input, + .location textarea { + width: 12rem; + } +} + +@media ( max-width: 900px ) { + .panel { + flex-flow: column wrap; + } + + .form { + flex-direction: row; + } + + form label { + width: 6rem; + line-height: 2rem; + } + + form input, + form option, + form optgroup, + form select, + form textarea, + form section section { + width: 20rem; + line-height: 2rem; + } + + form button { + width: 6rem; + line-height: 2rem; + } + + .col label, + .col input, + .col option, + .col optgroup, + .col select, + .col textarea { + width: 12rem; + } + + .col button { + width: 12rem; + } + + .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 - (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 - (2/3*.1rem)); + }*/ +} + +@media ( max-width: 600px ) { + form label { + margin: 0 auto; + } + + form input, + form option, + form optgroup, + form select, + form textarea, + form section section { + width: 14rem; + margin: 0 auto; + } + #header { - flex-wrap: wrap; + flex-direction: column; + } + + .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; } - #dashboard .panel { - place-content: center; + .calendar .sunday:only-child, + .calendar .sunday:last-child { + margin-bottom: 0; + } + + .four, + .three { + grid-template-columns: repeat(2, 1fr); + } + + /*#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; } - #dashboard .grid { - width: 100%; + .seven { + grid-template-columns: repeat(1, 1fr); } - #dashboard div.grid { - display: grid; + /*.grid section:nth-child(n) { + grid-column: auto; + }*/ + .calendar .sunday { + grid-column: auto; } - .form_col { - margin: .5rem auto 0 auto; + .four, + .three { + grid-template-columns: repeat(1, 1fr); } } +@media ( max-width: 260px ) { + .col label, + .col input, + .col option, + .col optgroup, + .col select, + .col textarea { + width: 10rem; + } + + .col button { + width: 10rem; + } +}