Toggle search
Toggle menu
658
693
30
4.5K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Vector-2022.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older edit
Fixed external link color
Fixed Vector-2022 issue that prevented tables from overflowing while also retaining border-radius styling
 
(5 intermediate revisions by the same user not shown)
Line 131: Line 131:
   }
   }


   html.skin-theme-clientpref-night {
   :root.skin-theme-clientpref-night {
     color-scheme: dark;
     color-scheme: dark;


Line 210: Line 210:


@media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
   .skin-theme-clientpref-os {
   :root.skin-theme-clientpref-os {
     /* Colors */
     /* Colors */
     --color-base: #fefdde;
     --color-base: #fefdde;
Line 283: Line 283:
     --border-color-content-added: #233566;
     --border-color-content-added: #233566;
     --border-color-content-removed: #987027;
     --border-color-content-removed: #987027;
  }
}
/* Fix external link color */
.mw-parser-output a.external {
  /* Filter to match #21669a */
  .skin-theme-clientpref-day & {
    filter: brightness(0) saturate(100%) invert(20%) sepia(86%) saturate(2939%) hue-rotate(192deg) brightness(85%) contrast(74%);
  }
  /* Filter to match #71bed7 */
  .skin-theme-clientpref-night & {
    filter: brightness(0) saturate(100%) invert(75%) sepia(29%) saturate(618%) hue-rotate(151deg) brightness(93%) contrast(79%);
   }
   }
}
}
Line 304: Line 292:
}
}


/* Page Container */
/* Page container */
.mw-page-container {
.mw-page-container {
   background-color: var(--background-color-base) !important;
   background-color: var(--background-color-base) !important;
Line 346: Line 334:
}
}


/* Heading Border Color */
.mw-heading1, h1, .mw-heading2, h2 {
.mw-heading1, h1, .mw-heading2, h2 {
   border-color: #212337 !important;
   border-color: #212337 !important;
Line 360: Line 347:
}
}


/* Radio Buttons */
/* Radio buttons */
.cdx-radio__input:enabled:checked + .cdx-radio__icon {
.cdx-radio__input:enabled:checked + .cdx-radio__icon {
   border-color: var(--color-progressive);
   border-color: var(--color-progressive);
Line 369: Line 356:
}
}


/* Code Blocks */
/* Code blocks */
code {
code {
   border: none;
   border: none;
Line 382: Line 369:
   background-color: var(--background-color-1);
   background-color: var(--background-color-1);
   color: var(--color-base);
   color: var(--color-base);
}
.mw-highlight {
    border-radius: 10px;
}
}


Line 389: 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 {
#p-search {
   display: flex;
   display: flex;
Line 440: Line 436:
}
}


/* User & Search Actions */
/* User & search actions */
#ca-uls {
#ca-uls {
   background: var(--background-color-3);
   background: var(--background-color-2);
   border-radius: 20px;
   border-radius: 20px;
      
      
Line 450: Line 446:


   &:hover {
   &:hover {
     background: var(--background-color-4);
     background: var(--background-color-2);
   }
   }


Line 463: Line 459:
input:focus:not(:active) + .cdx-button:not(.cdx-button--action-progressive) {
input:focus:not(:active) + .cdx-button:not(.cdx-button--action-progressive) {
   box-shadow: none;
   box-shadow: none;
   background: var(--background-color-3);
   background: var(--background-color-2);
   border-radius: 20px;
   border-radius: 20px;
}
}
Line 477: Line 473:
}
}


/* Categories Box */
/* Categories box */
.catlinks {
.catlinks {
   border-radius: 10px;
   border-radius: 10px;
Line 485: Line 481:
}
}


/* Sticky Containers */
/* Sticky containers */
.vector-pinned-container {
.vector-pinned-container {
   padding: 16px;
   padding: 16px;
Line 500: Line 496:
}
}


/* Sticky Header */
/* Sticky header */
.vector-header-container .vector-sticky-header {
.vector-header-container .vector-sticky-header {
   background-color: var(--background-color-3) !important;
   background-color: var(--background-color-3) !important;
Line 538: Line 534:
   .selected a {
   .selected a {
     background-color: var(--theme-accent-color) !important;
     background-color: var(--theme-accent-color) !important;
     color: var(--color-base) !important;
     color: var(--color-accent-text) !important;
     border: 0;
     border: 0;
   }
   }
Line 557: 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 {
#p-views .vector-menu-content-list #ca-watch > a {
   margin: 0 5px;
   margin: 0 5px;
Line 643: Line 632:
}
}


/* Edit Section Buttons */
/* Edit section buttons */
.mw-editsection {
.mw-editsection {
   .mw-editsection-bracket {
   .mw-editsection-bracket {
Line 650: Line 639:


   a {
   a {
     background-color: var(--background-color-3);
     background-color: var(--background-color-2);
     color: var(--color-base);
     color: var(--color-base);
     padding: 2px 8px;
     padding: 2px 8px;
Line 657: Line 646:
     &:hover {
     &:hover {
       text-decoration: none;
       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);
}
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Vector-2022.css"