finish css

2026-06-11 01:34:11 +02:00 · 2026-01-15 22:14:42 +01:00
parent f8eae61818
commit 2164c13a04
5 changed files with 291 additions and 6 deletions
@@ -0,0 +1,142 @@
+:root {
+  --bg: #0f1115;
+  --bg-card: #161a22;
+  --text: #e6e6eb;
+  --muted: #9aa0b4;
+  --primary: #5865F2;
+  --primary-hover: #4752c4;
+  --border: #23283a;
+  --input-bg: #1f222b;
+  --input-border: #2a2e3e;
+}
+
+/* RESET & BASE */
+* {
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--text);
+  margin: 0;
+  padding: 20px;
+  min-height: 100vh;
+}
+
+/* NAVBAR */
+nav {
+  display: flex;
+  gap: 20px;
+  padding: 16px 24px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 30px;
+}
+
+nav a {
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+nav a:hover {
+  color: var(--text);
+}
+
+/* TITRE PRINCIPAL */
+h1 {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+/* FORMS */
+form {
+  max-width: 700px;
+  margin: 0 auto 40px auto;
+  padding: 20px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+
+form label {
+  display: block;
+  margin-bottom: 15px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+select,
+textarea {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+  background-color: var(--input-bg);
+  color: var(--text);
+  font-size: 1rem;
+  resize: vertical;
+}
+
+textarea::placeholder {
+  color: var(--muted);
+}
+
+button[type="submit"] {
+  display: block;
+  padding: 12px 24px;
+  margin-top: 10px;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.1s ease;
+}
+
+button[type="submit"]:hover {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+/* PETIT TEXTE / VARIABLES */
+small {
+  display: block;
+  margin-top: 10px;
+  color: var(--muted);
+}
+
+small ul {
+  margin-top: 5px;
+  padding-left: 20px;
+}
+
+small code {
+  background: var(--input-bg);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-family: monospace;
+  color: var(--text);
+}
+
+/* STATUS FORM */
+#status-welcome-form,
+#status-goodbye-form {
+  margin-top: 10px;
+  font-weight: 600;
+}
+
+/* RESPONSIVE */
+@media (max-width: 768px) {
+  form {
+    padding: 15px;
+  }
+}