MediaWiki:Chameleon.css
De Wiki Campus Cyber
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur Ctrl + F5.
/* @Angèle, attention à bien ranger les lignes de code avec celles qui vont de pair ;) */
/**************************/
/* ***** BACKGROUND ***** */
/**************************/
body {
background-image: url(http://hoedic.server.wiki-valley.com/images/c/cf/Logo_back_campus.png);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
background-size: 30%;
}
/**************************/
/* ***** TOP NAVBAR ***** */
/**************************/
/* navbar container */
.navbarRow.row {
position: absolute;
top: 0;
left: 0;
width: 101%;
z-index: 1000;
}
/* Margin top sur la .row en dessous du navbar container */
.navbarRow.row+.row {
margin-top: 61px;
}
/* Navbar */
nav#mw-navigation.p-navbar {
background-color: transparent;
}
.p-navbar.collapsible .navbar-nav {
width: 100%;
}
/* logo */
.p-navbar .navbar-brand.p-logo {
height: 100%;
padding-top: 0.3125rem;
}
/* navbar div */
.p-navbar.collapsible .navbar-nav > div:not(:last-child) {
width: 100%;
text-align: center;
}
/* links -> buttons */
#mw-navigation.p-navbar a.nav-link {
background-color: var(--blue);
color: var(--white) !important;
transition: .25s;
font-size: 1rem;
}
/* buttons :hover */
#mw-navigation.p-navbar .mw-list-item a.nav-link:hover,
#mw-navigation.p-navbar .nav-item a.nav-link:hover {
background-color: var(--blueHover);
}
.p-navbar .navbar-nav .dropdown-menu > div > a:not(.toolboxnoflatten a):last-child:first-child:hover{
background: var(--blue);
}
/* Link groupe de travail */
a.nav-link.n-Groupes-de-travail {
white-space: nowrap;
}
/* EchoIcons */
ul.navbar-tools.echo-icons {
display: none;
}
/* PersonalToolsIcon */
a.navbar-userloggedin:before,
a.navbar-usernotloggedin:before{
margin-right: 0;
color: var(--white);
}
.navbar-tools.navbar-nav {
background-color: var(--red);
}
.navbar-tools.navbar-nav:hover {
background-color: var(--redHover);
}
div#pt-anonuserpage {
color: var(--white);
text-align: center;
font-weight: bold;
font-size: 1rem;
}
/* Dropdown menu */
.p-navbar.collapsible .navbar-nav .dropdown-menu {
width: 100%;
}
.dropdown-menu:not(.toolboxnoflatten .dropdown-menu) {
background: none;
border: none;
margin-top: 0;
padding: 0;
box-shadow: 2px 5px 8px #6f6f6fba;
transition: .25s;
}
.dropdown-toggle::after {
border:none;
}
/* Dropdown user */
.p-navbar .navbar-nav .p-personal-tools.dropdown-menu {
border-radius: 0;
background: var(--red) !important;
transform: translateX(-130px);
}
.p-navbar .navbar-nav .dropdown-menu > div > a:first-child:last-child {
color: var(--white);
}
.p-navbar.collapsible .navbar-nav > div:last-child {
width: 20%;
margin: 0;
padding: 0;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.p-navbar.collapsible .navbar-nav > div:last-child > div:not(.dropdown-menu),
.p-navbar.collapsible .navbar-nav > div:last-child > div a {
min-width: 30px;
width: 100%;
text-align: center;
}
.p-navbar .navbar-nav .dropdown-menu > div > a:not(.toolboxnoflatten a):last-child:first-child:hover {
background: var(--redHover);
color: var(--white);
}
/* Outils */
.nav-item.dropdown:nth-of-type(5) {
width: 10% !important;
}
.nav-item.dropdown:nth-of-type(5) > a {
background-color: var(--red)!important;
font-size: 0px !important;
}
.nav-item.dropdown:nth-of-type(5) > a:before {
content: "⚙️";
font-size: initial;
margin-right: 0 !important;
}
.nav-item.dropdown:nth-of-type(5) > .dropdown-menu div a {
background-color: var(--red) !important;
}
.nav-item.dropdown:nth-of-type(5) > .dropdown-menu div a:hover {
background-color: var(--redHover) !important;
}
/* ** RESPONSIVE ** */
/* Tablette */
@media (max-width: 992px) {
/* Dropdown user */
.p-navbar .navbar-nav .p-personal-tools.dropdown-menu {
transform: translateX(-143px) !important;
}
/* Outils */
.nav-item.dropdown:nth-of-type(5) > a:before {
font-size: .8rem;
}
/* buttons :hover */
#mw-navigation.p-navbar a.nav-link {
font-size: .8rem;
}
.p-navbar.collapsible .navbar-nav > div:last-child {
width: 10%;
height: fit-content;
}
}
/* Mobile */
@media (max-width: 768px) {
/* navbar container */
.navbarRow.row {
position: static;
width: 100%;
z-index: 1000;
}
/* Navbar Dropdown */
.navbar-tool.dropdown {
margin: 0 !important;
}
#mw-navigation.p-navbar a.nav-link:not(.mw-list-item a) {
font-size: 1rem;
font-weight: bold;
}
.p-navbar.collapsible .navbar-nav > div:last-child {
width: 100%;
}
.p-navbar .navbar-nav .dropdown-menu {
position: static !important;
transform: none !important;
}
#mw-content-text a {
overflow-wrap: break-word;
}
/* Outils */
.p-navbar.collapsible .navbar-nav > div:last-child > div:not(.dropdown-menu) {
height: 40px;
flex-direction: column;
justify-content: start;
}
.p-navbar .navbar-nav .p-personal-tools.dropdown-menu {
transform: none !important;
width: 100%;
}
.nav-item.dropdown:nth-of-type(5) { width: 100% !important; }
.nav-item.dropdown:nth-of-type(5) > a:before { font-size: initial; }
/* User Dropdown */
.p-personal-tools.dropdown-menu {
transform: translate(-50%, 41%) !important;
}
}
@media (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-item.dropdown:nth-of-type(5):hover .dropdown-menu {
transform: translateX(-110px);
}
}
/* ***** TOP SEARCHBAR ***** */
.searchbarRow.row {
padding: 0 15px;
}
/* Search field */
input#searchInput {
border-radius: 0;
}
/* Search button */
button#searchGoButton {
background: var(--blue);
color: var(--white);
border-radius: 0;
}
/*************************************/
/* ************* FOOTER ************ */
/*************************************/
.footer .p-navbar { background: var(--blue); }
.footer .p-navbar .nav-item a { color: white; }
.footer .p-navbar .toolboxnoflatten > a { color: white !important; }
.footer .p-navbar .nav-item a:hover,
.footer .p-navbar .nav-item a:focus { color: var(--red); }
/* ***** FOOTER TOOLBOX ***** */
.toolboxnoflatten .nav-link { color: initial !important; }
@media (min-width:992px) {
.nav-item.p-tb-dropdown.toolboxnoflatten {
display: none;
}
}
@media (max-width:992px) {
#t-upload, #t-specialpages, #t-print, #t-permalink, #t-info, #t-cite, #t-recentchangeslinked, #t-smwbrowselink,
#t-contributions, #t-log, #t-blockip, #t-userrights, #t-upload, #t-specialpages, #t-print, #t-permalink, #t-info,
#t-smwbrowselink, .dropdown-menu #t-whatlinkshere {
display: none;
}
.toolboxnoflatten #t-upload, .toolboxnoflatten #t-specialpages, .toolboxnoflatten #t-print, .toolboxnoflatten #t-permalink,
.toolboxnoflatten #t-info, .toolboxnoflatten #t-cite, .toolboxnoflatten #t-recentchangeslinked,
.toolboxnoflatten #t-smwbrowselink {
display: block;
}
}
/*************************************/
/* ******** ADVANCED SEARCH ******** */
/*************************************/
.mw-advancedSearch-namespace-selection-header > .oo-ui-labelElement {
float: none;
margin: 0 0.5em 0.1em 0.5rem;
border-bottom: 1px solid #a2a9b1;
}
