MediaWiki:Vector-2022.css

/* =========================================================
   ATRONIA DESIGN SYSTEM — CLEAN v1
   ========================================================= */


/* ============================= */
/* GOOGLE MATERIAL ICONS */
/* ============================= */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");


/* ============================= */
/* ROOT VARIABLES */
/* ============================= */
:root {
  --atronia-primary: #1b2826;
  --atronia-primary-dark: #12201f;
  --atronia-accent: rgba(146,255,0,0.3);
}


/* ============================= */
/* BASE */
/* ============================= */
html, body {
  background: #ffffff !important;
}

.mw-body-content {
  font-family: "Roboto", sans-serif;
}


/* ============================= */
/* TYPOGRAPHY */
/* ============================= */
.mw-page-title-main,
.mw-parser-output h1,
.mw-parser-output h2 {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
}

.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
}


/* ============================= */
/* HEADER */
/* ============================= */
.skin-vector-2022 .mw-header,
.vector-sticky-header {
  background-color: var(--atronia-primary) !important;
  color: #ffffff !important;
}

.skin-vector-2022 .mw-header a,
.vector-sticky-header a {
  color: #ffffff !important;
}


/* ============================= */
/* LINKS */
/* ============================= */
a {
  color: var(--atronia-primary) !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--atronia-primary-dark) !important;
}


/* ============================= */
/* SEARCH */
/* ============================= */
#p-search .cdx-search-input,
.vector-sticky-header .cdx-search-input {
  border-radius: 14px;
  border: 1px solid #dcdcdc;
  background: #ffffff;
}

#p-search .cdx-button,
.vector-sticky-header .cdx-button {
  background: #ffffff;
  color: var(--atronia-primary);
}

#p-search .cdx-button:hover,
.vector-sticky-header .cdx-button:hover {
  background: var(--atronia-accent);
}


/* ============================= */
/* BUTTONS */
/* ============================= */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  background-color: var(--atronia-primary) !important;
  border-color: var(--atronia-primary) !important;
  color: #ffffff !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  background-color: #2d4d49 !important;
}


/* ============================= */
/* DROPDOWNS */
/* ============================= */
.vector-dropdown-content {
  background: #ffffff !important;
}

.vector-dropdown-content a {
  color: #202122 !important;
}


/* ============================= */
/* ICON SYSTEM */
/* ============================= */
.mw-ui-icon-wikimedia-userAvatar {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

.mw-ui-icon-wikimedia-userAvatar::before {
  content: "account_circle";
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  color: white;
}


/* ============================= */
/* WATCH ICON */
/* ============================= */
#ca-watch .vector-icon,
#ca-unwatch .vector-icon {
  display: none !important;
}

#ca-watch a::before {
  content: "bookmark_add";
}

#ca-unwatch a::before {
  content: "bookmark_remove";
}

#ca-watch a::before,
#ca-unwatch a::before {
  font-family: "Material Symbols Rounded";
  font-size: 20px;
}


/* ============================= */
/* USER MENU ICONS */
/* ============================= */
#p-personal .vector-icon,
#p-user-menu-content .vector-icon {
  display: none !important;
}

#p-personal li a::before,
#p-user-menu-content li a::before {
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  margin-right: 8px;
}

#pt-userpage a::before { content: "person"; }
#pt-preferences a::before { content: "settings"; }
#pt-watchlist a::before { content: "visibility"; }
#pt-mycontris a::before { content: "history_edu"; }
#pt-logout a::before { content: "logout"; }


/* ============================= */
/* WIKITABLE */
/* ============================= */
.vector-body .wikitable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vector-body .wikitable th,
.vector-body .wikitable td {
  text-align: center;
  border-bottom: 1px solid #3a3a3a;
}


/* ============================= */
/* PRODUCTS GRID */
/* ============================= */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px;
}

.product-item {
  text-align: center;
}

.product-subtitle {
  font-size: 14px;
  color: #666;
}


/* ============================= */
/* COLLAPSIBLE FIX */
/* ============================= */
.product-item .mw-collapsible,
.product-item .mw-collapsible-content {
  background: transparent !important;
  border: none !important;
}


/* ============================= */
/* NAVBAR HEIGHT */
/* ============================= */
.vector-header-container .mw-header,
.vector-sticky-header {
  min-height: 72px !important;
}