No edit summary |
No edit summary |
||
Line 1,525: | Line 1,525: | ||
} | } | ||
div.dtsp-searchPane div.dt-container, div.dtsp-searchPane div.dataTables_wrapper { | div.dtsp-searchPane div.dt-container, div.dtsp-searchPane div.dataTables_wrapper { | ||
border: var(--tmw-pink-border); | border: var(--tmw-pink-border) !important; | ||
border-radius: var(--tmw-default-radius); | border-radius: var(--tmw-default-radius) !important; | ||
} | } | ||
/*Page specific modifications*/ | /*Page specific modifications*/ |
Revision as of 17:17, 19 February 2024
/* All CSS here will be loaded for users of the Timeless skin */ /* Fonts */ @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); @import url("https://fonts.googleapis.com/css?family=VT323&display=swap"); /*Variables*/ :root { --tmw-pink: hsl(335, 94%, 53%); --tmw-purple: rgb(192 14 171 / 75%); --tmw-blue: hsl(194, 100%, 50%); --tmw-white: ghostwhite; --tmw-bg-gradient: radial-gradient(hsl(205, 88%, 12%), black 200%); --tmw-bg-gradient-dark: radial-gradient(hsl(208, 100%, 12%), black 100%); --tmw-after-gradient: repeating-linear-gradient(0deg, rgba(0, 128, 255, 0), rgba(0, 128, 255, 0.1) 4px, rgba(0, 128, 255, 0.1) 4px, rgba(0, 128, 255, 0) 7px); --tmw-table-gradient: radial-gradient(hsl(205, 100%, 6%), black 200%); --tmw-blue-shadow: 0 0 5px var(--tmw-blue), inset 0 0 5px var(--tmw-blue); --tmw-pink-shadow: 0 0 14px var(--tmw-purple), inset 0 0 14px var(--tmw-pink); --tmw-blue-border: 1px solid var(--tmw-blue); --tmw-pink-border: 1px solid var(--tmw-pink); --tmw-default-radius: 15px; } /*Generic style templates*/ .tmw-pink-box { border: var(--tmw-pink-border); border-radius: var(--tmw-default-radius); background: var(--tmw-bg-gradient-dark); box-shadow: var(--tmw-pink-shadow); padding: 1em; } .tmw-blue-box { border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); background: var(--tmw-bg-gradient-dark); box-shadow: var(--tmw-blue-shadow); padding: 1em; } /* Scrollbar/selection pseudoelement modifications */ ::selection { background: var(--tmw-pink); } ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-thumb { background-color: var(--tmw-pink); border-radius: var(--tmw-default-radius); border: 1px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { margin: 10px; } .mw-mmv-lightbox-open::-webkit-scrollbar { background: inherit; } /*General body/interface modifications*/ html { background: var(--tmw-bg-gradient-dark); } figure { margin: 0; } #mw-header-container { background: inherit; position: relative; } #mw-header-hack { display: none; } #mw-content-container { background: inherit; border-bottom: none !important; margin-top: inherit; } #mw-content { background: var(--tmw-bg-gradient); border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-blue-shadow); } #mw-header-nav-hack { display: none; } body { background: var(--tmw-bg-gradient-dark); font: 0.8125rem/1.25rem monospace; text-shadow: 0 0 5px var(--tmw-pink); color: var(--tmw-white) !important; } body::after { content: ""; position: fixed; top: 0; left: 0; margin: 0; width: 100vw; height: 100vh; background: var(--tmw-after-gradient); pointer-events: none; } .mw-body { word-wrap: unset; } #bodyContentOuter { z-index: unset; } p, li, dd { text-wrap: pretty; } .poem p { letter-spacing: -1px; } p:empty { display: none; } /*Buttons styling*/ .oo-ui-buttonElement-button { border: 0 !important; box-shadow: none !important; background: inherit !important; color: var(--tmw-pink) !important; } .oo-ui-buttonElement-button:hover { color: var(--tmw-blue) !important; } /*Source editor*/ .editOptions { background: inherit !important; border: 0 !important; color: inherit; } .oo-ui-messageDialog-message { color: inherit; } .oo-ui-messageDialog-title { color: inherit; } .oo-ui-messageDialog-content > .oo-ui-window-foot { outline: var(--tmw-blue-border); } .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { border-right: var(--tmw-blue-border); } /*Popup windows*/ .oo-ui-window-frame { background: var(--tmw-bg-gradient) !important; border-radius: var(--tmw-default-radius) !important; border: var(--tmw-blue-border) !important; box-shadow: var(--tmw-blue-shadow) !important; } .oo-ui-window-frame::after { content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .oo-ui-icon-close, .mw-ui-icon-close:before { background-image: url(/images/e/ee/Pink-x.svg); } .oo-ui-processDialog-content .oo-ui-window-head, .oo-ui-processDialog-content .oo-ui-window-foot { outline: none; } .oo-ui-processDialog-content .oo-ui-window-head { border-bottom: var(--tmw-blue-border); } .ve-ui-mwTwoPaneTransclusionDialogLayout > .oo-ui-menuLayout-menu { border-right: var(--tmw-blue-border); } .ve-ui-mwTemplatePage-description { color: var(--tmw-white); } .ve-ui-mwTransclusionOutlineTemplateWidget-sticky { background: inherit; position: relative; } .ve-ui-overlay { font-family: inherit; } .ve-ui-expandableContent-collapsible { height: unset !important; } .ve-ui-expandableContent-container { display: none; } .ve-ui-mwParameterPage-doc-required, .ve-ui-mwParameterPage-doc-deprecated, .ve-ui-mwParameterPage-inlineDescription .ve-ui-mwParameterPage-doc-example { color: inherit; } .ve-ui-mwSaveDialog-license { color: inherit; } .ve-ui-mwSaveDialog-options { background: inherit; border: 0; } /*Messages (such as notices on file upload page)*/ .oo-ui-messageWidget.oo-ui-messageWidget-block { background: inherit !important; border: 0; } /*Drop files here target on file upload*/ .oo-ui-selectFileWidget-dropTarget { background: var(--tmw-bg-gradient-dark); border: var(--tmw-pink-border); box-shadow: var(--tmw-pink-shadow); border-radius: var(--tmw-default-radius); } /*Initial prompt on file upload*/ .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget { background: var(--tmw-bg-gradient-dark); border: var(--tmw-pink-border) !important; box-shadow: var(--tmw-pink-shadow); border-radius: var(--tmw-default-radius); } /*Thumbnails on copyright attribution page*/ #mwe-upwiz-deeds-thumbnails { background: inherit; } /*Screen effect*/ @media (min-width: 1100px) { #mw-content { height: calc(100vh - 165px); overflow-y: auto; } } @media (850px < width < 1100px) { #mw-content { height: calc(100vh - 130px); overflow-y: auto; } } @media (max-width: 850px) { #mw-content-block { background: inherit; } #bodyContent { padding: 0 1em; } #content-bottom-stuff { display: none; } #mw-content { height: calc(100dvh - 96px); overflow-y: auto; } } /*Fix visual editor toolbar with screen effect*/ .ve-init-mw-desktopArticleTarget { container-type: inline-size; } .ve-init-mw-desktopArticleTarget-toolbar { position: sticky; width: 100cqw; top: 1cqh; z-index: 2; } /*Remove Atom RSS link on history pages*/ #feedlinks { display: none; } /*Footer/category list modifications*/ /* Remove footer */ #mw-footer-container { display: none; } /*Always show categories as links below article, never on sidebar*/ #catlinks { display: block !important; } #catlinks-sidebar { display: none; } /*Link styling*/ a { color: var(--tmw-blue); } a:hover { color: var(--tmw-blue) !important; } a:visited { color: var(--tmw-blue); } a.external { word-wrap: break-word; } /*Links at top of page - Page, discussion, edit, edit source, history*/ .tools-inline li.selected a { color: var(--tmw-blue); } .tools-inline li.selected { border-bottom: none; } .tools-inline li { border-bottom: none; } /*Settings gear icon*/ .oo-ui-icon-settings, .mw-ui-icon-settings:before { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F81472' d='M20 14.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5 1.1c-.5-.3-1-.5-1.4-.6L13.5 5h-2.9l-.3 1.8c-.5.1-.9.3-1.4.6L7.4 6.3 5.3 8.4l1 1.5c-.3.5-.4.9-.6 1.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6 1.4l-1 1.5 2.1 2.1 1.5-1c.4.2.9.4 1.4.6l.3 1.8h3l.3-1.8c.5-.1.9-.3 1.4-.6l1.5 1.1 2.1-2.1-1.1-1.5c.3-.5.5-1 .6-1.4l1.5-.3zM12 16c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z'/%3E%3C/svg%3E") !important; } /*Sidebar/Navigation modifications*/ /*One-sided navigation menu*/ @media (min-width: 1100px) { #mw-content-block { display: block; } #mw-content, #content-bottom-stuff { margin-left: 14em; margin-right: 1em; } #mw-content { margin-top: 1em; } #mw-content-wrapper { float: right; margin-left: -14em; width: 100%; } #mw-related-navigation { width: 14em; padding: 0 1em 0 0; } /*fixed sidebar*/ #p-banner { display: none !important; } #mw-header-container { z-index: 2; } #mw-site-navigation { position: fixed; top: 0; z-index: 3; } #mw-site-navigation .sidebar-chunk { margin: 0; } #mw-related-navigation { position: fixed; top: 29em; z-index: 3; } #site-tools { margin-top: -25px !important; } #page-tools { margin: 1em 0 !important; } #p-templatescript-0-label { display: none; } #p-templatescript-0 .mw-portlet-body { position: fixed; top: 367px; display: none; } } @media screen and (max-width: 1099px) { .sidebar-inner { background: var(--tmw-bg-gradient) !important; border: var(--tmw-blue-border) !important; border-radius: var(--tmw-default-radius) !important; box-shadow: var(--tmw-blue-shadow) !important; } .sidebar-inner::after { content: "" !important; position: inherit !important; top: 0 !important; left: 0 !important; margin: 0 !important; width: 100% !important; height: 100% !important; background: var(--tmw-after-gradient) !important; pointer-events: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; } .sidebar-inner::before { content: none !important; } #mw-site-navigation .sidebar-chunk h2 span:before, #mw-site-navigation .sidebar-chunk h2 span:after { content: none !important; } #p-banner { position: relative; } } @media (850px < width < 1100px) { #p-banner { left: -0.8em; } #mw-content-container { margin-top: -2.7em; } .sidebar-inner { top: 2.5em !important; } #content-bottom-stuff { display: none; } } @media screen and (max-width: 850px) { #user-tools h2, .sidebar-chunk h2 { top: 0.5em; } #site-navigation h2 { right: 3em; left: initial; background-size: 85%; } #site-tools { display: none; } #p-logo-text { left: initial; } #site-navigation .sidebar-inner { right: 0; left: initial; } } #t-cite { display: none; } #p-pagemisc { display: none; } .sidebar-chunk { background: inherit !important; border: 0 !important; box-shadow: none !important; } #mw-site-navigation h3, #mw-related-navigation h3 { text-shadow: 2px 0 var(--tmw-purple); } .sidebar-chunk h3 { font-size: 0.9em !important; border-bottom: var(--tmw-blue-border) !important; } /*Logo top left modifications*/ /*Make entire header logo linkable*/ #p-logo-text { max-width: 18em !important; } #p-logo img, #p-banner img { filter: drop-shadow(0px 3px 1px var(--tmw-purple)); } /* Search modifications*/ #simpleSearch { border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-blue-shadow); background: var(--tmw-bg-gradient); } #simpleSearch::after { content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } #searchInput { color: var(--tmw-white); border-radius: var(--tmw-default-radius); } ::placeholder { color: var(--tmw-white); } .suggestions { border-radius: var(--tmw-default-radius); border: var(--tmw-blue-border); box-shadow: var(--tmw-blue-shadow); } @media (min-width: 1100px) { .suggestions { margin-top: 12px; } } .suggestions:after { content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .suggestions-results { background-image: var(--tmw-bg-gradient); border: 0; } #searchInput:focus { outline: none; border: 3px solid var(--tmw-pink); border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-pink-shadow); } .suggestions .suggestions-result { color: var(--tmw-white); } .suggestions .suggestions-results { border: 0; } .suggestions-special { background-image: var(--tmw-bg-gradient); border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-top: var(--tmw-blue-border) !important; box-shadow: var(--tmw-blue-shadow); } .suggestions-special .special-label, .suggestions-special .special-query { color: var(--tmw-white); } .suggestions .suggestions-result-current { background-image: var(--tmw-bg-gradient-dark); } #searchButton, #mw-searchButton { background-size: 25px; } /*Search page search bar*/ .mw-search-form-wrapper input { border: var(--tmw-blue-border) !important; border-radius: var(--tmw-default-radius) !important; box-shadow: var(--tmw-blue-shadow) !important; background: var(--tmw-bg-gradient) !important; color: var(--tmw-white) !important; } .mw-search-form-wrapper input::after { content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .search-types .current a { color: var(--tmw-pink); } .oo-ui-icon-search, .mw-ui-icon-search:before { background-image: url(/skins/Timeless/resources/images/search-ltr.svg?bb2cf); } .oo-ui-icon-search { opacity: 1 !important; } #mw-indicator-mw-helplink a { background-image: url(/images/c/cc/HelpNotice.svg); } .oo-ui-indicator-clear { background-image: url(/images/1/10/Clear.svg); } .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { margin-left: 1em; } /*Username dropdown modifications*/ #personal .dropdown, .mw-mmv-dialog { background: var(--tmw-bg-gradient); border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-blue-shadow); } #personal .dropdown::after { content: ""; position: inherit; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; border-bottom: none; border-left: none; border-right: none; } #personal .dropdown::before { content: ""; border-bottom: none; border-left: none; border-right: none; } #personal h2 { background-size: 25px; } @media screen and (min-width: 1100px) { #personal-inner { margin-top: 12px !important; right: -0.6em !important; } #user-tools { min-width: 16em; } } @media screen and (min-width: 851px) { #personal { bottom: 0.5em; } #mw-header-container { padding: 1em 0 0; } } /*Template doc pages*/ .mw-parser-output .template-documentation { background: inherit !important; border: 0 !important; } .mw-parser-output .ombox { background: inherit !important; } /*Images/Captions modifications*/ .thumbcaption { font-weight: bold; text-wrap: balance; text-align: center !important; } .thumbinner > a { display: flex; justify-content: center; } .thumbimage { border: var(--tmw-pink-border) !important; border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-pink-shadow); padding: 1px; } .borderless-img-with-caption .thumbimage { border: 0 !important; box-shadow: none; } .thumbinner { position: relative; z-index: 95; background: none; border: 0; border-width: 0; } .mw-content-ltr .magnify { display: none; } @media screen and (max-width: 850px) { .thumbinner { max-width: 325px; } .thumb { margin: initial; } } /*File pages modifications*/ kbd { background: transparent !important; font-family: inherit !important; } ul#filetoc { background: transparent; border: none; padding: 0; display: inline; } .imbox-license { border: 0 !important; background-color: transparent !important; } .cp-wrapper { border: var(--tmw-pink-border); border-radius: var(--tmw-default-radius); padding: 1em; box-shadow: var(--tmw-pink-shadow); background-image: var(--tmw-bg-gradient-dark); } .filehistory td[dir="ltr"] { overflow-wrap: anywhere; } /*Infobox modifications*/ .infobox { box-shadow: var(--tmw-pink-shadow); border: var(--tmw-pink-border); border-spacing: 3px; background-image: var(--tmw-bg-gradient-dark); border-radius: var(--tmw-default-radius); margin: 0.5em 0 0.5em 1em; padding: 0.5em; float: right; clear: both; font-size: 88%; /*width: 24em;*/ width: min-content; line-height: 1.5em; & th { background: initial !important; } & .nowrap { white-space: nowrap; padding-right: 10px; } & :is(.infobox-above, .infobox-title, caption) { font-size: 125%; font-weight: bold; text-align: center; } & :is(.infobox-header,.infobox-subheader, .infobox-image, .infobox-full-data, .infobox-below) { text-align: center; } & :is(#youtube-outer, .video-outer) { width: 300px !important; height: 273px !important; } & .infobox-navbar { text-align: right; } & .mw-collapsible-toggle { float: none; } } .infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data, .infobox-below, .infobox-subheader, .infobox-image, .infobox-navbar, .infobox th, .infobox td { vertical-align: top; } .infobox-label, .infobox-data, .infobox th, .infobox td { text-align: left; } .infobox-below { text-align: left !important; } .infobox-title, .infobox caption { padding: 0.2em; } .hidden-content.mw-collapsible-content p { display: none; } .infobox-caption { text-wrap: balance; } /*Navbox modifications - used at the bottom of content pages*/ .navbox-inner { box-shadow: var(--tmw-pink-shadow); } .navbox-inner .fn.org { font-size: 100% !important; margin: 0 !important; } /*Headings modifications*/ h1, h2, h3, h4, h5, h6 { color: var(--tmw-pink); font-family: "Press Start 2P", monospace !important; text-shadow: 0.23rem 0 var(--tmw-purple); letter-spacing: -0.06rem; } .mw-body h2, .mw-body h3 { clear: left; } .mw-body :is(h2, h3, h4) { text-wrap: balance; } .mw-body .mw-parser-output h1:after, .mw-body .mw-parser-output h2:after { border-bottom: var(--tmw-blue-border) !important; } .firstHeading { overflow-wrap: break-word; border-bottom: var(--tmw-blue-border) !important; } .mw-body h2 { border-bottom: var(--tmw-blue-border); } @media screen and (max-width: 850px) { .firstHeading { text-align: center; overflow-wrap: anywhere; } h1 {font-size: 1.8rem !important;} h2 {font-size: 1.5rem !important;} h3 { font-size: 1.2rem !important;} h4, h5, h6 {font-size: 100% !important;} } /*Reference tooltips modifications - when hovering over a citation/Other reference stuff*/ .rt-settingsLink { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F81472' d='M20 14.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5 1.1c-.5-.3-1-.5-1.4-.6L13.5 5h-2.9l-.3 1.8c-.5.1-.9.3-1.4.6L7.4 6.3 5.3 8.4l1 1.5c-.3.5-.4.9-.6 1.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6 1.4l-1 1.5 2.1 2.1 1.5-1c.4.2.9.4 1.4.6l.3 1.8h3l.3-1.8c.5-.1.9-.3 1.4-.6l1.5 1.1 2.1-2.1-1.1-1.5c.3-.5.5-1 .6-1.4l1.5-.3zM12 16c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z'/%3E%3C/svg%3E"); } .rt-tooltip { background: var(--tmw-bg-gradient); border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); font-size: 14px; box-shadow: var(--tmw-blue-shadow); color: inherit; } .rt-tooltip::after { content: ""; position: inherit; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .rt-tooltipTail { display: none; } ol.references li:target, sup.reference:target { background-color: var(--tmw-pink); } ol.references > li { word-wrap: break-word; } cite > a, .mw-parser-output a.extiw, .mw-parser-output a.extiw:active, .mw-parser-output a.external { color: var(--tmw-blue) !important; } /*References section does not wrap around page content*/ h2:has(> #References) { clear: both; } /*Editing page/other editing stuff modifications*/ /*Style "edit/edit source" next to headings in pages*/ .mw-editsection { font: 13px/20px monospace !important; background-image: none; padding-left: 0; text-shadow: none; } /*Editing comparison page*/ .diff-addedline .diffchange { background: var(--tmw-pink); } .diff-context { background: var(--tmw-pink); border-color: var(--tmw-blue); color: inherit; } .mw-code { color: inherit; background: var(--tmw-bg-gradient-dark); box-shadow: var(--tmw-pink-shadow); border: var(--tmw-pink-border); border-radius: var(--tmw-default-radius); overflow-wrap: anywhere; } /*Source edit text box*/ #wpTextbox1 { background: black; color: white; } /*MWE popups modifications - when hovering over a link to another article*/ .mwe-popups { background: transparent; border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); } .mwe-popups-container { background: var(--tmw-bg-gradient-dark) !important; border: var(--tmw-blue-border); border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-blue-shadow); font-size: 14px; } .mwe-popups-container::after { content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .mwe-popups-extract:hover { color: var(--tmw-blue) !important; } .mwe-popups .mwe-popups-extract[dir="ltr"]:after { background-image: none !important; } .mwe-popups .mwe-popups-container { clip-path: none; } .mwe-popups.mwe-popups-is-not-tall .mwe-popups-thumbnail { border-top-left-radius: var(--tmw-default-radius); border-top-right-radius: var(--tmw-default-radius); width: 318px; z-index: 1; position: relative; } .mwe-popups.mwe-popups-is-tall .mwe-popups-discreet .mwe-popups-thumbnail { border-top-right-radius: var(--tmw-default-radius); border-bottom-right-radius: var(--tmw-default-radius); z-index: 1; position: relative; } .mwe-popups .mwe-popups-extract { color: var(--tmw-white); } /*Table of Contents (TOC) modifications*/ .toc { background: var(--tmw-bg-gradient) !important; border: var(--tmw-blue-border) !important; border-radius: var(--tmw-default-radius) !important; box-shadow: var(--tmw-blue-shadow) !important; } .mw-body .toctitle { border-bottom: var(--tmw-blue-border); } /*Tables modifications*/ th { background: var(--tmw-table-gradient) !important; } td { background-color: initial !important; } .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable { color: inherit !important; background: inherit !important; border: initial; } :is(.mw_metadata, .mw-datatable, .wikitable) > tr > th, :is(.mw_metadata, .mw-datatable, .wikitable) > tr > td, :is(.mw_metadata, .mw-datatable, .wikitable) > * > tr > th, :is(.mw_metadata, .mw-datatable, .wikitable) > * > tr > td { border: 1px solid hsl(335deg 89.24% 35.86%) !important; background: var(--tmw-table-gradient) !important; } .wikitable { background: unset; background-color: unset; color: unset; border: var(--tmw-pink-border); background-image: var(--tmw-table-gradient) !important; } .wikitable td :is(ul, ol, dl) { text-align: left; } .curved-table .wikitable { border-collapse: inherit !important; border-spacing: 0; border-radius: var(--tmw-default-radius); padding: 0; width: -webkit-fill-available; width: -moz-available; background: inherit !important; } .curved-table .wikitable ol { margin: 0.3em 0 0 2.2em; } .curved-table .wikitable li { margin-bottom: 0.1em; } .curved-table tbody { box-shadow: var(--tmw-pink-shadow) !important; border-radius: var(--tmw-default-radius) !important; } .scroll-left.overflowed .content-table-left, .scroll-right.overflowed .content-table-right { border-left: 0; } .toccolours th, .toccolours td { width: auto !important; vertical-align: middle !important; padding-right: 0 !important; border: var(--tmw-pink-border) !important; } .toccolours th { text-align: center !important; } .toccolours td { padding-left: 1em; } .toccolours { border: none !important; background: inherit !important; border-collapse: separate; background-image: var(--tmw-table-gradient) !important; border-radius: var(--tmw-default-radius); border-spacing: 0; padding: 0 !important; } .toccolours tbody{ box-shadow: var(--tmw-pink-shadow); border-radius: var(--tmw-default-radius); } #fileinfotpl_desc { border-top-left-radius: var(--tmw-default-radius); } #fileinfotpl_desc + td { border-top-right-radius: var(--tmw-default-radius); } .toccolours th:has(small) { border-bottom-left-radius: var(--tmw-default-radius); } .toccolours th:has(small) + td { border-bottom-right-radius: var(--tmw-default-radius); } .mw-body-content a > img, .mw-body-content .floatnone > img { position: relative; z-index: 1; } .chart-table tr:first-of-type th:first-of-type { border-top-left-radius: var(--tmw-default-radius); border-top-right-radius: var(--tmw-default-radius); } .chart-table tr:last-of-type td:first-of-type { border-bottom-left-radius: 10px; } .chart-table tr:last-of-type td:last-of-type { border-bottom-right-radius: 10px; } .filehistory { border-collapse: separate; border-radius: var(--tmw-default-radius); border-spacing: 0; padding: 0; & tbody { border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-pink-shadow); } & th:first-of-type { border-top-left-radius: var(--tmw-default-radius); } & th:last-of-type { border-top-right-radius: var(--tmw-default-radius); } & tr:last-of-type td:first-of-type { border-bottom-left-radius: var(--tmw-default-radius); } & tr:last-of-type td:last-of-type { border-bottom-right-radius: var(--tmw-default-radius); } } /*Image viewer modifications*/ .mw-mmv-post-image, .mw-mmv-image-metadata { color: inherit; background: var(--tmw-bg-gradient); border-top: var(--tmw-blue-border); } .mw-mmv-image-metadata-desc-column { width: 100%; } .mw-mmv-above-fold { border-top: var(--tmw-blue-border); } .mw-mmv-image-metadata-links-column { float: none; } .mw-mmv-credit, .mw-mmv-image-desc { color: inherit; } .mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: var(--tmw-pink); } .mw-mmv-post-image::after { content: ""; position: inherit; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } .mw-mmv-dialog-down-arrow { display: none; } .mw-mmv-options-dialog-header { color: var(--tmw-pink); } .mw-mmv-options-text-header, .mw-mmv-options-text-body, .mw-ui-button.mw-ui-quiet { color: inherit; } .mw-mmv-dialog .mw-mmv-dialog-warning, .mw-mmv-download-pane .mw-mmv-download-attribution { background-color: unset !important; } .mw-mmv-download-pane .mw-mmv-download-area { padding-bottom: 0; } .mw-mmv-options-dialog::after, .mw-mmv-reuse-dialog::after, .mw-mmv-download-dialog::after { content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: var(--tmw-after-gradient); pointer-events: none; } /*Tabber modifications*/ .tabber__tab, .tabber__tab:visited { color: var(--tmw-pink); } .tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited { color: var(--tmw-blue); } .tabber__indicator { background: none; } .tabber__header { box-shadow: none; border-bottom: var(--tmw-blue-border); } .tabber__header__next:after { background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z' style='fill: rgb(248, 20, 114);'/%3e%3c/svg%3e") !important; } .tabber__header__prev:after { background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 10l9 9 1.4-1.5L7 10l7.4-7.5L13 1z' style='fill: rgb(248, 20, 114);'/%3e%3c/svg%3e") !important; } .infobox-tabber .tabber__header { border-bottom: 0; } .infobox-tabber .infobox { width: -webkit-fill-available; width: -moz-available; } @media screen and (min-width: 851px) { .infobox-tabber .tabber { width: 25em; float: right; padding-left: 1em; } /* .infobox-tabber .tabber__header { width: 22em; margin-left: 15px; } */ } /*Bandcamp/Soundcloud/Youtube modifications*/ #bandcamp, #bandcamp-album { position: relative; z-index: 1; max-width: 300px; } .sc-wrapper { display: flex; justify-content: center; z-index: 1; position: relative; } #youtube-outer { background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 1%; background-image: url(/images/7/75/Television.png); width: 448px; height: 408px; position: relative; float: none; margin: 0 auto; margin-bottom: 1em; clear: both; z-index: 1; } @media screen and (max-width: 1400px) { #youtube-outer { width: 329px; height: 300px; } } .youtube-middle { border-radius: 3%; position: absolute; z-index: -1; top: 10%; left: 9%; background-color: transparent !important; width: 82%; height: 75%; } /*Tracklists modifications*/ .tracklist { border-collapse: collapse; } .tracklist-number-header { border-top-left-radius: var(--tmw-default-radius); } .tracklist-length-header { border-top-right-radius: var(--tmw-default-radius); } .tracklist-total-length th { border-bottom-left-radius: var(--tmw-default-radius); } .tracklist-total-length td { border-bottom-right-radius: var(--tmw-default-radius); } .tracklist caption { padding-bottom: 5px; } .tracklist th { background-color: inherit !important; background-image: inherit !important; } .tracklist tr { background-color: transparent !important; } .tracklist tr:nth-child(2n-1) { background-color: #052540 !important; } .tracklist tr.tracklist-total-length { background-image: none; } .tracklist-total-length th > span { background-color: transparent !important; } .tracklist tr:first-of-type, .tracklist tr:last-of-type, .tracklist-total-length td { background-color: #00000029 !important; } .tracklist tbody { border-radius: var(--tmw-default-radius); box-shadow: 0 0 0 2px #00000029; } /*Tour listing element - used on Live Performances page and a few other places*/ .tour-listing { display: flex; align-items: center; gap: 1em; padding: 1em; } @media screen and (max-width: 500px) { .tour-listing { flex-direction: column; } } /*Tour gallery/Poster gallery - used on tour/show pages*/ /* Tour gallery code */ #tour-gallery ul, .poster-gallery { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; gap: 35px; list-style-type: none; } /*Media group modifications - used for grouping song versions and media associated with song (videos)*/ .media-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); justify-items: center; gap: 1em; text-align: center; text-wrap: balance; } .media-group #bandcamp { max-width: none; } .media-group #bandcamp iframe { border: var(--tmw-pink-border) !important; border-radius: var(--tmw-default-radius); box-shadow: var(--tmw-pink-shadow); padding: 1px; } .media-group { & .video-wrapper { width: 330px; } & .video-outer { padding-bottom: 3em; } & video { width: 83% !important; top: 6% !important; } & > div { margin: 0; padding: 0; } } .music-wrapper { display: flex; flex-direction: column; align-items: center; } .music-wrapper p { margin: 0; } .music-wrapper .caption { font-weight: bold; } /*Merch gallery - styling and layout for gallery on Merchandise page*/ .merch-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); justify-items: center; } .merch-gallery .thumbcaption { width: 160px; } .merch-gallery .thumb { margin: 0 !important; padding: 0 !important; } .merch-gallery .thumbimage { box-shadow: var(--tmw-pink-shadow); max-height: 170px; aspect-ratio: 1 / 1; padding: 1em; margin: 0; object-fit: contain; } .merch-gallery .thumbinner { width: auto !important; z-index: initial; } .merch-gallery a { width: 160px; height: 160px; background: var(--tmw-bg-gradient-dark); border-radius: var(--tmw-default-radius); } /*Video element modifications*/ .video-wrapper { display: flex; flex-direction: column; align-items: center; } .video-outer { background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 1%; background-image: url(/images/7/75/Television.png); width: 100%; max-width: 500px; position: relative; float: none; clear: both; z-index: 1; aspect-ratio: 4 / 3; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; } .video-outer video { position: relative; width: 74%; background: black; top: -2%; border-radius: 3%; object-fit: fill; aspect-ratio: 4 / 3; } .video-outer video:fullscreen, .video-outer video:-webkit-full-screen { object-fit: contain !important; border-radius: 0; } .video-wrapper .caption { margin: 0; font-weight: bold } /*Semantic modifications*/ .smwb-theme-light .smwb-title, .smwb-theme-light .smwb-center, .smwb-theme-light .smwb-actions, .smwb-theme-light .smwb-prophead, .smwb-propvalue, .smwb-theme-light .smwb-propval, .smwb-ipropvalue { background-color: inherit; } .smwb-datasheet { border: var(--tmw-pink-border); border-radius: var(--tmw-default-radius); background: var(--tmw-bg-gradient-dark); box-shadow: var(--tmw-pink-shadow); padding: 1em; } .smwb-factbox { border-left: 0 !important; } .smwb-ifactbox { border-right: 0 !important; } .smwb-factbox .smwb-cell, .smwb-ifactbox .smwb-cell { border-top: var(--tmw-blue-border); } .smwb-bottom { border-bottom: var(--tmw-blue-border); } /*Data tables*/ table.dataTable { width: -webkit-fill-available !important; width: -moz-available !important; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: inherit; } .dataTable tr:last-of-type td:first-of-type { border-bottom-left-radius: 15px; } .dataTable tr:last-of-type td:last-of-type { border-bottom-right-radius: 15px; } .dataTables_wrapper .dataTables_length { padding-bottom: 1em; } .dataTables_wrapper .dataTables_filter { padding-bottom: 1em; } .dt-length option { color: black; } table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled, table.dataTable thead > tr > td.sorting_desc_disabled { padding: 0 0.3rem !important; font-size: clamp(10px, 12px, 14px); } table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td { text-align: center !important; } table.dataTable tbody th, table.dataTable tbody td { padding: 0 0.3rem !important; font-size: clamp(10px, 12px, 14px); } table.dataTable>thead>tr>th, table.dataTable>thead>tr>td { padding: 0 0.3rem !important; font-size: clamp(10px, 12px, 14px); } table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date { text-align: center !important; } table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before { margin-right: 0 !important; border-left: 0 !important; } table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order { right: 0.5rem !important; } div.dtsp-searchPane div.dt-container div.dt-scroll-body, div.dtsp-searchPane div.dt-container div.dataTables_scrollBody, div.dtsp-searchPane div.dataTables_wrapper div.dt-scroll-body, div.dtsp-searchPane div.dataTables_wrapper div.dataTables_scrollBody { background: inherit !important; } .dt-scroll-body tbody { box-shadow: none !important; } div.dtsp-searchPane div.dt-container, div.dtsp-searchPane div.dataTables_wrapper { border: var(--tmw-pink-border) !important; border-radius: var(--tmw-default-radius) !important; } /*Page specific modifications*/ /*Fade in animation for home page*/ /* .page-Home #content { animation: fadeInAnimation cubic-bezier(0.4, 0, 1, 1) 5s; animation-iteration-count: 1; animation-fill-mode: forwards; } */ @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } /*Hide categories on home page*/ .page-Home #catlinks { display: none !important; } /*Home page logo modifications*/ .wrapper { height: 150px; display: flex; align-items: center; justify-content: center; } .wrapper img { aspect-ratio: 347 / 145; max-width: 347px; width: 88% !important; height: revert !important; } .glow-logo { position: absolute; animation: imageBlinker 10s ease-in-out; /*opacity: 0.6;*/ filter: drop-shadow(0px 3px 20px rgb(192 14 170 / 85%)); } .sign-logo { position: absolute; filter: brightness(0.5); } @keyframes imageBlinker { 0% { opacity: 0; } 10% { opacity: 0.6; } 15% { opacity: 0; } 20% { opacity: 0.6; } 25% { opacity: 0; } 30% { opacity: 0.6; } 35% { opacity: 0.6; } 40% { opacity: 0.6; } 45% { opacity: 0; } 50% { opacity: 0.6; } 55% { opacity: 0.6; } 60% { opacity: 0; } 65% { opacity: 0.6; } 70% { opacity: 0; } 75% { opacity: 0.6; } 80% { opacity: 0.6; } 85% { opacity: 0.6; } 90% { opacity: 0; } 92% { opacity: 0.6; } 96% { opacity: 0; } 100% { opacity: 0.4; } } /* Front page logo animation - templatestyles rejected some of the rules, so placing here */ #monitor-out { position: relative; z-index: 1; width: 45%; float: left; margin: 0 0.5em 0.5em 0; padding: 0 1.5em 1em 0; } #monitor { position: relative; width: 100%; max-width: 400px; aspect-ratio: 450 / 440; border-radius: 1%; background: url(/images/b/bf/Monitor.png); background-size: contain; background-repeat: no-repeat; margin: 0 auto; } @media screen and (max-width: 850px) { #monitor-out { width: 100%; margin: 0; padding-bottom: 1em; } } .inner { display: flex; container-type: inline-size; position: relative; background-image: radial-gradient(hsl(223, 100%, 55%), black 120%); width: 100%; aspect-ratio: 450 / 440; border-radius: 3%; z-index: -1; } .inner::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--tmw-after-gradient); opacity: 0; z-index: 2; animation: flicker 0.15s infinite; } .scan-line { display: none; top: -100px; left: 0; right: 0; width: 100%; height: 100px; z-index: 8; background: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.2) 10%, rgba(0, 0, 0, 0.1) 100% ); opacity: 0.1; position: absolute; animation: scan-line 8s linear infinite; } .vline { top: 0; left: 0; right: 0; width: 100%; height: 100%; position: absolute; z-index: 4100; } .vline::before { content: ""; position: absolute; top: 0; width: 100%; height: 4px; background: hsl(0, 0%, 100%); background: -webkit-linear-gradient( to bottom, rgba(255, 0, 0, 0) 0%, rgba(255, 250, 250, 1) 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100% ); background: linear-gradient( to bottom, rgba(255, 0, 0, 0) 0%, rgba(255, 250, 250, 1) 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100% ); opacity: 0.2; animation: vline 8s linear infinite; } .vline::after { content: ""; top: 0; left: 0; right: 0; width: 100%; height: 4px; position: absolute; box-shadow: 0 2px 6px rgba(25, 25, 25, 0.2), inset 0 1px rgba(50, 50, 50, 0.1), inset 0 3px rgba(50, 50, 50, 0.05), inset 0 3px 8px rgba(64, 64, 64, 0.05), inset 0 -5px 10px rgba(25, 25, 25, 0.1); } .terminal { font-family: "VT323"; text-align: left; position: relative; margin: 0 auto; } .terminal h1 { font-family: "VT323" !important; font-size: 7cqi !important; top: 10%; border-right: 3px solid var(--tmw-pink); position: relative; overflow: hidden; white-space: nowrap; letter-spacing: 2px; box-sizing: border-box; animation: typing 8s steps(12, end) forwards, blink-cursor 0.8s step-end infinite; margin: 1.25em 0 0.5em !important; } .terminal h1::before, .terminal h1::after { content: attr(title); position: absolute; left: 0; } .computer-logo { position: absolute; left: 17%; top: 38%; width: 65%; height: 100%; background-image: url(/logo.svg); background-repeat: no-repeat; background-size: contain; animation: logo 8s linear; } @keyframes vline { 0% { top: 0; opacity: 0; } 79% { top: 0; opacity: 0; } 80% { top: 0; opacity: 0.2; } 99% { top: 100%; opacity: 0.2; } 100% { top: 100%; opacity: 0; } } @keyframes flicker { 0% { opacity: 0.27861; } 5% { opacity: 0.34769; } 10% { opacity: 0.23604; } 15% { opacity: 0.90626; } 20% { opacity: 0.18128; } 25% { opacity: 0.83891; } 30% { opacity: 0.65583; } 35% { opacity: 0.67807; } 40% { opacity: 0.26559; } 45% { opacity: 0.84693; } 50% { opacity: 0.96019; } 55% { opacity: 0.08594; } 60% { opacity: 0.20313; } 65% { opacity: 0.71988; } 70% { opacity: 0.53455; } 75% { opacity: 0.37288; } 80% { opacity: 0.71428; } 85% { opacity: 0.70419; } 90% { opacity: 0.7003; } 95% { opacity: 0.36108; } 100% { opacity: 0.24387; } } @keyframes scan-line { 0% { top: -100px; } 80% { top: -100px; } 100% { top: calc(100% - 50px); } } @keyframes blink-cursor { 0% { border-color: transparent; } 50% { border-color: var(--tmw-pink); } } @keyframes typing { 0% { width: 0; } 20% { width: 100%; content: attr(title); } 100% { width: 100%; content: attr(title); } } @keyframes logo { 0% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } /*Description lists like one on news section on home page*/ .mw-body dt { font-family: inherit; } /*Hidden image used for Floppy Disk articles on home page*/ .hidden-image { display: none; } /*Prevent excess space between words and image in floppy section*/ .floppy-outer { container: floppy / inline-size; } #floppy1 .thumb { float: right; } @container floppy (max-width: 450px) { #floppy1 .thumb { float: none; margin: 0; padding: 0; } } /*Used in conjuction with templatestyles for Did You Know section to make list always fill container*/ .factlist { height: -webkit-fill-available; height: -moz-available; } /*Polaroid gallery modifications - used on Lost Boy's Polaroids poge and home page*/ #polaroid-gallery .thumbimage { border: solid 1px #eaecf0 !important; border-radius: 0; box-shadow: none; padding: 0; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } #polaroid-gallery .thumbinner { background-color: hsl(0, 0%, 90%); border-top: 1px solid hsl(0, 0%, 100%); border-left: 1px solid hsl(0, 0%, 100%); border-right: 1px solid hsl(0, 0%, 47%); border-bottom: 1px solid hsl(0, 0%, 47%); box-shadow: 0 4px 15px 4px rgb(0 0 0 / 30%); transform-origin: center center; width: 250px !important; padding: 0.75em; } .page-Helvetica { font-family: Helvetica !important; } .page-Helvetica :is(h1, h2, h3, h4, h5, h6) { font-family: Helvetica !important; } /*Reduce margin on discography sublists*/ .page-The_Midnight_discography ul ul { margin-top: 0; } /*Used for gallery on List of The Midnight people page*/ #people-gallery { display: flex; justify-content: center; align-items: center; gap: 1em; flex-wrap: wrap; } /*Extra hacks*/ /*Center object in space available to it*/ .center-avail-space { width: -webkit-fill-available; width: -moz-available; display: flex; justify-content: center; } /*extra spacing to grid container*/ .extra-grid-spacing { grid-column-gap: 1em; }