MediaWiki:Common.css

/********************* COLORS *********************/
:root {
--fontdark: #2F4858;
--fontlight: #fafafa;
--background1: #F2EFF1;
--background2: #F4F1F3;

--bgbrand: #E7E7E7;
--bg2brand: #E9E9E9;

--bgcertificate: #E7E7E7;
--bg2certificate: #E9E9E9;

--bgorganisation: #E7E7E7;
--bg2organisation: #E9E9E9;

--bgfashion: #F6DFD7;
--bg2fashion: #F4D9CF;

--bgcosmetics: #E6EBF2;
--bg2cosmetics: #EBEEF4;

--bgfood: #E7F2E6;
--bg2food: #EBF4EB;

--accent: #F2A794;
--accent1: #F5BFB1;
--accentlight: #F4D9CF;
--accentloud: #FF99C9;
--accentbg: #FEF9F7;
--accentheading: #002A4A;
--contrast: #7D7C84;

--fashion: #F2A794; /*rosa*/
--food: #A9C9BC; /*green*/
--cosmetics: #A9BBCA; /*blue*/

--titlefashion: #F2A794;
--titlecosmetics: #A9BBCA;
--titlefood: #A9C9BC;

--brand: #F2A794; /*rosa*/
--organisation: #F2EFF1;  /*lightgrey*/
--certificate: #F2EFF1; /*lightgrey*/

--titlebrand: #2F4858;  /*=fontdark*/
--titleorganisation: #2F4858;
--titlecertificate: #2F4858;


--link: #0077BA;
--linkvisited: #006E97;
--linknew: #B6465F;
--linknewvisited: #953A4E;
--wow: #EDFF8A; /*#D8F1A0;*/
--linkbg: #F4EFF3;

--medium: #97ACBF;

--tweekiblue: #265A88;

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

--msggreen: #6F8D57; /*approved revs*/
--checkred:#FF8360;
--checkorange:#FBB38A;
--checkyellow:#E8E288;
--checkgreen:#ACC18A;
--checksupergreen:#417B5A;
--checkgrey:#D7E3EA;
}

/******************** UNUSED 
--bgtopic4: #E5E3E4;
--bt2topic4: #E8E5E7;
--topic4: #7D7C84; /*PRODUCT ? GREY*/
****************************/

/********************* TYPEFACES *********************/
/*FONT */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

* {font-family: Rubik, Poppins, Lato, Roboto, Arial, sans-serif;}

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

body,
p,
table p {
	font-size: 1.6rem;
	text-align: left;
	font-family: Rubik, Poppins, Lato, Roboto, Arial, sans-serif;
	}

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

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

/* Arrow instead of 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); 
text-decoration:none;
}

a:visited { color: var(--linkvisited); 
text-decoration:none;}
a.new:visited { color: var(--linknewvisited); 
text-decoration:none;}

a:hover,
#content a.external:hover { 
	color: var(--linkvisited); 
	background: var(--linkbg); 
	text-decoration:none;
	}

a.new:hover { color: var(--linknewvisited); 
text-decoration:none;}

a:active { color: var(--tweekiblue); }

/* Button */
#ca-edit-ext,
.btn a:link,
.btn-primary a:link,
.btn-primary {color: var(--fontlight);}

.btn.btn-primary.btn-block > b.caret {color: var(--fontlight);}


/********************* HEADINGS *********************/
h1 {color: var(--fontdark);}

h2, hr {
	color: var(--accent);
	}

h1 {font-size: 5rem;}

h2 {margin-top: 30px;}

/*h1#firstHeading.firstHeading, {
	font-family: 'Lato', sans-serif;
	color: var(--fontdark);
	}*/

h1#firstHeading.firstHeading,
.tweekiFirstHeading,
.firstHeading {text-align: left !important;}

/********************* 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,
#ca-edit {
	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;
	}


/********************* MAIN PAGE IMAGES *************************/
img.teaser {
	max-width: 100%;
	height: auto;
	}

/********************* BACKGROUND *********************/
/*** body background & edit area with light background ***/
/*body {
	background-color: var(--accentbg); 
	} 

.mw-body {
	border: 1px solid var(--accentbg);
	} */

#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/*/
/* schön, aber ein bizzle zu rosa */
/*#mw-head.navbar-inner {
	background-image: linear-gradient(var(--accent1) 50%,var(--accent) 100%);
	}*/

#mw-head.navbar-inner {
-webkit-box-shadow: 0px 3px 20px 0px rgba(107,107,107,0.25);
-moz-box-shadow: 0px 3px 20px 0px rgba(107,107,107,0.25);
box-shadow: 0px 3px 20px 0px rgba(107,107,107,0.25);
}

/* gehört farblich dazu */
/*#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;}

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


.page-title:after {
 	margin: 0 auto; /* This will center the border. */
	width: 50%; /* Change this to whatever width you want. */
	padding-top: 20px; /* This creates some space between the element and the border. */
	border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
	}

/************************FORMS *********************/
/*makes the checkbox bigger */
#sfForm select, #sfForm input[type="checkbox"] {font-size: larger;}

/********************* BRANDS ********************/
#mw-content-text table td.profile {font-size: larger;}

blockquote.quote {
	 border-left: 5px solid var(--accent1);
	}

blockquote.quote span.quotetext {font-style: italic;}
blockquote.quote span.quotesource {font-size: small;}

/*
label.checkboxLabel {
	width: 200px;
	display: block;
	float: left;
	}*/


/********************* TABLES ********************/

table.brand,
table.cert,
table.organisation {
	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,
.organisation th,
.organisation td {
	padding-bottom: 15px;
	padding-right: 15px;
	}

/********************* PANEL BOXES *************************/
.panel.panel-default {
	-webkit-box-shadow: 3px 3px 10px 0px rgba(107,107,107,0.5);
	-moz-box-shadow: 3px 3px 10px 0px rgba(107,107,107,0.5);
	box-shadow: 3px 3px 10px 0px rgba(107,107,107,0.5);
}

.panel-heading {
	background-image: linear-gradient(to bottom,var(--background1) 0,var(--background2) 100%);
	}

.panel-heading.fashion {
	color: var(--titlefashion);
	background-image: linear-gradient(to bottom,var(--bgfashion) 0,var(--bg2fashion) 100%);
	}

.panel-heading.cosmetics {
	color: var(--titlecosmetics);
	background-image: linear-gradient(to bottom,var(--bgcosmetics) 0,var(--bg2cosmetics) 100%);
	}

.panel-heading.food {
	color: var(--titlefood);
	background-image: linear-gradient(to bottom,var(--bgfood) 0,var(--bg2food) 100%);
	}

.panel-heading.brand {
	color: var(--titlebrand);
	background-image: linear-gradient(to bottom,var(--bgbrand) 0,var(--bg2brand) 100%);
	}

.panel-heading.organisation {
	color: var(--titleorganisation);
	background-image: linear-gradient(to bottom,var(--bgorganisation) 0,var(--bg2organisation) 100%);
	}

.panel-heading.certificate {
	color: var(--titlecertificate);
	background-image: linear-gradient(to bottom,var(--bgcertificate) 0,var(--bg2certificate) 100%);
	}

.panel-footer {
	background-color: var(--background1);
	padding: 20px;
	}

.panel.brand {
	border: 1px solid var(--background1);
	box-shadow: rgba(145, 106, 112, 0.15) 0 6px 24px;
	transition: box-shadow 0.3s ease-out;
	border-left: 5px solid var(--titlebrand);
	}

.panel.fashion {
	border: 1px solid var(--background1);
	box-shadow: rgba(145, 106, 112, 0.15) 0 6px 24px;
	transition: box-shadow 0.3s ease-out;
	border-left: 5px solid var(--titlefashion);
	}

.panel.organisation {
	border: 1px solid var(--background1);
	box-shadow: rgba(145, 106, 112, 0.15) 0 6px 24px;
	transition: box-shadow 0.3s ease-out;
	border-left: 5px solid var(--titleorganisation);
	}

.panel.cosmetics {
	border: 1px solid var(--background1);
	box-shadow: rgba(145, 106, 112, 0.15) 0 6px 24px;
	transition: box-shadow 0.3s ease-out;
	border-left: 5px solid var(--titlecosmetics);
	}

.panel.food {
	border: 1px solid var(--background1);
	box-shadow: rgba(145, 106, 112, 0.15) 0 6px 24px;
	transition: box-shadow 0.3s ease-out;
	border-left: 5px solid var(--titlefood);
	}

.panel.certificate {
	border: 1px solid var(--background1);
	box-shadow: rgba(145, 106, 112, 0.15) 0 6px 24px;
	transition: box-shadow 0.3s ease-out;
	border-left: 5px solid var(--titlecertificate);
	}

/********************* CERTIFICATE *************************/

input {color: var(--fontdark);}


/********************* CONTENT NOTEBOXES *************************/
/* Template:Box and Template:BoxInfo */
div.box {
	background-color: var(--background2);
	padding: 10px;
	margin-bottom:5px;
	}

div.box.help {
	border: 1px solid var(--medium);
	border-left-width: 5px;
	background-color: var(--background1);
	}


div.box.alert,
div.box.template {
	border: 1px solid var(--warningborder);
	border-left-width: 5px;
	background-color: var(--warningbg);
	}

div.box.info {
	background-color: var(--background2);
	padding: 15px;
	font-size: smaller;
	}

div.box.tldr {
	border: 1px solid var(--wow);
	border-left-width: 5px;
	background-color: var(--tldrbg);
	}

/********************* LABEL CHECK *************************/
/********************* GREENPEACE LABELCHECK *************************/
.labelcheck {color:#F4F1F3;}
/* Template:LabelCheckGreenpeaceAT2018 */
div.labelcheck {
	background-color: var(--background2);
	padding: 10px;
	margin-bottom:5px;
	color: var(--fontdark);
	}

/* Leafs werden hellgrau */
div.labelcheck .glyphicon {color: var(--checkgrey);
	}

div.labelcheck.00 {
	background-color: var(--checkred);
	}


div.labelcheck.01 {
	background-color: var(--checkorange);
	}

div.labelcheck.02 {
	background-color: var(--checkyellow);
	}

div.labelcheck.03 {
	background-color: var(--checkgreen);
	}

div.labelcheck.05 {
	background-color: var(--checksupergreen);
	}

/********************* BrandWiki Page Status *************************/
.pagestatus {color:#F4F1F3;}

/* Template:BrandPageStatus */
div.pagestatus,
span.pagestatus {
	background-color: var(--background2);
	padding: 5px;
	color: var(--fontdark);
	float: right;
	}

/* Stars werden hellgrau */
div.pagestatus .glyphicon,
span.pagestatus .glyphicon {color: var(--checkgrey);
	}

div.pagestatus.01,
span.pagestatus.01 {
	background-color: var(--checkorange);
	}

div.pagestatus.02,
span.pagestatus.02 {
	background-color: var(--checkyellow);
	}

div.pagestatus.03,
span.pagestatus.03 {
	background-color: var(--checkgreen);
	}

/********************* Approved Revs *************************/
/*margin around the message*/
#contentSub, #contentSub2 {
	color: var(--fontdark);
 	margin: 0 0 5px 0;
	}

/* approved star */
span.approvedAndLatestMsg {
	color: var(--msggreen);
padding-bott
	}
span.approvedAndLatestMsg:before {
	content: "\02605 ";
	}

/* not approved pencil*/
span.notLatestMsg {
	 color: var(--checkred);
	}
span.notLatestMsg:before {
	content: "\270E ";}
	}

/********************* Boxen *************************/
.successbox {
	color: var(--checksupergreen);
	border-color: var(--checkgreen);
	background-color: var(--checkgreen);
	}

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

/********************* Editing *************************/
.editing {color: var(--accentloud);} /*checkred*/

/********************* Claim Startpage *************************/
.claim {
color: var(--accent);
/*font-variant: small-caps;*/
font-weight: bold;
font-style: italic;
font-family: 'Merriweather', serif;
font-size: larger;
}

/********************* INPUT BOX / SEARCHBOX *************************/
.mw-inputbox-centered {margin-top: 1.5em;}