User:Udays108/common.css: Difference between revisions

Revision as of 21:31, 8 May 2026

/* ============================================================
   BioMicro Center Wiki — Modern UI
   Paste into: User:USERNAME/common.css
   Promoted to: MediaWiki:Common.css (by sysop)
   Targets: Vector (legacy) + Vector 2022
   ============================================================ */

/* ── 1. CSS Variables ───────────────────────────────────────── */
:root {
  --bmc-red:        #A31F34;
  --bmc-red-dark:   #8B1A2C;
  --bmc-red-light:  #c9374f;
  --bmc-bg:         #F8F9FA;
  --bmc-white:      #FFFFFF;
  --bmc-text:       #1A1A1A;
  --bmc-muted:      #555555;
  --bmc-border:     #E0E0E0;
  --bmc-shadow:     0 2px 8px rgba(0,0,0,0.08);
  --bmc-radius:     6px;
  --bmc-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;
  --bmc-sidebar-w:  180px;
  --bmc-transition: 0.25s ease;
}

/* ── 2. Page Base & Body ────────────────────────────────────── */
html, body {
  background-color: var(--bmc-bg) !important;
  font-family: var(--bmc-font) !important;
  font-size: 15px !important;
  color: var(--bmc-text) !important;
  line-height: 1.7 !important;
}

#mw-page-base,
.mw-page-container {
  background-color: var(--bmc-bg) !important;
}

/* ── 3. Header ──────────────────────────────────────────────── */
/* Legacy Vector */
#mw-head,
#mw-head-base {
  background-color: var(--bmc-red) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}

/* Vector 2022 */
.vector-header,
.vector-header-container,
.vector-header-start,
.vector-header-end {
  background-color: var(--bmc-red) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}

/* Site name / logo text */
#p-logo a,
.mw-wiki-logo,
.vector-header .mw-logo {
  color: var(--bmc-white) !important;
}

/* Search bar */
#searchInput,
#searchform input[type="search"],
.vector-search-box input {
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: var(--bmc-radius) !important;
  background: rgba(255,255,255,0.15) !important;
  color: var(--bmc-white) !important;
  padding: 5px 10px !important;
  transition: background var(--bmc-transition) !important;
}

#searchInput:focus,
.vector-search-box input:focus {
  background: rgba(255,255,255,0.95) !important;
  color: var(--bmc-text) !important;
  outline: none !important;
}

#searchInput::placeholder,
.vector-search-box input::placeholder {
  color: rgba(255,255,255,0.7) !important;
}

/* Search button */
#searchButton,
.vector-search-box button[type="submit"] {
  background: rgba(255,255,255,0.2) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: var(--bmc-radius) !important;
  color: var(--bmc-white) !important;
  cursor: pointer !important;
  transition: background var(--bmc-transition) !important;
}

#searchButton:hover,
.vector-search-box button[type="submit"]:hover {
  background: rgba(255,255,255,0.35) !important;
}

/* Personal tools (login, user links) */
#pt-userpage a,
#pt-login a,
#pt-logout a,
.vector-user-menu a,
#p-personal li a {
  color: var(--bmc-white) !important;
  opacity: 0.9;
  transition: opacity var(--bmc-transition) !important;
}

#pt-userpage a:hover,
#pt-login a:hover,
#pt-logout a:hover,
.vector-user-menu a:hover,
#p-personal li a:hover {
  opacity: 1 !important;
  text-decoration: underline !important;
}

/* ── 4. Navigation Tabs ─────────────────────────────────────── */
#left-navigation,
#right-navigation,
.vector-menu-tabs {
  background: transparent !important;
  border-bottom: 2px solid var(--bmc-border) !important;
  margin-bottom: 0 !important;
}

/* Tab links */
#left-navigation li a,
#right-navigation li a,
.vector-menu-tabs li a {
  color: var(--bmc-muted) !important;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: var(--bmc-radius) var(--bmc-radius) 0 0 !important;
  transition: color var(--bmc-transition), background var(--bmc-transition) !important;
}

#left-navigation li a:hover,
#right-navigation li a:hover,
.vector-menu-tabs li a:hover {
  color: var(--bmc-red) !important;
  background: rgba(163,31,52,0.06) !important;
}

/* Active tab */
#left-navigation li.selected a,
#left-navigation li.new.selected a,
.vector-menu-tabs li.selected a {
  color: var(--bmc-red) !important;
  border-bottom: 2px solid var(--bmc-red) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ── 5. Sidebar ─────────────────────────────────────────────── */
/* Legacy Vector */
#mw-panel {
  background: var(--bmc-white) !important;
  border-right: 1px solid var(--bmc-border) !important;
  padding-top: 12px !important;
  width: var(--bmc-sidebar-w) !important;
  transition: transform var(--bmc-transition), width var(--bmc-transition) !important;
}

/* Vector 2022 */
.vector-column-start {
  background: var(--bmc-white) !important;
  border-right: 1px solid var(--bmc-border) !important;
  transition: width var(--bmc-transition) !important;
}

/* Collapsed state (class added by JS) */
body.sidebar-collapsed #mw-panel,
body.sidebar-collapsed .vector-column-start {
  width: 0 !important;
  overflow: hidden !important;
  border-right: none !important;
  padding: 0 !important;
}

/* Portlet headings */
.portlet h3,
.mw-portlet-heading,
.vector-menu-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--bmc-muted) !important;
  padding: 10px 14px 4px !important;
  margin: 0 !important;
  border: none !important;
}

/* Portlet links */
.portlet li a,
.mw-portlet-body li a,
.vector-menu-content li a {
  color: var(--bmc-text) !important;
  font-size: 13px !important;
  padding: 4px 14px !important;
  display: block !important;
  border-radius: 3px !important;
  transition: color var(--bmc-transition), background var(--bmc-transition) !important;
}

.portlet li a:hover,
.mw-portlet-body li a:hover,
.vector-menu-content li a:hover {
  color: var(--bmc-red) !important;
  background: rgba(163,31,52,0.06) !important;
  text-decoration: none !important;
}

/* Active page link */
.portlet li.active a {
  color: var(--bmc-red) !important;
  font-weight: 600 !important;
}

/* ── 6. Sidebar Toggle Button ───────────────────────────────── */
#bmc-sidebar-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  background: var(--bmc-red);
  color: var(--bmc-white);
  border: none;
  border-radius: var(--bmc-radius);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background var(--bmc-transition);
}

#bmc-sidebar-toggle:hover {
  background: var(--bmc-red-dark);
}

/* ── 7. Content Area ────────────────────────────────────────── */
#content,
.mw-body,
.vector-body {
  background: var(--bmc-white) !important;
  border: 1px solid var(--bmc-border) !important;
  border-radius: var(--bmc-radius) !important;
  box-shadow: var(--bmc-shadow) !important;
  padding: 28px 36px !important;
  margin: 16px !important;
}

/* Page title */
#firstHeading,
.mw-first-heading {
  font-family: var(--bmc-font) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--bmc-text) !important;
  border-bottom: 2px solid var(--bmc-red) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* ── 8. Typography ──────────────────────────────────────────── */
.mw-parser-output {
  font-family: var(--bmc-font) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--bmc-text) !important;
}

.mw-parser-output h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--bmc-text) !important;
  margin: 28px 0 12px !important;
}

.mw-parser-output h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--bmc-text) !important;
  border-bottom: none !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
}

.mw-parser-output h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--bmc-text) !important;
  margin: 18px 0 8px !important;
}

.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bmc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 16px 0 6px !important;
}

.mw-parser-output p {
  margin: 0 0 14px !important;
}

/* ── 9. Section Cards (h2 blocks) ───────────────────────────── */
.mw-parser-output .mw-headline {
  display: block !important;
}

/* Wrap each h2 section visually */
.mw-parser-output h2 {
  background: var(--bmc-white) !important;
  border-left: 4px solid var(--bmc-red) !important;
  border-radius: 0 var(--bmc-radius) var(--bmc-radius) 0 !important;
  padding: 12px 16px !important;
  margin-top: 28px !important;
  box-shadow: var(--bmc-shadow) !important;
}

/* ── 10. Links ──────────────────────────────────────────────── */
.mw-parser-output a,
#bodyContent a {
  color: var(--bmc-red) !important;
  text-decoration: none !important;
  transition: color var(--bmc-transition) !important;
}

.mw-parser-output a:hover,
#bodyContent a:hover {
  color: var(--bmc-red-dark) !important;
  text-decoration: underline !important;
}

/* External link icon tint */
.mw-parser-output a.external {
  color: var(--bmc-red) !important;
}

/* ── 11. Tables ─────────────────────────────────────────────── */
.mw-parser-output table,
.wikitable {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 16px 0 !important;
  font-size: 14px !important;
  border-radius: var(--bmc-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--bmc-shadow) !important;
  border: 1px solid var(--bmc-border) !important;
}

.wikitable th,
.mw-parser-output table th {
  background: var(--bmc-red) !important;
  color: var(--bmc-white) !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  text-align: left !important;
  border: none !important;
}

.wikitable td,
.mw-parser-output table td {
  padding: 9px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--bmc-border) !important;
  vertical-align: top !important;
}

.wikitable tr:nth-child(even) td,
.mw-parser-output table tr:nth-child(even) td {
  background: #fafafa !important;
}

.wikitable tr:hover td,
.mw-parser-output table tr:hover td {
  background: rgba(163,31,52,0.04) !important;
}

/* ── 12. Table of Contents ──────────────────────────────────── */
#toc,
.toc {
  background: var(--bmc-white) !important;
  border: 1px solid var(--bmc-border) !important;
  border-radius: var(--bmc-radius) !important;
  box-shadow: var(--bmc-shadow) !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  display: inline-block !important;
  min-width: 200px !important;
}

.toctitle h2,
#toc .toctitle h2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--bmc-muted) !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.toc a {
  color: var(--bmc-text) !important;
}

.toc a:hover {
  color: var(--bmc-red) !important;
}

/* ── 13. Footer ─────────────────────────────────────────────── */
#footer,
.mw-footer {
  background: #2a2a2a !important;
  color: #ccc !important;
  border-top: 3px solid var(--bmc-red) !important;
  padding: 20px 24px !important;
  font-size: 13px !important;
  margin-top: 24px !important;
}

#footer a,
.mw-footer a {
  color: #ddd !important;
  text-decoration: underline !important;
}

#footer a:hover,
.mw-footer a:hover {
  color: var(--bmc-white) !important;
}

#footer-info li,
#footer-places li {
  display: inline !important;
  margin-right: 16px !important;
  list-style: none !important;
}

/* ── 14. Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #content,
  .mw-body,
  .vector-body {
    margin: 8px !important;
    padding: 16px !important;
  }

  #mw-panel,
  .vector-column-start {
    display: none !important;
  }

  #firstHeading,
  .mw-first-heading {
    font-size: 22px !important;
  }

  .mw-parser-output h2 {
    font-size: 17px !important;
  }

  #bmc-sidebar-toggle {
    display: none !important;
  }
}

/* ── 15. Edit / Action Buttons ──────────────────────────────── */
.mw-editsection a,
.mw-editsection-bracket {
  color: var(--bmc-muted) !important;
  font-size: 12px !important;
}

.mw-editsection a:hover {
  color: var(--bmc-red) !important;
}

/* ── 16. Notices & Infoboxes ────────────────────────────────── */
.mw-parser-output .infobox {
  border: 1px solid var(--bmc-border) !important;
  border-radius: var(--bmc-radius) !important;
  background: var(--bmc-white) !important;
  font-size: 13px !important;
  box-shadow: var(--bmc-shadow) !important;
}

.mw-parser-output .infobox th {
  background: var(--bmc-red) !important;
  color: var(--bmc-white) !important;
}

/* ── 17. Code blocks ────────────────────────────────────────── */
.mw-parser-output code,
.mw-parser-output pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
  background: #f4f4f4 !important;
  border: 1px solid var(--bmc-border) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

.mw-parser-output code {
  padding: 1px 5px !important;
}

.mw-parser-output pre {
  padding: 12px 16px !important;
  overflow-x: auto !important;
  line-height: 1.5 !important;
}