From: Raphaël Gertz Date: Wed, 9 Dec 2020 20:32:51 +0000 (+0100) Subject: Update styling X-Git-Tag: 0.1.6~14 X-Git-Url: https://git.rapsys.eu/airbundle/commitdiff_plain/ec635127291810bf020cbbe32898c23c2c52189b Update styling --- diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 622d099..c63abc3 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -105,15 +105,22 @@ form { display: flex; flex-direction: column; flex-wrap: wrap; - line-height: normal; text-align: center; } -form header .message { +/*form header .message { margin: 0; +}*/ + +form .row { + flex-direction: row; } form div { + display: flex; + align-content: space-around; + justify-content: center; + flex-direction: column; margin-bottom: .5rem; } @@ -123,7 +130,7 @@ form div:last-of-type { margin-bottom: 0; } -form section div { +/*form section div { display: flex; flex-direction: row; align-content: space-around; @@ -133,11 +140,12 @@ form section div { form section section { display: flex; flex-direction: column; -} +}*/ form label { width: 12rem; - padding: .2rem 1rem .2rem 0; + /*padding: .2rem 1rem .2rem 0;*/ + padding-right: 1rem; text-align: right; } @@ -157,18 +165,20 @@ form select { form button { width: 10rem; - margin: .5rem auto 0 auto; + /*margin: .5rem auto 0 auto;*/ + margin: 0 auto; padding: 0 .1rem .2rem .1rem; } -form section .message { +form .message { margin: .25rem 0 0 0; } /* Vertical form */ .col label { width: 8rem; - padding: .2rem 0; + padding-right: 0; + padding-bottom: .2rem; text-align: center; } @@ -184,11 +194,11 @@ form section .message { width: 8rem; } -.col section { +/*.col section { width: auto; -} +}*/ -.col div { +.col .row { flex-direction: column; } @@ -218,9 +228,8 @@ form section .message { white-space: nowrap; } -#header h1 a { - display: block; - padding: .5rem; +#header img { + margin: .5rem; } #header nav { @@ -238,8 +247,8 @@ form section .message { #header nav a { flex-grow: 1; text-align: center; - border-radius: .25rem; - padding: .375rem .5rem .25rem .5rem; + border-radius: .2rem; + padding: .25rem .5rem; margin: 0 0 0 .5rem; border: .1rem solid #00c3f9; font-weight: bold; @@ -265,7 +274,6 @@ form section .message { .message::before, .message::after { - line-height: 100%; margin: auto 0; padding: 0 .25rem; } @@ -274,6 +282,20 @@ p.message { margin: .5rem; } +.mortal, +.mortal button, +.mortal select { + border-color: #c33333; + background-color: #f9c3c3; + color: #c33333; +} + +.dangerous, +.mortal { + border-radius: .2rem; + padding: .5rem 0; +} + .error { border-color: #c33333; background-color: #f9c3c3; @@ -302,6 +324,14 @@ p.message { /*content: "⌘";*/ } +.dangerous, +.dangerous button, +.dangerous select { + border-color: #c39333; + background-color: #f9c333; + color: #936333; +} + .warning { border-color: #c39333; background-color: #f9c333; @@ -319,27 +349,27 @@ p.message { /* Dashboard */ #dashboard, -#regulation, -#form { +#form, +#recover, +#regulation { border: .1rem solid #00c3f9; border-radius: .5rem; margin: .5rem; margin-top: 0; - overflow: hidden; display: flex; flex-direction: column; } #dashboard h2, -#regulation h2, -#form h2 { +#form h2, +#recover h2, +#regulation h2 { background-color: #cff; border-bottom: .1rem solid #00c3f9; margin: 0; padding: .5rem; } -#form h3, #dashboard h3 { background-color: #cff; border-bottom: .1rem solid #00c3f9; @@ -354,16 +384,11 @@ p.message { padding: .2rem; } -#form form { +#form form, +#recover form { padding: .5rem; } -#form .recover { - border: .1rem solid #00c3f9; - border-radius: .3rem; - margin: 0 .5rem .5rem; -} - /*#dashboard .calendar h3 { margin: -.3rem; margin-bottom: .3rem; @@ -429,14 +454,12 @@ p.message { border-color: #00c3f9; border-radius: .2rem; /*border-width: .1rem 0 0 .1rem;*/ - line-height: normal; flex-grow: 1; /*box-sizing: inherit;*/ box-sizing: border-box; border-collapse: collapse; /*box-sizing: border-box; display: table; - line-height: normal; padding: 0; flex-grow: 1; table-layout: fixed; @@ -464,7 +487,6 @@ p.message { #dashboard .dlgrid { display: flex; flex-flow: row wrap; - line-height: normal; gap: .5rem; } @@ -502,7 +524,6 @@ p.message { #dashboard li { font-size: .8rem; - line-height: 1rem; margin-bottom: .1rem; } @@ -518,7 +539,6 @@ p.message { border-color: #00c3f9; border-width: .1rem 0 0 .1rem; border-radius: .2rem; - line-height: normal; flex-grow: 1; box-sizing: inherit; box-sizing: border-box; @@ -630,11 +650,26 @@ p.message { #dashboard .form { margin: 0 0 0 .5rem; + display: flex; + flex-direction: column; + gap: .5rem; +} + +#dashboard .form a, +#dashboard .form h2 { + white-space: nowrap; + font-size: 1.17rem; + padding: .3rem; +} + +#dashboard .form section { border: .05rem solid #00c3f9; border-radius: .2rem; +} + +#dashboard .form form { padding: .5rem; - display: flex; - flex-direction: column; + gap: .5rem; } /* Weather