MediaWiki:Common.css: Difference between revisions

/* ================================================
   UiB (University of Bergen) Theme for Timeless Skin
   MediaWiki:Common.css
   Based on www4.uib.no/forskning color scheme
   ================================================ */

:root {
    /* UiB primary colors */
    --uib-navy: #003d5c;              /* Deep UiB navy blue */
    --uib-blue: #005f8e;              /* Medium UiB blue */
    --uib-light-blue: #0077b3;        /* Lighter blue accent */
    --uib-sky: #4a94c4;               /* Sky blue for hover */
    
    /* Neutrals and backgrounds */
    --white: #ffffff;
    --light-gray: #f5f5f5;            /* Very light background */
    --medium-gray: #e0e0e0;           /* Borders */
    --text-dark: #333333;             /* Main text */
    --text-medium: #666666;           /* Secondary text */
    
    /* Accent colors */
    --accent-orange: #e67e22;         /* Warm accent */
    --success-green: #27ae60;         /* Success indicators */
}

/* Main page background */
body {
    background-color: var(--light-gray);
    color: var(--text-dark);
}

/* Header/top navigation - UiB navy */
#mw-header-container {
    background-color: var(--uib-navy);
    border-bottom: 1px solid var(--medium-gray);
}

#mw-header-nav-hack {
    background-color: var(--uib-navy);
}

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

/* Navigation links in header */
#mw-header-nav-hack a,
#user-tools a {
    color: var(--white);
    font-weight: 500;
}

#mw-header-nav-hack a:hover,
#user-tools a:hover {
    color: var(--uib-sky);
}

/* Sidebar - clean and minimal */
#mw-site-navigation,
#mw-related-navigation {
    background-color: var(--white);
    border-right: 1px solid var(--medium-gray);
}

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

#mw-site-navigation h3,
#mw-related-navigation h3 {
    background-color: var(--uib-blue);
    color: white;
    border-bottom: none;
    font-weight: 600;
    padding: 12px 15px;
}

/* Sidebar links */
#mw-site-navigation a,
#mw-related-navigation a {
    color: var(--text-dark);
    font-weight: 400;
    padding: 8px 15px;
}

#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
    color: var(--uib-navy);
    background-color: var(--light-gray);
}

/* Main content area - clean white */
#mw-content-container {
    background-color: var(--white);
    border: 1px solid var(--medium-gray);
    box-shadow: 0 1px 3px rgba(0, 61, 92, 0.1);
}

#mw-content {
    background-color: var(--white);
    color: var(--text-dark);
}

/* Page title */
#firstHeading {
    color: var(--uib-navy);
    border-bottom: 3px solid var(--uib-blue);
    font-weight: 600;
    padding-bottom: 12px;
}

/* Content headings */
.mw-body h1 {
    color: var(--uib-navy);
    font-weight: 600;
}

.mw-body h2 {
    color: var(--uib-navy);
    font-weight: 600;
    border-bottom: 2px solid var(--medium-gray);
    padding-bottom: 8px;
    margin-top: 32px;
}

.mw-body h3 {
    color: var(--uib-blue);
    font-weight: 600;
    margin-top: 24px;
}

.mw-body h4 {
    color: var(--text-dark);
    font-weight: 600;
}

/* Body text */
.mw-body,
.mw-body p {
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 1rem;
}

/* Links - UiB blue */
.mw-body a:not(.new) {
    color: var(--uib-light-blue);
    text-decoration: none;
}

.mw-body a:not(.new):hover {
    color: var(--uib-navy);
    text-decoration: underline;
}

.mw-body a:not(.new):visited {
    color: var(--uib-blue);
}

/* Red links (non-existent pages) */
.mw-body a.new {
    color: #c0392b;
}

/* Tabs (page actions) */
#p-namespaces ul li,
#p-views ul li {
    background-color: var(--light-gray);
    border: 1px solid var(--medium-gray);
    border-bottom: none;
}

#p-namespaces ul li.selected,
#p-views ul li.selected {
    background-color: var(--white);
    border-bottom: 2px solid var(--uib-blue);
}

#p-namespaces a,
#p-views a {
    color: var(--text-medium);
    font-weight: 500;
}

#p-namespaces ul li.selected a,
#p-views ul li.selected a {
    color: var(--uib-navy);
}

/* Buttons */
.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: var(--uib-blue);
    color: white;
    border: none;
    font-weight: 500;
    padding: 10px 20px;
}

.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover {
    background-color: var(--uib-navy);
}

/* Info boxes */
.infobox {
    background-color: var(--light-gray);
    border: 1px solid var(--medium-gray);
    border-left: 4px solid var(--uib-blue);
}

/* Table styling */
table.wikitable {
    background-color: var(--white);
    border: 1px solid var(--medium-gray);
    color: var(--text-dark);
}

table.wikitable th {
    background-color: var(--uib-blue);
    color: white;
    border: 1px solid var(--medium-gray);
    font-weight: 600;
    padding: 12px 16px;
}

table.wikitable td {
    border: 1px solid var(--medium-gray);
    padding: 10px 16px;
}

table.wikitable tr:nth-child(even) {
    background-color: var(--light-gray);
}

table.wikitable tr:hover {
    background-color: #e8f4f8;
}

/* Code blocks */
pre, code {
    background-color: var(--light-gray);
    border: 1px solid var(--medium-gray);
    color: var(--text-dark);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

pre {
    padding: 16px;
}

code {
    padding: 2px 6px;
}

/* Footer */
#footer {
    background-color: var(--light-gray);
    border-top: 1px solid var(--medium-gray);
    color: var(--text-medium);
}

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

#footer a:hover {
    color: var(--uib-blue);
}

/* Search box */
#searchInput {
    border: 1px solid var(--medium-gray);
    background-color: var(--white);
    color: var(--text-dark);
    padding: 8px 12px;
}

#searchInput:focus {
    border-color: var(--uib-blue);
    box-shadow: 0 0 0 2px rgba(0, 119, 179, 0.1);
    outline: none;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--uib-blue);
    background-color: var(--light-gray);
    padding: 16px 20px;
    margin: 20px 0;
    color: var(--text-medium);
}

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

/* Wiki name/site title in top left */
#p-logo a,
#p-logo-text a,
.mw-wiki-title,
#sitelogo-text {
    color: var(--white) !important;
    font-weight: 600 !important;
}

#p-logo a:hover,
#p-logo-text a:hover {
    color: var(--uib-sky) !important;
}

/* Username in top right corner */
#user-tools .mw-ui-icon + span,
#user-tools #pt-userpage a,
#personal h2,
#personal .mw-portlet-heading {
    color: var(--white) !important;
    font-weight: 500 !important;
}

#user-tools #pt-userpage a:hover {
    color: var(--uib-sky) !important;
}

/* Dropdown menu from username */
#personal .mw-portlet-body,
#personal ul,
#user-tools .dropdown,
#personal .vector-menu-content {
    background-color: var(--white);
    border: 1px solid var(--medium-gray);
    box-shadow: 0 4px 12px rgba(0, 61, 92, 0.15);
}

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

#personal .mw-portlet-body a:hover,
#personal ul a:hover,
#user-tools .dropdown a:hover {
    color: var(--uib-navy) !important;
    background-color: var(--light-gray);
}