From: Raphaël Gertz Date: Mon, 24 Oct 2022 08:04:08 +0000 (+0200) Subject: Update style X-Git-Tag: 0.3.0~153 X-Git-Url: https://git.rapsys.eu/airbundle/commitdiff_plain/f9240cc5131b9e373cd45906a0564dbb92fd72d5 Update style --- diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index b58e9ff..f4ee830 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,10 +94,12 @@ nav { } article article { + margin: 0 .3rem .3rem; border-radius: .4rem; } article article article { + margin: 0 .2rem .2rem; border-radius: .3rem; } @@ -101,21 +121,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; +} + +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; } -article article header { +/*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 +191,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 +202,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 +300,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; @@ -410,7 +486,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 +542,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 +641,9 @@ form div .message { gap: .5rem; } +.cell { +} + .grid { display: grid; border-style: solid; @@ -568,10 +651,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 +671,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 +700,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 +708,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 +733,10 @@ form div .message { padding: 0; } +.session header { + margin-bottom: .5rem; +} + .current { filter: hue-rotate(-90deg) saturate(2); } @@ -673,7 +760,7 @@ form div .message { }*/ .highlight { - filter: hue-rotate(90deg); + filter: hue-rotate(60deg); } .canceled { @@ -723,6 +810,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 +959,7 @@ form div .message { .form section { margin: 0; border: .05rem solid #00c3f9; - border-radius: .2rem; + /*border-radius: .2rem;*/ width: 100%; }