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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 5 : / Ligne 5 : @@
 /* -----------------------------------------------
-    Variables locales mappées sur Citizen
+    Suppression de l'icône lien externe
-    Le badge Discord s'intègre dans la palette
+    sur tous les éléments Discord
-   du wiki tout en restant identifiable
 ----------------------------------------------- */
-:root {
+.discord-badge .external::after,
-    --discord-badge-bg: var(--color-surface-2);
+.discord-inline .external::after {
-    --discord-badge-bg-hover: var(--color-surface-3);
+     display: none !important;
-    --discord-badge-server-color: var(--color-subtle);
-    --discord-badge-sep-color: var(--color-subtle);
-    --discord-badge-channel-color: var(--color-emphasized);
-}
-/* -----------------------------------------------
-   Shared
------------------------------------------------ */
-.discord-badge__logo img,
-.discord-inline__logo img {
-    vertical-align: middle;
-     display: inline-block;
 }
 /* -----------------------------------------------
     Style : inline
-   Rendu : intégré au cours du texte
 ----------------------------------------------- */
 .discord-inline {
      display: inline-flex;
      align-items: center;
-     gap: 4px;
+     vertical-align: middle;
      white-space: nowrap;
-    vertical-align: middle;
 }
-.discord-inline a {
+.discord-inline .external {
      display: inline-flex;
      align-items: center;
@@ Ligne 45 : / Ligne 30 : @@
      color: var(--color-link);
      font-weight: 500;
+    padding: 1px 6px 1px 4px;
+    border-radius: 4px;
+    background-color: var(--color-surface-2);
+    transition: background-color 0.15s ease;
 }
-.discord-inline a:hover {
+.discord-inline .external:hover {
-     text-decoration: underline;
+    background-color: var(--color-surface-3);
+     text-decoration: none;
 }
@@ Ligne 60 : / Ligne 50 : @@
      position: relative;
      top: -1px;
+    vertical-align: middle;
 }
 /* -----------------------------------------------
     Style : badge
-   Rendu : pastille style Discord cliquable
 ----------------------------------------------- */
 .discord-badge {
@@ Ligne 74 : / Ligne 64 : @@
 }
-.discord-badge__link {
+.discord-badge .external {
      display: inline-flex;
      align-items: center;
-}
+     gap: 0;
+     background-color: var(--color-surface-2);
-.discord-badge__link a {
+     border: 1px solid var(--color-surface-3);
-     display: inline-flex;
-     align-items: center;
-     background-color: var(--discord-badge-bg);
      border-radius: 6px;
-     padding: 3px 10px 3px 6px;
+     padding: 4px 10px 4px 6px;
-    gap: 0;
      text-decoration: none !important;
      color: inherit !important;
      line-height: 1;
      white-space: nowrap;
-     transition: background-color 0.15s ease;
+     transition: background-color 0.15s ease,
+                border-color 0.15s ease;
 }
-.discord-badge__link a:hover {
+.discord-badge .external:hover {
-     background-color: var(--discord-badge-bg-hover);
+     background-color: var(--color-surface-3);
+    border-color: var(--color-surface-4);
 }
@@ Ligne 100 : / Ligne 88 : @@
      display: inline-flex;
      align-items: center;
-     margin-right: 5px;
+     margin-right: 6px;
      flex-shrink: 0;
+}
+.discord-badge__logo img {
+    vertical-align: middle;
 }
 .discord-badge__server {
-     color: var(--discord-badge-server-color);
+     color: var(--color-subtle);
-     font-size: 0.85em;
+     font-size: 0.8em;
      font-weight: 500;
 }
 .discord-badge__sep {
-     color: var(--discord-badge-sep-color);
+     color: var(--color-subtle);
      margin: 0 5px;
-     font-size: 0.85em;
+     font-size: 0.8em;
+    opacity: 0.6;
 }
 .discord-badge__channel {
-     color: var(--discord-badge-channel-color);
+     color: var(--color-emphasized);
      font-weight: 600;
      font-size: 0.85em;
 }