MediaWiki:Vector.css: Difference between revisions

From CoraTO Wiki - Official Wiki
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 1: Line 1:
/*------------------------------------  VECTOR LEGACY (2010) — PURPLE DARK THEME  ------------------------------------*/
/* ========================================
/* This file is intentionally standalone (no imports). */
  CORA TO WIKI - VECTOR LEGACY SPECIFIC STYLES
/*------------------------------------------  THEME TOKENS  ------------------------------------------*/
  Styles specific to Vector Legacy 2010 skin
@purp-bg0: #11061c;
  ======================================== */
@purp-bg1: #1b0b2f;
@purp-bg2: #271145;
@purp-surface0: #321a57;
@purp-surface1: #3d2067;
@purp-border0: #7d52c7;
@purp-border1: #5a379c;
@purp-muted-border: #4a2b82;
@purp-text0: #f1eaff;
@purp-text1: #d4c7f0;
@purp-text2: #b7a6d9;
@purp-link0: #d7b9ff;
@purp-link1: #b892ff;
@purp-link2: #f0d9ff;
@purp-link-new: #ff9df2;
@purp-diff-bg: #2f1650;
@purp-diff-added: #c9a6ff;
@purp-diff-deleted: #ffb0e8;
@purp-notification-bg: #321a57;
@purp-notification-bg-rgba: rgba( 50, 26, 87, 0.93 );
@purp-grad-top: #4c2690;
@purp-grad-bottom: #2f1650;
@purp-grad-hover-top: #5a33a6;
@purp-grad-hover-bottom: #321a57;


/*------------------------------------------ GLOBAL BASE  ------------------------------------------*/
/* NAVIGATION MENU - TABLE OF CONTENTS
/* body.skin-vector, body.skin-vector-legacy, .skin-vector, .skin-vector-legacy: Base page background and default text. */
  ----------------------------------------
body.skin-vector,
  SECTION 1: VARIABLES [search: variables, colors, spacing, css-vars]
body.skin-vector-legacy,
  SECTION 2: SIDEBAR STYLES [search: sidebar, mw-panel, navigation]
.skin-vector,
  SECTION 3: LOGO AREA [search: logo, p-logo, wiki-logo]
.skin-vector-legacy {
  SECTION 4: PORTALS [search: portals, vector-menu-portal]
background-color: @purp-bg0;
  SECTION 5: HEADINGS [search: headings, collapsible, vector-menu-heading]
color: @purp-text1;
  SECTION 6: INDICATORS [search: indicators, open-close, arrows]
}
  SECTION 7: LISTS & CONTENT [search: lists, collapsible-content, menu-items]
  SECTION 8: SCROLLBAR [search: scrollbar, webkit-scrollbar]
  SECTION 9: CONTENT SPACING [search: spacing, margins, desktop]
  SECTION 10: RESPONSIVENESS [search: responsive, media-queries, mobile]
  SECTION 11: MOBILE MENU [search: hamburger, mobile-menu, sidebar-mobile]
  SECTION 12: HEADER TABS [search: header, tabs, vector-tabs]
  SECTION 13: USER MENU [search: user-menu, personal-menu, account]
  ---------------------------------------- */


/* body: Provides a safe default background for pages missing the skin class. */
body {
background-color: @purp-bg0;
color: @purp-text1;
}


/* a:hover: Global hover color for links outside the main content scope. */
a:hover {
color: @purp-link2;
}


/* a.stub: Highlights stub links while keeping them readable on dark backgrounds. */
a.stub {
color: @purp-link1;
}


/* code: Inline code default (fallback for code outside `.mw-body-content`). */
code {
background-color: @purp-surface0;
color: @purp-text1;
}


/* h2, h5, h6: Fallback heading colors outside the `.mw-body` container. */
h2,
h5,
h6 {
color: @purp-text1;
}


/* h2: Selector alias for older tooling and rule audits. */
/* ==========================================================================
h2 {
  SECTION 2: VECTOR LEGACY SIDEBAR STYLES [sidebar, mw-panel, navigation]
color: @purp-text1;
  ========================================================================== */
}


/* h5: Selector alias for older tooling and rule audits. */
/* [MEDIAWIKI] COMPATIBILITY LAYER
h5 {
  ======================================== */
color: @purp-text1;
.mw-page-scope {  
  padding: 20px;
}
}


/* hr: Fallback rule for horizontal separators outside the `.mw-body-content` scope. */
hr {
color: @purp-border1;
background-color: @purp-border1;
}


/* ul, table, th: Neutral defaults for lists and tables outside scoped content rules. */
ul,
table {
color: @purp-text1;
}


/* ul: Selector alias for older tooling and rule audits. */
#mw-head {
ul {
  padding: 20px 0;
color: @purp-text1;
  border-bottom: 2px solid #ff8fcf;
  background-color: rgba(255, 255, 255, 0.932);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  
}
}


/* th: Table header cell text color fallback outside scoped content rules. */
.utility-banner {
th {
  position: relative;
color: @purp-text1;
  min-height: 48px;
  padding: clamp(18px, 3vw, 36px);
}
}


/*------------------------------------------  HEADER & CHROME  ------------------------------------------*/
.utility-banner > * {
/* #mw-page-base, #mw-head-base: Header/toolbar background layers behind the page chrome. */
  position: absolute;
#mw-page-base,
  top: 0;
#mw-head-base {
  right: 8px;
background-color: @purp-bg1;
}
}


/* #mw-page-base: Gradient header strip behind the site header. */
/* MediaWiki Main Content */
#mw-page-base {
body.skin-vector-legacy #content,
background-image: linear-gradient( @purp-bg1 50%, @purp-bg0 100% );
body.skin-vector-legacy .mw-body {
  border: 1px solid #f0f0f0 !important;
  border-radius: 12px !important;
  margin: 24px 24px 0 !important;
  box-shadow: 0 0px 20px rgb(253, 91, 205) !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255, 205, 233, 0));
}
}


/* #mw-head-base: Base layer behind the top navigation and tabs. */
#content::before,
#mw-head-base {
.mw-body::before {
background-image: none;
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%) !important;
  border-radius: 12px !important;
  z-index: -1 !important;
  opacity: 0.1 !important;
}
}


/* #mw-head: Top header container for Vector navigation/tabs. */
#mw-head {
background-color: transparent;
color: @purp-text1;
}


/* #mw-head .mw-portlet: Portlet containers inside the header area. */
#mw-head .mw-portlet {
background-color: transparent;
color: @purp-text1;
}


/* #mw-head h3: Header portlet headings. */
#mw-head h3 {
color: @purp-text1;
}


/* #mw-head div.vectorMenu h5: Legacy Vector portlet heading variant in the head area. */
body.skin-vector-legacy #mw-panel {
#mw-head div.vectorMenu h5 {
  background: rgba(255, 255, 255, 0.8);
color: @purp-text1;
  border-right: 2px solid rgba(255, 107, 157, 0.25);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  padding: 18px 0;
  border-radius: 14px;
  transform: translateX(-100%);
  transition: transform .3s ease;
  position: fixed;
  z-index: 1000;
  height: 100vh;
  width: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}
}
 
/* Header top-right Menu */
/* #mw-head a: Header links (tabs, user menu, and portlet links). */
body.skin-vector-legacy
#mw-head a {
#pt-userpage a,
color: @purp-link0;
#pt-mytalk a,
text-decoration: none;
#pt-preferences a,
#pt-watchlist a,
#pt-mycontris a,
#pt-logout a {
  color: #ff73a9 !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border-left: 3px solid transparent !important;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease !important;
}
}
body.skin-vector-legacy
#pt-userpage a:hover,
#pt-mytalk a:hover,
#pt-preferences a:hover,
#pt-watchlist a:hover,
#pt-mycontris a:hover,
#pt-logout a:hover {


/* #mw-head .vector-menu: Vector menu wrapper inside the header. */
  color: #fff !important;
#mw-head .vector-menu {
  background-color: #ff6b9d !important;
color: @purp-text1;
  border-color: #ff6b9d !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  border-left: 3px solid transparent !important;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease !important;
}
}


/* #mw-head .vector-menu-heading: Vector menu heading text in the header. */
/* ==========================================================================
#mw-head .vector-menu-heading {
  SECTION 3: LOGO AREA [logo, p-logo, wiki-logo]
color: @purp-text1;
  ========================================================================== */
body.skin-vector-legacy #p-logo { margin: 0 12px 18px; }
body.skin-vector-legacy #p-logo a {
  display: block;
  background-color: #fff0f7;
  border: 1px solid #f7d6e6;
  border-radius: 14px;
  padding: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
}
 
body.skin-vector-legacy #p-logo a:hover {
/* #mw-head .vector-menu-checkbox: Toggle checkbox for responsive/collapsible menus. */
  transform: translateY(-2px);
#mw-head .vector-menu-checkbox {
  border-color: #ff6b9d;
accent-color: @purp-link0;
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.18);
}
}


/* #mw-head .vector-menu-content: Dropdown panel surface in the header. */
/* ==========================================================================
#mw-head .vector-menu-content {
  SECTION 4: PORTALS [portals, vector-menu-portal]
background-color: @purp-surface0;
  ========================================================================== */
border: 1px solid @purp-border1;
body.skin-vector-legacy #mw-panel .vector-menu-portal,
body.skin-vector-legacy #mw-panel .portal {
  margin: 1px;
  border: 1px solid #f7d6e6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
}


/* #mw-head .vector-menu-content-list: List surface inside the dropdown panel. */
/* ==========================================================================
#mw-head .vector-menu-content-list {
  SECTION 5: HEADINGS [headings, collapsible, vector-menu-heading]
background-color: @purp-surface0;
  ========================================================================== */
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
body.skin-vector-legacy #mw-panel .portal h3 {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff6b9d, #ff8fb0);
  border-bottom: 1px solid #f7d6e6;
  text-shadow: 0 1px 2px rgb(0, 0, 0) !important;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
}
 
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
/* #mw-head .vector-menu-tabs: Tab strip container. */
body.skin-vector-legacy #mw-panel .portal h3:hover {
#mw-head .vector-menu-tabs {
  background: linear-gradient(135deg, #ff8fb0, #ff6b9d);
background-color: transparent;
  transform: translateY(-1px);
}
}


/* #mw-head .vector-menu-tabs ul: Tab list container. */
/* ==========================================================================
#mw-head .vector-menu-tabs ul {
  SECTION 6: INDICATORS [indicators, open-close, arrows]
background-color: transparent;
  ========================================================================== */
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading::after,
body.skin-vector-legacy #mw-panel .portal h3::after {
  content: '▼';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  transition: transform 0.3s ease;
}
}
 
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-heading::after,
/* #mw-head .vector-menu-tabs li: Individual tab items. */
body.skin-vector-legacy #mw-panel .portal.collapsed h3::after {
#mw-head .vector-menu-tabs li {
  transform: translateY(-50%) rotate(-90deg);
background-color: transparent;
background-image: none;
}
}


/* #mw-head .vector-menu-tabs li.selected/.new: Selected and red-link tab variants. */
/* ==========================================================================
#mw-head .vector-menu-tabs li.selected,
  SECTION 7: LISTS & CONTENT [lists, collapsible-content, menu-items]
#mw-head .vector-menu-tabs li.new {
  ========================================================================== */
background-color: transparent;
body.skin-vector-legacy #mw-panel .vector-menu-content ul,
body.skin-vector-legacy #mw-panel .portal .body ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff
}
}


/* #mw-head .vector-menu-tabs li a/span: Tab label link and text. */
body.skin-vector-legacy #mw-panel .vector-menu-content,
#mw-head .vector-menu-tabs li a,
body.skin-vector-legacy #mw-panel .portal .body {
#mw-head .vector-menu-tabs li span {
  max-height: none;
color: @purp-link0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 1;
}
}


/* #mw-head .vector-menu-tabs li a.new: "Red link" tab label. */
/* Collapsed state */
#mw-head .vector-menu-tabs li a.new {
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-content,
color: @purp-link-new;
body.skin-vector-legacy #mw-panel .portal.collapsed .body {
  max-height: 0 !important;
  opacity: 0;
  padding: 0;
}
}
 
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed,
/* #mw-head .vector-menu-dropdown: "More"/actions dropdown container. */
body.skin-vector-legacy #mw-panel .portal.collapsed { margin-bottom: 8px; }
#mw-head .vector-menu-dropdown {
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-heading,
color: @purp-text1;
body.skin-vector-legacy #mw-panel .portal.collapsed h3 {
  border-bottom: none;
  border-radius: 14px;
}
}


/* #mw-head .vector-menu-dropdown .vector-menu-content: Dropdown panel surface. */
/* Items and links */
#mw-head .vector-menu-dropdown .vector-menu-content {
body.skin-vector-legacy #mw-panel .vector-menu-content li,
background-color: @purp-surface0;
body.skin-vector-legacy #mw-panel .portal .body li { border-bottom: 1px solid #f3e2ea; }
border: 1px solid @purp-border1;
body.skin-vector-legacy #mw-panel .vector-menu-content li:last-child,
}
body.skin-vector-legacy #mw-panel .portal .body li:last-child { border-bottom: 0; }


/* #mw-head .vector-menu-dropdown .vector-menu-content-list: List surface inside the dropdown. */
body.skin-vector-legacy #mw-panel .vector-menu-content a,
#mw-head .vector-menu-dropdown .vector-menu-content-list {
body.skin-vector-legacy #mw-panel .portal .body a {
background-color: @purp-surface0;
  color: #ff6b9d;
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease;
}
}
 
body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
/* #mw-head .vector-menu-dropdown .vector-menu-heading: Dropdown heading label. */
body.skin-vector-legacy #mw-panel .portal .body a:hover {
#mw-head .vector-menu-dropdown .vector-menu-heading {
 
color: @purp-text1;
  color: #fa4abf ;
}
  background: #fff5fb;
 
  border-left-color: #ff6b9d;
/* #mw-head ... checkbox/hover: Keeps dropdown background consistent when opened. */
  padding-left: 18px;
#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked ~ .vector-menu-content,
#mw-head .vector-menu-dropdown:hover .vector-menu-content {
background-color: @purp-surface0;
}
}


/* #mw-head .vector-menu-dropdown .mw-portlet-body: Ensures body background stays transparent. */
/* ==========================================================================
#mw-head .vector-menu-dropdown .mw-portlet-body {
  SECTION 8: SCROLLBAR [scrollbar, webkit-scrollbar]
background-color: transparent;
  ========================================================================== */
}
body.skin-vector-legacy #mw-panel::-webkit-scrollbar { width: 6px; }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-track { background: #ffe6f0; }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb { background: #ff8fb0; border-radius: 3px; }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb:hover { background: #ff6b9d; }


/* #left-navigation, #right-navigation: Left/right navigation regions for tabs and actions. */
/* ==========================================================================
#left-navigation,
  SECTION 9: CONTENT SPACING [spacing, margins, desktop]
#right-navigation {
  ========================================================================== */
background-color: transparent;
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
  margin-left: 0;
}
}


/* #left-navigation: Left-aligned navigation container. */
/* Show sidebar only when mobile-open class is present */
#left-navigation {
body.skin-vector-legacy #mw-panel.mobile-open {
background-color: transparent;
  transform: translateX(0);
}
}


/* #right-navigation: Right-aligned navigation container. */
/* Add overlay when sidebar is open */
#right-navigation {
body.sidebar-open::before {
background-color: transparent;
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 1;
  transition: opacity .3s ease;
}
}


/* #p-namespaces, #p-views, #p-cactions, #p-variants: Tab/action portlets for namespaces and page actions. */
/* ==========================================================================
#p-namespaces,
  SECTION 11: MOBILE MENU [hamburger, mobile-menu, sidebar-mobile]
#p-views,
  ========================================================================== */
#p-cactions,
.mobile-hamburger-menu {
#p-variants {
  display: flex;
color: @purp-text1;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1002;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ff6b9d, #ff8fb0);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  transition: transform .3s ease, box-shadow .3s ease;
  padding: 0;
}
}
 
.mobile-hamburger-menu:hover {
/* #p-namespaces: Namespace tabs (Article, Talk, etc.). */
  transform: translateY(-2px);
#p-namespaces {
  box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3);
color: @purp-text1;
}
}
 
.mobile-hamburger-menu span {
/* #p-views: View tabs (Read, Edit, View history). */
  display: block;
#p-views {
  width: 25px;
color: @purp-text1;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}
}
.mobile-hamburger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.mobile-hamburger-menu.active span:nth-child(2) { opacity: 0; }
.mobile-hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }


/* #p-cactions: Action dropdown (More/actions menu). */
@media (max-width: 768px) {
#p-cactions {
color: @purp-text1;
}


/* #p-variants: Language variant dropdown (if enabled). */
#p-variants {
color: @purp-text1;
}
}


/* #p-namespaces/.views .vector-menu-tabs: Tab strip surfaces for namespace/view menus. */
/* Sidebar peek tab with image (Vector Legacy only) */
#p-namespaces .vector-menu-tabs,
body.skin-vector-legacy #p-logo {  
#p-views .vector-menu-tabs {
  position: absolute;
background-color: transparent;
  top: 12px;
  left: calc(100% + 12px);
  margin: 0;
  z-index: 1001;  
}
}


/* #p-cactions/#p-variants.vector-menu-dropdown: Dropdown container background. */
body.skin-vector-legacy #p-logo a {
#p-cactions.vector-menu-dropdown,
  width: 56px;
#p-variants.vector-menu-dropdown {
  height: 56px;
background-color: transparent;
  padding: 0;
  display: block;
  border-radius: 10px;
  background-color: #fff0f7;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #f7d6e6;
  box-shadow: 0 8px 20px rgba(255, 107, 157, 0.22);
}
}


/* #p-cactions/#p-variants .vector-menu-heading: Dropdown heading label text. */
/* When sidebar is opened, return the logo to the panel */
#p-cactions .vector-menu-heading,
body.skin-vector-legacy #mw-panel.mobile-open #p-logo {
#p-variants .vector-menu-heading {
  position: relative;
color: @purp-text1;
  left: auto;
  top: auto;
  margin: 0 12px 18px;
}
}


/* #p-cactions/#p-variants .vector-menu-content: Dropdown content panel surface. */
body.skin-vector-legacy #mw-panel.mobile-open #p-logo a {
#p-cactions .vector-menu-content,
  width: auto;
#p-variants .vector-menu-content {
  height: auto;  
background-color: @purp-surface0;
  padding: 12px;
border: 1px solid @purp-border1;
  background-size: contain;
}
}


/* #p-cactions/#p-variants .vector-menu-content-list: List surface inside dropdown content. */
/* High contrast fallback */
#p-cactions .vector-menu-content-list,
@media (prefers-contrast: more) {
#p-variants .vector-menu-content-list {
  body.skin-vector-legacy #mw-panel .vector-menu-content a:hover { text-decoration: underline; }
background-color: @purp-surface0;
}
}


/* #p-* ul: Tab/action lists. */
/* ==========================================================================
#p-namespaces ul,
  SECTION 12: HEADER TABS [header, tabs, vector-tabs]
#p-views ul,
  ========================================================================== */
#p-cactions ul,
#p-views{
#p-variants ul {
background: none !important;
background-color: transparent;
}
}


/* #p-* li: Tab/action items. */
/* ------------------------------------ [FORMS] FORM ELEMENTS ------------------------------------ */
#p-namespaces li,
#searchInput,
#p-views li,
Input::placeholder{
#p-cactions li,
color: #ff6b9d;
#p-variants li {
border-color: rgba(255, 107, 157, 0.22) !important;
background-color: transparent;
 
}
}


/* #p-namespaces/#p-views li.selected: Selected tab background. */
input[type="text"],
#p-namespaces li.selected,
input[type="search"],
#p-views li.selected {
textarea,
background-color: @purp-bg1;
select {
  border: 2px solid #f0f0f0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: inherit !important;
  transition: 0.15s ease !important;
}
}


/* #p-namespaces/#p-views li.new: "Red link" tab item background. */
input[type="text"]:focus,
#p-namespaces li.new,
input[type="search"]:focus,
#p-views li.new {
textarea:focus,
background-color: transparent;
select:focus {
  border-color: #ff6b9d !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2) !important;
}
}


/* #p-* a: Tab/action links. */
/*------------------------------------ Base styling for all buttons ------------------------------------ */
#p-namespaces a,
#ca-view a,
#p-views a,
#ca-viewsource a,
#p-cactions a,
#ca-ve-edit a,
#p-variants a {
#ca-edit a,
color: @purp-link0;
#ca-history a,
text-decoration: none;
#p-cactions .vector-menu-heading ,
#ca-delete a,
#ca-move a,
#ca-protect a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  margin: 4px 6px 0 0 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.92) !important;
  color: #ff6b9d !important;
  border: 2px solid transparent !important;
  border-color: rgba(255, 107, 157, 0.22) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
}
}


/* #p-namespaces/#p-views a.new: "Red link" tab labels. */
/*------------------------------------ Hide text while keeping link clickable ------------------------------------ */
#p-namespaces a.new,
#ca-watch a,
#p-views a.new {
#ca-unwatch a {
color: @purp-link-new;
  font-size: 0;        /* esconde o texto sem sumir com o botão */
  width: 24px;        /* largura do botão */
  height: 24px;        /* altura do botão */
  padding: 0;          /* remove padding extra */
  border-radius: 50%;  /* deixa redondo  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
}
 
/* Empty Star Icon */
/* #p-namespaces/#p-views span: Tab label text spans. */
#ca-watch a {
#p-namespaces span,
  content: "";
#p-views span {
  display: block;
color: @purp-link0;
  width: 16px;
  height: 16px;
  background-image: url("https://mewsie.world/CoraTOWiki/images/2/28/EmptyPinkStar.png");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 10px !important;
}
}


/* #p-cactions/#p-variants .selected: Selected dropdown entry background. */
/* Full Star Icon  */
#p-cactions .selected,
#ca-unwatch a {
#p-variants .selected {
  content: "";
background-color: @purp-bg1;
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("https://mewsie.world/CoraTOWiki/images/c/cc/FullPinkStar.png");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 10px !important;
}
}


/* #p-cactions/#p-variants .new: "Red link" entries inside dropdown menus. */
/*------------------------------------ Hover ------------------------------------*/
#p-cactions .new,
#ca-view a:hover,
#p-variants .new {
#ca-viewsource a:hover,
color: @purp-link-new;
#ca-edit a:hover,
#ca-history a:hover,
#ca-watch a:hover,
#ca-unwatch a:hover,
#p-cactions .vector-menu-heading:hover,
#ca-delete a:hover,
#ca-move a:hover,
#ca-protect a:hover {
  transform: translateY(-2px) !important;
  color: #d63384 !important;
  border-color: #ff6b9d !important;
  box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3) !important;
}
}


/* #p-cactions-label/#p-variants-label: Labels for action/variant menus. */
#p-cactions-label,
#p-variants-label {
color: @purp-text1;
}


/* #p-cactions-label span, #p-variants-label span: Text spans inside the menu labels. */
/*------------------------------------ Active button styling ------------------------------------ */
#p-cactions-label span,
#ca-view.selected a,
#p-variants-label span {
#ca-viewsource.selected a,
color: @purp-text1;
#ca-edit.selected a,
#ca-ve-edit.selected a,
#ca-history.selected a,
#ca-watch.selected a,
#ca-unwatch.selected a,
#ca-more.selected a {
  background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3) !important;
}
}


/*------------------------------------------  LEGACY VECTOR TABS & MENUS  ------------------------------------------*/
/*------------------------------------ Remove mw Buttons ------------------------------------ */
/* .vectorTabs: Legacy tab strip container used by older Vector markup. */
#pt-anontalk,
.vectorTabs {
#p-namespaces,
color: @purp-text1;
#pt-anoncontribs,
#ca-talk,
#ca-nstab-main,
#ca-nstab-mediawiki {
  display: none !important;
}
}


/* .vectorTabs ul: List container for legacy tabs. */
/* ------------------------------------ Remove mw header LI background and border ------------------------------------ */
.vectorTabs ul {
#ca-talk,
background-color: transparent;
#ca-nstab-main,
}
#ca-nstab-mediawiki,
 
#ca-view,
/* .vectorTabs li: Individual legacy tab items. */
#ca-viewsource,
.vectorTabs li {
#ca-edit,
background-color: transparent;
#ca-ve-edit,
}
#ca-history,
 
#ca-watch,
/* .vectorTabs li.selected/.new: Selected and "red link" legacy tab items. */
#ca-unwatch,
.vectorTabs li.selected,
#ca-more,
.vectorTabs li.new {
#mw-page-base {
background-color: transparent;
  background: none !important;
}
  border: none !important;
 
  padding: 0 !important;
/* .vectorTabs li a/span: Tab label links and text spans. */
  margin: 0 4px !important; /* espaço entre os botões */
.vectorTabs li a,
  box-shadow: none !important;
.vectorTabs li span {
color: @purp-link0;
}
 
/* .vectorTabs li a.new: "Red link" tab label. */
.vectorTabs li a.new {
color: @purp-link-new;
}
 
/* .vectorTabs li.selected a(+ visited): Selected tab link styling. */
.vectorTabs li.selected a,
.vectorTabs li.selected a:visited {
color: @purp-text1;
text-decoration: none;
background-color: @purp-bg1;
}
 
/* div.vectorTabs span: Legacy tab span element styling (older Vector markup). */
div.vectorTabs span {
color: @purp-link0;
background-image: none;
}
 
/* .vectorMenu: Legacy dropdown menu container used by older Vector markup. */
.vectorMenu {
color: @purp-text1;
}
 
/* .vectorMenu > h3: Legacy menu heading element. */
.vectorMenu > h3 {
color: @purp-text1;
}
 
/* .vectorMenu > h3 span: Heading text span inside legacy menu headings. */
.vectorMenu > h3 span {
color: @purp-text1;
}
}


/* .vectorMenuCheckbox: Checkbox used to toggle legacy menus in some responsive layouts. */
----------------------
.vectorMenuCheckbox {
/* Container style */
accent-color: @purp-link0;
body.skin-vector-legacy #p-personal {
  position: relative;
  max-width: 220px;
  font-family: sans-serif;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255, 107, 157, 0.25);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  padding: 10px;
}
}


/* .vectorMenu .body: Legacy menu body container surface. */
/* User Menu Collapsible Styles */
.vectorMenu .body {
body.skin-vector-legacy .user-menu-container {
background-color: @purp-surface0;
  position: fixed;
  top: 120px;
  right: 0;
  background: transparent;
  z-index: 1000;
  overflow: visible;
  display: flex;
  flex-direction: row;
}
}


/* .vectorMenu .body ul / div.vectorMenu ul: Legacy menu list surfaces and borders. */
/* ==========================================================================
.vectorMenu .body ul,
  SECTION 13: USER MENU [user-menu, personal-menu, account]
div.vectorMenu ul {
  ========================================================================== */
background-color: @purp-surface0;
body.skin-vector-legacy .user-menu-header {
border: 1px solid @purp-border1;
  display: flex;
  align-items: center;
  padding: 6px 12px ;
  top: 2;             
  right: 0;
  position: fixed;
  color: #ff6b9d;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
  border-radius: 14px 0 0 14px;
  white-space: nowrap;
  font-weight: bold;
  height: auto;
  writing-mode: horizontal-tb;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  border: 1px solid rgba(255, 107, 157, 0.25);
  flex-direction: row;
}
}


/* .vectorMenu .body li: Legacy menu list items. */
body.skin-vector-legacy .user-menu-header:hover {
.vectorMenu .body li {
  background: #ffebf5;
background-color: transparent;
}
}


/* .vectorMenu .body li a / div.vectorMenu li a: Legacy menu links. */
body.skin-vector-legacy .user-menu-header::after {
.vectorMenu .body li a,
  content: "";
div.vectorMenu li a {
  display: inline-block;
color: @purp-link0;
  width: 25px;         
text-decoration: none;
  height: 25px;         
  font-weight: bold;
  background-image: url("https://mewsie.world/CoraTOWiki/images/9/97/LeftArrow.png");
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  margin-left: 6px;
  transition: transform 0.3s ease;
}
}


/* div.vectorMenu li.selected a:visited: Selected legacy menu entry visited state. */
body.skin-vector-legacy .user-menu-container.expanded .user-menu-header::after {
div.vectorMenu li.selected a:visited {
  transform: rotate(180deg);
color: @purp-link1;
}
}


/* div.vectorMenu h5 a: Legacy menu heading link variant. */
body.skin-vector-legacy .user-menu-content {
div.vectorMenu h5 a {
  position: absolute;
color: @purp-link0;
  top: 0;
text-decoration: none;
  right: 100%;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255, 107, 157, 0.25);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  padding: 10px;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 0.4s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
}
}


/* .vectorMenu .menu: Legacy Vector menu dropdown panel surface. */
body.skin-vector-legacy .user-menu-container.expanded .user-menu-content {
.vectorMenu .menu {
  width: 180px;
background-color: @purp-surface0;
  opacity: 1;
border: 1px solid @purp-border1;
}
}


/* .vectorMenu .menu li: Legacy Vector menu dropdown list items. */
body.skin-vector-legacy .user-menu-list {
.vectorMenu .menu li {
  list-style: none;
background-color: transparent;
  margin: 0;
  padding: 0;
}
}


/* .vectorMenu .menu li a: Legacy Vector menu dropdown links. */
body.skin-vector-legacy .user-menu-list li {
.vectorMenu .menu li a {
  margin: 5px 0;
color: @purp-link0;
  white-space: nowrap;
text-decoration: none;
  border-bottom: 1px solid #f3e2ea;
}
}


/* .menu: Generic menu class fallback used by legacy Vector markup. */
body.skin-vector-legacy .user-menu-list li:last-child {
.menu {
  border-bottom: none;
background-color: transparent;
}
}


/* .body: Generic body class fallback used by legacy Vector markup. */
body.skin-vector-legacy .user-menu-list a {
.body {
  display: block;
background-color: transparent;
  color: #ff6b9d;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
}
}


/* #mw-panel: Legacy left sidebar panel container. */
body.skin-vector-legacy .user-menu-list a:hover {
#mw-panel {
  background: #fff5fb;
padding: 0;
  color: #fa4abf;
  padding-left: 18px;
  border-left-color: #ff6b9d;
}
}


/* #mw-panel .portal: Legacy sidebar portlet container. */
/* Adjust the position of menu items in the vertical menu */
#mw-panel .portal {
body.skin-vector-legacy .user-menu-content li {
background: none;
  margin: 5px 0;
border-bottom: 1px solid @purp-muted-border;
  white-space: nowrap;
color: @purp-text0;
}
}


/* #mw-panel .portal h3: Legacy sidebar portlet heading. */
/* Item styles */
#mw-panel .portal h3 {
body.skin-vector-legacy #p-personal li {
color: @purp-link0;
  margin: 4px 0;
  border-bottom: 1px solid #f3e2ea;
}
}


/* #mw-panel .portal .body: Legacy sidebar portlet body container. */
body.skin-vector-legacy #p-personal li:last-child {
#mw-panel .portal .body {
  border-bottom: none;
color: @purp-text0;
}
}


/* #mw-panel .portal .body ul: Legacy sidebar portlet list container. */
/* Link styles */
#mw-panel .portal .body ul {
body.skin-vector-legacy #p-personal a {
background-color: transparent;
  display: block;
  color: #ff6b9d;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
}
}


/* #mw-panel .portal .body li: Legacy sidebar portlet list item. */
body.skin-vector-legacy #p-personal a:hover {
#mw-panel .portal .body li {
  background: #fff5fb;
background-color: transparent;
  color: #fa4abf;
  padding-left: 18px;
  border-left-color: #ff6b9d;
}
}


/* #mw-panel .portal .body li a (+ ul li): Sidebar portlet links in legacy markup variants. */
/*------------------------------------BtT---------------------------------*/
#mw-panel .portal .body li a,
#mw-panel .portal .body ul li a {
color: @purp-link0;
text-decoration: none;
}


/* #mw-panel .portal .body li a:visited (+ ul li): Visited state for sidebar portlet links. */
/* Back to Top Button Styles */
#mw-panel .portal .body li a:visited,
.btt-button {
#mw-panel .portal .body ul li a:visited {
  position: fixed;
color: @purp-link1;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  backdrop-filter: blur(10px);
}
}


/* #mw-panel .portal .body li a:hover/:focus: Hover/focus state for sidebar portlet links. */
/* Show state */
#mw-panel .portal .body li a:hover,
.btt-button.show {
#mw-panel .portal .body li a:focus {
  opacity: 1;
color: @purp-link2;
  visibility: visible;
text-decoration: underline;
  transform: translateY(0) scale(1);
}
}


/* #mw-panel.collapsible-nav .portal: Collapsible sidebar portlets use the same border separation. */
/* Hover effects */
#mw-panel.collapsible-nav .portal {
.btt-button:hover {
border-bottom: 1px solid @purp-muted-border;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
}


/* #mw-panel.collapsible-nav .portal h5 a: Collapsible portlet heading links. */
/* Active state */
#mw-panel.collapsible-nav .portal h5 a {
.btt-button:active {
color: @purp-link0;
  transform: translateY(-1px) scale(0.98);
text-decoration: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}
}


/* #mw-panel .mw-portlet: Sidebar portlet container in newer markup. */
/* Arrow icon */
#mw-panel .mw-portlet {
.btt-button::before {
background-color: transparent;
  content: '';
color: @purp-text0;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #ffffff;
  transition: all 0.3s ease;
}
}


/* #mw-panel .mw-portlet h3: Sidebar portlet heading in newer markup. */
/* Arrow animation on hover */
#mw-panel .mw-portlet h3 {
.btt-button:hover::before {
color: @purp-link0;
  transform: translateY(-2px);
  border-bottom-color: #f8f9ff;
}
}


/* #mw-panel .mw-portlet .vector-menu-content: Sidebar portlet dropdown panel surface. */
/* THEME TOGGLE (top-right) */
#mw-panel .mw-portlet .vector-menu-content {
#pt-theme-toggle a {
background-color: @purp-surface0;
  width: 32px;
border: 1px solid @purp-border1;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #ff6b9d;
  border: 1px solid rgba(255, 107, 157, 0.25);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  transition: transform .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
}
#pt-theme-toggle a:hover { transform: translateY(-2px) }
#pt-theme-toggle a.pressed { transform: scale(.95) }
#pt-theme-toggle .theme-toggle-icon { line-height: 0; display: inline-flex }


/* #mw-panel .mw-portlet .vector-menu-content-list: Sidebar portlet dropdown list surface. */
/* DARK THEME OVERRIDES (Vector Legacy) */
#mw-panel .mw-portlet .vector-menu-content-list {
html[data-theme="dark"] body.skin-vector-legacy #mw-head {
background-color: @purp-surface0;
  background-color: #121a29;
  border-bottom-color: rgba(159,208,255,.2);
  border-color: rgba(159,208,255,.2);
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #content,
/* #mw-panel .mw-portlet .vector-menu-content-list li: Sidebar portlet dropdown list items. */
html[data-theme="dark"] body.skin-vector-legacy .mw-body {
#mw-panel .mw-portlet .vector-menu-content-list li {
  border-color: rgba(159,208,255,.25) !important;
background-color: transparent;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(12,18,30,.55) !important;
  background: linear-gradient(to bottom, rgba(20,26,38,.92), rgba(20,26,38,.6)) !important;
  color: #cfe6ff !important;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #content::before,
/* #mw-panel .mw-portlet .vector-menu-content-list li a: Sidebar portlet dropdown links. */
html[data-theme="dark"] body.skin-vector-legacy .mw-body::before {
#mw-panel .mw-portlet .vector-menu-content-list li a {
  background: linear-gradient(135deg, #274c77, #1b2b41) !important;
color: @purp-link0;
  opacity: .12 !important;
text-decoration: none;
}
}
 
html[data-theme="dark"] #mw-page-base,
/* #p-logo: Sidebar logo portlet positioning. */
html[data-theme="dark"] #mw-head-base {
#p-logo {
  background: #101625 !important;
left: 0;
top: -150px;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel {
/* #p-logo a: Logo link background reset for dark theme. */
  background: rgba(16,22,32,.95);
#p-logo a {
  border-right-color: rgba(159,208,255,.25);
background-color: transparent;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .mw-portlet {
/* #p-logo a.mw-wiki-logo: Logo image element filter reset. */
  background: #141c2a !important;
#p-logo a.mw-wiki-logo {
  border: 1px solid rgba(159,208,255,.2) !important;
filter: none;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal,
/* #p-search: Sidebar search portlet text color. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal {
#p-search {
  background: #141c2a;
color: @purp-text1;
  border-color: rgba(159,208,255,.2);
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content ul,
/* #p-search h3: Sidebar search portlet heading. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body ul {
#p-search h3 {
  background: #141c2a !important;
color: @purp-text1;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content,
/* #p-search form: Sidebar search form background reset. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body {
#p-search form {
  background: #141c2a !important;
background-color: transparent;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content li {
/* #simpleSearch: Search box container border and background. */
  background: #0f1422 !important;
#simpleSearch {
  border-bottom-color: rgba(159,208,255,.15) !important;
border: 1px solid @purp-border1;
background-color: @purp-bg1;
background-image: none;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
/* #simpleSearch form: Search form background reset. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal h3 {
#simpleSearch form {
  color: #cfe6ff !important;
background-color: transparent;
  background: linear-gradient(135deg, #274c77, #1b2b41);
  text-shadow: none !important;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
/* #simpleSearch #searchInput: Search input wrapper background reset. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal h3:hover {
#simpleSearch #searchInput {
  background: linear-gradient(135deg, #1b2b41, #274c77);
background-color: transparent;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a,
/* #simpleSearch input#searchInput: Search input text color and background. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a {
#simpleSearch input#searchInput {
  color: #9fd0ff !important;
background-color: transparent;
color: @purp-text0;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
/* #simpleSearch input#searchInput::placeholder: Placeholder text color for search input. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a:hover {
#simpleSearch input#searchInput::placeholder {
  background: rgba(61,97,146,.22) !important;
color: @purp-text2;
  color: #cfe6ff !important;
  border-left-color: #7bbbff !important;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a,
/* #simpleSearch :input-placeholder#searchInput: Legacy placeholder selector variant. */
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a {
#simpleSearch :input-placeholder#searchInput {
  background: #0f1422 !important;
color: @purp-text2;
  border: 1px solid rgba(159,208,255,.25) !important;
  box-shadow: 0 2px 6px rgba(12,18,30,.5) !important;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body li {
/* #simpleSearch :placeholder#searchInput: Legacy placeholder selector variant. */
  border-bottom-color: rgba(159,208,255,.15);
#simpleSearch :placeholder#searchInput {
color: @purp-text2;
}
}


/* #simpleSearch #searchButton: Search button icon contrast for dark theme. */
/* Top-right personal menu links (Vector) */
#simpleSearch #searchButton {
html[data-theme="dark"] body.skin-vector-legacy
filter: invert( 100% );
}
 
/* #simpleSearch #mw-searchButton: Search submit button icon contrast for dark theme. */
#simpleSearch #mw-searchButton {
filter: invert( 100% );
}
 
/* #simpleSearch input[type='search'], #simpleSearch input[type='text']: Search input control colors. */
#simpleSearch input[type='search'],
#simpleSearch input[type='text'] {
background-color: transparent;
color: @purp-text0;
}
 
/* #searchInput: Search input text color fallback. */
#searchInput {
color: @purp-text0;
}
 
/* #searchButton, #mw-searchButton, input#searchButton: Search button background/border reset. */
#searchButton,
#mw-searchButton,
input#searchButton {
background-color: transparent;
border: 0;
}
 
/* #searchButton:hover/:focus, #mw-searchButton:hover/:focus: Search button hover/focus icon contrast. */
#searchButton:hover,
#searchButton:focus,
#mw-searchButton:hover,
#mw-searchButton:focus {
filter: invert( 100% );
}
 
/* .suggestions: Search suggestions dropdown container. */
.suggestions {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .suggestions-results: Suggestions results list surface. */
.suggestions-results {
background-color: @purp-surface0;
}
 
/* .suggestions-results a: Suggestions result links. */
.suggestions-results a {
color: @purp-link0;
}
 
/* .suggestions-results a:hover/:focus: Hover/focus state for suggestion links. */
.suggestions-results a:hover,
.suggestions-results a:focus {
color: @purp-link2;
}
 
/* .suggestions-special: Suggestions "special" block surface. */
.suggestions-special {
background-color: @purp-surface0;
}
 
/* .suggestions-special a: Suggestions "special" block links. */
.suggestions-special a {
color: @purp-link0;
}
 
/* .suggestions-special a:hover/:focus: Hover/focus state for "special" suggestion links. */
.suggestions-special a:hover,
.suggestions-special a:focus {
color: @purp-link2;
}
 
/*------------------------------------------  PERSONAL TOOLS  ------------------------------------------*/
/* #p-personal: Personal tools container (login, user page, watchlist, etc.). */
#p-personal {
color: @purp-text1;
}
 
/* #p-personal h3: Portlet heading text. */
#p-personal h3 {
color: @purp-text1;
}
 
/* #p-personal ul: Personal tools list container. */
#p-personal ul {
background-color: transparent;
}
 
/* #p-personal li: Personal tools list items. */
#p-personal li {
background-color: transparent;
}
 
/* #p-personal li a: Personal tools links. */
#p-personal li a {
color: @purp-link0;
text-decoration: none;
}
 
/* #p-personal li a:hover, #p-personal li a:focus: Hover/focus state for personal tools. */
#p-personal li a:hover,
#p-personal li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* #p-personal a.new (+ visited): "Red links" for missing pages inside the personal tools area. */
#p-personal a.new,
#p-personal a.new:visited {
color: @purp-link-new;
}
 
/* #p-personal a.new: Selector alias for older tooling and rule audits. */
#p-personal a.new {
color: @purp-link-new;
}
 
/* #pt-* items: Individual personal tool entries. */
#pt-userpage,
#pt-anonuserpage,
#pt-login,
#pt-anonlogin,
#pt-logout,
#pt-createaccount,
#pt-preferences,
#pt-watchlist,
#pt-mycontris,
#pt-mytalk,
#pt-notifications-alert,
#pt-notifications-notice,
#pt-betafeatures {
color: @purp-text1;
}
 
/* #pt-* a: Links inside personal tools entries. */
#pt-userpage a,
#pt-userpage a,
#pt-anonuserpage a,
#pt-mytalk a,
#pt-login a,
#pt-anonlogin a,
#pt-logout a,
#pt-createaccount a,
#pt-preferences a,
#pt-preferences a,
#pt-watchlist a,
#pt-watchlist a,
#pt-mycontris a,
#pt-mycontris a,
#pt-mytalk a,
#pt-logout a { color: #9fd0ff !important }
#pt-notifications-alert a,
html[data-theme="dark"] body.skin-vector-legacy
#pt-notifications-notice a,
#pt-userpage a:hover,
#pt-betafeatures a {
#pt-mytalk a:hover,
color: @purp-link0;
#pt-preferences a:hover,
text-decoration: none;
#pt-watchlist a:hover,
#pt-mycontris a:hover,
#pt-logout a:hover { background: rgba(61,97,146,.22) !important; color: #cfe6ff !important; border-color: #7bbbff !important }
html[data-theme="dark"] body.skin-vector-legacy #p-personal {
  background: #141c2a;
  border-color: rgba(159,208,255,.2);
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #p-personal a {
/* li#pt-anonuserpage span: Anonymous user label text. */
  color: #9fd0ff;
li#pt-anonuserpage span {
color: @purp-text1;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #p-personal a:hover {
/* #mw-navigation: Legacy navigation container wrapper. */
  background: rgba(61,97,146,.22);
#mw-navigation {
  color: #cfe6ff;
color: @purp-text1;
  border-left-color: #7bbbff;
}
}
 
html[data-theme="dark"] #pt-theme-toggle a {
/* #mw-navigation h2: Navigation container heading. */
  background: #1a2332;
#mw-navigation h2 {
  color: #9fd0ff;
color: @purp-text1;
  border-color: rgba(159,208,255,.3);
}
}
 
html[data-theme="dark"] .user-menu-container {
/* #mw-navigation ul: Navigation list container. */
  background: transparent;
#mw-navigation ul {
background-color: transparent;
}
}
 
html[data-theme="dark"] .user-menu-header {
/* #mw-navigation li: Navigation list items. */
  color: #9fd0ff;
#mw-navigation li {
  background: #1a2332;
background-color: transparent;
  border-color: rgba(159,208,255,.3);
}
}
 
html[data-theme="dark"] .user-menu-content {
/* #mw-navigation a: Navigation links. */
  background: #141c2a;
#mw-navigation a {
  border-color: rgba(159,208,255,.2);
color: @purp-link0;
text-decoration: none;
}
}
 
html[data-theme="dark"] .user-menu-list a {
/*------------------------------------------ CONTENT SHELL  ------------------------------------------*/
  color: #9fd0ff;
/* #content: Main content wrapper used as the primary page container. */
#content {
border: 1px solid @purp-border0;
border-right-width: 0;
background-color: @purp-bg2;
color: @purp-text1;
}
}
 
html[data-theme="dark"] .user-menu-list a:hover {
/* div#content: Forces the right border color when external CSS overrides it. */
  background: rgba(61,97,146,.22);
div#content {
  color: #cfe6ff;
border-right-color: @purp-border1 !important;
  border-left-color: #7bbbff;
}
}
 
html[data-theme="dark"] #searchInput {
/* #content.mw-body: Content wrapper when MediaWiki applies `mw-body` on `#content`. */
  background: #111726 !important;
#content.mw-body {
  color: #cfe6ff !important;
border: 1px solid @purp-border0;
  border-color: rgba(159,208,255,.25) !important;
border-right-width: 0;
background-color: @purp-bg2;
color: @purp-text1;
padding: 1em;
margin-top: 50px;
}
}
 
html[data-theme="dark"] #searchInput::placeholder {
/* .mw-body: Standard content container for article pages. */
  color: #7ea6d6 !important;
.mw-body {
border: 1px solid @purp-border0;
border-right-width: 0;
background-color: @purp-bg2;
color: @purp-text1;
padding: 1em;
margin-top: 50px;
}
}
 
html[data-theme="dark"] body.skin-vector-legacy #p-logo a {
/* .mw-body-content: Inner wrapper that holds rendered page HTML. */
  background-color: #1a2332;
.mw-body-content {
  border-color: rgba(159,208,255,.3);
color: @purp-text1;
}
}
 
html[data-theme="dark"] #ca-view a,
/* #bodyContent: Classic content root for legacy page structure. */
html[data-theme="dark"] #ca-viewsource a,
#bodyContent {
html[data-theme="dark"] #ca-ve-edit a,
color: @purp-text1;
html[data-theme="dark"] #ca-edit a,
html[data-theme="dark"] #ca-history a,
html[data-theme="dark"] #p-cactions .vector-menu-heading,
html[data-theme="dark"] #ca-delete a,
html[data-theme="dark"] #ca-move a,
html[data-theme="dark"] #ca-protect a {
  background: rgba(20,26,38,.92) !important;
  color: #9fd0ff !important;
  border-color: rgba(159,208,255,.25) !important;
}
}
 
html[data-theme="dark"] #ca-view.selected a,
/* #bodyContent .mw-parser-output: Parser output wrapper inside legacy content root. */
html[data-theme="dark"] #ca-viewsource.selected a,
#bodyContent .mw-parser-output {
html[data-theme="dark"] #ca-edit.selected a,
color: @purp-text1;
html[data-theme="dark"] #ca-ve-edit.selected a,
html[data-theme="dark"] #ca-history.selected a,
html[data-theme="dark"] #ca-watch.selected a,
html[data-theme="dark"] #ca-unwatch.selected a,
html[data-theme="dark"] #ca-more.selected a {
  background: linear-gradient(135deg, #274c77, #1b2b41) !important;
  color: #cfe6ff !important;
  border-color: transparent !important;
}
}


/* #bodyContent h2: Legacy heading level used by some content outputs. */
html[data-theme="dark"] .mobile-hamburger-menu {
#bodyContent h2 {
  background: linear-gradient(135deg, #274c77, #1b2b41);
color: @purp-text1;
  border: 1px solid rgba(159,208,255,.25);
  box-shadow: 0 6px 20px rgba(12,18,30,.45);
}
}
 
html[data-theme="dark"] .mobile-hamburger-menu:hover {
/*------------------------------------------  PAGE HISTORY  ------------------------------------------*/
  box-shadow: 0 8px 30px rgba(123,187,255,.25);
/* #bodyContent ul#pagehistory: Page history tabs/list and related metadata. */
#bodyContent ul#pagehistory li {
background-color: transparent;
}
}
 
html[data-theme="dark"] .mobile-hamburger-menu span {
/* #bodyContent ul#pagehistory li.selected: Selected page history entry background. */
  background: #cfe6ff;
#bodyContent ul#pagehistory li.selected {
background-color: @purp-bg1;
}
 
/* #bodyContent ul#pagehistory .history-user: Usernames in page history entries. */
#bodyContent ul#pagehistory .history-user {
color: @purp-text1;
}
 
/* #bodyContent ul#pagehistory span.minor: Minor edit markers in page history entries. */
#bodyContent ul#pagehistory span.minor {
color: @purp-text2;
}
 
/* #siteSub: Site subtitle text. */
#siteSub {
color: @purp-text2;
}
 
/* #contentSub: Content subtitle text. */
#contentSub {
color: @purp-text2;
}
 
/* #contentSub2: Additional content subtitle text. */
#contentSub2 {
color: @purp-text2;
}
 
/*------------------------------------------  RSS MODULES  ------------------------------------------*/
/* #content div.rss: RSS box containers used by some extensions. */
#content div.rss {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* #content div.rss h3: RSS box heading. */
#content div.rss h3 {
color: @purp-text1;
border-bottom: 1px solid @purp-border1;
}
 
/* #content div.rss h3 a: RSS heading link. */
#content div.rss h3 a {
color: @purp-link0;
text-decoration: none;
}
 
/* #jump-to-nav: Skip link container text. */
#jump-to-nav {
color: @purp-text2;
}
 
/* #jump-to-nav a: Skip link styling. */
#jump-to-nav a {
color: @purp-link0;
text-decoration: none;
}
 
/* #jump-to-nav a:hover/:focus: Hover/focus state for skip links. */
#jump-to-nav a:hover,
#jump-to-nav a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .firstHeading: Page title heading color. */
.firstHeading {
color: @purp-text1;
}
 
/* .mw-indicators: Container for page indicator elements. */
.mw-indicators {
color: @purp-text2;
}
 
/* .mw-indicator: Individual page indicator elements. */
.mw-indicator {
color: @purp-text2;
}
 
/* .mw-indicator a: Indicator links. */
.mw-indicator a {
color: @purp-link0;
text-decoration: none;
}
 
/* .mw-indicator a:hover/:focus: Hover/focus state for indicator links. */
.mw-indicator a:hover,
.mw-indicator a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* #siteNotice: Site notice container text. */
#siteNotice {
color: @purp-text1;
}
 
/* #siteNotice .mw-body-content: Notice content wrapper text. */
#siteNotice .mw-body-content {
color: @purp-text1;
}
 
/* #siteNotice p: Ensures notice paragraphs inherit readable text color. */
#siteNotice p {
color: @purp-text1;
}
 
/* .mw-site-notice: Alternate site notice container text. */
.mw-site-notice {
color: @purp-text1;
}
 
/* .mw-body h1–h6: Base heading styles inside content. */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
color: @purp-text1;
padding-top: 0;
border-bottom: 1px solid @purp-border1;
width: auto;
}
 
/* .mw-body h3–h6: Secondary heading adjustments inside content. */
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
border-bottom: none;
font-weight: bold;
}
 
/* .mw-body h1–h6 .mw-headline: Heading headline span styling. */
.mw-body h1 .mw-headline,
.mw-body h2 .mw-headline,
.mw-body h3 .mw-headline,
.mw-body h4 .mw-headline,
.mw-body h5 .mw-headline,
.mw-body h6 .mw-headline {
color: @purp-text1;
}
 
/* .mw-body h1–h6 .mw-editsection: Edit section link area inside headings. */
.mw-body h1 .mw-editsection,
.mw-body h2 .mw-editsection,
.mw-body h3 .mw-editsection,
.mw-body h4 .mw-editsection,
.mw-body h5 .mw-editsection,
.mw-body h6 .mw-editsection {
color: @purp-link0;
}
 
/* .mw-editsection: Edit section container color. */
.mw-editsection {
color: @purp-link0;
}
 
/* .mw-editsection a: Edit section links. */
.mw-editsection a {
color: @purp-link0;
}
 
/* .mw-editsection a:hover/:focus: Hover/focus state for edit section links. */
.mw-editsection a:hover,
.mw-editsection a:focus {
color: @purp-link2;
}
 
/* .mw-editsection-bracket: Bracket text around edit links. */
.mw-editsection-bracket {
color: @purp-text2;
}
 
/* .mw-body a: Default link styling in article content. */
.mw-body a {
text-decoration: none;
color: @purp-link0;
}
 
/* .mw-body a:visited: Visited link styling in article content. */
.mw-body a:visited {
color: @purp-link1;
}
 
/* .mw-body a:hover/:focus: Hover/focus state for article content links. */
.mw-body a:hover,
.mw-body a:focus {
text-decoration: underline;
color: @purp-link2;
}
 
/* .mw-body a.new, #bodyContent a.new: "Red links" for missing pages in content. */
.mw-body a.new,
#bodyContent a.new {
color: @purp-link-new;
}
 
/* .mw-body a.new:visited, #bodyContent a.new:visited: Visited state for "red links". */
.mw-body a.new:visited,
#bodyContent a.new:visited {
color: @purp-link-new;
}
 
/* .mw-body a.external, #content a.external: External link styling in content. */
.mw-body a.external,
#content a.external {
color: @purp-link0;
}
 
/* .mw-body a.external: Selector alias for older tooling and rule audits. */
.mw-body a.external {
color: @purp-link0;
}
 
/* .mw-body a.external:visited, #content a.external:visited: Visited state for external links. */
.mw-body a.external:visited,
#content a.external:visited {
color: @purp-link1;
}
 
/* .mw-body a.external:visited: Selector alias for older tooling and rule audits. */
.mw-body a.external:visited {
color: @purp-link1;
}
 
/* .mw-body a.external:hover/:focus: Hover/focus state for external links. */
.mw-body a.external:hover,
.mw-body a.external:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .mw-body a.external:active: Active state for external links. */
.mw-body a.external:active {
color: @purp-link2;
}
 
/* #content a.extiw:active: Active state for interwiki links inside the content container. */
#content a.extiw:active {
color: @purp-link2;
}
 
/* .mw-body img: Image background reset inside content. */
.mw-body img {
background-color: transparent;
}
 
/* .mw-body-content p: Paragraph text color inside content. */
.mw-body-content p {
color: @purp-text1;
}
 
/* .mw-body-content ul, .mw-body-content ol: List text color inside content. */
.mw-body-content ul,
.mw-body-content ol {
color: @purp-text1;
}
 
/* .mw-body-content li: List item text color inside content. */
.mw-body-content li {
color: @purp-text1;
}
 
/* .mw-body-content dl: Definition list text color inside content. */
.mw-body-content dl {
color: @purp-text1;
}
 
/* .mw-body-content dt: Definition term text color inside content. */
.mw-body-content dt {
color: @purp-text1;
}
 
/* .mw-body-content dd: Definition description text color inside content. */
.mw-body-content dd {
color: @purp-text1;
}
 
/* .mw-parser-output: Parser output root inside content. */
.mw-parser-output {
color: @purp-text1;
}
 
/* .mw-parser-output .toc, .mw-parser-output #toc: TOC container styling inside parser output. */
.mw-parser-output .toc,
.mw-parser-output #toc {
border: 1px solid @purp-border1;
background-color: @purp-surface0;
}
 
/* .mw-parser-output .toc .toctitle, .mw-parser-output #toc .toctitle: TOC title styling inside parser output. */
.mw-parser-output .toc .toctitle,
.mw-parser-output #toc .toctitle {
color: @purp-text1;
}
 
/* .mw-parser-output .toc ul, .mw-parser-output #toc ul: TOC list styling inside parser output. */
.mw-parser-output .toc ul,
.mw-parser-output #toc ul {
color: @purp-text1;
}
 
/* .mw-parser-output .toc li, .mw-parser-output #toc li: TOC list item styling inside parser output. */
.mw-parser-output .toc li,
.mw-parser-output #toc li {
color: @purp-text1;
}
 
/* .mw-parser-output .tocnumber: TOC number styling inside parser output. */
.mw-parser-output .tocnumber {
color: @purp-link0;
}
 
/* .mw-parser-output .toctext: TOC link text styling inside parser output. */
.mw-parser-output .toctext {
color: @purp-text1;
}
 
/* .mw-body-content table: Table surface and text colors inside content. */
.mw-body-content table {
color: @purp-text1;
background-color: @purp-bg1;
}
 
/* .mw-body-content caption: Table caption text inside content. */
.mw-body-content caption {
color: @purp-text1;
}
 
/* .mw-body-content th, .mw-body-content td: Table cell borders and text inside content. */
.mw-body-content th,
.mw-body-content td {
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .mw-body-content hr: Horizontal rule styling inside content. */
.mw-body-content hr {
color: @purp-border1;
background-color: @purp-border1;
}
 
/* .mw-body-content blockquote: Blockquote text and border inside content. */
.mw-body-content blockquote {
color: @purp-text1;
border-left: 3px solid @purp-border1;
}
 
/* .mw-body-content pre/code/kbd/samp/.mw-code: Code element surface and text colors. */
.mw-body-content pre,
.mw-body-content code,
.mw-body-content kbd,
.mw-body-content samp,
.mw-code {
background-color: @purp-surface0;
color: @purp-text1;
}
 
/* .mw-body-content pre: Preformatted block border and sizing. */
.mw-body-content pre {
border: 1px dashed @purp-border1;
font-size: 100% !important;
}
 
/* .mw-body-content code: Inline code border reset. */
.mw-body-content code {
border: 0;
}
 
/* .mw-body-content form: Form container text color inside content. */
.mw-body-content form {
color: @purp-text1;
}
 
/* .mw-body-content fieldset: Fieldset border inside content. */
.mw-body-content fieldset {
border: 1px solid @purp-border1;
}
 
/* .mw-body-content legend: Legend text color inside content. */
.mw-body-content legend {
color: @purp-text1;
}
 
/* .mw-body-content label: Label text color inside content. */
.mw-body-content label {
color: @purp-text1;
}
 
/* .mw-body-content input/textarea/select/button: Form control styling inside content. */
.mw-body-content input,
.mw-body-content textarea,
.mw-body-content select,
.mw-body-content button {
background-color: @purp-bg1;
border: 1px solid @purp-border1;
color: @purp-text0;
}
 
/* .mw-body-content input[type='text'/...], textarea: Textual form controls inside content. */
.mw-body-content input[type='text'],
.mw-body-content input[type='search'],
.mw-body-content input[type='email'],
.mw-body-content input[type='password'],
.mw-body-content input[type='number'],
.mw-body-content textarea {
background-color: @purp-bg1;
border: 1px solid @purp-border1;
color: @purp-text0;
}
 
/* .mw-body-content input[type='checkbox'/'radio']: Accent color for choice controls. */
.mw-body-content input[type='checkbox'],
.mw-body-content input[type='radio'] {
accent-color: @purp-link0;
}
 
/* .mw-body-content *:focus: Focus border color for form controls. */
.mw-body-content input:focus,
.mw-body-content textarea:focus,
.mw-body-content select:focus,
.mw-body-content button:focus {
border-color: @purp-link0;
}
 
/* #mw-content-text: Main content text container. */
#mw-content-text {
color: @purp-text1;
}
 
/* #mw-content-text .mw-parser-output: Parser output root inside main content text container. */
#mw-content-text .mw-parser-output {
color: @purp-text1;
}
 
/* .mw-content-ltr: LTR content container text color. */
.mw-content-ltr {
color: @purp-text1;
}
 
/* .mw-content-rtl: RTL content container text color. */
.mw-content-rtl {
color: @purp-text1;
}
 
/* #catlinks: Category links box container. */
#catlinks {
border: 1px solid @purp-border1;
background-color: @purp-surface0;
}
 
/* #catlinks ul: Category links list container. */
#catlinks ul {
background-color: transparent;
}
 
/* #catlinks li: Category links list items. */
#catlinks li {
background-color: transparent;
}
 
/* #catlinks li a: Category link styling. */
#catlinks li a {
color: @purp-link0;
text-decoration: none;
}
 
/* #catlinks li a:hover/:focus: Hover/focus state for category links. */
#catlinks li a:hover,
#catlinks li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .catlinks: Alternate category links box container. */
.catlinks {
border: 1px solid @purp-border1;
background-color: @purp-surface0;
color: @purp-text1;
}
 
/* .catlinks ul: Alternate category links list container. */
.catlinks ul {
background-color: transparent;
}
 
/* .catlinks li: Alternate category links list items. */
.catlinks li {
background-color: transparent;
}
 
/* .catlinks a: Alternate category link styling. */
.catlinks a {
color: @purp-link0;
text-decoration: none;
}
 
/* .catlinks a:hover/:focus: Hover/focus state for alternate category links. */
.catlinks a:hover,
.catlinks a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* #mw-normal-catlinks: Default category links container text. */
#mw-normal-catlinks {
color: @purp-text1;
}
 
/* #mw-hidden-catlinks: Hidden category links container text. */
#mw-hidden-catlinks {
color: @purp-text1;
}
 
/* #mw-hidden-catlinks.hidden-catlinks: Hidden category links state container text. */
#mw-hidden-catlinks.hidden-catlinks {
color: @purp-text1;
}
 
/* #mw-hidden-catlinks ul: Hidden category links list container. */
#mw-hidden-catlinks ul {
background-color: transparent;
}
 
/* #mw-hidden-catlinks li: Hidden category links list items. */
#mw-hidden-catlinks li {
background-color: transparent;
}
 
/* #mw-hidden-catlinks li a: Hidden category link styling. */
#mw-hidden-catlinks li a {
color: @purp-link0;
text-decoration: none;
}
 
/* #mw-hidden-catlinks li a:hover/:focus: Hover/focus state for hidden category links. */
#mw-hidden-catlinks li a:hover,
#mw-hidden-catlinks li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/*------------------------------------------  TABLE OF CONTENTS  ------------------------------------------*/
/* #toc, .toc: TOC container styling (legacy `#toc` and class-based variants). */
#toc {
border: 1px solid @purp-border1;
background-color: @purp-surface0;
}
 
/* .toc: Table of contents container (class-based variant). */
.toc {
border: 1px solid @purp-border1;
background-color: @purp-surface0;
}
 
/* .toc .toctitle: TOC title text. */
.toc .toctitle {
color: @purp-text1;
}
 
/* .toc .tocnumber: TOC section number text. */
.toc .tocnumber {
color: @purp-link0;
}
 
/* .toc .toctext: TOC section link text. */
.toc .toctext {
color: @purp-text1;
}
 
/*------------------------------------------  FOOTER  ------------------------------------------*/
/* #footer and related lists: Footer links and metadata. */
#footer {
background-color: transparent;
color: @purp-text2;
}
 
/* #footer ul: Footer list containers. */
#footer ul {
background-color: transparent;
}
 
/* #footer li: Footer list item text. */
#footer li {
color: @purp-text2;
}
 
/* #footer ul li: Selector alias for legacy footer markup variants. */
#footer ul li {
color: @purp-text2;
}
 
/* #footer a: Footer link styling. */
#footer a {
color: @purp-link0;
text-decoration: none;
}
 
/* #footer a:hover/:focus: Hover/focus state for footer links. */
#footer a:hover,
#footer a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* #footer-info: Footer info block container. */
#footer-info {
color: @purp-text2;
}
 
/* #footer-info li: Footer info list item text. */
#footer-info li {
color: @purp-text2;
}
 
/* #footer-places: Footer places block container. */
#footer-places {
color: @purp-text2;
}
 
/* #footer-places li: Footer places list item text. */
#footer-places li {
color: @purp-text2;
}
 
/* #footer-icons: Footer icons block container. */
#footer-icons {
color: @purp-text2;
}
 
/* #footer-icons li: Footer icons list item text. */
#footer-icons li {
color: @purp-text2;
}
 
/* #footer-icons: Icon list. Keep icons transparent while allowing MW to render special button-like entries. */
#footer-icons li:not( #footer-poweredbyico ) a {
background: transparent;
}
 
/* #footer-poweredbyico a: Ensures the background spans the whole "button" on newer MediaWiki versions. */
#footer-poweredbyico a {
display: inline-block;
}
 
/* #footer-icons li a img: Footer icon image background reset. */
#footer-icons li a img {
background: transparent;
}
 
/* .mw-footer: Footer container in newer MediaWiki markup. */
.mw-footer {
background-color: transparent;
color: @purp-text2;
}
 
/* .mw-footer ul: Footer lists in newer markup. */
.mw-footer ul {
background-color: transparent;
}
 
/* .mw-footer li: Footer list item text in newer markup. */
.mw-footer li {
color: @purp-text2;
}
 
/* .mw-footer a: Footer links in newer markup. */
.mw-footer a {
color: @purp-link0;
text-decoration: none;
}
 
/* .mw-footer a:hover/:focus: Hover/focus state for footer links in newer markup. */
.mw-footer a:hover,
.mw-footer a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .mw-portlet: Generic portlet container. */
.mw-portlet {
color: @purp-text1;
}
 
/* .mw-portlet h3: Generic portlet heading text. */
.mw-portlet h3 {
color: @purp-text1;
}
 
/* .mw-portlet .mw-portlet-body: Generic portlet body container. */
.mw-portlet .mw-portlet-body {
background-color: transparent;
}
 
/* .mw-portlet ul: Generic portlet list container. */
.mw-portlet ul {
background-color: transparent;
}
 
/* .mw-portlet li: Generic portlet list items. */
.mw-portlet li {
background-color: transparent;
}
 
/* .mw-portlet li a: Generic portlet links. */
.mw-portlet li a {
color: @purp-link0;
text-decoration: none;
}
 
/* .mw-portlet li a:hover/:focus: Hover/focus state for portlet links. */
.mw-portlet li a:hover,
.mw-portlet li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .mw-portlet-label: Generic portlet label container. */
.mw-portlet-label {
color: @purp-text1;
}
 
/* .mw-portlet-label span: Generic portlet label text span. */
.mw-portlet-label span {
color: @purp-text1;
}
 
/* .vector-menu: Vector menu container base text color. */
.vector-menu {
color: @purp-text1;
}
 
/* .vector-menu-heading: Vector menu heading text. */
.vector-menu-heading {
color: @purp-text1;
}
 
/* .vector-menu-heading-label: Vector menu heading label container. */
.vector-menu-heading-label {
color: @purp-text1;
}
 
/* .vector-menu-heading-label span: Vector menu heading label text span. */
.vector-menu-heading-label span {
color: @purp-text1;
}
 
/* .vector-menu-checkbox: Vector menu toggle checkbox accent color. */
.vector-menu-checkbox {
accent-color: @purp-link0;
}
 
/* .vector-menu-content: Vector menu panel surface. */
.vector-menu-content {
background-color: @purp-surface0;
}
 
/* .vector-menu-content-list: Vector menu list surface and border. */
.vector-menu-content-list {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
}
 
/* .vector-menu-content-list li: Vector menu list items. */
.vector-menu-content-list li {
background-color: transparent;
}
 
/* .vector-menu-content-list li a: Vector menu links. */
.vector-menu-content-list li a {
color: @purp-link0;
text-decoration: none;
}
 
/* .vector-menu-content-list li a:hover/:focus: Hover/focus state for Vector menu links. */
.vector-menu-content-list li a:hover,
.vector-menu-content-list li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .vector-menu-tabs: Tab strip container in modern Vector markup. */
.vector-menu-tabs {
background-color: transparent;
}
 
/* .vector-menu-tabs ul: Tab list container. */
.vector-menu-tabs ul {
background-color: transparent;
}
 
/* .vector-menu-tabs li: Tab list items. */
.vector-menu-tabs li {
background-color: transparent;
background-image: none;
}
 
/* .vector-menu-tabs li.selected/.new: Selected and "red link" tab item variants. */
.vector-menu-tabs li.selected,
.vector-menu-tabs li.new {
background-color: transparent;
}
 
/* .vector-menu-tabs li a/span: Tab label links and text. */
.vector-menu-tabs li a,
.vector-menu-tabs li span,
.vector-menu-tabs li a span {
color: @purp-link0;
}
 
/* .vector-menu-tabs li a: Selector alias for older tooling and rule audits. */
.vector-menu-tabs li a {
color: @purp-link0;
}
 
/* .vector-menu-tabs li a.new (+ variants): "Red link" tab label variants. */
.vector-menu-tabs li a.new,
.vector-menu-tabs li.new a,
.vector-menu-tabs li.new a:visited,
.vector-menu-tabs .new a:visited {
color: @purp-link-new;
}
 
/* .vector-menu-tabs li.selected a (+ variants): Selected tab link styling. */
.vector-menu-tabs li.selected a,
.vector-menu-tabs li.selected a:visited,
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
color: @purp-text1;
text-decoration: none;
background-color: @purp-bg1;
}
 
/* .vector-menu-tabs .selected: Fallback selector for selected tab entries (older markup variants). */
.vector-menu-tabs .selected {
background-color: transparent;
}
 
/* .vector-menu-tabs li a:hover/:focus: Hover/focus state for tab links. */
.vector-menu-tabs li a:hover,
.vector-menu-tabs li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .vector-menu-dropdown: Dropdown menu container in modern Vector markup. */
.vector-menu-dropdown {
color: @purp-text1;
}
 
/* .vector-menu-dropdown heading: Dropdown menu heading text. */
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown h3 {
color: @purp-text1;
}
 
/* .vector-menu-dropdown .vector-menu-heading: Selector alias for older tooling and rule audits. */
.vector-menu-dropdown .vector-menu-heading {
color: @purp-text1;
}
 
/* .vector-menu-dropdown heading ::after: Dropdown caret icon contrast. */
.vector-menu-dropdown .vector-menu-heading::after,
.vector-menu-dropdown h3::after {
filter: invert( 100% );
}
 
/* .vector-menu-dropdown .vector-menu-heading::after: Selector alias for older tooling and rule audits. */
.vector-menu-dropdown .vector-menu-heading::after {
filter: invert( 100% );
}
 
/* .vector-menu-dropdown .vector-menu-content: Dropdown menu panel surface and border. */
.vector-menu-dropdown .vector-menu-content {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
}
 
/* .vector-menu-dropdown .vector-menu-content-list: Dropdown menu list surface and border. */
.vector-menu-dropdown .vector-menu-content-list {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
}
 
/* .vector-menu-dropdown .vector-menu-content-list li: Dropdown menu list items. */
.vector-menu-dropdown .vector-menu-content-list li {
background-color: transparent;
}
 
/* .vector-menu-dropdown links: Dropdown menu link variants across MW versions. */
.vector-menu-dropdown .vector-menu-content-list li a,
.vector-menu-dropdown li.mw-list-item a,
.vector-menu-dropdown .mw-list-item a {
color: @purp-link0;
text-decoration: none;
}
 
/* .vector-menu-dropdown li.mw-list-item a (MW 1.39+): Selector alias matching original purp.less. */
.vector-menu-dropdown li.mw-list-item a /* 1.39+ */ {
color: @purp-link0;
text-decoration: none;
}
 
/* .vector-menu-dropdown .vector-menu-content-list li a:hover/:focus: Hover/focus state for dropdown links. */
.vector-menu-dropdown .vector-menu-content-list li a:hover,
.vector-menu-dropdown .vector-menu-content-list li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .vector-menu-dropdown open state: Checked/hovered state shows the dropdown panel surface. */
.vector-menu-dropdown .vector-menu-checkbox:checked ~ .vector-menu-content,
.vector-menu-dropdown:hover .vector-menu-content {
background-color: @purp-surface0;
}
 
/* .vector-menu-empty: Empty menu indicator styling. */
.vector-menu-empty {
opacity: 0.7;
}
 
/* .vector-menu-empty .vector-menu-heading: Empty menu heading muted color. */
.vector-menu-empty .vector-menu-heading {
color: @purp-text2;
}
 
/* .vector-menu-empty .vector-menu-content: Empty menu content hidden. */
.vector-menu-empty .vector-menu-content {
display: none;
}
 
/* .vector-menu-portal: Portal menu container base text color. */
.vector-menu-portal {
color: @purp-text0;
}
 
/* .vector-menu-portal .vector-menu-heading: Portal menu heading link color. */
.vector-menu-portal .vector-menu-heading {
color: @purp-link0;
}
 
/* .vector-menu-portal .vector-menu-content: Portal menu content surface reset. */
.vector-menu-portal .vector-menu-content {
background-color: transparent;
}
 
/* .vector-menu-portal .vector-menu-content-list: Portal menu list surface reset. */
.vector-menu-portal .vector-menu-content-list {
background-color: transparent;
}
 
/* .vector-menu-portal .vector-menu-content-list li: Portal menu list items. */
.vector-menu-portal .vector-menu-content-list li {
background-color: transparent;
}
 
/* .vector-menu-portal .vector-menu-content-list li a: Portal menu links. */
.vector-menu-portal .vector-menu-content-list li a {
color: @purp-link0;
text-decoration: none;
}
 
/* #mw-panel .vector-menu-portal: Sidebar portal container in modern markup. */
#mw-panel .vector-menu-portal {
background: none;
border-bottom: 1px solid @purp-muted-border;
}
 
/* #mw-panel .vector-menu-portal .vector-menu-heading: Sidebar portal heading in modern markup. */
#mw-panel .vector-menu-portal .vector-menu-heading {
color: @purp-link0;
}
 
/* #mw-panel .vector-menu-portal .vector-menu-content: Sidebar portal content surface reset. */
#mw-panel .vector-menu-portal .vector-menu-content {
background-color: transparent;
}
 
/* #mw-panel .vector-menu-portal .vector-menu-content-list: Sidebar portal list surface reset. */
#mw-panel .vector-menu-portal .vector-menu-content-list {
background-color: transparent;
}
 
/* #mw-panel .vector-menu-portal .vector-menu-content-list li: Sidebar portal list items. */
#mw-panel .vector-menu-portal .vector-menu-content-list li {
background-color: transparent;
}
 
/* #mw-panel .vector-menu-portal .vector-menu-content-list li a: Sidebar portal links. */
#mw-panel .vector-menu-portal .vector-menu-content-list li a {
color: @purp-link0;
text-decoration: none;
}
 
/* #mw-panel .vector-menu-portal .vector-menu-content-list li a:hover/:focus: Hover/focus state for sidebar portal links. */
#mw-panel .vector-menu-portal .vector-menu-content-list li a:hover,
#mw-panel .vector-menu-portal .vector-menu-content-list li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .vector-user-menu: User menu container in modern Vector markup. */
.vector-user-menu {
color: @purp-text1;
}
 
/* .vector-user-menu .vector-menu-content: User menu dropdown panel surface. */
.vector-user-menu .vector-menu-content {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
}
 
/* .vector-user-menu .vector-menu-content-list: User menu dropdown list surface. */
.vector-user-menu .vector-menu-content-list {
background-color: @purp-surface0;
}
 
/* .vector-user-menu .vector-menu-content-list li: User menu dropdown list items. */
.vector-user-menu .vector-menu-content-list li {
background-color: transparent;
}
 
/* .vector-user-menu .vector-menu-content-list li a: User menu dropdown links. */
.vector-user-menu .vector-menu-content-list li a {
color: @purp-link0;
text-decoration: none;
}
 
/* .vector-user-menu .vector-menu-content-list li a:hover/:focus: Hover/focus state for user menu links. */
.vector-user-menu .vector-menu-content-list li a:hover,
.vector-user-menu .vector-menu-content-list li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .vector-user-menu .mw-portlet-body: User menu portlet body background reset. */
.vector-user-menu .mw-portlet-body {
background-color: transparent;
}
 
/* .vector-legacy-sidebar: Legacy sidebar container base text color. */
.vector-legacy-sidebar {
color: @purp-text0;
}
 
/* .vector-legacy-sidebar .vector-menu-portal ...: Legacy sidebar portlet link colors (older DOM structure). */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
color: @purp-link0;
text-decoration: none;
}
 
/* .vector-legacy-sidebar ... a:visited: Visited state for legacy sidebar portal links. */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
color: @purp-link1;
}
 
/* .vector-legacy-sidebar ... a:active: Active state for legacy sidebar portal links. */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:active {
color: @purp-link2;
}
 
/* .vector-legacy-header: Legacy Vector header container base text. */
.vector-legacy-header {
color: @purp-text1;
}
 
/* .vector-legacy-footer: Legacy Vector footer container base text. */
.vector-legacy-footer {
color: @purp-text2;
}
 
/* .vector-legacy-navigation: Legacy Vector navigation container base text. */
.vector-legacy-navigation {
color: @purp-text1;
}
 
/* .vector-legacy-content: Legacy Vector content container base text. */
.vector-legacy-content {
color: @purp-text1;
}
 
/* .vector-clear: Clearfix helper used in legacy layouts. */
.vector-clear {
clear: both;
}
 
/* .vector-body: Base Vector body wrapper background reset. */
.vector-body {
background-color: transparent;
}
 
/* .vector-body-before-content: Pre-content Vector wrapper background reset. */
.vector-body-before-content {
background-color: transparent;
}
 
/* .vector-body-after-content: Post-content Vector wrapper background reset. */
.vector-body-after-content {
background-color: transparent;
}
 
/* .vector-content: Vector content wrapper background reset. */
.vector-content {
background-color: transparent;
}
 
/* .vector-content-heading: Content heading area wrapper in modern Vector. */
.vector-content-heading {
color: @purp-text1;
}
 
/* .vector-content-heading .mw-indicators: Indicator container inside modern content heading. */
.vector-content-heading .mw-indicators {
color: @purp-text2;
}
 
/* .vector-content-heading .firstHeading: Page title inside modern content heading. */
.vector-content-heading .firstHeading {
color: @purp-text1;
}
 
/* .vector-content-heading .mw-body: Content body surface inside modern content layout. */
.vector-content-heading .mw-body {
background-color: @purp-bg2;
}
 
/* .vector-page-toolbar: Modern Vector page toolbar wrapper. */
.vector-page-toolbar {
background-color: transparent;
}
 
/* .vector-page-toolbar-container: Inner toolbar container background reset. */
.vector-page-toolbar-container {
background-color: transparent;
}
 
/* .vector-page-tools: Modern Vector page tools container. */
.vector-page-tools {
color: @purp-text1;
}
 
/* .vector-page-tools .vector-menu-content: Page tools dropdown panel surface. */
.vector-page-tools .vector-menu-content {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
}
 
/* .vector-page-tools .vector-menu-content-list: Page tools dropdown list surface. */
.vector-page-tools .vector-menu-content-list {
background-color: @purp-surface0;
}
 
/* .vector-page-tools .vector-menu-content-list li: Page tools dropdown list items. */
.vector-page-tools .vector-menu-content-list li {
background-color: transparent;
}
 
/* .vector-page-tools .vector-menu-content-list li a: Page tools dropdown links. */
.vector-page-tools .vector-menu-content-list li a {
color: @purp-link0;
text-decoration: none;
}
 
/* .vector-page-tools .vector-menu-content-list li a:hover/:focus: Hover/focus state for page tools links. */
.vector-page-tools .vector-menu-content-list li a:hover,
.vector-page-tools .vector-menu-content-list li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .vector-page-tools .vector-menu-heading: Page tools menu heading text. */
.vector-page-tools .vector-menu-heading {
color: @purp-text1;
}
 
/* .vector-page-tools .vector-menu-tabs: Page tools tab strip container. */
.vector-page-tools .vector-menu-tabs {
background-color: transparent;
}
 
/* .vector-page-tools .vector-menu-tabs li: Page tools tab list items. */
.vector-page-tools .vector-menu-tabs li {
background-color: transparent;
}
 
/* .vector-page-tools .vector-menu-tabs li.selected: Selected tab background for page tools. */
.vector-page-tools .vector-menu-tabs li.selected {
background-color: @purp-bg1;
}
 
/* .vector-page-tools .vector-menu-tabs li a: Page tools tab links. */
.vector-page-tools .vector-menu-tabs li a {
color: @purp-link0;
}
 
/* .vector-page-tools .vector-menu-tabs li a:hover/:focus: Hover/focus state for page tools tab links. */
.vector-page-tools .vector-menu-tabs li a:hover,
.vector-page-tools .vector-menu-tabs li a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .vector-page-tools .vector-menu-dropdown: Page tools dropdown container. */
.vector-page-tools .vector-menu-dropdown {
color: @purp-text1;
}
 
/* .vector-page-tools .vector-menu-dropdown .vector-menu-content: Page tools dropdown panel surface. */
.vector-page-tools .vector-menu-dropdown .vector-menu-content {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
}
 
/* .vector-page-tools dropdown open state: Checked/hovered state shows dropdown panel surface. */
.vector-page-tools .vector-menu-dropdown .vector-menu-checkbox:checked ~ .vector-menu-content,
.vector-page-tools .vector-menu-dropdown:hover .vector-menu-content {
background-color: @purp-surface0;
}
 
/* .vector-search-box: Modern Vector search box container. */
.vector-search-box {
border: 1px solid @purp-border1;
background-color: @purp-bg1;
}
 
/* .vector-search-box form: Search form background reset. */
.vector-search-box form {
background-color: transparent;
}
 
/* .vector-search-box input: Search input colors. */
.vector-search-box input {
background-color: transparent;
color: @purp-text0;
}
 
/* .vector-search-box button: Search submit button icon contrast for dark theme. */
.vector-search-box button {
background-color: transparent;
border: 0;
filter: invert( 100% );
}
 
/* .vector-search-box .suggestions: Suggestions dropdown inside modern search box. */
.vector-search-box .suggestions {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .vector-sticky-header: Sticky header surface and separation border. */
.vector-sticky-header {
background-color: @purp-bg1;
border-bottom: 1px solid @purp-border1;
}
 
/* .mw-jump-link: Jump link container text (skip-to-content links). */
.mw-jump-link {
color: @purp-text2;
}
 
/* .mw-jump-link a: Jump link styling. */
.mw-jump-link a {
color: @purp-link0;
text-decoration: none;
}
 
/* .mw-jump-link a:hover/:focus: Hover/focus state for jump links. */
.mw-jump-link a:hover,
.mw-jump-link a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/*------------------------------------------  MEDIAWIKI UI (OOUI / MW-UI)  ------------------------------------------*/
/* .mw-ui-button: Generic button styling used across Special pages. */
.mw-ui-button {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .mw-ui-button:hover/:focus: Hover/focus state for MW-UI buttons. */
.mw-ui-button:hover,
.mw-ui-button:focus {
background-color: @purp-surface1;
border-color: @purp-link0;
}
 
/* .mw-ui-button:active: Active/pressed state for MW-UI buttons. */
.mw-ui-button:active {
background-color: @purp-bg1;
border-color: @purp-link1;
}
 
/* .oo-ui-icon-expand, .oo-ui-icon-collapse (and MW equivalents): Makes monochrome icons readable on dark surfaces. */
.oo-ui-icon-expand,
.mw-ui-icon-expand::before,
.oo-ui-icon-collapse,
.mw-ui-icon-collapse::before {
filter: invert( 100% );
}
 
/* a#mw-createaccount-join: Removes default highlight styling that clashes with the dark theme. */
a#mw-createaccount-join {
box-shadow: none;
}
 
/* .mw-ui-vform labels and number widgets: Improves contrast for form text on account-related Special pages. */
.mw-ui-vform > div label,
div.mw-number-text {
color: @purp-text1;
}
 
/* div.mw-number-text h3: Emphasized headings inside form helper widgets. */
div.mw-number-text h3 {
color: @purp-text0;
}
 
/* .mw-createacct-benefits-container h3: Forces readable headings in the account benefits panel. */
.mw-createacct-benefits-container h3 {
color: @purp-text1 !important;
}
 
/*------------------------------------------  THEME UTILITIES  ------------------------------------------*/
/* .gradient: Reusable button-like gradient background. */
.gradient {
background-image: -webkit-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: -moz-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: -ms-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: -o-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
}
 
/* .gradient:hover: Hover gradient for interactive elements. */
.gradient:hover {
background-image: -webkit-linear-gradient( top, @purp-grad-hover-top, @purp-grad-bottom );
background-image: -moz-linear-gradient( top, @purp-grad-hover-top, @purp-grad-bottom );
background-image: -ms-linear-gradient( top, @purp-grad-hover-top, @purp-grad-bottom );
background-image: -o-linear-gradient( top, @purp-grad-hover-top, @purp-grad-bottom );
background-image: linear-gradient( top, @purp-grad-hover-top, @purp-grad-bottom );
}
 
/* .rgradient: Reusable reverse gradient for "pressed" or alternate direction styles. */
.rgradient {
background-image: -webkit-linear-gradient( bottom, @purp-grad-top, @purp-grad-bottom );
background-image: -moz-linear-gradient( bottom, @purp-grad-top, @purp-grad-bottom );
background-image: -ms-linear-gradient( bottom, @purp-grad-top, @purp-grad-bottom );
background-image: -o-linear-gradient( bottom, @purp-grad-top, @purp-grad-bottom );
background-image: linear-gradient( bottom, @purp-grad-top, @purp-grad-bottom );
}
 
/* .rgradient:hover: Hover state for reverse gradients. */
.rgradient:hover {
background-image: -webkit-linear-gradient( bottom, @purp-grad-hover-top, @purp-grad-bottom );
background-image: -moz-linear-gradient( bottom, @purp-grad-hover-top, @purp-grad-bottom );
background-image: -ms-linear-gradient( bottom, @purp-grad-hover-top, @purp-grad-bottom );
background-image: -o-linear-gradient( bottom, @purp-grad-hover-top, @purp-grad-bottom );
background-image: linear-gradient( bottom, @purp-grad-hover-top, @purp-grad-bottom );
}
 
/* .tabcontainer .tab: Optional custom tab styling that matches the purple theme. */
.tabcontainer .tab {
background-color: @purp-surface0;
background-image: -webkit-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: -moz-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: -ms-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: -o-linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
background-image: linear-gradient( top, @purp-grad-top, @purp-grad-bottom );
border: 2px solid @purp-border1;
cursor: pointer;
float: left;
margin: 0 1px -2px;
padding: 3px;
text-align: center;
white-space: nowrap;
}
 
/* .tabcontainer .tab:hover: Hover styling for custom tabs. */
.tabcontainer .tab:hover {
background-color: @purp-surface1;
background-image: -webkit-linear-gradient( top, @purp-grad-hover-top, @purp-grad-hover-bottom );
background-image: -moz-linear-gradient( top, @purp-grad-hover-top, @purp-grad-hover-bottom );
background-image: -ms-linear-gradient( top, @purp-grad-hover-top, @purp-grad-hover-bottom );
background-image: -o-linear-gradient( top, @purp-grad-hover-top, @purp-grad-hover-bottom );
background-image: linear-gradient( top, @purp-grad-hover-top, @purp-grad-hover-bottom );
color: @purp-link2;
}
 
/* .tabcontainer .tab.active: Active tab styling for custom tab widgets. */
.tabcontainer .tab.active {
background-color: @purp-bg1 !important;
background-image: -webkit-linear-gradient( top, @purp-surface0, @purp-bg1 );
background-image: -moz-linear-gradient( top, @purp-surface0, @purp-bg1 );
background-image: -ms-linear-gradient( top, @purp-surface0, @purp-bg1 );
background-image: -o-linear-gradient( top, @purp-surface0, @purp-bg1 );
background-image: linear-gradient( top, @purp-surface0, @purp-bg1 );
border-bottom: 2px solid @purp-bg1;
color: @purp-link2;
}
 
/* .mw-ui-button:disabled/[disabled]: Disabled state for MW-UI buttons. */
.mw-ui-button:disabled,
.mw-ui-button[disabled] {
background-color: @purp-bg1;
border-color: @purp-muted-border;
color: @purp-text2;
}
 
/* .mw-ui-input: MW-UI input field styling. */
.mw-ui-input {
background-color: @purp-bg1;
border: 1px solid @purp-border1;
color: @purp-text0;
}
 
/* .mw-ui-input:focus: Focus border for MW-UI inputs. */
.mw-ui-input:focus {
border-color: @purp-link0;
}
 
/* .mw-ui-icon: MW-UI icon contrast for dark theme. */
.mw-ui-icon {
filter: invert( 100% );
}
 
/* .mw-ui-icon-element: MW-UI icon element contrast. */
.mw-ui-icon-element {
filter: invert( 100% );
}
 
/* .mw-ui-icon-before:before: Pseudo-element icon contrast. */
.mw-ui-icon-before:before {
filter: invert( 100% );
}
 
/* .mw-ui-icon-after:after: Pseudo-element icon contrast. */
.mw-ui-icon-after:after {
filter: invert( 100% );
}
 
/* #mw-pt-login: Personal tools login entry in some skins/versions. */
#mw-pt-login {
color: @purp-text1;
}
 
/* #mw-pt-logout: Personal tools logout entry in some skins/versions. */
#mw-pt-logout {
color: @purp-text1;
}
 
/* .mw-specialpages-table: Table styling used on Special:SpecialPages. */
.mw-specialpages-table {
color: @purp-text1;
border: 1px solid @purp-border1;
}
 
/* .mw-specialpages-table th/td: Cell borders and surface inside Special pages table. */
.mw-specialpages-table th,
.mw-specialpages-table td {
border: 1px solid @purp-border1;
background-color: @purp-bg1;
}
 
/* .mw-content-text .mw-parser-output: Parser output root within `.mw-content-text`. */
.mw-content-text .mw-parser-output {
color: @purp-text1;
}
 
/* .mw-content-text .mw-parser-output > h2–h4: Heading colors inside parser output. */
.mw-content-text .mw-parser-output > h2,
.mw-content-text .mw-parser-output > h3,
.mw-content-text .mw-parser-output > h4 {
color: @purp-text1;
}
 
/* .mw-content-text .mw-parser-output > h2–h4 .mw-headline: Headline spans inside headings. */
.mw-content-text .mw-parser-output > h2 .mw-headline,
.mw-content-text .mw-parser-output > h3 .mw-headline,
.mw-content-text .mw-parser-output > h4 .mw-headline {
color: @purp-text1;
}
 
/* .mw-content-text .mw-parser-output > h2–h4 .mw-editsection: Edit section links inside headings. */
.mw-content-text .mw-parser-output > h2 .mw-editsection,
.mw-content-text .mw-parser-output > h3 .mw-editsection,
.mw-content-text .mw-parser-output > h4 .mw-editsection {
color: @purp-link0;
}
 
/* .skin-vector/.skin-vector-legacy .mw-notification: Notification background for Vector skins. */
.skin-vector .mw-notification,
.skin-vector-legacy .mw-notification {
background-color: @purp-notification-bg;
background-color: @purp-notification-bg-rgba;
}
 
/* .skin-vector .mw-notification: Selector alias for older tooling and rule audits. */
.skin-vector .mw-notification {
background-color: @purp-notification-bg;
background-color: @purp-notification-bg-rgba;
}
 
/* .mw-notification-content: Notification text color. */
.mw-notification-content {
color: @purp-text1;
}
 
/* .mw-warning: Warning message box styling. */
.mw-warning {
border: 1px solid @purp-border1;
background-color: @purp-surface0;
color: @purp-text1;
}
 
/* .toccolours: Legacy TOC color box used by some templates/extensions. */
.toccolours {
border: 1px solid @purp-surface0;
background-color: @purp-border1;
color: @purp-text1;
}
 
/* .toctogglelabel: TOC toggle label link color. */
.toctogglelabel {
color: @purp-link0;
}
 
/* .usermessage: User message banner styling. */
.usermessage {
background-color: @purp-surface0;
border: 1px solid @purp-border0;
color: @purp-text1;
}
 
/*------------------------------------------  SEARCH PAGES  ------------------------------------------*/
/* fieldset#mw-searchoptions: Advanced search options container. */
fieldset#mw-searchoptions {
border: 1px solid @purp-border1;
background-color: @purp-bg1;
color: @purp-text1;
}
 
/* fieldset#mw-searchoptions div.divider: Divider line inside search options. */
fieldset#mw-searchoptions div.divider {
border-color: @purp-border1;
}
 
/* .mw-search-formheader: Search page header container. */
.mw-search-formheader {
background-color: @purp-bg1;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .mw-search-formheader ... li.current a: Active search type/tab link. */
.mw-search-formheader div.search-types ul li.current a {
color: @purp-text1;
text-decoration: none;
background-color: @purp-bg2;
}
 
/* .mw-search-result-data: Result metadata text in search results. */
.mw-search-result-data {
color: @purp-text2;
}
 
/*------------------------------------------  EXTENSIONS & SPECIAL PAGES  ------------------------------------------*/
/* #filetoc: File page table-of-contents container for file history/details. */
#filetoc {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* #file img:hover: Highlights the current file preview on hover. */
#file img:hover {
outline: 2px solid @purp-border0;
}
 
/* .fullMedia: Container that wraps the "full resolution" media link on file pages. */
.fullMedia {
color: @purp-text1;
}
 
/* .mw-changeslist-legend: Legend box used on changes lists and watchlists. */
.mw-changeslist-legend {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .oo-ui-labelWidget.oo-ui-inline-help: Inline help text in OOUI forms. */
.oo-ui-labelWidget.oo-ui-inline-help {
color: @purp-text2;
}
 
/* .TablePager: Generic paginated table wrapper used by many Special pages. */
.TablePager {
color: @purp-text1;
}
 
/* .TablePager th, .TablePager td: Cell borders and readable text in paginated tables. */
.TablePager th,
.TablePager td {
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .TablePager th: Selector alias for older tooling and rule audits. */
.TablePager th {
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .TablePager tr:hover td: Hover highlight for table rows. */
.TablePager tr:hover td {
background-color: @purp-surface0;
}
 
/* .TablePager_nav a: Pagination navigation links. */
.TablePager_nav a {
color: @purp-link0;
text-decoration: none;
}
 
/* .TablePager_nav a:hover/:focus: Hover/focus state for pagination navigation links. */
.TablePager_nav a:hover,
.TablePager_nav a:focus {
color: @purp-link2;
text-decoration: underline;
}
 
/* .imagelist ...: Special:Imagelist tweaks for sortable columns and link areas. */
.imagelist th.TablePager_sort {
background-color: @purp-surface0;
}
 
/* .imagelist .TablePager_col_links: Link column styling in Special:Imagelist tables. */
.imagelist .TablePager_col_links {
color: @purp-link0;
}
 
/* div.thumb, div.thumbinner: Thumbnail frame backgrounds for legacy thumbnail markup. */
div.thumb,
div.thumbinner {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* div.thumb: Selector alias for older tooling and rule audits. */
div.thumb {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* html .thumbimage: Thumbnail image border for legacy markup. */
html .thumbimage {
border: 1px solid @purp-border1;
}
 
/* li.gallerybox div.thumb: Gallery thumbnails for `<gallery>` output. */
li.gallerybox div.thumb {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
}
 
/* table.mw_metadata: Metadata tables on file pages. */
table.mw_metadata th,
table.mw_metadata td {
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* table.mw_metadata th: Selector alias for older tooling and rule audits. */
table.mw_metadata th {
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* table.prettytable: Common wiki table class used for structured data. */
table.prettytable {
color: @purp-text1;
background-color: @purp-bg1;
}
 
/* table.prettytable caption: Prettytable caption text. */
table.prettytable caption {
color: @purp-text1;
}
 
/* table.prettytable th/td: Cell borders and text in prettytable. */
table.prettytable th,
table.prettytable td {
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* table.prettytable th: Selector alias for older tooling and rule audits. */
table.prettytable th {
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* table.wikitable ...: Wikitable borders and inline code readability. */
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
border: 1px solid @purp-border1;
}
 
/* table.wikitable > * > tr > th: Selector alias for older tooling and rule audits. */
table.wikitable > * > tr > th {
border: 1px solid @purp-border1;
}
 
/* table.wikitable code: Inline code styling inside wikitables. */
table.wikitable code {
background-color: @purp-surface1;
color: @purp-text1;
}
 
/* fieldset table: Table borders inside fieldsets (common on Special pages). */
fieldset table {
border-color: @purp-border1;
}
 
/* .tocnumber: Fallback TOC number color for markup variants. */
.tocnumber {
color: @purp-link0;
}
 
/* .RSSReader-head: Header bar used by some RSS reader extensions. */
.RSSReader-head {
background-color: @purp-surface0;
border: 1px solid @purp-border1;
color: @purp-text1;
}
 
/* .profile-info: Profile header/info blocks used by social/profile extensions. */
.profile-info {
background-color: transparent !important;
color: @purp-text1;
}
 
/* div.c-form-title: Title text inside some comment form extensions. */
div.c-form-title {
color: @purp-text1;
}
 
/* div.fanbox-nav h2: Heading used by fanbox/userbox navigation. */
div.fanbox-nav h2 {
color: @purp-text1;
}
 
/* div.link-item-desc, .link-submit-title: Text blocks used by link submission/listing extensions. */
div.link-item-desc,
.link-submit-title {
color: @purp-text1;
}
 
/* div.link-item-desc: Selector alias for older tooling and rule audits. */
div.link-item-desc {
color: @purp-text1;
}
 
/* div.top-fan-nav h1: Heading used by some leaderboard/top-users extensions. */
div.top-fan-nav h1 {
color: @purp-text1;
}
 
/* div.user-board-message-from: Message header separator in user board extensions. */
div.user-board-message-from {
background-color: transparent;
border-bottom: 1px solid @purp-text1;
}
 
/* div.user-home-links-container h2: Heading used by user activity/home extensions. */
div.user-home-links-container h2 {
color: @purp-text1;
}
 
/* div.view-poll-* : Poll extension headings and user name text. */
div.view-poll-navigation h2 {
color: @purp-text1;
}
 
/* div.view-poll-user-name: Username text in poll views. */
div.view-poll-user-name {
color: @purp-link0;
}
 
/*------------------------------------------  DIFF RENDERING  ------------------------------------------*/
table.diff,
td.diff-otitle,
td.diff-ntitle {
background-color: transparent;
}
 
/* td.diff-addedline/deletedline/context: Diff body line sizing. */
td.diff-addedline,
td.diff-deletedline,
td.diff-context {
font-size: 90%;
}
 
/* td.diff-addedline: Added line background and border. */
td.diff-addedline {
background-color: @purp-diff-bg;
border-color: @purp-diff-added;
}
}


/* td.diff-deletedline: Deleted line background and border. */
/* Pulse animation for attention */
td.diff-deletedline {
@keyframes btt-pulse {
background-color: @purp-diff-bg;
  0% {
border-color: @purp-diff-deleted;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(102, 126, 234, 0.5);
  }
  100% {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  }
}
}


/* td.diff-context: Context line background, border, and text color. */
/* Apply pulse animation when first shown */
td.diff-context {
.btt-button.pulse {
background-color: transparent;
  animation: btt-pulse 2s ease-in-out 3;
border-color: @purp-text2;
color: @purp-text1;
}
}


/* td.diff-addedline/.diff-deletedline .diffchange: Change marker pill styling in diff lines. */
/* Responsive design */
td.diff-addedline .diffchange,
@media (max-width: 768px) {
td.diff-deletedline .diffchange {
  .btt-button {
border-radius: 0.33em;
    bottom: 20px;
color: @purp-bg0;
    right: 20px;
padding: 0.25em;
    width: 45px;
    height: 45px;
  }
 
  .btt-button::before {
    border-left-width: 7px;
    border-right-width: 7px;
    border-bottom-width: 10px;
  }
}
}


/* td.diff-addedline .diffchange: Added change marker background. */
@media (max-width: 480px) {
td.diff-addedline .diffchange {
  .btt-button {
background-color: @purp-diff-added;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
 
  .btt-button::before {
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 9px;
  }
}
}


/* td.diff-deletedline .diffchange: Deleted change marker background. */
/* Dark theme support */
td.diff-deletedline .diffchange {
@media (prefers-color-scheme: dark) {
background-color: @purp-diff-deleted;
  .btt-button {
    background: linear-gradient(135deg, #4c63d2 0%, #5a4fcf 100%);
    box-shadow: 0 4px 20px rgba(76, 99, 210, 0.4);
  }
 
  .btt-button:hover {
    background: linear-gradient(135deg, #5a4fcf 0%, #4c63d2 100%);
    box-shadow: 0 8px 30px rgba(76, 99, 210, 0.5);
  }
}
}


/* .mw-plusminus-pos: Positive diff size indicator text. */
/* High contrast mode support */
.mw-plusminus-pos {
@media (prefers-contrast: high) {
color: @purp-diff-added;
  .btt-button {
    background: #000000;
    border: 2px solid #ffffff;
  }
 
  .btt-button::before {
    border-bottom-color: #ffffff;
  }
 
  .btt-button:hover {
    background: #333333;
  }
}
}


/* .mw-plusminus-neg, .previewnote: Negative diff indicator and preview note text. */
/* Reduced motion support */
.mw-plusminus-neg,
@media (prefers-reduced-motion: reduce) {
.previewnote {
  .btt-button {
color: @purp-diff-deleted;
    transition: opacity 0.3s ease;
  }
 
  .btt-button:hover {
    transform: none;
  }
 
  .btt-button::before {
    transition: none;
  }
 
  .btt-button:hover::before {
    transform: none;
  }
 
  .btt-button.pulse {
    animation: none;
  }
}
}

Revision as of 06:40, 21 December 2025

/* ========================================
   CORA TO WIKI - VECTOR LEGACY SPECIFIC STYLES
   Styles specific to Vector Legacy 2010 skin
   ======================================== */

/* NAVIGATION MENU - TABLE OF CONTENTS
   ----------------------------------------
   SECTION 1: VARIABLES [search: variables, colors, spacing, css-vars]
   SECTION 2: SIDEBAR STYLES [search: sidebar, mw-panel, navigation]
   SECTION 3: LOGO AREA [search: logo, p-logo, wiki-logo]
   SECTION 4: PORTALS [search: portals, vector-menu-portal]
   SECTION 5: HEADINGS [search: headings, collapsible, vector-menu-heading]
   SECTION 6: INDICATORS [search: indicators, open-close, arrows]
   SECTION 7: LISTS & CONTENT [search: lists, collapsible-content, menu-items]
   SECTION 8: SCROLLBAR [search: scrollbar, webkit-scrollbar]
   SECTION 9: CONTENT SPACING [search: spacing, margins, desktop]
   SECTION 10: RESPONSIVENESS [search: responsive, media-queries, mobile]
   SECTION 11: MOBILE MENU [search: hamburger, mobile-menu, sidebar-mobile]
   SECTION 12: HEADER TABS [search: header, tabs, vector-tabs]
   SECTION 13: USER MENU [search: user-menu, personal-menu, account]
   ---------------------------------------- */






/* ==========================================================================
   SECTION 2: VECTOR LEGACY SIDEBAR STYLES [sidebar, mw-panel, navigation]
   ========================================================================== */

/* [MEDIAWIKI] COMPATIBILITY LAYER
   ======================================== */
.mw-page-scope { 
  padding: 20px;
}



#mw-head { 
  padding: 20px 0; 
  border-bottom: 2px solid #ff8fcf; 
  background-color: rgba(255, 255, 255, 0.932);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);   
}

.utility-banner {
  position: relative;
  min-height: 48px;
  padding: clamp(18px, 3vw, 36px);
}

.utility-banner > * {
  position: absolute;
  top: 0;
  right: 8px;
}

/* MediaWiki Main Content */
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
  border: 1px solid #f0f0f0 !important;
  border-radius: 12px !important;
  margin: 24px 24px 0 !important;
  box-shadow: 0 0px 20px rgb(253, 91, 205) !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255, 205, 233, 0));
 
}

#content::before,
.mw-body::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%) !important;
  border-radius: 12px !important;
  z-index: -1 !important;
  opacity: 0.1 !important;
 
}




body.skin-vector-legacy #mw-panel {
  background: rgba(255, 255, 255, 0.8);
  border-right: 2px solid rgba(255, 107, 157, 0.25);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  padding: 18px 0;
  border-radius: 14px;
  transform: translateX(-100%);
  transition: transform .3s ease;
  position: fixed;
  z-index: 1000;
  height: 100vh;
  width: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Header top-right Menu */
body.skin-vector-legacy 
#pt-userpage a,
#pt-mytalk a,
#pt-preferences a,
#pt-watchlist a,
#pt-mycontris a,
#pt-logout a {
  color: #ff73a9 !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border-left: 3px solid transparent !important;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease !important;
}
body.skin-vector-legacy 
#pt-userpage a:hover,
#pt-mytalk a:hover,
#pt-preferences a:hover,
#pt-watchlist a:hover,
#pt-mycontris a:hover,
#pt-logout a:hover {

  color: #fff !important;
  background-color: #ff6b9d !important;
  border-color: #ff6b9d !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  border-left: 3px solid transparent !important;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease !important;
}

/* ==========================================================================
   SECTION 3: LOGO AREA [logo, p-logo, wiki-logo]
   ========================================================================== */
body.skin-vector-legacy #p-logo { margin: 0 12px 18px; }
body.skin-vector-legacy #p-logo a {
  display: block;
  background-color: #fff0f7;
  border: 1px solid #f7d6e6;
  border-radius: 14px;
  padding: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.skin-vector-legacy #p-logo a:hover {
  transform: translateY(-2px);
  border-color: #ff6b9d;
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.18);
}

/* ==========================================================================
   SECTION 4: PORTALS [portals, vector-menu-portal]
   ========================================================================== */
body.skin-vector-legacy #mw-panel .vector-menu-portal,
body.skin-vector-legacy #mw-panel .portal {
  margin: 1px;
  border: 1px solid #f7d6e6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* ==========================================================================
   SECTION 5: HEADINGS [headings, collapsible, vector-menu-heading]
   ========================================================================== */
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
body.skin-vector-legacy #mw-panel .portal h3 {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff6b9d, #ff8fb0);
  border-bottom: 1px solid #f7d6e6;
  text-shadow: 0 1px 2px rgb(0, 0, 0) !important;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
body.skin-vector-legacy #mw-panel .portal h3:hover {
  background: linear-gradient(135deg, #ff8fb0, #ff6b9d);
  transform: translateY(-1px);
}

/* ==========================================================================
   SECTION 6: INDICATORS [indicators, open-close, arrows]
   ========================================================================== */
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading::after,
body.skin-vector-legacy #mw-panel .portal h3::after {
  content: '▼';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  transition: transform 0.3s ease;
}
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-heading::after,
body.skin-vector-legacy #mw-panel .portal.collapsed h3::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* ==========================================================================
   SECTION 7: LISTS & CONTENT [lists, collapsible-content, menu-items]
   ========================================================================== */
body.skin-vector-legacy #mw-panel .vector-menu-content ul,
body.skin-vector-legacy #mw-panel .portal .body ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff
}

body.skin-vector-legacy #mw-panel .vector-menu-content,
body.skin-vector-legacy #mw-panel .portal .body {
  max-height: none;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 1;
}

/* Collapsed state */
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-content,
body.skin-vector-legacy #mw-panel .portal.collapsed .body {
  max-height: 0 !important;
  opacity: 0;
  padding: 0;
}
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed,
body.skin-vector-legacy #mw-panel .portal.collapsed { margin-bottom: 8px; }
body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-heading,
body.skin-vector-legacy #mw-panel .portal.collapsed h3 {
  border-bottom: none;
  border-radius: 14px;
}

/* Items and links */
body.skin-vector-legacy #mw-panel .vector-menu-content li,
body.skin-vector-legacy #mw-panel .portal .body li { border-bottom: 1px solid #f3e2ea; }
body.skin-vector-legacy #mw-panel .vector-menu-content li:last-child,
body.skin-vector-legacy #mw-panel .portal .body li:last-child { border-bottom: 0; }

body.skin-vector-legacy #mw-panel .vector-menu-content a,
body.skin-vector-legacy #mw-panel .portal .body a {
  color: #ff6b9d;
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease;
}
body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
body.skin-vector-legacy #mw-panel .portal .body a:hover {
  
  color: #fa4abf ;
  background: #fff5fb;
  border-left-color: #ff6b9d;
  padding-left: 18px;
}

/* ==========================================================================
   SECTION 8: SCROLLBAR [scrollbar, webkit-scrollbar]
   ========================================================================== */
body.skin-vector-legacy #mw-panel::-webkit-scrollbar { width: 6px; }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-track { background: #ffe6f0; }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb { background: #ff8fb0; border-radius: 3px; }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb:hover { background: #ff6b9d; }

/* ==========================================================================
   SECTION 9: CONTENT SPACING [spacing, margins, desktop]
   ========================================================================== */
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
  margin-left: 0;
}

/* Show sidebar only when mobile-open class is present */
body.skin-vector-legacy #mw-panel.mobile-open {
  transform: translateX(0);
}

/* Add overlay when sidebar is open */
body.sidebar-open::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 1;
  transition: opacity .3s ease;
}

/* ==========================================================================
   SECTION 11: MOBILE MENU [hamburger, mobile-menu, sidebar-mobile]
   ========================================================================== */
.mobile-hamburger-menu {
  display: flex;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1002;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ff6b9d, #ff8fb0);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  transition: transform .3s ease, box-shadow .3s ease;
  padding: 0;
}
.mobile-hamburger-menu:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3);
}
.mobile-hamburger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}
.mobile-hamburger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.mobile-hamburger-menu.active span:nth-child(2) { opacity: 0; }
.mobile-hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

@media (max-width: 768px) {

}

/* Sidebar peek tab with image (Vector Legacy only) */
body.skin-vector-legacy #p-logo { 
  position: absolute; 
  top: 12px; 
  left: calc(100% + 12px); 
  margin: 0; 
  z-index: 1001; 
}

body.skin-vector-legacy #p-logo a {
  width: 56px; 
  height: 56px; 
  padding: 0; 
  display: block;
  border-radius: 10px;
  background-color: #fff0f7;
  background-repeat: no-repeat; 
  background-position: center; 
  background-size: contain;
  border: 1px solid #f7d6e6;
  box-shadow: 0 8px 20px rgba(255, 107, 157, 0.22);
}

/* When sidebar is opened, return the logo to the panel */
body.skin-vector-legacy #mw-panel.mobile-open #p-logo {
  position: relative; 
  left: auto; 
  top: auto;
  margin: 0 12px 18px;
}

body.skin-vector-legacy #mw-panel.mobile-open #p-logo a {
  width: auto; 
  height: auto; 
  padding: 12px;
  background-size: contain;
}

/* High contrast fallback */
@media (prefers-contrast: more) {
  body.skin-vector-legacy #mw-panel .vector-menu-content a:hover { text-decoration: underline; }
}

/* ==========================================================================
   SECTION 12: HEADER TABS [header, tabs, vector-tabs]
   ========================================================================== */
#p-views{
 background: none !important;
}

/* ------------------------------------ [FORMS] FORM ELEMENTS ------------------------------------ */
#searchInput,
Input::placeholder{
 color: #ff6b9d; 
 border-color: rgba(255, 107, 157, 0.22) !important;
  
}

input[type="text"],
input[type="search"],
textarea,
select {
  border: 2px solid #f0f0f0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: inherit !important;
  transition: 0.15s ease !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: #ff6b9d !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2) !important;
}

/*------------------------------------ Base styling for all buttons ------------------------------------ */
#ca-view a,
#ca-viewsource a,
#ca-ve-edit a,
#ca-edit a,
#ca-history a,
#p-cactions .vector-menu-heading ,
#ca-delete a,
#ca-move a,
#ca-protect a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  margin: 4px 6px 0 0 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.92) !important;
  color: #ff6b9d !important;
  border: 2px solid transparent !important;
  border-color: rgba(255, 107, 157, 0.22) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
}

/*------------------------------------ Hide text while keeping link clickable ------------------------------------ */
#ca-watch a,
#ca-unwatch a {
  font-size: 0;        /* esconde o texto sem sumir com o botão */
  width: 24px;         /* largura do botão */
  height: 24px;        /* altura do botão */
  padding: 0;          /* remove padding extra */
  border-radius: 50%;  /* deixa redondo  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Empty Star Icon */
#ca-watch a {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("https://mewsie.world/CoraTOWiki/images/2/28/EmptyPinkStar.png");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 10px !important;
}

/* Full Star Icon  */
#ca-unwatch a {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("https://mewsie.world/CoraTOWiki/images/c/cc/FullPinkStar.png");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 10px !important;
}

/*------------------------------------ Hover ------------------------------------*/
#ca-view a:hover,
#ca-viewsource a:hover,
#ca-edit a:hover,
#ca-history a:hover,
#ca-watch a:hover,
#ca-unwatch a:hover,
#p-cactions .vector-menu-heading:hover,
#ca-delete a:hover,
#ca-move a:hover,
#ca-protect a:hover {
  transform: translateY(-2px) !important;
  color: #d63384 !important;
  border-color: #ff6b9d !important;
  box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3) !important;
}


/*------------------------------------ Active button styling ------------------------------------ */
#ca-view.selected a,
#ca-viewsource.selected a,
#ca-edit.selected a,
#ca-ve-edit.selected a,
#ca-history.selected a,
#ca-watch.selected a,
#ca-unwatch.selected a,
#ca-more.selected a {
  background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3) !important;
}

/*------------------------------------ Remove mw Buttons ------------------------------------ */
#pt-anontalk,
#p-namespaces,
#pt-anoncontribs,
#ca-talk,
#ca-nstab-main,
#ca-nstab-mediawiki {
  display: none !important;
}

/* ------------------------------------ Remove mw header LI background and border ------------------------------------ */
#ca-talk,
#ca-nstab-main,
#ca-nstab-mediawiki,
#ca-view,
#ca-viewsource,
#ca-edit,
#ca-ve-edit,
#ca-history,
#ca-watch,
#ca-unwatch,
#ca-more,
#mw-page-base {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 4px !important; /* espaço entre os botões */
  box-shadow: none !important;
}

----------------------
/* Container style */
body.skin-vector-legacy #p-personal {
  position: relative;
  max-width: 220px;
  font-family: sans-serif;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255, 107, 157, 0.25);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  padding: 10px;
}

/* User Menu Collapsible Styles */
body.skin-vector-legacy .user-menu-container {
  position: fixed;
  top: 120px;
  right: 0;
  background: transparent;
  z-index: 1000;
  overflow: visible;
  display: flex;
  flex-direction: row;
}

/* ==========================================================================
   SECTION 13: USER MENU [user-menu, personal-menu, account]
   ========================================================================== */
body.skin-vector-legacy .user-menu-header {
   display: flex;
  align-items: center;
  padding: 6px 12px ;
  top: 2;               
  right: 0; 
  position: fixed;
  color: #ff6b9d;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
  border-radius: 14px 0 0 14px;
  white-space: nowrap;
  font-weight: bold;
  height: auto;
  writing-mode: horizontal-tb;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  border: 1px solid rgba(255, 107, 157, 0.25);
  flex-direction: row;
}

body.skin-vector-legacy .user-menu-header:hover {
  background: #ffebf5;
}

body.skin-vector-legacy .user-menu-header::after {
  content: "";
  display: inline-block; 
  width: 25px;           
  height: 25px;          
  font-weight: bold;
  background-image: url("https://mewsie.world/CoraTOWiki/images/9/97/LeftArrow.png");
  background-size: contain;  
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  margin-left: 6px;
  transition: transform 0.3s ease;
}

body.skin-vector-legacy .user-menu-container.expanded .user-menu-header::after {
  transform: rotate(180deg);
}

body.skin-vector-legacy .user-menu-content {
  position: absolute;
  top: 0;
  right: 100%;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255, 107, 157, 0.25);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  padding: 10px;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 0.4s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
}

body.skin-vector-legacy .user-menu-container.expanded .user-menu-content {
  width: 180px;
  opacity: 1;
}

body.skin-vector-legacy .user-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.skin-vector-legacy .user-menu-list li {
  margin: 5px 0;
  white-space: nowrap;
  border-bottom: 1px solid #f3e2ea;
}

body.skin-vector-legacy .user-menu-list li:last-child {
  border-bottom: none;
}

body.skin-vector-legacy .user-menu-list a {
  display: block;
  color: #ff6b9d;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
}

body.skin-vector-legacy .user-menu-list a:hover {
  background: #fff5fb;
  color: #fa4abf;
  padding-left: 18px;
  border-left-color: #ff6b9d;
}

/* Adjust the position of menu items in the vertical menu */
body.skin-vector-legacy .user-menu-content li {
  margin: 5px 0;
  white-space: nowrap;
}

/* Item styles */
body.skin-vector-legacy #p-personal li {
  margin: 4px 0;
  border-bottom: 1px solid #f3e2ea;
}

body.skin-vector-legacy #p-personal li:last-child {
  border-bottom: none;
}

/* Link styles */
body.skin-vector-legacy #p-personal a {
  display: block;
  color: #ff6b9d;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
}

body.skin-vector-legacy #p-personal a:hover {
  background: #fff5fb;
  color: #fa4abf;
  padding-left: 18px;
  border-left-color: #ff6b9d;
}

/*------------------------------------BtT---------------------------------*/

/* Back to Top Button Styles */
.btt-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  backdrop-filter: blur(10px);
}

/* Show state */
.btt-button.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover effects */
.btt-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Active state */
.btt-button:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}

/* Arrow icon */
.btt-button::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #ffffff;
  transition: all 0.3s ease;
}

/* Arrow animation on hover */
.btt-button:hover::before {
  transform: translateY(-2px);
  border-bottom-color: #f8f9ff;
}

/* THEME TOGGLE (top-right) */
#pt-theme-toggle a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #ff6b9d;
  border: 1px solid rgba(255, 107, 157, 0.25);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
  transition: transform .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
#pt-theme-toggle a:hover { transform: translateY(-2px) }
#pt-theme-toggle a.pressed { transform: scale(.95) }
#pt-theme-toggle .theme-toggle-icon { line-height: 0; display: inline-flex }

/* DARK THEME OVERRIDES (Vector Legacy) */
html[data-theme="dark"] body.skin-vector-legacy #mw-head {
  background-color: #121a29;
  border-bottom-color: rgba(159,208,255,.2);
  border-color: rgba(159,208,255,.2);
}
html[data-theme="dark"] body.skin-vector-legacy #content,
html[data-theme="dark"] body.skin-vector-legacy .mw-body {
  border-color: rgba(159,208,255,.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(12,18,30,.55) !important;
  background: linear-gradient(to bottom, rgba(20,26,38,.92), rgba(20,26,38,.6)) !important;
  color: #cfe6ff !important;
}
html[data-theme="dark"] body.skin-vector-legacy #content::before,
html[data-theme="dark"] body.skin-vector-legacy .mw-body::before {
  background: linear-gradient(135deg, #274c77, #1b2b41) !important;
  opacity: .12 !important;
}
html[data-theme="dark"] #mw-page-base,
html[data-theme="dark"] #mw-head-base {
  background: #101625 !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel {
  background: rgba(16,22,32,.95);
  border-right-color: rgba(159,208,255,.25);
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .mw-portlet {
  background: #141c2a !important;
  border: 1px solid rgba(159,208,255,.2) !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal {
  background: #141c2a;
  border-color: rgba(159,208,255,.2);
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content ul,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body ul {
  background: #141c2a !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body {
  background: #141c2a !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content li {
  background: #0f1422 !important;
  border-bottom-color: rgba(159,208,255,.15) !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal h3 {
  color: #cfe6ff !important;
  background: linear-gradient(135deg, #274c77, #1b2b41);
  text-shadow: none !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal h3:hover {
  background: linear-gradient(135deg, #1b2b41, #274c77);
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a {
  color: #9fd0ff !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a:hover {
  background: rgba(61,97,146,.22) !important;
  color: #cfe6ff !important;
  border-left-color: #7bbbff !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a,
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a {
  background: #0f1422 !important;
  border: 1px solid rgba(159,208,255,.25) !important;
  box-shadow: 0 2px 6px rgba(12,18,30,.5) !important;
}
html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body li {
  border-bottom-color: rgba(159,208,255,.15);
}

/* Top-right personal menu links (Vector) */
html[data-theme="dark"] body.skin-vector-legacy 
#pt-userpage a,
#pt-mytalk a,
#pt-preferences a,
#pt-watchlist a,
#pt-mycontris a,
#pt-logout a { color: #9fd0ff !important }
html[data-theme="dark"] body.skin-vector-legacy 
#pt-userpage a:hover,
#pt-mytalk a:hover,
#pt-preferences a:hover,
#pt-watchlist a:hover,
#pt-mycontris a:hover,
#pt-logout a:hover { background: rgba(61,97,146,.22) !important; color: #cfe6ff !important; border-color: #7bbbff !important }
html[data-theme="dark"] body.skin-vector-legacy #p-personal {
  background: #141c2a;
  border-color: rgba(159,208,255,.2);
}
html[data-theme="dark"] body.skin-vector-legacy #p-personal a {
  color: #9fd0ff;
}
html[data-theme="dark"] body.skin-vector-legacy #p-personal a:hover {
  background: rgba(61,97,146,.22);
  color: #cfe6ff;
  border-left-color: #7bbbff;
}
html[data-theme="dark"] #pt-theme-toggle a {
  background: #1a2332;
  color: #9fd0ff;
  border-color: rgba(159,208,255,.3);
}
html[data-theme="dark"] .user-menu-container {
  background: transparent;
}
html[data-theme="dark"] .user-menu-header {
  color: #9fd0ff;
  background: #1a2332;
  border-color: rgba(159,208,255,.3);
}
html[data-theme="dark"] .user-menu-content {
  background: #141c2a;
  border-color: rgba(159,208,255,.2);
}
html[data-theme="dark"] .user-menu-list a {
  color: #9fd0ff;
}
html[data-theme="dark"] .user-menu-list a:hover {
  background: rgba(61,97,146,.22);
  color: #cfe6ff;
  border-left-color: #7bbbff;
}
html[data-theme="dark"] #searchInput {
  background: #111726 !important;
  color: #cfe6ff !important;
  border-color: rgba(159,208,255,.25) !important;
}
html[data-theme="dark"] #searchInput::placeholder {
  color: #7ea6d6 !important;
}
html[data-theme="dark"] body.skin-vector-legacy #p-logo a {
  background-color: #1a2332;
  border-color: rgba(159,208,255,.3);
}
html[data-theme="dark"] #ca-view a,
html[data-theme="dark"] #ca-viewsource a,
html[data-theme="dark"] #ca-ve-edit a,
html[data-theme="dark"] #ca-edit a,
html[data-theme="dark"] #ca-history a,
html[data-theme="dark"] #p-cactions .vector-menu-heading,
html[data-theme="dark"] #ca-delete a,
html[data-theme="dark"] #ca-move a,
html[data-theme="dark"] #ca-protect a {
  background: rgba(20,26,38,.92) !important;
  color: #9fd0ff !important;
  border-color: rgba(159,208,255,.25) !important;
}
html[data-theme="dark"] #ca-view.selected a,
html[data-theme="dark"] #ca-viewsource.selected a,
html[data-theme="dark"] #ca-edit.selected a,
html[data-theme="dark"] #ca-ve-edit.selected a,
html[data-theme="dark"] #ca-history.selected a,
html[data-theme="dark"] #ca-watch.selected a,
html[data-theme="dark"] #ca-unwatch.selected a,
html[data-theme="dark"] #ca-more.selected a {
  background: linear-gradient(135deg, #274c77, #1b2b41) !important;
  color: #cfe6ff !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .mobile-hamburger-menu {
  background: linear-gradient(135deg, #274c77, #1b2b41);
  border: 1px solid rgba(159,208,255,.25);
  box-shadow: 0 6px 20px rgba(12,18,30,.45);
}
html[data-theme="dark"] .mobile-hamburger-menu:hover {
  box-shadow: 0 8px 30px rgba(123,187,255,.25);
}
html[data-theme="dark"] .mobile-hamburger-menu span {
  background: #cfe6ff;
}

/* Pulse animation for attention */
@keyframes btt-pulse {
  0% {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(102, 126, 234, 0.5);
  }
  100% {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  }
}

/* Apply pulse animation when first shown */
.btt-button.pulse {
  animation: btt-pulse 2s ease-in-out 3;
}

/* Responsive design */
@media (max-width: 768px) {
  .btt-button {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
  
  .btt-button::before {
    border-left-width: 7px;
    border-right-width: 7px;
    border-bottom-width: 10px;
  }
}

@media (max-width: 480px) {
  .btt-button {
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
  
  .btt-button::before {
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 9px;
  }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .btt-button {
    background: linear-gradient(135deg, #4c63d2 0%, #5a4fcf 100%);
    box-shadow: 0 4px 20px rgba(76, 99, 210, 0.4);
  }
  
  .btt-button:hover {
    background: linear-gradient(135deg, #5a4fcf 0%, #4c63d2 100%);
    box-shadow: 0 8px 30px rgba(76, 99, 210, 0.5);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btt-button {
    background: #000000;
    border: 2px solid #ffffff;
  }
  
  .btt-button::before {
    border-bottom-color: #ffffff;
  }
  
  .btt-button:hover {
    background: #333333;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btt-button {
    transition: opacity 0.3s ease;
  }
  
  .btt-button:hover {
    transform: none;
  }
  
  .btt-button::before {
    transition: none;
  }
  
  .btt-button:hover::before {
    transform: none;
  }
  
  .btt-button.pulse {
    animation: none;
  }
}
Retrieved from "https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:Vector.css&oldid=6555"