MediaWiki:Gadget-StickyHeader.css
Aller à la navigation
Aller à la recherche
Dans d’autres langues: English • Español • Italiano • 日本語 • Polski • Português do Brasil • Русский •
Tous changements apportés au fichiers CSS et Javascript doivent être conforme aux règles de design du wiki.
Note : après avoir enregistré 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 pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
- Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
- Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
- Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.
#ark-sticky-header {
position: fixed;
height: var(--sticky-header-height);
top: calc(-1 * var(--sticky-header-height));
left: 0;
right: 0;
z-index: 20;
color: var(--sticky-header-text-color);
display: flex;
gap: var(--sticky-header-item-spacing);
box-shadow: 0 3px 12px 0 var(--sticky-header-shadow-color);
align-items: center;
padding: var(--sticky-header-padding);
background: var(--sticky-header-background-color);
transition: transform .3s, background .1s, height .3s;
}
.ark-top {
background: var(--icon-top) center / 1.5rem no-repeat #26405b;
position: fixed;
left: 0.5rem;
bottom: -2rem;
height: 2rem;
width: 2rem;
border-radius: 40%;
opacity: 0.9;
box-shadow: -1px 2px 8px 1px var(--sticky-header-shadow-color);
transition: transform .3s, opacity 0.05s;
}
.ark-top:hover {
opacity: 1;
}
html {
scroll-padding-top: calc(var(--netbar-height) + var(--sticky-header-height) + 1em);
}
.is-sticky-header-visible #ark-sticky-header {
transform: translateY(calc(var(--netbar-height) + var(--sticky-header-height)));
}
.is-sticky-header-visible .ark-top {
transform: translateY(-2.8rem);
}
#ark-sticky-header > .sticky-wiki-name {
font-size: 108%;
font-weight: 600;
white-space: nowrap;
}
#ark-sticky-header > .sticky-wiki-name a {
display: flex;
align-items: center;
color: var(--sticky-header-link-color);
}
#ark-sticky-header > .sticky-wiki-name > a > span {
margin-left: 0.5em;
font-size: 90%;
line-height: 1.25;
}
#ark-sticky-header > .sticky-wiki-name > a > span > span {
display: block;
margin-left: 0;
font-size: 70%;
}
#ark-sticky-header > .sticky-search-box {
flex-grow: 1;
flex-basis: 100%;
}
#ark-sticky-header > .sticky-search-box > #p-search {
margin: 0;
width: 100%;
}
#ark-sticky-header > .sticky-search-box form {
margin: 0;
}
#ark-sticky-header > .sticky-search-box .vector-search-box-inner {
width: 100%;
max-width: unset;
}
#ark-sticky-header > .sticky-search-box .vector-search-box-input {
height: var(--sticky-header-search-height);
padding-left: 0.8em;
font-size: 0.85em;
background: var(--search-background-color--sticky);
color: var(--search-text-color--sticky);
border-color: var(--search-border-color--sticky);
border-radius: var(--sticky-search-border-radius);
}
#ark-sticky-header > .sticky-search-box input::placeholder {
color: var(--search-text-color--placeholder-sticky);
}
#ark-sticky-header .vector-search-box-inner .searchButton {
filter: var( --search-button-filter--sticky );
}
#ark-sticky-header > .sticky-buttons {
display: flex;
justify-content: flex-end;
}
#ark-sticky-header .sticky-buttons > a {
color: var(--sticky-button-text-color);
padding: 0 0.5em;
border: 1px solid var(--sticky-button-border-color);
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border-left-width: 0;
background-color: var(--sticky-button-background-color);
}
#ark-sticky-header .sticky-buttons > a:hover,
#ark-sticky-header .sticky-buttons > a:focus {
background-color: var(--sticky-button-hover-background-color);
}
#ark-sticky-header .sticky-buttons > .with-icon {
padding: 0 0.3em;
background-position: center center;
background-repeat: no-repeat;
font-size: 0;
width: 32px;
background-size: 55%;
}
#ark-sticky-header .sticky-buttons > a:first-child {
border-left-width: 1px;
border-top-left-radius: var(--sticky-button-border-radius);
border-bottom-left-radius: var(--sticky-button-border-radius);
}
#ark-sticky-header .sticky-buttons > a:last-child {
border-top-right-radius: var(--sticky-button-border-radius);
border-bottom-right-radius: var(--sticky-button-border-radius);
}
#ark-sticky-header #sticky-edit {
background-image: var(--icon-edit);
}
#ark-sticky-header #sticky-history {
background-image: var(--icon-history);
}
#ark-sticky-header #sticky-talk {
background-image: var(--icon-talk);
}
.is-sticky-header-visible #p-cactions .vector-menu-content {
display: none;
}
/* #region Table of contents */
#ark-sticky-header #sticky-toc {
position: relative;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7zM2 6h1V1H1v1h1zm1 9v1H2v1h1v1H1v1h3v-5H1v1zM1 8v1h2v1H1.5a.5.5 0 0 0-.5.5V13h3v-1H2v-1h1.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E%0A");;
transition: border-bottom-left-radius .07s;
}
#ark-sticky-header #sticky-toc > .toc {
display: none;
position: absolute;
top: 100%;
box-sizing: border-box;
padding: 0.5em 1em;
width: 250px;
max-height: 400px;
overflow-y: auto;
border-radius: 6px;
line-height: 1.4;
font-size: 14px;
}
.is-sticky-header-visible #ark-sticky-header #sticky-toc:hover {
border-bottom-left-radius: 0;
}
.is-sticky-header-visible #ark-sticky-header #sticky-toc:hover > .toc {
display: block;
}
#ark-sticky-header #sticky-toc > .toc > ul {
margin: 0;
}
#ark-sticky-header #sticky-toc > .toc > ul ul {
font-size: 90%;
}
/* #endregion */
@media screen and (max-width: 720px) {
#ark-sticky-header > .sticky-wiki-name,
#ark-sticky-header > .sticky-buttons {
flex-basis: unset;
}
#ark-sticky-header > .sticky-wiki-name span {
position: absolute;
top: -50px;
font-size: 1px;
}
#ark-sticky-header > .sticky-search-box #searchInput {
height: var(--sticky-header-search-height);
border-bottom: none;
border-top: none;
}
#ark-sticky-header .sticky-buttons {
display: none;
}
#ark-sticky-header .sticky-buttons a {
padding: 0 0.5em;
height: var(--sticky-header-height);
}
#ark-sticky-header .sticky-buttons a:first-child {
border-left-width: 0;
}
}