« MediaWiki:Chameleon.css » : différence entre les versions
De fablabo
Aucun résumé des modifications |
Aucun résumé des modifications |
||
(22 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
/* ---------- Header - Footer ---------- */ | /* TOC */ | ||
#toc { | |||
position: fixed; | |||
top: 4px; | |||
right: 4px; | |||
max-width: 14.5%; | |||
padding: 6px; | |||
box-shadow: none; | |||
background: white; | |||
} | |||
@media (max-width: 1500px) { | |||
#toc { | |||
position: static; | |||
max-width: 100%; | |||
float: right; | |||
margin: 0 0 .8rem 1rem; | |||
} | |||
} | |||
#toc li span, | |||
#toc a { | |||
color: black; | |||
} | |||
span.toctext { | |||
display: inline; | |||
} | |||
/* ------------ Fix Navbar en mode édition ------------ */ | |||
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar { | |||
top: 48px; | |||
} | |||
/* ------------------ Header - Footer ------------------ */ | |||
/* Overwrite grey color */ | /* Overwrite grey color */ | ||
.bg-light, .p-navbar { | .bg-light, .p-navbar { | ||
Ligne 7 : | Ligne 46 : | ||
/* Header */ | /* Header */ | ||
div.container:not(.mt-4) > .row:nth-child(1 | div.container.navContainer:not(.mt-4) > .row:nth-child(1) { | ||
background: white; | background: white; | ||
box-shadow: 0px 3px 2px #eeeeee; | box-shadow: 0px 3px 2px #eeeeee; | ||
} | } | ||
/* Footer */ | /* Footer */ | ||
.mb-2.mt-4.container { | .mb-2.mt-4.container.navContainer { | ||
box-shadow: 0px -1px 2px #eeeeee; | box-shadow: 0px -1px 2px #eeeeee; | ||
border-radius: 6px 6px 0 0; | border-radius: 6px 6px 0 0; | ||
Ligne 29 : | Ligne 62 : | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
} | |||
/* ---------- Modification du Layout par rapport à l'Archive ---------- */ | |||
div.container.navContainer:not(.mt-4) > .row:nth-child(1) { | |||
position: sticky; | |||
top: 0; | |||
height: 46px; | |||
z-index: 100; | |||
} | |||
nav#mw-navigation { | |||
margin-bottom: 0 !important; | |||
width: 100% !important; | |||
height: 46px; | |||
} | |||
/* 1250px */ | |||
.nav-searchBar { | |||
max-width: 300px; | |||
height: 46px; | |||
} | |||
.flex-fill.container.navContainer { | |||
max-width: 100% !important; | |||
position: sticky; | |||
top: 0; | |||
z-index: 1000; | |||
flex: 0 !important; | |||
} | |||
/* ----------- Icônes et search bar ----------- */ | |||
.ml-auto.col-12.col-cmln.col > .row { | |||
justify-content: flex-end; | |||
} | |||
@media (max-width: 992px) { | |||
.ml-auto.col-12.col-cmln.col > .row { | |||
justify-content: center; | |||
} | |||
.nav-searchBar { | |||
max-width: 100% !important; | |||
flex: 0 0 60%; | |||
} | |||
} | |||
.nav-pageTools, .nav-personalTools { | |||
flex-grow: 0; | |||
width: -webkit-fill-available; | |||
padding: 0; | |||
} | |||
.nav-pageTools *, .nav-personalTools * { | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.nav-pageTools .navbar-tools.navbar-nav, | |||
.nav-personalTools .p-navbar.collapsible .navbar-nav { | |||
flex-wrap: nowrap; | |||
} | |||
.p-navbar .navbar-nav .navbar-tools { | |||
padding: 0; | |||
} | |||
.nav-personalTools .navbar-nav .echo-icons li { | |||
margin-right: 6px; | |||
} | |||
.nav-searchBar { | |||
padding-left: 0; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.nav-searchBar #p-search { | |||
width: 100%; | |||
} | |||
.nav-searchBar #p-search #searchform .input-group { | |||
height: 38px; | |||
} | |||
.nav-searchBar #p-search #searchform input#searchInput, | |||
.nav-searchBar #p-search #searchform button#searchGoButton { | |||
height: 100%; | |||
border-radius: 0; | |||
} | |||
/* fix boutton */ | |||
@media (min-width: 768px) { | |||
.navbar-expand-md .navbar-toggler { | |||
display: block; | |||
} | |||
} | |||
@media (min-width: 992px) { | |||
.navbar-expand-md .navbar-toggler { | |||
display: none; | |||
} | |||
} | |||
/* ------------------ Main content ------------------ */ | |||
.mainContent.row { | |||
margin-top: 2rem; | |||
} | } |
Dernière version du 11 février 2025 à 10:32
/* TOC */
#toc {
position: fixed;
top: 4px;
right: 4px;
max-width: 14.5%;
padding: 6px;
box-shadow: none;
background: white;
}
@media (max-width: 1500px) {
#toc {
position: static;
max-width: 100%;
float: right;
margin: 0 0 .8rem 1rem;
}
}
#toc li span,
#toc a {
color: black;
}
span.toctext {
display: inline;
}
/* ------------ Fix Navbar en mode édition ------------ */
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
top: 48px;
}
/* ------------------ Header - Footer ------------------ */
/* Overwrite grey color */
.bg-light, .p-navbar {
background-color: white !important;
}
/* Header */
div.container.navContainer:not(.mt-4) > .row:nth-child(1) {
background: white;
box-shadow: 0px 3px 2px #eeeeee;
}
/* Footer */
.mb-2.mt-4.container.navContainer {
box-shadow: 0px -1px 2px #eeeeee;
border-radius: 6px 6px 0 0;
}
@media (min-width: 1105px) {
.navbar-expand-cmln .navbar-nav, .p-navbar.collapsible .navbar-nav {
flex-wrap: wrap;
}
}
/* ---------- Modification du Layout par rapport à l'Archive ---------- */
div.container.navContainer:not(.mt-4) > .row:nth-child(1) {
position: sticky;
top: 0;
height: 46px;
z-index: 100;
}
nav#mw-navigation {
margin-bottom: 0 !important;
width: 100% !important;
height: 46px;
}
/* 1250px */
.nav-searchBar {
max-width: 300px;
height: 46px;
}
.flex-fill.container.navContainer {
max-width: 100% !important;
position: sticky;
top: 0;
z-index: 1000;
flex: 0 !important;
}
/* ----------- Icônes et search bar ----------- */
.ml-auto.col-12.col-cmln.col > .row {
justify-content: flex-end;
}
@media (max-width: 992px) {
.ml-auto.col-12.col-cmln.col > .row {
justify-content: center;
}
.nav-searchBar {
max-width: 100% !important;
flex: 0 0 60%;
}
}
.nav-pageTools, .nav-personalTools {
flex-grow: 0;
width: -webkit-fill-available;
padding: 0;
}
.nav-pageTools *, .nav-personalTools * {
padding: 0;
margin: 0;
}
.nav-pageTools .navbar-tools.navbar-nav,
.nav-personalTools .p-navbar.collapsible .navbar-nav {
flex-wrap: nowrap;
}
.p-navbar .navbar-nav .navbar-tools {
padding: 0;
}
.nav-personalTools .navbar-nav .echo-icons li {
margin-right: 6px;
}
.nav-searchBar {
padding-left: 0;
display: flex;
align-items: center;
}
.nav-searchBar #p-search {
width: 100%;
}
.nav-searchBar #p-search #searchform .input-group {
height: 38px;
}
.nav-searchBar #p-search #searchform input#searchInput,
.nav-searchBar #p-search #searchform button#searchGoButton {
height: 100%;
border-radius: 0;
}
/* fix boutton */
@media (min-width: 768px) {
.navbar-expand-md .navbar-toggler {
display: block;
}
}
@media (min-width: 992px) {
.navbar-expand-md .navbar-toggler {
display: none;
}
}
/* ------------------ Main content ------------------ */
.mainContent.row {
margin-top: 2rem;
}