MediaWiki:Main 3.css: Difference between revisions
From Tiny Rogues Wiki
(Blanked the page) Tags: Blanking Manual revert |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* 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; | |||
} | |||
} |
Revision as of 17:16, 19 January 2024
/* 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;
}
}