MediaWiki:Common.css: Difference between revisions

Latest revision as of 09:10, 7 January 2026

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; }
/* ================================================
   FORSKNING Research Theme for Timeless Skin
   MediaWiki:Common.css
   Perfect for: Research Wikis, Scientific Documentation
   ================================================ */

:root {
    /* FORSKNING Research Color Palette */
    --slate-teal: #2A5E5B;            /* Primary - Dark Slate Grey */
    --shadow-grey: #212429;           /* Deep dark - Shadow Grey */
    --hunter-green: #2A6349;          /* Secondary - Hunter Green */
    --mint-cream: #F2FBF5;            /* Background - Mint Cream */
    --pale-sky: #CDDCE0;              /* Accent - Pale Sky */

    /* Extended palette for UI elements */
    --slate-teal-light: #3a7e7a;      /* Lighter teal for hover */
    --hunter-light: #3a8360;          /* Lighter green */
    --border-light: #dfe9eb;          /* Subtle borders */
    --bg-white: #ffffff;              /* Pure white for content */
    --text-primary: #212429;          /* Primary text - shadow grey */
    --text-secondary: #4a5458;        /* Secondary text */
}

/* Main page background */
body {
    background-color: var(--mint-cream);
    color: var(--text-primary);
}

/* Header/top navigation - research teal */
#mw-header-container {
    background-color: var(--slate-teal);
    border-bottom: 2px solid var(--pale-sky);
}

#mw-header-nav-hack {
    background-color: var(--slate-teal);
}

/* Site logo area */
#p-logo a {
    background-color: transparent;
}

/* Navigation links in header */
#mw-header-nav-hack a,
#user-tools a {
    color: var(--mint-cream);
    font-weight: 500;
}

#mw-header-nav-hack a:hover,
#user-tools a:hover {
    color: var(--pale-sky);
}

/* Sidebar - research catalog style */
#mw-site-navigation,
#mw-related-navigation {
    background-color: var(--mint-cream);
    border-right: 1px solid var(--border-light);
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background-color: transparent;
}

#mw-site-navigation h3,
#mw-related-navigation h3 {
    background-color: var(--slate-teal);
    color: white;
    border-bottom: 2px solid var(--pale-sky);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* Sidebar links - use dark text for WCAG AA compliance */
#mw-site-navigation a,
#mw-related-navigation a {
    color: var(--text-primary);
    font-weight: 400;
}

#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
    color: var(--hunter-green);
    background-color: rgba(42, 99, 73, 0.1);
}

/* Main content area - clean white pages */
#mw-content-container {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(42, 94, 91, 0.08);
}

#mw-content {
    background-color: var(--bg-white);
    color: var(--text-primary);
}

/* Page title - research heading */
#firstHeading {
    color: var(--slate-teal);
    border-bottom: 3px solid var(--pale-sky);
    font-weight: 600;
    padding-bottom: 12px;
}

/* Content headings - hierarchical typography */
.mw-body h1 {
    color: var(--slate-teal);
    font-weight: 600;
}

.mw-body h2 {
    color: var(--slate-teal);
    font-weight: 600;
    border-bottom: 2px solid var(--pale-sky);
    padding-bottom: 8px;
    margin-top: 32px;
}

.mw-body h3 {
    color: var(--hunter-green);
    font-weight: 600;
    margin-top: 24px;
}

.mw-body h4 {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Body text - optimal readability */
.mw-body,
.mw-body p {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
}

/* Links - research style */
.mw-body a:not(.new) {
    color: var(--hunter-green);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.mw-body a:not(.new):hover {
    color: var(--slate-teal);
    border-bottom-color: var(--pale-sky);
}

.mw-body a:not(.new):visited {
    color: var(--slate-teal-light);
}

/* Red links (non-existent pages) */
.mw-body a.new {
    color: #9f4444;
}

/* Tabs (page actions) */
#p-namespaces ul li,
#p-views ul li {
    background-color: var(--mint-cream);
    border: 1px solid var(--border-light);
}

#p-namespaces ul li.selected,
#p-views ul li.selected {
    background-color: var(--bg-white);
    border-bottom-color: var(--bg-white);
    border-top: 2px solid var(--hunter-green);
}

#p-namespaces a,
#p-views a {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
}

#p-namespaces ul li.selected a,
#p-views ul li.selected a {
    color: var(--slate-teal);
}

/* Buttons - research actions */
.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: var(--hunter-green);
    color: white;
    border: none;
    font-weight: 500;
    padding: 10px 20px;
    transition: background-color 0.2s ease;
}

.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover {
    background-color: var(--slate-teal);
}

/* Info boxes - research notes */
.infobox {
    background-color: var(--mint-cream);
    border: 1px solid var(--pale-sky);
    border-left: 4px solid var(--hunter-green);
    box-shadow: 0 1px 3px rgba(42, 94, 91, 0.1);
}

/* Table styling - research data presentation */
table.wikitable {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

table.wikitable th {
    background-color: var(--hunter-green);
    color: white;
    border: 1px solid var(--pale-sky);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

table.wikitable td {
    border: 1px solid var(--border-light);
    padding: 10px 16px;
}

table.wikitable tr:nth-child(even) {
    background-color: var(--mint-cream);
}

table.wikitable tr:hover {
    background-color: rgba(42, 99, 73, 0.1);
}

/* Code blocks - technical documentation */
pre, code {
    background-color: var(--mint-cream);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--pale-sky);
    color: var(--text-primary);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
}

pre {
    padding: 16px;
    overflow-x: auto;
}

code {
    padding: 2px 6px;
}

/* Footer - research archive style */
#footer,
#mw-footer,
#mw-footer-container {
    background-color: var(--mint-cream);
    border-top: 2px solid var(--pale-sky);
    color: var(--text-primary) !important;
    font-size: 0.875rem;
}

/* Footer text - dark for better contrast (WCAG AA) */
#footer-info,
#footer-places,
#footer-list,
#mw-footer ul,
#mw-footer li {
    color: var(--text-primary) !important;
}

/* Footer links */
#footer a,
#mw-footer a,
#footer-places a,
#footer-info a {
    color: var(--text-primary) !important;
    font-weight: 500;
}

#footer a:hover,
#mw-footer a:hover {
    color: var(--hunter-green) !important;
}

/* Search box */
#searchInput {
    border: 1px solid var(--border-light);
    background-color: var(--bg-white);
    color: var(--text-primary);
    padding: 8px 12px;
}

#searchInput:focus {
    border-color: var(--hunter-green);
    box-shadow: 0 0 0 2px rgba(42, 99, 73, 0.1);
    outline: none;
}

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

/* Blockquotes - citations and references */
blockquote {
    border-left: 4px solid var(--pale-sky);
    background-color: var(--mint-cream);
    padding: 16px 20px;
    margin: 20px 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* Lists - structured documentation */
.mw-body ul,
.mw-body ol {
    line-height: 1.8;
    color: var(--text-primary);
}

/* Categories and metadata */
#catlinks {
    background-color: var(--mint-cream);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

/* Edit forms and inputs */
textarea,
input[type="text"],
input[type="search"] {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus {
    border-color: var(--hunter-green);
    box-shadow: 0 0 0 2px rgba(42, 99, 73, 0.1);
}

/* ================================================
   Additional fixes for header text visibility
   ================================================ */

/* Wiki name/site title in top left */
#p-logo a,
#p-logo-text a,
.mw-wiki-title,
#sitelogo-text {
    color: var(--mint-cream) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#p-logo a:hover,
#p-logo-text a:hover {
    color: var(--pale-sky) !important;
}

/* Username in top right corner */
#user-tools .mw-ui-icon + span,
#user-tools #pt-userpage a,
#personal h2,
#personal .mw-portlet-heading {
    color: var(--mint-cream) !important;
    font-weight: 500 !important;
}

#user-tools #pt-userpage a:hover {
    color: var(--pale-sky) !important;
}

/* Dropdown menu from username */
#personal .mw-portlet-body,
#personal ul,
#user-tools .dropdown,
#personal .vector-menu-content {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 12px rgba(42, 94, 91, 0.15);
}

#personal .mw-portlet-body a,
#personal ul a,
#user-tools .dropdown a {
    color: var(--text-primary) !important;
    background-color: var(--bg-white);
    font-weight: 400;
}

#personal .mw-portlet-body a:hover,
#personal ul a:hover,
#user-tools .dropdown a:hover {
    color: var(--slate-teal) !important;
    background-color: var(--mint-cream);
}

/* ================================================
   Icon Fixes for Dark Header Background
   ================================================ */

/* User icon - replace with light-colored version */
#personal h2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="6" r="3" fill="%23F2FBF5"/><path d="M10 10c-3 0-7 2-7 5v2h14v-2c0-3-4-5-7-5z" fill="%23F2FBF5"/></svg>') !important;
}

/* Site tools gear icon - replace with light-colored version */
#site-tools h2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 1.5c-.85 0-1.6.55-1.85 1.35l-.35 1.1c-.25.05-.5.15-.75.25l-1-.6c-.75-.45-1.7-.3-2.3.35l-.7.7c-.65.65-.8 1.55-.35 2.3l.6 1c-.1.25-.2.5-.25.75l-1.1.35C1.05 9.4.5 10.15.5 11s.55 1.6 1.35 1.85l1.1.35c.05.25.15.5.25.75l-.6 1c-.45.75-.3 1.7.35 2.3l.7.7c.65.65 1.55.8 2.3.35l1-.6c.25.1.5.2.75.25l.35 1.1c.25.8 1 1.35 1.85 1.35s1.6-.55 1.85-1.35l.35-1.1c.25-.05.5-.15.75-.25l1 .6c.75.45 1.7.3 2.3-.35l.7-.7c.65-.65.8-1.55.35-2.3l-.6-1c.1-.25.2-.5.25-.75l1.1-.35c.8-.25 1.35-1 1.35-1.85s-.55-1.6-1.35-1.85l-1.1-.35c-.05-.25-.15-.5-.25-.75l.6-1c.45-.75.3-1.7-.35-2.3l-.7-.7c-.65-.65-1.55-.8-2.3-.35l-1 .6c-.25-.1-.5-.2-.75-.25l-.35-1.1C11.6 2.05 10.85 1.5 10 1.5zm0 5.5c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3z" fill="%23F2FBF5"/></svg>') !important;
}

/* Site navigation hamburger menu icon - replace with light-colored version */
#site-navigation h2,
#mw-site-navigation h2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M2 4h16v2H2zm0 5h16v2H2zm0 5h16v2H2z" fill="%23F2FBF5"/></svg>') !important;
}

/* User tools icons in header - make light colored */
#user-tools .mw-ui-icon,
#user-tools .mw-ui-icon:before,
#user-tools .mw-ui-icon:after,
#personal .mw-ui-icon {
    color: var(--mint-cream) !important;
    fill: var(--mint-cream) !important;
    opacity: 0.9;
}

#user-tools .mw-ui-icon:hover,
#personal .mw-ui-icon:hover {
    color: var(--pale-sky) !important;
    fill: var(--pale-sky) !important;
    opacity: 1;
}

Anonymous

Search

MediaWiki:Common.css: Difference between revisions

Namespaces

More

Page actions

Latest revision as of 09:10, 7 January 2026

Navigation

Navigation

Wiki tools

Wiki tools

@@ Line 1: / Line 1: @@
-/* CSS placed here will be applied to all skins */
 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; }
+/* ================================================
+   FORSKNING Research Theme for Timeless Skin
+   MediaWiki:Common.css
+   Perfect for: Research Wikis, Scientific Documentation
+   ================================================ */
-/**
+:root {
- * Bio Medicine Theme for MediaWiki Timeless Skin
+    /* FORSKNING Research Color Palette */
- * Professional medical/biological color scheme with calming teals and greens
+    --slate-teal: #2A5E5B;            /* Primary - Dark Slate Grey */
- */
+    --shadow-grey: #212429;           /* Deep dark - Shadow Grey */
+    --hunter-green: #2A6349;          /* Secondary - Hunter Green */
+    --mint-cream: #F2FBF5;            /* Background - Mint Cream */
+    --pale-sky: #CDDCE0;              /* Accent - Pale Sky */
+    /* Extended palette for UI elements */
+    --slate-teal-light: #3a7e7a;      /* Lighter teal for hover */
+    --hunter-light: #3a8360;          /* Lighter green */
+    --border-light: #dfe9eb;          /* Subtle borders */
+    --bg-white: #ffffff;              /* Pure white for content */
+    --text-primary: #212429;          /* Primary text - shadow grey */
+    --text-secondary: #4a5458;        /* Secondary text */
+}
-/* ========================================
+/* Main page background */
-   Color Palette
+body {
-   ======================================== */
+     background-color: var(--mint-cream);
-:root {
+     color: var(--text-primary);
-     --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 */
 }
-/* ========================================
+/* Header/top navigation - research teal */
-   Main Header & Navigation
-   ======================================== */
 #mw-header-container {
-     background: linear-gradient(135deg, var(--bio-primary) 0%, var(--bio-primary-dark) 100%);
+     background-color: var(--slate-teal);
-     border-bottom: 3px solid var(--bio-secondary);
+     border-bottom: 2px solid var(--pale-sky);
-    box-shadow: 0 2px 8px rgba(10, 125, 140, 0.15);
 }
 #mw-header-nav-hack {
-     background: transparent;
+     background-color: var(--slate-teal);
 }
-#personal {
+/* Site logo area */
-     background: rgba(255, 255, 255, 0.1);
+#p-logo a {
-    border-radius: 4px;
+     background-color: transparent;
-    padding: 0.3em 0.6em;
 }
-#personal h2 {
+/* Navigation links in header */
-     color: rgba(255, 255, 255, 0.9);
+#mw-header-nav-hack a,
-     font-size: 0.9em;
+#user-tools a {
+     color: var(--mint-cream);
+     font-weight: 500;
 }
-#personal ul li a {
+#mw-header-nav-hack a:hover,
-    color: rgba(255, 255, 255, 0.95);
+#user-tools a:hover {
-    padding: 0.4em 0.7em;
+     color: var(--pale-sky);
-    border-radius: 3px;
-     transition: all 0.2s ease;
 }
-#personal ul li a:hover {
+/* Sidebar - research catalog style */
-    background: rgba(255, 255, 255, 0.15);
+#mw-site-navigation,
-    color: #fff;
+#mw-related-navigation {
-    text-decoration: none;
+     background-color: var(--mint-cream);
-}
+     border-right: 1px solid var(--border-light);
-/* 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 {
+#mw-site-navigation .sidebar-chunk,
-     background-color: rgba(255, 255, 255, 0.1);
+#mw-related-navigation .sidebar-chunk {
+     background-color: transparent;
 }
-#p-logo a {
+#mw-site-navigation h3,
-     color: #fff !important;
+#mw-related-navigation h3 {
+     background-color: var(--slate-teal);
+    color: white;
+    border-bottom: 2px solid var(--pale-sky);
      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;
+    font-size: 0.875rem;
      letter-spacing: 0.5px;
 }
-#site-navigation .sidebar-inner ul li a {
+/* Sidebar links - use dark text for WCAG AA compliance */
-     color: rgba(255, 255, 255, 0.95);
+#mw-site-navigation a,
-     padding: 0.5em 0.8em;
+#mw-related-navigation a {
-    border-left: 3px solid transparent;
+     color: var(--text-primary);
-    transition: all 0.2s ease;
+     font-weight: 400;
 }
-#site-navigation .sidebar-inner ul li a:hover {
+#mw-site-navigation a:hover,
-     background: rgba(255, 255, 255, 0.1);
+#mw-related-navigation a:hover {
-    border-left-color: var(--bio-secondary);
+     color: var(--hunter-green);
-     color: #fff;
+     background-color: rgba(42, 99, 73, 0.1);
-    text-decoration: none;
 }
-#site-navigation .sidebar-inner ul li.active a {
+/* Main content area - clean white pages */
-     background: rgba(255, 255, 255, 0.15);
+#mw-content-container {
-     border-left-color: var(--bio-secondary);
+     background-color: var(--bg-white);
-     font-weight: 600;
+     border: 1px solid var(--border-light);
+     box-shadow: 0 2px 8px rgba(42, 94, 91, 0.08);
 }
-/* ========================================
+#mw-content {
-   Search Box
+     background-color: var(--bg-white);
-   ======================================== */
+     color: var(--text-primary);
-#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 {
+/* Page title - research heading */
-     background: #fff;
+#firstHeading {
-     border-color: var(--bio-secondary);
+     color: var(--slate-teal);
-     box-shadow: 0 0 0 3px rgba(45, 159, 95, 0.1);
+     border-bottom: 3px solid var(--pale-sky);
+     font-weight: 600;
+    padding-bottom: 12px;
 }
-#searchInput {
+/* Content headings - hierarchical typography */
-     color: var(--bio-text);
+.mw-body h1 {
+     color: var(--slate-teal);
+    font-weight: 600;
 }
-#searchInput::placeholder {
+.mw-body h2 {
-     color: var(--bio-text-light);
+     color: var(--slate-teal);
+    font-weight: 600;
+    border-bottom: 2px solid var(--pale-sky);
+    padding-bottom: 8px;
+    margin-top: 32px;
 }
-#searchButton {
+.mw-body h3 {
-     background: var(--bio-secondary);
+     color: var(--hunter-green);
-     border-radius: 0 4px 4px 0;
+     font-weight: 600;
-     transition: background 0.2s ease;
+     margin-top: 24px;
-}
-#searchButton:hover {
-    background: var(--bio-secondary-dark);
-}
-/* ========================================
-   Content Area
-   ======================================== */
-body {
-    background: var(--bio-neutral);
-    color: var(--bio-text);
 }
-#mw-content-container {
+.mw-body h4 {
-    background: #fff;
+     color: var(--text-secondary);
-    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 */
+/* Body text - optimal readability */
-.mw-body h2 {
+.mw-body,
-     color: var(--bio-primary);
+.mw-body p {
-     border-bottom: 2px solid var(--bio-gray-light);
+     color: var(--text-primary);
-    margin-top: 1.5em;
+     line-height: 1.7;
-     padding-bottom: 0.3em;
+     font-size: 1rem;
 }
-.mw-body h3 {
+/* Links - research style */
-    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);
+     color: var(--hunter-green);
-     transition: color 0.2s ease;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+     transition: border-color 0.2s ease;
 }
 .mw-body a:not(.new):hover {
-     color: var(--bio-accent-hover);
+     color: var(--slate-teal);
-     text-decoration: underline;
+     border-bottom-color: var(--pale-sky);
 }
 .mw-body a:not(.new):visited {
-     color: var(--bio-primary);
+     color: var(--slate-teal-light);
 }
+/* Red links (non-existent pages) */
 .mw-body a.new {
-     color: #c85a54;
+     color: #9f4444;
 }
-/* ========================================
+/* Tabs (page actions) */
-   Sidebar & Tools
+#p-namespaces ul li,
-   ======================================== */
+#p-views ul li {
-#mw-site-navigation,
+     background-color: var(--mint-cream);
-#mw-related-navigation {
+     border: 1px solid var(--border-light);
-     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 {
+#p-namespaces ul li.selected,
-     background: linear-gradient(135deg, var(--bio-primary-light) 0%, #fff 100%);
+#p-views ul li.selected {
-     color: var(--bio-primary);
+     background-color: var(--bg-white);
-     border-bottom: 2px solid var(--bio-secondary);
+     border-bottom-color: var(--bg-white);
-    font-weight: 600;
+     border-top: 2px solid var(--hunter-green);
-    padding: 0.7em 1em;
-    margin: 0;
 }
-.sidebar-inner ul li a {
+#p-namespaces a,
-     color: var(--bio-text);
+#p-views a {
-     padding: 0.5em 1em;
+     color: var(--text-secondary);
-     border-left: 3px solid transparent;
+     font-weight: 500;
-    transition: all 0.2s ease;
+     font-size: 0.875rem;
 }
-.sidebar-inner ul li a:hover {
+#p-namespaces ul li.selected a,
-    background: var(--bio-primary-light);
+#p-views ul li.selected a {
-    border-left-color: var(--bio-accent);
+     color: var(--slate-teal);
-     color: var(--bio-primary);
-    text-decoration: none;
 }
-/* ========================================
+/* Buttons - research actions */
-   Tables
+.mw-ui-button,
-   ======================================== */
+.oo-ui-buttonElement-button {
-.mw-body table {
+     background-color: var(--hunter-green);
-     border-collapse: collapse;
+    color: white;
-     border: 1px solid var(--bio-gray-light);
+     border: none;
+    font-weight: 500;
+    padding: 10px 20px;
+    transition: background-color 0.2s ease;
 }
-.mw-body table th {
+.mw-ui-button:hover,
-    background: linear-gradient(to bottom, var(--bio-primary) 0%, var(--bio-primary-dark) 100%);
+.oo-ui-buttonElement-button:hover {
-    color: #fff;
+     background-color: var(--slate-teal);
-     font-weight: 600;
-    padding: 0.7em;
-    border: 1px solid var(--bio-primary-dark);
 }
-.mw-body table td {
+/* Info boxes - research notes */
-     padding: 0.6em;
+.infobox {
-     border: 1px solid var(--bio-gray-light);
+     background-color: var(--mint-cream);
+     border: 1px solid var(--pale-sky);
+    border-left: 4px solid var(--hunter-green);
+    box-shadow: 0 1px 3px rgba(42, 94, 91, 0.1);
 }
-.mw-body table tr:nth-child(even) {
+/* Table styling - research data presentation */
-     background: var(--bio-primary-light);
+table.wikitable {
+    background-color: var(--bg-white);
+    border: 1px solid var(--border-light);
+     color: var(--text-primary);
 }
-.mw-body table tr:hover {
+table.wikitable th {
-     background: rgba(95, 179, 193, 0.1);
+    background-color: var(--hunter-green);
+    color: white;
+     border: 1px solid var(--pale-sky);
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.875rem;
+    letter-spacing: 0.5px;
+    padding: 12px 16px;
 }
-/* Info boxes */
+table.wikitable td {
-.infobox {
+     border: 1px solid var(--border-light);
-    background: #fff;
+     padding: 10px 16px;
-     border: 2px solid var(--bio-accent);
-     border-radius: 6px;
-    box-shadow: 0 2px 8px rgba(10, 125, 140, 0.1);
 }
-.infobox th {
+table.wikitable tr:nth-child(even) {
-     background: var(--bio-accent);
+     background-color: var(--mint-cream);
-    color: #fff;
 }
-/* ========================================
+table.wikitable tr:hover {
-   Message Boxes & Notices
+     background-color: rgba(42, 99, 73, 0.1);
-   ======================================== */
-.mw-message-box {
-     border-radius: 6px;
-    border-width: 2px;
 }
-.mw-message-box-notice {
+/* Code blocks - technical documentation */
-     background: var(--bio-primary-light);
+pre, code {
-     border-color: var(--bio-accent);
+     background-color: var(--mint-cream);
+    border: 1px solid var(--border-light);
+     border-left: 3px solid var(--pale-sky);
+    color: var(--text-primary);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 0.9rem;
 }
-.mw-message-box-warning {
+pre {
-     background: #fff8e6;
+     padding: 16px;
-     border-color: #f5b042;
+     overflow-x: auto;
 }
-.mw-message-box-error {
+code {
-     background: #ffe6e6;
+     padding: 2px 6px;
-    border-color: #c85a54;
 }
-.mw-message-box-success {
+/* Footer - research archive style */
-     background: #e8f7ef;
+#footer,
-     border-color: var(--bio-secondary);
+#mw-footer,
+#mw-footer-container {
+     background-color: var(--mint-cream);
+     border-top: 2px solid var(--pale-sky);
+    color: var(--text-primary) !important;
+    font-size: 0.875rem;
 }
-/* ========================================
+/* Footer text - dark for better contrast (WCAG AA) */
-   Buttons & Form Elements
+#footer-info,
-   ======================================== */
+#footer-places,
-.mw-ui-button,
+#footer-list,
-.mw-htmlform-submit {
+#mw-footer ul,
-     background: var(--bio-secondary);
+#mw-footer li {
-    color: #fff;
+     color: var(--text-primary) !important;
-    border: none;
-    border-radius: 5px;
-    padding: 0.6em 1.2em;
-    font-weight: 600;
-    transition: all 0.2s ease;
 }
-.mw-ui-button:hover,
+/* Footer links */
-.mw-htmlform-submit:hover {
+#footer a,
-     background: var(--bio-secondary-dark);
+#mw-footer a,
-    transform: translateY(-1px);
+#footer-places a,
-     box-shadow: 0 4px 8px rgba(45, 159, 95, 0.2);
+#footer-info a {
+     color: var(--text-primary) !important;
+     font-weight: 500;
 }
-.mw-ui-button:active,
+#footer a:hover,
-.mw-htmlform-submit:active {
+#mw-footer a:hover {
-     transform: translateY(0);
+     color: var(--hunter-green) !important;
 }
-.mw-ui-progressive {
+/* Search box */
-     background: var(--bio-accent);
+#searchInput {
-}
+     border: 1px solid var(--border-light);
+     background-color: var(--bg-white);
-.mw-ui-progressive:hover {
+     color: var(--text-primary);
-     background: var(--bio-accent-hover);
+     padding: 8px 12px;
-}
-/* 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,
+#searchInput:focus {
-input[type="search"]:focus,
+     border-color: var(--hunter-green);
-input[type="email"]:focus,
+    box-shadow: 0 0 0 2px rgba(42, 99, 73, 0.1);
-textarea:focus {
-     border-color: var(--bio-accent);
      outline: none;
-    box-shadow: 0 0 0 3px rgba(95, 179, 193, 0.1);
 }
-/* ========================================
+#searchInput::placeholder {
-   Categories & Footer
+     color: var(--text-secondary);
-   ======================================== */
-#catlinks {
-     background: var(--bio-primary-light);
-    border: 1px solid var(--bio-gray-light);
-    border-radius: 6px;
-    margin-top: 2em;
 }
-#catlinks a {
+/* Blockquotes - citations and references */
-     color: var(--bio-primary);
+blockquote {
+     border-left: 4px solid var(--pale-sky);
+    background-color: var(--mint-cream);
+    padding: 16px 20px;
+    margin: 20px 0;
+    color: var(--text-secondary);
+    font-style: italic;
 }
-#catlinks a:hover {
+/* Lists - structured documentation */
-     color: var(--bio-accent);
+.mw-body ul,
+.mw-body ol {
+    line-height: 1.8;
+     color: var(--text-primary);
 }
-#mw-footer {
+/* Categories and metadata */
-     background: linear-gradient(to bottom, #fff 0%, var(--bio-neutral) 100%);
+#catlinks {
-     border-top: 3px solid var(--bio-secondary);
+     background-color: var(--mint-cream);
-     color: var(--bio-text-light);
+     border: 1px solid var(--border-light);
+     color: var(--text-secondary);
 }
-#mw-footer a {
+/* Edit forms and inputs */
-     color: var(--bio-accent);
+textarea,
+input[type="text"],
+input[type="search"] {
+    background-color: var(--bg-white);
+     color: var(--text-primary);
+    border: 1px solid var(--border-light);
 }
-#mw-footer a:hover {
+textarea:focus,
-     color: var(--bio-accent-hover);
+input[type="text"]:focus,
+input[type="search"]:focus {
+     border-color: var(--hunter-green);
+    box-shadow: 0 0 0 2px rgba(42, 99, 73, 0.1);
 }
-/* ========================================
+/* ================================================
-    Special Pages & Diff Pages
+    Additional fixes for header text visibility
-    ======================================== */
+    ================================================ */
-.diff-addedline {
-    background: #e8f7ef;
-    border-color: var(--bio-secondary);
-}
-.diff-deletedline {
+/* Wiki name/site title in top left */
-     background: #ffe6e6;
+#p-logo a,
-     border-color: #c85a54;
+#p-logo-text a,
+.mw-wiki-title,
+#sitelogo-text {
+     color: var(--mint-cream) !important;
+    font-weight: 600 !important;
+    text-transform: uppercase;
+     letter-spacing: 1px;
 }
-.diff-context {
+#p-logo a:hover,
-     background: var(--bio-neutral);
+#p-logo-text a:hover {
+     color: var(--pale-sky) !important;
 }
-/* Recent changes markers */
+/* Username in top right corner */
-.mw-plusminus-pos {
+#user-tools .mw-ui-icon + span,
-     color: var(--bio-secondary);
+#user-tools #pt-userpage a,
-     font-weight: bold;
+#personal h2,
+#personal .mw-portlet-heading {
+     color: var(--mint-cream) !important;
+     font-weight: 500 !important;
 }
-.mw-plusminus-neg {
+#user-tools #pt-userpage a:hover {
-     color: #c85a54;
+     color: var(--pale-sky) !important;
-    font-weight: bold;
 }
-/* ========================================
+/* Dropdown menu from username */
-   Code & Pre-formatted Text
+#personal .mw-portlet-body,
-   ======================================== */
+#personal ul,
-code {
+#user-tools .dropdown,
-     background: var(--bio-primary-light);
+#personal .vector-menu-content {
-     border: 1px solid var(--bio-gray-light);
+     background-color: var(--bg-white);
-     border-radius: 3px;
+     border: 1px solid var(--border-light);
-    padding: 0.1em 0.3em;
+     box-shadow: 0 4px 12px rgba(42, 94, 91, 0.15);
-    color: var(--bio-primary-dark);
 }
-pre {
+#personal .mw-portlet-body a,
-    background: var(--bio-neutral);
+#personal ul a,
-     border: 1px solid var(--bio-gray-light);
+#user-tools .dropdown a {
-     border-left: 4px solid var(--bio-accent);
+     color: var(--text-primary) !important;
-     border-radius: 4px;
+     background-color: var(--bg-white);
-    padding: 1em;
+     font-weight: 400;
-    overflow-x: auto;
 }
-/* ========================================
+#personal .mw-portlet-body a:hover,
-   Medical/Biological Specific Elements
+#personal ul a:hover,
-   ======================================== */
+#user-tools .dropdown a:hover {
-/* Add custom class for medical terminology highlights */
+     color: var(--slate-teal) !important;
-.medical-term {
+     background-color: var(--mint-cream);
-     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 {
+   Icon Fixes for Dark Header Background
-    background: #fff8e6;
+   ================================================ */
-    border: 2px solid #f5b042;
-    border-radius: 6px;
-    padding: 1em;
-    margin: 1em 0;
-}
-.medical-warning::before {
+/* User icon - replace with light-colored version */
-     content: "⚕ Medical Information: ";
+#personal h2 {
-    font-weight: bold;
+     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="6" r="3" fill="%23F2FBF5"/><path d="M10 10c-3 0-7 2-7 5v2h14v-2c0-3-4-5-7-5z" fill="%23F2FBF5"/></svg>') !important;
-    color: #d4860f;
 }
-/* DNA/Molecule style divider */
+/* Site tools gear icon - replace with light-colored version */
-.bio-divider {
+#site-tools h2 {
-     height: 2px;
+     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 1.5c-.85 0-1.6.55-1.85 1.35l-.35 1.1c-.25.05-.5.15-.75.25l-1-.6c-.75-.45-1.7-.3-2.3.35l-.7.7c-.65.65-.8 1.55-.35 2.3l.6 1c-.1.25-.2.5-.25.75l-1.1.35C1.05 9.4.5 10.15.5 11s.55 1.6 1.35 1.85l1.1.35c.05.25.15.5.25.75l-.6 1c-.45.75-.3 1.7.35 2.3l.7.7c.65.65 1.55.8 2.3.35l1-.6c.25.1.5.2.75.25l.35 1.1c.25.8 1 1.35 1.85 1.35s1.6-.55 1.85-1.35l.35-1.1c.25-.05.5-.15.75-.25l1 .6c.75.45 1.7.3 2.3-.35l.7-.7c.65-.65.8-1.55.35-2.3l-.6-1c.1-.25.2-.5.25-.75l1.1-.35c.8-.25 1.35-1 1.35-1.85s-.55-1.6-1.35-1.85l-1.1-.35c-.05-.25-.15-.5-.25-.75l.6-1c.45-.75.3-1.7-.35-2.3l-.7-.7c-.65-.65-1.55-.8-2.3-.35l-1 .6c-.25-.1-.5-.2-.75-.25l-.35-1.1C11.6 2.05 10.85 1.5 10 1.5zm0 5.5c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3z" fill="%23F2FBF5"/></svg>') !important;
-    background: linear-gradient(to right,
-        var(--bio-accent) 0%,
-        var(--bio-secondary) 50%,
-        var(--bio-accent) 100%);
-    margin: 2em 0;
-    border: none;
 }
-/* ========================================
+/* Site navigation hamburger menu icon - replace with light-colored version */
-   Responsive Adjustments
+#site-navigation h2,
-   ======================================== */
+#mw-site-navigation h2 {
-@media (max-width: 1099px) {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M2 4h16v2H2zm0 5h16v2H2zm0 5h16v2H2z" fill="%23F2FBF5"/></svg>') !important;
-    #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) {
+/* User tools icons in header - make light colored */
-    #mw-header-nav-hack {
+#user-tools .mw-ui-icon,
-        background: var(--bio-primary-dark);
+#user-tools .mw-ui-icon:before,
-     }
+#user-tools .mw-ui-icon:after,
+#personal .mw-ui-icon {
-     .sidebar-chunk h2 {
+    color: var(--mint-cream) !important;
-        font-size: 0.95em;
+     fill: var(--mint-cream) !important;
-    }
+     opacity: 0.9;
 }
-/* ========================================
+#user-tools .mw-ui-icon:hover,
-   Print Styles
+#personal .mw-ui-icon:hover {
-   ======================================== */
+     color: var(--pale-sky) !important;
-@media print {
+    fill: var(--pale-sky) !important;
-    #mw-header-container,
+     opacity: 1;
-    #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;
-    }
 }

Anonymous

Search

MediaWiki:Common.css: Difference between revisions

Latest revision as of 09:10, 7 January 2026

Navigation

Wiki tools

Page tools