MediaWiki:Tardis.css

/* ============================  Tardis.css v. 1.0 Month of last major change: October 2018

This page styles custom elements which exist only here at Tardis. If the base selector is unique to   Tardis, you'll find the styling here. ============================ */

/* ======================    TOP-OF-PAGE BANNERS which identify the type of article or give other important messages about the article as a whole =======================   Clearly owes a debt to    memoryalpha.fandom.com, who were riffin' off of   en.wikipedia =======================   +++++++++++++++++++++++    Base frame +++++++++++++++++++++++ */ div#article-type { border:1px solid var(--theme-accent-color); padding:5px; letter-spacing:.5px; text-align:left; min-height:55px; min-width: 528.5px; margin:0px 0px 10px 0px; }  div#article-type p { margin-left:205px; line-height:11px; font-size:11px; text-align:left; font-weight:normal; font-style:normal; }

/* +++++++++++++++++++  Various article types +++++++++++++++++++ */

div#type-title { margin-left:205px; font-size:18pt; line-height:16pt; } div.type-realworld { margin:auto auto auto auto; top:0px; max-height:55px; background: url(https://images.wikia.nocookie.net/tardis/images/d/d8/SmallClapper.jpg) no-repeat; z-index:5; } div.type-nc { background: url(https://images.wikia.nocookie.net/tardis/images/f/f1/Journal200px.png) no-repeat; z-index:5; } div.type-disambig { max-height:55px; background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/__cb20090426213327/tardis/images/a/af/Transferring.jpg) no-repeat; z-index:5; } div.type-inuse { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/e/e0/Inuse200px.jpg) no-repeat; z-index:5; } div.type-update { margin-left:180px; background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/3/37/Update200px.jpg) no-repeat; z-index:5; } div.type-cleanup { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://static.wikia.nocookie.net/tardis/images/5/58/Thirteen_repairing_timeship.jpg) no-repeat; } div.type-listy { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://vignette.wikia.nocookie.net/tardis/images/3/3a/Explain_explain_Journey%27s_End.jpg) no-repeat; } div.type-delete { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/6/6b/Delete200px.jpg) no-repeat; z-index:5; } div.type-oou { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/6/63/Oou200px.jpg) no-repeat; z-index:5; } div.type-rename { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/1/1e/Rename200px.jpg) no-repeat; z-index:5; } div.type-merge { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://static.wikia.nocookie.net/tardis/images/9/99/Merging_Tremaster.jpg); background-repeat:no-repeat; background-size:200px 200px; background-position:0 0; z-index:5; } div.type-spoiler { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/7/7f/Spoiler200px.jpg) no-repeat; z-index:5; } div.type-conjecture { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/c/c3/Conjecture200px.jpg) no-repeat; z-index:5; } div.type-talk { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/__cb20110514204758/tardis/images/b/b4/Talk200px.jpg) no-repeat; z-index:5; } div.type-unprod { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/f/f2/Unprod.png) no-repeat; z-index:5; } div.type-doctorwhich { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/a/af/WhichDoctor.jpg) no-repeat; z-index:5; } div.type-nonfiction { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/2/26/Nonfiction.png) no-repeat; z-index:5; } div.type-prefix { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/d/d5/Prefix.png) no-repeat; z-index:5; background-size:200px 90px; background-position:left top; } div.type-demonym { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://images.wikia.nocookie.net/tardis/images/c/c6/Demonym200px.jpg) no-repeat; z-index:5; background-position:0px -20px }

/* This is for the small, right-floating boxes, like DisconNav */ div#inline-box-rt { float:right; padding:10px; text-align: center; border:1px solid var(--theme-accent-color); width:250px; margin:10px; line-height:1.1em; font-size:.8em; font-weight:400; font-style:normal; background-color:transparent ; color:#fff; }

/* This is for the small, left-floating boxes, like section cleanup */

div#inline-box { float:left; padding:10px; text-align: center; border:1px solid var(--theme-accent-color); width:250px; margin:10px; line-height:1.1em; font-size:.8em; font-weight:400; font-style:normal; background-color:transparent; color:#fff; }

div#inline-box p, div#inline-box-rt p { line-height:.9em; font-size:.8em; font-weight:normal; font-style:normal; color:#ececec; } /* DIVs used in "messages" (as in the delete temp) */ div.warning { background-color: #401F22; border: 1px solid #660000; color: #FF0000; font-weight: bold; margin: 2em 0 1em; padding: .5em 1em; margin-top:auto; margin-bottom:auto; text-align: justify; } div.header-notice, .copyright-notice { background-color: transparent; border: 1px solid var(--theme-accent-color); color: #000; padding: .5em 1em; margin: auto; width:80%; line-height:110%; font-size:95%; text-align: justify; } div.header-notice table { background-color: transparent; padding: 1px; } div.notice { background-color: #401F22; border: 1px solid #CC0000; color: #FFFFFF; margin: 2em 10% 1em 10%; padding: .5em 1em; text-align: justify; font-size:smaller; } div.header-notice#fa { width: auto; font-size: inherit; } div.notice p, div.header-notice p, div.warning p { line-height: 120%; } div span.msg-title { display: block; width: 100%; color: #FFD942; text-align: center; font-size: 150%; font-weight: bold; border-bottom: 1px solid #666; } /* ============    Wikipediainfo and Image links tags ============

This puts on the top left side of the page */

.wikipedia-info, div#wikipedia-info { float:left; margin-right:5px; margin-top:15px; } .image-link, div#image-link { float:left; margin-right:5px; margin-top:15px; } /* This places  and underneath in case they're ever on the same page together. */ .protect, div#protect { float:left; margin-right:5px; margin-top:15px; } .type-of-article, div#type-of-article { float:left; margin-right:5px; margin-top:15px; } /* =======================    SHORTCUTS the little boxes that say T:WHATEVER in the upper right hand corner of pages =======================   Base style probably originated at en.wikipedia, but has spread to some of the larger Wikia wikis like Wookiee, The Vault and MA   ======================== */
 * 1) wikipedia-info,

div.shortcut { float:right; background:transparent; border:1px solid #e5c076; padding: 0.65em; margin: 10px 10px 10px 10px; text-align: center; font-size:smaller; font-weight:bold; width: auto; }

/* ===============    TIMELINE =============== */

.timeline a:visited, .timeline a:link { color:#ccdfff } .timeline a:hover { color:#fff9d4; background:none; }

.timeline { color:#fff; background: #012c57; background: -moz-linear-gradient(top, #012c57 0%, #012c57 35%, #4e7dab 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#012c57), color-stop(35%,#012c57), color-stop(100%,#4e7dab)); background: -webkit-linear-gradient(top, #012c57 0%,#012c57 35%,#4e7dab 100%); background: -o-linear-gradient(top, #012c57 0%,#012c57 35%,#4e7dab 100%); background: -ms-linear-gradient(top, #012c57 0%,#012c57 35%,#4e7dab 100%); background: linear-gradient(top, #012c57 0%,#012c57 35%,#4e7dab 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012c57', endColorstr='#4e7dab',GradientType=0 ); overflow: visible; border-color:transparent; text-align: center; font-size: 0.85em; float: right; clear: right; width: 250px!important; min-width:250px!important; margin-bottom: 10px; margin-right: 10px; }

/* =========================    SPECIAL STYLES mainly used in template design =========================   These designs are all unique to tardis.wikia.com and were created by CzechOut ========================= */

background-color: transparent; border: 1px solid var(--theme-accent-color); padding: .5em 1em; margin:auto; width:95%; line-height:110%; font-size:95%; text-align:justify; -moz-box-shadow: -0px 0px 40px #e5c076; -webkit-box-shadow: -0px 0px 40px #e5c076; -ms-box-shadow: -0px 0px 40px #e5c076; -o-box-shadow: -0px 0px 40px #e5c076; box-shadow: -0px 0px 40px #e5c076; }   background-color: transparent; border: 1px solid var(--theme-accent-color); margin-right: 260px; padding: .5em 1em; vertical-align: middle; margin-left:auto; margin-right:auto; line-height:110%; font-size:95%; text-align: justify; -moz-box-shadow: inset -0px 0px 25px 4px #e5c076; -webkit-box-shadow: inset -0px 0px 25px 4px #e5c076; -ms-box-shadow: inset -0px 0px 25px 4px #e5c076; -o-box-shadow: inset -0px 0px 25px 4px #e5c076; box-shadow: inset -0px 0px 25px #e5c076 4px; }   background-color: transparent; border: 1px solid var(--theme-accent-color); margin: auto; padding: .5em 1em; width:80%; line-height:110%; font-size:95%; font-family: "Rubik"; text-align: left; } .smw-editpage-help, font-weight:normal; background-color:transparent; border: 1px solid var(--theme-accent-color); color:inherit; font-family:"Rubik"; padding:10px; margin-top:25px; margin-bottom:25px; margin-left:auto; margin-right:auto; font-size:95%; }
 * 1) editpage-specialchars,
 * 2) glow {
 * 1) quote-nom {
 * 1) license {
 * 1) box {

font-weight:normal; background-color:transparent; border: 2px solid var(--theme-accent-color); color:#000; font-family:"Rubik"; padding:10px; margin-top:25px; margin-bottom:25px; margin-left:auto; margin-right:auto; font-size:95%; }
 * 1) box-rt {

font-weight:normal; background-color:transparent; border: 1px solid var(--theme-accent-color); color:#000; font-family:"Rubik"; padding:10px; margin:25px auto 25px auto; font-size:95%; }   font-family: Adelle, 'Cambria', 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif; font-size:1.8em; line-height:1.2em; font-style:italic; color:#000; font-weight:bold; } .error, #error { color:#000; font-weight:bold; } .error, #error, width:95%; font-weight:normal; background-color:transparent; border: 1px solid var(--theme-accent-color); font-family:"Rubik"; padding:10px; margin-top:25px; margin-bottom:25px; margin-left:auto; margin-right:auto; font-size:95%; }
 * 1) box-lt {
 * 1) th {
 * 1) tech, .tech {

margin-bottom:15px; padding:5px; background-color: transparent; border:1px solid #e5c076; }   background:transparent; -moz-border-radius:50% 50% 0% 0% / 5% 5% 0% 0%; -webkit-border-radius:50% 50% 0% 0% / 5% 5% 0% 0%; -ms-border-radius:50% 50% 0% 0% / 5% 5% 0% 0%; -o-border-radius:50% 50% 0% 0% / 5% 5% 0% 0%; border-radius:50% 50% 0% 0% / 5% 5% 0% 0%; border:3px solid var(--theme-accent-color); clear:both; width:auto; margin-left:auto; margin-right:auto; margin-bottom:10px; padding:10px; font-size:.90em; line-height:.95em; font-family : "Rubik"; }   background:transparent; -webkit-border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 10px; -ms-border-radius: 0px 0px 10px 10px; -o-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; clear:both; width:auto; padding:11px; border:2px solid var(--theme-accent-color); margin-left:auto; margin-right:auto; font-size: 0.80em; line-height:.90em; font-family : "Rubik"; } .stitched { padding: 5px 10px; margin: 10px; line-height: 100%; border: 1px solid var(--theme-accent-color); -webkit-border-radius: 10px 0px 0px 10px; -moz-border-radius: 10px 0px 0px 10px; -ms-border-radius: 10px 0px 0px 10px; -o-border-radius: 10px 0px 0px 10px; border-radius: 10px 0px 0px 10px; font-weight: normal; font-family : "Rubik"; } .key, #key { font-size:.9em; background-color:inherit; border: 1pt outset var(--theme-accent-color); text-align:center; vertical-align:middle; padding:2px; margin:2px; font-weight:bold; font-family:"Rubik"; }   display:block; height:30px; width:100px; border:1px solid var(--theme-accent-color); margin:5px; }   background:transparent url(https://images.wikia.nocookie.net/tardistest/images/6/6e/75opacitygrey.png); } /* Dabtag and mosbox */ .dabtag, border:2px solid var(--theme-accent-color); -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; overflow:hidden; font-size: 0.80em; line-height:.95em; font-family: "Rubik"; display:inline-block; width:276px; /* this is precise width of two stub tags */ margin-top:10px; margin-bottom:10px; margin-right:17px!important; /*overrides the div.dabtag elsewhere */ float:left; line-height:130%; clear:left; }
 * 1) mainpage-highlight {
 * 1) crewtop {
 * 1) crew {
 * 1) block {
 * 1) tgrey {
 * 1) dabtag {

/*improves formatting on smaller screen sizes*/ .dabtag + p, #dabtag + p { word-wrap: normal; }

font-family: "Rubik"; text-transform:none; letter-spacing:0px; line-height:120%; word-break:normal; font-size:16px; word-wrap:break-word; }   font-style:italic; margin: 25px; border-bottom: 2px solid #b0b0b0; font-size:150%; padding:10px; font-weight:normal; line-height:150%; font-family: Adelle, 'Cambria', 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif; } .mosheadcolor { color:#000; } .moscolor { color:#000; }
 * 1) mosbox {
 * 1) mos-summary {

/* ==============  DPL formats ============== */

.dpl3 { vertical-align:top; width:100%; margin:0 auto; }

/* ==========================  Equally sized table widths ========================== */ table.five-equal-columns, table.four-equal-columns { table-layout: fixed; width: 100%!important; /*!important is necassary*/ } td.five-equal-columns { width: 20; } td.four-equal-columns { width: 25; }

/* ======================  Collapsible navfoboxes ====================== */  /*using :has would imrpove this template but it doesn't work on Firefox yet. De-comment this selector when https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility says that firefox support exists */ .collapsible-navfobox aside:has(div.mw-collapsed) { margin-bottom:1px; } .collapsible-navfobox h2:has(div.mw-collapsed) { padding: 0px!important; border-top: none!important; } .collapsible-navfobox nav:has(div.mw-collapsed) { padding-top: 0px!important; } .collapsible-navfobox .portable-infobox .pi-header:nth-child(n+3):has(div.mw-collapsed) { margin-top: 0px; } /* Firefox workaround */ @media all and (min--moz-device-pixel-ratio:0) { .collapsible-navfobox aside { margin-bottom:1px; }	.collapsible-navfobox h2 { padding: 0px!important; border-top: none!important; }	.collapsible-navfobox nav { padding-top: 0px!important; }	.collapsible-navfobox .portable-infobox .pi-header:nth-child(n+3) { margin-top: 0px; } }

/* making the last tab default for some tabbed galleries in infoboxes */ .default-last-tab .wds-tabs .wds-tabs__tab:first-child { order: 9999; }

/* =====================  CSS for wip templates ===================== */ /* subpage tabs at User:Bongolium500/Sandbox 6 */ .subpage-tabs-main { width: 100%; border: 2px solid var(--bright-accent-color); border-radius: 7px; clear: both; text-align: center; background-color: white; white-space: nowrap; font-family: var(--theme-page-headings-font), rubik, helvetica, arial, sans-serif; color: var(--theme-link-dynamic-color-1); } .subpage-tabs-tab { background-color: var(--bright-accent-color); border-radius: 5px; padding: 3px; } .subpage-tabs-main a { color: var(--theme-link-dynamic-color-1); }

/* content warning templates on User:Bongolium500/Sandbox 9*/ div.type-trigger { background: rgba(var(--theme-page-text-color--rgb),.04) url(https://static.wikia.nocookie.net/tardis/images/7/79/Trigger_Template_200px.jpg) no-repeat; z-index: 5; } /* recent releases homepage module */ div.mainpage-box-recent div.recent-release-box { border: var(--theme-accent-color) 2px solid; background: var(--theme-page-background-color); margin: 3px; border-radius: 25px; } div.mainpage-box-recent { border: var(--theme-accent-color) 2px solid; background: var(--theme-accent-color); border-radius: 28px; } .mainpage-box-recent .read-more-button { background: var(--theme-accent-color); color: var(--theme-page-background-color); padding: 7px 50px 5px 50px; border-radius: 15px; transition: background 0.5s, color 0.5s; transition-timing-function: ease; } .mainpage-box-recent .read-more-button:hover { background: var(--theme-accent-color--hover); color: var(--theme-border-color); } .mainpage-box-recent .floatright, .mainpage-box-recent .floatleft { margin: 0px; } .mainpage-box-recent .floatright img { border-radius: 0px 24px 24px 0px; } .mainpage-box-recent .floatleft img { border-radius: 24px 0px 0px 24px; } .mainpage-box-recent p { margin-bottom: 10px; display: inherit!important; /*required to get the paragraph under the read more button to show up. This is needed so that the button has some space before the bottom of the box. */ } .mainpage-box-recent p+p { margin-top: 12px; }

/* adapted from https://stackoverflow.com/a/37120036 by Jacob G under CC-BY-SA 4.0 */ .horizontal-line { background: linear-gradient(transparent 42.5%, var(--theme-accent-color) 42.5%, var(--theme-accent-color) 57.5%, transparent 57.5%); padding: 5px; width: 35px; display: inline-flex; margin: 0px 5px; }

/* */ .inline-citation-extra { border: 1.5px solid var(--theme-accent-color); border-radius: 5px; }

/* wip */ .pullout-wrapper { float: right; display: flex; } .pullout-handle { background-color: var(--theme-link-color); border-radius: 24px 0px 0px 24px; width: 40px; height: 56px; padding-left: 14px; font-size: 2em; color: var(--theme-page-background-color); transition: background-color 1s, width 1s; } .pullout-handle:hover { background-color: var(--bright-accent-color); width: 55px; } .pullout-content { display: none; border: 1px solid var(--theme-accent-color); } .pullout-content div#article-type { margin: 0px; } .pullout-right-arrow { display: none; }