Foreground.css: verschil tussen versies

Versie van 21 jan 2019 13:31

/* *** style file for mediawiki skin Foreground for ITforResearch.uu.nl ***
  * For more info see https://www.mediawiki.org/wiki/Skin:Foreground or
  * https://foreground.wikiproject.net/wiki/Main_Page.
  * Based on https://foundation.zurb.com.
  */

/* define UU colors.
 * We do not need to define "black" and "white" (they are already there).
 * See https://www.uu.nl/organisatie/huisstijl/huisstijlelementen/kleur.
 */
:root {
  --uu-yellow: #ffcd00;
  --uu-red: #c00a35;
  --uu-purple: #5b2182;
  --uu-lightblue: #5287c6;

  --rj-blue: #0012f0;
}

div.mw-category-generated {
     display: none;
}

/* *** start width of text *** */
/* top-bar width, requires setting in LocalSettings.php: 
 * $wgForegroundFeatures = array( [...] 'NavWrapperType' => 'contain-to-grid', [...] ); 
 */
.contain-to-grid .top-bar {
  max-width: 62rem;
}

/* body text and footer width */
.row {
  max-width: 62rem;
}
/* *** end width of text *** /

/* remove tagline (voorbeeld uit .../skins/foreground/assets/stylesheets/foreground.css) */
h3#tagline {
  display:none;
}

/* real black body text for the whole wiki */
body {
  color: black;
}

/* For paragraphs, do not have vertical space following the paragraph, but do have it preceding it.
 * We need it, otherwise we need 2 line breaks to have empty vertical space between paragraphs.
 * We do not want vertical space after a paragraph because it looks silly if it is followed by e.g.
 * a bullet list.
 * Note that vertical space can be "eaten", that is called "css margin collapse". The largest wins.
 * Therefore I leave the margin-bottom at h1, h2, etc., in case they are followed by e.g. a bullet list.
 */
p {
  margin-top: 0.8rem;
  margin-bottom: 0rem;
}

/* for bullet and numbered list, do not have vertical space preceeding the list */
/* change last unit to either have no (1.2em) or a small indent (2em) before the bullet/number */
.mw-content-ltr ul, .mw-content-ltr ol {
    margin: 0 0 0 1.2em;
}

/* font size smaller for the whole wiki */
html {
  font-size: 90%;
}

/* *** start with yellow top bar & black text *** */
/* naam van de site in zwart */
.title-name {
  color: black;
  font-family: 'Merriweather', serif; 
  font-size: 110%;
}

/* text size in top bar (but not of the name of the site) */
.top-bar-section ul li > a {
    font-size: 90%;
}

/* color of the triangle after a drop down list in the top-bar */
.top-bar-section .has-dropdown > a:after {
    border-color: black transparent transparent transparent;
}

nav.top-bar,
.top-bar.expanded .title-area {
  background: var(--uu-yellow);
  color: black;
}

/* top-bar (als je alleen voor textbreedte wil, gebruik ".top-bar") */
#navwrapper {
  background: var(--uu-yellow);
  color: black;
  border-bottom: 2px solid var(--uu-red);
  border-top: 2px solid var(--uu-red);
}

ul#top-bar-left li,
ul#top-bar-left li a {
  background: var(--uu-yellow);
  color: black;
}

ul#top-bar-right li,
ul#top-bar-right li a {
  background: var(--uu-yellow);
  color: black;
}

/* zorgt voor aangepaste gele kleur in drop-down lijst in header */
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: #ffff00;
}

/* if the topbar is small, you'll get the word "Menu". Change its color to black */
.top-bar .toggle-topbar.menu-icon a {
  color: black;
}

/* if the topbar is small, you'll get three horizontal bars. Change their color to black */
.top-bar .toggle-topbar.menu-icon a span::after {
color: black;
  box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black;
}
/* *** end yellow top bar & black text *** */

/* *** link colors *** */
/* unvisited link; visited link */
a:link, a:visited {
  color: var(--rj-blue);
}

/* mouse over link, selected link */
a:hover, a:active {
  color: var(--uu-lightblue);
  /* text-decoration: underline; */
}

/* the color of a link to a page that does not (yet) exist */
a:link.new {
  color: var(--uu-red);
}

/* voor een symbooltje na elke external link. Zie ook 
 * https://en.m.wikipedia.org/w/index.php?title=Help:External_link_icons 
 */
#content a.external {
/*  background: url("https://itforresearch.uu.nl/UUfiles/external-link-ltr-icon.png") center right no-repeat; */
  background: url("/files/external-link-ltr-icon.png") center right no-repeat;
  padding-right: 16px;
}
/* *** end link colors *** */

/* *** start change the color of the "labels" *** */
.label {
  background-color: var(--uu-yellow);
  color: black;
}

/* make sure links have the correct color */
a.label:hover, a.label:focus {
    color: var(--uu-lightblue);
}
/* *** end change the color of the "labels" *** */


/* *** headings *** */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: 'Merriweather', serif; 
  color: var(--uu-purple);
}

h5, .h5, h6, .h6 {
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  color: var(--uu-purple);
}

h1#firstHeading {
    font-size: 1.6rem;
}

/* volgens mij niet gebruikt, is "= Kop1 =" */
h1, .h1 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 0px;
 }

h2, .h2 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 0.6rem;
  /* border-bottom: 1px solid #a2a9b1; */
}

h3, .h3 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
 }

h4, .h4 {
  font-size: 1.1rem;
  font-weight: bold;
  font-style: italic;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
 }

h5, .h5 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 0px;
 }

h6, .h6 {
  font-size: 1.1rem;
  font-weight: bold;
  font-style: italic;
  margin-top: 2rem;
  margin-bottom: 0px;
 }
/* *** end headings *** */

/* fontsize of references */
ol.references {
  font-size: 0.8rem;
} 

/* *** start to change [edit] link at headings *** */
.mw-content-ltr .mw-editsection {
  font-size: 0.8rem;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

/* use this if you don't want an [edit] link at section headings */
.mw-editsection { display:none!important; }

/* use this if you want a pencil icon next to the [edit] link */
/*
.mw-content-ltr .mw-editsection a:link {
  background: url("http://www.nber.org/images/pencil_arrow.png") center right no-repeat;
  padding-right: 18px;
}
*/
/* *** end to change [edit] link at headings *** */

/* *** start change TOC *** */
/* place table of contents at the right */
#toc { 
  float: right;
  width: 30%;
  font-size: 90%;
}

/* en doe geen paragraafnummers in de TOC */
/* voor level nog te tonen zie LocalSettings.php $wgMaxTocLevel */
.tocnumber { 
  display: none; 
}

#toc ul {
  margin-left: 1.2em;
  font-size: 90%;
  list-style-type: disc;
  color: var(--rj-blue);
}

#toc h2 {
  font-size: 90%;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* zet de [hide] bij de TOC iets meer naar links */
.toctoggle {
  font-size: 85%;
  margin-left: -2px;
  color: var(--rj-blue);
}

.toctoggle a {
  color: var(--rj-blue);
  line-height: inherit;
}
/* *** end change TOC *** */

/* formatting blockquotes */
blockquote {
  float: right; 
  width: 50%; 
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
}

/* formatting plaatjes (hier: aan de rechterkant) */
div.tright {
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
}

/* formatting breadcrumbs */
.jsbc-breadcrumbs {
  top: -30px;
  border-width: 0px;
  background-color: transparent;
}

/* align the "powered by" icons (mediawiki and cc-by) right */
ul#poweredby {
  text-align: right;
}

/* make sure the drop down list from the right-side buttons in the top bar cover the "Action" button and not the other way around. */
/* This was necessary after I made the top-bar "fixed" (stationary when scrolling the page) */
a#actions-button {
  /* default was 499 */
  z-index: 50;
}