MediaWiki:Common.css: Difference between revisions

/* ================================================
   Professional Business Theme for Timeless Skin
   MediaWiki:Common.css
   ================================================ */

:root {
    /* Professional color palette */
    --corporate-navy: #1a2f4f;        /* Deep navy blue */
    --business-blue: #2c5282;         /* Professional blue */
    --slate-gray: #475569;            /* Slate gray */
    --steel: #64748b;                 /* Steel gray */
    
    /* Accent colors */
    --executive-blue: #3b82f6;        /* Vibrant blue for links */
    --success-green: #059669;         /* Success/positive actions */
    --corporate-gold: #d97706;        /* Premium accent */
    
    /* Neutrals */
    --white: #ffffff;
    --light-gray: #f8fafc;
    --border-gray: #e2e8f0;
    --text-dark: #1e293b;
    --text-medium: #475569;
}

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

/* Header/top navigation - executive suite */
#mw-header-container {
    background-color: var(--corporate-navy);
    border-bottom: 1px solid var(--border-gray);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#mw-header-nav-hack {
    background-color: var(--corporate-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;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

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

/* Sidebar - clean and minimal */
#mw-site-navigation,
#mw-related-navigation {
    background-color: var(--white);
    border-right: 1px solid var(--border-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(--light-gray);
    color: var(--text-dark);
    border-bottom: 2px solid var(--executive-blue);
    border-left: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    padding: 12px 15px;
}

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

#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
    color: var(--executive-blue);
    background-color: var(--light-gray);
    padding-left: 18px;
}

/* Main content area - clean white card */
#mw-content-container {
    background-color: var(--white);
    border: 1px solid var(--border-gray);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

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

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

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

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

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

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

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

/* Links - professional blue */
.mw-body a:not(.new) {
    color: var(--executive-blue);
    font-weight: 500;
    text-decoration: none;
}

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

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

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

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

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

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

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

/* Buttons - professional action buttons */
.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: var(--executive-blue);
    color: var(--white);
    border: none;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

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

/* Secondary buttons */
.mw-ui-button.mw-ui-quiet,
.oo-ui-buttonElement.oo-ui-buttonElement-frameless {
    background-color: transparent;
    color: var(--executive-blue);
    border: 1px solid var(--border-gray);
}

/* Info boxes - professional callouts */
.infobox {
    background-color: var(--light-gray);
    border: 1px solid var(--border-gray);
    border-left: 4px solid var(--executive-blue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

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

table.wikitable th {
    background-color: var(--light-gray);
    color: var(--text-dark);
    border: 1px solid var(--border-gray);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

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

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

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

/* Code blocks - technical documentation style */
pre, code {
    background-color: var(--light-gray);
    border: 1px solid var(--border-gray);
    color: var(--text-dark);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    border-radius: 3px;
}

pre {
    padding: 16px;
    overflow-x: auto;
}

code {
    padding: 2px 6px;
}

/* Footer - minimal and clean */
#footer {
    background-color: var(--light-gray);
    border-top: 1px solid var(--border-gray);
    color: var(--text-medium);
    font-size: 0.875rem;
}

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

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

/* Search box - modern search */
#searchInput {
    border: 1px solid var(--border-gray);
    background-color: var(--white);
    color: var(--text-dark);
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#searchInput:focus {
    border-color: var(--executive-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

#searchInput::placeholder {
    color: var(--steel);
}

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

/* Lists - clean formatting */
.mw-body ul,
.mw-body ol {
    line-height: 1.8;
}

/* ================================================
   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;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.125rem;
}

#p-logo a:hover,
#p-logo-text a:hover {
    color: var(--executive-blue) !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(--executive-blue) !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(--border-gray);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

#personal .mw-portlet-body a,
#personal ul a,
#user-tools .dropdown a {
    color: var(--text-dark) !important;
    background-color: var(--white);
    font-weight: 400;
    padding: 10px 16px;
}

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