MediaWiki:Citizen.css: Difference between revisions

Revision as of 12:54, 13 October 2022

/* 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: 1800px;
    --width-toc: 250px;
}

/* 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;}

.last-modified-bar {display: none;}
.page-actions {display: none;}
#siteSub {display: none;}

/* 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(/o/resources/assets/logo-icon.svg);}

/* 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: #a7bde5;
  text-align: left;
}
.prettytable caption {
  font-weight: bold;
}
/* 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;
}

/* Make list of articles in the footer display better */
.mw-footer ul {
    display: unset;