Difference between revisions of "MediaWiki:Common.css"

From Filtered, Archived, Gaslit Wiki
Jump to navigation Jump to search
Line 17: Line 17:
 
}
 
}
  
/* Sets background color of the logo area */
+
/* Sets background color of the logo area */
 
#p-logo {  
 
#p-logo {  
 
     background-color: #202020;  
 
     background-color: #202020;  
Line 29: Line 29:
 
}
 
}
  
/* Navigation links */
+
/* Change color for all links in the navigation menu */
 
#p-navigation a {
 
#p-navigation a {
     color: #90b7f9 !important; /* Default link color */
+
     color: #90b7f9 !important; /* Set the default link color */
 
}
 
}
  
 +
/* Change hover color for all links in the navigation menu */
 
#p-navigation a:hover {
 
#p-navigation a:hover {
     color: #955bc2; /* Hover color */
+
     color: #955bc2; /* Set the hover color for links */
}
 
 
 
#mw-content-navigation a:hover {
 
    color: #955bc2; /* Replace with the desired hover color code */
 
 
}
 
}
  
Line 53: Line 50:
 
/* HEADING STYLES            */
 
/* HEADING STYLES            */
 
/* ========================= */
 
/* ========================= */
h1, h2, h3 {
+
 
 +
h1 {
 
     color: #e6e6e6 !important; /* Force heading colors */
 
     color: #e6e6e6 !important; /* Force heading colors */
 +
}
 +
 +
h2 {
 +
    color: #e6e6e6 !important; /* Force Heading Colors */
 +
}
 +
 +
h3 {
 +
    color; #e6e6e6 !important; /* Force Heading Colors */
 
}
 
}
  
Line 61: Line 67:
 
/* ========================= */
 
/* ========================= */
 
a {
 
a {
     color: #90b7f9; /* Default link color */
+
     color: #90b7f9; /* Set the default link color */
 
}
 
}
  
 
a:hover {
 
a:hover {
     color: #955bc2; /* Hover color */
+
     color: #955bc2; /* Set the hover color for links */
}
 
 
 
a:visited {
 
    color: #955bc2; /* Visited link color */
 
 
}
 
}
  
Line 80: Line 82:
  
 
#mw-head a {
 
#mw-head a {
     color: #90b7f9; /* Link color in top bar */
+
     color: #90b7f9; /* Force link color in top bar */
 
     padding: 5px 10px;
 
     padding: 5px 10px;
 
}
 
}
  
 
/* ========================= */
 
/* ========================= */
/* NOTABLE MEMBERS STYLES   */
+
/* NOTABLE MEMBERS STYLES     */
 
/* ========================= */
 
/* ========================= */
 
.notable-members {
 
.notable-members {
Line 101: Line 103:
 
/* ========================= */
 
/* ========================= */
 
#p-tb a {
 
#p-tb a {
     color: #90b7f9; /* Default link color */
+
     color: #90b7f9; /* Set the default link color */
 
}
 
}
  
 
#p-tb a:hover {
 
#p-tb a:hover {
     color: #955bc2; /* Hover color */
+
     color: #955bc2; /* Set the hover color for links */
 
}
 
}
  
Line 111: Line 113:
 
/* GRADIENT MENU STYLES      */
 
/* GRADIENT MENU STYLES      */
 
/* ========================= */
 
/* ========================= */
 +
/* Change background for the "Read," "Edit," and "View history" links */
 
.ca-menu {
 
.ca-menu {
 
     background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */
 
     background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */
 
}
 
}
  
 +
/* Change text color for the links */
 
.ca-menu a {
 
.ca-menu a {
     color: #90b7f9 !important; /* Text color */
+
     color: #90b7f9 !important; /* Set the text color */
 
}
 
}
  
/* ========================= */
+
/* ============================= */
/* TABS STYLES              */
+
/* Change color of visited links */
/* ========================= */
+
/* ============================= */
.vectorTabs {
+
a:visited {
     border-top: 0px solid #1e90ff; /* Blue top border for the tabs */
+
     color: #955bc2; /* Set the visited link color */
    padding: 0; /* Remove padding */
 
    margin: 0; /* Remove margin */
 
    box-shadow: none !important; /* Ensure no shadow */
 
 
}
 
}
  
/* Base tab item style */
+
/* ========================================================================= */
.vectorTabs li {
+
/* THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE */
    padding: 0 !important; /* Remove padding */
+
/* ========================================================================= */
    margin: 0 !important; /* Remove margin */
 
}
 
  
/* Tab links */
+
/* Base tab style */
 
.vectorTabs li a {
 
.vectorTabs li a {
     background-color: #191919 !important; /* Dark base */
+
     background-color: #191919 !important; /* dark base */
 
     color: #e6e6e6 !important;
 
     color: #e6e6e6 !important;
     padding: 5px 10px !important; /* Adjust padding */
+
     padding: 5px 10px !important;
     border: none !important; /* Remove borders */
+
     border: none !important; /* Remove any borders */
     border-radius: 0 !important; /* No rounded corners */
+
     border-radius: 0 !important; /* Remove rounded corners */
 
     text-decoration: none !important;
 
     text-decoration: none !important;
     position: relative; /* Enable pseudo-element positioning */
+
     position: relative; /* enable pseudo-element positioning */
     transition: background-color 0.3s ease; /* Transition effect */
+
     transition: background-color 0.3s ease;
 +
    margin: 0; /* Remove any margin */
 +
    box-shadow: none !important; /* Ensure no box shadow is applied */
 
}
 
}
  
 
/* Hover effect */
 
/* Hover effect */
 
.vectorTabs li a:hover {
 
.vectorTabs li a:hover {
     background-color: #212121 !important; /* Darker on hover */
+
     background-color: #212121 !important;
 
     color: white !important;
 
     color: white !important;
 
}
 
}
  
/* Active tab style */
+
/* Active tab with blue fading overlay */
 
.vectorTabs li.selected a {
 
.vectorTabs li.selected a {
 
     background-color: #191919 !important;
 
     background-color: #191919 !important;
     color: #cce4ff !important; /* Lighter text color */
+
     color: #cce4ff !important; /* lighter text color */
 
     font-weight: bold !important;
 
     font-weight: bold !important;
 
}
 
}
  
/* Overlay effect for active tab */
+
/* Blue fading overlay using a pseudo-element */
 
.vectorTabs li.selected a::before {
 
.vectorTabs li.selected a::before {
 
     content: '';
 
     content: '';
Line 167: Line 168:
 
     background: linear-gradient(
 
     background: linear-gradient(
 
         to top,
 
         to top,
         rgba(30, 144, 255, 0.2), /* DodgerBlue with opacity from bottom */
+
         rgba(30, 144, 255, 0.2),   /* DodgerBlue with opacity from bottom */
         rgba(25, 25, 25, 0.8)   /* Dark fade at the top */
+
         rgba(25, 25, 25, 0.8)     /* dark fade at the top */
 
     );
 
     );
 
     border-radius: 0 !important; /* No rounded corners */
 
     border-radius: 0 !important; /* No rounded corners */
     pointer-events: none; /* Allow clicks through this layer */
+
     pointer-events: none; /* allow clicks through this layer */
 
     z-index: 0;
 
     z-index: 0;
 
}
 
}
Line 179: Line 180:
 
     position: relative;
 
     position: relative;
 
     z-index: 1;
 
     z-index: 1;
 +
}
 +
 +
/* Remove any padding on list items */
 +
.vectorTabs li {
 +
    padding: 0 !important; /* Remove padding */
 +
    margin: 0 !important; /* Remove margin */
 
}
 
}

Revision as of 22:07, 5 May 2025

/* CSS placed here will be applied to all skins */

/* ========================= */
/* BODY STYLES               */
/* ========================= */
body { 
    background: #202020; 
    color: #e6e6e6; /* Force text color */
}

/* ========================= */
/* CONTENT STYLES            */
/* ========================= */
#content { 
    background-color: #191919; 
    color: #e6e6e6 !important; /* Force text color */
}

/* Sets background color of the logo area  */
#p-logo { 
    background-color: #202020; 
}

/* ========================= */
/* 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 {
    color: #e6e6e6 !important; /* Force heading colors */
}

h2 {
    color: #e6e6e6 !important; /* Force Heading Colors */
}

h3 {
    color; #e6e6e6 !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: #90b7f9; /* 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 {
    border: 2px solid #e6e6e6; 
    color: #e6e6e6 !important; /* Force cell text color */
}

/* ========================= */
/* TOOLS SECTION STYLES      */
/* ========================= */
#p-tb a {
    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 */
/* ========================================================================= */

/* Base tab style */
.vectorTabs li a {
    background-color: #191919 !important; /* dark base */
    color: #e6e6e6 !important;
    padding: 5px 10px !important;
    border: none !important; /* Remove any borders */
    border-radius: 0 !important; /* Remove rounded corners */
    text-decoration: none !important;
    position: relative; /* enable pseudo-element positioning */
    transition: background-color 0.3s ease;
    margin: 0; /* Remove any margin */
    box-shadow: none !important; /* Ensure no box shadow is applied */
}

/* 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; /* lighter text color */
    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 top,
        rgba(30, 144, 255, 0.2),   /* DodgerBlue with opacity from bottom */
        rgba(25, 25, 25, 0.8)      /* dark fade at the top */
    );
    border-radius: 0 !important; /* No rounded corners */
    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;
}

/* Remove any padding on list items */
.vectorTabs li {
    padding: 0 !important; /* Remove padding */
    margin: 0 !important; /* Remove margin */
}