Difference between revisions of "MediaWiki:Common.css"

Revision as of 09:16, 10 October 2025

/***** UNIVERSAL LEFT SIDEBAR STYLING (works across common skins) *****/

/* 1) Pick up the left column container across skins */
#mw-panel,                     /* Vector/Vector-legacy */
#column-one,                   /* Monobook / Modern */
.skin-timeless .ts-sidebar,    /* Timeless */
.citizen-drawer,               /* Citizen */
.mw-sidebar,                   /* Generic sidebars */
.skin-minerva .menu {          /* Minerva (mobile) */
  background: linear-gradient(to bottom, #2F2D2B 0%, #1E1E1D 100%) !important;
  color: #EEEDEB !important;
  border-right: none !important;
}

/* 2) Kill inner backgrounds so the gradient shows */
#mw-panel .vector-menu,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list,
#column-one .portlet,
#column-one .pBody,
.skin-timeless .ts-sidebar * ,
.citizen-drawer *,
.mw-sidebar *,
.skin-minerva .menu * {
  background: transparent !important;
  color: inherit !important;
}

/* 3) Links inside the sidebar */
#mw-panel a,
#column-one a,
.skin-timeless .ts-sidebar a,
.citizen-drawer a,
.mw-sidebar a,
.skin-minerva .menu a {
  color: #EEEDEB !important;
  text-decoration: none;
}
#mw-panel a:hover,
#column-one a:hover,
.skin-timeless .ts-sidebar a:hover,
.citizen-drawer a:hover,
.mw-sidebar a:hover,
.skin-minerva .menu a:hover {
  color: #5A65EA !important;
  text-decoration: underline;
}

/* 4) Section headers in the sidebar (common title elements) */
#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3,
.skin-timeless .ts-sidebar .ts-portlet h2,
.citizen-drawer .drawer__section-title,
.mw-sidebar h2 {
  background: #63635B !important;   /* muted block behind group titles */
  color: #EEEDEB !important;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 12px 8px 6px;
  font-weight: 700;
}

/* 5) List items spacing */
#mw-panel .vector-menu-content-list > li,
#column-one .pBody ul li,
.skin-timeless .ts-sidebar li,
.citizen-drawer li,
.mw-sidebar li {
  padding: 2px 8px;
}

/* Sidebar group headers */
#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3,
.skin-timeless .ts-sidebar .ts-portlet h2,
.citizen-drawer .drawer__section-title,
.mw-sidebar h2 {
  background: #63635B !important;   /* muted block behind titles */
  color: #EEEDEB !important;
  border-radius: 4px;
  padding: 6px 10px;
  margin: 14px 8px 6px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .2px;
  border: none !important;
}

/* List spacing & baseline */
#mw-panel .vector-menu-content-list > li,
#column-one .pBody ul li,
.skin-timeless .ts-sidebar li,
.citizen-drawer li,
.mw-sidebar li {
  padding: 3px 10px;
  line-height: 1.35;
}

/* Links default + hover */
#mw-panel a,
#column-one a,
.skin-timeless .ts-sidebar a,
.citizen-drawer a,
.mw-sidebar a {
  color: #EEEDEB !important;
  text-decoration: none;
}
#mw-panel a:hover,
#column-one a:hover,
.skin-timeless .ts-sidebar a:hover,
.citizen-drawer a:hover,
.mw-sidebar a:hover {
  color: #5A65EA !important;                 /* cobalt hover */
  text-decoration: underline;
}

/* Active page highlight */
#mw-panel .vector-menu-content-list > li.selected > a,
#column-one .pBody ul li.selected > a,
.mw-sidebar li.selected > a {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  display: block;
  padding: 3px 8px;
}

/* Thin separators between groups (optional, subtle) */
#mw-panel .portal,
#column-one .portlet,
.mw-sidebar .sidebar-chunk {
  border-top: 1px solid rgba(217,215,209,0.15);
  margin-top: 10px;
  padding-top: 6px;
}

/* “Chat on Discord” button (left column card) */
#mw-panel .discord-button,        /* if you wrapped it in a class */
#mw-panel a.external[href*="discord"] {
  background: #5A65EA;
  color: #FFFFFF !important;
  display: inline-block;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.15);
}
#mw-panel .discord-button:hover,
#mw-panel a.external[href*="discord"]:hover {
  background: #545DD9;
  text-decoration: none;
}

/* Clean edge between sidebar and content */
#mw-panel { box-shadow: 1px 0 0 rgba(217,215,209,0.25) inset; }

/* Tidy sidebar scrollbar on desktop WebKit */
#mw-panel::-webkit-scrollbar { width: 10px; }
#mw-panel::-webkit-scrollbar-track { background: transparent; }
#mw-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12); border-radius: 8px;
}
#mw-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }