MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */
body.page-Main_Page h1.firstHeading { display:none; }

/**
 * Bio Medicine Theme for MediaWiki Timeless Skin
 * Professional medical/biological color scheme with calming teals and greens
 */

/* ========================================
   Color Palette
   ======================================== */
:root {
    --bio-primary: #0a7d8c;        /* Deep teal - main brand color */
    --bio-primary-dark: #065a66;   /* Darker teal for hover states */
    --bio-primary-light: #e6f5f7;  /* Very light teal for backgrounds */
    --bio-secondary: #2d9f5f;      /* Medical green - secondary accent */
    --bio-secondary-dark: #1f7043; /* Darker green for emphasis */
    --bio-accent: #5fb3c1;         /* Light cyan - links and accents */
    --bio-accent-hover: #4a9aa6;   /* Darker cyan for hover */
    --bio-neutral: #f8fafa;        /* Off-white background */
    --bio-gray-light: #e8eded;     /* Light gray for borders */
    --bio-gray-medium: #b0c4c6;    /* Medium gray for subtle elements */
    --bio-text: #2c3e40;           /* Dark blue-gray for text */
    --bio-text-light: #5a6c6e;     /* Lighter text for secondary info */
}

/* ========================================
   Main Header & Navigation
   ======================================== */
#mw-header-container {
    background: linear-gradient(135deg, var(--bio-primary) 0%, var(--bio-primary-dark) 100%);
    border-bottom: 3px solid var(--bio-secondary);
    box-shadow: 0 2px 8px rgba(10, 125, 140, 0.15);
}

#mw-header-nav-hack {
    background: transparent;
}

#personal {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.3em 0.6em;
}

#personal h2 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9em;
}

#personal ul li a {
    color: rgba(255, 255, 255, 0.95);
    padding: 0.4em 0.7em;
    border-radius: 3px;
    transition: all 0.2s ease;
}

#personal ul li a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
}

/* Site Logo & Name */
#p-logo {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 0.5em;
    transition: background-color 0.2s ease;
}

#p-logo:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#p-logo a {
    color: #fff !important;
    font-weight: 600;
    font-size: 1.3em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Main Navigation Links */
#site-navigation h2 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#site-navigation .sidebar-inner ul li a {
    color: rgba(255, 255, 255, 0.95);
    padding: 0.5em 0.8em;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

#site-navigation .sidebar-inner ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: var(--bio-secondary);
    color: #fff;
    text-decoration: none;
}

#site-navigation .sidebar-inner ul li.active a {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: var(--bio-secondary);
    font-weight: 600;
}

/* ========================================
   Search Box
   ======================================== */
#simpleSearch {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    transition: all 0.2s ease;
}

#simpleSearch:focus-within {
    background: #fff;
    border-color: var(--bio-secondary);
    box-shadow: 0 0 0 3px rgba(45, 159, 95, 0.1);
}

#searchInput {
    color: var(--bio-text);
}

#searchInput::placeholder {
    color: var(--bio-text-light);
}

#searchButton {
    background: var(--bio-secondary);
    border-radius: 0 4px 4px 0;
    transition: background 0.2s ease;
}

#searchButton:hover {
    background: var(--bio-secondary-dark);
}

/* ========================================
   Content Area
   ======================================== */
body {
    background: var(--bio-neutral);
    color: var(--bio-text);
}

#mw-content-container {
    background: #fff;
    border: 1px solid var(--bio-gray-light);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(10, 125, 140, 0.08);
}

#mw-content {
    background: #fff;
}

/* Page Title */
.mw-body h1.firstHeading {
    color: var(--bio-primary);
    border-bottom: 3px solid var(--bio-secondary);
    padding-bottom: 0.4em;
    font-weight: 600;
}

/* Headings */
.mw-body h2 {
    color: var(--bio-primary);
    border-bottom: 2px solid var(--bio-gray-light);
    margin-top: 1.5em;
    padding-bottom: 0.3em;
}

.mw-body h3 {
    color: var(--bio-primary-dark);
    border-bottom: 1px solid var(--bio-gray-light);
    padding-bottom: 0.2em;
}

.mw-body h4,
.mw-body h5,
.mw-body h6 {
    color: var(--bio-text);
}

/* Links */
.mw-body a:not(.new) {
    color: var(--bio-accent);
    transition: color 0.2s ease;
}

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

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

.mw-body a.new {
    color: #c85a54;
}

/* ========================================
   Sidebar & Tools
   ======================================== */
#mw-site-navigation,
#mw-related-navigation {
    background: #fff;
    border: 1px solid var(--bio-gray-light);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(10, 125, 140, 0.05);
}

.sidebar-chunk h2 {
    background: linear-gradient(135deg, var(--bio-primary-light) 0%, #fff 100%);
    color: var(--bio-primary);
    border-bottom: 2px solid var(--bio-secondary);
    font-weight: 600;
    padding: 0.7em 1em;
    margin: 0;
}

.sidebar-inner ul li a {
    color: var(--bio-text);
    padding: 0.5em 1em;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.sidebar-inner ul li a:hover {
    background: var(--bio-primary-light);
    border-left-color: var(--bio-accent);
    color: var(--bio-primary);
    text-decoration: none;
}

/* ========================================
   Tables
   ======================================== */
.mw-body table {
    border-collapse: collapse;
    border: 1px solid var(--bio-gray-light);
}

.mw-body table th {
    background: linear-gradient(to bottom, var(--bio-primary) 0%, var(--bio-primary-dark) 100%);
    color: #fff;
    font-weight: 600;
    padding: 0.7em;
    border: 1px solid var(--bio-primary-dark);
}

.mw-body table td {
    padding: 0.6em;
    border: 1px solid var(--bio-gray-light);
}

.mw-body table tr:nth-child(even) {
    background: var(--bio-primary-light);
}

.mw-body table tr:hover {
    background: rgba(95, 179, 193, 0.1);
}

/* Info boxes */
.infobox {
    background: #fff;
    border: 2px solid var(--bio-accent);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(10, 125, 140, 0.1);
}

.infobox th {
    background: var(--bio-accent);
    color: #fff;
}

/* ========================================
   Message Boxes & Notices
   ======================================== */
.mw-message-box {
    border-radius: 6px;
    border-width: 2px;
}

.mw-message-box-notice {
    background: var(--bio-primary-light);
    border-color: var(--bio-accent);
}

.mw-message-box-warning {
    background: #fff8e6;
    border-color: #f5b042;
}

.mw-message-box-error {
    background: #ffe6e6;
    border-color: #c85a54;
}

.mw-message-box-success {
    background: #e8f7ef;
    border-color: var(--bio-secondary);
}

/* ========================================
   Buttons & Form Elements
   ======================================== */
.mw-ui-button,
.mw-htmlform-submit {
    background: var(--bio-secondary);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.6em 1.2em;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mw-ui-button:hover,
.mw-htmlform-submit:hover {
    background: var(--bio-secondary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(45, 159, 95, 0.2);
}

.mw-ui-button:active,
.mw-htmlform-submit:active {
    transform: translateY(0);
}

.mw-ui-progressive {
    background: var(--bio-accent);
}

.mw-ui-progressive:hover {
    background: var(--bio-accent-hover);
}

/* Form inputs */
input[type="text"],
input[type="search"],
input[type="email"],
textarea {
    border: 2px solid var(--bio-gray-light);
    border-radius: 4px;
    padding: 0.5em;
    transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--bio-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(95, 179, 193, 0.1);
}

/* ========================================
   Categories & Footer
   ======================================== */
#catlinks {
    background: var(--bio-primary-light);
    border: 1px solid var(--bio-gray-light);
    border-radius: 6px;
    margin-top: 2em;
}

#catlinks a {
    color: var(--bio-primary);
}

#catlinks a:hover {
    color: var(--bio-accent);
}

#mw-footer {
    background: linear-gradient(to bottom, #fff 0%, var(--bio-neutral) 100%);
    border-top: 3px solid var(--bio-secondary);
    color: var(--bio-text-light);
}

#mw-footer a {
    color: var(--bio-accent);
}

#mw-footer a:hover {
    color: var(--bio-accent-hover);
}

/* ========================================
   Special Pages & Diff Pages
   ======================================== */
.diff-addedline {
    background: #e8f7ef;
    border-color: var(--bio-secondary);
}

.diff-deletedline {
    background: #ffe6e6;
    border-color: #c85a54;
}

.diff-context {
    background: var(--bio-neutral);
}

/* Recent changes markers */
.mw-plusminus-pos {
    color: var(--bio-secondary);
    font-weight: bold;
}

.mw-plusminus-neg {
    color: #c85a54;
    font-weight: bold;
}

/* ========================================
   Code & Pre-formatted Text
   ======================================== */
code {
    background: var(--bio-primary-light);
    border: 1px solid var(--bio-gray-light);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    color: var(--bio-primary-dark);
}

pre {
    background: var(--bio-neutral);
    border: 1px solid var(--bio-gray-light);
    border-left: 4px solid var(--bio-accent);
    border-radius: 4px;
    padding: 1em;
    overflow-x: auto;
}

/* ========================================
   Medical/Biological Specific Elements
   ======================================== */
/* Add custom class for medical terminology highlights */
.medical-term {
    background: linear-gradient(to right, var(--bio-primary-light), transparent);
    border-left: 3px solid var(--bio-accent);
    padding: 0.2em 0.5em;
    font-style: italic;
}

/* Highlight important medical warnings */
.medical-warning {
    background: #fff8e6;
    border: 2px solid #f5b042;
    border-radius: 6px;
    padding: 1em;
    margin: 1em 0;
}

.medical-warning::before {
    content: "⚕ Medical Information: ";
    font-weight: bold;
    color: #d4860f;
}

/* DNA/Molecule style divider */
.bio-divider {
    height: 2px;
    background: linear-gradient(to right, 
        var(--bio-accent) 0%, 
        var(--bio-secondary) 50%, 
        var(--bio-accent) 100%);
    margin: 2em 0;
    border: none;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 1099px) {
    #mw-header-container {
        border-radius: 0;
    }
    
    #mw-content-container,
    #mw-site-navigation,
    #mw-related-navigation {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 720px) {
    #mw-header-nav-hack {
        background: var(--bio-primary-dark);
    }
    
    .sidebar-chunk h2 {
        font-size: 0.95em;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    #mw-header-container,
    #mw-site-navigation,
    #mw-related-navigation,
    #mw-footer {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .mw-body a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}