MediaWiki

Foreground.css: Difference between revisions

From Redrock Wiki

No edit summary
No edit summary
 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
:root {
  --darkBG: #2d3034; /* background */
  --darkFG: #181a1b; /* foreground */
  --redrockRed: #610215;
}
hr {
hr {
   clear: left;
   clear: left;
Line 13: Line 19:


@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
   body { background-color: #2d3034; }
   body, #content, #mw-content-subtitle, #bodyContent, #catlinks, #toc {  
  #content, #mw-content-subtitle {  
     background-color: var(--darkBG);  
     background-color: #2d3034;  
     .mw-redirectedfrom, #mw-content-text, .mw-specialpagesgroup, #toc {
     .mw-redirectedfrom, .center {
       color: white;
       color: white;
     }
     }
   }
   }
  #bodyContent { background-color: #2d3034; }
   #catlinks, #footer-privacy, #footer-about, #footer-disclaimers, #poweredby, .tcAnnouncement, #content, #mw-content-subtitle, .guideTabs, .tcWidgetPage {  
  #catlinks { background-color: #2d3034; }
     a {color: #66b1fa !important}
   #catlinks, #footer-privacy, #footer-about, #footer-disclaimers, #poweredby, .tcAnnouncement, #content, #mw-content-subtitle {  
     .label {color: white !important;}
     a {color: #66b1fa;}
    a:hover {color: #4894e0 !important}
     .label {color: white;}
  }
  .blue { /* not yet updated */
    background-color: #D9EDF7;
    border: 1px solid #BCE8F1;
    color:#31708F;
   }
   }
   .green {
   .tcAnnouncement {
     background-color: #293c17;
     filter: brightness(0.6) saturate(1.5) contrast(2.8) invert(0.1);
    border: 1px solid #8bc48c;
    color:#8bc48c;
  }
  .red {
    background-color: #A93636;;
    border: 1px solid #EBCCD1;
    color:#F4BEBD;;
   }
   }
   .guideTabs {
   .guideTabs {
     color: white;
     border: 1px solid var(--darkBG);
     background: #181a1b;
     background: var(--darkFG);
    a {color: #66b1fa !important}
    a:hover {color: #4894e0 !important}
   }
   }
   .tcWidgetPage {
   .tcWidgetPage {
     background: #181a1b;
     background: var(--darkFG);
     .pageTitle, p, dd, ul, li, h2, h3, td, th, .collapsible { color: white; }  
    border: 1px solid var(--darkBG);
     td {background: #2d3034;}
     .pageTitle, p, dd, ul, li, h2, h3, td, th, .collapsible, caption { color: white; }  
    th {
     th, td {
       background-color: #181a1b !important;
       background-color: var(--darkBG) !important;
       background: #181a1b;
       background: var(--darkBG);
      border-color: #a2a9b1 !important;
     }
     }
    a {color: #66b1fa !important}
     .mw-collapsible-toggle:hover { background-color: unset; }
    a:hover {color: #4894e0 !important}
     .mw-collapsible-text { color: #66b1fa !important }
     .mw-collapsible-toggle:hover {
      background-color: unset;
    }
     .mw-collapsible-text {color: #66b1fa !important}
   }
   }
   .categoryBox {
   .categoryBox {
     h2 { color: #C73149 !important; }
     h2 { color: #C73149 !important; }
     h2:hover { color: #A41D33 !important; }
     border: 1px solid var(--darkBG);
    hr { border-color: var(--darkBG); }
  }
  .mw-highlight {
    filter: invert(1);
    color: black;
    background-color: #ececec;
   }
   }
}
}


/* Link Color */
/* Link Color */
Line 73: Line 66:


/* Hover Color */
/* Hover Color */
a:hover, a:focus {color: #032356;}
a:hover, a:focus {filter: brightness(60%);}


/* Hide titles */  
/* Hide titles */  
Line 85: Line 78:
nav.top-bar,
nav.top-bar,
.top-bar.expanded .title-area {
.top-bar.expanded .title-area {
     background: #8D182B;
     background: var(--redrockRed);
}
}


Line 97: Line 90:


#navwrapper {
#navwrapper {
     background: #8D182B;
     background: var(--redrockRed);
}
}


Line 103: Line 96:
ul#top-bar-left li a
ul#top-bar-left li a
  {
  {
     background: #8D182B;
     background: var(--redrockRed);
}
}


ul#top-bar-right li,
ul#top-bar-right li,
ul#top-bar-right li a {
ul#top-bar-right li a {
     background: #8D182B;
     background: var(--redrockRed);
}
}


Line 116: Line 109:
ul#top-bar-right li a:hover {
ul#top-bar-right li a:hover {
     background: #E5E5E5;
     background: #E5E5E5;
     color: #8D182B;
     color: var(--redrockRed);
}
}

Latest revision as of 19:48, 16 April 2026

:root {
  --darkBG: #2d3034; /* background */
  --darkFG: #181a1b; /* foreground */
  --redrockRed: #610215;
}

hr {
  clear: left;
}

.mw-ui-button {
  color: grey;
}

#content { background-color: #eeeeee; }
#bodyContent { background-color: #eeeeee; }
#catlinks { background-color: #eeeeee; }
body { background-color: #eeeeee; }

@media (prefers-color-scheme: dark) {
  body, #content, #mw-content-subtitle, #bodyContent, #catlinks, #toc { 
    background-color: var(--darkBG); 
    .mw-redirectedfrom, #mw-content-text, .mw-specialpagesgroup, #toc {
      color: white;
    }
  }
  #catlinks, #footer-privacy, #footer-about, #footer-disclaimers, #poweredby, .tcAnnouncement, #content, #mw-content-subtitle, .guideTabs, .tcWidgetPage { 
    a {color: #66b1fa !important}
    .label {color: white !important;}
  }
  .tcAnnouncement {
    filter: brightness(0.6) saturate(1.5) contrast(2.8) invert(0.1);
  }
  .guideTabs {
    border: 1px solid var(--darkBG);
    background: var(--darkFG);
  }
  .tcWidgetPage {
    background: var(--darkFG);
    border: 1px solid var(--darkBG);
    .pageTitle, p, dd, ul, li, h2, h3, td, th, .collapsible, caption { color: white; } 
    th, td {
      background-color: var(--darkBG) !important;
      background: var(--darkBG);
      border-color: #a2a9b1 !important;
    }
    .mw-collapsible-toggle:hover { background-color: unset; }
    .mw-collapsible-text { color: #66b1fa !important }
  }
  .categoryBox {
    h2 { color: #C73149 !important; }
    border: 1px solid var(--darkBG);
    hr { border-color: var(--darkBG); }
  }
  .mw-highlight {
    filter: invert(1);
    color: black;
    background-color: #ececec;
  }
}



/* Link Color */
a {color: #0645ad}

/* Hover Color */
a:hover, a:focus {filter: brightness(60%);}

/* Hide titles */ 
.title { display: none; }
#tagline { display: none; }

#searchInput {
    width: 500px;
}

nav.top-bar,
.top-bar.expanded .title-area {
    background: var(--redrockRed);
}

.mw-collapsible-toggle:hover {
    background-color:white;
}

.mw-collapsible-toggle:focus {
    background-color:white;
}

#navwrapper {
    background: var(--redrockRed);
}

ul#top-bar-left li,
ul#top-bar-left li a
 {
    background: var(--redrockRed);
}

ul#top-bar-right li,
ul#top-bar-right li a {
    background: var(--redrockRed);
}

ul#top-bar-left li:hover,
ul#top-bar-left li a:hover,
ul#top-bar-right li:hover:not(.has-form),
ul#top-bar-right li a:hover {
    background: #E5E5E5;
    color: var(--redrockRed);
}