MediaWiki:Common.css: Difference between revisions

From WikiMedia i11

← Older edit
Administrator (talk | contribs)
Bureaucrats, Interface administrators, Administrators
20 edits
No edit summary
Tag: Reverted
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* --- Medik: Purple Navigation & Dark Footer --- */
/* --- 1. GLOBAL BRANDING & LINKS --- */


/* 1. Sidebar Navigation Links (Normal and Hover states) */
/* Primary Brand Color: #7D4698 | Darker: #66397c | Lighter: #9b59bc */
/* --- Force Sidebar Links to Purple --- */
 
 
/* Body Links */
 
#mw-content-text a:not(.new), .mw-parser-output a:not(.new), a.external {
 
color: #7D4698 !important;


/* 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 */
#mw-content-text a:not(.new):visited, .mw-parser-output a:not(.new):visited {
.medik-sidebar .text-muted,
 
#mw-navigation .text-muted {
color: #5a326e !important;
    color: #7D4698 !important;
 
}
}


/* Hover state for all sidebar links */
#mw-content-text a:not(.new):hover, .mw-parser-output a:not(.new):hover {
.medik-sidebar a:hover,
 
#mw-navigation a:hover,
color: #9b59bc !important;
.nav-link:hover {
 
    color: #66397c !important;
text-decoration: underline !important;
    text-decoration: underline !important;
 
}
}


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


/* 2. Footer Styling (Purple Background) */
.medik-sidebar a:hover, #mw-navigation a:hover, .nav-link:hover {
#footer {
 
    background-color: #7D4698 !important;
color: #66397c !important;
    color: #ffffff !important; /* Makes base text white */
 
    padding: 2rem 1rem !important; /* Adds some breathing room */
text-decoration: underline !important;
    margin-top: 2rem;
 
}
}


/* 3. Footer Links (White) */
.medik-sidebar-section-title, #mw-navigation h3 {
#footer a {
 
    color: #ffffff !important;
color: #7D4698 !important;
    text-decoration: underline;
 
font-weight: bold;
 
}
}


#footer a:hover {
 
    color: #e2d1e9 !important; /* Light lavender on hover for visibility */
/* Tabs & Buttons */
 
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
 
color: #7D4698 !important;
 
border-top: 3px solid #7D4698 !important;
 
}
}


/* 4. Fix for Footer Icons (Copyright/Powered by) */
.btn-primary, #searchform .btn, #wpSave, #wpPreview, #wpDiff {
/* This ensures the text next to icons is readable */
 
.footer-places li {
background-color: #7D4698 !important;
    color: #ffffff !important;
 
border-color: #7D4698 !important;
 
color: white !important;
 
}
}


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


.nav-tabs .nav-link:hover {
 
    color: #66397c !important;
/* --- 2. INTERFACE BOXES (The "Blue" Overrides) --- */
 
 
/* This targets the blue notices in Medik/Bootstrap */
 
.alert, .alert-info, .mw-message-box, .mw-message-box-info, .mw-message-box-notice, .mw-editinginterface .mw-content-ltr {
 
background-color: #f9f5fa !important;
 
color: #333 !important;
 
border: 1px solid #7D4698 !important;
 
border-left-width: 5px !important;
 
}
}


/* Match the search button to your purple */
 
.btn-primary,  
/* Links inside notice boxes */
#searchform .btn {
 
    background-color: #7D4698 !important;
.alert a, .mw-message-box a, .mw-message-box strong {
    border-color: #7D4698 !important;
 
color: #7D4698 !important;
 
font-weight: bold;
 
}
}


.btn-primary:hover {
 
    background-color: #66397c !important;
/* Code Preview Area */
 
.mw-content-ltr.mw-highlight-lines, pre, .mw-code {
 
background-color: #fdfbff !important;
 
border: 1px solid #e2d1e9 !important;
 
color: #333 !important;
 
}
}


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


/* This targets every link inside the main article area */
/* --- 3. EDITOR & TOOLS --- */
#mw-content-text a:not(.new),
 
.mw-parser-output a:not(.new) {
 
    color: #7D4698 !important;
#wpTextbox1 { border: 1px solid #7D4698 !important; }
 
#wpTextbox1:focus { outline: 2px solid #7D4698 !important; }
 
 
#toolbar, .editOptions {
 
background-color: #f3e5f5 !important;
 
border: 1px solid #7D4698 !important;
 
}
}


/* Visited links - slightly darker purple */
 
#mw-content-text a:not(.new):visited,
/* Table of Contents */
.mw-parser-output a:not(.new):visited {
 
    color: #5a326e !important;
.toc, .mw-toc, #toc {
 
background-color: #f9f5fa !important;
 
border: 1px solid #7D4698 !important;
 
padding: 10px !important;
 
}
}


/* Hover state */
.toc h2, .mw-toc h2 {
#mw-content-text a:not(.new):hover,
 
.mw-parser-output a:not(.new):hover {
color: #7D4698 !important;
    color: #9b59bc !important;
 
    text-decoration: underline !important;
border-bottom: 1px solid #e2d1e9 !important;
 
}
}


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


/* --- Edit Interface Customization --- */
/* --- 4. FOOTER --- */
 
 
#footer {


/* 1. The Edit Notices / Warning boxes (The light blue boxes) */
background-color: #7D4698 !important;
.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) */
color: #ffffff !important;
#toolbar {
    background-color: #f3e5f5 !important;
    border: 1px solid #7D4698 !important;
}


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


/* 4. Formatting the 'Permissions' or 'Information' boxes in the editor */
margin-top: 2rem;
.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 {
#footer a, .footer-places li { color: #ffffff !important; }
    background-color: #66397c !important;
}


#wpTextbox1 {
#footer a:hover { color: #e2d1e9 !important; }
    border: 1px solid #7D4698 !important;
}
#wpTextbox1:focus {
    outline: 2px solid #7D4698 !important;
    border: 1px solid #7D4698 !important;
}

Latest revision as of 16:41, 24 January 2026

/* --- 1. GLOBAL BRANDING & LINKS --- */

/* Primary Brand Color: #7D4698 | Darker: #66397c | Lighter: #9b59bc */


/* Body Links */

#mw-content-text a:not(.new), .mw-parser-output a:not(.new), a.external {

color: #7D4698 !important;

}

#mw-content-text a:not(.new):visited, .mw-parser-output a:not(.new):visited {

color: #5a326e !important;

}

#mw-content-text a:not(.new):hover, .mw-parser-output a:not(.new):hover {

color: #9b59bc !important;

text-decoration: underline !important;

}


/* Sidebar & Navigation Links */

.medik-sidebar a, #mw-navigation a, .nav-link, .sidebar-inner a, .medik-sidebar .text-muted, #mw-navigation .text-muted {

color: #7D4698 !important;

}

.medik-sidebar a:hover, #mw-navigation a:hover, .nav-link:hover {

color: #66397c !important;

text-decoration: underline !important;

}

.medik-sidebar-section-title, #mw-navigation h3 {

color: #7D4698 !important;

font-weight: bold;

}


/* Tabs & Buttons */

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {

color: #7D4698 !important;

border-top: 3px solid #7D4698 !important;

}

.btn-primary, #searchform .btn, #wpSave, #wpPreview, #wpDiff {

background-color: #7D4698 !important;

border-color: #7D4698 !important;

color: white !important;

}

.btn-primary:hover, #wpSave:hover, #wpPreview:hover, #wpDiff:hover {

background-color: #66397c !important;

}


/* --- 2. INTERFACE BOXES (The "Blue" Overrides) --- */


/* This targets the blue notices in Medik/Bootstrap */

.alert, .alert-info, .mw-message-box, .mw-message-box-info, .mw-message-box-notice, .mw-editinginterface .mw-content-ltr {

background-color: #f9f5fa !important;

color: #333 !important;

border: 1px solid #7D4698 !important;

border-left-width: 5px !important;

}


/* Links inside notice boxes */

.alert a, .mw-message-box a, .mw-message-box strong {

color: #7D4698 !important;

font-weight: bold;

}


/* Code Preview Area */

.mw-content-ltr.mw-highlight-lines, pre, .mw-code {

background-color: #fdfbff !important;

border: 1px solid #e2d1e9 !important;

color: #333 !important;

}


/* --- 3. EDITOR & TOOLS --- */


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

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


#toolbar, .editOptions {

background-color: #f3e5f5 !important;

border: 1px solid #7D4698 !important;

}


/* Table of Contents */

.toc, .mw-toc, #toc {

background-color: #f9f5fa !important;

border: 1px solid #7D4698 !important;

padding: 10px !important;

}

.toc h2, .mw-toc h2 {

color: #7D4698 !important;

border-bottom: 1px solid #e2d1e9 !important;

}


/* --- 4. FOOTER --- */


#footer {

background-color: #7D4698 !important;

color: #ffffff !important;

padding: 2rem 1rem !important;

margin-top: 2rem;

}

#footer a, .footer-places li { color: #ffffff !important; }

#footer a:hover { color: #e2d1e9 !important; }
Retrieved from "https://mediawiki.i11.nl/index.php?title=MediaWiki:Common.css&oldid=21"