MediaWiki:Vector.css: verschil tussen versies
(Nieuwe pagina aangemaakt met '→Alle hier geplaatste CSS-code wordt geladen voor gebruikers van de vormgeving Vector: .tabber { flex-direction: row; } .tabber__tabs { flex-direction: column; } .tabber__indicator { display:none; }') |
(mobiele stijlen verbeterd) |
||
| (9 tussenliggende versies door 2 gebruikers niet weergegeven) | |||
| Regel 1: | Regel 1: | ||
/* Alle hier geplaatste CSS-code wordt geladen voor gebruikers van de vormgeving Vector */ | /* Alle hier geplaatste CSS-code wordt geladen voor gebruikers van de vormgeving Vector */ | ||
.mw-logo-icon { | |||
width: 100px; | |||
height: auto; | |||
} | |||
.tabber { | .tabber { | ||
flex-direction: row; | flex-direction: row; | ||
} | |||
.tabber__header { | |||
box-shadow: none; | |||
margin-right: -1px; | |||
} | } | ||
.tabber__tabs { | .tabber__tabs { | ||
flex-direction: column; | flex-direction: column; | ||
align-items: flex-end; | |||
} | |||
.tabber__tab { | |||
font-weight: normal; | |||
padding: 1px 5px 1px 0; | |||
border-style: solid; | |||
border-image-source: linear-gradient(to left, #a7d7f9, rgba(0,0,0,0) 70%); | |||
border-image-slice: 1; | |||
border-width: 1px 1px 0; | |||
background: linear-gradient(to left, rgb(167, 215, 249,0.2), rgba(0,0,0,0) 30%); | |||
} | |||
.tabber__tab:last-child { | |||
border-bottom-width: 1px; | |||
} | |||
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']{ | |||
background: white; | |||
border-right-width: 0; | |||
} | } | ||
.tabber__indicator { | .tabber__indicator { | ||
display:none; | display:none; | ||
} | |||
.tabber__section { | |||
border: 1px solid #a7d7f9; | |||
width: 275px; | |||
} | |||
.tabber__panel { | |||
padding: 0 1em; | |||
} | |||
.tabber__panel h2 { | |||
margin: 0.5em; | |||
} | |||
.pluktips-en-uitgelicht { | |||
display: flex; | |||
} | |||
.uitgelicht { | |||
border: 1px solid #a7d7f9; | |||
padding: 1em; | |||
margin-right: 1em | |||
} | |||
.uitgelicht h3 { | |||
padding-top: 0; | |||
} | |||
@media screen and (max-width: 600px) { | |||
.pluktips-en-uitgelicht { | |||
flex-direction: column-reverse; | |||
} | |||
.pluktips { | |||
margin-bottom: 1em; | |||
} | |||
.uitgelicht, | |||
.pluktips { | |||
width: auto; | |||
} | |||
} | } | ||
Huidige versie van 28 mei 2024 om 10:19
/* Alle hier geplaatste CSS-code wordt geladen voor gebruikers van de vormgeving Vector */
.mw-logo-icon {
width: 100px;
height: auto;
}
.tabber {
flex-direction: row;
}
.tabber__header {
box-shadow: none;
margin-right: -1px;
}
.tabber__tabs {
flex-direction: column;
align-items: flex-end;
}
.tabber__tab {
font-weight: normal;
padding: 1px 5px 1px 0;
border-style: solid;
border-image-source: linear-gradient(to left, #a7d7f9, rgba(0,0,0,0) 70%);
border-image-slice: 1;
border-width: 1px 1px 0;
background: linear-gradient(to left, rgb(167, 215, 249,0.2), rgba(0,0,0,0) 30%);
}
.tabber__tab:last-child {
border-bottom-width: 1px;
}
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']{
background: white;
border-right-width: 0;
}
.tabber__indicator {
display:none;
}
.tabber__section {
border: 1px solid #a7d7f9;
width: 275px;
}
.tabber__panel {
padding: 0 1em;
}
.tabber__panel h2 {
margin: 0.5em;
}
.pluktips-en-uitgelicht {
display: flex;
}
.uitgelicht {
border: 1px solid #a7d7f9;
padding: 1em;
margin-right: 1em
}
.uitgelicht h3 {
padding-top: 0;
}
@media screen and (max-width: 600px) {
.pluktips-en-uitgelicht {
flex-direction: column-reverse;
}
.pluktips {
margin-bottom: 1em;
}
.uitgelicht,
.pluktips {
width: auto;
}
}