Information: 0.2.5 is officially out! Please bear with us while we are working on updating the wiki. This patch is massive so a lot of work will be needed. Enjoy the game in the meantime!

MediaWiki:Main 3.css

From Tiny Rogues Wiki
Revision as of 17:16, 19 January 2024 by Ken (talk | contribs)

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.
/* Responsive Styles */
@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation .sidebar-chunk {
        padding: 0 !important;
    }

    #mw-site-navigation .sidebar-inner,
    #mw-related-navigation .sidebar-inner {
        padding: 0!important;
        min-width: 10.5rem;
    }

    .sidebar-chunk ul li > a {
        border-color: white;
    }

    #simpleSearch {
        width: 95%;
        margin-left: auto;
    }

    #mw-site-navigation {
        z-index: 99;
    }
    #mw-header-nav-hack {
        background-color: var(--theme-tone-5);
        border-top-color: var(--theme-tone-5);
    }
    #mw-site-navigation,
    .sidebar-chunk,
    div.color-left,
    div.color-middle,
    div.color-right {
        background-color: var(--theme-tone-5) !important;
    }
    .dark-mode #mw-site-navigation h2:after,
    .dark-mode #mw-related-navigation h2:after {
        filter: invert(1);
    }
    .sidebar-inner,
    div.sidebar-chunk li > ul {
        background: var(--theme-tone-4) !important;
        border-color: var(--border-color) !important;
    }
    .sidebar-inner li a {
        border-color: var(--theme-tone-4) !important;
    }
    .dark-mode #mw-related-navigation .sidebar-inner:after {
        margin-top: -3px;
        border-bottom-color: var(--border-color);
    }
    #mw-related-navigation .sidebar-inner:before {
        border-bottom-color: var(--border-color);
    }
    .dark-mode #mw-site-navigation .dropdown-active h2 span:before,
    .client-nojs .dark-mode #mw-site-navigation .sidebar-chunk:hover h2 span:before,
    .dark-mode #mw-site-navigation .dropdown-active h2 span:after,
    .client-nojs .dark-mode #mw-site-navigation .sidebar-chunk:hover h2 span:after {
        filter: brightness(0.3);
        margin-top: -3px;
    }
    div#page-tools.sidebar-chunk {
        padding-top: 0.8rem!important;
        border:none!important;
    }
    .sidebar-chunk h2 span {
        font-family: 'Familjen Grotesk'!important;
    }
    .sidebar-chunk h2:not(#page-tools h2) {
        padding-top: 0.3em!important;
    }
    #mw-site-navigation .sidebar-chunk h2 span:after {
        top: 35px!important;
        border-bottom-color: var(--border-color)!important;
    }
    #mw-related-navigation .sidebar-inner:after {
        border-bottom-color: var(--border-color)!important;
    }
    #mw-header-nav-hack {
        border-top: 1px solid var(--border-color);
    }
    #content {
        margin-top: 3rem;
    }
    #page-tools, #mw-related-navigation {
        background: none!important;
    }
    .sidebar-chunk h3:not(.dark-mode h3) {
        background: var(--theme-tone-7)!important
    }
}

@media screen and (max-width: 550px) {
    #p-logo-text {
        position: absolute;
    }
}

@media screen and (max-width: 1300px) {
    body {
        overflow-x: hidden;
    }
}

@media screen and (max-width: 850px) {
    .dark-mode #site-navigation h2,
    .dark-mode #site-tools h2 {
        filter: invert(1);
    }
}

@media screen and (max-width: 1600px) {
    .current-info .segment-contents .mw-collapsible-content {
        flex-direction: column;
    }
    .boss-timer-section,
    .boss-timer-section .tabber-content {
        width: auto !important;
    }
    .timers-wrap {
        place-content: center;
    }
}

@media screen and (max-width: 767px) {
    table {
        max-width: 100%;
        overflow-x: auto;
        display: inline-table !important;
    }

    .hscroll {
        width: 100%;
        overflow-x: scroll;
    }

    .infobox {
        float: left !important;
    }
    .split.uneven-split .segment-headers,
    .split.uneven-split .segment-contents {
        grid-template-columns: auto;
    }
}

@media screen and (min-width: 1340px) {
    #mw-site-navigation .sidebar-chunk .mw-portlet-body,
    #mw-related-navigation .sidebar-chunk .mw-portlet-body {
        margin-bottom: 1rem;
    }

    #mw-site-navigation .sidebar-chunk .mw-portlet-body:last-of-type,
    #mw-related-navigation .sidebar-chunk .mw-portlet-body:last-of-type {
        margin-bottom: 0;
    }
}