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 */
+
/* ========================= /
 
+
/ BODY STYLES /
/* ========================= */
+
/ ========================= /
/* BODY STYLES               */
+
body {
/* ========================= */
+
background: #202020;
body {  
+
color: #e6e6e6; / Force text color */
    background: #202020;  
 
    color: #e6e6e6; /* Force text color */
 
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* CONTENT STYLES           */
+
/ CONTENT STYLES /
/* ========================= */
+
/ ========================= /
#content {  
+
#content {
    background-color: #191919;  
+
background-color: #191919;
    color: #e6e6e6 !important; /* Force text color */
+
color: #e6e6e6 !important; / Force text color */
 
}
 
}
  
/* Sets background color of the logo area */
+
/* Sets background color of the logo area */
#p-logo {  
+
#p-logo {
    background-color: #202020;  
+
background-color: #202020;
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* NAVIGATION MENU STYLES   */
+
/ NAVIGATION MENU STYLES /
/* ========================= */
+
/ ========================= */
#p-navigation {  
+
#p-navigation {
    background-color: #202020;  
+
background-color: #202020;
 
}
 
}
  
/* Change color for all links in the navigation menu */
+
/* 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; / Set the default link color */
 
}
 
}
  
/* Change hover color for all links in the navigation menu */
+
/* 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; / Set the hover color for links */
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* TABLE OF CONTENTS STYLES */
+
/ TABLE OF CONTENTS STYLES /
/* ========================= */
+
/ ========================= */
 
.mw-parser-output .toc {
 
.mw-parser-output .toc {
    background-color: #343434;  
+
background-color: #343434;
    border: 1px solid #444241;  
+
border: 1px solid #444241;
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* HEADING STYLES           */
+
/ HEADING STYLES /
/* ========================= */
+
/ ========================= */
 +
 
 
h1 {
 
h1 {
    color: #e6e6e6 !important; /* Force heading colors */
+
color: #e6e6e6 !important; /* Force heading colors */
 
}
 
}
  
 
h2 {
 
h2 {
    color: #e6e6e6 !important; /* Force Heading Colors */
+
color: #e6e6e6 !important; /* Force Heading Colors */
 
}
 
}
  
 
h3 {
 
h3 {
    color: #e6e6e6 !important; /* Force Heading Colors */
+
color; #e6e6e6 !important; /* Force Heading Colors */
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* LINK STYLES               */
+
/ LINK STYLES /
/* ========================= */
+
/ ========================= /
 
a {
 
a {
    color: #90b7f9; /* Set the default link color */
+
color: #90b7f9; / Set the default link color */
 
}
 
}
  
 
a:hover {
 
a:hover {
    color: #955bc2; /* Set the hover color for links */
+
color: #955bc2; /* Set the hover color for links */
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* TOP BAR STYLES           */
+
/ TOP BAR STYLES /
/* ========================= */
+
/ ========================= */
 
#mw-head {
 
#mw-head {
    background-color: #202020;  
+
background-color: #202020;
 
}
 
}
  
 
#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;
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* NOTABLE MEMBERS STYLES     */
+
/ NOTABLE MEMBERS STYLES /
/* ========================= */
+
/ ========================= */
 
.notable-members {
 
.notable-members {
    background-color: #343434 !important;  
+
background-color: #343434 !important;
    color: #e6e6e6 !important;  
+
color: #e6e6e6 !important;
 
}
 
}
  
 
.notable-members th, .notable-members td {
 
.notable-members th, .notable-members td {
    border: 2px solid #e6e6e6;  
+
border: 2px solid #e6e6e6;
    color: #e6e6e6 !important; /* Force cell text color */
+
color: #e6e6e6 !important; /* Force cell text color */
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* TOOLS SECTION STYLES     */
+
/ TOOLS SECTION STYLES /
/* ========================= */
+
/ ========================= /
 
#p-tb a {
 
#p-tb a {
    color: #90b7f9; /* Set the default link color */
+
color: #90b7f9; / Set the default link color */
 
}
 
}
  
 
#p-tb a:hover {
 
#p-tb a:hover {
    color: #955bc2; /* Set the hover color for links */
+
color: #955bc2; /* Set the hover color for links */
 
}
 
}
  
/* ========================= */
+
/* ========================= /
/* GRADIENT MENU STYLES     */
+
/ GRADIENT MENU STYLES /
/* ========================= */
+
/ ========================= /
/* Change background for the "Read," "Edit," and "View history" links */
+
/ 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 */
+
/* Change text color for the links /
 
.ca-menu a {
 
.ca-menu a {
    color: #90b7f9 !important; /* Set the text color */
+
color: #90b7f9 !important; / Set the text color */
 
}
 
}
  
/* ============================= */
+
/* ============================= /
/* Change color of visited links */
+
/ Change color of visited links /
/* ============================= */
+
/ ============================= /
 
a:visited {
 
a:visited {
    color: #955bc2; /* Set the visited link color */
+
color: #955bc2; / Set the visited link color */
 
}
 
}
  
/* ========================================================================= */
+
/* ========================================================================= /
/* THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE */
+
/ THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE /
/* ========================================================================= */
+
/ ========================================================================= */
  
/* Base tab style */
+
/* Base tab style /
 
.vectorTabs li a {
 
.vectorTabs li a {
    background-color: #191919 !important; /* initial color */
+
background: linear-gradient(#191919, #202020) !important; / gradient background /
    color: #cce4ff !important; /* lighter text color */
+
color: #e6e6e6 !important;
    padding: 5px 10px !important;
+
padding: 5px 10px !important;
    border: none !important; /* Remove any borders */
+
border: none !important; / Remove any 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-color 0.3s ease; /* smooth transition */
+
transition: background 0.3s ease; / smooth transition /
    margin: 0; /* Remove any margin */
+
margin: 0; / Remove any margin /
    box-shadow: none !important; /* Ensure no box shadow is applied */
+
box-shadow: none !important; / Ensure no box shadow is applied */
    animation: fadeBackground 3s infinite alternate; /* continuous fade animation */
 
 
}
 
}
  
/* Keyframes for the fade effect */
+
/* Hover effect for color fade /
@keyframes fadeBackground {
+
.vectorTabs li a:hover {
    0% {
+
background: linear-gradient(#202020, #191919) !important; / reverse gradient on hover */
        background-color: #191919; /* start color */
 
    }
 
    100% {
 
        background-color: #202020; /* end color */
 
    }
 
 
}
 
}
  
 
/* Hover effect */
 
/* Hover effect */
 
.vectorTabs li a:hover {
 
.vectorTabs li a:hover {
    background-color: #202020 !important; /* color on hover */
+
background-color: #212121 !important;
    color: white !important; /* text color on hover */
+
color: white !important;
 +
} */
 +
 
 +
/* Styles for all tabs /
 +
.vectorTabs li a {
 +
background-color: #191919 !important;
 +
color: #cce4ff !important; / lighter text color */
 +
font-weight: bold !important;
 
}
 
}
  
/* Blue fading overlay using a pseudo-element for inactive tabs */
+
/* 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: 0; right: 0; bottom: 0;
+
top: 0; left: 0; right: 0; bottom: 0;
    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;
 
}
 
}
  
 
/* Ensure text is above the overlay */
 
/* Ensure text is above the overlay */
 
.vectorTabs li.selected a > * {
 
.vectorTabs li.selected a > * {
    position: relative;
+
position: relative;
    z-index: 1;
+
z-index: 1;
 
}
 
}
  
/* Remove any padding on list items */
+
/* Remove any padding on list items /
 
.vectorTabs li {
 
.vectorTabs li {
    padding: 0 !important; /* Remove padding */
+
padding: 0 !important; / Remove padding /
    margin: 0 !important; /* Remove margin */
+
margin: 0 !important; / Remove margin */
 
}
 
}
  
/* ============================================= */
+
/* ============================================= /
/*                testing                       */
+
/ testing /
/* ============================================= */
+
/ ============================================= */
  
 
.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns-0.ns-subject.mw-editable.page-Main_Page.rootpage-Main_Page.skin-vector.action-view.skin-vector-legacy {
 
.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns-0.ns-subject.mw-editable.page-Main_Page.rootpage-Main_Page.skin-vector.action-view.skin-vector-legacy {
    color: #191919 !important; /* Replace with your desired color */
+
color: #191919 !important; /* Replace with your desired color */
}
+
}"

Revision as of 03:16, 6 May 2025

/* ========================= /
/ 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: linear-gradient(#191919, #202020) !important; / gradient background /
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 0.3s ease; / smooth transition /
margin: 0; / Remove any margin /
box-shadow: none !important; / Ensure no box shadow is applied */
}

/* Hover effect for color fade /
.vectorTabs li a:hover {
background: linear-gradient(#202020, #191919) !important; / reverse gradient on hover */
}

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

/* Styles for all tabs /
.vectorTabs li a {
background-color: #191919 !important;
color: #cce4ff !important; / lighter text color */
font-weight: bold !important;
}

/* Blue fading overlay using a pseudo-element for inactive tabs /
.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), / 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 */
}

/* ============================================= /
/ testing /
/ ============================================= */

.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns-0.ns-subject.mw-editable.page-Main_Page.rootpage-Main_Page.skin-vector.action-view.skin-vector-legacy {
color: #191919 !important; /* Replace with your desired color */
}"