MediaWiki:Vector-2022.css: Difference between revisions

Browse history interactively

← Older edit Newer edit →

@@ Line 131: / Line 131: @@
    }
-   html.skin-theme-clientpref-night {
+   :root.skin-theme-clientpref-night {
      color-scheme: dark;
@@ Line 145: / Line 145: @@
      --color-inverted: #0d0f1e;
      --color-progressive: #71bed7;
-     --color-progressive--hover: #b0c1f0;
+     --color-progressive--hover: #5689dc;
-     --color-progressive--active: #cbd6f6;
+     --color-progressive--active: #3e72c6;
      --color-destructive: #fd7865;
      --color-destructive--hover: #fea898;
@@ Line 210: / Line 210: @@
 @media screen and (prefers-color-scheme: dark) {
-   .skin-theme-clientpref-os {
+   :root.skin-theme-clientpref-os {
      /* Colors */
      --color-base: #fefdde;
@@ Line 222: / Line 222: @@
      --color-inverted: #0d0f1e;
      --color-progressive: #71bed7;
-     --color-progressive--hover: #b0c1f0;
+     --color-progressive--hover: #5689dc;
-     --color-progressive--active: #cbd6f6;
+     --color-progressive--active: #3e72c6;
      --color-destructive: #fd7865;
      --color-destructive--hover: #fea898;
@@ Line 292: / Line 292: @@
 }
-/* Page Container */
+/* Page container */
 .mw-page-container {
    background-color: var(--background-color-base) !important;
@@ Line 334: / Line 334: @@
 }
-/* Heading Border Color */
 .mw-heading1, h1, .mw-heading2, h2 {
    border-color: #212337 !important;
@@ Line 348: / Line 347: @@
 }
-/* Radio Buttons */
+/* Radio buttons */
 .cdx-radio__input:enabled:checked + .cdx-radio__icon {
    border-color: var(--color-progressive);
@@ Line 357: / Line 356: @@
 }
-/* Code Blocks */
+/* Code blocks */
 code {
    border: none;
@@ Line 370: / Line 369: @@
    background-color: var(--background-color-1);
    color: var(--color-base);
+}
+.mw-highlight {
+    border-radius: 10px;
 }
@@ Line 377: / Line 380: @@
 }
-/* Search Bar */
+/* Fix top links in Special:RecentChanges */
+.client-js .mw-recentchanges-toplinks:not(.mw-recentchanges-toplinks-collapsed) {
+    padding-bottom: 1em;
+}
+/* Search bar */
 #p-search {
    display: flex;
@@ Line 428: / Line 436: @@
 }
-/* User & Search Actions */
+/* User & search actions */
 #ca-uls {
-   background: var(--background-color-3);
+   background: var(--background-color-2);
    border-radius: 20px;
@@ Line 438: / Line 446: @@
    &:hover {
-     background: var(--background-color-4);
+     background: var(--background-color-2);
    }
@@ Line 451: / Line 459: @@
 input:focus:not(:active) + .cdx-button:not(.cdx-button--action-progressive) {
    box-shadow: none;
-   background: var(--background-color-3);
+   background: var(--background-color-2);
    border-radius: 20px;
 }
@@ Line 465: / Line 473: @@
 }
-/* Categories Box */
+/* Categories box */
 .catlinks {
    border-radius: 10px;
@@ Line 473: / Line 481: @@
 }
-/* Sticky Containers */
+/* Sticky containers */
 .vector-pinned-container {
    padding: 16px;
@@ Line 488: / Line 496: @@
 }
-/* Sticky Header */
+/* Sticky header */
 .vector-header-container .vector-sticky-header {
    background-color: var(--background-color-3) !important;
@@ Line 526: / Line 534: @@
    .selected a {
      background-color: var(--theme-accent-color) !important;
-     color: var(--color-base) !important;
+     color: var(--color-accent-text) !important;
      border: 0;
    }
@@ Line 545: / Line 553: @@
 }
-.skin-theme-clientpref-night #left-navigation .vector-menu-tabs .mw-list-item.selected a,
+/* Watch button */
-.skin-theme-clientpref-night #p-views .selected a,
-.skin-theme-clientpref-os #left-navigation .vector-menu-tabs .mw-list-item.selected a,
-.skin-theme-clientpref-os #p-views .selected a {
-  color: var(--background-color-base) !important;
-}
-/* Watch Button */
 #p-views .vector-menu-content-list #ca-watch > a {
    margin: 0 5px;
@@ Line 631: / Line 632: @@
 }
-/* Edit Section Buttons */
+/* Edit section buttons */
 .mw-editsection {
    .mw-editsection-bracket {
@@ Line 638: / Line 639: @@
    a {
-     background-color: var(--background-color-3);
+     background-color: var(--background-color-2);
      color: var(--color-base);
      padding: 2px 8px;
@@ Line 645: / Line 646: @@
      &:hover {
        text-decoration: none;
-       background-color: var(--background-color-5);
+       background-color: var(--background-color-3);
      }
    }
+}
+/* Wikitable */
+/* Fix Vector-2022 issue that prevents tables from overflowing
+   while also retaining border-radius styling */
+body:not(.ns-special) .wikitable {
+    display: inline-block;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    background: transparent;
+    border: none !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    border-radius: 10px;
+    clip-path: inset(0 round 10px);
 }