Introduction du nouveau thème

themes/default/assets/css/variables/aesthetics.css

@@ -0,0 +1,82 @@
+:root {
+    /* Base text colors */
+    --color-text: var(--gray-500);
+    --color-text-muted: var(--gray-600);
+    --color-text-light: var(--gray-300);
+    --color-text-strong: var(--gray-0);
+    --color-footer-text: var(--color-text-muted);
+    --color-footer-heading: var(--gray-400);
+    --color-site-title: var(--gray-0);
+    --color-big-logo-title: var(--color-site-title);
+    --color-big-logo-description: var(--color-text-muted);
+    --color-panel-text-stats: var(--gray-0);
+    --color-page-meta: var(--color-text);
+    --color-home-link: var(--gray-500);
+    --color-home-link-hover: var(--blue-300);
+    --color-figure-media-background: #ffffff;
+    --color-link: var(--blue-300);
+    --color-link-hover: var(--blue-100);
+    --color-card-title: var(--color-site-title);
+    --color-link-external: var(--green-500);
+    --color-link-external-hover: var(--green-300);
+    --color-link-affiliated: var(--pink-500);
+    --color-link-affiliated-hover: var(--pink-300);
+
+    /* Border tokens */
+    --border-outer-color: var(--gray-800);
+    --border-panel: 1px solid var(--border-outer-color);
+    --border-panel-outer: 1px solid var(--border-outer-color);
+    --border-panel-top: 2px solid var(--border-outer-color);
+
+    /* Radius tokens */
+    --radius-base: 0;
+    --radius-panel: var(--radius-base);
+    --radius-pagination: var(--radius-base);
+
+    /* Shadow tokens */
+    --color-shadow-base: var(--gray-900);
+    --shadow-base: 0 12px 0.8rem var(--color-shadow-base);
+    --shadow-panel: var(--shadow-base);
+    --shadow-pagination: var(--shadow-base);
+    --shadow-text: 0 12px 0.8rem var(--color-shadow-base);
+    --shadow-big-logo-title: var(--shadow-text);
+
+    /* Overlay helpers */
+    --overlay-dark-strong: rgba(15, 17, 20, 0.72);
+    --overlay-dark-medium: rgba(51, 55, 70, 0.55);
+    --overlay-dark-soft: rgba(124, 131, 146, 0.28);
+    --overlay-light-soft: rgba(255, 255, 255, 0.12);
+    --overlay-blue-soft: rgba(70, 127, 255, 0.20);
+
+    /* Background surfaces */
+    --background-body: var(--gray-900);
+    --background-body-alt: var(--gray-700);
+    --background-panel:
+        radial-gradient(circle at 18% 18%, var(--overlay-dark-medium) 0%, transparent 58%),
+        radial-gradient(circle at 82% 82%, var(--overlay-dark-strong) 0%, transparent 64%),
+        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
+    --background-panel-stat: var(--background-panel);
+    --background-pagination: var(--background-panel);
+    --background-panel-stats: radial-gradient(circle at 8% 92%, var(--overlay-dark-medium) 0%, transparent 55%),
+        radial-gradient(circle at 90% 12%, var(--overlay-dark-soft) 0%, transparent 60%),
+        linear-gradient(120deg, var(--gray-900) 0%, var(--gray-800) 100%);
+    --background-figure:
+        radial-gradient(circle at 22% 22%, var(--overlay-dark-soft) 0%, transparent 58%),
+        radial-gradient(circle at 78% 78%, var(--overlay-dark-medium) 0%, transparent 62%),
+        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
+    --background-footer:
+        radial-gradient(ellipse at top, var(--overlay-dark-medium) 0%, transparent 68%),
+        linear-gradient(165deg, var(--gray-900) 0%, var(--gray-800) 100%);
+    --background-spoiler: var(--yellow-900);
+    --background-chat-me: linear-gradient(135deg, var(--overlay-blue-soft) 0%, transparent 75%);
+    --background-chat-other: linear-gradient(135deg, var(--overlay-light-soft) 0%, transparent 75%);
+
+    /* Glow accents */
+    --color-hr-glow: var(--overlay-light-soft);
+    --background-hr-glow: radial-gradient(ellipse at center -20px,
+            var(--color-hr-glow),
+            var(--transparent) 80%);
+    --background-hr-glow-mirror: radial-gradient(ellipse at center calc(100% + 20px),
+            var(--color-hr-glow),
+            var(--transparent) 80%);
+}