MediaWiki:Vector.css

De Hello Kitty Island Adventure Wiki
Aller à la navigation Aller à la recherche

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.
/* All CSS here will be loaded for users of the Vector skin */
/* override default wiki.gg table overflowing in favor of media queries (see bottom of sheet) */
table {
    display: table;
    white-space: unset;
}

/*******
* Logo *
********/
/* [[File:Site-logo.png]] */

.mw-wiki-logo {
    background-size: contain;
}

/*********************
* Mobile adjustments *
**********************/
@media screen and (max-width:720px) {
    :root {
        --wiki-content-right-margin: 0px;
        --wiki-content-padding:0.5rem;
        --wiki-navigation-right-margin: 1px;
        --wiki-navigation-left-margin: 0px;
        --wiki-navigation-top-padding: 5px;
        --wiki-navigation-bottom-padding:0px;
        --wiki-navigation-height:2rem;
        --wiki-navigation-search-height:2.15rem;
        --wiki-navigation-search-margin:0.5rem;
        --wiki-logo-height: 80px;
        --wiki-logo-width: 100%;
        --wiki-logo-margin: 10px;
        --wiki-head-height: calc(var(--wiki-logo-height) + (var(--wiki-logo-margin) * 2) + var(--wiki-navigation-height) + var(--wiki-navigation-top-padding) + var(--wiki-navigation-bottom-padding));
        --wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
    }

    #mw-page-base,
    #mw-head-base {
        height:var(--wiki-head-height);
    }
    
    #mw-page-base {
        padding-top:35px;
    }
    
    #mw-head-base {
        margin-top:calc(var(--wiki-head-height) * -1);
    }

    #p-logo,
    #p-logo a {
        height: var(--wiki-logo-height);
        width: var(--wiki-logo-width);
    }
    
    #p-logo {
        position:absolute;
        background:none;
        padding:0;
        left:0;
        margin:var(--wiki-logo-margin) 0;
        transform:none;
        /* Logo's a part of the sidebar panel, which uses relative positioning for the expandable button. Offset the logo appropriately. */
        top: calc(-1 * var(--panel-top-offset) + 35px);
    }
    
    .mw-wiki-logo {
        background-size:contain;
    }
    
    #mw-head {
        left:0;
        width:100%;
        top:calc(var(--wiki-head-height) + 35px - var(--wiki-navigation-height));
        border:none;
        border-image:none;
    }
    
    #mw-navigation {
        position:unset;
    }

    #left-navigation,
    #right-navigation {
        margin-top: 0;
        height:var(--wiki-navigation-height);
    }

    #right-navigation {
        margin-right: var(--wiki-navigation-right-margin);
    }

    div#left-navigation {
        margin-left: var(--wiki-navigation-left-margin);
    }

    div#right-navigation div#p-search {
        margin-right: 0;
    }
    
    .vector-menu-tabs-legacy,
    .vector-menu-dropdown {
        height:var(--wiki-navigation-height);
    }
    
    .vector-menu-tabs-legacy li a {
        height:var(--wiki-navigation-height);
    }
    
    #p-cactions {
        padding-bottom: 0px;
    }

    #p-search {
        position: absolute;
        z-index: 2;
        left: 50%;
        transform:translateX(-50%);
        top: calc(var(--wiki-navigation-height) + var(--wiki-navigation-bottom-padding));
        margin-left:0px;
    }

    #simpleSearch {
        width: calc(100vw - var(--wiki-navigation-right-margin) - var(--wiki-navigation-left-margin));
    }
    
    .vector-search-box-input {
        height:var(--wiki-navigation-search-height);
    }
    
    .vector-search-box form {
        margin:var(--wiki-navigation-search-margin) 0px;
    }

    .mw-body {
        border-left: none;
        border-right: none;
        margin-top: 0;
        padding-top:calc(var(--wiki-content-padding) + var(--wiki-navigation-search-height) + var(--wiki-navigation-bottom-padding) + (var(--wiki-navigation-search-margin) * 2));
    }

    .mw-footer {
        border-left: none;
        border-right: none;
    }

    #mw-panel {
        position: unset;
        bottom: unset;
        width:100%;
        margin: 0px auto;
        padding: 0;
        top: 0;
        background-position:bottom right, top center;
        background-size:100% 0.5em, 100% 100%;
        float:unset;
        padding-bottom: 15px;
		border: none;
    	background: none;
    	box-shadow: none;
    	backdrop-filter: none;
    	-webkit-backdrop-filter: none;
    }

    div#mw-navigation div#mw-panel .portal {
        box-sizing:border-box;
        text-align: center
    }

    .vector-menu-dropdown .vector-menu-content {
        right: 0;
        left: unset;
    }
    
    #mw-panel .vector-menu-portal {
        border-left-width:0;
        border-right-width:0;
        padding-bottom: 15px;
	    background: rgba(var(--wiki-sidebar-background-color--rgb), var(--wiki-sidebar-background-opacity));
	    backdrop-filter: blur(5px);
	    -webkit-backdrop-filter: blur(5px);
    }
    
    table.wikitable,
    table.responsive-table {
        display: block;
        overflow-x: scroll;
    }

    /* advanced search options */
    #mw-searchoptions table {
        float: none;
    }

    #mw-searchoptions table td {
        display: block;
    }

    /* popup when clicking the download button in multimediaviewer */
    .mw-mmv-dialog {
        width: unset;
    }

    /* turn math elements into scroll blocks unless they're an immediate child of a span */
    :not(span)>.mwe-math-element {
        display: block;
        overflow-x: auto;
    }

    /* Expandable mobile navigation panel */
    .client-js #mw-panel {
        position: absolute;
        --panel-top-offset: calc(var(--wiki-head-height) + 35px - var(--wiki-navigation-height) - var(--wiki-navigation-height) - 0.3rem);
        top: var(--panel-top-offset);
        z-index: 3;
    }

    .client-js #mw-panel .mobile-nav-toggle {
        position: relative;
        z-index: 5;
        display: block;
        appearance: none;
        border: 1px solid var(--wiki-content-border-color);
        margin-left: var(--wiki-navigation-left-margin);
        margin-bottom: -1px;
        background-image: linear-gradient(to top, var(--wiki-navigation-background-color) 0, var(--wiki-navigation-background-color--secondary) 1px, var(--wiki-content-background-color) 100%);
    }

    .client-js #mw-panel .vector-menu-portal {
        display: none;
    }

    .client-js #mw-panel .mobile-nav-toggle.nav--expanded ~ .vector-menu-portal {
        display: block;
    }

    .client-js #mw-navigation #mw-panel .vector-menu-portal {
        text-align: left;
        font-size: 110%;
        border-left-width: 1px;
        border-right-width: 1px;
        margin-inline: var(--wiki-navigation-left-margin);
    }

    .client-js #mw-navigation #mw-panel .vector-menu-portal + .vector-menu-portal {
        border-top: 0;
    }

    .client-js #mw-navigation #mw-panel .vector-menu-portal:not(:last-child) {
        border-bottom: 0;
    }

    .client-js #mw-panel .vector-menu-content-list {
        display: flex;
        flex-wrap: wrap;
    }

    .client-js #mw-panel .vector-menu-content-list a {
        display: block;
        padding: 0.2rem 0.5rem;
        border: 1px solid transparent;
    }

    .client-js #mw-panel .vector-menu-content-list a:hover {
        border-color: var(--wiki-content-link-color);
    }

    .client-js #mw-panel #p-navigation-label {
        display: block;
    }

    .mobile-nav-toggle {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z'/%3E%3C/svg%3E%0A");
        --icon-padding: 0.3rem;
        --icon-size: calc(var(--wiki-navigation-height) - var(--icon-padding) * 2);
    }


    /* icon navbar tabs + expandable nav panel icon */
    #mw-head {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none' stroke='none'/%3E%3Cpath d='M4 4l4 16l4 -14l4 14l4 -16'/%3E%3C/svg%3E");
        --icon-padding: 0.1rem;
        --icon-size: calc(var(--wiki-navigation-height) - var(--icon-padding) * 2);
    }

    #mw-head .vector-menu-tabs .mw-list-item a,
    #mw-head .vector-menu-dropdown .vector-menu-heading,
    #mw-panel .mobile-nav-toggle {
        line-height:var(--icon-size);
        width: var(--icon-size); /* same as line height */
        height: var(--icon-size);
        box-sizing: content-box;
        padding: var(--icon-padding);
        color: transparent; /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
    }

    #mw-head .vector-menu-tabs .mw-list-item a::before,
    #mw-head .vector-menu-dropdown .vector-menu-heading::before,
    #mw-panel .mobile-nav-toggle::before {
        content: "";
        display: block;
        position: unset;
        background-image: none;
        width: var(--icon-size);
        height: var(--icon-size);
        margin: 0;
        --mask: var(--icon) no-repeat;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-position: center center;
        mask-position: center center;
        background-color: var(--wiki-navigation-text-color);
    }

    #mw-head .vector-menu-tabs .mw-list-item a:hover::before,
    #mw-head .vector-menu-dropdown .vector-menu-heading:hover::before,
    #mw-panel .mobile-nav-toggle:hover::before,
    #mw-panel .mobile-nav-toggle.nav--expanded::before {
        background-color: var(--wiki-navigation-selected-text-color);
    }

    #mw-head .vector-menu-tabs .mw-list-item a span,
    #mw-head .vector-menu-dropdown .vector-menu-heading span {
        display: none;
    }

    #mw-head .vector-menu-dropdown .vector-menu-heading::after {
        display: none;
    }

    #ca-edit {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m16.77 8 1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z'/%3E%3C/svg%3E%0A");
    }

    #ca-view,
    #ca-view-foreign {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 14.5a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5M10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E");
    }

    #left-navigation li[id^=ca-nstab-] {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E article %3C/title%3E%3Cpath d='M5 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 3h5v1H5zm0 2h5v1H5zm0 2h5v1H5zm10 7H5v-1h10zm0-2H5v-1h10zm0-2H5v-1h10zm0-2h-4V4h4z'/%3E%3C/svg%3E%0A");
    }

    #ca-history {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6z'/%3E%3Cpath d='M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18'/%3E%3C/svg%3E%0A");
    }

    #ca-talk {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M26,12H24V6a3,3,0,0,0-3-3H6A3,3,0,0,0,3,6V24.41l5.12-5.12A1.05,1.05,0,0,1,8.83,19H12v3a3,3,0,0,0,3,3h8.17a1.05,1.05,0,0,1,.71.29L29,30.41V15A3,3,0,0,0,26,12ZM12,15v2H8.83a3,3,0,0,0-2.12.88L5,19.59V6A1,1,0,0,1,6,5H21a1,1,0,0,1,1,1v6H15A3,3,0,0,0,12,15ZM27,25.59l-1.71-1.71A3,3,0,0,0,23.17,23H15a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H26a1,1,0,0,1,1,1Z'/%3E%3C/g%3E%3C/svg%3E");
    }

    #t-contributions {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg enable-background='new 0 0 32 32' id='Stock_cut' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc/%3E%3Cpath d='M27,12V5h-7v0 c0-2.209-1.791-4-4-4h0c-2.209,0-4,1.791-4,4v0H1v7h0c2.209,0,4,1.791,4,4v0c0,2.209-1.791,4-4,4h0v11h11v0c0-2.209,1.791-4,4-4h0 c2.209,0,4,1.791,4,4v0h7V20h0c2.209,0,4-1.791,4-4v0C31,13.791,29.209,12,27,12L27,12z' fill='none' stroke='%23000000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
    }

    #ca-addsection {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='29 15 17 15 17 3 15 3 15 15 3 15 3 17 15 17 15 28 17 28 17 17 29 17 29 15'/%3E%3C/g%3E%3C/svg%3E");
    }

    #ca-viewsource {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='heroicon-ui' d='M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z'/%3E%3C/svg%3E");
    }

    #p-variants {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm8,13a24.28,24.28,0,0,0-.41-3.62c2.19.91,3.75,2.19,4.25,3.62Zm-2,0H17V10a20.9,20.9,0,0,1,4.34.63A20.26,20.26,0,0,1,22,15ZM17,8V4.19c1.43.5,2.71,2.06,3.62,4.25A24.28,24.28,0,0,0,17,8ZM15,4.19V8a24.28,24.28,0,0,0-3.62.41C12.29,6.25,13.57,4.69,15,4.19ZM15,10v5H10a20.26,20.26,0,0,1,.63-4.34A20.9,20.9,0,0,1,15,10ZM8,15H4.19c.5-1.43,2.06-2.71,4.25-3.62A24.28,24.28,0,0,0,8,15Zm0,2a24.28,24.28,0,0,0,.41,3.62C6.25,19.71,4.69,18.43,4.19,17Zm2,0h5v5a20.9,20.9,0,0,1-4.34-.63A20.26,20.26,0,0,1,10,17Zm5,7v3.84c-1.43-.5-2.71-2.06-3.62-4.25A24.28,24.28,0,0,0,15,24Zm2,3.84V24a24.28,24.28,0,0,0,3.62-.41C19.71,25.75,18.43,27.31,17,27.81ZM17,22V17h5a20.26,20.26,0,0,1-.63,4.34A20.9,20.9,0,0,1,17,22Zm7-5h3.84c-.5,1.43-2.06,2.71-4.25,3.62A24.28,24.28,0,0,0,24,17Zm2.87-6.12A15.11,15.11,0,0,0,23,9a15.11,15.11,0,0,0-1.85-3.87A12.12,12.12,0,0,1,26.84,10.88Zm-16-5.72A15.11,15.11,0,0,0,9,9a15.11,15.11,0,0,0-3.87,1.85A12.12,12.12,0,0,1,10.88,5.16Zm-5.72,16A15.11,15.11,0,0,0,9,23a15.11,15.11,0,0,0,1.85,3.87A12.12,12.12,0,0,1,5.16,21.12Zm16,5.72A15.11,15.11,0,0,0,23,23a15.11,15.11,0,0,0,3.87-1.85A12.12,12.12,0,0,1,21.12,26.84Z'/%3E%3C/g%3E%3C/svg%3E");
    }

    #p-cactions {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/svg%3E%0A");
    }
    
    #ca-watch {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z'/%3E%3C/svg%3E%0A");
    }
    
    #ca-unwatch {
        --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' id='Outlined'%3E%3Cg style='fill:%23000000;fill-opacity:1' id='Fill'%3E%3Cpath style='fill:%23000000;fill-opacity:1' id='path1380' d='M 28.61,11.67 H 20 L 17.34,3.47 C 16.920093,2.1973942 15.119907,2.1973942 14.7,3.47 L 12,11.67 H 3.39 c -1.3409796,0.0031 -1.900508,1.71581 -0.82,2.51 l 7,5.07 -2.68,8.21 C 6.5980433,28.35747 7.2662365,29.278767 8.21,29.28 8.4953889,29.267666 8.7705436,29.170143 9,29 l 7,-5.07 7,5.07 c 0.236205,0.170386 0.518805,0.264586 0.81,0.27 0.943763,-0.0012 1.611957,-0.92253 1.32,-1.82 l -2.66,-8.21 7,-5.07 c 1.075277,-0.810084 0.486081,-2.522863 -0.86,-2.5 z' /%3E%3C/g%3E%3C/svg%3E");
    }
    
    .vector-menu-tabs #ca-watch.icon a:hover::before,
    .vector-menu-tabs #ca-unwatch.icon a:hover::before {
        background-image:none;
    }
  
    /* RecentChanges - prevent overflow on long summaries */
    .client-js .mw-changeslist ul,
	.client-js .mw-changeslist table.mw-enhanced-rc {
		margin-left:0;
	}

	.mw-changeslist-line-inner-comment,
	.mw-changeslist-line .comment {
		font-size:0.9em;
		word-break:break-all;
	}

	.mw-userlink {
		overflow-wrap:anywhere;
	}
}

/* Hide the expandable navigation button for desktop users */
.mobile-nav-toggle {
    display: none;
}

/*************
* End mobile *
**************/