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:AudioBox (affects AUDIO) - Template:Navbox - Template:Navbox-Section - Template:Navbox-CH 7. IMAGES

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

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

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

/********/ /* BOTH */ /********/

.rail-module { border-bottom: 0px; }

/****************/ /* 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, .theme-fandomdesktop-light .rail-module {   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, .theme-fandomdesktop-dark .rail-module {   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; text-align: 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: #68422a; /* Prev. #743C1A; changed on Aug 24, 2021*/ 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%; }

/****************************/ /*       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: 10px; /* The new ruler tool with Power toys confirmed what I knew for a while, that padding-right set to 0 was offsetting the label (I blame the chevron). 0 increased to 10px. */ }

/* 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; }

.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: 0 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: 0 solid #2b2625; background-color: #343332; /* Haven't been satisfied with #252121 for a while (too dark); been experimenting with color in DevTools. Other options in back pocket so far: #303030, #424242, #2e2d2d, #3a3838, currently trying out #34332. Always keep in mind contrast legibility between text color (INCLUDING LINK COLOR) and background per accessibility standards. */  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: #67615f; color: #e1e1e1; font-weight: normal; }

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

.theme-fandomdesktop-dark .pi-image-collection .wds-tabs__tab { /* Inactive */ box-shadow: none; background-color: #908d8d; color: #000; padding: 0 3px; margin: 0 .5px; }

.theme-fandomdesktop-dark .pi-image-collection .wds-tabs__tab:hover { /* Inactive Hover */ box-shadow: none; background-color: #adabaa; color: #a00202; 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: #403d3c; color: #f5f3f5; 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 .wds-tabs { justify-content: center; }

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

.OhSixVolumeList .wds-tabs, .FifteenVolumeList .wds-tabs { justify-content: center; } /* Centers tabs for both templates*/

/* 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: #312e2d; color: #fff; }

.theme-fandomdesktop-dark .OhSixVolumeList td { background: #67615f; color: #000; }

/* 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: #312e2d; color: #fff; }

.theme-fandomdesktop-dark .FifteenVolumeList td { background: #67615f; color: #000; }

/* 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:AudioBox Class */ audio { min-width: 18vw; max-height: 30px; } /* Affects size of audio player regardless of AudioBox! */

.audiobox { /*width: 250px; ...made redundant by min-width of audio */ margin-left: 15px; font-size: 60%; } /* see 'float' parameter: should default to right */

.theme-fandomdesktop-light .audiobox { border-left: solid #BA9D7F 2px; border-top: solid #BA9D7F 2px; }

.theme-fandomdesktop-light .audiobox th { background-color: #BA9D7F; color: #000000; border-right: solid #BA9D7F 2px; }

.theme-fandomdesktop-light .audiobox td { width: 200px; background-color: #D4C2B0; border: solid #D4C2B0 2px; }

.theme-fandomdesktop-dark .audiobox { border-left: solid #403d3c 2px; border-top: solid #403d3c 2px; }

.theme-fandomdesktop-dark .audiobox th { background-color: #403d3c; color: #f5f3f5; border-right: solid #403d3c 2px; }

.theme-fandomdesktop-dark .audiobox td { width: 200px; background-color: #625C5A; border: solid #625C5A 2px; }

/*******************/ /* 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; }

/***************************/ /* Template:Navbox-CH */ /***************************/

.navbox-ch { width: 100%; margin-top: 0.2em; font-size: 90%; text-align: center; }

.theme-fandomdesktop-light .navbox-ch { background-color:#D4C2B0; color: #000; border:1px solid #999; }

.theme-fandomdesktop-light .navbox-ch th { background-color:#BA9D7F; color: #000; padding: 2mm; }

.theme-fandomdesktop-light .navbox-ch td { background-color:#BA9D7F; color: #000; }

.theme-fandomdesktop-dark .navbox-ch { background-color:#67615f; color: #000; border:1px solid #000; }

.theme-fandomdesktop-dark .navbox-ch th { background: #312e2d; color: #fff; padding: 2mm; }

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

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

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