MediaWiki:Fandomdesktop.css

/***********************************************/ /* First implementation attempt: July 1–2, 2021*/ /***********************************************/

/* REV's NOTES: Putting aside what qualms I have with the Oasis > Fandomdesktop skin change, FandomDesktop.css offers us a 'clean slate' opportunity regarding code. Common.css and Wikia.css have accumulated their problems over the years. Deprecated code, conflicting/auto-cancelling code, clunky, non-streamlined code... ...I did slight tidying, but never got around to doing a proper spring cleaning of either. Definitely ignored many cobwebs in Common.css. Point is, this is our chance to start fresh. Rigorous documentation, organization desired. Making specialized import files would be conducive. - Rev, July 23, 2021*/

/* INDEX - WIP */ /* In making this index, I can already tell the preliminary organizational structure needs work. What's the best way to organize light and dark modes? Maybe import files... Not to mention, I know my code isn't streamlined. - Rev, July 23, 2021*/ /* 1. Admin Username 2. MODES - Light Mode - Dark Mode 3. MAIN PAGE 4. INFOBOXES - Portable Infoboxes | LIGHT MODE | General - Portable Infoboxes | LIGHT MODE | Tabs - Portable Infoboxes | DARK MODE | General - Portable Infoboxes | DARK MODE | Tabs 5. TABLES - tableA Class - tableHVR Class 6. TEMPLATES - Template:2006VolumeList - Template:2015VolumeList - Template:Alchemy - Template:Navbox - Template:Navbox-Section 7. IMAGES

/**********************************/ /*        Admin Username         */ /**********************************/

a[href="/wiki/User:Revriley"] { color: #C53017; font-weight: bold; font-family: Arial; }

/**************/ /*  MODES    */ /**************/

/****************/ /* LIGHT MODE  */ /****************/

.theme-fandomdesktop-light .page__main, .theme-fandomdesktop-light .page__right-rail {  background: url("https://images.wikia.nocookie.net/baccano/images/3/39/045.jpg") repeat; } /* Ladyshift's 2013 file, unaltered. This has been a staple of the wiki's aesthetic for so long that it would be a shame to lose.*/

.theme-fandomdesktop-light #p-tb, .theme-fandomdesktop-light #wikia-recent-activity, .theme-fandomdesktop-light #WikiaAdInContentPlaceHolder.rail-module, .theme-fandomdesktop-light #recirculation-rail.popular-pages.premium-recirculation-rail {   background: rgb(164,17,17,0); }

/***************/ /* DARK MODE  */ /***************/ /* Altered version of Ladyshift's file. Will do for now.*/ .theme-fandomdesktop-dark .page__main, .theme-fandomdesktop-dark .page__right-rail {  background: url("https://static.wikia.nocookie.net/baccano/images/3/31/PageContent_Background_DarkMode.png") repeat; }

.theme-fandomdesktop-dark #p-tb, .theme-fandomdesktop-dark #wikia-recent-activity, .theme-fandomdesktop-dark #WikiaAdInContentPlaceHolder.rail-module, .theme-fandomdesktop-dark #recirculation-rail.popular-pages.premium-recirculation-rail {   background: rgb(164,17,17,0); }

/****************************/ /*       MAIN PAGE         */ /****************************/

/* H2 Header Custom Styling for Light & Dark Modes */ .theme-fandomdesktop-light .lcs-container h2, .theme-fandomdesktop-light .rcs-container h2 { background-color:#4e1804; padding: 0.2em 0.4em; margin: 0 0 10px 0; border-radius: 7px; color: white; font-variant: small-caps; justify-content: center; text-shadow: 1px 3px 3px black; font-weight: bold; font-size: 140%; }

.theme-fandomdesktop-dark .lcs-container h2, .theme-fandomdesktop-dark .rcs-container h2 { background-color: #743C1A; text-align: center; padding: 0.2em 0.4em; margin: 0 0 10px 0; border-radius: 7px; color: white; font-variant: small-caps; justify-content: center; text-shadow: 1px 3px 3px black; font-weight: bold; font-size: 140%; }

/****************************/ /*       INFOBOXES         */ /****************************/ /* Create import doc later */

/* Portable Infoboxes | GENERAL | Template style */

.portable-infobox { width: 280px; }

.portable-infobox .pi-header { padding: 5px; }

.pi-image img { width: 100%; height: 100%; border: none; }

.pi-data { grid-column-gap: 5px; }

.pi-collapse .pi-header:first-child { padding-right: 0; }

/* Portable Infoboxes | GENERAL | Tabs */

.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 2px; height: 20px; } .pi-image-collection ul.wds-tabs { /* All tabs */ line-height: 19px; padding: 0px; margin: 1px 0 1px; justify-content: center; }

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

.page-content ul.wds-tabs {	justify-content: center; } /* All tabs, not just PI tabs. Should be put into a Tabs section. */

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

.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 | LIGHT MODE | General */ .theme-fandomdesktop-light .portable-infobox { border: 1px solid #c9a79a; background-color: #d0baae; color: black; margin-bottom: 0.5em; margin-left: 1em; float: right; clear: right; }

.theme-fandomdesktop-light .portable-infobox .pi-title { background-color: rgb(164,17,17,0); color: #620101; margin-bottom: 1px; padding: 5px 5px 1px 5px; }

.theme-fandomdesktop-light .pi-header:first-child { background-color: #c9a79a; cursor: pointer; color: black; font-style: bold; position: relative; text-align: center; }

.theme-fandomdesktop-light .pi-item-spacing { border-color: #c9a79a; }

/* Portable Infoboxes | LIGHT MODE | Tabs */

.theme-fandomdesktop-light .pi-image-collection .wds-tabs__tab.wds-is-current, .pi-image-collection .wds-tabs__tab.wds-is-current:hover { /* Active */ box-shadow: none; background-color: #c9a79a; color: #2d2d2d; font-weight: normal; }

.theme-fandomdesktop-light .pi-image-collection .wds-tabs__tab.wds-is-current:hover { /* Active Hover*/ box-shadow: none; background-color: #b19287; color: #2d2d2d; font-weight: normal; }

.theme-fandomdesktop-light .pi-image-collection .wds-tabs__tab { /* Inactive */ background-color: #d0baae; color: #000; padding: 0px 3px; margin: 0 1px; border-bottom: none; }

.theme-fandomdesktop-light .pi-image-collection .wds-tabs__tab:hover { /* Inactive Hover */ box-shadow: none; background-color: #c2a899; color: #2d2d2d; font-weight: normal; }

/* Portable Infoboxes | DARK MODE | General */ .theme-fandomdesktop-dark .portable-infobox { border: 1px solid #2b2625; background-color: #252121; color: #fff; margin-bottom: 0.5em; margin-left: 1em; float: right; clear: right; }

.theme-fandomdesktop-dark .portable-infobox .pi-title { background-color: rgba(164,17,17,0); color: #fff; margin-bottom: 1px; padding: 5px 5px 1px 5px; }

.theme-fandomdesktop-dark .pi-header:first-child { background-color: #67615f; color: #000; }

.theme-fandomdesktop-dark .pi-item-spacing { border-color: #2b2625; }

/* Portable Infoboxes | DARK MODE | Tabs */

.theme-fandomdesktop-dark .pi-image-collection .wds-tabs__tab.wds-is-current { /* Active */ box-shadow: none; background-color: #7C5641; color: #2d2d2d; font-weight: normal; }

.theme-fandomdesktop-dark .pi-image-collection .wds-tabs__tab.wds-is-current:hover { /* Active Hover */ box-shadow: none; background-color: #776256; color: #2d2d2d; font-weight: normal; }

.theme-fandomdesktop-dark .pi-image-collection .wds-tabs__tab { /* Inactive */ background-color: #a77b62; color: #000; padding: 0px 3px; margin: 0 1px; border-bottom: none; }

.theme-fandomdesktop-dark .pi-image-collection .wds-tabs__tab:hover { /* Inactive Hover */ box-shadow: none; background-color: #C9A28C; color: #2d2d2d; font-weight: normal; }

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

/****************/ /* tableA Class */ /****************/ /* This is the standard class to use for all tables on the wiki, rather than wikitable */

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

.tableA th { text-align: center; border-collapse: collapse; padding: 5px 2px; }

.tableA td { text-align: left; padding: 6px 12px; }

.theme-fandomdesktop-light .tableA th { background: #BA9D7F; color: black; } .theme-fandomdesktop-light .tableA td { background-color: #D4C2B0; color: black; border-bottom: 1px solid #b89571; }

.theme-fandomdesktop-light .tableA { border-bottom: #CEB9A3; }

.theme-fandomdesktop-dark .tableA th { background: #312e2d; color: #fff; } .theme-fandomdesktop-dark .tableA td { background-color: #67615f; color: black; border-bottom: 1px solid #312e2d; }

.theme-fandomdesktop-dark .tableA { border-bottom: #312e2d; }

/******************/ /* tableHVR Class */ /******************/ /* Usage: Home Video Releases article. Class creation made necessary due to FandomDesktop skin change. */

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

.tableHVR th { text-align: center; border-collapse: collapse; padding: 5px 2px; }

.tableHVR td { text-align: left; padding: 6px 12px; }

.theme-fandomdesktop-light .tableHVR th { background: #BA9D7F; color: black; } .theme-fandomdesktop-light .tableHVR td { background-color: #D4C2B0; color: black; border-bottom: 1px solid #b89571; }

.theme-fandomdesktop-light .tableHVR { border-bottom: #CEB9A3; }

.theme-fandomdesktop-dark .tableHVR th { background: #312e2d; color: #fff; } .theme-fandomdesktop-dark .tableHVR td { background-color: #67615f; color: black; border-bottom: 1px solid #312e2d; }

.theme-fandomdesktop-dark .tableHVR { border-bottom: #312e2d; }

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

/* Templates for '06 and '15 Volume Lists */

.OhSixVolumeList, .FifteenVolumeList { border-collapse: collapse; width: 100%; }

/* Template:2006VolumeList */

.theme-fandomdesktop-light .OhSixVolumeList th { background: #BA9D7F; color: white; }

.theme-fandomdesktop-light .OhSixVolumeList td { background: #D4C2B0; color: white; }

.theme-fandomdesktop-dark .OhSixVolumeList th { background: #82613F; color: white; }

.theme-fandomdesktop-dark .OhSixVolumeList td { background: #A48466; color: white; }

/* Template:2015VolumeList */

.theme-fandomdesktop-light .FifteenVolumeList th { background: #BA9D7F; color: white; }

.theme-fandomdesktop-light .FifteenVolumeList td { background: #D4C2B0; color: white; }

.theme-fandomdesktop-dark .FifteenVolumeList th { background: #82613F; color: white; }

.theme-fandomdesktop-dark .FifteenVolumeList td { background: #A48466; color: white; }

/* alchemy Class */

.alchemy { width: 250px; margin-top: 0.2em; margin-left: 15px; font-size: 90%; text-align: center; border-spacing:0; }

.alchemy th:nth-child(1) { width: 100%; font-size: 90%; text-align: center; color: #000; }

.theme-fandomdesktop-light .alchemy { background-color:#D4C2B0; color: #000; }

.theme-fandomdesktop-light .alchemy th:nth-child(1) { background-color: #BA9D7F; }

.theme-fandomdesktop-dark .alchemy { background-color: #252121; color: #fff; }

.theme-fandomdesktop-dark .alchemy th:nth-child(1) { background-color: #67615f; }

/*******************/ /* Template:Navbox */ /*******************/ /* Attempting to set default light/dark mode colors for Navbox and Navbox-Section. Issue: Navbox-Section has ability to set custom colors; these custom colors override defaults.*/

.navbox-nav { width: 100%; margin-top: 1em; font-size: 90%; text-align: center; border: 1px solid #999; }

.theme-fandomdesktop-light .navbox-nav { background-color:#D4C2B0; color: #000; }

.theme-fandomdesktop-light .navbox-nav th { background-color:#a78d72; color: #000; padding: 0.2em 0.5em; }

.theme-fandomdesktop-dark .navbox-nav { background-color:#67615f; color: #000; }

.theme-fandomdesktop-dark .navbox-nav th { background-color:#252121; color: #f1f1f1; padding: 0.2em 0.5em;

}

/***************************/ /* Template:Navbox-Section */ /***************************/

.navbox-section { width: 100%; margin-top: 1px; font-size: 90%; text-align: center; }

.theme-fandomdesktop-light .navbox-section { background-color:#D4C2B0; color: #000; }

.theme-fandomdesktop-light .navbox-section th { background-color:#BA9D7F; color: #000; }

.theme-fandomdesktop-dark .navbox-section { background-color:#67615f; color: #000; }

.theme-fandomdesktop-dark .navbox-section th { background-color:#403d3d; color: #000; }

/****************/ /*   IMAGES   */ /****************/ /* Embedded Images */

.tright, .tleft { border: none; } /*remove border from thumb class entirely*/