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 */
 
/* CSS placed here will be applied to all skins */
 +
/* ========================= */
  
 
/* ========================= */
 
/* ========================= */
Line 7: Line 9:
 
     background: #202020;  
 
     background: #202020;  
 
     color: #F2F3F5; /* Force text color */
 
     color: #F2F3F5; /* Force text color */
}
 
 
/* ========================== */
 
/* ====== BODY BORDER ======= */
 
/* ========================== */
 
/* Remove left border */
 
#content, .mw-body {
 
 
     border-left: none !important;
 
     border-left: none !important;
 
     outline: none !important;
 
     outline: none !important;
Line 19: Line 14:
 
}
 
}
  
/* Or if it's on the body */
+
/* ========================== */
body {
 
    border-left: none !important;
 
    outline: none !important;
 
    box-shadow: none !important;
 
}
 
 
 
/* ========================= */
 
 
/* CONTENT STYLES            */
 
/* CONTENT STYLES            */
/* ========================= */
+
/* ========================== */
 
#content {  
 
#content {  
 
     background-color: #191919;  
 
     background-color: #191919;  
Line 34: Line 22:
 
}
 
}
  
/* Sets background color of the logo area  */
 
 
#p-logo {  
 
#p-logo {  
     background-color: #202020;  
+
     background-color: #202020; /* Logo area background */
 
}
 
}
  
Line 46: Line 33:
 
}
 
}
  
/* Change color for all links in the navigation menu */
 
 
#p-navigation a {
 
#p-navigation a {
     color: #90b7f9 !important; /* Set the default link color */
+
     color: #90b7f9 !important; /* Default link color */
 
}
 
}
  
/* Change hover color for all links in the navigation menu */
 
 
#p-navigation a:hover {
 
#p-navigation a:hover {
     color: #955bc2; /* Set the hover color for links */
+
     color: #955bc2; /* Hover color for links */
 
}
 
}
  
Line 67: Line 52:
 
/* HEADING STYLES            */
 
/* HEADING STYLES            */
 
/* ========================= */
 
/* ========================= */
 
+
h1, h2, h3 {
h1 {
 
 
     color: #F2F3F5 !important; /* Force heading colors */
 
     color: #F2F3F5 !important; /* Force heading colors */
}
 
 
h2 {
 
    color: #F2F3F5 !important; /* Force Heading Colors */
 
}
 
 
h3 {
 
    color; #F2F3F5 !important; /* Force Heading Colors */
 
 
}
 
}
  
 
@media screen {
 
@media screen {
  h1, h2, h3, h4, h5, h6 {
+
    h1, h2, h3, h4, h5, h6 {
    color: #e6e6e6;
+
        color: #e6e6e6; /* Heading color for all screen sizes */
  }
+
    }
 
}
 
}
  
Line 90: Line 66:
 
/* ========================= */
 
/* ========================= */
 
a {
 
a {
     color: #90b7f9; /* Set the default link color */
+
     color: #90b7f9; /* Default link color */
 
}
 
}
  
 
a:hover {
 
a:hover {
     color: #955bc2; /* Set the hover color for links */
+
     color: #955bc2; /* Hover color for links */
 +
}
 +
 
 +
a:visited {
 +
    color: #955bc2; /* Visited link color */
 
}
 
}
  
Line 106: Line 86:
 
#mw-head a {
 
#mw-head a {
 
     color: #90b7f9; /* Force link color in top bar */
 
     color: #90b7f9; /* Force link color in top bar */
     padding: 5px 10px;
+
     padding: 5px 10px; /* Padding for links in top bar */
 
}
 
}
  
Line 126: Line 106:
 
/* ========================= */
 
/* ========================= */
 
#p-tb a {
 
#p-tb a {
     color: #90b7f9; /* Set the default link color */
+
     color: #90b7f9; /* Default link color */
 
}
 
}
  
 
#p-tb a:hover {
 
#p-tb a:hover {
     color: #955bc2; /* Set the hover color for links */
+
     color: #955bc2; /* Hover color for links */
 
}
 
}
  
Line 136: Line 116:
 
/* 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; /* Set the text color */
+
     color: #90b7f9 !important; /* Set text color */
 
}
 
}
  
/* ============================= */
+
/* ========================= */
/* Change color of visited links */
+
/* VECTOR TABS STYLES      */
/* ============================= */
+
/* ========================= */
a:visited {
+
.vectorTabs li {
     color: #955bc2; /* Set the visited link color */
+
    padding: 0 !important; /* Remove padding */
 +
     margin: 0 !important; /* Remove margin */
 
}
 
}
  
/* ========================================================================= */
 
/* THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE */
 
/* ========================================================================= */
 
 
/* Base tab style */
 
 
.vectorTabs li a {
 
.vectorTabs li a {
     background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* very smooth fade */
+
     background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Smooth fade */
 
     color: #e6e6e6 !important;
 
     color: #e6e6e6 !important;
     padding: 5px 10px !important;
+
     padding: 5px 10px !important; /* Padding for tabs */
     border: none !important; /* Remove any borders */
+
     border: none !important; /* Remove borders */
 
     border-radius: 0 !important; /* Remove 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 0.3s ease; /* smooth transition */
+
     transition: background 0.3s ease; /* Smooth transition */
     margin: 0; /* Remove any margin */
+
     margin: 0; /* Remove margin */
     box-shadow: none !important; /* Ensure no box shadow is applied */
+
     box-shadow: none !important; /* No box shadow */
 
}
 
}
  
/* Hover effect for color fade */
 
 
.vectorTabs li a:hover {
 
.vectorTabs li a:hover {
     background: linear-gradient(to top, #202020 0%, #1e1e1e 15%, #1d1d1d 30%, #1c1c1c 45%, #1b1b1b 60%, #1a1a1a 75%, #191919 100%) !important; /* reverse gradient on hover */
+
     background: linear-gradient(to top, #202020 0%, #1e1e1e 15%, #1d1d1d 30%, #1c1c1c 45%, #1b1b1b 60%, #1a1a1a 75%, #191919 100%) !important; /* Reverse gradient on hover */
 
}
 
}
  
/* Styles for selected tab */
 
 
.vectorTabs li.selected a {
 
.vectorTabs li.selected a {
     background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* gradient for active tab */
+
     background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Active tab gradient */
 
}
 
}
  
/* Blue fading overlay using a pseudo-element for inactive tabs */
 
 
.vectorTabs li:not(.selected) a::before {
 
.vectorTabs li:not(.selected) a::before {
 
     content: '';
 
     content: '';
 
     position: absolute;
 
     position: absolute;
     top: 0; left: 0px; right: 0; bottom: 0;
+
     top: 0; left: 0; right: 0; bottom: 0;
     background: linear-gradient(
+
     background: linear-gradient(to top, rgba(30, 144, 255, 0.2), rgba(25, 25, 25, 0.8)); /* Blue fade */
        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 */
 
     border-radius: 0 !important; /* No rounded corners */
     pointer-events: none; /* allow clicks through this layer */
+
     pointer-events: none; /* Allow clicks through this layer */
 
}
 
}
  
/* Ensure text is above the overlay */
 
 
.vectorTabs li.selected a > * {
 
.vectorTabs li.selected a > * {
 
     position: relative;
 
     position: relative;
     z-index: 1;
+
     z-index: 1; /* Ensure text is above the overlay */
 
}
 
}
  
/* Remove any padding on list items */
+
/* ========================= */
.vectorTabs li {
+
/* SEARCH BAR CONFIG        */
    padding: 0px !important; /* Remove padding */
+
/* ========================= */
    margin: 0px !important; /* Remove margin */
 
}
 
 
 
/* =================================================== */
 
/* ======= border removal from the vector tabs ======= */
 
/* =================================================== */
 
 
 
 
@media screen {
 
@media screen {
  .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
+
    .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
    background-image: url(/wiki/skins/Vector/resources/skins.vector.styles/images/tab-separator.png?09d4b);
+
        background-image: url(/wiki/skins/Vector/resources/skins.vector.styles/images/tab-separator.png?09d4b);
    background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#a7d7f9 100%);
+
        background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #a7d7f9 100%);
    background-repeat: no-repeat;
+
        background-repeat: no-repeat;
    background-size: 0px 100%;
+
        background-size: 0px 100%;
  }
+
    }
 
}
 
}
 
 
/* =================================== */
 
/* ======== SEARCH BAR CONFIG ======== */
 
/* =================================== */
 

Revision as of 20:18, 6 May 2025

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

/* ========================= */
/* BODY STYLES               */
/* ========================= */
body { 
    background: #202020; 
    color: #F2F3F5; /* Force text color */
    border-left: none !important;
    outline: none !important;
    box-shadow: none !important;
}

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

#p-logo { 
    background-color: #202020; /* Logo area background */
}

/* ========================= */
/* NAVIGATION MENU STYLES    */
/* ========================= */
#p-navigation { 
    background-color: #202020; 
}

#p-navigation a {
    color: #90b7f9 !important; /* Default link color */
}

#p-navigation a:hover {
    color: #955bc2; /* 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: #F2F3F5 !important; /* Force heading colors */
}

@media screen {
    h1, h2, h3, h4, h5, h6 {
        color: #e6e6e6; /* Heading color for all screen sizes */
    }
}

/* ========================= */
/* LINK STYLES               */
/* ========================= */
a {
    color: #90b7f9; /* Default link color */
}

a:hover {
    color: #955bc2; /* Hover color for links */
}

a:visited {
    color: #955bc2; /* Visited link color */
}

/* ========================= */
/* TOP BAR STYLES            */
/* ========================= */
#mw-head {
    background-color: #202020; 
}

#mw-head a {
    color: #90b7f9; /* Force link color in top bar */
    padding: 5px 10px; /* Padding for links in top bar */
}

/* ========================= */
/* NOTABLE MEMBERS STYLES     */
/* ========================= */
.notable-members {
    background-color: #343434 !important; 
    color: #e6e6e6 !important; 
}

.notable-members th, .notable-members td {
    border: 3px solid #151515; 
    color: #F2F3F5 !important; /* Force cell text color */
}

/* ========================= */
/* TOOLS SECTION STYLES      */
/* ========================= */
#p-tb a {
    color: #90b7f9; /* Default link color */
}

#p-tb a:hover {
    color: #955bc2; /* Hover color for links */
}

/* ========================= */
/* GRADIENT MENU STYLES      */
/* ========================= */
.ca-menu {
    background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */
}

.ca-menu a {
    color: #90b7f9 !important; /* Set text color */
}

/* ========================= */
/* VECTOR TABS STYLES       */
/* ========================= */
.vectorTabs li {
    padding: 0 !important; /* Remove padding */
    margin: 0 !important; /* Remove margin */
}

.vectorTabs li a {
    background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Smooth fade */
    color: #e6e6e6 !important;
    padding: 5px 10px !important; /* Padding for tabs */
    border: none !important; /* Remove borders */
    border-radius: 0 !important; /* Remove rounded corners */
    text-decoration: none !important;
    position: relative; /* Enable pseudo-element positioning */
    transition: background 0.3s ease; /* Smooth transition */
    margin: 0; /* Remove margin */
    box-shadow: none !important; /* No box shadow */
}

.vectorTabs li a:hover {
    background: linear-gradient(to top, #202020 0%, #1e1e1e 15%, #1d1d1d 30%, #1c1c1c 45%, #1b1b1b 60%, #1a1a1a 75%, #191919 100%) !important; /* Reverse gradient on hover */
}

.vectorTabs li.selected a {
    background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Active tab gradient */
}

.vectorTabs li:not(.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), rgba(25, 25, 25, 0.8)); /* Blue fade */
    border-radius: 0 !important; /* No rounded corners */
    pointer-events: none; /* Allow clicks through this layer */
}

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

/* ========================= */
/* SEARCH BAR CONFIG         */
/* ========================= */
@media screen {
    .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
        background-image: url(/wiki/skins/Vector/resources/skins.vector.styles/images/tab-separator.png?09d4b);
        background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #a7d7f9 100%);
        background-repeat: no-repeat;
        background-size: 0px 100%;
    }
}