X-Git-Url: https://git.rapsys.eu/blogbundle/blobdiff_plain/2c9c4236f8e14311f6d8b259f51b5ab002b048c5..b2f5bafdc433f99e1258ec7d6fba9c5b2087421c:/Resources/public/css/screen.css?ds=inline diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index e470c63..3b0382b 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -101,6 +101,10 @@ body { line-height: 60px; } +#logo strong { + word-break: break-word; +} + #nav { display: flex; flex-wrap: wrap; @@ -147,6 +151,7 @@ body { /* Index */ +section.form, #content { /*margin: .5rem 0; border-radius: .5rem; @@ -189,6 +194,11 @@ section section { row-gap: .5rem; } +article section:last-child, +section section:last-child { + margin-bottom: .5rem; +} + article footer, section footer { padding: .5rem; @@ -209,6 +219,73 @@ section article { /*section article:last-child { margin-bottom: .5rem; }*/ +form { + display: flex; + flex-direction: column; + gap: .5rem; +} + +form div { + display: flex; + flex-direction: row; + justify-content: center; + gap: .5rem; +} + +form div div { + flex-direction: column; +} + +form div ul { + display: flex; + flex-direction: column; + gap: .2rem; +} + +form div li { + display: flex; + flex-direction: row; + justify-content: space-between; + border-radius: .2rem; + border: .05rem solid transparent; + border-color: #c33333; + background-color: #f9c3c3; + color: #c33333; + padding: .1rem .2rem; +} + +form div li::before, +form div li::after { + /*XXX: display /!\ symbol */ + content: "⚠"; +} +form label { + width: 12rem; + text-align: right; + line-height: 1.3rem; +} + +form label.captcha { + line-height: 2.5rem; + height: 2.5rem; +} + +form label.captcha img { + width: 9.2rem; + height: 2.5rem; +} + +form input, +form textarea { + width: 24rem; +} + +form select { + width: 24.2rem; + padding: 2px; + padding-block: 1px; + box-sizing: content-box; +} header h1 a, header h2 a, @@ -303,6 +380,83 @@ footer nav.pager a[rel=next] { margin: 0 .5rem; }*/ +/* Message */ +.message { + margin: 0 .5rem; + display: flex; + flex-direction: row; + justify-content: space-between; + font-size: .9rem; + padding: .2rem; + border-radius: .2rem; + border: .05rem solid transparent; + text-align: center; +} + +.message::before, +.message::after { + margin: auto 0; + padding: 0 .25rem; +} + +p.message { + margin: 0; +} + +.message ul { + margin: 0; + padding: 0; + list-style: none inside none; + gap: .1rem; +} + +.message li { + padding: .25rem; +} + +.error { + border-color: #c33333; + background-color: #f9c3c3; + color: #c33333; +} + +.error::before, +.error::after { + /*XXX: display /!\ symbol */ + content: "⚠"; +} + +.notice { + border-color: #3333c3; + background-color: #c3c3f9; + color: #3333c3; +} + +.notice::before, +.notice::after { + /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm + * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + /*XXX: display i symbol */ + content: "ℹ"; + /*XXX: display # symbol */ + /*content: "⌘";*/ +} + +.warning { + border-color: #c39333; + background-color: #f9c333; + color: #936333; +} + +.warning::before, +.warning::after { + /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm + * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/ + content: "?"; + /*XXX: display # symbol */ + /*content: "⌘";*/ +} + /* Article */ #article, #contact,