MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Catppuccin Dark - Vector Skin Complete Override */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap');

/* Catppuccin Dark Palet */
:root {
  --bg0: 30, 30, 46;
  --bg1: 36, 37, 60;
  --bg2: 49, 50, 68;
  --bg3: 69, 71, 90;
  --txt: 205, 214, 244;
  --txt2: 152, 165, 211;
  --txt3: 103, 106, 129;
  --blue: 137, 180, 250;
  --blue2: 191, 232, 255;
}

/* VECTOR SKIN - Hoofd elementen */
body.skin-vector {
  background: rgb(var(--bg0));
  color: rgb(var(--txt));
  font-family: "Fira Code", monospace;
}

/* Content area */
#content {
  background: rgb(var(--bg1));
  border: 1px solid rgb(var(--bg2));
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* VECTOR SIDEBAR - Exact jouw screenshot probleem */
#p-navigation, #p-namespaces, #p-search, #p-tb, #p-collapsible, #p-lang {
  background: rgb(var(--bg1)) !important;
  border: 1px solid rgb(var(--bg2)) !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
}

#p-navigation ul, #p-namespaces ul, #p-search ul, #p-tb ul {
  background: transparent !important;
}

#p-navigation li a, #p-namespaces li a, #p-tb li a {
  color: rgb(var(--txt2)) !important;
  padding: 10px 16px !important;
  border-radius: 4px !important;
  transition: all 0.2s !important;
}

#p-navigation li a:hover, #p-namespaces li a:hover, #p-tb li a:hover {
  background: rgb(var(--bg3)) !important;
  color: rgb(var(--txt)) !important;
}

/* CATEGORIEËN - Exact jouw screenshot */
#catlinks {
  background: rgb(var(--bg1)) !important;
  border: 1px solid rgb(var(--bg2)) !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin-top: 20px !important;
}

#mw-normal-catlinks ul li {
  background: rgb(var(--bg2)) !important;
  margin: 4px !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  color: rgb(var(--txt2)) !important;
}

#mw-normal-catlinks ul li a {
  color: rgb(var(--blue)) !important;
}

#mw-normal-catlinks ul li a:hover {
  color: rgb(var(--blue2)) !important;
}

/* PERSONAL MENU rechtsboven */
#mw-panel .portal {
  background: rgb(var(--bg1)) !important;
  border: 1px solid rgb(var(--bg2)) !important;
  border-radius: 6px !important;
}

#mw-panel .portal h3 {
  color: rgb(var(--blue)) !important;
  background: rgb(var(--bg3)) !important;
  padding: 12px !important;
  margin: 0 !important;
  border-radius: 6px 6px 0 0 !important;
}

/* SEARCH BOX */
#searchInput {
  background: rgb(var(--bg2)) !important;
  border: 1px solid rgb(var(--bg3)) !important;
  color: rgb(var(--txt)) !important;
  padding: 10px !important;
  border-radius: 6px !important;
}

#searchInput::placeholder {
  color: rgb(var(--txt3)) !important;
}

/* Tabs en buttons */
.vector-menu-content-list li a {
  color: rgb(var(--txt2)) !important;
}

.mw-list-item a {
  color: rgb(var(--txt2)) !important;
}

/* FIRST HEADING */
#firstHeading {
  color: rgb(var(--blue)) !important;
  background: rgb(var(--bg3)) !important;
  padding: 16px !important;
  border-radius: 6px !important;
  margin-bottom: 20px !important;
}

/* Overige content */
.mw-parser-output {
  font-size: 15px;
  line-height: 1.6;
}

.mw-parser-output h1 { color: rgb(var(--blue)); }
.mw-parser-output h2 { color: rgb(var(--blue2)); }
.mw-parser-output h3 { color: rgb(var(--txt)); }

/* Footer */
#footer {
  background: rgb(var(--bg0)) !important;
  border-top: 1px solid rgb(var(--bg2)) !important;
  color: rgb(var(--txt3)) !important;
}