MediaWiki:Common.css: Difference between revisions

/* --- Medik: Purple Navigation & Dark Footer --- */

/* 1. Sidebar Navigation Links (Normal and Hover states) */
/* --- Force Sidebar Links to Purple --- */

/* Targets the sidebar links and the user menu links */
.medik-sidebar a,
#mw-navigation a,
.nav-link,
.sidebar-inner a {
    color: #7D4698 !important;
}

/* Specifically targets the 'text-muted' icons/text Medik uses in menus */
.medik-sidebar .text-muted,
#mw-navigation .text-muted {
    color: #7D4698 !important;
}

/* Hover state for all sidebar links */
.medik-sidebar a:hover,
#mw-navigation a:hover,
.nav-link:hover {
    color: #66397c !important;
    text-decoration: underline !important;
}

/* If you have a 'Tools' or 'Navigation' header, this colors them too */
.medik-sidebar-section-title,
#mw-navigation h3 {
    color: #7D4698 !important;
    font-weight: bold;
}

/* 2. Footer Styling (Purple Background) */
#footer {
    background-color: #7D4698 !important;
    color: #ffffff !important; /* Makes base text white */
    padding: 2rem 1rem !important; /* Adds some breathing room */
    margin-top: 2rem;
}

/* 3. Footer Links (White) */
#footer a {
    color: #ffffff !important;
    text-decoration: underline;
}

#footer a:hover {
    color: #e2d1e9 !important; /* Light lavender on hover for visibility */
}

/* 4. Fix for Footer Icons (Copyright/Powered by) */
/* This ensures the text next to icons is readable */
.footer-places li {
    color: #ffffff !important;
}

/* Color the active tab and hover states for page actions */
.nav-tabs .nav-link.active, 
.nav-tabs .nav-item.show .nav-link {
    color: #7D4698 !important;
    border-top: 3px solid #7D4698 !important;
}

.nav-tabs .nav-link:hover {
    color: #66397c !important;
}

/* Match the search button to your purple */
.btn-primary, 
#searchform .btn {
    background-color: #7D4698 !important;
    border-color: #7D4698 !important;
}

.btn-primary:hover {
    background-color: #66397c !important;
}

/* --- Force Content Links to Purple --- */

/* This targets every link inside the main article area */
#mw-content-text a:not(.new),
.mw-parser-output a:not(.new) {
    color: #7D4698 !important;
}

/* Visited links - slightly darker purple */
#mw-content-text a:not(.new):visited,
.mw-parser-output a:not(.new):visited {
    color: #5a326e !important;
}

/* Hover state */
#mw-content-text a:not(.new):hover,
.mw-parser-output a:not(.new):hover {
    color: #9b59bc !important;
    text-decoration: underline !important;
}

/* Keep external links (with the little arrow) purple too */
#mw-content-text a.external {
    color: #7D4698 !important;
}

/* --- Edit Interface Customization --- */

/* 1. The Edit Notices / Warning boxes (The light blue boxes) */
.mw-editinginterface .mw-content-ltr,
.mw-editinginterface .mw-content-rtl,
.editOptions {
    background-color: #f9f5fa !important; /* Very light purple tint */
    border: 1px solid #7D4698 !important;   /* Purple border */
    color: #333 !important;
}

/* 2. The Edit Toolbar (if using the classic toolbar) */
#toolbar {
    background-color: #f3e5f5 !important;
    border: 1px solid #7D4698 !important;
}

/* 3. The Summary box and buttons area */
.editOptions {
    background-color: #f3e5f5 !important;
    border-radius: 4px;
}

/* 4. Formatting the 'Permissions' or 'Information' boxes in the editor */
.mw-message-box-info, 
.mw-message-box {
    background-color: #f9f5fa !important;
    border-left: 5px solid #7D4698 !important; /* Thick purple accent on the left */
}

/* 5. Customizing the actual Save/Preview buttons */
#wpSave, #wpPreview, #wpDiff {
    background-color: #7D4698 !important;
    border-color: #7D4698 !important;
    color: white !important;
}

#wpSave:hover, #wpPreview:hover, #wpDiff:hover {
    background-color: #66397c !important;
}

#wpTextbox1 {
    border: 1px solid #7D4698 !important;
}
#wpTextbox1:focus {
    outline: 2px solid #7D4698 !important;
    border: 1px solid #7D4698 !important;
}

/* --- Table of Contents (TOC) Purple Theme --- */
.toc, .mw-toc, #toc {
    background-color: #f9f5fa !important;
    border: 1px solid #7D4698 !important;
    padding: 10px !important;
}

.toc h2, .mw-toc h2 {
    color: #7D4698 !important;
    font-size: 1.1rem !important;
    border-bottom: 1px solid #e2d1e9 !important;
}

/* --- MediaWiki Interface & Code Preview --- */

/* 1. The 'Note' box at the top of the CSS/JS pages */
.mw-content-ltr.mw-highlight-lines,
.mw-plainlinks.mw-message-box-notice,
.mw-message-box {
    background-color: #f9f5fa !important; /* Light purple tint */
    border: 1px solid #7D4698 !important;   /* Purple border */
    border-left: 5px solid #7D4698 !important; /* Thick accent */
}

/* 2. The Code Preview container background */
pre, .mw-code {
    background-color: #fdfbff !important;
    border: 1px solid #e2d1e9 !important;
    color: #333 !important;
}

/* 3. The "Note:" text itself */
.mw-message-box strong {
    color: #7D4698 !important;
}

/* 4. Formatting the bullet points inside these notice boxes */
.mw-message-box ul li {
    color: #4a4a4a !important;
}

/* --- Overriding Medik/Bootstrap Alert Colors (The blue boxes) --- */

/* This targets the specific blue 'info' and 'notice' alerts used in the UI */
.alert-info, 
.mw-message-box-info,
.mw-message-box-notice {
    background-color: #f9f5fa !important; /* Light purple background */
    color: #333 !important;                /* Dark text for readability */
    border-color: #7D4698 !important;      /* Purple border */
    border-left-width: 5px !important;    /* Keeping that thick left accent */
}

/* This fixes the links inside those blue boxes so they aren't hard to read */
.alert-info a,
.mw-message-box a {
    color: #7D4698 !important;
    font-weight: bold;
}

/* This targets the 'Code' area container specifically */
.mw-content-ltr.mw-highlight-lines {
    background-color: #fdfbff !important;
    border: 1px solid #e2d1e9 !important;
}