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 Light Green Theme for Timeless Skin
   Warm Autumn Theme for Timeless Skin
   MediaWiki:Common.css
   MediaWiki:Common.css
   ================================================ */
   ================================================ */


:root {
:root {
     /* Primary green colors - warm sage and forest palette */
     /* Primary autumn colors - warm harvest palette */
     --forest-green: #4a7c59;          /* Rich forest green */
     --autumn-brown: #8b4513;          /* Rich saddle brown */
     --sage-green: #7fa86f;           /* Warm sage green */
     --harvest-orange: #d97736;       /* Warm harvest orange */
     --light-cream: #f8faf7;           /* Very light cream background with green hint */
     --autumn-cream: #fef5e7;         /* Light cream background */
     --olive-green: #6b8e5f;           /* Olive green for headers */
     --burnt-sienna: #a0522d;         /* Burnt sienna for headers */
 
   
     /* Accent colors */
     /* Accent colors */
     --deep-teal: #3a7d6e;            /* Deep teal for links */
     --maple-red: #c44536;            /* Maple leaf red for links */
     --golden-green: #8ba876;         /* Golden green for hover */
     --golden-yellow: #daa520;         /* Golden yellow for hover */
     --moss-green: #7c9d6d;           /* Moss green accent */
     --pumpkin: #e97d3d;               /* Pumpkin orange */
 
   
     /* Neutrals */
     /* Neutrals */
     --warm-white: #f4f7f2;
     --warm-beige: #f9f3e8;
     --light-sage: #c4d9b8;
     --tan: #d4a76a;
     --dark-green: #2d4a32;
     --dark-brown: #3d2817;
}
}


/* Main page background */
/* Main page background */
body {
body {
     background-color: var(--warm-white);
     background-color: var(--warm-beige);
}
}


/* Header/top navigation */
/* Header/top navigation */
#mw-header-container {
#mw-header-container {
     background-color: var(--forest-green);
     background-color: var(--autumn-brown);
     border-bottom: 3px solid var(--sage-green);
     border-bottom: 3px solid var(--harvest-orange);
}
}


#mw-header-nav-hack {
#mw-header-nav-hack {
     background-color: var(--forest-green);
     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(--light-cream);
     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-green);
     color: var(--golden-yellow);
}
}


Line 60: Line 60:
#mw-site-navigation,
#mw-site-navigation,
#mw-related-navigation {
#mw-related-navigation {
     background-color: var(--light-cream);
     background-color: var(--autumn-cream);
     border-right: 1px solid var(--light-sage);
     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(--sage-green);
     background-color: var(--harvest-orange);
     color: white;
     color: white;
     border-bottom: 2px solid var(--olive-green);
     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(--olive-green);
     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(--deep-teal);
     color: var(--maple-red);
     background-color: rgba(127, 168, 111, 0.1);
     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(--light-sage);
     border: 1px solid var(--tan);
     box-shadow: 0 2px 8px rgba(74, 124, 89, 0.15);
     box-shadow: 0 2px 8px rgba(139, 69, 19, 0.15);
}
}


Line 101: Line 101:
/* Page title */
/* Page title */
#firstHeading {
#firstHeading {
     color: var(--forest-green);
     color: var(--autumn-brown);
     border-bottom: 3px solid var(--sage-green);
     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(--olive-green);
     color: var(--burnt-sienna);
}
}


.mw-body h2 {
.mw-body h2 {
     border-bottom: 2px solid var(--sage-green);
     border-bottom: 2px solid var(--harvest-orange);
}
}


/* Links */
/* Links */
.mw-body a:not(.new) {
.mw-body a:not(.new) {
     color: var(--deep-teal);
     color: var(--maple-red);
}
}


.mw-body a:not(.new):hover {
.mw-body a:not(.new):hover {
     color: var(--moss-green);
     color: var(--pumpkin);
}
}


.mw-body a:not(.new):visited {
.mw-body a:not(.new):visited {
     color: #2d6359;
     color: #9a3829;
}
}


/* Red links (non-existent pages) */
/* Red links (non-existent pages) */
.mw-body a.new {
.mw-body a.new {
     color: #a86850;
     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(--light-cream);
     background-color: var(--autumn-cream);
     border: 1px solid var(--light-sage);
     border: 1px solid var(--tan);
}
}


Line 150: Line 150:
#p-namespaces a,
#p-namespaces a,
#p-views a {
#p-views a {
     color: var(--olive-green);
     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(--sage-green);
     background-color: var(--harvest-orange);
     color: white;
     color: white;
     border: 1px solid var(--olive-green);
     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(--olive-green);
     background-color: var(--burnt-sienna);
}
}


/* Info boxes and notice templates */
/* Info boxes and notice templates */
.infobox {
.infobox {
     background-color: var(--light-cream);
     background-color: var(--autumn-cream);
     border: 1px solid var(--sage-green);
     border: 1px solid var(--harvest-orange);
}
}


Line 175: Line 175:
table.wikitable {
table.wikitable {
     background-color: white;
     background-color: white;
     border: 1px solid var(--light-sage);
     border: 1px solid var(--tan);
}
}


table.wikitable th {
table.wikitable th {
     background-color: var(--sage-green);
     background-color: var(--harvest-orange);
     color: white;
     color: white;
}
}


table.wikitable tr:hover {
table.wikitable tr:hover {
     background-color: var(--light-cream);
     background-color: var(--autumn-cream);
}
}


/* Code blocks */
/* Code blocks */
pre, code {
pre, code {
     background-color: var(--light-cream);
     background-color: var(--autumn-cream);
     border: 1px solid var(--light-sage);
     border: 1px solid var(--tan);
}
}


/* Footer */
/* Footer */
#footer {
#footer {
     background-color: var(--light-cream);
     background-color: var(--autumn-cream);
     border-top: 3px solid var(--sage-green);
     border-top: 3px solid var(--harvest-orange);
     color: var(--dark-green);
     color: var(--dark-brown);
}
}


#footer a {
#footer a {
     color: var(--olive-green);
     color: var(--burnt-sienna);
}
}


#footer a:hover {
#footer a:hover {
     color: var(--deep-teal);
     color: var(--maple-red);
}
}


/* Search box */
/* Search box */
#searchInput {
#searchInput {
     border: 1px solid var(--light-sage);
     border: 1px solid var(--tan);
     background-color: white;
     background-color: white;
}
}


#searchInput:focus {
#searchInput:focus {
     border-color: var(--sage-green);
     border-color: var(--harvest-orange);
     box-shadow: 0 0 5px rgba(127, 168, 111, 0.3);
     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(--light-cream) !important;
     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-green) !important;
     color: var(--golden-yellow) !important;
}
}


Line 241: Line 241:
#personal h2,
#personal h2,
#personal .mw-portlet-heading {
#personal .mw-portlet-heading {
     color: var(--light-cream) !important;
     color: var(--autumn-cream) !important;
}
}


#user-tools #pt-userpage a:hover {
#user-tools #pt-userpage a:hover {
     color: var(--golden-green) !important;
     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(--light-sage);
     border: 1px solid var(--tan);
     box-shadow: 0 2px 8px rgba(74, 124, 89, 0.2);
     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(--olive-green) !important;
     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(--deep-teal) !important;
     color: var(--maple-red) !important;
     background-color: var(--light-cream);
     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);
}