X-Git-Url: https://git.rapsys.eu/airbundle/blobdiff_plain/d051ce7122f72007727a1040702c8bd7717a4a64..3ae948f1e2bcd932dee8b7ade9c1d151a617d776:/Resources/public/css/screen.css?ds=inline diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 6515930..b58e9ff 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -1,106 +1,153 @@ /* 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 0 .5rem; + padding: .5rem; } h2 { - font-size: 1.5rem; + font-size: 1.17rem; margin: 0 0 .5rem; - padding: .5rem; + padding: .4rem; } h3 { - font-size: 1.17rem; + font-size: 1rem; margin: 0 0 .5rem; padding: .4rem; } h4 { - font-size: 1rem; + font-size: .85rem; margin: 0 0 .5rem; padding: .3rem; } h5 { - font-size: .85rem; + font-size: .67rem; margin: 0 0 .5rem; padding: .2rem; } h6 { - font-size: .67rem; + font-size: .5rem; margin: 0 0 .5rem; padding: .1rem; } -header { - margin: 0 0 .5rem; +p { + font-size: .9rem; + margin: 0 0 .4rem; + padding: .4rem; +} + +article, +section, +nav { + margin: 0 .5rem .5rem; + border: .1rem solid #00c3f9; + border-top: 0; + border-left: 0; + border-radius: .5rem; +} + +article article { + border-radius: .4rem; } -header h2 { +article article article { + border-radius: .3rem; +} + +section { + border-radius: .4rem; +} + +/*article { + background-color: #cff; +} + +article article { + background-color: white; +} + +article article article { + border-radius: .3rem; + background-color: #cff; +}*/ + +header { margin: 0; - padding: .5rem .5rem .3rem; + padding-bottom: .5rem; + /*background-color: #369; + border-radius: inherit;*/ + background-color: #00c3f9; + color: #136; + border-radius: .4rem .4rem 0 0; +} + +article header { + border-radius: .4rem .4rem 0 0; + margin-bottom: .5rem; +} + +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; border-bottom: 0 none; } -nav strong { +/*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; @@ -117,6 +164,7 @@ dl:first-of-type { } dt { + color: #369; font-size: .9rem; font-weight: bold; } @@ -126,38 +174,70 @@ 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; +} + +.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; } ul { - display: grid; - margin: 0 .5rem .3rem; font-size: .9rem; list-style: ' - ' inside none; - gap: .3rem; + padding: .5rem; + margin: 0 0 .5rem 0; } nav ul { list-style: none inside none; - margin-bottom: .5rem; gap: .5rem; + /*margin: .5rem;*/ } -nav ul ul { +/*nav ul ul { margin-top: .5rem; margin-bottom: 0; -} +}*/ /* Form */ label { @@ -207,10 +287,19 @@ form div:last-of-type { form label { width: 12rem; + line-height: 1.3rem; padding-right: 1rem; text-align: right; } +form label.captcha { + line-height: normal; +} + +form label.captcha img { + height: 1.325rem; +} + form input, form option, form optgroup, @@ -234,10 +323,15 @@ form button { } form .message { + margin: 0 0 .5rem 0; +} + +form div .message { margin: .25rem 0 0 0; } /* Vertical form */ +.location .col label, .col label { width: 8rem; padding-right: 0; @@ -246,6 +340,8 @@ form .message { margin: 0 auto; } +.location .col input, +.location .col textarea, .col input, .col option, .col optgroup, @@ -269,61 +365,85 @@ form .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; + display: inline-grid; flex: 1 1 auto; - border-style: none; - margin: 0; + font-family: 'Lemon', sans-serif; + font-weight: normal; + /*white-space: nowrap;*/ } -#header ul { +#title a { + text-decoration: none; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + /*overflow-x: hidden; + text-overflow: ellipsis;*/ +} + +#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 */ @@ -426,7 +546,7 @@ form .message { #form, #recover, #regulation { - border-radius: .5rem; + /*border-radius: .5rem;*/ /*border: .1rem solid #00c3f9; margin: .5rem; margin-top: 0; @@ -450,15 +570,17 @@ form .message { border-collapse: collapse; grid-gap: .1rem; flex: 1 1 auto; + margin: 0 0 auto 0; + padding: 0; } .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; @@ -466,19 +588,27 @@ form .message { overflow: hidden; } -.grid h3 { - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.grid header { + border-radius: .2rem .2rem 0 0; + margin-bottom: 0; } .grid ul { + /*margin: .1rem;*/ + padding: .1rem; + margin: 0; +} + +/*.grid section { + border-color: inherit; +}*/ + +/*.grid ul { display: block; margin: .1rem; font-size: .8rem; list-style: none inside none; -} +}*/ .grid li { border-width: .1rem; @@ -487,49 +617,49 @@ form .message { white-space: nowrap; padding: .1rem; display: flex; - margin: 0 0 .1rem; + margin: 0 0 auto; 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*/ -.grid li:only-child, +/*.grid li:only-child, .grid li:last-child, .grid li:last-of-type { margin: 0; -} +}*/ .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; +.current { + filter: hue-rotate(-90deg) saturate(2); } -.current h3:first-letter { - color: #00b000; +.granted { + background-color: #cff; + border-color: #00c3f9; } -.granted, +/*.granted, .granted a { background-color: #cff; border-color: #00c3f9; @@ -540,9 +670,29 @@ form .message { border-color: #930; background-color: #fc9; color: #930; +}*/ + +.highlight { + filter: hue-rotate(90deg); +} + +.canceled { + filter: hue-rotate(180deg) grayscale(33%); +} + +.locked { + filter: hue-rotate(180deg); +} + +.pending { + filter: grayscale(33%); } -.canceled, +.disabled { + filter: grayscale(66%); +} + +/*.canceled, .canceled a, .canceled h2, .canceled header { @@ -565,15 +715,13 @@ form .message { } .highlight, -.highlight a { +.highlight a, +.highlight h3, +.highlight h3 a { border-color: #3333c3; background-color: #c3c3f9; - color: #3333c3; -} - -.disabled { - filter: grayscale(66%); -} + color: #606; +}*/ .calendar a { display: grid; @@ -581,6 +729,8 @@ form .message { 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 { @@ -589,12 +739,28 @@ form .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 { @@ -605,27 +771,36 @@ form .message { grid-template-columns: repeat(4, 1fr); } +.three { + grid-template-columns: repeat(3, 1fr); +} + .two { 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; } @@ -687,9 +862,11 @@ form .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 { @@ -705,6 +882,23 @@ form .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, @@ -712,13 +906,24 @@ form .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; } @@ -728,6 +933,12 @@ form .message { line-height: 2rem; } + form label.captcha img { + height: auto; + width: 6rem; + padding: .25rem 0; + } + form input, form option, form optgroup, @@ -772,6 +983,26 @@ form .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), @@ -786,6 +1017,18 @@ form .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; @@ -801,7 +1044,7 @@ form .message { margin: 0 auto; } - #header { + #logo { flex-direction: column; } @@ -833,6 +1076,21 @@ form .message { 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); @@ -841,9 +1099,45 @@ form .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, @@ -851,6 +1145,10 @@ form .message { flex-direction: column; } + form label { + text-align: center; + } + .seven { grid-template-columns: repeat(1, 1fr); } @@ -866,6 +1164,19 @@ form .message { 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 ) {