MediaWiki:Tweeki.css
Uit TheaterEncyclopedie
Opmerking: nadat u de wijzigingen hebt gepubliceerd is het wellicht nodig uw browsercache te legen.
- Firefox / Safari: houd Shift ingedrukt terwijl u op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
- Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
- Internet Explorer / Edge: houd Ctrl ingedrukt terwijl u op Vernieuwen klikt of druk op Ctrl-F5
- Opera: druk op Ctrl-F5.
/* Placeholder Doorzoek TheaterEncyclopedie rechtsboven */
.search-query.form-control::placeholder {font-size: 12px;}
.form-inline .form-control,.form-inline .mw-htmlform-field-HTMLTextField input,.form-inline .mw-input select,.form-inline .mw-input textarea,.form-inline body #contentwrapper #maincontentwrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,.mw-htmlform-field-HTMLTextField .form-inline input,.mw-input .form-inline select,.mw-input .form-inline textarea,body #contentwrapper #maincontentwrapper .oo-ui-textInputWidget .form-inline .oo-ui-inputWidget-input {
display: inline-block;
vertical-align: middle;
width: 200px;
}
@font-face {
font-family: "MetaWeb";
src: url("/w/images/fonts/MetaWeb-Book.woff") format("woff");
}
@font-face {
font-family: "MetaWeb";
src: url("/w/images/fonts/MetaWeb-BookIta.woff") format("woff");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "MetaWeb";
src: url("/w/images/fonts/MetaWeb-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "MetaSerifWeb-bold";
src: url("/w/images/fonts/MetaSerifWeb-Bold.woff") format("woff");
/*font-weight: bold;
font-style: normal;*/
}
/* Bootstrap 4.4 aanpassingen */
/* Definieer de lettergrootte 145% - iets vergroot; standaard ~140% */
/* Opnieuw aanpassen ter compensatie voor BS-4 - 16px */
body {
font-size: 100%;
}
/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
h2.portal-header {
letter-spacing: 0.8em;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
img {
display: inline-block;
max-width: 100%;
height: auto;
}
.card-header {
background-image: radial-gradient(farthest-corner circle at right bottom, #cccccc, #DBDBDB, #f0f0f0);
font-weight: bold;
min-height: 50px;
}
/* CSS voor Personen-, Voorstellingen-, Theaters- en Thema's pagina */
h4.titel-zoeken-op {font-size:18px;}
.titel-zoeken-op a { color: #333;}
.footer-zoeken-op {font-size:14px;}
.footer-zoeken-op a { color: #337ab7; text-decoration: none;}
/* CSS voor Portaal */
#showcase-portal {
min-height: 250px;
position: relative;
}
#overlay-portal {
background: rgba(204,204,204,0.6);
position: absolute;
top: 60px;
left: 0;
width: 100%;
height: 50%;
z-index: 2;
}
.portal-header {
color: white;
letter-spacing: 0.2em;
line-height: 1.5;
z-index: 3;
}
/* Seizoenpagina banner */
#seizoenpagina {
min-height: 250px;
position: relative;
}
.with-navbar.with-navbar-fixed {
padding-top: 75px;
}
/* Jaarpagina banner */
#jaarpagina {
min-height: 250px;
position: relative;
}
/*Header zonder overlay */
#header-zonder-overlay{min-height: 250px; background-repeat: round;}
#img-thumb{display: block; max-width: 100%;height: auto; background-repeat: round;}
/* CSS voor Sjabloon Box en de bijbehorende subonderdelen die gebruikt worden voor Persoon, Prodcutie, Producent, Locatie, Werk, etc. */
/* Toevoeging/correctie om de rating-sterren op een rij weer te geven - ipv onder elkaar */
span.box-rating > span > img {display:inline-flex;}
/* Opmaak voor de striped tabel in de alle infoboxen */
.box-table-sm {color: black;}
.box-rij {color: #337ab7; line-height: 15px;}
.box-label {color: black; width: 40%; }
.box-info { width: 60%; color: black;}
.box-info a:link, .box-info a:visited {color: #337ab7;}
.box-info a:hover {text-decoration: none; color: black;}
.box-info a.new {text-decoration: none; color: #ba0000;}
.box-info a.new:hover {text-decoration: none; color: #ba0000;}
/* Opmaak voor titeltekst in de header van alle infoboxen */
h3.card-header {min-height: 50px;position: relative;}
/* Opmaak voor content van de footer van alle infoboxen */
/* Shariff buttons twitter en facebook op één rij */
/* .box-footer .shariff { width: 280px;} */
.box-footer button.oo-ui-inputWidget-input {width: 110px; margin-left: 4px;}
.box-footer span.oo-ui-iconElement-icon {display:none;}
/* Opmaak voor overzicht titel 2 in infobox Werk */
.box-footer ul.smw-format {border:none; background-color: white;}
/* box-reactie */
.box-reactie span > img {display:inline-flex;}
/* Aanpassen kleur van de section-edit link naar VE */
a.mw-editsection-visualeditor {color: #ccc;}
/* IdP Tabellen voor de Theater-CV op persoonspagina's ook volgens Google leesbaar op mobiel */
[role="region"][aria-labelledby][tabindex] {
overflow: auto;
}
[role="region"][aria-labelledby][tabindex]:focus {
outline: .1em solid rgba(0,0,0,.1);
}
/* Hieronder staan alle benodigde Bootstrap 3 CSS */
/* BM: Flex row - o.a. voor Hoofdpagina, Personenpagina etc. */
@media only screen and (min-width : 481px) {
.flex-row.row {
display: flex;
flex-wrap: wrap;
}
.flex-row.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
/* BM: Grow content in columns in flex-row */
.flex-row .panel,
.flex-row .thumbnail,
.flex-row .caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
/* BM: Layout body in flex-row */
.flex-row .panel-body {
display: flex;
flex-direction:column;
flex-grow:1;
}
.flex-text {
flex-grow: 1;
}
.flex-row img {
width: 100%;
}
/* BM: Herdefinitie Primary-button - m.n. Tweeki edit button */
.btn-primary {
color: #fff;
background-color: #BC0031;
border-color: #A00020;
background-position: 0 -33px;
}
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #A00020;
border-color: #A00020;
background-position: 0 -32px;
}
.btn-primary:hover {
color: #fff;
background-color: #A00020;
border-color: #A00020;
background-position: 0 -32px;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #A00020;
border-color: #A00020;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
color: #fff;
background-color: #A00020;
border-color: #A00020;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
background-color: #A00020;
border-color: #A00020;
}
.btn-primary .badge {
color: #BC0031;
background-color: #fff;
}
/* Definieerd het lettertype voor standaard teksten */
body,
p {
font-family:'MetaWeb', Arial;
}
/* Definieer het lettertype voor de headers */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family:'MetaSerifWeb-bold', cursive;
/* font-weight: 400; heeft hier geen effect */
}
/* BM: Scaling font in Edit button */
#ca-edit-ext {
font-family: Arial!important;
/*font-size: 96.55%!important; */
}
/* Definieren van styling van links in aparte class */
span.uvalinks a {
color: #404040 !important;
/*color: #231F20;*/
}
span.uvalinks a:link {
text-decoration: underline !important;
}
span.uvalinks a:visited {
text-decoration: underline;
}
span.uvalinks a:hover {
color: #BC0031 !important;
text-decoration: underline;
}
span.uvalinks a:active {
text-decoration: underline;
}
:root {
--thema-kleur:#004E92;
--thema-accentkleur:#BC0031;
--thema-tekstkleur:#231F20;
}
/* BM: Gekoppeld input velden voor Semantisch Zoeken */
.input-group-addon {
border-left-width: 0;
border-right-width: 0;
}
.input-group-addon:first-child {
border-left-width: 1px;
}
.input-group-addon:last-child {
border-right-width: 1px;
}
/* BM: Carrousel met "fading" i.p.v. slider - bron : https://codepen.io/redfrost/pen/QwWMwb */
/* Carousel Fading slide */
.carousel-fade .carousel-inner { background: none; } /* BM: was #000 */
.carousel-fade .carousel-control { z-index: 2; }
.carousel-fade .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .next.left,
.carousel-fade .prev.right,
.carousel-fade .item.active { opacity: 1; }
.carousel-fade .active.left,
.carousel-fade .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
/* Safari Fix */
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* Carousel Control custom */
.carousel-control .control-icon {
font-size: 48px;
height: 30px;
margin-top: -15px;
width: 30px;
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
.carousel-control .prev { margin-left: -15px; left: 50%; } /* Prev */
.carousel-control .next { margin-right: -15px; right: 50%; } /* Next */
/* Removing BS background */
.carousel .control-box { opacity: 0; }
a.carousel-control.left { left: 0; background: none; border: 0;}
a.carousel-control.right { right: 0; background: none; border: 0;}
/* Animation */
.control-box, a.carousel-control, .carousel-indicators li {
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
/* hardware acceleration causes Bootstrap carousel controlbox margin error in webkit */
/* Assigning animation to indicator li will make slides flicker */
}
/* Hover animation */
.carousel:hover .control-box { opacity: 1; }
.carousel:hover a.carousel-control.left { left: 15px; }
.carousel:hover a.carousel-control.right { right: 15px; }
/* Carouse Indicator */
.carousel-indicators li.active,
.carousel-indicators li { border: 0; }
.carousel-indicators li {
background: #666;
margin: 0 3px;
width: 12px;
height: 12px;
}
.carousel-indicators li.active {
background: #fff;
margin: 0 3px;
}
/* BM: Afbeeldingen carousel met afgeronde hoeken */
.carousel-inner img {
border-radius: 8px;
}
/* BM: Header text in carousel rechts uitlijnen */
.carousel-caption h3,
.carousel-caption p {
text-align: right;
display:block;
line-height: 20px;
}
/* BM: Weergave van categorieën activeren */
#catlinks {display:block;}
.catlinks {
border: none;
background-color: transparent;
}
/* BM: Weergave van "Annuleren" link bij VE. Bron: https://www.mediawiki.org/wiki/Skin_talk:Tweeki */
.ve-annuleren-link { display:none; }
.ve-active .ve-annuleren-link { display:block!important; }
/* BM: Annuleren-link verschijnt op login en gebruikersvoorkeuren pagina's: NB: deze worden overruled a.g.v. $wgAllowSiteCSSOnRestrictedPages */
.rootpage-Speciaal_Voorkeuren .ve-annuleren-link { display:none!important; }
/* a[href*='Speciaal:Voorkeuren'] .ve-annuleren-link {display:none!important;} */
/* .ve-active .rootpage-Speciaal_Voorkeuren .ve-annuleren-link { display:none!important; } */
/* BM: Styling van Section-edit-link voor gebruik VisualEditor */
/* Divider hiden */
h1 > .mw-editsection > span.mw-editsection-divider,
h2 > .mw-editsection > span.mw-editsection-divider,
h3 > .mw-editsection > span.mw-editsection-divider,
h4 > .mw-editsection > span.mw-editsection-divider,
h5 > .mw-editsection > span.mw-editsection-divider,
h6 > .mw-editsection > span.mw-editsection-divider {display:none;}
h1:hover > .mw-editsection > span:nth-last-of-type(2),
h2:hover > .mw-editsection > span:nth-last-of-type(2),
h3:hover > .mw-editsection > span:nth-last-of-type(2),
h4:hover > .mw-editsection > span:nth-last-of-type(2),
h5:hover > .mw-editsection > span:nth-last-of-type(2),
h6:hover > .mw-editsection > span:nth-last-of-type(2) {display:inline;}
.mw-editsection-bracket {display:none!important; }
/* Eerste link en opvolgende divider verwijderen */
.mw-editsection-visualeditor > span.glyphicon {display:none;}
.mw-editsection-visualeditor + span.mw-editsection-divider {display:none;}
/* Gehele editsection verwijderen */
/*.mw-editsection { display:none!important; } */
/* BM: Genummerde volgende- en vorige-links in zoekresultaten weergeven */
a.mw-numlink {
display: inline-block;
}
.panel-default > .panel-heading-welkomdef {
background:#DBDBDB;
height: 50px;
border:1px solid #DBDBDB;
}
.panel-default > .panel-heading-def {
background-image: radial-gradient(farthest-corner circle at right bottom, #cccccc, #DBDBDB, #f0f0f0);
font-weight: bold;
font-size: 150%;
height: 50px;
}
/* BM: Oplossing overlopende titels in panels */
.panel-default > .panel-heading-infobox {
background-image: radial-gradient(farthest-corner circle at right bottom, #cccccc, #DBDBDB, #f0f0f0);
font-weight: bold;
font-size: 150%;
min-height: 50px;
}
/* BM: Voorbeeld aanpassing h3 in panel-header */
h3.panel-title {font-size:18px;}
/* IdP: Aanpassing link naar speciale pagina's panel-title */
.panel-title a { color: #333;}
/* IdP: Voorbeeld aanpassing h2 in panel-header */
h2.panel-title {font-size:24px;}
/* BM: Banner jaarpagina (1980) */
/* .banner-jaarpagina { background:#FFFFFF; background-image: url( https://test.theaterencyclopedie.nl/images/c/cb/TE_Headerimage_1920x640_1.jpg );} */
.banner-jaarpagina { background:#FFFFFF; background-image: url( "../w/images/f/f8/Theaterzaal_jaarpagina1920x400.png" );}
.banner-seizoenspagina { background:#FFFFFF; background-image: url( "../w/images/6/6e/Theaterseizoen_1920x250.png" );}
.banner-VersVanDePers { background:#FFFFFF; background-image: url( "../w/images/2/2f/BannerVersVanDePers-1400x250.png" );}
.banner-NuCentraalPortaalpagina { background:#FFFFFF; background-image: url( "../w/images/3/30/BannerPortaalNuCentraal-1200x250.png" );}
.banner-TheaterActueelPortaal { background:#FFFFFF; background-image: url( "../w/images/e/e7/PA_headerafbeelding_1200x250.png" ); border-radius: 8px;}
.Header-Portaal-Zoeken { background:#FFFFFF; background-image: url( "../w/images/1/16/Header-Portaal-Zoeken1250x250.png" ); border-radius: 8px;}
.Header-Portaal-Redactie { background:#FFFFFF; background-image: url( "../w/images/2/28/Header-Portaal-Redactie1250x250.png" ); border-radius: 8px;}
.banner-hoofdpaginaViceVersa { background:#FFFFFF; background-image: url( "../w/images/c/c4/ViceVersa_50xxx1214.0035_1200.png" );}
.banner-hoofdpaginaVideo { background:#FFFFFF; background-image: url( "../w/images/8/81/Video_50xxxx888.0011a_1200.png" );}
.banner-hoofdpaginaTheaterPrijzen { background:#FFFFFF; background-image: url( "../w/images/d/dd/Theaterprijzen_1200.png" );}
.banner-hoofdpaginaMeeschrijven { background:#FFFFFF; background-image: url( "../w/images/3/34/Meeschrijven_1200.png" );}
/* IdP: Headers zoeken op vanaf hoofdpagina */
.banner-hoofdpaginaPersonen { background:#FFFFFF; background-image: url( "../w/images/4/47/Header_Personen_1100x250.png" );}
.banner-hoofdpaginaVoorstellingen { background:#FFFFFF; background-image: url( "../w/images/8/82/Header_Voorstellingen_1200x250.png" );}
.banner-hoofdpaginaTheater { background:#FFFFFF; background-image: url( "../w/images/3/34/Header_Theaters_1200x250.png" );}
.banner-hoofdpaginaThemas { background:#FFFFFF; background-image: url( "../w/images/9/92/Header_Thema%27s_1200x250.png" );}
.banner-theaterCollectie { background:#FFFFFF; background-image: url( "../w/images/a/a6/TCl_ogoAP1250x250px.png" );}
.banner-theaterCollectiev02 { background:#FFFFFF; background-image: url( "../w/images/4/4f/Logo_Allard_Pierson.jpeg" );}
.banner-theaterCollectiev03 { background:#FFFFFF; background-image: url( "../w/images/2/21/TC-logoAP1070x250px.png" ); background-repeat: no-repeat;}
.banner-eenLevenLangTheater { background:#FFFFFF; background-image: url( "../w/images/2/25/HeaderELT1250x250px.png" );}
.banner-bijdragenUithetVeld { background:#FFFFFF; background-image: url( "../w/images/2/24/HeaderBijdragen1250px.png" );}
.banner-bijdragenInterviews { background:#FFFFFF; background-image: url( "../w/images/0/0f/HeaderInterviews1250px.png" );}
/* IdP: Vormgeving ProductiePagina */
.rolverdeling, .team {
list-style-type: none;
-moz-column-width: 24em; /* Firefox */
-webkit-column-width: 24em; /* webkit, Safari, Chrome */
column-width: 24em;
}
/* correct webkit/chrome uneven margin on the first column*/
.rolverdeling ul li:first-child, .team ul li:first-child {
margin-top:0px;
}
/* BM: styling van unnumbered list zonder bullets */
.rolverdeling ul, .team ul {
list-style:none none;
padding:0px;
margin:0px;
}
/* Aanpassing button onderaan editpagina wijzigingen opslaan kleur aanpassing */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: #333;
background-color: #36c;
border-color: #36c;
}
#mw-navigation {
background: #F7B32B;
}
body.ns-0 div#contentSub {
display: none;
}