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

Navigation interactive dans l’historique

← Modification précédente

@@ 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
-   du wiki tout en restant identifiable
 ----------------------------------------------- */
-:root {
+.discord-badge .external::after {
-    --discord-badge-bg: var(--color-surface-2);
+     display: none !important;
-    --discord-badge-bg-hover: var(--color-surface-3);
-     --discord-badge-server-color: var(--color-subtle);
-    --discord-badge-sep-color: var(--color-subtle);
-    --discord-badge-channel-color: var(--color-emphasized);
 }
 /* -----------------------------------------------
-    Shared
+    Badge Discord
------------------------------------------------ */
-.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;
-    white-space: nowrap;
-    vertical-align: middle;
-}
-.discord-inline a {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    text-decoration: none;
-    color: var(--color-link);
-    font-weight: 500;
-}
-.discord-inline a:hover {
-    text-decoration: underline;
-}
-.discord-inline__logo {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-}
-.discord-inline__logo img {
-    position: relative;
-    top: -1px;
-}
-/* -----------------------------------------------
-   Style : badge
-   Rendu : pastille style Discord cliquable
 ----------------------------------------------- */
 .discord-badge {
@@ Ligne 74 : / Ligne 22 : @@
 }
-.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 46 : @@
      display: inline-flex;
      align-items: center;
-     margin-right: 5px;
+     margin-right: 8px;
      flex-shrink: 0;
+}
+.discord-badge__logo img {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+    vertical-align: middle;
 }
 .discord-badge__server {
-     color: var(--discord-badge-server-color);
+     color: var(--color-base);
      font-size: 0.85em;
      font-weight: 500;
@@ Ligne 111 : / Ligne 64 : @@
 .discord-badge__sep {
-     color: var(--discord-badge-sep-color);
+     color: var(--color-subtle);
      margin: 0 5px;
      font-size: 0.85em;
+    font-weight: 300;
 }
 .discord-badge__channel {
-     color: var(--discord-badge-channel-color);
+     color: var(--color-emphasized);
      font-weight: 600;
      font-size: 0.85em;
 }