MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 09:06, 29 March 2024

/* All CSS here will be loaded for users of the Citizen skin */

/* Set the max page width for the cog icon in the top-right corner */
:root {
    --width-layout: 100vw;
}

/* Hide the Media, Advanced, etc. tabs on the search page */
.mw-search-profile-tabs {display: none !important;}
.mw-search-createlink {display: none !important;}
#mw-indicator-mw-helplink {display: none !important;} 

/* Hide the Talk/Discussion tabs */
#ca-talk, #pt-mytalk {display: none !important;}

/* Give images a little more margin */
img { margin: 2px 0; }

/* Disable image links for anonymous users. To enable a specific image link (Advanced Reports), use link={{filepath:Image.png}} or link=File:Image.png*/
.image {pointer-events: none;}

/* Class for indenting */
.indent {margin-left: 30px;}

/* Hide the page title on the Main Page */
.page-Main_Page .mw-body-header {display: none;}

.mw-footer {display: none !important;}
.page-actions {display: none;}
#siteSub {display: none;}
body {margin-bottom: 90vh;}

/* We're going to allow the personal menu for now unless customers start using this site */
/* .citizen-personalMenu {display: none;} */

.citizen-search__random {display: none;}

.citizen-body a.image {display: inline;}

/* Make all images have a gray border (most already have them, but not report images) */
img.thumbborder {border: 1px solid #6B6B6B;}

/* Hide the pancake menu bars */
.citizen-drawer__buttonIcon > div {display: none !important;}

/* Show the logo instead */
.citizen-drawer__button {
   background-image: url(/a/resources/assets/logo-icon.svg);
   background-repeat: no-repeat;
   background-size: contain;
}

/* Remove the gray background when hovering */
.citizen-drawer__button {--background-color-quiet--hover: rgba(0,0,0,0);}

/* Remove the gray background when clicking */
.citizen-drawer__button {--background-color-quiet--active: rgba(0,0,0,0);}

/* Remove the pointer-event so it can't be clicked */
.citizen-drawer__button {pointer-events: none;}

/* Hide the blue progress bar that sometimes gets stuck at the top of the page */
.citizen-loading:after {background: none;}

/* Hide the "Redirected from" section */
.mw-redirectedfrom {display: none;}

/* This is used to hide some h2 from the TOC */
.hideH2 {
    color: var(--color-base--emphasized);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 2.4rem;
}

/* Hide the back to top when scrolling down
.citizen-title--hidden .citizen-header__title--page {display: none;}
.citizen-title--hidden .citizen-header__title--site {display: flex;}
*/

/* SalesForce chat */
.embeddedServiceHelpButton .helpButton .uiButton {
	background-color: #576977;
	font-family: "Inter", sans-serif;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
	outline: 1px solid #576977;
}

/* Make Wistia videos float on the right */
.wistia_embed, .wistia_iframe{
    float: right;
    clear: right;
}

/* Resize images that are wider than the screen (phones) /*
.citizen-body img {
    max-width: 100% !important; 
    height: auto !important;
    /*width: auto !important;/*
}

/* Resized image maps (flow charts) don't work correctly so hide them on smaller screen */
@media (max-width:1000px) {
  .noresize {
    display: none !important;
  }
}

/* prettytable class for styling tables */
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px solid darkgray;
  padding: 7px;
  padding-bottom: 2px;
  border-spacing: 0px;
}
.prettytable th, .prettytable td {
  border-top: 1px #aaa solid;
  padding: 3px;
  padding-right: 10px;
}
.prettytable th {
  background: #1976d3;
  text-align: left;
  color: white;
}
.prettytable caption {
  font-weight: bold;
}
.prettytable tr:hover {
    background-color: #F0F8FF;
}
/* Clear after headers */
 h1,h2,h3,h4,h5,h6,.hideH2{
  clear: both;
}

/* Salesforce chat widget */
.embeddedServiceHelpButton .helpButton .uiButton {
  background-color: #00A3FF !important;
  font-family: "Inter", sans-serif !important;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
  outline: 1px solid #00A3FF !important;
}

/* In dark mode turn down the saturation and invert the colors of images and tables */
.skin-citizen-dark img {
  filter: invert(1) hue-rotate(180deg) saturate(.4);
}
/* In dark mode turn exclude some images */
.noinvert {
  filter: none !important;
}
.skin-citizen-dark table, .skin-citizen-dark tr, .skin-citizen-dark td, .skin-citizen-dark .prettytable{
  background:none !important;
  filter: saturate(.8);
}

/* Add a background hover color to prettytable rows */
.prettytable tr:hover {
     background-color: #F0F8FF;
}