Alert: We are in Beta until mid 2022. When you see something not working as expected, please have a look at known bugs in development and/or drop us a line. Thank you!

MediaWiki: Common.css

From tangowiki.org
Jump to: navigation, search
Line 27: Line 27:
 
--error: #FF521B;
 
--error: #FF521B;
 
}
 
}
 +
  
 
/********************* TYPEFACES *********************/
 
/********************* TYPEFACES *********************/
Line 96: Line 97:
 
       url('../fonts/work-sans-v4-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 
       url('../fonts/work-sans-v4-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 
}
 
}
 +
  
 
* {font-family: 'Work Sans', Lato, Roboto, 'Helvetica Neue', Arial, sans-serif;}
 
* {font-family: 'Work Sans', Lato, Roboto, 'Helvetica Neue', Arial, sans-serif;}
Line 116: Line 118:
 
color: var(--fontdark);
 
color: var(--fontdark);
 
}
 
}
 
 
/********************* CATEGORY *********************/
 
/* shows categories*/
 
#catlinks {
 
display:block;
 
margin-top: 40px;
 
}
 
 
/* gets rid of the border*/
 
#catlinks, .catlinks {
 
background-color: inherit;
 
border: none;
 
padding: 0px;
 
font-size: smaller;
 
}
 
 
/* makes a nice line*/
 
#catlinks:before {
 
content: "";
 
display:block;
 
width: 20%;
 
padding-top: 5px;
 
border-top: 5px solid var(--accent1);
 
}
 
 
 
/********************* LINKS *********************/
 
 
a:link {
 
color: var(--link);
 
text-decoration: none;
 
/*border-bottom: 1px solid var(--linkbg);*/
 
/*box-shadow: inset 0 -3px 0 var(--linkbg);*/
 
transition: background 0.2s ease-out;
 
}
 
 
/* Get rid of the lock icon */
 
#content a.external,
 
#content a.external[href^="gopher://"],
 
#content a.external[href^="https://"],
 
.link-https {
 
background: none;
 
padding-right: 1px;
 
}
 
 
#content a.external:after,
 
#content a.external[href^="gopher://"]:after,
 
#content a.external[href^="https://"]:after,
 
.link-https:after {
 
content: " \2197";
 
}
 
 
.btn a:link {color: var(--accentlight);}
 
 
a.new { color: var(--linknew); }
 
 
a:visited { color: var(--linkvisited); }
 
a.new:visited { color: var(--linknewvisited); }
 
 
a:hover,
 
#content a.external:hover {
 
color: var(--linkvisited);
 
background: var(--linkbg);
 
text-decoration:none;
 
}
 
 
a.new:hover { color: var(--linknewvisited); }
 
 
a:active { color: var(--tweekiblue); }
 
 
 
/* Button */
 
#ca-edit-ext,
 
.btn a:link,
 
.btn-primary a:link,
 
.btn-primary,
 
.btn-group>.btn:first-child {color: var(--fontlight);}
 
 
.btn.btn-primary.btn-block > b.caret {color: var(--fontlight);}
 
 
 
/********************* HEADINGS *********************/
 
h1, h2, hr {
 
color: var(--accent);
 
}
 
 
h1 {font-size: 5rem;}
 
 
h2 {margin-top: 30px;}
 
 
/*h1#firstHeading.firstHeading, {
 
font-family: 'Lato', sans-serif;
 
color: #002A4A;
 
}*/
 
 
/********************* MAIN PAGE / BUTTONS *********************/
 
/*hide page title on homepage/main page */
 
body.page-Main_Page.action-view h1.firstHeading,
 
body.page-Main_Page.action-submit h1.firstHeading { display: none; }
 
 
.blurb {font-size: larger;}
 
 
/*.blurbsub */
 
 
button,
 
.mw-ui-button.mw-ui-progressive,
 
.mw-ui-button.mw-ui-primary {
 
background: var(--tweekiblue);
 
border: 1px solid var(--tweekiblue);
 
color: var(--fontlight);
 
}
 
 
button:hover,
 
.mw-ui-button.mw-ui-progressive:hover,
 
.mw-ui-button.mw-ui-primary:hover {
 
background: var(--fontdark);
 
border: 1px solid var(--fontdark);
 
color: var(--fontlight);
 
}
 
 
.mw-ui-input:focus {
 
    box-shadow: inset 0 0 0 2px var(--accentloud);
 
    border-color: var(--accentloud);
 
    outline: 0;
 
}
 
 
 
/********************* BACKGROUND *********************/
 
body {background-color: var(--accentlight1);}
 
 
.mw-body {border: 1px solid var(--accentlight1);}
 
 
#mw-page-base {
 
background-image: linear-gradient(#ffffff 50%,#FFE9CF 100%);
 
background-color: #ffffff;
 
}
 
/*********************** HEADER/NAVBAR *********************/
 
/*https://css-tricks.com/snippets/css/css-box-shadow/*/
 
#mw-head.navbar-inner {
 
    background-image: linear-gradient(var(--accent2) 50%,var(--accent1) 100%);
 
}
 
#mw-navigation.navbar {border-bottom-color: var(--accent); }
 
/* -webkit-box-shadow: 0 4px 3px -3px var(--linkvisited);
 
-moz-box-shadow: 0 4px 3px -3px var(--linkvisited);
 
box-shadow: 0 4px 3px -3px var(--linkvisited);*/
 
 
/********************* ERRORBOX ********************/
 
 
.errorbox {
 
color: var(--accentloud2);
 
background-color: var(--accentloud3);
 
border-color: var(--accentloud);
 
}
 
 
.warningbox {
 
color: var(--warning);
 
border-color: var(--warningborder);
 
background-color: var(--warningbg);
 
}
 
 
div.errormessage {color: var(--error);}
 
 
/************************BODY PAGE *********************/
 
/*sets the next paragraph a bit further off the list bottom (new: .9em) */
 
.mw-content-ltr ol {margin: .3em 0 .9em 3.2em;}
 
 
/************************FORMS *********************/
 
/*makes the checkbox bigger */
 
#sfForm select, #sfForm input[type="checkbox"] {font-size: larger;}
 
 
/********************* QUOTE ********************/
 
blockquote.quote {
 
border-left: 5px solid var(--accent1);
 
}
 
 
blockquote.quote span.quotetext {font-style: italic;}
 
blockquote.quote span.quotesource {font-size: small;}
 
 
 
/********************* TABLES ********************/
 
 
table.brand,
 
table.cert {
 
max-width: 100%;
 
border-collapse: separate;
 
text-align: left;
 
padding: 20px;
 
}
 
 
.brandaspect {
 
border: 4px dotted var(--fontdark);
 
border-radius: 4px;
 
}
 
 
/*
 
background-color: var(--background2);
 
padding-left-width: 40px;
 
border: 4px solid var(--background2);
 
margin: 1em;
 
-webkit-border-radius: 4px;
 
-moz-border-radius: 4px;
 
border-radius: 4px;
 
*/
 
 
.brand th,
 
.brand td,
 
.cert th,
 
.cert td {
 
padding-bottom: 15px;
 
padding-right: 15px;
 
}
 
 
/********************* FORMS *************************/
 
 
input {color: var(--fontdark);}
 
 
/********************* HELPBOX *************************/
 
 
div.helpbox {
 
background-color: var(--background2);
 
padding: 15px;
 
font-size: smaller;
 
}
 
 
/********************* CONTENT NOTEBOXES *************************/
 
 
div.box {
 
background-color: var(--background2);
 
padding: 15px;
 
}
 
 
div.box.info {
 
border: 1px solid var(--medium);
 
border-left-width: 5px;
 
background-color: var(--background1);
 
}
 
 
 
div.box.alert {
 
border: 1px solid var(--warningborder);
 
border-left-width: 5px;
 
background-color: var(--warningbg);
 
}
 
 
/********************* SONG & FESTIVAL *************************/
 
 
.songintro,
 
.festivalintro {
 
font-size:75%;
 
font-weight: bold;
 
}
 
 
/*
 
.festivalissue {
 
border: 4px dotted var(--fontdark);
 
border-radius: 4px;
 
/*border-collapse: collapse;*/
 
/*padding: 10px;*/
 
}*/
 
 
/********************* MAIN PAGE *************************/
 
/* Boxen in Übersicht */
 
.panel-footer {
 
background-color: var(--background1);
 
}
 
 
div.panel-heading {
 
background-image: linear-gradient(to bottom,var(--background1) 0,var(--background2) 100%);
 
color: var(--fontlight);
 
}
 
 
div.panel-heading.mainsong {
 
background-image: url("/images/4/44/Start_radio01.jpg");
 
min-height: 75px;
 
color: var(--fontlight);
 
}
 
 
div.panel-heading.mainfestival {
 
background-image: url("/images/2/2a/Start_music01.jpg");
 
min-height: 75px;
 
color: var(--fontlight);
 
}
 
 
 
/********************* RECORDINGS REC: *********************/
 
.recordtable3 {
 
margin: 1em 0;
 
width: 90%;
 
border-collapse: collapse;
 
text-align: left;
 
}
 
.recordtable3 th {
 
font-size: smaller;
 
font-weight: normal;
 
color: var(--accentloud);
 
padding: .5em .4em .1em .3em;
 
/*border-bottom: 1px solid #ccc;*/
 
}
 
.recordtable3 td {
 
/*border-bottom: 2px solid #c383a6; */
 
border-bottom: 1px solid  var(--accentlight);
 
color: var(--fontdark);
 
padding: .1em .4em 1em 1em;
 
}
 
 
/********************* BUTTON *************************/
 
span.bttn {
 
    background: var(--tweekiblue);
 
    border: 1px solid var(--tweekiblue);
 
    cursor: pointer;
 
    padding: 2px 7px;
 
}
 
 
span.bttn a {
 
    color: var(--fontlight);
 
}
 
 
span.bttn:hover {
 
    background: var(--fontdark);
 
    border: 1px solid var(--fontdark);
 
}
 
 
span.bttn a:hover {
 
background: inherit; }
 

Revision as of 19:52, 24 May 2019

/********************* COLORS *********************/
:root {
--fontdark: #202754;
--fontlight: #FEFEFE;
--background1: #F2EFF1;
--background2: #F4F1F3;
--accent: #8F93A9;
--accent1: #A3A6B8;
--accent2: #BEC0CD;
--accentloud: #7E84A8;
--accentlight: #D5D6DF;
--accentlight1: #fafafa; /*#DCDDE4;*/

--link: #2589BD; /*#0C6DFF; #0280FF; #3E73A8;*/
--linkvisited: #2E6083; /* #003D68; */
--linknew: #C490A4;
--linknewvisited: #8A224A;
--wow: #E5DD8B;
--linkbg: #EAEBEF;

--tweekiblue: #265A88;

--yes: #AFD5AA;
--warning: #703F04;
--warningbg: #FAC98E;
--warningborder: #FCB87F;
--error: #FF521B;
}


/********************* TYPEFACES *********************/
/*TYPEFACE */
/*@import url(https://fonts.googleapis.com/css?family="Works Sans");
* {font-family: 'Work Sans',sans-serif;}*/

/* work-sans-300 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Work Sans Light'), local('WorkSans-Light'),
       url('../fonts/work-sans-v4-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v4-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-regular - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Work Sans'), local('WorkSans-Regular'),
       url('../fonts/work-sans-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-500 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: local('Work Sans Medium'), local('WorkSans-Medium'),
       url('../fonts/work-sans-v4-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v4-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-600 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'),
       url('../fonts/work-sans-v4-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v4-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-700 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Work Sans Bold'), local('WorkSans-Bold'),
       url('../fonts/work-sans-v4-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v4-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-800 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Work Sans ExtraBold'), local('WorkSans-ExtraBold'),
       url('../fonts/work-sans-v4-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v4-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-900 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 900;
  src: local('Work Sans Black'), local('WorkSans-Black'),
       url('../fonts/work-sans-v4-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v4-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


* {font-family: 'Work Sans', Lato, Roboto, 'Helvetica Neue', Arial, sans-serif;}


/*after this, our base size to count from is about 10px (browser standard)*/
html {
	font-size: 62%;
	}

body,
p,
table p {
	font-size: 1.6rem;
	}

body,
.navbar-default,
.navbar-brand {
	color: var(--fontdark);
	}