MediaWiki:Fandomdesktop.css

/*********************/ /* TABLE OF CONTENTS */ /*********************/

/* - THEME COLORS - SYSOP - MAIN PAGE - H2 Theme Styling - Featured Art - TABS - TABS: General - TABS: All - TABS: Portable Infoboxes - PORTABLE INFOBOXES - TEMPLATES - Template:VolumeList - Template:Toclimit - TABLES - Fandom-Table - Forum - Flex Container experiment

/*****************/ /* THEME COLORS  */ /******************/

/*****************/ /*    SYSOP     */ /*****************/

.theme-fandomdesktop-light a[href$="/wiki/User:Revriley"] { color: #d5296c !important; font-weight: bold !important; font-family: Arial !important; } /* Light Theme color for User:Revriley */

.theme-fandomdesktop-dark a[href$="/wiki/User:Revriley"] { color: #8c8cff !important; font-weight: bold !important; font-family: Arial !important; } /* Dark Theme color for User:Revriley */

/******************************/ /*       CUSTOM FONTS        */ /******************************/

@font-face { font-family: 'Epilogue'; src: url('https://vignette.wikia.nocookie.net/deadmountdeathplay/images/2/23/Epilogue-wght-.woff2') format('woff2'), url('https://vignette.wikia.nocookie.net/deadmountdeathplay/images/4/46/Epilogue-Italic-wght-.woff2') format('woff2'); }

/* Custom Fonts etc. */

.page-content header { font-family: 'Epilogue'; }

.page-header__title { font-family: 'Epilogue'; }

.page__main { font-family: 'Epilogue'; } h1 { font-family: 'Epilogue'; }

/****************************/ /*       MAIN PAGE         */ /****************************/ /* H2 Header Custom Styling for Light & Dark Modes REVAMPED */ /* Use class "fancyheader" for h2s on main page and Portal.*/ .theme-fandomdesktop-light h2.fancyheader { background-color: var(--theme-sticky-nav-background-color); text-align: center; padding: 0.2em 0.4em; margin: 0 0 10px 0; border-radius: 7px; color: white; font-variant: small-caps; text-shadow: 1px 3px 3px black; font-weight: bold; font-size: 140%; }

.theme-fandomdesktop-dark h2.fancyheader { background-color: var(--theme-sticky-nav-background-color); text-align: center; padding: 0.2em 0.4em; margin: 0 0 10px 0; border-radius: 7px; color: white; font-variant: small-caps; text-shadow: 1px 3px 3px black; font-weight: bold; font-size: 140%; }

/* Featured Art */ .featart { justify-content: center; }

/***************/ /*   TABS     */ /***************/

/* Tabs: General */

.page-content .wds-tabs { justify-content: center; }

.theme-fandomdesktop-light .page-content .wds-tabs__tab.wds-is-current { color: #b05253; }

.theme-fandomdesktop-light .page-content .wds-tabs__tab { color: #a27171; }

.theme-fandomdesktop-dark .page-content .wds-tabs__tab.wds-is-current { color: #C07137; }

.theme-fandomdesktop-dark .page-content .wds-tabs__tab { color: #a06a42; } /* TABS: All, not just PI tabs. */

.wds-tab__content.wds-is-current p { margin: 0 0 12px; }

.wds-tabs__tab-label { align-items: center; display: inline-flex; font-size: 14px; font-weight: 500; height: 20px; letter-spacing: .5px; margin: 0 11px; text-align: center; text-decoration: none; transition: color .1s; white-space: nowrap; }

.wds-tabs__wrapper.with-bottom-border { border-bottom: none; }

/* TABS: Portable Infoboxes */

.pi-navigation { padding-left: 0px; padding-right: 0px; }

.pi-navigation.pi-item-spacing { padding-top: 1px; }

.pi-image-collection .wds-tabs__tab-label { font-family: Rubik; font-size: 12px; margin: 0px 4px; height: 20px; } .pi-image-collection ul.wds-tabs { line-height: 19px; padding: 0px; margin: 1px 0 0; justify-content: center; } /* All tabs */

.portable-infobox .wds-tabs { justify-content: center; height: 20px; }

.page-content ul.wds-tabs {	justify-content: center; }

.pi-image-collection .wds-tabber img { width: 100%; height: 100%; }

.pi-image-collection .wds-tabs__arrow-left, .pi-image-collection .wds-tabs__arrow-right { display: none; }

.wds-tabs__wrapper.right-arrow-visible .wds-tabs, .wds-tabs__wrapper.left-arrow-visible .wds-tabs { -webkit-mask-image: none; }

/*.pi-image-collection .wds-tabs__tab:hover { Hover Inactive background-color: #d3bbb2; color: #2d2d2d; } */

/************************/ /* Portable Infoboxes  */ /************************/ .pi-data { grid-column-gap: 2px; padding-right: 1px; }

.pi-horizontal-group .pi-header { display: table-caption; text-align: center; } /* Should center text of group headers in portable infoboxes, e.g. "Publication Order" text in the volume infobox.*/

/*************/ /* TEMPLATES */ /*************/

/* TEMPLATES TOC - Template:VolumeList - Template:TOClimit

/***********************/ /* Template:VolumeList */ /***********************/

.VolumeList { border-collapse: collapse; width: 100%; }

.theme-fandomdesktop-light .VolumeList { background:#fafafa; color: black; }

.theme-fandomdesktop-light .VolumeList th { color: #972753; }

.theme-fandomdesktop-dark .VolumeList { background:#484242; color: #fafafa; }

.theme-fandomdesktop-dark .VolumeList th { color: #8c8cff; }

/* Template: Toclimit */ /* Required CSS Changed ol to ul for compatability (?) with FandomDesktop */

.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; }

/*****************/ /*   TABLES     */ /*****************/

/** Fandom-Table (default) **/

/* Feb 24, 2023: So what I'm trying out, here, is having the nav-theme-variables as the *default* color of the table headers, letting this apply to the light theme (for now), but instead using the accent color variable for the dark theme header. (I did personally demo the orange nav for it). It's a demo, I suppose, for the question of whether we go with (a) using topnav variable for header background, use the theme accent color instead, or use custom colors for both light and dark. Do people want variety or consistency, and if they want consistency, nav or accent? In the spirit of community wikis, I should probably do a poll / thread in Discussions / Forum so that users can influence / give input on thei preference. Do many people contribute to the wiki right now? No, but it's the principle of the thing (she says, having unilaterally made literally all design choices about the wiki so far without seeking user input, having nearly given up on trying. For now, I'm going with a mix. Reminder that if it were accent color for Light Mode, then the table header would be black.)

.fandom-table { border-collapse: collapse; border-spacing: 2px; margin: 1em 1em 1em 0; }

.fandom-table tr th { background-color: var(--theme-sticky-nav-background-color); color: var(--theme-sticky-nav-text-color); text-align: center; border-collapse: collapse; padding: 6px 10px; }

.fandom-table tr td { text-align: left; padding: 5px 10px; }

/* Light */ .theme-fandomdesktop-light .fandom-table th, .theme-fandomdesktop-light .fandom-table td { border: 1px solid #5e1934; }

.theme-fandomdesktop-light table.fandom-table>tr:hover>td, .theme-fandomdesktop-light table.fandom-table>*>tr:hover>td, .theme-fandomdesktop-light table.fandom-table>tr:hover>th, .theme-fandomdesktop-light table.fandom-table>*>tr:hover>th { background-color: #edbccf; color: black; }

.theme-fandomdesktop-light table.fandom-table>tr:hover a, .theme-fandomdesktop-light table.fandom-table>*>tr:hover a, .theme-fandomdesktop-light table.fandom-table>tr:hover tr:hover a, .theme-fandomdesktop-light table.fandom-table>*>tr:hover tr:hover a { color: #217d5a; font-weight: 600; }

/* Dark */

.theme-fandomdesktop-dark .fandom-table th { background: var(--theme-accent-color); color: #fff; } .theme-fandomdesktop-dark .fandom-table td { background-color: #403d3c; color: #f5f3f5; border: 1px solid #312e2d; }

/* #6d6db3 */

.theme-fandomdesktop-dark table.fandom-table>tr:hover>td, .theme-fandomdesktop-dark table.fandom-table>*>tr:hover>td, .theme-fandomdesktop-dark table.fandom-table>tr:hover>th, .theme-fandomdesktop-dark table.fandom-table>*>tr:hover>th { background-color: #b0b0d6; color: #000; }

.theme-fandomdesktop-dark table.fandom-table>tr:hover a, .theme-fandomdesktop-dark table.fandom-table>*>tr:hover a, .theme-fandomdesktop-dark table.fandom-table>tr:hover tr:hover a, .theme-fandomdesktop-dark table.fandom-table>*>tr:hover tr:hover a { color: #000; font-weight: 600; }

/** FORUM **/

.forumlist { width:100%; border-collapse: collapse; }

.forumlist th, .forum_title th, .forum_edited th, .forum_editor th { text-align: center; background: var(--theme-sticky-nav-background-color); color: var(--theme-sticky-nav-text-color); padding: 3px 50px; }

.forumlist td { background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.07); padding: 6px 30px; }

td.forumlist td.forum_title a.forum_new { font-weight: bold; background: url(https://images.wikia.nocookie.net/main-page-demo/images/4/4e/Forum_new.gif) center left no-repeat; padding-left: 20px; }

/* Flex Container Experiment Not done w/code; only testing out in Sandbox with DevTools & MagicCSS as help.*/ .flex-container { display: flex; background-color: #000; justify-content: center; }

.flex-container > div { margin: 2px; padding: 0px; font-size: 15px; text-align: center; flex: 0 150px 200px; }

.flex-container .thumbcaption { text-align:center; }