MediaWiki:Vector.css

From Dicefolk Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */

/***********************************
Code adpoted from 
* https://support.wiki.gg/wiki/MediaWiki:Vector.css by Mr Pie 5 

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

html {
    --vector-tab-height: 2rem;
    --vector-tab-border-width: 1px;
    --vector-tab-top-spacing: 1.3em;
    --sidebar-width: 10em;
    --sidebar-spacing: 1em;
    --content-right-margin: 5px;
}

/************************************
* Body, head, and general framework *
*************************************/

/* Head */
#mw-head-base {
    background: transparent;
}

#mw-head {
    top: var(--vector-tab-top-spacing);
    z-index: 1;
}

div#mw-page-base {
    background: transparent;
    background-image: none;
}

/* let ul default to text that respects color */
ul {
    list-style-image: none;
}

/* override default table overflowing in favor of media queries (see bottom of sheet) */
table {
    display: table;
    white-space: initial;
}

/************************
* End general framework *
*************************/

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

#mw-panel {
    position: absolute;
    top: 3em;
    z-index: 1;
}

/***********
* End logo *
************/

/**************
* Vector tabs *
***************/
#left-navigation,
#right-navigation {
    margin-top: var(--vector-tab-top-spacing);
}

#left-navigation,
#right-navigation,
.vector-menu-tabs {
    height: var(--vector-tab-height);
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
}

#left-navigation,
#mw-head-base {
    margin-left: calc(var(--sidebar-width) + var(--sidebar-spacing));
}

.vector-menu-tabs li {
    background: none;
}

.vector-menu-tabs li:not(:first-child) a,
#p-cactions {
    margin-left: 5px;
}

.vector-menu-tabs,
.vector-menu-tabs .selected,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background: none;
}

.vector-menu-tabs li a,
.vector-menu-tabs li.new a,
.vector-menu-tabs li.new a:visited,
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
#mw-head .vector-menu-dropdown .vector-menu-heading {
    font-size: 1.25em;
    text-transform: lowercase;
    border-bottom:none;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
    background: #F6F6F6;
    color: black;
}

div.vectorMenu .mw-list-item a,
.vector-menu-dropdown .mw-list-item.selected a,
.vector-menu-dropdown .mw-list-item.selected a:visited {
    color: black;
}

#mw-head .vector-menu-dropdown .vector-menu-heading {
    padding-right: 0.5em;
}

#mw-head .mw-portlet span {
    padding: 0.2em;
}

#p-cactions .vector-menu-content span {
    padding: 0;
}

.vector-menu-tabs .mw-watchlink.icon a {
    padding: calc(var(--vector-tab-height) - (var(--vector-tab-border-width) * 2)) 0 0 0;
    width:2em;
    color: black;
    display: block;
}

.vector-menu-tabs .mw-watchlink.icon a::before {
    top: calc(var(--vector-tab-height) / 4);
    height: calc(var(--vector-tab-height) / 2);
}

.vector-menu-dropdown .vector-menu-content {
    background: none;
    border: none;
    top: var(--vector-tab-height);
}

.vector-menu-dropdown .vector-menu-content-list {
    background-color: white;
    border: 1px solid black;
    margin-left: 6px;
}

.vector-menu-dropdown .vector-menu-heading::after {
    filter: transparent;
}

#p-search {
    margin-right: calc(var(--content-right-margin) + 5px);
}

#p-search form {
    margin: 0;
}

.vector-search-box-input::placeholder {
    color: transparent;
}

/******************
* End vector tabs *
*******************/

/*********************
* Mobile adjustments *
**********************/

@media screen and (max-width:720px) {
    html {
        --vector-tab-height: 2em;
        --vector-tab-border-width: 1px;
        --content-right-margin: 0;
        --nav-right-margin: 10px;
        --nav-left-margin: 5px;
        --logo-height: 6rem;
        --logo-width: 10rem;
        --logo-top-spacing: 35px;
    }

    #p-logo,
    #p-logo a {
        height: var(--logo-height);
        width: var(--logo-width);
    }

    #p-logo {
        position: absolute;
        top: var(--logo-top-spacing);
        left: calc(50vw - (var(--logo-width) / 2));
        margin-left: 0;
        z-index: 1;
    }

    #left-navigation,
    #right-navigation {
        margin-top: calc(var(--logo-height) + var(--logo-top-spacing));
        margin-bottom: 0;
    }

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

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

    div#right-navigation div#p-search {
        margin-right: 0;
    }

    #p-search {
        position: absolute;
        right: var(--nav-right-margin);
        margin-left:var(--nav-left-margin);
        top: calc(var(--logo-height) + var(--logo-top-spacing) + var(--vector-tab-height) + 10px);
        max-width: calc(100% - var(--nav-right-margin) - var(--nav-left-margin));
    }

    #simpleSearch {
        width: 100vw;
        max-width:min(100%, 20em);
    }

    .mw-body {
        border-left: none;
        border-right: none;
        margin-top: 0;
        margin-bottom: 5px;
        padding-top: 5em;
    }

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

    div#mw-page-base {
        height: calc(var(--logo-height) + var(--logo-top-spacing) + var(--vector-tab-height));
        background-color: rgba(var(--wiki-body-dynamic-color--inverted--rgb), 0.5);
    }

    #mw-head {
        top: 0;
    }

    #mw-panel {
        position: unset;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 0
    }

    div#mw-navigation div#mw-panel .portal {
        width: auto;
        text-align: center
    }

    .vector-menu-dropdown .vector-menu-content {
        right: 0;
        left: unset;
    }
    
    .vector-menu-tabs .mw-watchlink.icon a {
        height:100%;
        width:1.25em;
        padding:0;
    }
    
    .vector-menu-tabs .mw-watchlink.icon a::before {
        left:0;
    }

    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;
    }

}

/*************
* End mobile *
**************/
Retrieved from "https://dicefolk.wiki.gg/index.php?title=MediaWiki:Vector.css&oldid=79"