From: Raphaël Gertz <git@rapsys.eu>
Date: Mon, 11 Dec 2023 04:50:30 +0000 (+0100)
Subject: Add form styles
X-Git-Tag: 0.2~37
X-Git-Url: https://git.rapsys.eu/blogbundle/commitdiff_plain/42a9f89d936978008adcc8d6872efbd49fcbd4c8

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 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,