Add form styles

Add message styles
Add last child bottom margin
Break work logo title

diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css
index e470c638773dbb1e8d18298b91a2dd58148c76e9..3b0382bd1132ff60808d9836aaa3ec99e226de95 100644 (file)
--- 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,