« Modèle:Discord/styles.css » : différence entre les versions

Navigation interactive dans l’historique

Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
 /* ==============================================
     Modèle:Discord — Styles des liens de salons
+   Adaptatif Light/Dark/Auto — Skin Citizen
     ============================================== */
-/* --- Shared --- */
+/* -----------------------------------------------
+   Variables par thème
+----------------------------------------------- */
+/* Light mode */
+:root.skin-theme-clientpref-day {
+    --discord-badge-bg: #e3e5e8;
+    --discord-badge-bg-hover: #d4d7dc;
+    --discord-badge-server-color: #4e5058;
+    --discord-badge-sep-color: #8e9297;
+    --discord-badge-channel-color: #060607;
+}
+/* Dark mode */
+:root.skin-theme-clientpref-night {
+    --discord-badge-bg: #1e1f22;
+    --discord-badge-bg-hover: #2b2d31;
+    --discord-badge-server-color: #b5bac1;
+    --discord-badge-sep-color: #4e5058;
+    --discord-badge-channel-color: #f2f3f5;
+}
+/* Pure black mode */
+:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
+    --discord-badge-bg: #111214;
+    --discord-badge-bg-hover: #1e1f22;
+    --discord-badge-server-color: #b5bac1;
+    --discord-badge-sep-color: #4e5058;
+    --discord-badge-channel-color: #f2f3f5;
+}
+/* Auto mode — device en light */
+@media screen and (prefers-color-scheme: light) {
+    :root.skin-theme-clientpref-os {
+        --discord-badge-bg: #e3e5e8;
+        --discord-badge-bg-hover: #d4d7dc;
+        --discord-badge-server-color: #4e5058;
+        --discord-badge-sep-color: #8e9297;
+        --discord-badge-channel-color: #060607;
+    }
+}
+/* Auto mode — device en dark */
+@media screen and (prefers-color-scheme: dark) {
+    :root.skin-theme-clientpref-os {
+        --discord-badge-bg: #1e1f22;
+        --discord-badge-bg-hover: #2b2d31;
+        --discord-badge-server-color: #b5bac1;
+        --discord-badge-sep-color: #4e5058;
+        --discord-badge-channel-color: #f2f3f5;
+    }
+}
+/* -----------------------------------------------
+   Shared
+----------------------------------------------- */
 .discord-badge__logo img,
 .discord-inline__logo img {
@@ Ligne 12 : / Ligne 68 : @@
 /* -----------------------------------------------
     Style : inline
-   Rendu : 🔗 #créations dans le cours du texte
 ----------------------------------------------- */
 .discord-inline {
@@ Ligne 48 : / Ligne 103 : @@
 /* -----------------------------------------------
     Style : badge
-   Rendu : pastille style Discord
 ----------------------------------------------- */
 .discord-badge {
@@ Ligne 66 : / Ligne 120 : @@
      display: inline-flex;
      align-items: center;
-    gap: 0;
+     background-color: var(--discord-badge-bg);
-     background-color: #1e1f22;
      border-radius: 6px;
      padding: 3px 10px 3px 6px;
+    gap: 0;
      text-decoration: none !important;
      color: inherit !important;
@@ Ligne 78 : / Ligne 132 : @@
 .discord-badge__link a:hover {
-     background-color: #2b2d31;
+     background-color: var(--discord-badge-bg-hover);
 }
@@ Ligne 89 : / Ligne 143 : @@
 .discord-badge__server {
-     color: #b5bac1;
+     color: var(--discord-badge-server-color);
      font-size: 0.85em;
      font-weight: 500;
@@ Ligne 95 : / Ligne 149 : @@
 .discord-badge__sep {
-     color: #4e5058;
+     color: var(--discord-badge-sep-color);
      margin: 0 5px;
      font-size: 0.85em;
@@ Ligne 101 : / Ligne 155 : @@
 .discord-badge__channel {
-     color: #f2f3f5;
+     color: var(--discord-badge-channel-color);
      font-weight: 600;
      font-size: 0.85em;
-}
-/* -----------------------------------------------
-   Citizen — Light mode override
-   Le badge reste sombre dans tous les thèmes
-   car c'est l'identité visuelle de Discord
------------------------------------------------ */
-.skin-theme-clientpref-day .discord-badge__link a {
-    background-color: #1e1f22;
-}
-.skin-theme-clientpref-day .discord-badge__link a:hover {
-    background-color: #2b2d31;
 }