Difference between revisions of "MediaWiki:Common.css"

From Filtered, Archived, Gaslit Wiki
Jump to navigation Jump to search
 
(214 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
// Create a new style element
+
/* CSS placed here will be applied to all skins */
−
const style = document.createElement('style');
 
  
−
// Add CSS rules to the style element
+
/* ========================= */
−
style.innerText += `
+
/* BODY STYLES              */
−
  /* Set basic styles for tables with the class 'wikitable' */
+
/* ========================= */
−
  table.wikitable {
+
 
−
     background-color: #252525 !important; /* Match body background color */
+
body {
−
     color: #e6e6e6 !important; /* Match body text color */
+
    background: linear-gradient(to top, #191919 0%, #1d1d1d 33%, #202020 100%) !important; /* Smooth fade from #191919 to #202020 */
−
     border: 1px solid #444241 !important; /* Border color */
+
    color: #F2F3F5; /* Force text color */
−
     border-collapse: collapse !important; /* Collapse borders */
+
    padding: 0; /* Remove padding */
−
     width: 100%; /* Full width of the container */
+
    margin: 0; /* Optionally remove margin as well */
 +
}
 +
 
 +
/* ========================== */
 +
/* ====== BODY BORDER ======= */
 +
/* ========================== */
 +
/* Remove left border */
 +
#content, .mw-body {
 +
    border-left: none !important;
 +
    outline: none !important;
 +
    box-shadow: none !important;
 +
}
 +
 
 +
/* Or if it's on the body */
 +
body {
 +
    border-left: none !important;
 +
    outline: none !important;
 +
    box-shadow: none !important;
 +
}
 +
 
 +
/* ========================= */
 +
/* CONTENT STYLES            */
 +
/* ========================= */
 +
 
 +
#content {
 +
    background-color: #191919 !important; /* Solid color */
 +
    color: #F2F3F5 !important; /* Force text color */
 +
    padding: 10px; /* Adjust padding as needed */
 +
}
 +
 
 +
/* Sets background color of the logo area  */
 +
 
 +
#p-logo {
 +
     background-color: transparent !important; /* Remove background color */
 +
}
 +
 
 +
/* ========================= */
 +
/* NAVIGATION MENU STYLES    */
 +
/* ========================= */
 +
 
 +
#p-navigation {
 +
    background: linear-gradient(to bottom, #202020 0%, #191919 100%) !important; /* Fade from #202020 to #191919 */
 +
}
 +
 
 +
/* 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: #F2F3F5 !important; /* Force heading colors */
 +
}
 +
 
 +
h2 {
 +
     color: #F2F3F5 !important; /* Force Heading Colors */
 +
}
 +
 
 +
h3 {
 +
     color; #F2F3F5 !important; /* Force Heading Colors */
 +
}
 +
 
 +
@media screen {
 +
  h1, h2, h3, h4, h5, h6 {
 +
    color: #e6e6e6;
 
   }
 
   }
 +
}
 +
 +
/* ========================= */
 +
/* 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: linear-gradient(to bottom, #191919 0%, #202020 100%) !important; /* Fade from #191919 to #202020 */
 +
    color: #e6e6e6 !important; /* Ensure text color matches */
 +
    padding: 0px; /* Adjust padding as needed */
 +
    border: none !important; /* Remove any borders */
 +
    margin: 0; /* Remove any margin */
 +
}
 +
 +
#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: 3px solid #151515;
 +
    color: #F2F3F5 !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(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* very smooth fade */
 +
    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(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 {
 +
    background: linear-gradient(to top, #191919 0%, #1d1c1c 100%) !important; /* Fade from #191919 to #1d1c1c */
 +
}
 +
 +
/* Blue fading overlay using a pseudo-element for inactive tabs */
 +
.vectorTabs li:not(.selected) a::before {
 +
    content: '';
 +
    position: absolute;
 +
    top: 0; left: 0px; 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 */
 +
}
 +
 +
/* Ensure text is above the overlay */
 +
.vectorTabs li.selected a > * {
 +
    position: relative;
 +
    z-index: 1;
 +
}
 +
 +
/* Remove any padding on list items */
 +
.vectorTabs li {
 +
    padding: 0px !important; /* Remove padding */
 +
    margin: 0px !important; /* Remove margin */
 +
}
 +
 +
/* =================================================== */
 +
/* ======= border removal from the vector tabs ======= */
 +
/* =================================================== */
  
−
  /* Set styles for table headers */
+
@media screen {
−
   table.wikitable th {
+
   .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
−
     background-color: #343434 !important; /* Match content background color */
+
     background-image: url(/wiki/skins/Vector/resources/skins.vector.styles/images/tab-separator.png?09d4b);
−
    color: #e6e6e6 !important; /* Match text color */
+
     background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#a7d7f9 100%);
−
     border: 2px solid #e6e6e6 !important; /* Border color for headers */
+
     background-repeat: no-repeat;
−
     padding: 8px; /* Padding inside header cells */
+
     background-size: 0px 100%;
−
     text-align: left; /* Align text to the left */
 
 
   }
 
   }
 +
}
 +
 +
 +
/* =================================== */
 +
/* ======== SEARCH BAR CONFIG ======== */
 +
/* =================================== */
  
−
  /* Set styles for table data cells */
 
−
  table.wikitable td {
 
−
    background-color: #252525 !important; /* Match body background color */
 
−
    color: #e6e6e6 !important; /* Match text color */
 
−
    border: 2px solid #e6e6e6 !important; /* Border color for data cells */
 
−
    padding: 8px; /* Padding inside data cells */
 
−
  }
 
  
−
  /* Set styles for even table rows */
+
/* =============================================== */
−
  table.wikitable tr:nth-child(even) td {
+
/* ============left page coloring ================ */
−
    background-color: #343434 !important; /* Match content background color */
+
/* =============================================== */
−
  }
 
  
−
  /* Set styles for links within the table */
 
−
  table.wikitable a {
 
−
    color: #90b7f9 !important; /* Match link color */
 
−
  }
 
  
−
  /* Set styles for visited links */
 
−
  table.wikitable a:visited {
 
−
    color: #7a94bf !important; /* Adjusted for contrast */
 
−
  }
 
  
−
  /* Set styles for hovered links */
+
/* ================================== */
−
  table.wikitable a:hover {
+
/* ========== TESTING =============== */
−
    color: #c70039 !important; /* Match hover link color */
+
/* ================================== */  
−
    text-decoration: underline; /* Underline links on hover */
 
−
  }
 
−
`;
 
  
−
// Append the style element to the document's head
+
/* Change background color of the categories and footer area */
−
document.head.appendChild(style);
+
.mw-footer {
 +
    background-color: #202020;
 +
}

Latest revision as of 20:59, 7 May 2025

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

/* ========================= */
/* BODY STYLES               */
/* ========================= */

body {
    background: linear-gradient(to top, #191919 0%, #1d1d1d 33%, #202020 100%) !important; /* Smooth fade from #191919 to #202020 */
    color: #F2F3F5; /* Force text color */
    padding: 0; /* Remove padding */
    margin: 0; /* Optionally remove margin as well */
}

/* ========================== */
/* ====== BODY BORDER ======= */
/* ========================== */
/* Remove left border */
#content, .mw-body {
    border-left: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Or if it's on the body */
body {
    border-left: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================= */
/* CONTENT STYLES            */
/* ========================= */

#content {
    background-color: #191919 !important; /* Solid color */
    color: #F2F3F5 !important; /* Force text color */
    padding: 10px; /* Adjust padding as needed */
}

/* Sets background color of the logo area  */

#p-logo {
    background-color: transparent !important; /* Remove background color */
}

/* ========================= */
/* NAVIGATION MENU STYLES    */
/* ========================= */

#p-navigation {
    background: linear-gradient(to bottom, #202020 0%, #191919 100%) !important; /* Fade from #202020 to #191919 */
}

/* 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: #F2F3F5 !important; /* Force heading colors */
}

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

h3 {
    color; #F2F3F5 !important; /* Force Heading Colors */
}

@media screen {
  h1, h2, h3, h4, h5, h6 {
    color: #e6e6e6;
  }
}

/* ========================= */
/* 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: linear-gradient(to bottom, #191919 0%, #202020 100%) !important; /* Fade from #191919 to #202020 */
    color: #e6e6e6 !important; /* Ensure text color matches */
    padding: 0px; /* Adjust padding as needed */
    border: none !important; /* Remove any borders */
    margin: 0; /* Remove any margin */
}

#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: 3px solid #151515; 
    color: #F2F3F5 !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(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* very smooth fade */
    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(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 {
    background: linear-gradient(to top, #191919 0%, #1d1c1c 100%) !important; /* Fade from #191919 to #1d1c1c */
}

/* Blue fading overlay using a pseudo-element for inactive tabs */
.vectorTabs li:not(.selected) a::before {
    content: '';
    position: absolute;
    top: 0; left: 0px; 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 */
}

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

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

/* =================================================== */
/* ======= border removal from the vector tabs ======= */
/* =================================================== */

@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%;
  }
}


/* =================================== */
/* ======== SEARCH BAR CONFIG ======== */
/* =================================== */


/* =============================================== */
/* ============left page coloring ================ */
/* =============================================== */



/* ================================== */
/* ========== TESTING =============== */
/* ================================== */ 

/* Change background color of the categories and footer area */
.mw-footer {
    background-color: #202020;
}
Retrieved from "https://wiki.fagc.live/wiki/index.php?title=MediaWiki:Common.css&oldid=422"