Différences entre versions de « MediaWiki:Common.css »
Sauter à la navigation
Sauter à la recherche
(27 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
− | /* | + | /* CSS placé ici sera appliqué à tous les habillages */ |
− | |||
− | /* Lien vers le CSS pour le mode sombre | + | /* Lien vers le CSS pour le mode sombre */ |
@import url('skins/Vector/skinStyles/custom-dark-mode.css'); | @import url('skins/Vector/skinStyles/custom-dark-mode.css'); | ||
− | ul#SelectCategoryList | + | ul#SelectCategoryList { |
− | { | + | height: 300px; |
− | height: 300px; | + | width: 400px; |
− | width: 400px; | + | overflow: auto; |
− | overflow: auto; | ||
} | } | ||
− | + | /* TOC float right */ | |
− | + | #toc { | |
− | + | float: right; | |
− | |||
− | |||
− | /* | ||
− | |||
− | */ | ||
− | |||
− | |||
− | |||
− | #toc { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
border: none; | border: none; | ||
− | background | + | border-left: 1.5em white solid; |
+ | border-bottom: 1em white solid; | ||
+ | background: #fff3d2; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
div.vf-vignette { | div.vf-vignette { | ||
position: relative; | position: relative; | ||
Ligne 59 : | Ligne 25 : | ||
width: 290px; | width: 290px; | ||
height: 200px; | height: 200px; | ||
− | |||
background-color: transparent; | background-color: transparent; | ||
color: #373741; | color: #373741; | ||
overflow: hidden; | overflow: hidden; | ||
margin: 0.2em; | margin: 0.2em; | ||
− | |||
− | |||
− | |||
− | |||
background-size: 100% 100%; | background-size: 100% 100%; | ||
− | font-family: vagrounded,Arial; | + | font-family: vagrounded, Arial; |
font-size: 1.1em; | font-size: 1.1em; | ||
− | + | top: -15px; | |
− | top:-15px; | ||
padding-top: 1px; | padding-top: 1px; | ||
− | |||
} | } | ||
− | div.vf-vignette .vf-vignette-titre { | + | div.vf-vignette .vf-vignette-titre { |
− | + | color: #ff2727; | |
− | + | padding: 10px 5px; | |
− | + | font-size: 0.8em; | |
− | + | text-transform: inherit; | |
− | + | text-align: left; | |
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Ligne 96 : | Ligne 50 : | ||
} | } | ||
− | + | div.vf-vignette-informations { | |
− | + | position: absolute; | |
− | div.vf-vignette | ||
color: black; | color: black; | ||
+ | font-weight: bold; | ||
width: 240px; | width: 240px; | ||
+ | top: -20px; | ||
+ | left: 0; | ||
display: block; | display: block; | ||
padding: 5px; | padding: 5px; | ||
− | + | padding-bottom: 2em; | |
− | padding-bottom: | + | font-size: 1em; |
− | + | pointer-events: none; | |
− | font-size: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
div.vf-vignette img { | div.vf-vignette img { | ||
− | + | position: relative; | |
− | + | overflow: hidden; | |
− | + | top: 0; | |
− | + | width: 100%; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
span.smw-template-furtherresults { | span.smw-template-furtherresults { | ||
Ligne 145 : | Ligne 75 : | ||
clear: both; | clear: both; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
mark { | mark { | ||
Ligne 166 : | Ligne 80 : | ||
color: #FF6B40; | color: #FF6B40; | ||
} | } | ||
− | |||
div.polaroid { | div.polaroid { | ||
− | + | width: 290px; | |
− | + | background-color: white; | |
− | + | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); | |
− | + | margin-bottom: 25px; | |
− | + | float: left; | |
− | |||
− | float:left; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
div.container-polaroid { | div.container-polaroid { | ||
− | + | text-align: center; | |
− | + | padding-top: 0; | |
− | + | height: 150px; | |
− | |||
− | |||
− | |||
} | } | ||
div.container-polaroid-title-only { | div.container-polaroid-title-only { | ||
− | + | text-align: center; | |
− | + | padding-top: 0; | |
− | + | height: 50px; | |
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
div.polaroid img { | div.polaroid img { | ||
− | + | width: 100%; | |
− | + | height: 200px; | |
− | |||
} | } | ||
div.polaroid-title { | div.polaroid-title { | ||
− | /* | + | /* Custom styles for title */ |
} | } | ||
+ | div.polaroid > p { | ||
+ | margin-top: 0; | ||
+ | } | ||
− | + | /* Infobox V2 */ | |
− | + | .infobox_v2 { | |
− | + | background: #f9f9f9; | |
− | + | color: #000; | |
− | + | font-size: 90%; | |
− | + | line-height: 1.2em; | |
− | + | float: right; | |
+ | clear: right; | ||
+ | margin: 0 0 0.5em 1em; | ||
+ | width: 294px; | ||
+ | border: 1px solid #aaa; | ||
+ | border-spacing: 5px; | ||
} | } | ||
+ | .infobox_v2 th { | ||
+ | vertical-align: super; | ||
+ | text-align: left; | ||
+ | } | ||
− | + | .infobox_v2 .entete { | |
− | + | height: 43px; | |
− | + | vertical-align: middle; | |
+ | text-align: center; | ||
+ | font-size: 140%; | ||
+ | font-weight: bolder; | ||
+ | line-height: 1.1em; | ||
+ | color: #000; | ||
} | } | ||
− | |||
− | + | .infobox_v2 .media { | |
− | + | height: 35px; | |
− | + | vertical-align: middle; | |
− | + | text-align: center; | |
− | + | font-weight: bolder; | |
− | + | color: #000; | |
} | } | ||
− | + | .media.audio { | |
− | + | background: url("//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/35px-Gnome-speakernotes.png") no-repeat left top; | |
} | } | ||
− | + | .media.video { | |
− | + | background: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Tango-video-x-generic.png/35px-Tango-video-x-generic.png") no-repeat left top; | |
− | |||
} | } | ||
− | + | /* Ajustement de marges */ | |
− | + | p { | |
− | + | margin: 0; | |
} | } | ||
− | |||
+ | /* Boutons de changement de taille de police */ | ||
+ | #fontSizeButton { | ||
+ | background-color: #007bff; | ||
+ | color: white; | ||
+ | padding: 5px 10px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | font-size: 14px; | ||
+ | border-radius: 4px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
− | + | #fontSizeButton:hover { | |
− | + | background-color: #0056b3; | |
+ | } | ||
+ | /* Menu des tailles de police */ | ||
+ | #fontSizeMenu li { | ||
+ | padding: 5px; | ||
+ | } | ||
− | + | #fontSizeMenu li:hover { | |
− | + | background-color: #f0f0f0; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | + | /* Thème sombre */ | |
− | + | body.dark-theme { | |
+ | background-color: #1e1e1e; | ||
+ | color: #e0e0e0; | ||
} | } | ||
− | . | + | |
− | + | /* Liens en mode sombre */ | |
− | + | body.dark-theme a { | |
− | + | color: #9aafff !important; | |
− | + | text-decoration: none; | |
− | |||
− | |||
− | |||
} | } | ||
− | + | ||
− | + | body.dark-theme a:visited { | |
− | + | color: #d1bfff !important; | |
− | . | ||
− | |||
} | } | ||
− | /* | + | |
− | . | + | /* Hover effect pour les liens */ |
− | + | body.dark-theme a:hover { | |
− | + | color: #ffffff !important; | |
− | |||
− | |||
− | |||
} | } | ||
− | /* | + | /* Liens du header en mode sombre */ |
− | . | + | body.dark-theme .mw-headline a, |
− | + | body.dark-theme #p-personal li a, | |
− | + | body.dark-theme #p-navigation li a, | |
+ | body.dark-theme #p-tb li a { | ||
+ | color: #9aafff !important; | ||
} | } | ||
+ | body.dark-theme .mw-headline a:visited, | ||
+ | body.dark-theme #p-personal li a:visited, | ||
+ | body.dark-theme #p-navigation li a:visited, | ||
+ | body.dark-theme #p-tb li a:visited { | ||
+ | color: #d1bfff !important; | ||
+ | } | ||
+ | /* Hover effect pour les liens du header */ | ||
+ | body.dark-theme #p-personal li a:hover, | ||
+ | body.dark-theme #p-navigation li a:hover, | ||
+ | body.dark-theme #p-tb li a:hover { | ||
+ | color: #ffffff !important; | ||
+ | } | ||
− | + | /* Liens du footer en mode sombre */ | |
− | + | body.dark-theme #footer li a, | |
+ | body.dark-theme .mw-footer li a { | ||
+ | color: #9aafff !important; | ||
} | } | ||
− | . | + | |
− | + | body.dark-theme #footer li a:visited { | |
+ | color: #d1bfff !important; | ||
} | } | ||
− | + | body.dark-theme #footer li a:hover { | |
− | + | color: #ffffff !important; | |
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | // | + | /* Couleur des titres (mw-headline) */ |
− | + | body.dark-theme .mw-headline { | |
− | . | + | color: #ffffff !important; |
− | |||
} | } | ||
− | |||
− | + | /* Niveaux de titres H1 à H6 en mode sombre */ | |
− | + | body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, | |
− | /* | + | body.dark-theme h4, body.dark-theme h5, body.dark-theme h6 { |
− | + | color: #ffffff !important; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | + | /* Liens du menu "Plus" */ | |
− | + | body.dark-theme #p-navigation .vector-menu-content li a, | |
+ | body.dark-theme #p-cactions li a, | ||
+ | body.dark-theme #p-namespaces .vector-menu-content li a { | ||
+ | color: #9aafff !important; | ||
} | } | ||
− | + | body.dark-theme #p-navigation .vector-menu-content li a:visited, | |
− | + | body.dark-theme #p-cactions li a:visited, | |
− | + | body.dark-theme #p-namespaces .vector-menu-content li a:visited { | |
+ | color: #d1bfff !important; | ||
} | } | ||
− | + | body.dark-theme #p-navigation .vector-menu-content li a:hover, | |
− | + | body.dark-theme #p-cactions li a:hover, | |
− | + | body.dark-theme #p-namespaces .vector-menu-content li a:hover { | |
− | + | color: #ffffff !important; | |
− | # | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* Barre de recherche en mode sombre */ | |
− | background-color: | + | body.dark-theme .search-input { |
− | color: | + | background-color: green !important; /* Couleur de fond de la barre de recherche */ |
− | + | color: red !important; /* Couleur du texte de la barre de recherche */ | |
− | border: | + | border: 1px solid #555 !important; /* Couleur de la bordure */ |
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | body.dark-theme .search-input::placeholder { | |
− | + | color: blue !important; /* Couleur du texte du placeholder */ | |
} | } | ||
− | + | body.dark-theme .search-button { | |
− | + | background-color: violet !important; /* Couleur de fond du bouton de recherche */ | |
+ | color: white !important; /* Couleur du texte du bouton de recherche */ | ||
+ | border: none !important; | ||
} | } | ||
− | + | body.dark-theme .search-button:hover { | |
− | background-color: | + | background-color: brown !important; /* Couleur de fond du bouton de recherche au survol */ |
} | } | ||
+ | /* Si les éléments de recherche utilisent des classes différentes, ajuste en conséquence */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | /* | + | /* Barre de recherche en mode sombre */ |
+ | body.dark-theme #searchInput { | ||
+ | background-color: #333 !important; /* Couleur de fond de la barre de recherche en mode sombre */ | ||
+ | color: #e0e0e0 !important; /* Couleur du texte de la barre de recherche */ | ||
+ | border: 1px solid #555 !important; /* Couleur de la bordure en mode sombre */ | ||
+ | box-shadow: inset 0 0 0 1px transparent !important; /* Ombre de la bordure */ | ||
+ | } | ||
− | + | /* Styles pour le champ de saisie au focus */ | |
− | /* Styles pour le | + | body.dark-theme #searchInput:focus { |
− | body.dark- | + | outline: 0 !important; |
− | + | border-color: #3366cc !important; | |
− | + | box-shadow: inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff !important; | |
} | } | ||
− | body.dark- | + | /* Styles pour le champ de saisie au survol */ |
− | color: # | + | body.dark-theme #simpleSearch:hover #searchInput { |
+ | border-color: #72777d !important; | ||
} | } | ||
− | body.dark-theme | + | /* Styles pour le bouton de recherche */ |
− | + | body.dark-theme #searchButton { | |
− | + | background-color: #007bff !important; /* Couleur de fond du bouton de recherche */ | |
− | + | color: white !important; /* Couleur du texte du bouton de recherche */ | |
− | + | border: none !important; /* Suppression de la bordure */ | |
− | |||
− | color: | ||
} | } | ||
− | body.dark- | + | /* Styles pour le bouton de recherche au survol */ |
− | color: # | + | body.dark-theme #searchButton:hover { |
+ | background-color: #0056b3 !important; /* Couleur de fond du bouton de recherche au survol */ | ||
} | } | ||
− | + | ||
− | + | /* ajouter le menu en priorité au début de la navigation par tab / lecteur écran*/ | |
+ | #p-navigation { | ||
+ | tabindex: 1; | ||
} | } |
Version actuelle datée du 27 septembre 2024 à 11:03
/* CSS placé ici sera appliqué à tous les habillages */ /* Lien vers le CSS pour le mode sombre */ @import url('skins/Vector/skinStyles/custom-dark-mode.css'); ul#SelectCategoryList { height: 300px; width: 400px; overflow: auto; } /* TOC float right */ #toc { float: right; border: none; border-left: 1.5em white solid; border-bottom: 1em white solid; background: #fff3d2; } div.vf-vignette { position: relative; float: left; display: block; width: 290px; height: 200px; background-color: transparent; color: #373741; overflow: hidden; margin: 0.2em; background-size: 100% 100%; font-family: vagrounded, Arial; font-size: 1.1em; top: -15px; padding-top: 1px; } div.vf-vignette .vf-vignette-titre { color: #ff2727; padding: 10px 5px; font-size: 0.8em; text-transform: inherit; text-align: left; } .vf-vignette-description { opacity: 0; position: absolute; transition: opacity 0.5s; } div.vf-vignette-informations { position: absolute; color: black; font-weight: bold; width: 240px; top: -20px; left: 0; display: block; padding: 5px; padding-bottom: 2em; font-size: 1em; pointer-events: none; } div.vf-vignette img { position: relative; overflow: hidden; top: 0; width: 100%; } span.smw-template-furtherresults { display: block; clear: both; } mark { background: transparent; color: #FF6B40; } div.polaroid { width: 290px; background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); margin-bottom: 25px; float: left; } div.container-polaroid { text-align: center; padding-top: 0; height: 150px; } div.container-polaroid-title-only { text-align: center; padding-top: 0; height: 50px; } div.polaroid img { width: 100%; height: 200px; } div.polaroid-title { /* Custom styles for title */ } div.polaroid > p { margin-top: 0; } /* Infobox V2 */ .infobox_v2 { background: #f9f9f9; color: #000; font-size: 90%; line-height: 1.2em; float: right; clear: right; margin: 0 0 0.5em 1em; width: 294px; border: 1px solid #aaa; border-spacing: 5px; } .infobox_v2 th { vertical-align: super; text-align: left; } .infobox_v2 .entete { height: 43px; vertical-align: middle; text-align: center; font-size: 140%; font-weight: bolder; line-height: 1.1em; color: #000; } .infobox_v2 .media { height: 35px; vertical-align: middle; text-align: center; font-weight: bolder; color: #000; } .media.audio { background: url("//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/35px-Gnome-speakernotes.png") no-repeat left top; } .media.video { background: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Tango-video-x-generic.png/35px-Tango-video-x-generic.png") no-repeat left top; } /* Ajustement de marges */ p { margin: 0; } /* Boutons de changement de taille de police */ #fontSizeButton { background-color: #007bff; color: white; padding: 5px 10px; border: none; cursor: pointer; font-size: 14px; border-radius: 4px; margin-bottom: 10px; } #fontSizeButton:hover { background-color: #0056b3; } /* Menu des tailles de police */ #fontSizeMenu li { padding: 5px; } #fontSizeMenu li:hover { background-color: #f0f0f0; } /* Thème sombre */ body.dark-theme { background-color: #1e1e1e; color: #e0e0e0; } /* Liens en mode sombre */ body.dark-theme a { color: #9aafff !important; text-decoration: none; } body.dark-theme a:visited { color: #d1bfff !important; } /* Hover effect pour les liens */ body.dark-theme a:hover { color: #ffffff !important; } /* Liens du header en mode sombre */ body.dark-theme .mw-headline a, body.dark-theme #p-personal li a, body.dark-theme #p-navigation li a, body.dark-theme #p-tb li a { color: #9aafff !important; } body.dark-theme .mw-headline a:visited, body.dark-theme #p-personal li a:visited, body.dark-theme #p-navigation li a:visited, body.dark-theme #p-tb li a:visited { color: #d1bfff !important; } /* Hover effect pour les liens du header */ body.dark-theme #p-personal li a:hover, body.dark-theme #p-navigation li a:hover, body.dark-theme #p-tb li a:hover { color: #ffffff !important; } /* Liens du footer en mode sombre */ body.dark-theme #footer li a, body.dark-theme .mw-footer li a { color: #9aafff !important; } body.dark-theme #footer li a:visited { color: #d1bfff !important; } body.dark-theme #footer li a:hover { color: #ffffff !important; } /* Couleur des titres (mw-headline) */ body.dark-theme .mw-headline { color: #ffffff !important; } /* Niveaux de titres H1 à H6 en mode sombre */ body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6 { color: #ffffff !important; } /* Liens du menu "Plus" */ body.dark-theme #p-navigation .vector-menu-content li a, body.dark-theme #p-cactions li a, body.dark-theme #p-namespaces .vector-menu-content li a { color: #9aafff !important; } body.dark-theme #p-navigation .vector-menu-content li a:visited, body.dark-theme #p-cactions li a:visited, body.dark-theme #p-namespaces .vector-menu-content li a:visited { color: #d1bfff !important; } body.dark-theme #p-navigation .vector-menu-content li a:hover, body.dark-theme #p-cactions li a:hover, body.dark-theme #p-namespaces .vector-menu-content li a:hover { color: #ffffff !important; } /* Barre de recherche en mode sombre */ body.dark-theme .search-input { background-color: green !important; /* Couleur de fond de la barre de recherche */ color: red !important; /* Couleur du texte de la barre de recherche */ border: 1px solid #555 !important; /* Couleur de la bordure */ } body.dark-theme .search-input::placeholder { color: blue !important; /* Couleur du texte du placeholder */ } body.dark-theme .search-button { background-color: violet !important; /* Couleur de fond du bouton de recherche */ color: white !important; /* Couleur du texte du bouton de recherche */ border: none !important; } body.dark-theme .search-button:hover { background-color: brown !important; /* Couleur de fond du bouton de recherche au survol */ } /* Si les éléments de recherche utilisent des classes différentes, ajuste en conséquence */ /* Barre de recherche en mode sombre */ body.dark-theme #searchInput { background-color: #333 !important; /* Couleur de fond de la barre de recherche en mode sombre */ color: #e0e0e0 !important; /* Couleur du texte de la barre de recherche */ border: 1px solid #555 !important; /* Couleur de la bordure en mode sombre */ box-shadow: inset 0 0 0 1px transparent !important; /* Ombre de la bordure */ } /* Styles pour le champ de saisie au focus */ body.dark-theme #searchInput:focus { outline: 0 !important; border-color: #3366cc !important; box-shadow: inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff !important; } /* Styles pour le champ de saisie au survol */ body.dark-theme #simpleSearch:hover #searchInput { border-color: #72777d !important; } /* Styles pour le bouton de recherche */ body.dark-theme #searchButton { background-color: #007bff !important; /* Couleur de fond du bouton de recherche */ color: white !important; /* Couleur du texte du bouton de recherche */ border: none !important; /* Suppression de la bordure */ } /* Styles pour le bouton de recherche au survol */ body.dark-theme #searchButton:hover { background-color: #0056b3 !important; /* Couleur de fond du bouton de recherche au survol */ } /* ajouter le menu en priorité au début de la navigation par tab / lecteur écran*/ #p-navigation { tabindex: 1; }