ElEditors, Interface administrators, Administrators
70,975
edits
No edit summary |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* | /* after content section */ | ||
#mw-data-after-content > div { | |||
display: flex; | |||
flex-direction: column; | |||
padding: 10px; | |||
gap: 15px; | |||
place-items: center; | |||
} | } | ||
#mw-data-after-content br { | |||
display: none; | |||
} | |||
#mw-data-after-content { | |||
background: var(--theme-tone-6); | |||
border-radius: 0 0 5px 5px; | |||
} | } | ||
. | #mw-data-after-content a.nn-cmp-show { | ||
margin-top: 0.8em; | |||
display: inline-block; | |||
padding: 5px 10px; | |||
background-color: var(--theme-tone-3); | |||
width: fit-content; | |||
border-radius: 4px; | |||
font-weight: 500; | |||
color: black; | |||
transition: background-color 0.3s, color 0.2s; | |||
text-decoration: none; | |||
color: var(--text-color); | |||
} | } | ||
. | #mw-data-after-content a.nn-cmp-show:hover { | ||
background-color: var(--accent-color); | |||
color: white; | |||
} | } | ||
@media screen and (min-width: 1100px) and (max-width: 1340px) { | |||
#content-bottom-stuff { | |||
margin-left: 0; | |||
display: table-caption; | |||
} | |||
#mw-related-navigation .sidebar-chunk { | |||
box-shadow: 0 0 2px 1px rgb(0 0 0 / 10%) !important; | |||
} | |||
#mw-related-navigation { | |||
position: absolute; | |||
right: 0; | |||
transform: translateX(90%); | |||
transition: 300ms; | |||
} | |||
#mw-related-navigation:hover { | |||
transform: translateX(0); | |||
} | |||
} | } | ||
/****************************** Checkbox, Radio & Button Styles ******************************/ | |||
input, | |||
button { | |||
position: relative; | position: relative; | ||
} | } | ||
. | /****************************** Namebox Styles ******************************/ | ||
table.nmbox { | |||
border-collapse: collapse; | |||
width: 100%; | |||
clear: both; | |||
font-size: 85%; | |||
border: 2px solid #bfdbe3; | |||
margin: 20px 0; | |||
} | |||
.nmbox th:first-of-type { | |||
width: 80px; | |||
} | |||
table.nmbox > tbody > tr > th, | |||
table.nmbox > tbody > tr > td { | |||
padding: 0.4em 0.8em; | |||
} | } | ||
. | table.nmbox > tbody > tr > td { | ||
background-color: #f7fdff; | |||
} | } | ||
. | table.nmbox > tbody > tr > th { | ||
background-color: #ebf4f7; | |||
background-color: | |||
} | } | ||
. | #p-googleadsense .pBody { | ||
padding-top: 5px; | |||
text-align: center; | |||
} | } | ||
. | /* Collapsible toggle */ | ||
.mw-content-ltr .section-border .mw-collapsible-toggle { | |||
padding-right: 10px; | |||
position: absolute; | |||
right: 0; | |||
} | } | ||
. | /* floating text */ | ||
.textfloat { | |||
color: #fff; | |||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
. | .textfloat a, | ||
.textfloat a:link, | |||
.textfloat a:visited, | |||
.textfloat a:hover, | |||
.textfloat a:active { | |||
color: inherit; | |||
} | } | ||
th { | |||
background-color: | background-color: inherit; | ||
} | } | ||
. | /** | ||
background- | Bilibili Sidebar Style | ||
**/ | |||
.portal h3 { | |||
background-image: none !important; | |||
padding: 0 0 3px 0 !important; | |||
} | } | ||
. | .portal h3, | ||
.portal h3:hover, | |||
.portal h3:active, | |||
.portal h3:link, | |||
.portal h3:visited { | |||
font-weight: bolder !important; | |||
text-decoration: none !important; | |||
} | } | ||
. | .portal li > ul { | ||
background-color: | position: absolute; | ||
visibility: hidden; | |||
left: 100%; | |||
background-color: #fff; | |||
margin-top: -1em !important; | |||
margin-left: -10px !important; | |||
min-width: 180px; | |||
max-width: 230px; | |||
opacity: 0; | |||
-webkit-box-shadow: 10px 10px 10px #ccf; | |||
-moz-box-shadow: 10px 10px 10px #ccf; | |||
box-shadow: 10px 10px 10px #ccf; | |||
} | } | ||
. | .portal li:hover > ul { | ||
opacity: 1; | |||
visibility: visible; | |||
} | } | ||
. | .portal ul, | ||
.portal li, | |||
.portal a, | |||
.portal strong.selflink { | |||
display: block; | |||
} | } | ||
. | .portal a, | ||
.portal strong.selflink { | |||
max-width: 96%; | |||
} | } | ||
. | .portal li { | ||
position: relative; | |||
font-weight: bold; | |||
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; | |||
text-decoration: none; | |||
padding: 0; | |||
margin: 0; | |||
} | } | ||
. | .portal li:hover { | ||
-webkit-transform: translateX(10px); | |||
-moz-transform: translateX(10px); | |||
-ms-transform: translateX(10px); | |||
-o-transform: translateX(10px); | |||
transform: translateX(10px); | |||
} | } | ||
. | .portal a, | ||
.portal a:link, | |||
.portal a:visited, | |||
.portal a:hover, | |||
.portal a:active, | |||
.portal strong.selflink { | |||
text-decoration: none; | |||
color: #000 !important; | |||
} | } | ||
. | .portal a:before, | ||
color: | .portal a:after, | ||
.portal strong.selflink:before, | |||
.portal strong.selflink:after { | |||
color: #07a3d7; | |||
margin: auto 3px; | |||
} | } | ||
. | .portal a:before, | ||
.portal strong.selflink:before { | |||
content: ">"; | |||
} | } | ||
. | .portal a:after, | ||
.portal strong.selflink:after { | |||
content: "<"; | |||
visibility: hidden; | |||
-webkit-transform: translateX(15px); | |||
-moz-transform: translateX(15px); | |||
-ms-transform: translateX(15px); | |||
-o-transform: translateX(15px); | |||
transform: translateX(15px); | |||
} | } | ||
. | .portal a:hover:after, | ||
. | .portal strong.selflink:hover:after { | ||
visibility: visible; | |||
-webkit-transform: translateX(0px); | |||
-moz-transform: translateX(0px); | |||
-ms-transform: translateX(0px); | |||
-o-transform: translateX(0px); | |||
transform: translateX(0px); | |||
} | } | ||
. | .portal strong.selflink { | ||
color: #07a3d7 !important; | |||
border-bottom: 2px #07a3d7 solid; | |||
} | } | ||
.portal a:after, | |||
.portal strong.selflink:after, | |||
.portal li { | |||
-webkit-transition: transform 0.3s; | |||
-moz-transition: transform 0.3s; | |||
-o-transition: transform 0.3s; | |||
transition: transform 0.3s; | |||
} | } | ||
.portal li > ul { | |||
-webkit-transition: opacity 0.3s; | |||
-moz-transition: opacity 0.3s; | |||
-o-transition: opacity 0.3s; | |||
transition: opacity 0.3s; | |||
} | } | ||
/** floating header **/ | |||
.persistHeader { | |||
position: fixed; | |||
top: 0; | |||
display: block; | |||
width: 100%; | |||
z-index: 3000; | |||
background-color: red; | |||
} | } | ||
.persistHeader.visible { | |||
visibility: visible; | |||
} | } | ||
code { | |||
font- | display: inline-block; | ||
font-weight: bold; | |||
font-family: "Consolas", "Menlo", "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", monospace; | |||
background-color: #eee; | |||
color: #4e9a06; | |||
padding: 2px 0.4em; | |||
border-radius: 3px; | |||
} | } | ||
.rainbow-text { | |||
background-image: -webkit-gradient( | |||
linear, | |||
left top, | |||
right top, | |||
color-stop(0, #f22), | |||
color-stop(0.15, #f2f), | |||
color-stop(0.3, #22f), | |||
color-stop(0.45, #2ff), | |||
color-stop(0.6, #2f2), | |||
color-stop(0.75, #2f2), | |||
color-stop(0.9, #ff2), | |||
color-stop(1, #f22) | |||
); | |||
background-image: gradient( | |||
linear, | |||
left top, | |||
right top, | |||
color-stop(0, #f22), | |||
color-stop(0.15, #f2f), | |||
color-stop(0.3, #22f), | |||
color-stop(0.45, #2ff), | |||
color-stop(0.6, #2f2), | |||
color-stop(0.75, #2f2), | |||
color-stop(0.9, #ff2), | |||
color-stop(1, #f22) | |||
); | |||
color: transparent; | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
} | } | ||
.rainbow { | |||
background-color: orange; | |||
} | } | ||
* { | |||
text-rendering: optimizeSpeed; | |||
} | } | ||
.mw-body .external { | |||
padding-right: 0; | |||
background-image: none; | |||
} | } | ||
.shady, | |||
.shady a { | |||
background-color: black !important; | |||
color: transparent !important; | |||
} | } | ||
.shady:hover, | |||
.shady:hover a, | |||
.shady a:hover { | |||
background-color: black !important; | |||
color: white !important; | |||
. | |||
. | |||
. | |||
} | } | ||
/* Hoverimage */ | |||
.hoverimage img { | |||
opacity: 0; | |||
filter: alpha(opacity=0); | |||
} | } | ||
.hoverimage img:hover { | |||
opacity: 1; | |||
filter: alpha(opacity=100); | |||
} | } | ||
.hoverimages img { | |||
opacity: 0.85; | |||
filter: alpha(opacity=0); | |||
} | } | ||
.hoverimages img:hover { | |||
opacity: 1; | |||
filter: alpha(opacity=100); | |||
} | } | ||
/* Installing Hover Logo */ | |||
#WikiHeader h1.wordmark img { | |||
opacity: 0.85; | |||
filter: alpha(opacity=85); | |||
/* For IE8 and earlier */ | |||
} | } | ||
#WikiHeader h1.wordmark img:hover { | |||
opacity: 1; | |||
filter: alpha(opacity=100); | |||
/* For IE8 and earlier */ | |||
} | } | ||
/* ImageHover */ | |||
.fadeout-container:hover .fadeout { | |||
z-index: -1 !important; | |||
} | } | ||
. | .fadeout img:hover { | ||
opacity: 0; | |||
} | } | ||
. | .fadeout img:active { | ||
opacity: 0; | |||
} | } | ||
. | body:not(.editor) .fadeout-container.fadeout-hide-bottom > :nth-child(2) { | ||
. | visibility: hidden; | ||
/* the 'body:not(.editor)' is used to prevent hiding the image in editing mode where it is not displayed properly */ | |||
} | } | ||
.inner-border th:not(th:last-child) { | |||
border-right: 1px solid var(--border-color); | |||
} | } | ||
/* Tooltip */ | |||
border-bottom: 1px | .tooltip { | ||
position: relative; | |||
display: inline-block; | |||
border-bottom: 1px dotted var(--text-color); | |||
} | } | ||
tr[style] th .tooltip, | |||
border- | table[class*="colortable-"] tr th .tooltip, | ||
table[class*="colortable-"] tr th .tippy-btn { | |||
border-bottom-color: #000 !important; | |||
} | } | ||
.tooltiptext { | |||
visibility: hidden; | |||
min-width: 400px; | |||
padding: 12px 14px; | |||
text-align: center; | |||
position: absolute; | |||
left: 50%; | |||
bottom: calc(20px + 100%); | |||
z-index: 100004; | |||
background: var(--theme-tone-3); | |||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); | |||
border: 1px solid var(--border-color-tone-2); | |||
border-radius: 2px; | |||
font-weight: normal; | |||
text-shadow: none; | |||
border-radius: 4px; | |||
color: var(--text-color); | color: var(--text-color); | ||
} | } | ||
.tooltiptext:after, | |||
.tooltiptext:before { | |||
content: ""; | |||
position: absolute; | |||
left: 50%; | |||
border-style: solid; | |||
} | } | ||
.tooltiptext:after { | |||
top: 100%; | |||
bottom: auto; | |||
width: 20px; | |||
height: 20px; | |||
background: var(--theme-tone-3); | |||
margin-top: -10px; | |||
margin-left: -10px; | |||
box-shadow: 1px 1px 0px var(--border-color-tone-2); | |||
transform: rotate(45deg); | |||
border-width: 0; | |||
} | } | ||
.tooltiptext:before { | |||
top: 100%; | |||
bottom: auto; | |||
border-width: 18px; | |||
margin-left: -18px; | |||
border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent; | |||
pointer-events: none; | |||
} | } | ||
.tooltip .tooltip .tooltiptext { | |||
bottom: auto; | |||
top: calc(20px + 100%); | |||
} | } | ||
.tooltip .tooltip .tooltiptext:after { | |||
top: auto; | |||
bottom: 100%; | |||
border-width: 15px; | |||
margin-left: -15px; | |||
border-color: transparent transparent var(--theme-tone-7) transparent; | |||
width: 0; | |||
height: 0; | |||
box-shadow: none; | |||
background: none; | |||
transform: none; | |||
} | } | ||
.tooltip .tooltip .tooltiptext:before { | |||
border- | top: auto; | ||
bottom: 100%; | |||
border-color: var(--border-color) | border-width: 16px; | ||
margin-left: -16px; | |||
border-color: transparent transparent var(--border-color-tone-2) transparent; | |||
} | } | ||
.tooltiptext hr { | |||
margin: 10px 0 12px; | |||
position: relative; | |||
background: none; | |||
} | } | ||
.tooltiptext hr:after { | |||
content: ""; | content: ""; | ||
display: block; | display: block; | ||
background- | width: 100%; | ||
height: 1px !important; | |||
position: absolute; | |||
left: -14px; | |||
background: var(--border-color-tone-2); | |||
padding: 0 14px; | |||
} | |||
.tooltip:hover > .tooltiptext { | |||
visibility: visible; | |||
} | |||
.tooltiptext { | |||
opacity: 0; | |||
transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease; | |||
transform: translate(-50%, 8px); | |||
} | |||
.tooltip .tooltip .tooltiptext { | |||
transform: translate(-50%, -8px); | |||
} | |||
.tooltip:hover > .tooltiptext { | |||
opacity: 1; | |||
transition-delay: 0s; | |||
transform: translate(-50%, 0); | |||
} | |||
.tooltiptext a { | |||
color: var(--accent-color); | |||
border-bottom: 0; | |||
} | |||
.tooltiptext a:visited { | |||
color: var(--accent-color-tone-3); | |||
} | |||
.tooltiptext a:active { | |||
color: #faa700; | |||
} | |||
.tooltiptext a:hover, | |||
a:focus { | |||
text-decoration: underline; | |||
} | |||
.tooltiptext a.new { | |||
color: #ba0000; | |||
} | |||
.mwe-math-element { | |||
filter: brightness(0%); | |||
} | |||
@media screen and (min-width: 851px) { | |||
#personal { | |||
padding-left: 0; | |||
} | |||
} | |||
.infobox * { | |||
z-index: 2; | |||
} | |||
/* Syntax highlighter - dark mode */ | |||
.dark-mode .mw-highlight .k, | |||
.mw-search-result-data, | |||
.dark-mode .mw-highlight .kr { | |||
color: #76ff76; | |||
} | |||
.dark-mode .mw-highlight .kc { | |||
color: #fff; | |||
font-weight: 400; | |||
} | |||
.dark-mode .mw-highlight .mh { | |||
color: #ffc0c0; | |||
} | |||
.dark-mode .mw-highlight .nf, | |||
.dark-mode .mw-highlight .nc { | |||
color: #44f5ff; | |||
font-weight: 500; | |||
} | } | ||
.dark-mode .mw-highlight .nn { | |||
color: #ffe144; | |||
font-weight: 500; | |||
} | } | ||
.mw- | .dark-mode .mw-highlight .mi, | ||
.dark-mode .mw-highlight .kt { | |||
color: #eee; | |||
font-weight: 500; | |||
} | } | ||
. | .dark-mode .mw-highlight .o, | ||
.dark-mode .mw-highlight .mf { | |||
color: #eee; | |||
} | } | ||
.highlight { | .dark-mode .mw-highlight .nt, | ||
.dark-mode .mw-highlight .nb, | |||
.dark-mode .mw-highlight .kd { | |||
color: #33ffa1; | |||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
# | .dark-mode .mw-highlight .nd, | ||
.dark-mode .mw-highlight .s1 { | |||
color: #e152ff; | |||
} | |||
.dark-mode .mw-highlight .cp { | |||
color: #ff3232; | |||
} | |||
.dark-mode .mw-highlight .s2 { | |||
color: #ffffff; | |||
} | |||
.dark-mode .mw-highlight .c { | |||
color: #63c2c2; | |||
} | |||
.dark-mode .mw-highlight .sx { | |||
color: #56d0ff; | |||
} | |||
.dark-mode .mw-highlight .c1 { | |||
color: #77d235; | |||
} | } | ||
/* Infobox */ | |||
.infobox-wrap { | |||
padding: 0; | |||
float: right; | |||
clear: right; | |||
position: relative; | position: relative; | ||
} | } | ||
#p-personal- | table.infobox div.tabdiv:not(.forceport) > ul { | ||
background-color: #f7f7f7; | |||
padding: 7px 0 7px 0; | |||
border-bottom: 2px solid var(--theme-tone-2); | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.infobox .tabber-new > .tabber-content { | |||
margin-top: 10px; | |||
} | |||
table.infobox div.tabdiv:not(.forceport) > ul ~ div ul { | |||
margin-top: -10px; | |||
margin-left: -10px; | |||
margin-right: -10px; | |||
background: none; | |||
border-bottom: none; | |||
} | |||
table.infobox div.tabdiv:not(.forceport) > ul > li { | |||
padding-top: 0; | |||
} | |||
.infobox div.tabdiv > ul > li:hover, | |||
.infobox div.tabdiv > ul > li.active { | |||
background: none; | |||
color: var(--accent-color); | |||
border-radius: 0; | |||
} | |||
table.infobox div.tabdiv:not(.forceport) > ul > li { | |||
background: none; | |||
} | |||
.infobox div.tabdiv > ul > li { | |||
padding: 5px 10px; | |||
margin-right: 5px !important; | |||
} | |||
.infobox .tabber-content p:first-child { | |||
margin-top: 5px; | |||
} | |||
.infobox div.tabdiv > ul > li.active a, | |||
.infobox div.tabdiv > ul > li:hover a { | |||
color: var(--accent-color) !important; | |||
} | |||
/* Remove .mw-body-content stacking context so the tooltip can | |||
overlap with elements outside content area and be shown properly */ | |||
.mw-body-content { | |||
z-index: auto; | |||
} | |||
/* Template fix */ | |||
dfn { | |||
display: none !important; | |||
} | |||
/* Image margin in headlines */ | |||
.mw-headline .image img { | |||
padding-bottom: 5px; | |||
} | |||
/* Navbar */ | |||
.sidebar-chunk, | |||
#p-logo, | |||
#p-banner, | |||
#personal, | |||
#personal-inner, | |||
#mw-data-after-content img, | |||
#mw-data-after-content a, | |||
::placeholder { | |||
user-select: none; | |||
-moz-user-select: none; | |||
-webkit-user-select: none; | |||
} | |||
::-moz-placeholder { | |||
user-select: none; | |||
-moz-user-select: none; | |||
} | |||
::-webkit-placeholder { | |||
user-select: none; | |||
-webkit-user-select: none; | |||
} | |||
#p-logo { | |||
border: 1px solid var(--border-color); | |||
border-bottom: 0; | |||
} | |||
.mw-wiki-logo { | |||
padding-top: 0.5rem; | |||
margin-top: 0; | |||
} | } | ||
# | #page-tools, #site-tools { | ||
padding: 0 !important; | padding-top: 0!important; | ||
} | } | ||
# | #mw-site-navigation { | ||
margin- | z-index: 3; | ||
padding: 0.85rem; | |||
padding-top: 0; | |||
margin-top: 1rem; | |||
margin-left: 0; | |||
margin-right: 1rem; | |||
padding: 0 !important; | |||
max-width: 200px; | |||
} | } | ||
# | #mw-site-navigation .sidebar-chunk li { | ||
padding: 0; | padding: 0; | ||
} | } | ||
.sidebar-chunk a { | |||
padding: 0.4rem 1rem!important; | |||
padding: 0. | |||
font-size: 1.02em; | font-size: 1.02em; | ||
font-weight: 500; | |||
letter-spacing: 0.03em; | letter-spacing: 0.03em; | ||
transition: background-color 0.3s, color 0.2s; | transition: background-color 0.3s, color 0.2s; | ||
border-radius: 0; | |||
border-bottom: none; | border-bottom: none; | ||
} | |||
.sidebar-chunk li { | |||
font-size: 1.02em; | |||
font-weight: 500; | |||
} | |||
.sidebar-chunk a::before, | |||
.sidebar-chunk a::after { | |||
content: unset !important; | |||
} | |||
.sidebar-chunk ul li > a, | |||
.sidebar-chunk ul li > a:visited, | |||
.sidebar-chunk ul li > a:link, | |||
div.sidebar-chunk a.external.text { | |||
padding: 0.3em; | |||
background-image: none !important; | |||
color: var(--text-color); | |||
} | |||
.sidebar-chunk ul li > a[href="#.21"], | |||
.sidebar-chunk .mw-selflink { | |||
cursor: default; | |||
} | |||
.sidebar-chunk li > ul a { | |||
border-color: var(--theme-tone-6); | |||
} | |||
.sidebar-chunk a, | |||
.sidebar-chunk a:link, | |||
.sidebar-chunk a:visited, | |||
.sidebar-chunk strong.selflink { | |||
text-decoration: none; | text-decoration: none; | ||
color: #000; | |||
} | } | ||
.sidebar-chunk li:hover > a, | |||
.sidebar-chunk li:hover > a:link, | |||
.sidebar-chunk .mw-selflink, | |||
.sidebar-chunk a.mw-has-selflink { | |||
background: var(--theme-tone-4); | |||
} | } | ||
# | #mw-related-navigation .sidebar-chunk li { | ||
padding: 0; | |||
} | |||
#mw-site-navigation .sidebar-chunk { | |||
padding: 1.6em; | |||
border-color: var(--theme-tone-6); | |||
} | |||
.sidebar-chunk li:hover { | |||
transform: none !important; | |||
} | |||
.sidebar-chunk li > ul { | |||
top: 0; | |||
border-radius: 5px; | |||
box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%); | |||
} | |||
.sidebar-chunk li:hover > ul { | |||
pointer-events: all; | |||
transform: translateX(0); | |||
} | } | ||
div.sidebar-chunk li > ul { | |||
visibility: visible !important; | |||
pointer-events: none; | pointer-events: none; | ||
transform: | left: 100%; | ||
transform- | margin-left: 0 !important; | ||
display: block; | |||
transform: translateX(-7px); | |||
transition: 0.3s !important; | |||
border: 1px solid var(--border-color); | |||
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1) !important; | |||
background-color: var(--theme-tone-6); | |||
} | |||
div.sidebar-chunk h3 { | |||
font-size: 1.2em !important; | |||
text-transform: capitalize; | |||
letter-spacing: 0.5px; | |||
margin-left: 0.65em !important; | |||
font-family: "Familjen Grotesk"; | |||
margin: 0.5rem 0 0.5rem 0 !important; | |||
padding: 0.5rem 1rem 0.5rem 1rem !important; | |||
background-color: var(--theme-tone-3); | |||
border: none !important; | |||
} | |||
div.sidebar-chunk .mw-portlet:first-child h3 { | |||
margin-top: 0!important; | |||
} | |||
.sidebar-chunk { | |||
border-radius: 5px; | |||
padding: 0.95rem 0 !important; | |||
border: 1px solid var(--border-color) !important; | |||
padding-bottom: 0.5rem!important; | |||
} | |||
#site-tools .mw-portlet-body { | |||
margin-bottom: 0 !important; | |||
} | |||
#mw-related-navigation .sidebar-chunk #p-normal-catlinks .mw-portlet-body { | |||
margin-bottom: 1.5em; | |||
} | |||
#site-navigation { | |||
border-top-left-radius: 0; | |||
border-top-right-radius: 0; | |||
border-top: 0 !important; | |||
} | |||
/* main container */ | |||
#mw-content-container { | |||
border-bottom: none; | |||
min-height: 200vh; | |||
} | |||
#mw-content { | |||
border-bottom: none; | |||
background-color: var(--theme-tone-6); | |||
margin-top: 1rem; | |||
border-radius: 6px; | |||
border: 1px solid var(--border-color); | |||
} | |||
#mw-related-navigation .sidebar-chunk { | |||
margin-top: 1rem; | |||
} | |||
/* Long table adjustments */ | |||
table[class*="colortable-"]:not(.section) { | |||
overflow: auto; | |||
display: block; | |||
border: 0; | |||
} | } | ||
.overflowed :is(.content-table-left, .content-table-right) { | |||
display: | display: none; | ||
} | |||
.long-table { | |||
overflow-x: auto; | |||
} | |||
.long-table::-webkit-scrollbar-thumb, | |||
.long-table::-webkit-scrollbar-track, | |||
.long-table::-webkit-scrollbar, | |||
.content-table::-webkit-scrollbar-thumb, | |||
.content-table::-webkit-scrollbar-track, | |||
.content-table::-webkit-scrollbar, | |||
table::-webkit-scrollbar-thumb, | |||
table::-webkit-scrollbar-track, | |||
table::-webkit-scrollbar { | |||
border-radius: 0; | |||
} | |||
:is(.long-table, .overflowed) .tooltiptext:not(.tooltip-up .tooltiptext), | |||
.tooltip-down .tooltiptext { | |||
top: calc(20px + 100%); | |||
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15); | |||
bottom: auto; | |||
} | |||
:is(.long-table, .overflowed) .tooltiptext:not(.tooltip-up .tooltiptext):before, | |||
.tooltip-down .tooltiptext:before { | |||
bottom: 100%; | |||
top: unset; | |||
border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent; | |||
} | |||
:is(.long-table, .overflowed) .tooltiptext:not(.tooltip-up .tooltiptext):after, | |||
.tooltip-down .tooltiptext:after { | |||
bottom: 100%; | |||
margin-bottom: -10px; | |||
top: unset; | |||
transform: rotate(225deg); | |||
box-shadow: 1px 1px 0px rgb(165, 165, 165); | |||
} | |||
/* status effect icons */ | |||
.status { | |||
display: inline-flex; | |||
gap: 0.35em; | |||
} | |||
.status .tooltip { | |||
white-space: nowrap; | |||
} | |||
/* combo overlay */ | |||
.combo-overlay a { | |||
display: flex; | |||
} | |||
/* header */ | |||
.mw-body .mw-parser-output h1 { | |||
display: flex; | |||
place-items: center; | |||
border-bottom: 1px solid var(--border-color); | |||
position: relative; | |||
} | |||
.mw-body .mw-parser-output h1::after, | |||
.mw-body .mw-parser-output h2::after { | |||
border-bottom: 1px solid var(--border-color); | |||
overflow: hidden; | |||
width: 100%; | |||
position: absolute; | |||
bottom: 0; | |||
} | |||
.mw-body .mw-parser-output h1 .mw-headline, | |||
.mw-body .mw-parser-output h1 .mw-headline a, | |||
.mw-body .mw-parser-output h1 .mw-headline font, | |||
.mw-body .mw-parser-output h1 .mw-headline .custom-text, | |||
.mw-body .mw-parser-output h2 .mw-headline, | |||
.mw-body .mw-parser-output h2 .mw-headline a, | |||
.mw-body .mw-parser-output h2 .mw-headline font, | |||
.mw-body .mw-parser-output h2 .mw-headline .custom-text, | |||
.mw-body .mw-parser-output h2 .mw-headline .tooltip { | |||
font-size: 0.8em; | |||
display: inline-flex; | |||
place-items: center; | |||
padding-left: 27px; | |||
/*font-family: "Heading";*/ | |||
font-weight: 500; | |||
/*letter-spacing: 0.2px;*/ | |||
letter-spacing: -1px; | |||
gap: 5px; | |||
} | } | ||
. | .mw-body .mw-parser-output h2 .mw-headline .tooltiptext { | ||
font-size: initial; | |||
letter-spacing: initial; | |||
} | } | ||
. | .mw-body .mw-parser-output h1 .mw-headline, | ||
padding: 0 | .mw-body .mw-parser-output h1 .mw-headline a, | ||
.mw-body .mw-parser-output h1 .mw-headline font, | |||
.mw-body .mw-parser-output h1 .mw-headline .custom-text { | |||
padding-left: 0; | |||
gap: 8px; | |||
} | } | ||
. | .mw-body .mw-parser-output h3 .mw-headline, | ||
. | .mw-body .mw-parser-output h3 .mw-headline a, | ||
.mw-body .mw-parser-output h3 .mw-headline font, | |||
.mw-body .mw-parser-output h3 .mw-headline .custom-text { | |||
font-size: 1.1rem; | |||
font-weight: 500; | |||
} | } | ||
.mw-body .mw-parser-output h1 .mw-headline, | |||
.mw-body .mw-parser-output h1 .mw-headline a, | |||
.mw-body .mw-parser-output h1 .mw-headline font, | |||
.mw-body .mw-parser-output h1 .mw-headline .custom-text { | |||
font-size: 0.9em; | |||
} | |||
.mw-body .mw-parser-output h1 .mw-headline a, | |||
.mw-body .mw-parser-output h1 .mw-headline font, | |||
.mw-body .mw-parser-output h1 .mw-headline .custom-text, | |||
.mw-body .mw-parser-output h2 .mw-headline a, | |||
.mw-body .mw-parser-output h2 .mw-headline font, | |||
.mw-body .mw-parser-output h2 .mw-headline .custom-text, | |||
.mw-body .mw-parser-output h2 .mw-headline .tooltip { | |||
padding-left: 0; | padding-left: 0; | ||
font-size: inherit; | |||
} | |||
.mw-body .mw-parser-output h4 .mw-headline, | |||
.mw-body .mw-parser-output h4 .mw-headline a, | |||
.mw-body .mw-parser-output h4 .mw-headline font, | |||
.mw-body .mw-parser-output h4 .mw-headline .custom-text { | |||
font-size: 1rem; | |||
font-weight: 600; | |||
} | |||
.mw-body .mw-parser-output h1 .mw-headline a:hover, | |||
.mw-body .mw-parser-output h2 .mw-headline a:hover { | |||
text-decoration: underline; | |||
} | |||
.mw-body .mw-parser-output h2:not(.toctitle h2) { | |||
background-image: url(https://elwiki.net/wiki/images/0/0a/Asset_-_Header.png); | |||
background-repeat: no-repeat; | |||
background-position: left; | |||
min-height: 38px; | |||
background-size: contain; | |||
display: flex; | |||
position: relative; | |||
} | |||
.mw-body .mw-parser-output h3 { | |||
margin-top: 1rem; | |||
} | |||
.mw-editsection { | |||
background-position: left center; | |||
} | } | ||
.mw-editsection a:first-of-type { | |||
height: 100%; | |||
display: inline-flex; | |||
place-content: center; | |||
place-items: center; | |||
padding: 0 0 0 1.45rem; | |||
} | } | ||
.has-arrow { | |||
position: relative; | |||
} | } | ||
.class-tree > .has-arrow:after { | |||
content: ""; | |||
display: block; | |||
position: absolute; | |||
z-index: 2; | |||
top: 13px; | |||
right: -18px; | |||
width: 15px; | |||
background-repeat: no-repeat; | |||
height: 15px; | |||
background-image: url(https://elwiki.net/wiki/images/0/0b/Arrowright.png); | |||
background-size: contain; | |||
background-position: center; | |||
} | } | ||
# | /* Echo */ | ||
#personal-extra ul { | |||
margin-top: 0.4rem; | |||
margin-left: 0.5rem; | |||
display: flex; | |||
gap: 0.3rem; | |||
} | } | ||
# | #user-tools { | ||
display: flex; | display: flex; | ||
place-content: center; | place-content: center; | ||
border- | min-width: 0; | ||
padding: 0 1.5rem; | |||
} | |||
#personal-extra { | |||
padding: 0.05rem 0 00; | |||
} | |||
.mw-echo-alert { | |||
margin: 0; | |||
} | |||
.mw-echo-ui-notificationItemWidget-icon img { | |||
filter: brightness(1.8) saturate(1.3); | |||
} | |||
.mw-echo-ui-toggleReadCircleButtonWidget-circle, | |||
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after, | |||
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications:after { | |||
background: var(--accent-color) !important; | |||
} | |||
.mw-echo-ui-notificationItemWidget-content-actions | |||
> .mw-echo-ui-notificationItemWidget-content-actions-buttons.oo-ui-buttonSelectWidget { | |||
display: flex; | |||
} | |||
/* Anchor tabs */ | |||
.anchor-tabs a { | |||
background-color: var(--theme-tone-7); | |||
} | |||
.anchor-tabs a.mw-selflink { | |||
background: var(--accent-color); | |||
} | |||
/* Instance page */ | |||
.instance-page .wikitable tr > th { | |||
background-color: var(--theme-tone-5); | |||
} | |||
.instance-page .segment-contents { | |||
border-color: var(--border-color) !important; | |||
} | |||
/* Old tabs hacks */ | |||
.tabdiv table.wikitable:first-of-type { | |||
margin-top: 0; | margin-top: 0; | ||
} | |||
.infobox-new .tabdiv:not(.tabber-new) { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.infobox-new .tabdiv ul:not(.tabber-new ul) { | |||
display: flex; | |||
place-content: center; | |||
} | } | ||
.mw- | /* Metadata */ | ||
margin: | .mw-metadata-show-hide-extended a[role="button"] { | ||
border-right: | font-size: 0.9rem; | ||
font-weight: 500; | |||
color: var(--text-color); | |||
padding: 5px; | |||
display: block; | |||
cursor: pointer; | |||
transition: background-color 0.3s; | |||
background-color: var(--theme-tone-3); | |||
text-decoration: none; | |||
margin: -5px; | |||
} | |||
.mw-metadata-show-hide-extended a[role="button"]:hover { | |||
background-color: var(--theme-tone-7); | |||
} | |||
.mw_metadata { | |||
border-bottom-width: 1px !important; | |||
} | |||
.mw_metadata > * > tr > th { | |||
background-color: var(--theme-tone-4) !important; | |||
font-weight: bold; | |||
text-align: right; | |||
color: var(--text-color); | |||
border-color: var(--border-color); | |||
} | |||
.content-table .mw_metadata > * > tr > td { | |||
border-color: var(--border-color); | |||
padding: 5px; | |||
text-align: center; | text-align: center; | ||
} | } | ||
@media screen and (min-width: 1100px) and (max-width: 1340px) { | |||
#mw-content { | |||
margin-left: 0; | |||
margin-right: 0; | |||
width: 70vw !important; | |||
} | |||
#content-bottom-stuff { | |||
padding: 1em 2em 3em; | |||
width: 70vw; | |||
background: var(--theme-tone-6); | |||
border-radius: 0 0 5px 5px; | |||
display: block; | |||
} | |||
#mw-data-after-content { | |||
background: transparent; | |||
} | |||
} | } | ||
#mw- | @media screen and (min-width: 1100px) { | ||
padding: 0. | #mw-content-wrapper { | ||
margin: 0; | |||
color: var(-- | width: 100% !important; | ||
} | |||
#mw-content-wrapper { | |||
margin-left: 14em; | |||
margin-right: 16em; | |||
width: 65vw !important; | |||
min-width: 50%; | |||
} | |||
#mw-related-navigation { | |||
position: absolute; | |||
right: 1em; | |||
} | |||
#mw-site-navigation { | |||
position: absolute; | |||
left: 1em; | |||
} | |||
#mw-content-block { | |||
position: relative; | |||
display: flex !important; | |||
} | |||
#mw-header-container { | |||
padding: 0.65em 0 0; | |||
} | |||
} | |||
@media screen and (max-width: 1099px) { | |||
div#mw-site-navigation { | |||
z-index: 99; | |||
} | |||
} | |||
@media screen and (max-width: 850px) { | |||
#mw-content-block { | |||
background: var(--theme-tone-7); | |||
} | |||
} | |||
/* 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 { | |||
padding: 1em; | |||
} | |||
.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, | |||
#mw-related-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; | |||
} | |||
} | |||
@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) { | |||
.sidebar-inner, | |||
.dropdown { | |||
background: #f8f9fa; | |||
} | |||
.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; | |||
} | |||
} | } | ||
.mw- | @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; | |||
} | |||
} | } |