MediaWiki:Gadget-StickyHeader.css

Limpiar la caché

Nota: Después de guardar, quizás necesites actualizar la caché de tu navegador para ver los cambios.

• Firefox/Safari: Mantén presionada la tecla Mayús mientras pulsas el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
• Google Chrome: presiona Ctrl+Shift+R (⌘+Mayús+R en Mac)
• Microsoft Edge: presiona la combinación Ctrl+Shift+R
• Opera: vacía la caché en Herramientas → Preferencias

/********************************************************************* 

             Credits to Alex4401, original code from ARK Wiki.
        https://ark.wiki.gg/wiki/MediaWiki:Gadget-StickyHeader.css
**********************************************************************/
#calamity-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;
    box-shadow: 0 3px 12px 0 var(--sticky-header-shadow-color);
    align-items: center;
    padding: 0 1em;
    background: var(--sticky-header-background-color);
    transition: transform .3s, background .1s;
    backdrop-filter: blur(10px);
}

html {
    scroll-padding-top: calc(var(--netbar-height) + var(--sticky-header-height) + 1em);
}
/* Colocar imagen manualmente */
.sticky-wiki-name img {
    content: url("/es/images/9/96/Site-favicon.png");
    width: 30px;
    height: 30px;
}

.is-sticky-header-visible #calamity-sticky-header {
    transform: translateY(calc(var(--netbar-height) + var(--sticky-header-height)));
}
  
#calamity-sticky-header > *:not(.sticky-search-box) {
    flex-grow: 1;
    flex-basis: 80%;
}
  
#calamity-sticky-header > .sticky-wiki-name {
    font-size: 115%;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.75em;
}

#calamity-sticky-header > .sticky-wiki-name a {
	display: flex;
	align-items: center;
    color: var(--sticky-header-link-color);
}

#calamity-sticky-header > .sticky-wiki-name > a > span {
    margin-left: 0.5em;
    font-size: 90%;
    line-height: 1.25;
    transition: 0.3s;
}

#calamity-sticky-header > .sticky-wiki-name > a > span > span {
    display: block;
    margin-left: 0;
    font-size: 70%;
}
  
#calamity-sticky-header > .sticky-search-box {
    flex-grow: 1;
    flex-basis: 100%;
}

#calamity-sticky-header > .sticky-search-box > #p-search {
    margin: 0;
    width: 100%;
    background: none;
    border-radius: var(--sticky-search-border-radius);
}
  
#calamity-sticky-header > .sticky-search-box form {
    margin: 0;
}
  
#calamity-sticky-header > .sticky-search-box #simpleSearch {
    width: 100%;
    max-width: unset;
    margin-bottom: 1px;
}
  
#calamity-sticky-header > .sticky-search-box #searchInput {
    height: 34px;
    padding-left: 0.8em;
    font-size: 0.90em;
    color: var(--sticky-search-text-color);
    border-color: var(--sticky-search-border-color);
    border-radius: var(--sticky-search-border-radius);
    background: var(--sticky-search-background-color);
}
  
#calamity-sticky-header > .sticky-search-box input::placeholder {
    color: var(--sticky-search-placeholder-text-color);
}

#calamity-sticky-header > .sticky-buttons {
    display: flex;
    justify-content: flex-end;
}

#calamity-sticky-header .sticky-buttons > a {
    color: var(--sticky-button-text-color);
    padding: 0 0.5em;
    border: 1px solid var(--sticky-button-border-color);
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left-width: 0;
    background-color: var(--sticky-button-background-color);
}

#calamity-sticky-header .sticky-buttons > a:hover,
#calamity-sticky-header .sticky-buttons > a:focus {
    background-color: var(--sticky-button-hover-background-color);
}

#calamity-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%;
}

#calamity-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);
}
#calamity-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);
}

#calamity-sticky-header #sticky-edit {
    background-image: var(--icon-edit);
}
#calamity-sticky-header #sticky-history {
    background-image: var(--icon-history);
}
#calamity-sticky-header #sticky-talk {
    background-image: var(--icon-talk);
}

.is-sticky-header-visible #p-cactions .vector-menu-content {
	display: none;
}

/* Transition */
#calamity-sticky-header .sticky-buttons a:hover {
    transition: all 0.3s !important;
}

/* #region Table of contents */
#calamity-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;
}
#calamity-sticky-header #sticky-toc > .toc {
    display: none;
    position: absolute;
    top: 65%;
    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 #calamity-sticky-header #sticky-toc:hover {
	border-bottom-left-radius: 0;
}
.is-sticky-header-visible #calamity-sticky-header #sticky-toc:hover > .toc {
    display: block;
}
#calamity-sticky-header #sticky-toc > .toc > ul {
    margin: 0;
}
#calamity-sticky-header #sticky-toc > .toc > ul ul {
    font-size: 90%;
}
/* #endregion */

@media screen and (max-width: 720px) {
    #calamity-sticky-header {
        padding-right: 0;
    }
    #calamity-sticky-header > .sticky-wiki-name,
    #calamity-sticky-header > .sticky-buttons {
        flex-basis: unset;
    }
    #calamity-sticky-header > .sticky-wiki-name span {
        position: absolute;
        top: -50px;
        font-size: 1px;
    }
    #calamity-sticky-header > .sticky-search-box #searchInput {
        --sticky-header-height: 35px;
        height: var(--sticky-header-height);
        border-bottom: none;
        border-top: none;
    }
    #calamity-sticky-header .sticky-buttons {
        display: none;
    }
    #calamity-sticky-header .sticky-buttons a {
        padding: 0 0.5em;
        height: var(--sticky-header-height);
        transition: 0.3s !important;
    }
    #calamity-sticky-header .sticky-buttons a:first-child {
        border-left-width: 0;
    }
    #calamity-sticky-header > .sticky-search-box #simpleSearch {
       width: 95%;
 }
}