Difference between revisions of "MediaWiki:Common.css"

From Filtered, Archived, Gaslit Wiki
Jump to navigation Jump to search
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
+
/* Base tab style */
 
+
.vectorTabs li a {
/* ========================= */
+
    background-color: #191919 !important; /* dark base */
/* BODY STYLES              */
+
    color: #e6e6e6 !important;
/* ========================= */
+
    padding: 5px 10px !important;
body {
+
    border: none !important;
     background: #202020;  
+
    border-radius: 0 !important;
     color: #e6e6e6; /* Force text color */
+
     text-decoration: none !important;
 +
     position: relative; /* enable pseudo-element positioning */
 +
    transition: background-color 0.3s ease;
 
}
 
}
  
/* ========================= */
+
/* Hover effect */
/* CONTENT STYLES            */
+
.vectorTabs li a:hover {
/* ========================= */
+
     background-color: #212121 !important;
#content {  
+
     color: white !important;
     background-color: #191919;  
 
     color: #e6e6e6 !important; /* Force text color */
 
 
}
 
}
  
/* Sets background color of the logo area  */
+
/* Active tab with blue fading overlay */
#p-logo {
+
.vectorTabs li.selected a {
    background-color: #202020;
+
     background-color: #191919 !important;
}
+
     color: #cce4ff !important;
 
+
     font-weight: bold !important;
/* ========================= */
 
/* NAVIGATION MENU STYLES    */
 
/* ========================= */
 
#p-navigation {
 
    background-color: #202020;
 
}
 
 
 
/* Change color for all links in the navigation menu */
 
#p-navigation a {
 
    color: #90b7f9 !important; /* Set the default link color */
 
}
 
 
 
/* Change hover color for all links in the navigation menu */
 
#p-navigation a:hover {
 
    color: #955bc2; /* Set the hover color for links */
 
}
 
 
 
/* ========================= */
 
/* TABLE OF CONTENTS STYLES  */
 
/* ========================= */
 
.mw-parser-output .toc {
 
     background-color: #343434;
 
    border: 1px solid #444241;
 
}
 
 
 
/* ========================= */
 
/* HEADING STYLES            */
 
/* ========================= */
 
h1, h2, h3 {
 
    color: #191919 !important; /* Force heading colors */
 
}
 
 
 
/* ========================= */
 
/* LINK STYLES              */
 
/* ========================= */
 
a {
 
     color: #90b7f9; /* Set the default link color */
 
}
 
 
 
a:hover {
 
    color: #955bc2; /* Set the hover color for links */
 
}
 
 
 
/* ========================= */
 
/* TOP BAR STYLES            */
 
/* ========================= */
 
#mw-head {
 
    background-color: #202020;
 
}
 
 
 
#mw-head a {
 
    color: #191919; /* Force link color in top bar */
 
    padding: 5px 10px;
 
}
 
 
 
/* ========================= */
 
/* NOTABLE MEMBERS STYLES    */
 
/* ========================= */
 
.notable-members {
 
    background-color: #343434 !important;  
 
     color: #e6e6e6 !important;  
 
 
}
 
}
  
.notable-members th, .notable-members td {
+
/* Blue fading overlay using a pseudo-element */
     border: 2px solid #e6e6e6;  
+
.vectorTabs li.selected a::before {
     color: #e6e6e6 !important; /* Force cell text color */
+
    content: '';
 +
    position: absolute;
 +
    top: 0; left: 0; right: 0; bottom: 0;
 +
    background: linear-gradient(
 +
        to bottom right,
 +
        rgba(30, 144, 255, 0.6),  /* DodgerBlue with opacity */
 +
        rgba(25, 25, 25, 0.8)      /* dark fade */
 +
    );
 +
     border-radius: 0 !important;
 +
     pointer-events: none; /* allow clicks through this layer */
 +
    z-index: 0;
 
}
 
}
  
/* ========================= */
+
/* Ensure text is above the overlay */
/* TOOLS SECTION STYLES      */
+
.vectorTabs li.selected a > * {
/* ========================= */
+
     position: relative;
#p-tb a {
+
     z-index: 1;
    color: #90b7f9; /* Set the default link color */
 
}
 
 
 
#p-tb a:hover {
 
    color: #955bc2; /* Set the hover color for links */
 
}
 
 
 
/* ========================= */
 
/* GRADIENT MENU STYLES      */
 
/* ========================= */
 
/* Change background for the "Read," "Edit," and "View history" links */
 
.ca-menu {
 
    background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */
 
}
 
 
 
/* Change text color for the links */
 
.ca-menu a {
 
    color: #90b7f9 !important; /* Set the text color */
 
}
 
 
 
/* ============================= */
 
/* Change color of visited links */
 
/* ============================= */
 
a:visited {
 
    color: #955bc2; /* Set the visited link color */
 
}
 
 
 
/* ========================================================================= */
 
/* THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE */
 
/* ========================================================================= */
 
 
 
/* Style for all tabs */
 
.vectorTabs li a {
 
    background-color: #191919 !important; /* default tab background */
 
    color: #e6e6e6 !important; /* default text color */
 
    border: 0px solid #ccc !important;
 
    padding: 5px 10px !important;
 
    border-radius: 0px 0px 0 0 !important;
 
    text-decoration: none !important;
 
}
 
 
 
/* Style for active/selected tab */
 
.vectorTabs li.selected a {
 
     background-color: #191919 !important; /* active tab background */
 
     color: white !important; /* active tab text */
 
    border-bottom: 0px solid white !important; /* hide bottom border to merge with content */
 
}
 
 
 
/* Hover effect on tabs */
 
.vectorTabs li a:hover {
 
    background-color: #212121 !important;
 
    color: white !important;
 
 
}
 
}

Revision as of 05:31, 5 May 2025

/* Base tab style */
.vectorTabs li a {
    background-color: #191919 !important; /* dark base */
    color: #e6e6e6 !important;
    padding: 5px 10px !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    position: relative; /* enable pseudo-element positioning */
    transition: background-color 0.3s ease;
}

/* Hover effect */
.vectorTabs li a:hover {
    background-color: #212121 !important;
    color: white !important;
}

/* Active tab with blue fading overlay */
.vectorTabs li.selected a {
    background-color: #191919 !important;
    color: #cce4ff !important;
    font-weight: bold !important;
}

/* Blue fading overlay using a pseudo-element */
.vectorTabs li.selected a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        to bottom right,
        rgba(30, 144, 255, 0.6),   /* DodgerBlue with opacity */
        rgba(25, 25, 25, 0.8)      /* dark fade */
    );
    border-radius: 0 !important;
    pointer-events: none; /* allow clicks through this layer */
    z-index: 0;
}

/* Ensure text is above the overlay */
.vectorTabs li.selected a > * {
    position: relative;
    z-index: 1;
}