MediaWiki:Main 3.css
From Tiny Rogues Wiki
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;
}
}