X-Git-Url: https://git.rapsys.eu/airbundle/blobdiff_plain/e89600a4dab2eec40db4ef4eff8a772aff473798..45d4262949d2f96811d692cf1e6608c83963ea64:/Resources/public/css/screen.css?ds=sidebyside diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 24248d5..6a53959 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -1,104 +1,265 @@ /* Reset link */ a { /*text-decoration: none;*/ - color: #066; + color: #136; } a:hover { text-decoration: underline solid #00c3f9; } -h1::first-letter, -h2::first-letter, -h3::first-letter, -h4::first-letter, -h5::first-letter, -h6::first-letter, -a::first-letter { - color: #00c3f9; -} - /* Font styling */ html, body, dd, li, p, td { /* 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, 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; + font-size: 1.5rem; + margin: 0; + padding: 0 .6rem .6rem; } h2 { - font-size: 1.5rem; - margin: 0 0 .5rem; - padding: .5rem; + font-size: 1.17rem; + margin: 0; + padding: 0 .5rem .5rem; } h3 { - font-size: 1.17rem; - margin: 0 0 .5rem; - padding: .4rem; + font-size: 1rem; + margin: 0; + padding: 0 .4rem .4rem; } h4 { - font-size: 1rem; - margin: 0 0 .5rem; - padding: .3rem; + font-size: .85rem; + margin: 0; + padding: 0 .3rem .3rem; } h5 { - font-size: .85rem; - margin: 0 0 .5rem; - padding: .2rem; + font-size: .67rem; + margin: 0; + padding: 0 .2rem .2rem; } h6 { - font-size: .67rem; - margin: 0 0 .5rem; - padding: .1rem; + font-size: .5rem; + margin: 0; + padding: 0 .1rem .1rem; } -header { - margin: 0 0 .5rem; +ul { + list-style: ' - ' inside none; + margin: 0; + padding: 0 .5rem .5rem; } -header h2 { +li { + font-size: .9rem; margin: 0; - padding: .5rem .5rem .3rem; - border-bottom: 0 none; + padding: 0 .5rem .5rem; } -nav strong { +li:only-child, +li:last-child, +li:last-of-type { + padding-bottom: 0; +} + +p { + font-size: .9rem; + margin: 0; + padding: 0 .4rem .4rem; +} + +article, +section, +nav { + margin: 0 .5rem .5rem; + border: .1rem solid #00c3f9; + border-top: 0; + border-left: 0; + border-radius: .5rem; +} + +article article { + margin: 0 .3rem .3rem; + border-radius: .4rem; +} + +article article article { + margin: 0 .2rem .2rem; + border-radius: .3rem; +} + +article section a.link { display: block; - font-size: 1.17rem; - margin: 0 0 .5rem; - padding: .4rem; + text-align: center; + margin: 0 auto; + padding: .5rem; + /*display: flex; + align-items: center; + gap: .5rem;*/ +} + +article section a.link img { + /*width: 12rem;*/ + padding-right: .5rem; + text-align: right; + vertical-align: bottom; +} + +article section a.link span { + width: 24rem; + line-height: 50px; + /*flex: 1 1;*/ +} + +section { + border-radius: .4rem; +} + +section .center { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-bottom: .5rem; + /*display: block; + width: 24rem;*/ + /*margin: 0 auto;*/ + gap: .5rem; } -h2, h3, h4, h5, header, nav strong { +/*article { background-color: #cff; - border-bottom: .1rem solid #00c3f9; } -strong { - font-weight: bold; +article article { + background-color: white; } -p { - margin: 0 .5rem .3rem; - font-size: .9rem; +article article article { + border-radius: .3rem; + background-color: #cff; +}*/ + +header { + margin: 0 0 .5rem; + padding: .5rem; + border-radius: .4rem .4rem 0 0; + /*background-color: #369; + border-radius: inherit;*/ + background-color: #00c3f9; + color: #136; +} + +header h2, +header h3, +header h4, +header h5, +header h6, +header p { + padding-left: 0; + padding-right: 0; +} + +header h2:last-child, +header h3:last-child, +header h4:last-child, +header h5:last-child, +header h6:last-child, +header p:last-child { + padding-bottom: 0; +} + +/*p:only-child, +p:last-child, +p:last-of-type { + padding-bottom: 0; +}*/ + +/*header h2:first-child { + padding-top: .5rem; +} + +header h3:first-child { + padding-top: .4rem; +} + +header h4:first-child { + padding-top: .3rem; +} + +header h5:first-child { + padding-top: .2rem; +} + +header h6:first-child { + padding-top: .1rem; +} + +header p:last-child { + padding-top: 0; +}*/ + +/*article header { + border-radius: .4rem .4rem 0 0; +}*/ + +/*article article header { + border-radius: .3rem .3rem 0 0; + margin-bottom: .3rem; +} + +article article article header { + border-radius: .2rem .2rem 0 0; + margin-bottom: .2rem; +}*/ + +/*header h1, +header h2, +header h3, +header h4, +header h5, +header h6, +header p { + margin-bottom: 0; + padding-bottom: 0; +}*/ + +.ellipsis { + /*Required for ellipsis on h2/h3/h4 in header*/ + display: grid; + margin-bottom: 0; +} + +.ellipsis > * { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/*nav strong { + display: block; + font-size: 1.17rem; + margin: 0 0 .5rem; + padding: .4rem; +}*/ + +strong { + font-weight: bold; } pre { @@ -117,6 +278,7 @@ dl:first-of-type { } dt { + color: #369; font-size: .9rem; font-weight: bold; } @@ -126,38 +288,67 @@ dd { margin-left: 1rem; } -body { - display: flex; - flex-flow: column wrap; - color: #066; +.map figure, +.multimap figure, +.thumb figure { + text-align: center; } -nav, -section, -article { - margin: 0 .5rem .5rem; +.map img, +.multimap img, +.thumb img { + border-radius: .2rem; border: .1rem solid #00c3f9; - border-radius: .3rem; + aspect-ratio: 1; } -ul { - display: grid; - margin: 0 .5rem .3rem; - font-size: .9rem; - list-style: ' - ' inside none; - gap: .3rem; +.map dd { + margin: 0; +} + +.map dd img { + width: 100%; + width: calc(100% - .2rem); + height: auto; +} + +.thumb img { + width: 100%; + width: calc(100% - 1.2rem); +} + +.four .multimap { + grid-column: span 4; +} + +.three .multimap { + grid-column: span 3; +} + +.two .multimap { + grid-column: span 2; +} + +body { + display: flex; + flex-flow: column wrap; + color: #036; } nav ul { list-style: none inside none; - margin-bottom: .5rem; gap: .5rem; + /*margin: .5rem;*/ } nav ul ul { + padding-top: .5rem; +} + +/*nav ul ul { margin-top: .5rem; margin-bottom: 0; -} +}*/ /* Form */ label { @@ -179,6 +370,17 @@ textarea { box-sizing: border-box; } +optgroup { + border: none; +} + +/*option[selected='selected'],*/ +/*option:not(:checked),*/ +option:checked { + background-color: #cff; +} + + form { display: flex; flex-direction: column; @@ -187,10 +389,6 @@ form { text-align: center; } -form .row { - flex-direction: row; -} - form div { display: flex; align-content: space-around; @@ -205,10 +403,27 @@ form div:last-of-type { margin-bottom: 0; } +form div.row { + flex-direction: row; + gap: .5rem; + flex-wrap: wrap; +} + form label { width: 12rem; - padding-right: 1rem; + line-height: 1.3rem; + /*padding-right: 1rem;*/ text-align: right; + overflow-x: hidden; + text-overflow: ellipsis; +} + +form label.captcha { + line-height: normal; +} + +form label.captcha img { + height: 1.325rem; } form input, @@ -222,6 +437,24 @@ form section section { margin: 0 auto; } +form optgroup, +form option { + width: 100%; +} + +/*form optgroup { + width: 23.8rem; +} + +form option { + width: 23.6rem; +}*/ + +/*Checkbox input*/ +form input[type='checkbox'] { + width: 1.5rem; +} + form select { padding: 0 .1rem .1rem .1rem; } @@ -229,10 +462,15 @@ form select { form button { width: 10rem; /*margin: .5rem auto 0 auto;*/ - margin: 0 auto; + /*margin: 0 auto;*/ padding: 0 .1rem .2rem .1rem; } +/*form button img { + float: left; + padding: .5rem; +}*/ + form .message { margin: 0 0 .5rem 0; } @@ -242,6 +480,7 @@ form div .message { } /* Vertical form */ +.location .col label, .col label { width: 8rem; padding-right: 0; @@ -250,6 +489,8 @@ form div .message { margin: 0 auto; } +.location .col input, +.location .col textarea, .col input, .col option, .col optgroup, @@ -273,61 +514,84 @@ form div .message { /* Header */ #header { - background-color: transparent; - border: .1rem solid #00c3f9; + background-color: #cff; + border: .1rem solid #136; border-top: 0; + border-left: 0; border-radius: 0 0 .5rem .5rem; margin: 0 .5rem .5rem; display: flex; - flex-direction: row; - flex-wrap: nowrap; + flex-direction: column; justify-content: space-between; - line-height: 32px; - font-size: 32px; + font-weight: bold; + line-height: 45px; padding: .5rem; gap: .5rem; } -#header h1 { +#header div { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: .5rem; +} + +#logo { padding: 0; - margin: 0; white-space: nowrap; - width: 171px; - height: 32px; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + text-decoration: none; + display: flex; + font-family: 'Lemon', sans-serif; + font-size: 2rem; + line-height: 45px; + gap: .5rem; } -#header h2 { - display: none; +#logo img, +#logo span { + margin: 0 auto; } -#header nav { - display: flex; +#title { + margin: .25rem 0 0; + padding: 0; + border-bottom: 0 none; + text-align: right; flex: 1 1 auto; - border-style: none; - margin: 0; + font-family: 'Lemon', sans-serif; + font-weight: normal; + /*white-space: nowrap;*/ +} + +#title a { + text-decoration: none; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + /*overflow-x: hidden; + text-overflow: ellipsis;*/ } -#header ul { +#nav { display: flex; - flex: 1 1 auto; - flex-direction: row; flex-wrap: wrap; - margin: 0; gap: .5rem; + line-height: 2.5rem; + margin: 0; + border: 0 none; } -#header li { - display: flex; +#nav a { flex: 1 1 auto; + border: .1rem solid #136; + border-top: 0; + border-left: 0; border-radius: .2rem; - border: .1rem solid #00c3f9; - background-color: #cff; - justify-content: center; -} - -#header ul a { + background-color: #00c3f9; + color: #136; text-align: center; - font-weight: bold; + padding: 0 .25rem; } /* Message */ @@ -351,10 +615,15 @@ form div .message { .message ul { margin: 0; + padding: 0; list-style: none inside none; gap: .1rem; } +.message li { + padding: .25rem; +} + .mortal, .mortal button, .mortal select { @@ -430,7 +699,7 @@ form div .message { #form, #recover, #regulation { - border-radius: .5rem; + /*border-radius: .5rem;*/ /*border: .1rem solid #00c3f9; margin: .5rem; margin-top: 0; @@ -445,6 +714,9 @@ form div .message { gap: .5rem; } +.cell { +} + .grid { display: grid; border-style: solid; @@ -452,17 +724,19 @@ form div .message { border-radius: .2rem; box-sizing: border-box; border-collapse: collapse; - grid-gap: .1rem; flex: 1 1 auto; + margin: 0 0 auto 0; + padding: 0; + gap: .1rem; } .grid article, .grid section { border-collapse: inherit; - border-color: inherit; - border-radius: inherit; + /*border-radius: inherit;*/ border-style: inherit; - border-width: .1rem; + /*border-width: .1rem; + border-width: inherit;*/ box-sizing: inherit; flex-grow: inherit; margin: 0; @@ -470,19 +744,27 @@ form div .message { overflow: hidden; } -.grid h3 { +/*.grid header { + border-radius: .2rem .2rem 0 0; + margin-bottom: 0; +}*/ + +/*.grid ul { + margin: .1rem; + padding: .1rem; margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} +}*/ + +/*.grid section { + border-color: inherit; +}*/ -.grid ul { +/*.grid ul { display: block; margin: .1rem; font-size: .8rem; list-style: none inside none; -} +}*/ .grid li { border-width: .1rem; @@ -494,10 +776,8 @@ form div .message { margin: 0 0 .1rem; flex-direction: row; justify-content: space-between; -} - -.grid li a:first-letter { - color: inherit; + overflow-x: hidden; + text-overflow: ellipsis; } /*XXX: required by ul display:block for overflow:hidden*/ @@ -508,32 +788,38 @@ form div .message { } .grid a { + /*TODO: voir pourquoi on a besoin d'un overflow-y de merde, sans une putain de scrollbar s'affiche dans certaines conditions sur chrome, depuis le passage de deux lignes de grid à 3 !!!*/ + /*Est-ce parce que le city est pas expanded ???*/ + overflow-y: clip; overflow-x: hidden; text-overflow: ellipsis; } .grid p { - margin: 0 0 .3rem; + padding: 0 0 .3rem; + margin: 0; } .grid p:only-child, .grid p:last-child, .grid p:last-of-type { - margin: 0; + padding: 0; } -.current, -.current h3 { - background-color: #cfc; - border-color: #008000; - color: #008000; +.session header { + margin-bottom: .5rem; } -.current h3:first-letter { - color: #00b000; +.current { + filter: hue-rotate(-90deg) saturate(2); } -.granted, +.granted { + background-color: #cff; + border-color: #00c3f9; +} + +/*.granted, .granted a { background-color: #cff; border-color: #00c3f9; @@ -544,9 +830,29 @@ form div .message { border-color: #930; background-color: #fc9; color: #930; +}*/ + +.highlight { + filter: hue-rotate(60deg); +} + +.canceled { + filter: hue-rotate(180deg) grayscale(33%); +} + +.locked { + filter: hue-rotate(180deg); +} + +.pending { + filter: grayscale(33%); +} + +.disabled { + filter: grayscale(66%); } -.canceled, +/*.canceled, .canceled a, .canceled h2, .canceled header { @@ -569,22 +875,49 @@ form div .message { } .highlight, -.highlight a { +.highlight a, +.highlight h3, +.highlight h3 a { border-color: #3333c3; background-color: #c3c3f9; - color: #3333c3; + color: #606; +}*/ + +.calendar header { + margin-bottom: .1rem; + display: grid; } -.disabled { - filter: grayscale(66%); +.calendar h3 { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } +.calendar ul { + padding: 0 .1rem .1rem; +} + +/*.ellipsis { + / *Required for ellipsis on h2/h3/h4 in header* / + display: grid; + margin-bottom: 0; +} + +.ellipsis > * { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; +}*/ + .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; + /*XXX: reset to visible to prevent scroll*/ + overflow-x: visible; } .calendar .reducible { @@ -593,12 +926,28 @@ form div .message { text-align: center; } +.calendar .glyph { + font-family: 'Noto Emoji', 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif; +} + +.calendar .temperature, +.calendar .rain, +.calendar .rate { + line-height: 1rem; + text-align: right; +} + +.calendar .rate { + text-align: center; +} + .calendar .info { line-height: 1rem; + text-align: right; } .calendar .pseudonym { - grid-column: span 3; + grid-column: span 2; } .seven { @@ -617,23 +966,28 @@ form div .message { grid-template-columns: repeat(2, 1fr); } -.location h3 { +/*.city .grid h3, +.location .grid h3, +.city .grid h4, +.location .grid h4 { border-style: none; + margin: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.location p { - margin: 0 .5rem .5rem; -} - -.location .grid article, -.location .grid section { +.city .grid article, +.location .grid article { min-height: auto; + height: fit-content; } +.city .grid { + gap: .5rem; +}*/ + .location form { margin: .5rem auto; } @@ -678,7 +1032,7 @@ form div .message { .form section { margin: 0; border: .05rem solid #00c3f9; - border-radius: .2rem; + /*border-radius: .2rem;*/ width: 100%; } @@ -695,9 +1049,11 @@ form div .message { padding: .5rem; text-align: center; font-size: .8rem; + line-height: 2.5rem; display: flex; justify-content: space-between; background-color: #cff; + gap: .5rem; } #footer summary::after { @@ -713,6 +1069,23 @@ form div .message { margin: 0; } +#footer a, +#footer details { + padding: 0 .5rem; + border: .1rem solid #136; + border-top: 0; + border-left: 0; + border-radius: .2rem; + background-color: #00c3f9; + color: #136; + justify-content: center; +} + +#footer details a { + padding: 0; + border: 0 none; +} + /* viewport responsive hack */ @media ( max-width: 1400px ) { .location label, @@ -720,22 +1093,37 @@ form div .message { .location textarea { width: 12rem; } + + .session .three { + grid-template-columns: repeat(2, 1fr); + } } -@media ( max-width: 900px ) { +@media ( max-width: 1000px ) { .panel { + /*flex-flow: column-reverse wrap;*/ flex-flow: column wrap; } + .location .two { + grid-template-columns: repeat(2, 1fr); + } +} + +@media ( max-width: 900px ) { .form { flex-direction: row; } form label { - width: 6rem; line-height: 2rem; } + form label.captcha img { + height: auto; + padding: .25rem 0; + } + form input, form option, form optgroup, @@ -746,6 +1134,10 @@ form div .message { line-height: 2rem; } + form select { + height: 2.4rem; + } + form button { width: 6rem; line-height: 2rem; @@ -780,6 +1172,26 @@ form div .message { grid-template-columns: repeat(3, 1fr); } + .three { + grid-template-columns: repeat(2, 1fr); + } + + .two { + grid-template-columns: repeat(1, 1fr); + } + + .four .multimap { + grid-column: span 3; + } + + .three .multimap { + grid-column: span 2; + } + + .two .multimap { + grid-column: span 1; + } + /*#dashboard .seventh:nth-child(7n+1), #dashboard .seventh:nth-child(7n+2), #dashboard .seventh:nth-child(7n+3), @@ -794,6 +1206,18 @@ form div .message { }*/ } +@media ( max-width: 700px ) { + .session .three { + grid-template-columns: repeat(1, 1fr); + } + + .multimap img { + width: 100%; + width: calc(100% - .2rem); + height: auto; + } +} + @media ( max-width: 600px ) { form label { margin: 0 auto; @@ -805,11 +1229,11 @@ form div .message { form select, form textarea, form section section { - width: 14rem; + width: 12rem; margin: 0 auto; } - #header { + #logo { flex-direction: column; } @@ -837,11 +1261,26 @@ form div .message { margin-bottom: 0; } - .four, - .three { + .four { grid-template-columns: repeat(2, 1fr); } + .three { + grid-template-columns: repeat(1, 1fr); + } + + .four .multimap { + grid-column: span 2; + } + + .three .multimap { + grid-column: span 1; + } + + .location .two { + grid-template-columns: repeat(1, 1fr); + } + /*#dashboard .seventh:nth-child(n) { width: calc(100% / 2 - .1rem); } @@ -849,9 +1288,45 @@ form div .message { #dashboard .seventh:nth-child(7n) { width: calc(100%); }*/ + + /*.city .two, + .location .two { + grid-template-columns: 1fr; + } + + .city .grid article, + .location .grid article { + overflow: hidden; + }*/ } @media ( max-width: 450px ) { + #header div { + flex-direction: column; + } + + #title { + text-align: center; + } + + #logo { + flex-direction: row; + } + + dd, p, #footer { + font-size: 110%; + } + + a, dd, figcaption, #footer { + /*XXX: required to validate Tap targets are sized appropriately*/ + line-height: 3rem; + } + + figure, + .calendar a { + line-height: normal; + } + form .row, .grid, .form, @@ -859,6 +1334,10 @@ form div .message { flex-direction: column; } + form label { + text-align: center; + } + .seven { grid-template-columns: repeat(1, 1fr); } @@ -870,10 +1349,23 @@ form div .message { grid-column: auto; } - .four, - .three { + .four { grid-template-columns: repeat(1, 1fr); } + + .four .multimap { + grid-column: span 1; + } +} + +@media ( max-width: 320px ) { + #logo { + flex-direction: column; + } + + #title { + white-space: normal; + } } @media ( max-width: 260px ) {