MediaWiki:Common.css

From MNLL
Revision as of 12:10, 6 January 2026 by Mihho (talk | contribs)

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ================================================
   CODICUM Color Palette for Timeless Skin
   MediaWiki:Common.css
   University of Bergen - WCAG AA Compliant
   ================================================ */

:root {
    /* CODICUM Primary colors */
    --codicum-dark-1: #59352C;        /* Primary dark brown */
    --codicum-dark-2: #000000;        /* Black */
    --codicum-light-1: #FFF9E8;       /* Primary light/background */

    /* CODICUM Emphasis/Accent colors */
    --codicum-emphasis-1: #8F313B;    /* Red/Maroon */
    --codicum-emphasis-2: #F0CD7D;    /* Gold/Yellow */
    --codicum-emphasis-3: #616115;    /* Olive/Green */
    --codicum-emphasis-4: #CF7C3C;    /* Orange */
    --codicum-emphasis-5: #2A50AD;    /* Blue */

    /* CODICUM Functional colors */
    --codicum-hyperlink: #2A50AD;     /* Link color (blue) */
    --codicum-text: #59352C;          /* Primary text color */
    --codicum-background: #FFF9E8;    /* Primary background */
}

/* Main page background */
body {
    background-color: var(--codicum-background);
}

/* Header/top navigation */
#mw-header-container {
    background-color: var(--codicum-dark-1);
    border-bottom: 3px solid var(--codicum-emphasis-4);
}

#mw-header-nav-hack {
    background-color: var(--codicum-dark-1);
}

/* Site logo area */
#p-logo a {
    background-color: transparent;
}

/* Navigation links in header */
#mw-header-nav-hack a,
#user-tools a {
    color: var(--codicum-light-1);
}

#mw-header-nav-hack a:hover,
#user-tools a:hover {
    color: var(--codicum-emphasis-2);
}

/* Sidebar */
#mw-site-navigation,
#mw-related-navigation {
    background-color: var(--codicum-light-1);
    border-right: 1px solid var(--codicum-emphasis-2);
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background-color: transparent;
}

#mw-site-navigation h3,
#mw-related-navigation h3 {
    background-color: var(--codicum-emphasis-4);
    color: white;
    border-bottom: 2px solid var(--codicum-dark-1);
}

/* Sidebar links */
#mw-site-navigation a,
#mw-related-navigation a {
    color: var(--codicum-text);
}

#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
    color: var(--codicum-hyperlink);
    background-color: rgba(207, 124, 60, 0.1);
}

/* Main content area */
#mw-content-container {
    background-color: white;
    border: 1px solid var(--codicum-emphasis-2);
    box-shadow: 0 2px 8px rgba(89, 53, 44, 0.15);
}

#mw-content {
    background-color: white;
}

/* Page title */
#firstHeading {
    color: var(--codicum-dark-1);
    border-bottom: 3px solid var(--codicum-emphasis-4);
}

/* Content headings */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4 {
    color: var(--codicum-text);
}

.mw-body h2 {
    border-bottom: 2px solid var(--codicum-emphasis-4);
}

/* Links */
.mw-body a:not(.new) {
    color: var(--codicum-hyperlink);
}

.mw-body a:not(.new):hover {
    color: var(--codicum-emphasis-1);
}

.mw-body a:not(.new):visited {
    color: var(--codicum-emphasis-3);
}

/* Red links (non-existent pages) */
.mw-body a.new {
    color: var(--codicum-emphasis-1);
}

/* Tabs (page actions) */
#p-namespaces ul li,
#p-views ul li {
    background-color: var(--codicum-light-1);
    border: 1px solid var(--codicum-emphasis-2);
}

#p-namespaces ul li.selected,
#p-views ul li.selected {
    background-color: white;
    border-bottom-color: white;
}

#p-namespaces a,
#p-views a {
    color: var(--codicum-text);
}

/* Buttons */
.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: var(--codicum-emphasis-4);
    color: white;
    border: 1px solid var(--codicum-dark-1);
}

.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover {
    background-color: var(--codicum-dark-1);
}

/* Info boxes and notice templates */
.infobox {
    background-color: var(--codicum-light-1);
    border: 1px solid var(--codicum-emphasis-4);
}

/* Table styling */
table.wikitable {
    background-color: white;
    border: 1px solid var(--codicum-emphasis-2);
}

table.wikitable th {
    background-color: var(--codicum-emphasis-4);
    color: white;
}

table.wikitable tr:hover {
    background-color: var(--codicum-light-1);
}

/* Code blocks */
pre, code {
    background-color: var(--codicum-light-1);
    border: 1px solid var(--codicum-emphasis-2);
}

/* Footer */
#footer {
    background-color: var(--codicum-light-1);
    border-top: 3px solid var(--codicum-emphasis-4);
    color: var(--codicum-dark-1);
}

#footer a {
    color: var(--codicum-text);
}

#footer a:hover {
    color: var(--codicum-hyperlink);
}

/* Search box */
#searchInput {
    border: 1px solid var(--codicum-emphasis-2);
    background-color: white;
}

#searchInput:focus {
    border-color: var(--codicum-emphasis-4);
    box-shadow: 0 0 5px rgba(207, 124, 60, 0.3);
}

/* ================================================
   Additional fixes for header text visibility
   ================================================ */

/* Wiki name/site title in top left - make it light on dark background */
#p-logo a,
#p-logo-text a,
.mw-wiki-title,
#sitelogo-text {
    color: var(--codicum-light-1) !important;
}

#p-logo a:hover,
#p-logo-text a:hover {
    color: var(--codicum-emphasis-2) !important;
}

/* Username in top right corner - make it light */
#user-tools .mw-ui-icon + span,
#user-tools #pt-userpage a,
#personal h2,
#personal .mw-portlet-heading {
    color: var(--codicum-light-1) !important;
}

#user-tools #pt-userpage a:hover {
    color: var(--codicum-emphasis-2) !important;
}

/* User icon in header - make it light colored */
#user-tools .mw-ui-icon,
#user-tools .mw-ui-icon:before,
#user-tools .mw-ui-icon:after,
#personal .mw-ui-icon {
    color: var(--codicum-light-1) !important;
    fill: var(--codicum-light-1) !important;
    opacity: 0.9;
}

#user-tools .mw-ui-icon:hover,
#personal .mw-ui-icon:hover {
    color: var(--codicum-emphasis-2) !important;
    fill: var(--codicum-emphasis-2) !important;
    opacity: 1;
}

/* User icon - replace the background image with a light-colored version */
#personal h2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="6" r="3" fill="%23FFF9E8"/><path d="M10 10c-3 0-7 2-7 5v2h14v-2c0-3-4-5-7-5z" fill="%23FFF9E8"/></svg>') !important;
}

/* Site tools gear icon - replace with light-colored version */
#site-tools h2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 1.5c-.85 0-1.6.55-1.85 1.35l-.35 1.1c-.25.05-.5.15-.75.25l-1-.6c-.75-.45-1.7-.3-2.3.35l-.7.7c-.65.65-.8 1.55-.35 2.3l.6 1c-.1.25-.2.5-.25.75l-1.1.35C1.05 9.4.5 10.15.5 11s.55 1.6 1.35 1.85l1.1.35c.05.25.15.5.25.75l-.6 1c-.45.75-.3 1.7.35 2.3l.7.7c.65.65 1.55.8 2.3.35l1-.6c.25.1.5.2.75.25l.35 1.1c.25.8 1 1.35 1.85 1.35s1.6-.55 1.85-1.35l.35-1.1c.25-.05.5-.15.75-.25l1 .6c.75.45 1.7.3 2.3-.35l.7-.7c.65-.65.8-1.55.35-2.3l-.6-1c.1-.25.2-.5.25-.75l1.1-.35c.8-.25 1.35-1 1.35-1.85s-.55-1.6-1.35-1.85l-1.1-.35c-.05-.25-.15-.5-.25-.75l.6-1c.45-.75.3-1.7-.35-2.3l-.7-.7c-.65-.65-1.55-.8-2.3-.35l-1 .6c-.25-.1-.5-.2-.75-.25l-.35-1.1C11.6 2.05 10.85 1.5 10 1.5zm0 5.5c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3z" fill="%23FFF9E8"/></svg>') !important;
}

/* Dropdown menu from username - dark text on light background */
#personal .mw-portlet-body,
#personal ul,
#user-tools .dropdown,
#personal .vector-menu-content {
    background-color: white;
    border: 1px solid var(--codicum-emphasis-2);
    box-shadow: 0 2px 8px rgba(89, 53, 44, 0.2);
}

#personal .mw-portlet-body a,
#personal ul a,
#user-tools .dropdown a {
    color: var(--codicum-text) !important;
    background-color: white;
}

#personal .mw-portlet-body a:hover,
#personal ul a:hover,
#user-tools .dropdown a:hover {
    color: var(--codicum-hyperlink) !important;
    background-color: var(--codicum-light-1);
}
Retrieved from "http://medieval.wiki.uib.no/index.php?title=MediaWiki:Common.css&oldid=1135"