MediaWiki:Fandomdesktop.css: Difference between revisions
ReinDevildom (talk | contribs) No edit summary |
ReinDevildom (talk | contribs) No edit summary |
||
| Line 46: | Line 46: | ||
border-bottom: 1px solid var(--theme-color-4); | border-bottom: 1px solid var(--theme-color-4); | ||
border-radius: 3px; | border-radius: 3px; | ||
} | |||
/* TOC hide headings */ | |||
.toclimit-2 .toclevel-1 ul, | |||
.toclimit-3 .toclevel-2 ul, | |||
.toclimit-4 .toclevel-3 ul, | |||
.toclimit-5 .toclevel-4 ul, | |||
.toclimit-6 .toclevel-5 ul, | |||
.toclimit-7 .toclevel-6 ul { display: none; } | |||
.mobileHide, .mobile-only, .no-desktop { display: none; } | |||
.no-border { border: none !important; } | |||
.no-wrap { white-space: nowrap; } | |||
.align-right { text-align: right; } | |||
.align-center { text-align: center; } | |||
.align-left { text-align: left; } | |||
.cont-inline-block { display: inline-block; } | |||
.cont-flex { display: flex; flex-wrap: wrap; } | |||
.cont-inline-flex { display: inline-flex; flex-wrap: wrap; } | |||
/* Hatnote styling */ | |||
.hatnote { | |||
border-left: 3px solid var(--theme-accent-color); | |||
padding: 3px 10px; | |||
border-radius: 3px; | |||
background: linear-gradient(145deg, rgba(var(--theme-accent-color--rgb),0.15) 0%, rgba(var(--theme-accent-color--rgb),0) 100%); | |||
margin: 5px 0; | |||
} | |||
/* Description list in table */ | |||
.page-content table dl { margin: 0; } | |||
/* No highlight for custom collapsible toggle buttons */ | |||
.wds-button.mw-customtoggle { user-select: none; } | |||
/* Making paragraphs more apparent by incresing line height */ | |||
.mw-parser-output p { | |||
margin-top: 0.8em; | |||
margin-bottom: 0.8em; | |||
} | |||
/* Column template fix */ | |||
.page-content .columntemplate ul, | |||
.page-content .columntemplate ol { margin: 0 0 0 30px; } | |||
.page-content .columntemplate { margin: 6px 0 6px 0; } | |||
/* Reduce bottom margin of lists */ | |||
.mw-parser-output ol, .mw-parser-output ul { margin: 6px 0 6px 36px; } | |||
/* inline unordered list seperated by pipe */ | |||
.mw-content-ltr ul.pipe_delimit { margin: 0px; } | |||
.mw-content-ltr ul.pipe_delimit li { display:inline; } | |||
.mw-content-ltr ul.pipe_delimit li + li::before { content: " | "; } | |||
/* CSS for Discord.js */ | |||
.widget-body { display: none; } | |||
.discord-widget-container { height: 125px; } | |||
.main-page-tag-rcs .discord-widget-container { | |||
margin: 0 0 10px 0; | |||
width: 290px; | |||
} | |||
.discord-widget .widget-header { background-color: var(--theme-accent-color); } | |||
.discord-widget .widget-footer { | |||
background-color: var(--theme-page-background-color); | |||
box-shadow: none; | |||
}; | |||
.discord-widget .widget-theme-light .widget-btn-connect { | |||
background-color: var(--theme-link-color); | |||
color: var(--theme-body-text-color); | |||
border: none; | |||
} | |||
.navtabs * { width: 100% } | |||
/* For [[Template:Tutorial]] */ | |||
.tutorial dd { margin-left: 0; } | |||
.tutorial .tutorial-detail { | |||
display: flex; | |||
gap: 4px; | |||
align-items: flex-start; | |||
margin: 10px 0; | |||
} | |||
.tutorial .tutorial-detail > a.image { overflow: visible !important; } | |||
.tutorial .tutorial-detail > a.new { | |||
flex: 0 0 200px; | |||
height: 110px; | |||
background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png); | |||
background-size: contain; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
font-size: 0; | |||
} | |||
.page-content .dialogue .tutorial dt { | |||
font-weight: 700; | |||
font-style: inherit; | |||
font-size: inherit; | |||
} | |||
/* [[Template:Fairuse]] */ | |||
.skin-fandomdesktop .fairuse { border-collapse: collapse; } | |||
.skin-fandomdesktop .fairuse th { | |||
background: #e4c179; | |||
text-transform: uppercase; | |||
color: #1a1d23; | |||
text-align: center; | |||
} | |||
.skin-fandomdesktop .fairuse td, | |||
.skin-fandomdesktop .fairuse tr { border: 1px solid var(--theme-border-color); } | |||
.skin-fandomdesktop .fairuse tr:nth-child(2) td { padding: 0.5em 1em; } | |||
.skin-fandomdesktop .fairuse tr:nth-child(3) td { | |||
padding: 1em; | |||
font-size: 0.8em; | |||
} | |||
.skin-fandomdesktop .fairuse .fairuse-disclaimer { | |||
display: inline-block; | |||
background: #e4c179; | |||
color: #1a1d23; | |||
padding: 0 5px; | |||
margin-right: 5px; | |||
} | |||
/* nowrap for nth child (add as we go) */ | |||
.nowrap-1 td:nth-child(1), | |||
.nowrap-2 td:nth-child(2), | |||
.nowrap-3 td:nth-child(3) { white-space: pre; } | |||
hr { | |||
margin: 5px 0; | |||
border: none; | |||
height: 1px; | |||
color: var(--theme-border-color); | |||
background-color: var(--theme-border-color); | |||
} | |||
/* Template:Description Sibling margin */ | |||
.description-wrapper + .description-wrapper { margin-top: 1em; } | |||
/* LoopPreview label */ | |||
.preview-right { margin: 5px; } | |||
.looppreview-hover-preference, | |||
.looppreview-hover-label { | |||
padding: 0 5px; | |||
margin-bottom: -5px; | |||
} | |||
.autoplay-looppreview .looppreview-hover-label { display: none; } | |||
/* Class for resizing images to fit the parent */ | |||
.fit-image img { | |||
width: 100%; | |||
height: auto; | |||
} | |||
/* Styling for <templatedata> parameter and alias */ | |||
.mw-templatedata-doc-param-name code { | |||
background-color: var(--theme-page-background-color--secondary); | |||
border-radius: 2px; | |||
padding: 1px 4px; | |||
} | |||
/* Styling for <templatedata> Suggested values */ | |||
.mw-templatedata-doc-params td dd code { | |||
display: list-item; | |||
width: fit-content; | |||
line-height: 18px; | |||
} | |||
/* Styling for <templatedata> edit header, brackets, and formatting */ | |||
.mw-templatedata-doc-params caption { | |||
margin: 0.2em 0.4em; | |||
.mw-templatedata-caption { | |||
font-size: 1.2em; | |||
font-weight: bold; | |||
.mw-editsection-like { | |||
font-size: small; | |||
font-weight: normal; | |||
margin-left: 8px; | |||
.mw-editsection-bracket { | |||
display: inline; | |||
} | |||
} | |||
} | |||
p { | |||
.oo-ui-widget { | |||
display: none; | |||
} | |||
.mw-templatedata-format { | |||
margin-left: 0; | |||
} | |||
} | |||
} | |||
/* For [[Template:Change History]] */ | |||
.change-history-header { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 88%; | |||
margin: 0.3em 0; | |||
} | |||
.change-history-content { | |||
overflow: auto; | |||
max-height: 330px; | |||
padding: 0.5em; | |||
box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
-moz-border-radius-topleft: 0.5em; | |||
background: transparent; | |||
border-radius: 4px; | |||
hr + p { | |||
margin-block: 0; | |||
} | |||
} | |||
/* Styling for mw-newarticletext in edit menu and Visual Editor Notices popup. */ | |||
.mw-newarticletext ul.pipe_delimit, .ve-ui-mwNoticesPopupTool-popup ul.pipe_delimit { margin: 0px } | |||
.mw-newarticletext ul.pipe_delimit li, .ve-ui-mwNoticesPopupTool-popup ul.pipe_delimit li { display: inline } | |||
.mw-newarticletext ul.pipe_delimit li + li::before, .ve-ui-mwNoticesPopupTool-popup ul.pipe_delimit li + li::before { content: " | " } | |||
/*** FandomDesktop specific fixes ***/ | |||
.page__main { line-height: 1.5; } | |||
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 { margin: .5em 0 .2em; } | |||
.page-content p+p { margin-top: 0.8em; } | |||
.page-content dl { margin: 12px 0 6px; } | |||
.wds-text-card, .wds-widget-frame .alice-carousel__arrow { background-color: var(--pi-tabber-bg-color); } | |||
.theme-fandomdesktop-dark .wds-widget-frame .alice-carousel__arrow:hover{ background-color: var(--theme-color-8); } | |||
.wds-text-card .wds-text-card__title { color: var(--theme-link-color); } | |||
.wds-text-card .wds-text-card__title:hover { color: var(--theme-link-color--hover); } | |||
/* Don't cut off long names */ | |||
.fandom-community-header__local-navigation .wds-dropdown__content { max-width: inherit; } | |||
.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content { max-width: inherit; } | |||
/* Math in Dark Theme */ | |||
.theme-fandomdesktop-dark .mwe-math-fallback-image-inline, | |||
.theme-fandomdesktop-dark .mwe-math-fallback-image-display { filter: hue-rotate(180deg) invert(1); } | |||
/* fix class -> classname new */ | |||
a[classname="new"] { color: #ba0000; } | |||
/* non-decimal reference numbering labels */ | |||
.references-marker-upper-alpha ol.references { list-style-type: upper-alpha; } | |||
.references-marker-lower-alpha ol.references { list-style-type: lower-alpha; } | |||
/* fix reference target background color */ | |||
.theme-fandomdesktop-dark ol.references li:target, .theme-fandomdesktop-dark sup.reference:target { background-color: #282828; } | |||
.theme-fandomdesktop-light ol.references li:target, .theme-fandomdesktop-dark sup.reference:target { background-color: #eaf3ff; } | |||
/* fix refs so they don't break in new columns when more than one line */ | |||
:is(.references-small, .columntemplate) :is(li, dd) { break-inside: avoid-column; } | |||
/* padding between references in list */ | |||
.references > li:not(:first-child) { margin-top: 5px; } | |||
/* format code */ | |||
code, .custom-formatting-code:not(.custom-formatting-plain) { | |||
background-color: var(--theme-page-background-color--secondary); | |||
border: 1px solid var(--theme-border-color); | |||
border-radius: 2px; | |||
padding: 1px 4px; | |||
font-family: monospace; | |||
} | |||
/* For [[Module:Formatting]] */ | |||
.custom-formatting-code { | |||
display: inline-block; | |||
line-height: 21px; | |||
} | |||
.custom-formatting-code.code-block-table { display: table; } | |||
span.variable { opacity: 0.65; } | |||
span.variable::after { | |||
opacity: 0.65; | |||
content: ">"; | |||
} | |||
span.variable::before { | |||
opacity: 0.65; | |||
content: "<"; | |||
} | |||
.custom-formatting-nested { display: none; } | |||
.custom-formatting-resulting { display: inline; } | |||
.custom-formatting-code .custom-formatting-nested { display: inline-block; } | |||
.custom-formatting-code .custom-formatting-resulting { display: none; } | |||
/* End for [[Module:Formatting]] */ | |||
/* Fixing sortable arrow icons in tables using "article-table fandom-table sortable" classes */ | |||
.article-table.fandom-table.jquery-tablesorter th.headerSort.headerSortUp::before, | |||
.article-table.fandom-table.jquery-tablesorter th:not(.headerSortUp).headerSort::before { content: none; } | |||
.article-table.fandom-table.jquery-tablesorter th.headerSort.headerSortDown::before, | |||
.article-table.fandom-table.jquery-tablesorter th:not(.headerSortUp).headerSort::after { | |||
clip-path: none; | |||
-webkit-clip-path: none | |||
} | |||
.article-table.fandom-table.jquery-tablesorter th.headerSort.headerSortUp::after { display: flex } | |||
.article-table.fandom-table.jquery-tablesorter th.headerSort::after, | |||
.article-table.fandom-table.jquery-tablesorter th.headerSort::before { right: 0 } | |||
/* Temporary fix to gallery */ | |||
div.wikia-gallery > div.wikia-gallery-caption{ display: none } | |||
/* [[Template:Description]] styles */ | |||
div.description-wrapper { | |||
border: 1px solid var(--border-color); | |||
overflow: hidden; | |||
border-radius: 8px; | |||
background: #bf8c4015; | |||
} | |||
div.description-content { | |||
font-size: 15px; | |||
text-align: left; | |||
overflow: auto; | |||
line-height: 1.35em; | |||
padding: 12px 12px 12px 12px; | |||
} | |||
div.description-source { | |||
font-size: 15px; | |||
overflow: auto; | |||
padding: 5px 12px; | |||
} | |||
hr.description-separator { | |||
width: 97.5%; | |||
margin: auto; | |||
} | |||
div.description-title { | |||
font-size: 15px; | |||
text-align: left; | |||
overflow: auto; | |||
padding: 10px 12px 6px; | |||
} | |||
/* Class to add text hidden from view that is usable by screen readers */ | |||
.screen-reader-text { font-size: 0; } | |||
/* Remove coloring on parameter aliases on template data as it makes text hard to read */ | |||
.mw-templatedata-doc-param-alias { color: inherit; } | |||
/* Avoid tabs from going off-screen and needing horizontal scrooling */ | |||
body > .main-container .wds-tabs__wrapper { | |||
display: flex; | |||
flex-direction: row; | |||
width: 100%; | |||
flex-wrap: wrap; | |||
margin-left: 0 !important; | |||
} | |||
/* Allow horizontal scrolling of in-tabber content */ | |||
body > .main-container .wds-tabber > .wds-is-current { overflow: auto clip; } | |||
/* Temp fix until fandom fixes Recent Images */ | |||
.recentImage__details-title { color: var(--theme-page-text-color); } | |||
/* Hide "add categories" button at bottom of article */ | |||
nav#articleCategories ul.categories button#CategorySelectAdd { display: none; } | |||
/* Custom class to artifically trigger link hover css */ | |||
a.link-focused { | |||
color: var(--theme-link-color--hover); | |||
text-decoration: underline; | |||
} | |||
/* Override default class for reference lists to avoid unwanted columns and spacing */ | |||
.mw-references-columns { | |||
column-width: auto; | |||
margin-top: 0; | |||
} | |||
/* MediaWiki:Edittools styling */ | |||
.edittools-list { | |||
display: flex; | |||
flex-direction: row; | |||
flex-wrap: wrap; | |||
gap: 3px; | |||
} | |||
.edittools-list > code { | |||
display: flex; | |||
gap: 2px; | |||
} | |||
.edittools-list div.mw-collapsible { | |||
padding: 0; | |||
display: inline; | |||
} | |||
.edittools-list span.mw-collapsible-toggle { padding: 0 3px; } | |||
.edittools-wrapper { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 5px; | |||
border: 1px solid var(--border-color); | |||
border-radius: 3px; | |||
padding: 8px; | |||
font-size: small | |||
} | |||
#edittools-description { | |||
margin-top: 1em; | |||
margin-bottom: 0.7em; | |||
} | |||
/* Hide file metadata at the bottom of file pages */ | |||
h2#metadata, | |||
div.mw-imagepage-section-metadata { display: none; } | |||
/* For [[Template:Event Countdown]] */ | |||
.eventcountdown { | |||
display: flex; | |||
flex-flow: row nowrap; | |||
justify-content: space-around; | |||
text-align: center; | |||
gap: 5px; | |||
margin-bottom: 10px; | |||
} | |||
.eventcountdown .eventcountdown-region { | |||
width: 100%; | |||
border-radius: 5px; | |||
background-color: var(--theme-page-background-color--secondary); | |||
padding: 7px; | |||
} | |||
.eventcountdown .eventcountdown-region .eventcountdown-region-text { | |||
color: var(--theme-accent-color); | |||
font-weight: 700; | |||
} | |||
.eventcountdown .eventcountdown-region hr { border-color: var(--theme-accent-color); } | |||
/* End of [[Template:Event Countdown]] */ | |||
/* Fix ugly math padding */ | |||
.mwe-math-fallback-image-inline { padding: 0 } | |||
/* Remove 0-value modules from [[Special:Community]] */ | |||
.community-page-cards-module { display: none; } | |||
/* Avoid countdown dancing */ | |||
@media only screen and (max-width: 900px) { | |||
.skin-fandomdesktop td > :is(.gi-countdown-Asia, .gi-countdown-EU, .gi-countdown-NA) .countdown { | |||
display: flex !important; | |||
flex-direction: column; | |||
} | |||
} | |||
/* Fix search and replace colors in CM */ | |||
.skin-fandomdesktop .cm-editor .cm-panels .cm-textfield { | |||
color: var(--theme-page-text-color); | |||
background: var(--theme-page-background-color); | |||
border: none; | |||
} | |||
/* Fix line height in editor */ | |||
.skin-fandomdesktop .cm-editor .cm-scroller {line-height: 21px;} | |||
/* For [[T:TOC Right]] and [[T:TOC Limit]] */ | |||
.toc-right { | |||
clear: right; | |||
margin: -1em 0 0 10px; | |||
float: right; | |||
padding: 0; | |||
background: transparent; | |||
max-width: 270px; | |||
} | |||
/* No ellipsing of long text in local nav */ | |||
.skin-fandomdesktop .fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a > span { | |||
overflow: auto; | |||
text-overflow: unset; | |||
-webkit-line-clamp: unset; | |||
} | } | ||