X-Git-Url: https://git.rapsys.eu/.gitweb.cgi/airbundle/blobdiff_plain/ca7f0ca5278aa30f90000d0381549e93ae9fdb8f..49e39d805a089a8065015defa6e6fee22be4fcdb:/Resources/public/css/screen.css?ds=inline diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index b58e9ff..6a53959 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -25,44 +25,62 @@ dt, h1, h2, h3, h4, h5, h6, label, legend, th, details { /* Default styling */ h1 { font-size: 1.5rem; - margin: 0 0 .5rem; - padding: .5rem; + margin: 0; + padding: 0 .6rem .6rem; } h2 { font-size: 1.17rem; - margin: 0 0 .5rem; - padding: .4rem; + margin: 0; + padding: 0 .5rem .5rem; } h3 { font-size: 1rem; - margin: 0 0 .5rem; - padding: .4rem; + margin: 0; + padding: 0 .4rem .4rem; } h4 { font-size: .85rem; - margin: 0 0 .5rem; - padding: .3rem; + margin: 0; + padding: 0 .3rem .3rem; } h5 { font-size: .67rem; - margin: 0 0 .5rem; - padding: .2rem; + margin: 0; + padding: 0 .2rem .2rem; } h6 { font-size: .5rem; - margin: 0 0 .5rem; - padding: .1rem; + margin: 0; + padding: 0 .1rem .1rem; +} + +ul { + list-style: ' - ' inside none; + margin: 0; + padding: 0 .5rem .5rem; +} + +li { + font-size: .9rem; + margin: 0; + padding: 0 .5rem .5rem; +} + +li:only-child, +li:last-child, +li:last-of-type { + padding-bottom: 0; } p { font-size: .9rem; - margin: 0 0 .4rem; - padding: .4rem; + margin: 0; + padding: 0 .4rem .4rem; } article, @@ -76,17 +94,54 @@ nav { } 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; + 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; +} + /*article { background-color: #cff; } @@ -101,21 +156,69 @@ article article article { }*/ header { - margin: 0; - padding-bottom: .5rem; + margin: 0 0 .5rem; + padding: .5rem; + border-radius: .4rem .4rem 0 0; /*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; +header h2, +header h3, +header h4, +header h5, +header h6, +header p { + padding-left: 0; + padding-right: 0; } -article article header { +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; } @@ -123,9 +226,9 @@ article article header { article article article header { border-radius: .2rem .2rem 0 0; margin-bottom: .2rem; -} +}*/ -header h1, +/*header h1, header h2, header h3, header h4, @@ -134,7 +237,18 @@ header h6, header p { margin-bottom: 0; padding-bottom: 0; - border-bottom: 0 none; +}*/ + +.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 { @@ -221,19 +335,16 @@ body { color: #036; } -ul { - font-size: .9rem; - list-style: ' - ' inside none; - padding: .5rem; - margin: 0 0 .5rem 0; -} - nav ul { list-style: none inside none; gap: .5rem; /*margin: .5rem;*/ } +nav ul ul { + padding-top: .5rem; +} + /*nav ul ul { margin-top: .5rem; margin-bottom: 0; @@ -259,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; @@ -267,10 +389,6 @@ form { text-align: center; } -form .row { - flex-direction: row; -} - form div { display: flex; align-content: space-around; @@ -285,11 +403,19 @@ form div:last-of-type { margin-bottom: 0; } +form div.row { + flex-direction: row; + gap: .5rem; + flex-wrap: wrap; +} + form label { width: 12rem; line-height: 1.3rem; - padding-right: 1rem; + /*padding-right: 1rem;*/ text-align: right; + overflow-x: hidden; + text-overflow: ellipsis; } form label.captcha { @@ -311,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; } @@ -318,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; } @@ -410,7 +559,6 @@ form div .message { padding: 0; border-bottom: 0 none; text-align: right; - display: inline-grid; flex: 1 1 auto; font-family: 'Lemon', sans-serif; font-weight: normal; @@ -467,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 { @@ -561,6 +714,9 @@ form div .message { gap: .5rem; } +.cell { +} + .grid { display: grid; border-style: solid; @@ -568,10 +724,10 @@ 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, @@ -588,16 +744,16 @@ form div .message { overflow: hidden; } -.grid header { +/*.grid header { border-radius: .2rem .2rem 0 0; margin-bottom: 0; -} +}*/ -.grid ul { - /*margin: .1rem;*/ +/*.grid ul { + margin: .1rem; padding: .1rem; margin: 0; -} +}*/ /*.grid section { border-color: inherit; @@ -617,7 +773,7 @@ form div .message { white-space: nowrap; padding: .1rem; display: flex; - margin: 0 0 auto; + margin: 0 0 .1rem; flex-direction: row; justify-content: space-between; overflow-x: hidden; @@ -625,11 +781,11 @@ form div .message { } /*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 !!!*/ @@ -650,6 +806,10 @@ form div .message { padding: 0; } +.session header { + margin-bottom: .5rem; +} + .current { filter: hue-rotate(-90deg) saturate(2); } @@ -673,7 +833,7 @@ form div .message { }*/ .highlight { - filter: hue-rotate(90deg); + filter: hue-rotate(60deg); } .canceled { @@ -723,6 +883,33 @@ form div .message { color: #606; }*/ +.calendar header { + margin-bottom: .1rem; + display: grid; +} + +.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);*/ @@ -845,7 +1032,7 @@ form div .message { .form section { margin: 0; border: .05rem solid #00c3f9; - border-radius: .2rem; + /*border-radius: .2rem;*/ width: 100%; } @@ -929,13 +1116,11 @@ form div .message { } form label { - width: 6rem; line-height: 2rem; } form label.captcha img { height: auto; - width: 6rem; padding: .25rem 0; } @@ -949,6 +1134,10 @@ form div .message { line-height: 2rem; } + form select { + height: 2.4rem; + } + form button { width: 6rem; line-height: 2rem; @@ -1040,7 +1229,7 @@ form div .message { form select, form textarea, form section section { - width: 14rem; + width: 12rem; margin: 0 auto; }