ElEditors, Interface administrators, Administrators
70,975
edits
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* Color scheme */ | /* Color scheme */ | ||
:root { | :root { | ||
--accent-color: #00adda; | --accent-color: #00adda; | ||
Line 71: | Line 70: | ||
#mw-wrapper, | #mw-wrapper, | ||
#wikieditor-toolbar-replace-message div, | #wikieditor-toolbar-replace-message div, | ||
.mw-notification-content | .mw-notification-content { | ||
color: var(--text-color); | color: var(--text-color); | ||
} | } | ||
Line 147: | Line 145: | ||
a:visited, | a:visited, | ||
a:visited:hover:not(.mw-selflink, .selflink, .textfloat a) | a:visited:hover:not(.mw-selflink, .selflink, .textfloat a) { | ||
color: var(--accent-color-tone-3); | color: var(--accent-color-tone-3); | ||
} | } | ||
Line 334: | Line 330: | ||
border-color: var(--border-color-tone-2); | border-color: var(--border-color-tone-2); | ||
color: var(--text-color); | color: var(--text-color); | ||
} | } | ||
Line 414: | Line 406: | ||
.mw-content-ltr.content .mw-highlight-lines pre { | .mw-content-ltr.content .mw-highlight-lines pre { | ||
box-shadow: inset 2.75em 0 0 var(--theme-tone-2); | box-shadow: inset 2.75em 0 0 var(--theme-tone-2); | ||
} | } | ||
Line 1,144: | Line 1,132: | ||
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover { | .wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover { | ||
background-color: var(--theme-tone-7) !important; | background-color: var(--theme-tone-7)!important; | ||
} | } | ||
Line 1,678: | Line 1,666: | ||
} | } | ||
.ve-ui-mwSaveDialog | .ve-ui-mwSaveDialog .oo-ui-widget.oo-ui-widget-enabled.oo-ui-indicatorElement.oo-ui-labelElement.oo-ui-dropdownWidget:nth-of-type(3) { | ||
margin: 0.5rem 0; | margin: 0.5rem 0; | ||
} | } | ||
.oo-ui-processDialog .oo-ui-actionWidget.oo-ui-labelElement > .oo-ui-buttonElement-button { | .oo-ui-processDialog .oo-ui-actionWidget.oo-ui-labelElement > .oo-ui-buttonElement-button { | ||
transition: | transition: .3s; | ||
} | } | ||
.oo-ui-widget-disabled { | .oo-ui-widget-disabled { | ||
opacity: | opacity: .6; | ||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
span.oo-ui-labelElement-label.mw-widget-mediaResultWidget-nameLabel:not(.dark-mode span) { | span.oo-ui-labelElement-label.mw-widget-mediaResultWidget-nameLabel:not(.dark-mode span) { | ||
color: var(--text-color-invert); | color: var(--text-color-invert); | ||
} | } | ||
Line 1,916: | Line 1,903: | ||
} | } | ||
.accent-textcolor, | .accent-textcolor, .accent-textcolor a { | ||
.accent-textcolor a { | |||
color: var(--accent-color) !important; | color: var(--accent-color) !important; | ||
} | } | ||
Line 1,929: | Line 1,915: | ||
} | } | ||
/* | /* header */ | ||
. | div.color-left, | ||
div.color-middle, | |||
div.color-right { | |||
background-color: white; | |||
} | } | ||
#p-logo { | |||
background-color: var(--theme-tone-6); | |||
border-radius: 5px 5px 0 0; | |||
} | } | ||
.mw-wiki-logo.fallback { | |||
height: 8em; | |||
background-position: bottom center; | |||
} | } | ||
. | #mw-site-navigation .sidebar-chunk { | ||
margin-top: 0; | |||
border- | border-top: 0; | ||
background-color: var(--theme-tone-6); | |||
} | } | ||
. | /* border */ | ||
div.mw-body h1.firstHeading, | |||
div#mw-page-header-links li.selected { | |||
border-color: var(--border-color); | |||
} | } | ||
. | div.mw-body h1.firstHeading { | ||
border-width: 1px; | |||
padding-bottom: 5px; | |||
} | } | ||
/* Topbar */ | |||
#personal span { | |||
font-weight: 500; | |||
} | } | ||
#mw-header-hack { | |||
bottom: - | border-bottom: 1px solid var(--border-color); | ||
} | } | ||
#personal-inner { | |||
border-radius: 5px; | |||
border-color: var(--border-color); | |||
} | } | ||
#personal h2 { | |||
color: var(--text-color); | |||
} | } | ||
#searchButton { | |||
background-position: top right; | |||
box-shadow: none; | |||
background-image: url("https://elwiki.net/wiki/images/e/e4/UI_-_Search.png"); | |||
background-size: 34px; | |||
right: 0; | |||
margin-top: -1px; | |||
} | } | ||
#searchButton:hover { | |||
filter: brightness(1.1); | |||
} | } | ||
#mw-searchButton { | |||
display: none; | |||
} | } | ||
. | #searchInput { | ||
padding: 1em; | |||
transition: box-shadow 0.3s; | |||
border-color: var(--border-color); | |||
letter-spacing: 0.7px; | |||
} | } | ||
#searchInput:focus { | |||
outline: none; | |||
box-shadow: 2px 2px 5px rgb(0 0 0 / 20%); | |||
} | } | ||
#simpleSearch { | |||
border-radius: 5px; | |||
box-shadow: none; | |||
border-color: var(--border-color) !important; | |||
} | } | ||
#p-logo-text a { | |||
letter-spacing: 1.5px; | |||
font-weight: 500; | |||
color: rgb(60, 60, 60); | |||
display: flex; | |||
place-items: center; | |||
place-content: center; | |||
text-decoration: none !important; | |||
margin-top: -5px; | |||
gap: 2px; | |||
padding: 0; | |||
} | } | ||
#p- | a#p-banner::before { | ||
background- | content: ""; | ||
height: 37px; | |||
width: 37px; | |||
display: block; | |||
background-image: url(https://elwiki.net/wiki/images/thumb/e/ee/UI_-_Hedgehog_Event.png/37px-UI_-_Hedgehog_Event.png); | |||
background-repeat: no-repeat; | |||
background-color: transparent; | |||
position: relative; | |||
margin-top: 4px; | |||
} | } | ||
. | .suggestions-result-current { | ||
background: var(--accent-color) !important; | |||
} | } | ||
.highlight { | |||
font-weight: 500; | |||
} | } | ||
#personal h2 { | |||
background-image: none; | |||
padding-top: 3px; | |||
padding-left: 5px; | |||
letter-spacing: 0.75px; | |||
} | } | ||
#personal h2::after { | |||
border-width: | width: 0; | ||
height: 0 !important; | |||
border: 0 solid transparent; | |||
border-left-width: 6px; | |||
border-right-width: 6px; | |||
border-top: 6px solid var(--border-color-tone-2); | |||
background-image: none; | |||
position: relative; | |||
top: -7px; | |||
margin-left: 10px; | |||
} | } | ||
#p-personal-label { | |||
#personal | display: none; | ||
} | } | ||
#personal-inner { | #personal-inner { | ||
padding: 0 !important; | |||
} | } | ||
#personal | #personal .dropdown .mw-portlet-body { | ||
margin-bottom: 0; | |||
} | } | ||
# | #personal .dropdown li { | ||
padding: 0; | |||
} | } | ||
# | #personal .dropdown li a { | ||
border: 0.25em solid var(--theme-tone-6); | |||
display: block; | |||
padding: 0.4em; | |||
color: var(--text-color); | |||
border-radius: 6px; | |||
font-size: 1.02em; | |||
letter-spacing: 0.03em; | |||
transition: background-color 0.3s, color 0.2s; | |||
border-bottom: none; | |||
text-decoration: none; | |||
} | } | ||
# | #personal .dropdown li:last-child a { | ||
border-bottom: 0.25em solid var(--theme-tone-6); | |||
} | } | ||
# | #personal .dropdown li:hover a { | ||
background-color: var(--accent-color); | |||
color: white; | |||
} | } | ||
# | #mw-wrapper #mw-header .dropdown { | ||
display: block !important; | |||
opacity: 0; | |||
pointer-events: none; | |||
transform: scale(0); | |||
transform-origin: top right; | |||
transition: 0.15s; | |||
} | } | ||
# | #mw-wrapper #mw-header .dropdown-active .dropdown { | ||
display: block !important; | |||
transform: scale(1); | |||
opacity: 1; | |||
pointer-events: all; | |||
} | } | ||
.suggestions .suggestions-result { | |||
padding: 0.5em 1em; | |||
padding: 0; | |||
} | } | ||
.suggestions .suggestions-special { | |||
padding: 0.5em 1em; | |||
} | } | ||
.suggestions .suggestions-result-current, | |||
.suggestions-result-current .special-query { | |||
color: white !important; | |||
} | } | ||
/* Footer */ | |||
#mw-footer { | |||
width: 65vw; | |||
padding-left: 0; | |||
padding-right: 0; | |||
} | } | ||
#mw-footer-container { | |||
margin: auto; | |||
border: none; | |||
box-shadow: none; | |||
color: var(--text-color); | |||
} | } | ||
. | #mw-footer-container a, | ||
#mw-footer-container a:hover { | |||
color: var(--accent-color) !important; | |||
transition: 0.3s; | |||
font-weight: 500; | font-weight: 500; | ||
transition: opacity 0.3s; | |||
} | } | ||
# | #mw-footer-container a:hover { | ||
opacity: 0.65; | |||
} | } | ||
# | /* main container */ | ||
#mw-content-container { | |||
border-bottom: none; | |||
min-height: 200vh; | |||
border- | |||
} | } | ||
# | #mw-content { | ||
border-bottom: none; | |||
background-color: var(--theme-tone-6); | |||
} | } | ||
# | @media screen and (min-width: 1100px) and (max-width: 1340px) { | ||
#mw-related-navigation { | |||
} | display: none !important; | ||
} | |||
# | #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; | |||
} | |||
} | } | ||
@media screen and (min-width: 1100px) { | |||
#mw-content-wrapper { | |||
} | margin: 0; | ||
width: 100% !important; | |||
} | |||
# | #mw-content-wrapper { | ||
margin-left: 14em; | |||
margin-right: 16em; | |||
} | width: 65vw !important; | ||
min-width: 50%; | |||
} | |||
#mw- | #mw-related-navigation { | ||
position: absolute; | |||
right: 1em; | |||
} | |||
} | |||
#mw- | #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); | |||
} | |||
} | |||
#mw- | /* after content section */ | ||
#mw-data-after-content > div { | |||
padding | display: flex; | ||
flex-direction: column; | |||
padding: 10px; | |||
gap: 15px; | |||
place-items: center; | |||
} | } | ||
# | #mw-data-after-content br { | ||
display: none; | |||
} | } | ||
#mw- | #mw-data-after-content { | ||
background: var(--theme-tone-6); | |||
border | border-radius: 0 0 5px 5px; | ||
} | } | ||
#mw- | #mw-data-after-content a.nn-cmp-show { | ||
margin-top: 0.8em; | |||
color: var(-- | display: inline-block; | ||
padding: 5px 10px; | |||
background-color: var(--theme-tone-3); | |||
width: fit-content; | |||
border-radius: 4px; | |||
font-weight: 500; | font-weight: 500; | ||
transition: | color: black; | ||
transition: background-color 0.3s, color 0.2s; | |||
text-decoration: none; | |||
color: var(--text-color); | |||
} | } | ||
#mw- | #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; | |||
} | |||
} | } | ||
/****************************** Checkbox, Radio & Button Styles ******************************/ | |||
input, | |||
button { | |||
position: relative; | |||
} | } | ||
. | /****************************** Namebox Styles ******************************/ | ||
border | 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 { | |||
color: | background-color: #f7fdff; | ||
} | } | ||
. | table.nmbox > tbody > tr > th { | ||
background-color: #ebf4f7; | |||
} | } | ||
#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; | |||
} | } | ||
/* section */ | |||
div.section-wrapper { | |||
padding: 0.5em; | |||
border-radius: 5px; | |||
border-width: 2px; | |||
border-style: solid; | |||
clear: both; | |||
} | |||
table.top-nav { | |||
border-spacing: 0; | |||
width: auto; | |||
margin: 1em; | |||
text-align: center; | |||
vertical-align: middle; | |||
} | } | ||
table.section, | |||
table.section-side-column { | |||
position: relative; | |||
width: 100%; | |||
} | margin: 0; | ||
border-width: 1px; | |||
border-style: solid; | |||
border-spacing: 0; | |||
} | |||
table.section > tbody > tr:first-child { | |||
text-align: center; | |||
background-color: var(--theme-tone-7); | |||
} | |||
table.section > tbody > tr:first-child > th { | |||
line-height: 1em; | |||
padding: 0.5em 0; | |||
} | text-align: center; | ||
vertical-align: middle; | |||
border-width: 1px; | |||
border-style: solid; | |||
border-top: none !important; | |||
} | |||
table.section > tbody > tr:last-child > td { | |||
vertical-align: top; | |||
padding: 0.5em; | |||
border: none; | |||
border-bottom: none !important; | |||
} | } | ||
table.section > tbody > tr:first-child > th:first-child, | |||
table.section > tbody > tr:last-child > td:first-child { | |||
border-left: none !important; | |||
} | |||
table.section > tbody > tr:first-child > th:last-child, | |||
table.section > tbody > tr:last-child > td:last-child { | |||
border-right: none !important; | |||
} | |||
table.section > tbody > tr:first-child > th ~ th, | |||
table.section > tbody > tr:last-child > td ~ td { | |||
border-left: none !important; | |||
} | } | ||
table.section-side-column { | |||
text-align: center; | |||
} | } | ||
table.section-side-column > tbody > tr > td:first-child { | |||
width: 50%; | |||
height: 400px; | |||
padding: 10px; | padding: 10px; | ||
} | } | ||
table.section-side-column > tbody > tr > td:last-child { | |||
border-left: 1px solid #000; | |||
height: 420px; | |||
padding: 0; | |||
} | } | ||
table.section-side-column > tbody > tr > td:last-child > table.section > tbody > tr:last-child > td { | |||
vertical-align: middle; | |||
} | } | ||
table.section-side-column > tbody > tr > td:last-child > table.section { | |||
text-align: center; | |||
border: none; | |||
border | |||
} | } | ||
table.section-side-column > tbody > tr > td:last-child > table.section + table.section { | |||
border-top-width: 1px; | |||
border-top-style: solid; | |||
} | } | ||
table.section-border, | |||
table.section-border.section > tbody > tr > th, | |||
table.section-border.section > tbody > tr > td, | |||
.section-border.tabdiv > ul, | |||
.section-border:not(table) { | |||
border-color: var(--border-color); | |||
border-width: 1px !important; | |||
} | } | ||
.section-border-top-radius { | |||
-webkit-border-top-left-radius: 5px; | |||
border-top-left-radius: 5px; | |||
-moz-border-radius-topleft: 5px; | |||
-webkit-border-top-right-radius: 5px; | |||
border-top-right-radius: 5px; | |||
-moz-border-radius-topright: 5px; | |||
} | } | ||
.section-border-bottom-radius { | |||
-webkit-border-bottom-left-radius: 5px; | |||
border- | border-bottom-left-radius: 5px; | ||
-moz-border-radius-bottomleft: 5px; | |||
-webkit-border-bottom-right-radius: 5px; | |||
border-bottom-right-radius: 5px; | |||
border: | -moz-border-radius-bottomright: 5px; | ||
} | } | ||
. | table.section-border.section > tbody > tr > th { | ||
background-color: var(--theme-tone-7); | |||
} | } | ||
.section-border .wikitable > * > tr > th { | |||
border-color: var(--border-color); | |||
background-color: var(--theme-tone-5); | |||
} | } | ||
.section-border .wikitable > * > tr > td { | |||
border-color: var(--border-color); | |||
} | } | ||
.wikitable > * > tr > td { | |||
background-color: | background-color: var(--theme-tone-6); | ||
color: var(--text-color); | |||
} | } | ||
.wikitable > * > tr > th { | |||
background-color: var(--theme-tone-5); | |||
text- | border-bottom-width: 1px; | ||
color: var(--text-color) !important; | |||
} | } | ||
table td { | |||
color: var(--text-color); | |||
} | } | ||
.tabber-new .wikitable tr th, | |||
.mw-datatable tr:hover td { | |||
background-color: var(--theme-tone-5); | |||
} | |||
table.section-border { | |||
margin: 10px 0; | |||
border-radius: | border-radius: 4px; | ||
} | } | ||
.section-border-right td:first-of-type { | |||
border- | border-right: 1px solid var(--border-color) !important; | ||
} | } | ||
.section-tabber .section-border { | |||
margin-top: 5px; | |||
margin | |||
} | } | ||
.section-tabber .tabber-ul { | |||
margin-top: 5px; | |||
} | } | ||
/* section - character */ | |||
.section-characters .textfloat a + a { | |||
font-size: 1.3em; | |||
margin-left: 7px; | |||
} | } | ||
.mw-content-ltr .section-characters .segment > .mw-collapsible-toggle::after { | |||
background-image: url("/svg/arrow.svg"); | |||
filter: invert(1); | |||
} | } | ||
.skill-nav [class^="mw-customtoggle-"] { | |||
background-image: url("/svg/arrow.svg"); | |||
filter: invert(1) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); | |||
} | } | ||
.mw-content-ltr .section-characters .mw-collapsible-toggle { | |||
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); | |||
} | } | ||
.section-characters th { | |||
padding: 10px !important; | |||
border- | border-radius: 3px; | ||
} | } | ||
.section-characters table table td { | |||
font-size: 1.085em; | |||
font-weight: 500; | |||
} | } | ||
.section-characters table .textfloat th { | |||
color: white !important; | |||
} | } | ||
/* tabber section design */ | |||
.section-tabber .tabber-new ul:not(.tabber-ul) li { | |||
display: block; | |||
} | } | ||
.section-tabber .tabber-new ul:not(.tabber-ul) li a { | |||
text- | color: var(--text-color) !important; | ||
border: | padding: 4px; | ||
background: var(--theme-tone-6); | |||
margin: 5px 0; | |||
display: block; | |||
font-weight: 500; | |||
transition: background-color 0.3s, color 0.2s; | |||
border: 1px solid var(--border-color); | |||
border-radius: 2px; | |||
} | } | ||
.section-tabber .tabber-new ul:not(.tabber-ul) li a:hover, | |||
.section-tabber .tabber-new ul:not(.tabber-ul) li a.mw-selflink { | |||
background: var(--accent-color); | |||
color: white !important; | |||
} | } | ||
.section-tabber .tabber-new ul:not(.tabber-ul) li a { | |||
text-decoration: none !important; | |||
. | |||
} | } | ||
.section- | .section-tabber .tabber-new ul:not(.tabber-ul) { | ||
margin-left: 2px; | |||
margin-right: 2px; | |||
} | } | ||
.section- | .section-tabber .tabber-content { | ||
padding: 0 5px 5px 5px !important; | |||
} | } | ||
.section-fields > tbody > tr > th { | |||
color: black !important; | |||
text-shadow: none !important; | |||
} | } | ||
. | /* floating text */ | ||
.textfloat { | |||
color: #fff; | |||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
.section-border . | table.section-border .textfloat:not(.section-characters table .textfloat) { | ||
text-shadow: none; | |||
color: black; | |||
font-weight: 500; | |||
} | } | ||
. | table.section-border .textfloat th { | ||
font-weight: 500; | |||
} | } | ||
. | .section-tabber table tr.textfloat th { | ||
color: white; | |||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
table | .section-tabber table tr.textfloat th a { | ||
vertical-align: middle; | |||
font-size: 1.15em; | |||
} | } | ||
. | .textfloat a, | ||
. | .textfloat a:link, | ||
.textfloat a:visited, | |||
.textfloat a:hover, | |||
.textfloat a:active { | |||
color: inherit; | |||
} | } | ||
th { | |||
background-color: inherit; | |||
} | } | ||
. | /** | ||
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 { | ||
margin-top: | 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 { | |||
display: inline-block; | |||
font-weight: bold; | |||
color: # | 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( | |||
color: | 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 { | ||
color: | background-color: orange; | ||
} | } | ||
* { | |||
text-rendering: optimizeSpeed; | |||
} | } | ||
. | .mw-body .external { | ||
. | padding-right: 0; | ||
background-image: none; | |||
} | } | ||
.shady, | |||
background-color: | .shady a { | ||
background-color: black !important; | |||
color: transparent !important; | |||
} | } | ||
.shady:hover, | |||
.shady:hover a, | |||
.shady a:hover { | |||
. | background-color: black !important; | ||
background- | color: white !important; | ||
} | } | ||
/* Hoverimage */ | |||
.hoverimage img { | |||
. | |||
opacity: 0; | opacity: 0; | ||
filter: alpha(opacity=0); | |||
} | } | ||
. | .hoverimage img:hover { | ||
opacity: 1; | 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 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 */ | |||
} | } | ||
/* Tooltip */ | |||
. | .tooltip { | ||
position: relative; | |||
display: inline-block; | |||
border-bottom: 1px dotted var(--text-color); | |||
- | |||
} | } | ||
. | tr[style] .tooltip, | ||
. | table[class*="colortable-"] tr .tooltip { | ||
border-bottom-color: #000; | |||
} | } | ||
. | .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); | |||
} | } | ||
. | .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; | |||
border- | height: 0; | ||
box-shadow: none; | |||
background: none; | |||
transform: none; | |||
} | |||
.tooltip .tooltip .tooltiptext:before { | |||
top: auto; | |||
bottom: 100%; | |||
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: ""; | |||
display: block; | |||
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%); | |||
filter: | |||
} | } | ||
@media screen and (min-width: 851px) { | |||
#personal { | |||
padding-left: 0; | |||
} | |||
} | } | ||
.infobox * { | |||
z-index: 2; | |||
z-index: | |||
} | } | ||
. | /* 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; | |||
} | } | ||
.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; | |||
} | } | ||
. | .dark-mode .mw-highlight .nt, | ||
.dark-mode .mw-highlight .nb, | |||
.dark-mode .mw-highlight .kd { | |||
color: #33ffa1; | |||
font-weight: 500; | |||
font-weight: | |||
} | } | ||
. | .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; | |||
} | } | ||
/* Tabs styling (new) */ | |||
. | div.tabdiv > ul > li:hover, | ||
div.tabdiv > ul > li.active { | |||
background: var(--accent-color); | |||
border-bottom-color: var(--accent-color); | |||
color: white; | |||
} | } | ||
. | div.tabdiv > ul > li.active { | ||
cursor: initial; | |||
} | } | ||
. | div.tabdiv > ul > li { | ||
border: 1px solid var(--border-color); | |||
transition: | transition: border-color 0.3s, background-color 0.3s, color 0.2s; | ||
cursor: pointer; | |||
padding: 5px 15px; | |||
height: auto; | |||
line-height: normal; | |||
margin-right: 3px !important; | |||
margin-bottom: 0; | |||
color: var(--text-color); | |||
user-select: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
background-color: var(--theme-tone-2); | |||
border-radius: 4px 4px 0 0; | |||
font-weight: 500; | |||
} | } | ||
. | div.tabdiv > ul > li a { | ||
transition: color 0.3s; | |||
color: var(--inactive-color) !important; | |||
user-select: none; | |||
-moz-user-select: none; | |||
-webkit-user-select: none; | |||
} | } | ||
. | div.tabdiv > ul > li.active a:not(.infobox a), | ||
div.tabdiv > ul > li:hover a:not(.infobox a) { | |||
color: white !important; | |||
} | } | ||
. | div.tabdiv div.tabdiv:not(.forceport) > ul, | ||
table.infobox div.tabdiv:not(.forceport) > ul, | |||
border | div.tabdiv, | ||
div.tabdiv > ul, | |||
div.tabdiv.forceland > ul { | |||
border: none; | |||
} | } | ||
. | .image > div.tabdiv > ul { | ||
padding-top: 7px; | |||
padding-bottom: 5px; | |||
} | } | ||
. | div.tabber-new { | ||
display: flex; | |||
flex-direction: column; | |||
} | } | ||
. | div.tabber-new > ul { | ||
display: flex; | |||
flex-wrap: wrap; | |||
} | } | ||
. | .tabber-new .tabber-tab { | ||
color: | color: var(--inactive-color); | ||
user-select: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
background-color: var(--theme-tone-2); | |||
border-radius: 4px 4px 0 0; | |||
} | } | ||
. | div.tabdiv.tabber-new > div { | ||
padding: 0; | |||
} | } | ||
.tabber-center .tabber-ul { | |||
justify-content: center; | |||
} | } | ||
. | div.tabber-vertical { | ||
display: flex !important; | |||
flex-direction: row; | |||
} | } | ||
.tabber-vertical > .tabber-ul .tabber-tab:first-child { | |||
. | margin-top: 0; | ||
. | |||
} | } | ||
. | .tabber-vertical > .tabber-ul { | ||
flex-direction: column; | |||
margin-right: 25px; | |||
} | } | ||
. | div.tabber-border div.tabber-content { | ||
color: | border: 1px solid var(--border-color); | ||
padding: 15px; | |||
border-radius: 0 5px 5px 5px; | |||
} | } | ||
. | div.tabber-border.tabber-padding > div.tabber-content { | ||
padding: 10px 20px; | |||
} | } | ||
. | .tabber-content > table:first-child { | ||
margin-top: 0; | |||
} | } | ||
. | .tabber-content > h2 { | ||
margin-top: 0.5em; | |||
} | } | ||
. | .tabber-content p:not(.fadeout-container):first-child { | ||
margin-top: 0; | |||
} | } | ||
. | .tabber-content p:not(.fadeout-container):last-child { | ||
margin-bottom: 0; | |||
} | } | ||
. | .tabber-new.fancy > ul { | ||
gap: 0 6px; | |||
} | } | ||
. | .tabber-new.fancy > .tabber-ul .tabber-tab, | ||
color: | .tabber-new.fancy > .tabber-ul .tabber-tab.active { | ||
background-color: transparent; | |||
transform: skew(-10deg); | |||
border-radius: 0; | |||
color: # | text-align: center; | ||
/*color: #5f5f5f;*/ | |||
border: none; | |||
transition: none; | |||
font-weight: 500; | |||
z-index: 2; | |||
} | } | ||
. | .tabber-new.fancy > .tabber-ul .tabber-tab:hover, | ||
color: | .tabber-new.fancy > .tabber-ul .tabber-tab.active { | ||
background-image: linear-gradient(to left bottom, #00a5ea 0, transparent 70%), | |||
linear-gradient(to left top, #20b7e5 49px, #00f6ff 50px); | |||
color: white; | |||
} | } | ||
. | .tabber-new.fancy > .tabber-ul .tabber-tab::after { | ||
content: ""; | |||
display: block; | |||
opacity: 0; | |||
pointer-events: none; | |||
position: absolute; | |||
width: 18px; | |||
right: -11px; | |||
bottom: -8px; | |||
height: 18px; | |||
background-repeat: no-repeat; | |||
background-image: url("https://elwiki.net/wiki/images/6/64/Tabber_-_Arrow.png"); | |||
} | } | ||
. | .tabber-new.fancy > .tabber-ul .tabber-tab.active::after { | ||
opacity: 1; | |||
} | } | ||
.tabber-new.fancy > .tabber-content table { | |||
border-color: #bdbdbd; | |||
border- | |||
} | } | ||
.tabber-new.fancy > .tabber-ul .tabber-tab-content { | |||
transform: skew(10deg); | |||
display: block; | |||
} | } | ||
.infobox-new .tabber-infobox-full-size > .tabber-ul { | |||
place-content: unset; | |||
place-items: unset; | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
grid-gap: 1px; | |||
} | } | ||
.infobox-new .tabber-infobox-full-size > .tabber-ul > .tabber-tab { | |||
border: 0; | |||
outline: 1px solid var(--border-color); | |||
display: inline-flex; | |||
- | place-content: center; | ||
- | place-items: center; | ||
} | } | ||
/* Tabs styling (new) end */ | |||
/* Infobox */ | |||
.infobox-wrap { | |||
padding: 0; | |||
float: right; | |||
clear: right; | |||
position: relative; | |||
} | } | ||
. | table.infobox div.tabdiv:not(.forceport) > ul { | ||
padding | 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; | |||
} | } | ||
div. | 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; | |||
} | } | ||
div.tabdiv. | .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; | |||
} | } | ||
div. | .infobox div.tabdiv > ul > li { | ||
padding: 5px 10px; | |||
margin-right: 5px !important; | |||
} | } | ||
. | .infobox .tabber-content p:first-child { | ||
margin-top: | 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; | |||
} | |||
#mw-site-navigation { | |||
z-index: 3; | |||
} | } | ||
. | #mw-site-navigation .sidebar-chunk li { | ||
padding: 0; | |||
} | } | ||
. | .sidebar-chunk a { | ||
padding: 0.4em 0 0.4em 0.4em; | |||
font-size: 1.02em; | |||
font-weight: 500; | font-weight: 500; | ||
letter-spacing: 0.03em; | |||
transition: background-color 0.3s, color 0.2s; | |||
border-radius: 6px; | |||
border: 0.25em solid var(--theme-tone-6); | |||
border-bottom: none; | |||
} | |||
.sidebar-chunk ul > li:last-child > a { | |||
border-bottom: 0.25em solid var(--theme-tone-6); | |||
} | } | ||
. | .sidebar-chunk li { | ||
font-size: 1.02em; | |||
font-weight: 500; | |||
} | } | ||
. | .sidebar-chunk a::before, | ||
content: | .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; | |||
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(--accent-color); | |||
color: white !important; | |||
} | } | ||
#mw-related-navigation .sidebar-chunk li { | |||
. | |||
padding: 0; | padding: 0; | ||
} | } | ||
#mw-site-navigation .sidebar-chunk { | |||
padding: 1.6em; | |||
padding: | border-color: var(--theme-tone-6); | ||
border- | |||
} | } | ||
. | .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; | |||
left: 100%; | |||
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: 1em; | |||
text-transform: uppercase; | |||
letter-spacing: 0.06em; | |||
margin-left: 0.65em !important; | |||
} | } | ||
. | .sidebar-chunk { | ||
border-radius: 5px; | |||
} | } | ||
. | #site-tools .mw-portlet-body { | ||
margin- | 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; | |||
} | } | ||
/* | /* vertical grid table */ | ||
.vgrid-table { | |||
display: | display: grid; | ||
grid-template-columns: 135px auto; | |||
gap: 5px; | |||
} | } | ||
.vgrid-table > div { | |||
. | padding: 2px; | ||
padding- | box-shadow: 0 0 0 1px var(--border-color); | ||
height: 100%; | |||
} | } | ||
/* | /* title */ | ||
. | .vgrid-table > .vgrid-cat { | ||
font-weight: 500; | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
place-content: center; | |||
place-items: center; | |||
: | text-align: center; | ||
background-color: var(--theme-tone-5); | |||
- | |||
- | |||
} | } | ||
::- | /* content */ | ||
.vgrid-table > div:not(.vgrid-cat) { | |||
- | display: flex; | ||
place-content: start; | |||
flex-direction: row; | |||
place-items: center; | |||
background-color: var(--theme-tone-6); | |||
} | } | ||
: | .vgrid-table > div:not(.vgrid-cat) ul { | ||
display: flex; | |||
- | flex-wrap: wrap; | ||
margin: 0; | |||
list-style-type: none; | |||
gap: 0.3em; | |||
place-items: center; | |||
padding: 0 0.9em; | |||
padding-left: 0; | |||
} | } | ||
.vgrid-table > div:not(.vgrid-cat) ul li { | |||
position: relative; | |||
padding: 3px; | |||
} | |||
.vgrid-table > div:not(.vgrid-cat) ul li::after { | |||
content: "▪"; | |||
position: absolute; | |||
right: -0.37em; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
font-size: 0.8em; | |||
} | } | ||
.vgrid-table > div:not(.vgrid-cat) ul li:last-child::after { | |||
content: unset; | |||
} | } | ||
. | .vgrid-table > div:not(.vgrid-cat) ul li a { | ||
font-weight: 500; | font-weight: 500; | ||
color: var(--text-color) !important; | |||
padding: 5px; | |||
border-radius: 4px; | |||
transition: background-color 0.3s, color 0.2s; | transition: background-color 0.3s, color 0.2s; | ||
user-select: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
text-decoration: none; | |||
} | } | ||
. | .vgrid-table > div:not(.vgrid-cat) ul li a:hover, | ||
.vgrid-table > div:not(.vgrid-cat) ul li a.mw-selflink { | |||
color: white !important; | |||
background-color: var(--accent-color); | |||
} | } | ||
. | .vgrid-table > .vgrid-cat > span { | ||
padding: 4px; | |||
} | } | ||
. | .vgrid-table .textfloat { | ||
color: #fff !important; | |||
text-shadow: 1px 1px 1px #000 !important; | |||
} | } | ||
. | .vgrid-table > div .vgrid-cat { | ||
background: var(--theme-tone-5); | |||
padding: 2px 6px; | |||
font-weight: 500; | |||
margin-left: -2px; | |||
height: 100%; | |||
width: 135px; | |||
min-width: 135px; | |||
text-align: center; | |||
border-right: 1px solid var(--border-color); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | } | ||
. | table .vgrid-table { | ||
margin-bottom: 5px; | |||
} | } | ||
. | /* Long table tooltip adjustments */ | ||
.long-table { | |||
overflow-x: auto; | |||
} | } | ||
. | :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; | |||
color: | |||
} | } | ||
: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); | |||
} | } | ||
/* systems */ | |||
.section-systems table th:nth-of-type(2n + 1) { | |||
border- | border-top-right-radius: 0; | ||
border-bottom-right-radius: 0; | |||
} | } | ||
. | .section-systems table th:nth-of-type(2n) { | ||
border-top-left-radius: 0; | |||
border-bottom-left-radius: 0; | |||
} | } | ||
. | /* status effect icons */ | ||
.status { | |||
display: inline-flex; | |||
gap: 0.35em; | |||
} | } | ||
. | .status .tooltip { | ||
white-space: nowrap; | |||
} | } | ||
/* New section - segment */ | |||
.segment { | |||
position: relative; | |||
margin: 15px 0; | |||
margin | } | ||
} | |||
.segment .vgrid-table { | |||
margin: 0; | |||
margin | |||
} | } | ||
. | .segment .segment-header { | ||
border-radius: 5px; | color: var(--text-color); | ||
text-shadow: none; | |||
font-weight: 500; | |||
background-color: var(--theme-tone-5); | |||
border: 1px solid var(--border-color); | |||
padding: 7px 10px; | |||
border-radius: 4px 4px 0 0; | |||
text-align: center; | |||
letter-spacing: 0.5px; | |||
font-size: 19px; | |||
} | } | ||
.segment > .mw-collapsible-toggle::before, | |||
.segment > .mw-collapsible-toggle::after { | |||
display: none; | |||
} | } | ||
.mw-content-ltr .segment > .mw-collapsible-toggle { | |||
position: absolute; | |||
padding: 6px; | |||
top: 5px; | |||
border-radius: 4px; | |||
right: 5px; | |||
transition: 0.3s; | |||
} | } | ||
.segment > .mw-collapsible-toggle:hover { | |||
background-color: rgba(0, 0, 0, 0.05); | |||
} | } | ||
.segment > .mw-collapsible-toggle a { | |||
. | color: var(--text-color); | ||
letter-spacing: 0.5px; | |||
font-weight: 500; | |||
} | } | ||
. | .segment.section-border > .segment-contents { | ||
border: 1px solid var(--border-color); | |||
} | } | ||
.section-bg tr.textfloat a:not(.force-black a) { | |||
. | color: white !important; | ||
} | } | ||
.client-js .segment.mw-collapsed:not(.mw-made-collapsible):before, | |||
. | .client-js .segment.mw-collapsible:not(.mw-made-collapsible):before { | ||
display: none !important; | |||
} | } | ||
. | .segment > .segment-contents { | ||
padding: 1em; | |||
padding: | |||
} | } | ||
. | .segment .segment-header:not(.mw-collapsed .segment-header) { | ||
border-bottom: none; | |||
} | |||
.segment .segment-header.single-title { | |||
border-bottom: 1px solid var(--border-color) !important; | |||
} | } | ||
. | .segment.section-border.section-bg > .segment-contents { | ||
background-color: var(--theme-tone-7); | |||
} | } | ||
. | .segment.section-border.section-bg > .segment-headers > .segment-header { | ||
background-color: var(--theme-tone-6); | |||
} | } | ||
. | .segment.section-border.section-bg .tabber-new .tabber-tab { | ||
background-color: var(--theme-tone-6); | |||
border: 1px solid var(--border-color); | |||
font-weight: 500; | font-weight: 500; | ||
color: var(--text-color) | color: var(--text-color); | ||
} | } | ||
. | .segment.section-border.section-bg .tabber-new .tabber-tab:hover, | ||
. | .segment.section-border.section-bg .tabber-new .tabber-tab.active { | ||
background-color: var(--accent-color); | background-color: var(--accent-color); | ||
color: white; | |||
} | } | ||
. | .split { | ||
--min-side-width: 250px; | |||
} | } | ||
. | .split .segment-headers { | ||
display: grid !important; | |||
grid-template-columns: repeat(auto-fit, minmax(var(--min-side-width), 1fr)); | |||
gap: 0 !important; | |||
} | } | ||
. | .split .segment-contents { | ||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(var(--min-side-width), 1fr)); | |||
} | } | ||
.split .segment-contents .mw-collapsible-content, | |||
.instance-page .split .segment-header { | |||
flex-basis: 50%; | |||
box-sizing: border-box; | |||
} | } | ||
.split .segment-contents .mw-collapsible-content:first-child { | |||
. | padding-right: 1rem; | ||
} | } | ||
.split .segment-contents .mw-collapsible-content:nth-child(2) { | |||
border-left: 1px var(--border-color) solid; | |||
margin: -1rem -0 -1rem 0; | |||
padding: 1rem 0 1rem 1rem; | |||
} | } | ||
. | .split.uneven-split .segment-contents { | ||
grid-template-columns: 70% 30%; | |||
} | } | ||
. | .split.uneven-split .segment-headers { | ||
grid-template-columns: calc(70% - 0.4rem) calc(30% + 0.4rem); | |||
} | } | ||
. | .split .segment-header:first-of-type { | ||
. | border-top-right-radius: 0; | ||
margin-right: -1px; | |||
} | } | ||
. | .split .segment-header:nth-of-type(2) { | ||
border-top-left-radius: 0; | |||
} | } | ||
. | /* Quest */ | ||
.job-change-collapsible { | |||
border: 1px solid var(--border-color); | |||
border-radius: 7px 7px 4px 4px; | |||
display: flex; | |||
flex-direction: column; | |||
} | } | ||
.job-change-collapsible .segment-headers { | |||
. | background-color: var(--theme-tone-5); | ||
} | } | ||
.job-change-collapsible .segment-header { | |||
border: none; | |||
color: var(--text-color); | |||
text-shadow: none; | |||
padding: 0; | |||
font-size: 1em; | |||
} | } | ||
.job-change-collapsible .segment { | |||
border: none; | |||
margin: 0; | |||
margin | |||
} | } | ||
.job-change-collapsible [style*="1.25em"] * { | |||
. | font-size: 15.2px !important; | ||
} | } | ||
. | .job-change-collapsible > .section > .mw-collapsible-toggle:hover { | ||
background-color: rgba(255, 255, 255, 0.15); | |||
} | } | ||
.job-change-collapsible .section .section { | |||
. | border-bottom: 1px solid var(--border-color); | ||
} | } | ||
. | .job-change-collapsible .section .section:first-of-type { | ||
border-bottom: 1px solid var(--border-color); | |||
} | } | ||
.job-change-collapsible .mw-collapsible-toggle-default::before, | |||
. | .job-change-collapsible .mw-collapsible-toggle-default::after, | ||
.job-change-collapsible .mw-collapsible-text { | |||
display: none; | |||
} | } | ||
. | .job-change-collapsible .section { | ||
position: relative; | |||
} | } | ||
. | .mw-content-ltr .job-change-collapsible .segment > .mw-collapsible-toggle { | ||
display: block; | |||
position: absolute; | |||
right: 8px; | |||
top: 8px; | |||
padding: 3px 5px; | |||
padding: | transition: 0.3s; | ||
border-radius: 4px; | |||
} | } | ||
. | .mw-content-ltr .job-change-collapsible > .section > .mw-collapsible-toggle { | ||
. | color: white; | ||
text-shadow: 1px 1px 1px #000; | |||
top: 5px; | |||
right: 7px; | |||
height: fit-content; | |||
} | } | ||
. | .job-change-collapsible .mw-collapsible-toggle:hover { | ||
background-color: var(--theme-tone-7); | |||
} | } | ||
. | .client-js .job-change-collapsible div.mw-collapsed:not(.mw-made-collapsible):before, | ||
.client-js .generic-quest.mw-collapsed:not(.mw-made-collapsible):before { | |||
content: unset; | |||
/* (Bandaid for FoUC) */ | |||
} | } | ||
. | .job-change-collapsible .mw-collapsible-toggle::after { | ||
display: block; | |||
content: "Hide"; | |||
} | } | ||
. | .job-change-collapsible .mw-collapsed .mw-collapsible-toggle::after { | ||
display: block; | |||
content: "Show"; | |||
} | } | ||
. | .job-change-collapsible .mw-collapsible-toggle { | ||
font-weight: 500; | |||
} | } | ||
. | .job-change-collapsible .segment > .segment-contents { | ||
padding: 0; | |||
} | } | ||
. | .job-change-collapsible > .segment > .segment-headers .segment-header { | ||
. | color: white; | ||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
. | .generic-quest { | ||
position: relative; | |||
margin-top: 5px; | |||
margin-bottom: 5px; | |||
} | } | ||
. | .generic-quest > div { | ||
border- | border-radius: 4px; | ||
} | } | ||
. | .generic-quest .mw-collapsible-toggle { | ||
color: white !important; | |||
text-shadow: 1px 1px 1px #000; | |||
font-size: 1em; | |||
position: absolute; | |||
right: 7px; | |||
top: 11px; | |||
} | } | ||
. | .generic-quest .mw-collapsible-toggle a { | ||
color: white !important; | |||
font-weight: 500; | |||
} | } | ||
. | .generic-quest > .segment-contents { | ||
border: 1px solid var(--border-color); | border: 1px solid var(--border-color); | ||
} | } | ||
. | .generic-quest .mw-collapsible-toggle-default::before, | ||
. | .generic-quest .mw-collapsible-toggle-default::after, | ||
.generic-quest .mw-collapsible-text { | |||
display: none; | |||
} | } | ||
. | .generic-quest .mw-collapsible-toggle::after { | ||
display: block; | |||
content: "(Hide)"; | |||
} | } | ||
. | .generic-quest.mw-collapsed .mw-collapsible-toggle::after { | ||
display: | display: block; | ||
content: "(Show)"; | |||
} | } | ||
. | .generic-quest .mw-collapsible-toggle { | ||
font-weight: 500; | |||
} | } | ||
. | .generic-quest > div:not(.mw-collapsed > div) { | ||
border-radius: 4px 4px 0 0; | |||
} | } | ||
. | .generic-quest > .segment-header { | ||
color: white; | |||
text-shadow: 1px 1px 1px #000; | |||
font-size: 19px; | |||
} | } | ||
. | .mw-content-ltr .segment.generic-quest > .mw-collapsible-toggle { | ||
top: 8px; | |||
right: 8px; | |||
padding: | padding: 3px; | ||
} | } | ||
. | .mw-content-ltr .segment.generic-quest > .mw-collapsible-toggle:hover { | ||
background-color: rgba(255, 255, 255, 0.15); | |||
} | } | ||
. | .segment.generic-quest .segment-header { | ||
padding: 0; | |||
background: transparent; | |||
color: white; | |||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
. | .segment.generic-quest .segment-contents { | ||
padding: 0; | |||
} | } | ||
. | /* combo overlay */ | ||
.combo-overlay a { | |||
display: flex; | |||
} | } | ||
/* | /* New Infobox */ | ||
.infobox-new { | |||
. | float: right; | ||
border: 1px solid var(--border-color); | border: 1px solid var(--border-color); | ||
border-radius: | border-radius: 4px; | ||
margin-left: 1rem; | |||
max-width: 470px; | |||
margin-bottom: 1em; | |||
} | } | ||
. | .infobox-new-header { | ||
padding: 7px; | |||
text-align: center; | |||
text-shadow: 1px 1px 1px #000; | |||
font-weight: 500; | |||
border-bottom: 1px solid var(--border-color); | |||
color: white; | |||
user-select: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
} | } | ||
. | .infobox-character .infobox-new-image img, | ||
.infobox-npc .infobox-new-image img { | |||
margin: 5px 0; | |||
} | } | ||
. | .infobox-character .infobox-new-header img[alt^="Mini Icon"] { | ||
display: none; | |||
} | } | ||
. | .infobox-new-image { | ||
text-align: center; | |||
} | } | ||
. | .infobox-new-image img { | ||
max-width: 100%; | |||
height: auto; | |||
} | } | ||
. | .infobox-equipment .infobox-new-image { | ||
margin: 5px; | |||
} | } | ||
. | .infobox-new .infobox-row { | ||
border- | display: grid; | ||
grid-template-columns: 120px auto; | |||
border-top: 1px solid var(--border-color); | |||
} | } | ||
. | .infobox-song .infobox-row, | ||
. | .infobox-goods .infobox-row { | ||
grid-template-columns: 125px auto; | |||
} | } | ||
. | .infobox-new .infobox-row.infobox-double-row { | ||
--first-column-width: 120px; | |||
grid-template-columns: var(--first-column-width) calc((100% - var(--first-column-width)) / 2) calc( | |||
(100% - var(--first-column-width)) / 2 | |||
); | |||
} | } | ||
. | .infobox-new .infobox-row-title { | ||
display: | padding: 8px; | ||
border-right: 1px solid var(--border-color); | |||
font-weight: 500; | |||
background-color: var(--theme-tone-4); | |||
display: flex; | |||
align-items: center; | |||
word-break: break-word; | |||
user-select: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
} | } | ||
. | .infobox-new .infobox-row-content { | ||
padding: 8px; | |||
display: flex; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
} | } | ||
. | .infobox-new .infobox-row-content:nth-child(3) { | ||
border-left: 1px solid var(--border-color); | |||
} | } | ||
. | .infobox-new .embedvideo { | ||
width: 350px!important; | |||
height: 197px; | |||
} | } | ||
. | .infobox-song .embedvideo { | ||
margin: 0; | |||
height: auto; | |||
max-width: 100%; | |||
} | } | ||
. | .infobox-song .infobox-new-image { | ||
height: 223px; | |||
width: 397px; | |||
} | } | ||
. | .infobox-song { | ||
max-width: 397px; | |||
} | } | ||
. | .infobox-new .infobox-row-content.infobox-video-row { | ||
padding: 0; | padding: 0; | ||
} | } | ||
. | .infobox-new .tabber-ul { | ||
color: | place-items: center; | ||
place-content: center; | |||
background-color: var(--theme-tone-4); | |||
border-bottom: 1px solid var(--border-color); | |||
--accent-color: var(--theme-tone-3); | |||
} | } | ||
. | .infobox-new .tabber-tab { | ||
border: none; | |||
margin-top: | margin-top: 0; | ||
margin- | background-color: transparent; | ||
border-bottom: 0; | |||
border-radius: 0; | |||
margin-right: 0 !important; | |||
padding: 7px 12px; | |||
font-size: 15px; | |||
border-right: 1px solid var(--border-color); | |||
color: var(--text-color) !important; | |||
font-weight: 500; | |||
} | } | ||
. | .infobox-new .tabdiv .tabdiv .tabber-ul { | ||
border- | border-bottom: 1px solid var(--border-color); | ||
} | } | ||
. | .infobox-new .tabber-tab:first-child { | ||
border-left: 1px solid var(--border-color); | |||
} | } | ||
. | .infobox-new .infobox-row-content img[alt^="Mini Icon"] { | ||
vertical-align: sub; | |||
} | } | ||
. | .infobox-new .infobox-row-content table { | ||
margin: 5px 0; | |||
} | } | ||
. | /* New nmbox */ | ||
.nmbox-new { | |||
display: grid; | |||
grid-template-columns: min-content auto; | |||
border: 1px solid var(--border-color); | |||
border-radius: 4px; | |||
margin: 1em 0; | |||
user-select: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
} | } | ||
. | .nmbox-new .nmbox-new-header { | ||
display: | display: flex; | ||
content: | place-content: center; | ||
place-items: center; | |||
background-color: var(--theme-tone-5); | |||
padding: 8px; | |||
border-right: 1px solid var(--border-color); | |||
border-radius: 4px 0 0 4px; | |||
} | } | ||
. | .nmbox-new .nmbox-new-header a { | ||
text-decoration: none !important; | |||
} | } | ||
. | .nmbox-new .nmbox-new-header a b { | ||
color: var(--text-color); | |||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
. | .nmbox-new .nmbox-new-content { | ||
display: flex; | |||
place-items: center; | |||
} | } | ||
. | .nmbox-new ul { | ||
display: flex; | |||
place-items: center; | |||
list-style-type: none; | |||
margin: 0; | |||
flex-wrap: wrap; | |||
background-color: var(--theme-tone-6); | |||
} | } | ||
. | .nmbox-new ul li { | ||
display: block; | |||
} | } | ||
. | .nmbox-new ul a { | ||
color: var(--text-color) !important; | |||
text-decoration: none !important; | |||
display: flex; | |||
place-content: center; | |||
padding: 0; | place-items: center; | ||
padding: 8px; | |||
transition: background-color 0.2s; | |||
font-size: 14px; | |||
direction: ltr; | |||
height: 24px; | |||
} | } | ||
. | .nmbox-new ul .mw-selflink, | ||
.nmbox-new ul b { | |||
font-weight: 500; | |||
color: var(--text-color); | |||
} | } | ||
.nmbox-new ul a:not(.mw-selflink, .selflink):hover { | |||
. | background-color: var(--theme-tone-5); | ||
} | } | ||
/* | /* Tables */ | ||
. | table[cellpadding="5"][border="1"][style], | ||
table[cellpadding="5"][border="1"][style] td, | |||
border: | table[cellpadding="5"][border="1"][style] th, | ||
table[cellpadding="5"][border="1"][class], | |||
table[cellpadding="5"][border="1"][class] td, | |||
table[cellpadding="5"][border="1"][class] th, | |||
.related-skills, | |||
.related-skills td, | |||
.related-skills tr, | |||
.related-skills th { | |||
border-color: var(--border-color); | |||
} | } | ||
. | tr[style] th a:not(.textfloat a), | ||
tr[style] th a:visited:not(.textfloat a), | |||
tr[style] th a:link:not(.textfloat a), | |||
table[class*="colortable-"] th a:not(.textfloat a), | |||
table[class*="colortable-"] th a:visited:not(.textfloat a), | |||
table[class*="colortable-"] th a:link:not(.textfloat a) { | |||
color: #1d5383 !important; | |||
} | } | ||
. | table[cellpadding="5"][border="1"][style] tr[style]:not(.wikitable tr, .updates-section-table tr, .alt-langs tr), | ||
. | table[cellpadding="5"][border="1"][style] tr[style] th:not(.wikitable th), | ||
table[cellpadding="5"][border="1"][class*="colortable-"] th { | |||
border: 1px solid rgb(71, 71, 71); | |||
} | } | ||
. | table.colored-table td { | ||
border: 1px solid rgb(71, 71, 71) !important; | |||
} | } | ||
tr[style*="#444444"] th { | |||
text- | color: white; | ||
text-shadow: none !important; | |||
} | } | ||
tr[style*="background:#444444"] a { | |||
color: white !important; | |||
text-shadow: none !important; | |||
} | } | ||
table[cellpadding="5"][border="1"][style] tr[style*="#444444"], | |||
table[cellpadding="5"][border="1"][style] tr[style*="#444444"] th { | |||
border-color: var(--border-color-tone-2) !important; | |||
} | } | ||
tr[style*="#414243"] th { | |||
border-color: var(--border-color-tone-2) !important; | |||
border- | |||
} | } | ||
. | .force-white, | ||
. | .force-white a { | ||
color: white !important; | |||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
. | .force-black, | ||
.force-black a { | |||
color: black !important; | |||
text-shadow: none !important; | |||
} | } | ||
. | /* Char stats */ | ||
.char-stats { | |||
display: inline-grid; | |||
grid-template-columns: repeat(3, 105px); | |||
grid-template-rows: repeat(3, 30px); | |||
gap: 5px; | |||
user-select: none; | user-select: none; | ||
-webkit-user-select: none; | -webkit-user-select: none; | ||
Line 4,283: | Line 4,299: | ||
} | } | ||
. | .char-stats-cat, | ||
.char-stats-attack-caption, | |||
.char-stats-attack { | |||
background-color: var(--theme-tone-5); | |||
color: var(--text-color); | |||
font-weight: 500; | |||
display: flex; | display: flex; | ||
place-items: center; | |||
place-content: center; | |||
transform: skew(-7deg); | |||
border-bottom: 2px solid var(--border-color); | |||
} | } | ||
. | .char-stats-cat { | ||
place-content: start; | |||
padding-left: 8px; | |||
} | } | ||
. | .char-stats-cat span, | ||
.char-stats-attack-caption span, | |||
.char-stats-attack img { | |||
transform: skew(7deg); | |||
} | } | ||
. | .char-stats-active { | ||
background-image: url("https://elwiki.net/wiki/images/f/f5/UI_-_Stats_Active.png"); | |||
background-repeat: no-repeat; | |||
display: flex; | |||
place-items: center; | |||
place-content: center; | |||
color: white; | |||
font-weight: 500; | |||
} | } | ||
. | .char-stats-attack { | ||
display: flex; | |||
place-items: center; | |||
place-content: center; | |||
grid-row: span 2; | |||
/* background-color: var(--theme-tone-5); */ | |||
} | } | ||
. | .char-stats-attack img { | ||
width: 57px; | |||
height: auto; | |||
} | } | ||
. | /* SkillNav */ | ||
.skillnav .separate a:not(.image), | |||
.forcenav a:not(.image) { | |||
margin-right: 13px; | |||
font-weight: 500; | |||
} | } | ||
. | .skillnav .separate a:not(.image):last-child, | ||
.forcenav a:not(.image):last-child { | |||
margin-right: 0; | |||
- | |||
} | } | ||
. | .forcenav .forcedot::before { | ||
content: "▪"; | |||
margin- | margin-right: 13px; | ||
} | |||
border- | |||
.forcenav table.section .section .section th { | |||
border-left: 1px solid var(--border-color) !important; | |||
border-right: 1px solid var(--border-color) !important; | |||
background: var(--theme-tone-4) !important; | |||
border-right: 1px solid var(--border-color); | |||
} | } | ||
. | table.section > tbody > tr:first-child > th.skillnav-section { | ||
border-bottom: 1px solid var(--border-color); | background-color: var(--theme-tone-3) !important; | ||
text-shadow: none; | |||
border-top: 1px solid var(--border-color) !important; | |||
border-bottom: 1px solid var(--border-color) !important; | |||
color: var(--text-color); | |||
} | } | ||
. | /* Force tabs */ | ||
border | .force-tabs .parent-tab { | ||
border: 1px solid rgb(71, 71, 71); | |||
} | } | ||
. | .force-tabs .parent-tab a:not(.mw-selflink) { | ||
color: black !important; | |||
text-decoration: none !important; | |||
} | } | ||
. | .parent-tab a { | ||
height: 100%; | |||
display: block; | |||
padding: 0 0.5em; | |||
} | } | ||
.force-tabs .parent-alt-tab { | |||
. | transition: 0.3s; | ||
} | } | ||
. | .force-tabs .parent-tab.parent-alt-tab a { | ||
color: white !important; | |||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
. | .force-tabs .parent-alt-tab:hover { | ||
transform: translateY(-5px); | |||
} | } | ||
. | .parent-tabs .mw-selflink { | ||
font-weight: 500 !important; | |||
font-weight: 500; | |||
} | } | ||
. | /* Warning */ | ||
div.mw-warning-with-logexcerpt { | |||
padding: 15px; | |||
border-radius: 6px; | |||
border: none; | |||
background: var(--theme-tone-5); | |||
margin-bottom: 1em; | |||
border: 1px solid var(--border-color); | |||
} | } | ||
. | .mw-warning-with-logexcerpt p:first-of-type { | ||
margin-top: 0; | |||
margin: 0 | |||
} | } | ||
. | .mw-warning-with-logexcerpt strong { | ||
font-weight: 500; | |||
} | } | ||
. | /* Region Map */ | ||
.region-map { | |||
position: relative; | |||
width: fit-content; | |||
} | } | ||
. | .region-map img[alt="About this image"] { | ||
position: absolute; | |||
display: none; | |||
bottom: 0; | |||
right: 0; | |||
} | } | ||
. | .region-map img[alt="About this image"]:hover, | ||
.region-map .region-link img:hover { | |||
filter: brightness(1.1); | |||
} | } | ||
.dungeon-map map + div { | |||
border-radius: 0 4px 4px 4px; | |||
. | |||
border- | |||
} | } | ||
.dark-mode .dungeon-map .extra-title { | |||
color: var(--accent-color); | |||
color: | |||
} | } | ||
/* Boss timer */ | |||
.boss-timer { | |||
display: flex; | |||
} | } | ||
.boss-timer-image img { | |||
display: none; | |||
} | } | ||
.boss-timer-image a { | |||
display: inline-block; | |||
width: 105px; | |||
height: 105px; | |||
} | } | ||
.boss-timer-caption, | |||
.server-time-caption { | |||
text- | font-size: 15px; | ||
font-weight: 500; | |||
letter-spacing: 0.75px; | |||
display: flex; | |||
flex-direction: column; | |||
place-content: center; | |||
color: var(--text-color); | |||
} | } | ||
.boss-timer-countdown, | |||
.server-time { | |||
font-size: 22px; | |||
font-weight: 700; | |||
color: var(--text-color); | |||
} | } | ||
.boss-timer-text { | |||
margin-bottom: 2px; | |||
} | } | ||
. | .server-time-wrap { | ||
display: grid; | |||
grid-template-columns: 80px auto; | |||
} | |||
.server-time-image-wrap { | |||
display: flex; | |||
place-content: center; | |||
place-items: center; | |||
} | } | ||
. | .tabber-border.fancy .tabber-tab { | ||
. | z-index: 2; | ||
} | } | ||
. | .server-time-caption { | ||
margin-bottom: -2px; | |||
color: var(--text-color); | |||
text- | |||
} | } | ||
.server-time-reset { | |||
. | text-transform: lowercase; | ||
font-size: 12px; | |||
letter-spacing: 0.75px; | |||
} | } | ||
. | .henir-grid { | ||
display: flex; | display: flex; | ||
place-items: center; | place-items: center; | ||
place-content: center; | place-content: center; | ||
gap: 10px; | |||
flex-wrap: wrap; | |||
} | } | ||
. | .henir-grid a:not(.tooltiptext a) { | ||
display: block; | |||
color: var(--text-color); | |||
} | } | ||
. | .henir-grid .tooltiptext { | ||
. | min-width: 150px; | ||
box-shadow: 0 2px 0 0 rgb(0, 0, 0, 0.15); | |||
} | } | ||
. | .boss-sprite-1 { | ||
background-image: url(" | background-image: url("/wiki/images/e/e2/Sprite_-_Boss_Icon_1.png"); | ||
} | } | ||
. | .boss-sprite-2 { | ||
background-image: url("/wiki/images/f/ff/Sprite_-_Boss_Icon_2.png"); | |||
} | } | ||
. | .boss-sprite-3 { | ||
background-image: url("/wiki/images/1/1c/Sprite_-_Boss_Icon_3.png"); | |||
} | } | ||
.boss-image { | |||
display: inline-block; | |||
background-repeat: no-repeat; | |||
order: 2; | |||
backface-visibility: hidden; | |||
transition: transform 0.2s; | |||
} | } | ||
. | .henir-caption { | ||
font-size: 16px; | |||
font-weight: 500; | |||
letter-spacing: 0.75px; | |||
text-align: center; | |||
color: var(--text-color); | |||
} | |||
.timers-wrap { | |||
display: flex; | |||
place-items: center; | |||
} | } | ||
. | .boss-timer-section .timers-wrap { | ||
border-right: 1px solid var(--border-color); | |||
} | } | ||
. | .boss-timer-section .tabber-content { | ||
display: grid; | |||
} | } | ||
.henir-stage { | |||
display: flex; | |||
place-items: flex-end; | |||
cursor: pointer; | |||
overflow: hidden; | |||
} | } | ||
.henir-stage .text { | |||
display: flex; | |||
border: | gap: 3px; | ||
padding: 0 7px; | |||
font-size: 11px; | |||
border-radius: 4px; | |||
letter-spacing: 0.75px; | |||
font-weight: 700; | |||
border-top-right-radius: 0; | |||
} | } | ||
. | .henir-stage .text a { | ||
color: | font-weight: 700; | ||
color: var(--text-color); | |||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
. | .henir-stage:hover .boss-image { | ||
transform: translateZ(0) scale(1.2); | |||
} | } | ||
. | .henir-section .tabber-content { | ||
display: flex; | |||
flex-direction: column; | |||
place-content: center; | |||
place-items: center; | |||
gap: 13px; | |||
} | } | ||
. | .current-info .tabber-tab { | ||
margin-top: 0; | |||
} | } | ||
. | .current-info .fancy .tabber-tab.active, | ||
.current-info .fancy .tabber-tab:hover { | |||
background-image: linear-gradient(to left bottom, #00a5ea 0, transparent 70%), | |||
linear-gradient(to left top, #20b7e5 43px, #00f6ff 44px) !important; | |||
} | } | ||
. | .henir-outer { | ||
display: flex; | |||
flex-direction: column; | |||
gap: 1rem; | |||
place-content: center; | |||
} | } | ||
/* | /* Char tree - required here */ | ||
.char-banner-tree-image::before { | |||
background-image: url(https://elwiki.net/wiki/images/0/0b/Arrowright.png); | |||
background: | |||
} | } | ||
. | .tabber-list-toggle img:hover { | ||
filter: brightness(1.1); | |||
} | } | ||
/* Related skills */ | |||
.related-skills td:not(.no-div td) { | |||
. | padding: 0; | ||
} | } | ||
. | .related-skills.skill-table .skill-wrap-text { | ||
text-align: center; | |||
} | } | ||
. | .skill-table { | ||
height: fit-content; | |||
} | } | ||
. | .skill-table .skill-wrap { | ||
position: relative; | |||
} | } | ||
. | .skill-table .skill-wrap > a { | ||
color: | position: absolute; | ||
width: 100%; | |||
display: block; | |||
height: 100%; | |||
color: transparent; | |||
-webkit-user-select: none; | |||
user-select: none; | |||
-moz-user-select: none; | |||
opacity: 0; | |||
} | } | ||
.related-skills.secret-art .skill-wrap { | |||
. | min-height: 108px; | ||
} | } | ||
. | .related-skills .skill-wrap-text { | ||
padding: 0 0.5rem; | |||
text-align: center; | |||
} | } | ||
. | .related-skills .skill-wrap-text > a:not(.image), | ||
.related-skills td[width="150"] > a:not(.image) { | |||
. | |||
. | |||
font-weight: 500; | font-weight: 500; | ||
color: var(--text-color); | |||
place-content: center; | place-content: center; | ||
place-items: center; | |||
transition: 0.3s; | |||
width: auto; | |||
display: inline; | |||
word-break: break-word; | |||
} | } | ||
. | .skill-wrap:not(.no-div .skill-wrap):hover { | ||
. | background-color: var(--theme-tone-7); | ||
} | } | ||
. | .related-skills .skill-wrap { | ||
transition: 0.3s; | |||
cursor: pointer; | |||
min-height: 54px; | |||
place-content: center; | |||
place-items: center; | |||
display: flex; | |||
width: 150px; | |||
padding: 0.15rem; | |||
box-sizing: border-box; | |||
} | } | ||
. | .related-skills .tooltip { | ||
margin: 0 0.15rem; | |||
font-weight: 500; | |||
} | } | ||
. | .related-skills .tooltip a:not(.tooltiptext a) { | ||
color: var(--text-color) !important; | |||
} | |||
.related-skills { | |||
width: fit-content; | |||
border: 1px solid var(--border-color); | |||
border-bottom: none; | |||
border-right: none; | |||
} | } | ||
[data-type="table-row"] { | |||
display: flex; | |||
margin: 1px -1px -1px 0; | |||
} | } | ||
[data-type="table-row"]:first-child { | |||
margin- | margin-top: 0; | ||
} | } | ||
. | .related-skills .skill-wrap { | ||
height: 100%; | |||
} | } | ||
[data-type="table-cell"] { | |||
display: flex; | display: flex; | ||
place-content: center; | place-content: center; | ||
align-items: center; | |||
border-right: 1px solid var(--border-color); | |||
border-bottom: 1px solid var(--border-color); | |||
width: fit-content; | |||
} | } | ||
. | .skill-columns { | ||
display: grid; | |||
display: | grid-template-columns: repeat(2, auto); | ||
} | } | ||
. | .related-skills [data-type="table-cell"]:not([width], .related-title, .skill-table div) { | ||
max-width: 108px; | |||
flex-wrap: wrap; | |||
} | } | ||
. | .related-skills [data-type="table-cell"]:active .skill-wrap, | ||
background- | .related-skills [data-type="table-cell"]:focus .skill-wrap { | ||
background-color: var(--theme-tone-8); | |||
} | } | ||
. | .related-skills a:focus, | ||
.related-skills a:active { | |||
text-decoration: none; | |||
} | } | ||
[data-type="table-head"] { | |||
display: flex; | |||
place-content: center; | |||
gap: 3px; | |||
place-items: center; | |||
padding: 3px; | |||
margin: 0 auto; | |||
max-width: fit-content; | |||
text-align: center; | |||
} | } | ||
[data-type="table-head"] img { | |||
display: | display: block; | ||
} | } | ||
. | .related-skills:not(.no-div) { | ||
opacity: 0; | |||
pointer-events: none; | |||
} | } | ||
. | .shown { | ||
opacity: 1 !important; | |||
pointer-events: all !important; | |||
} | } | ||
. | .related-skills.no-div td[width="150"]:hover { | ||
background-color: var(--theme-tone-7); | |||
cursor: pointer; | |||
} | } | ||
. | .related-skills.no-div td[width="150"] { | ||
transition: 0.3s; | |||
} | } | ||
. | .related-skills.no-div td[width="150"] a { | ||
color: var(--text-color) !important; | |||
} | } | ||
[data-type="table-head"] { | |||
background-image: none !important; | |||
} | } | ||
. | [data-type="table-row"].table-head { | ||
border-right: 1px solid var(--border-color); | |||
border-bottom: 1px solid var(--border-color); | |||
border- | |||
} | } | ||
. | .category-grid { | ||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(215px, max-content)); | |||
gap: 1em; | |||
} | } | ||
. | .category-grid #toc { | ||
display: none; | |||
} | } | ||
. | .master-skill-grid .skill-wrap a { | ||
padding: 0 !important; | |||
} | } | ||
.related-title { | |||
padding: 2px; | |||
font-weight: 500; | |||
place-content: center; | |||
background-color: var(--theme-tone-4); | |||
text-shadow: none !important; | |||
color: var(--color-normal) !important; | |||
} | } | ||
.related-skills-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 1rem; | |||
place-content: space-between; | |||
padding: 0 0 1.5rem 0; | |||
} | } | ||
/* 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, | ||
. | .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; | |||
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 { | ||
position: | background-position: left center; | ||
} | } | ||
. | .mw-editsection a:first-of-type { | ||
height: 100%; | 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; | |||
place-content: center; | place-content: center; | ||
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; | 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; | display: flex; | ||
place-content: center; | place-content: center; | ||
} | } | ||
. | /* Metadata */ | ||
display: | .mw-metadata-show-hide-extended a[role="button"] { | ||
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- | 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; | |||
padding: | |||
text-align: center; | |||
} | } | ||
/* 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 { | |||
.related- | background-color: var(--theme-tone-5); | ||
color: var(-- | 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) { | |||
display: | 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; | |||
} | |||
} | } | ||
. | /* Dark mode */ | ||
.dark-mode { | |||
--accent-color: #41afcc; | |||
--accent-color-tone-2: #40aac8; | |||
--accent-color-tone-3: #2f839b; | |||
--border-color: #444444; | |||
--border-color-tone-2: #838383; | |||
--theme-tone-1: #171717; | |||
--theme-tone-2: #242424; | |||
--theme-tone-3: #3b3b3b; | |||
--theme-tone-4: #2b2b2b; | |||
--theme-tone-5: #282828; | |||
--theme-tone-6: #1f1f1f; | |||
--theme-tone-7: #323435; | |||
--theme-tone-8: #4c4f53; | |||
--theme-tone-9: var(--theme-tone-8); | |||
--text-color: #e8e8e8; | |||
--text-color-invert: black; | |||
--inactive-color: #c4c4c4; | |||
} | } | ||
#dark-mode-switch { | |||
height: 40px; | |||
width: 40px; | |||
position: fixed; | |||
border-radius: 50%; | |||
background: var(--theme-tone-1); | |||
z-index: 9999; | |||
bottom: 10px; | |||
left: 10px; | |||
cursor: pointer; | |||
display: flex; | display: flex; | ||
align-items: center; | |||
place-content: center; | |||
transition: background-color 0.3s; | |||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); | |||
} | } | ||
#dark-mode-switch:hover { | |||
animation: wobble 1s; | |||
background-color: var(--accent-color); | |||
} | |||
#dark-mode-switch:hover::before { | |||
filter: brightness(2); | |||
} | } | ||
#dark-mode-switch.new::after { | |||
content: "NEW!"; | |||
position: absolute; | |||
top: -15px; | |||
right: -23px; | |||
font-weight: 500; | font-weight: 500; | ||
color: #fff; | |||
background: #dc3545; | |||
padding: 0.125rem 0.25rem; | |||
border-radius: 0.2rem; | |||
font-size: 0.8rem; | |||
} | } | ||
#dark-mode-switch::before { | |||
content: ""; | |||
width: 20px; | |||
height: 20px; | |||
display: block; | |||
background-image: url("/svg/sun.svg"); | |||
background-size: contain; | |||
color: red; | |||
transition: filter 0.3s; | |||
} | } | ||
. | .dark-mode #dark-mode-switch::before { | ||
background-image: url("/svg/moon.svg"); | |||
} | } | ||
@keyframes wobble { | |||
0% { | |||
transform: translateX(0%); | |||
} | |||
15% { | |||
transform: translate(-4%) rotate(-5deg); | |||
} | |||
30% { | |||
transform: translate(4%) rotate(3deg); | |||
} | |||
45% { | |||
transform: translate(-2.5%) rotate(-3deg); | |||
} | |||
60% { | |||
transform: translate(1.25%) rotate(2deg); | |||
} | |||
75% { | |||
transform: translate(-2.5%) rotate(-1deg); | |||
} | |||
100% { | |||
transform: translateX(0%); | |||
} | |||
} | } | ||
. | .dark-mode #mw-content-container { | ||
background-color: var(--theme-tone-4); | |||
} | } | ||
. | .dark-mode #personal .dropdown:before { | ||
border-bottom-color: var(--border-color); | |||
} | } | ||
. | .dark-mode #personal .dropdown:after { | ||
border-bottom-color: var(--theme-tone-6); | |||
} | } | ||
. | .dark-mode #p-logo-text a { | ||
color: var(--border-color-tone-2); | |||
} | } | ||
.dark-mode #personal-extra, | |||
.mw- | .dark-mode .server-time-image-wrap, | ||
.dark-mode .tools-inline li a, | |||
.dark-mode .tools-inline li a span, | |||
.dark-mode #mw-data-after-content img, | |||
.dark-mode .mw-editsection, | |||
.dark-mode .mw-editsection a, | |||
.dark-mode span.oo-ui-iconElement-icon:not(.oo-ui-checkboxInputWidget-checkIcon, .oo-ui-image-destructive), | |||
.dark-mode span.oo-ui-fieldLayout-field span:not(#movepage span, .tdg-templateDataDialog-panels span), | |||
.dark-mode .postedit:after, | |||
.dark-mode #mw-indicator-mw-helplink a, | |||
.dark-mode | |||
.oo-ui-buttonElement.oo-ui-widget-enabled | |||
> .oo-ui-buttonElement-button | |||
> .oo-ui-iconElement-icon:not(.oo-ui-image-invert, .oo-ui-image-destructive), | |||
.dark-mode | |||
.oo-ui-buttonElement.oo-ui-widget-enabled | |||
> .oo-ui-buttonElement-button | |||
> .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert), | |||
.dark-mode .flow-component .mw-ui-icon::before, | |||
.dark-mode | |||
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-textInputWidget-type-search | |||
> .oo-ui-indicatorElement-indicator, | |||
.dark-mode div.magnify a, | |||
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after, | |||
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications:after, | |||
.dark-mode #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications:after, | |||
.dark-mode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon, | |||
.dark-mode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator, | |||
.dark-mode .flow-ui-tooltip .mw-ui-icon.mw-ui-icon-element:before, | |||
.dark-mode .ui-widget-header .ui-icon, | |||
.dark-mode .oo-ui-indicator-down:not(select), | |||
.dark-mode .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon, | |||
.dark-mode .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator, | |||
.dark-mode .ve-ui-mwTemplateDialog .oo-ui-indicatorElement-indicator.oo-ui-indicator-required { | |||
filter: invert(1); | |||
} | } | ||
.client-js .dark-mode .mw-echo-special-nojs { | |||
. | filter: invert(1) brightness(4); | ||
} | } | ||
.dark-mode .warningbox, | |||
.mw- | .dark-mode .postedit.mw-notification { | ||
background- | background-color: var(--theme-tone-7); | ||
border-color: var(--border-color); | |||
color: var(--text-color); | |||
} | } | ||
.dark-mode .mw-body .mw-parser-output h2:not(.toctitle h2) { | |||
.mw- | background-image: url("https://elwiki.net/wiki/images/c/cc/Asset_-_Header_%28Dark%29.png"); | ||
} | } | ||
.dark-mode .oo-ui-icon-stop, | |||
. | .dark-mode .mw-ui-icon-stop:before, | ||
.dark-mode div#mw-input-wpecho-subscriptions .oo-ui-checkboxInputWidget-checkIcon, | |||
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-last.oo-ui-image-progressive, | |||
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-next.oo-ui-image-progressive, | |||
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-previous.oo-ui-image-progressive, | |||
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-first.oo-ui-image-progressive, | |||
.dark-mode | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive | |||
> .oo-ui-buttonElement-button, | |||
.dark-mode | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive | |||
> .oo-ui-buttonElement-button | |||
span.oo-ui-labelElement-label, | |||
.dark-mode .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, | |||
.dark-mode | |||
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonInputWidget, | |||
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-check.oo-ui-image-success, | |||
.dark-mode span.oo-ui-iconElement-icon.oo-ui-image-invert.oo-ui-icon-pushPin { | |||
filter: invert(0) !important; | |||
} | |||
.dark-mode #mw-indicator-mw-helplink a { | |||
color: black; | |||
font-weight: 500; | |||
} | } | ||
.dark-mode .mw-plusminus-pos { | |||
. | color: #abff8e; | ||
} | } | ||
.dark-mode .mw-plusminus-neg { | |||
color: #ff6565; | |||
} | } | ||
.dark-mode .autocomment, | |||
.dark-mode .autocomment a, | |||
.dark-mode .autocomment a:visited { | |||
color: #b6bdc4; | |||
} | } | ||
.dark-mode code { | |||
# | background-color: var(--theme-tone-4); | ||
color: #a4ff4f; | |||
border-color: var(--border-color-tone-2); | |||
} | } | ||
.client-js .dark-mode .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), | |||
. | .dark-mode .jquery-tablesorter th.headerSort { | ||
background-image: url("/svg/sort-white.svg"); | |||
} | } | ||
.dark-mode .jquery-tablesorter th.headerSortDown { | |||
. | background-image: url("/svg/sort-white-down.svg"); | ||
} | } | ||
.dark-mode .jquery-tablesorter th.headerSortUp { | |||
background-image: url("/svg/sort-white-up.svg"); | |||
background: | |||
} | } | ||
.dark-mode .oo-ui-pendingElement-pending { | |||
. | background-color: var(--theme-tone-6); | ||
background-image: linear-gradient( | |||
135deg, | |||
var(--theme-tone-8) 25%, | |||
transparent 25%, | |||
transparent 50%, | |||
var(--theme-tone-8) 50%, | |||
var(--theme-tone-8) 75%, | |||
transparent 75%, | |||
transparent | |||
); | |||
} | |||
.dark-mode .mw-echo-ui-notificationsInboxWidget-toolbarWrapper { | |||
box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.1); | |||
} | |||
.dark-mode #mw-createaccount-join { | |||
background-color: var(--theme-tone-4); | |||
color: var(--text-color); | |||
border-color: var(--border-color-tone-2); | |||
} | } | ||
.dark-mode #mw-createaccount-join:hover { | |||
. | |||
background-color: var(--theme-tone-7); | background-color: var(--theme-tone-7); | ||
border-color: var(--border-color-tone-2); | |||
} | } | ||
.dark-mode #searchInput { | |||
background-color: var(--theme-tone-4); | |||
background: var(-- | |||
} | } | ||
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge:focus:after, | |||
#pt-notifications-notice .mw-echo-notifications-badge:focus:after { | |||
. | border-color: #fff; | ||
} | } | ||
.dark-mode .wikiEditor-ui ::-webkit-resizer, | |||
. | .dark-mode textarea::-webkit-resizer { | ||
border-color: var(--border-color) | border-width: 8px; | ||
border-style: solid; | |||
border-color: var(--theme-tone-6) var(--border-color-tone-2) var(--border-color-tone-2) var(--theme-tone-6); | |||
} | } | ||
.dark-mode .wikiEditor-ui .sections ::-webkit-resizer { | |||
border-color: var(--theme-tone-7) var(--border-color-tone-2) var(--border-color-tone-2) var(--theme-tone-7); | |||
. | |||
} | } | ||
. | .dark-mode .filehistory a img, | ||
.dark-mode #file img:hover { | |||
background: var(--theme-tone-7) | |||
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKklEQVQokWPU09NjwAYsLS2xijNhFcUDRjUQA1hwhffx48epY8OoBmIAADF+BFc0Ips+AAAAAElFTkSuQmCC"); | |||
. | |||
background | |||
} | } | ||
/* | /* Char colors */ | ||
. | .charlight-Elsword, | ||
.colortable-Elsword th { | |||
background-color: #ff7171; | |||
} | } | ||
.charlight-Aisha, | |||
.colortable-Aisha th { | |||
background-color: #f19af7; | |||
} | } | ||
. | .charlight-Rena, | ||
background- | .colortable-Rena th { | ||
background-color: #90ee90; | |||
} | } | ||
. | .charlight-Raven, | ||
. | .colortable-Raven th { | ||
background- | background-color: #b2b2b2; | ||
} | } | ||
. | .charlight-Eve, | ||
background- | .colortable-Eve th { | ||
background-color: #ffb2c5; | |||
} | } | ||
. | .charlight-Chung, | ||
background- | .colortable-Chung th { | ||
background-color: #b1d9ff; | |||
} | } | ||
. | .charlight-Ara, | ||
background-color: | .colortable-Ara th { | ||
background-color: #f7b653; | |||
} | } | ||
. | .charlight-Elesis, | ||
.colortable-Elesis th { | |||
background-color: #e78888; | |||
} | } | ||
. | .charlight-Add, | ||
background-color: | .colortable-Add th { | ||
background-color: #bca9f5; | |||
} | } | ||
. | .charlight-LuCiel, | ||
background-color: | .colortable-LuCiel th, | ||
.colortable-Lu\/Ciel th { | |||
background-color: #90b1e6; | |||
} | } | ||
. | .charlight-Rose, | ||
background-color: | .colortable-Rose th { | ||
background-color: #f2e46f; | |||
} | } | ||
. | .charlight-Ain, | ||
.colortable-Ain th { | |||
background-color: #50eeb9; | |||
} | } | ||
. | .colortable-Laby th { | ||
background-color: #ff99d6; | |||
} | } | ||
. | .colortable-Nisha th { | ||
background-color: #9ea3e5; | |||
} | } | ||
. | .charlight-Noah, | ||
. | .colortable-Noah th { | ||
background | background-color: #9ca2c5; | ||
} | } |