MediaWiki:Common.css: Difference between revisions
From Wiki for UiB's NanoStructures Laboratory
Created page with "body.page-Main_Page h1.firstHeading { display:none; } body.page-Main_Page h2.firstHeading { display:none !important; } body.page-Main_Page h2#firstHeading.title { display:none; } body.page-Forside h1.firstHeading { display:none; } →================================================ Warm Light Green Theme for Timeless Skin MediaWiki:Common.css ================================================: :root { /* Primary green colors - warm sage and forest palette *..." |
No edit summary |
||
| Line 4: | Line 4: | ||
body.page-Forside h1.firstHeading { display:none; } | body.page-Forside h1.firstHeading { display:none; } | ||
/* ================================================ | /* ================================================ | ||
Warm | Warm Autumn Theme for Timeless Skin | ||
MediaWiki:Common.css | MediaWiki:Common.css | ||
================================================ */ | ================================================ */ | ||
:root { | :root { | ||
/* Primary | /* Primary autumn colors - warm harvest palette */ | ||
-- | --autumn-brown: #8b4513; /* Rich saddle brown */ | ||
-- | --harvest-orange: #d97736; /* Warm harvest orange */ | ||
-- | --autumn-cream: #fef5e7; /* Light cream background */ | ||
-- | --burnt-sienna: #a0522d; /* Burnt sienna for headers */ | ||
/* Accent colors */ | /* Accent colors */ | ||
-- | --maple-red: #c44536; /* Maple leaf red for links */ | ||
--golden- | --golden-yellow: #daa520; /* Golden yellow for hover */ | ||
-- | --pumpkin: #e97d3d; /* Pumpkin orange */ | ||
/* Neutrals */ | /* Neutrals */ | ||
--warm- | --warm-beige: #f9f3e8; | ||
-- | --tan: #d4a76a; | ||
--dark- | --dark-brown: #3d2817; | ||
} | } | ||
/* Main page background */ | /* Main page background */ | ||
body { | body { | ||
background-color: var(--warm- | background-color: var(--warm-beige); | ||
} | } | ||
/* Header/top navigation */ | /* Header/top navigation */ | ||
#mw-header-container { | #mw-header-container { | ||
background-color: var(-- | background-color: var(--autumn-brown); | ||
border-bottom: 3px solid var(-- | border-bottom: 3px solid var(--harvest-orange); | ||
} | } | ||
#mw-header-nav-hack { | #mw-header-nav-hack { | ||
background-color: var(-- | background-color: var(--autumn-brown); | ||
} | } | ||
| Line 49: | Line 49: | ||
#mw-header-nav-hack a, | #mw-header-nav-hack a, | ||
#user-tools a { | #user-tools a { | ||
color: var(-- | color: var(--autumn-cream); | ||
} | } | ||
#mw-header-nav-hack a:hover, | #mw-header-nav-hack a:hover, | ||
#user-tools a:hover { | #user-tools a:hover { | ||
color: var(--golden- | color: var(--golden-yellow); | ||
} | } | ||
| Line 60: | Line 60: | ||
#mw-site-navigation, | #mw-site-navigation, | ||
#mw-related-navigation { | #mw-related-navigation { | ||
background-color: var(-- | background-color: var(--autumn-cream); | ||
border-right: 1px solid var(-- | border-right: 1px solid var(--tan); | ||
} | } | ||
| Line 71: | Line 71: | ||
#mw-site-navigation h3, | #mw-site-navigation h3, | ||
#mw-related-navigation h3 { | #mw-related-navigation h3 { | ||
background-color: var(-- | background-color: var(--harvest-orange); | ||
color: white; | color: white; | ||
border-bottom: 2px solid var(-- | border-bottom: 2px solid var(--burnt-sienna); | ||
} | } | ||
| Line 79: | Line 79: | ||
#mw-site-navigation a, | #mw-site-navigation a, | ||
#mw-related-navigation a { | #mw-related-navigation a { | ||
color: var(-- | color: var(--burnt-sienna); | ||
} | } | ||
#mw-site-navigation a:hover, | #mw-site-navigation a:hover, | ||
#mw-related-navigation a:hover { | #mw-related-navigation a:hover { | ||
color: var(-- | color: var(--maple-red); | ||
background-color: rgba( | background-color: rgba(217, 119, 54, 0.1); | ||
} | } | ||
| Line 91: | Line 91: | ||
#mw-content-container { | #mw-content-container { | ||
background-color: white; | background-color: white; | ||
border: 1px solid var(-- | border: 1px solid var(--tan); | ||
box-shadow: 0 2px 8px rgba( | box-shadow: 0 2px 8px rgba(139, 69, 19, 0.15); | ||
} | } | ||
| Line 101: | Line 101: | ||
/* Page title */ | /* Page title */ | ||
#firstHeading { | #firstHeading { | ||
color: var(-- | color: var(--autumn-brown); | ||
border-bottom: 3px solid var(-- | border-bottom: 3px solid var(--harvest-orange); | ||
} | } | ||
| Line 110: | Line 110: | ||
.mw-body h3, | .mw-body h3, | ||
.mw-body h4 { | .mw-body h4 { | ||
color: var(-- | color: var(--burnt-sienna); | ||
} | } | ||
.mw-body h2 { | .mw-body h2 { | ||
border-bottom: 2px solid var(-- | border-bottom: 2px solid var(--harvest-orange); | ||
} | } | ||
/* Links */ | /* Links */ | ||
.mw-body a:not(.new) { | .mw-body a:not(.new) { | ||
color: var(-- | color: var(--maple-red); | ||
} | } | ||
.mw-body a:not(.new):hover { | .mw-body a:not(.new):hover { | ||
color: var(-- | color: var(--pumpkin); | ||
} | } | ||
.mw-body a:not(.new):visited { | .mw-body a:not(.new):visited { | ||
color: # | color: #9a3829; | ||
} | } | ||
/* Red links (non-existent pages) */ | /* Red links (non-existent pages) */ | ||
.mw-body a.new { | .mw-body a.new { | ||
color: # | color: #b85450; | ||
} | } | ||
| Line 138: | Line 138: | ||
#p-namespaces ul li, | #p-namespaces ul li, | ||
#p-views ul li { | #p-views ul li { | ||
background-color: var(-- | background-color: var(--autumn-cream); | ||
border: 1px solid var(-- | border: 1px solid var(--tan); | ||
} | } | ||
| Line 150: | Line 150: | ||
#p-namespaces a, | #p-namespaces a, | ||
#p-views a { | #p-views a { | ||
color: var(-- | color: var(--burnt-sienna); | ||
} | } | ||
| Line 156: | Line 156: | ||
.mw-ui-button, | .mw-ui-button, | ||
.oo-ui-buttonElement-button { | .oo-ui-buttonElement-button { | ||
background-color: var(-- | background-color: var(--harvest-orange); | ||
color: white; | color: white; | ||
border: 1px solid var(-- | border: 1px solid var(--burnt-sienna); | ||
} | } | ||
.mw-ui-button:hover, | .mw-ui-button:hover, | ||
.oo-ui-buttonElement-button:hover { | .oo-ui-buttonElement-button:hover { | ||
background-color: var(-- | background-color: var(--burnt-sienna); | ||
} | } | ||
/* Info boxes and notice templates */ | /* Info boxes and notice templates */ | ||
.infobox { | .infobox { | ||
background-color: var(-- | background-color: var(--autumn-cream); | ||
border: 1px solid var(-- | border: 1px solid var(--harvest-orange); | ||
} | } | ||
| Line 175: | Line 175: | ||
table.wikitable { | table.wikitable { | ||
background-color: white; | background-color: white; | ||
border: 1px solid var(-- | border: 1px solid var(--tan); | ||
} | } | ||
table.wikitable th { | table.wikitable th { | ||
background-color: var(-- | background-color: var(--harvest-orange); | ||
color: white; | color: white; | ||
} | } | ||
table.wikitable tr:hover { | table.wikitable tr:hover { | ||
background-color: var(-- | background-color: var(--autumn-cream); | ||
} | } | ||
/* Code blocks */ | /* Code blocks */ | ||
pre, code { | pre, code { | ||
background-color: var(-- | background-color: var(--autumn-cream); | ||
border: 1px solid var(-- | border: 1px solid var(--tan); | ||
} | } | ||
/* Footer */ | /* Footer */ | ||
#footer { | #footer { | ||
background-color: var(-- | background-color: var(--autumn-cream); | ||
border-top: 3px solid var(-- | border-top: 3px solid var(--harvest-orange); | ||
color: var(--dark- | color: var(--dark-brown); | ||
} | } | ||
#footer a { | #footer a { | ||
color: var(-- | color: var(--burnt-sienna); | ||
} | } | ||
#footer a:hover { | #footer a:hover { | ||
color: var(-- | color: var(--maple-red); | ||
} | } | ||
/* Search box */ | /* Search box */ | ||
#searchInput { | #searchInput { | ||
border: 1px solid var(-- | border: 1px solid var(--tan); | ||
background-color: white; | background-color: white; | ||
} | } | ||
#searchInput:focus { | #searchInput:focus { | ||
border-color: var(-- | border-color: var(--harvest-orange); | ||
box-shadow: 0 0 5px rgba( | box-shadow: 0 0 5px rgba(217, 119, 54, 0.3); | ||
} | } | ||
| Line 228: | Line 228: | ||
.mw-wiki-title, | .mw-wiki-title, | ||
#sitelogo-text { | #sitelogo-text { | ||
color: var(-- | color: var(--autumn-cream) !important; | ||
} | } | ||
#p-logo a:hover, | #p-logo a:hover, | ||
#p-logo-text a:hover { | #p-logo-text a:hover { | ||
color: var(--golden- | color: var(--golden-yellow) !important; | ||
} | } | ||
| Line 241: | Line 241: | ||
#personal h2, | #personal h2, | ||
#personal .mw-portlet-heading { | #personal .mw-portlet-heading { | ||
color: var(-- | color: var(--autumn-cream) !important; | ||
} | } | ||
#user-tools #pt-userpage a:hover { | #user-tools #pt-userpage a:hover { | ||
color: var(--golden- | color: var(--golden-yellow) !important; | ||
} | } | ||
| Line 254: | Line 254: | ||
#personal .vector-menu-content { | #personal .vector-menu-content { | ||
background-color: white; | background-color: white; | ||
border: 1px solid var(-- | border: 1px solid var(--tan); | ||
box-shadow: 0 2px 8px rgba( | box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2); | ||
} | } | ||
| Line 261: | Line 261: | ||
#personal ul a, | #personal ul a, | ||
#user-tools .dropdown a { | #user-tools .dropdown a { | ||
color: var(-- | color: var(--burnt-sienna) !important; | ||
background-color: white; | background-color: white; | ||
} | } | ||
| Line 268: | Line 268: | ||
#personal ul a:hover, | #personal ul a:hover, | ||
#user-tools .dropdown a:hover { | #user-tools .dropdown a:hover { | ||
color: var(-- | color: var(--maple-red) !important; | ||
background-color: var(-- | background-color: var(--autumn-cream); | ||
} | } | ||
Latest revision as of 14:19, 21 December 2025
body.page-Main_Page h1.firstHeading { display:none; }
body.page-Main_Page h2.firstHeading { display:none !important; }
body.page-Main_Page h2#firstHeading.title { display:none; }
body.page-Forside h1.firstHeading { display:none; }
/* ================================================
Warm Autumn Theme for Timeless Skin
MediaWiki:Common.css
================================================ */
:root {
/* Primary autumn colors - warm harvest palette */
--autumn-brown: #8b4513; /* Rich saddle brown */
--harvest-orange: #d97736; /* Warm harvest orange */
--autumn-cream: #fef5e7; /* Light cream background */
--burnt-sienna: #a0522d; /* Burnt sienna for headers */
/* Accent colors */
--maple-red: #c44536; /* Maple leaf red for links */
--golden-yellow: #daa520; /* Golden yellow for hover */
--pumpkin: #e97d3d; /* Pumpkin orange */
/* Neutrals */
--warm-beige: #f9f3e8;
--tan: #d4a76a;
--dark-brown: #3d2817;
}
/* Main page background */
body {
background-color: var(--warm-beige);
}
/* Header/top navigation */
#mw-header-container {
background-color: var(--autumn-brown);
border-bottom: 3px solid var(--harvest-orange);
}
#mw-header-nav-hack {
background-color: var(--autumn-brown);
}
/* Site logo area */
#p-logo a {
background-color: transparent;
}
/* Navigation links in header */
#mw-header-nav-hack a,
#user-tools a {
color: var(--autumn-cream);
}
#mw-header-nav-hack a:hover,
#user-tools a:hover {
color: var(--golden-yellow);
}
/* Sidebar */
#mw-site-navigation,
#mw-related-navigation {
background-color: var(--autumn-cream);
border-right: 1px solid var(--tan);
}
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
background-color: transparent;
}
#mw-site-navigation h3,
#mw-related-navigation h3 {
background-color: var(--harvest-orange);
color: white;
border-bottom: 2px solid var(--burnt-sienna);
}
/* Sidebar links */
#mw-site-navigation a,
#mw-related-navigation a {
color: var(--burnt-sienna);
}
#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
color: var(--maple-red);
background-color: rgba(217, 119, 54, 0.1);
}
/* Main content area */
#mw-content-container {
background-color: white;
border: 1px solid var(--tan);
box-shadow: 0 2px 8px rgba(139, 69, 19, 0.15);
}
#mw-content {
background-color: white;
}
/* Page title */
#firstHeading {
color: var(--autumn-brown);
border-bottom: 3px solid var(--harvest-orange);
}
/* Content headings */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4 {
color: var(--burnt-sienna);
}
.mw-body h2 {
border-bottom: 2px solid var(--harvest-orange);
}
/* Links */
.mw-body a:not(.new) {
color: var(--maple-red);
}
.mw-body a:not(.new):hover {
color: var(--pumpkin);
}
.mw-body a:not(.new):visited {
color: #9a3829;
}
/* Red links (non-existent pages) */
.mw-body a.new {
color: #b85450;
}
/* Tabs (page actions) */
#p-namespaces ul li,
#p-views ul li {
background-color: var(--autumn-cream);
border: 1px solid var(--tan);
}
#p-namespaces ul li.selected,
#p-views ul li.selected {
background-color: white;
border-bottom-color: white;
}
#p-namespaces a,
#p-views a {
color: var(--burnt-sienna);
}
/* Buttons */
.mw-ui-button,
.oo-ui-buttonElement-button {
background-color: var(--harvest-orange);
color: white;
border: 1px solid var(--burnt-sienna);
}
.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover {
background-color: var(--burnt-sienna);
}
/* Info boxes and notice templates */
.infobox {
background-color: var(--autumn-cream);
border: 1px solid var(--harvest-orange);
}
/* Table styling */
table.wikitable {
background-color: white;
border: 1px solid var(--tan);
}
table.wikitable th {
background-color: var(--harvest-orange);
color: white;
}
table.wikitable tr:hover {
background-color: var(--autumn-cream);
}
/* Code blocks */
pre, code {
background-color: var(--autumn-cream);
border: 1px solid var(--tan);
}
/* Footer */
#footer {
background-color: var(--autumn-cream);
border-top: 3px solid var(--harvest-orange);
color: var(--dark-brown);
}
#footer a {
color: var(--burnt-sienna);
}
#footer a:hover {
color: var(--maple-red);
}
/* Search box */
#searchInput {
border: 1px solid var(--tan);
background-color: white;
}
#searchInput:focus {
border-color: var(--harvest-orange);
box-shadow: 0 0 5px rgba(217, 119, 54, 0.3);
}
/* ================================================
Additional fixes for header text visibility
================================================ */
/* Wiki name/site title in top left - make it light on dark background */
#p-logo a,
#p-logo-text a,
.mw-wiki-title,
#sitelogo-text {
color: var(--autumn-cream) !important;
}
#p-logo a:hover,
#p-logo-text a:hover {
color: var(--golden-yellow) !important;
}
/* Username in top right corner - make it light */
#user-tools .mw-ui-icon + span,
#user-tools #pt-userpage a,
#personal h2,
#personal .mw-portlet-heading {
color: var(--autumn-cream) !important;
}
#user-tools #pt-userpage a:hover {
color: var(--golden-yellow) !important;
}
/* Dropdown menu from username - dark text on light background */
#personal .mw-portlet-body,
#personal ul,
#user-tools .dropdown,
#personal .vector-menu-content {
background-color: white;
border: 1px solid var(--tan);
box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2);
}
#personal .mw-portlet-body a,
#personal ul a,
#user-tools .dropdown a {
color: var(--burnt-sienna) !important;
background-color: white;
}
#personal .mw-portlet-body a:hover,
#personal ul a:hover,
#user-tools .dropdown a:hover {
color: var(--maple-red) !important;
background-color: var(--autumn-cream);
}
