MediaWiki:Templates.css

/** Styling for all important templates should preferably go here to not
** fill up Fandomdesktop.css and make it more confusing than it already is
**/

/* For Template:Hidden_begin and Template:Hidden_end */
.hidden-begin {
	box-sizing: border-box;
	width: 100%;
	padding: 5px;
	border: none;
	font-size: 95%;
}

.hidden-title {
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
}

.hidden-content {
	text-align: left;
}

/* For Template:Color_box */
.legend-color {
	display: inline-block;
	min-width: 1.25em;
	height: 1.25em;
	line-height: 1.25;
	margin: 1px 0;
	text-align: center;
	border: 1px solid black;
	background-color: transparent;
	color: black;
}

/* Mostly for testing with Template:TCHeadlines */
.tcheadlines-top-left-box-gradient {
    background: linear-gradient(to top right,rgba(25,236,240,0) 49.5%,#ccc 49.5%,#ccc 50.5%,rgba(234,236,240,0) 50.5%)
}

/* Template:Prediction table */
.toccolours {
    border: .1rem solid #a2a9b1;
    background-color: var(--theme-page-background-color--secondary);
    padding: .3rem;
    font-size: 95%;
}

/** Dark mode compatibility **/
/* This is generic styling for dark theme compatibility */
.theme-fandomdesktop-dark .genheader {
	background-color: rgba(var(--theme-page-background-color--rgb),.9);
	color: var(--theme-page-text-mix-color-95);
}
/* toccolors */
.theme-fandomdesktop-dark .toccolours tbody {
    color: #e6e6e6;
}
.theme-fandomdesktop-dark .toccolours tbody b {
	color: var(--theme-page-text-mix-color-95);
}

/* Template:Infobox advisory */
.theme-fandomdesktop-light .advisory {
	color: #000;
}
.theme-fandomdesktop-dark .advisory {
	color: #fff;
}

/* Template:TC stats cyclone3 */
.tcheader {
	background-color: rgba(var(--theme-page-background-color--rgb),.9);
    color: var(--theme-page-text-color);
}
/** for smaller screens */
@media only screen and (max-width: 768px) {
	.tcheader {
		hyphens: auto;
		overflow-wrap: anywhere;
    }
}

/* This is generic styling for dark theme compatibility */
.theme-fandomdesktop-dark .tccurrent {
	background-color: rgba(var(--theme-page-background-color--rgb),.9);
	color: var(--theme-page-text-mix-color-95);
}

/* Template:Quote */
:root {
    --pull-quote-max-width: 80%;
    --pull-quote-text-color: var(--theme-page-text-color, rgba(0, 0, 0, .8));
    --pull-quote-mark-color: rgba(105, 69, 126, 1); 
    --pull-quote-mark-font: "Times New Roman", serif;
    --pull-quote-hyphens: auto;
    --pull-quote-frame-color: #bbb;
}
 
/* #content added as a parent selector to the following in order to override default blockquote styles. */
#content .pull-quote {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--pull-quote-max-width);
    margin: 1em auto;
    font-size: 1em;
    line-height: 1.8;
}
 
#content .pull-quote__text {
    flex-basis: 100%;
    position: relative;
    padding: 0 2em;
    hyphens: var(--pull-quote-hyphens);
    color: var(--pull-quote-text-color);
    font-style: italic;    
}
 
#content .pull-quote__text::before, #content .pull-quote__text::after {
    position: absolute;
    font-size: 3em;
    font-family: var(--pull-quote-mark-font);
    font-weight: 700;
    color: var(--pull-quote-mark-color);
    font-style: normal;
}
 
#content .pull-quote__text::before {
    content: "“";
    top: 0;
    left: 0;
    line-height: 0.5;
}
 
#content .pull-quote__text::after {
    content: "”";
    bottom: 0;
    right: 0;
    line-height: 0.2;
}
 
#content .pull-quote__source {
    margin-left: auto;
    font-weight: bold;
    font-size: smaller;
}
 
#content .pull-quote__source::before {
    content: "~ "; 
}
 
#content .pull-quote--right, #content .pull-quote--left {
    border: 1px solid var(--pull-quote-frame-color);
    border-left: 0;
    border-right: 0;
    padding: 1em 0;
    text-align: justify;
}
 
#content .pull-quote--right {
    float: right;
    margin: 1em 0 1em 2em;
}
 
#content .pull-quote--left {
    float: left;
    margin: 1em 2em 1em 0;
}

/* Template:Mbox */
.mbox {
    --type-important: rgba(200, 0, 0, 0.8);
    --type-moderate: rgba(233, 124, 47, 0.8);
    --type-minor: rgba(241, 197, 37, 0.8);
    --type-stable: rgba(0, 128, 0, 0.8);
    display: flex;
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #d6d6d6;
    border-left-width: 8px;
    border-left-color: #d6d6d6;
    border-radius: 3px;
    margin-bottom: 5px;
    min-height: 32px;
}

/* Ensure text is readable in the FandomDesktop dark theme. */
.theme-fandomdesktop-dark .mbox {
    background-color: var(--theme-page-background-color--secondary);
    border-color: var(--theme-border-color);
}
 
.mbox.mbox-type-important {
    border-left-color: var(--type-important);
}
 
.mbox.mbox-type-moderate {
    border-left-color: var(--type-moderate);
}
 
.mbox.mbox-type-minor {
    border-left-color: var(--type-minor);
}

.mbox.mbox-type-stable {
    border-left-color: var(--type-stable);
}
 
.mbox__content {
    display: table;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 15px;
}
 
.mbox__content__image {
    display: table-cell;
    width: 40px;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding-right: 15px;
}
 
.mbox__content__wrapper {
    display: table-cell;
    vertical-align: middle;
}
 
.mbox__content__header {
    display: block;
    font-weight: bold;
}
 
.mbox__content__text {
    display: block;
}
 
.mbox__content__text__comment {
    font-size: small;
}
 
.mbox__content__aside {
    display: table-cell;
    width: 100px;
    vertical-align: middle;
    text-align: center;
    padding: 0 15px;
    border-left: 1px solid #d6d6d6;
}
 
.mbox__close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 7px;
    font-weight: bold;
    font-size: 16px;
    color: #bbb;
    cursor: pointer;
    transition: all .15s ease-in;
}
 
.mbox__close:hover {
    color: #777;
}
 
.mbox__close:after {
    content: '×';
}
 
.mw-collapsed + .mbox__close {
    transform: rotate(45deg);
    padding: 4px 7px 5px 2px;
}

/** Attempting to make Template:Mbox compatible with dark mode as well. 
**  @note: I'm not entirely sure of another way to achieve this at the moment.
**  If you do please replace this with whatever you know of, thank you in advance. 
**  -- Hype
**/
.theme-fandomdesktop-dark .mbox.mbox-type-important {
    border-left-color: rgba(203,0,0,0.8);
}

.theme-fandomdesktop-dark .mbox.mbox-type-moderate {
   border-left-color: rgba(233,124,47,0.8); 
}

.theme-fandomdesktop-dark .mbox.mbox-type-minor {
    border-left-color: rgba(241,197,37,0.8); 
}

.theme-fandomdesktop-dark .mbox.mbox-type-stable {
    border-left-color: rgba(0,128,0,0.8); 
}

/* Mainpage formatting */
.tcheadlines, .mainpagewelcome, .startertips, .didyouknow, .relatedwikis, .news, .samplearticles, .featuredhypos, .countdowns {
	background-color: var(--theme-page-background-color--secondary);
	border-radius: .3rem;
	border-left: .1rem solid var(--theme-border-color);
	border-right: .1rem solid var(--theme-border-color);
	display: flex;
	flex-flow: column;
	margin-top: .6rem;
	padding: .6rem;
	text-align: center;
}
.tcheadlines h2:nth-of-type(1), .mainpagewelcome h2:nth-of-type(1), .startertips h2:nth-of-type(1), .didyouknow h2:nth-of-type(1), .relatedwikis h2:nth-of-type(1), .news h2:nth-of-type(1), .samplearticles h2:nth-of-type(1), .featuredhypos h2:nth-of-type(1), .countdowns h2:nth-of-type(1) {
	justify-content: center;
	margin: 0 0 0.5em;
}
.featuredhypos h2:nth-of-type(2) {
	border: none;
	justify-content: center;
}
.countdowns h3 {
	border: none;
	margin: 0; 
	padding: 0;
}

/** Template colors **/
.mainpagewelcome {
	border-bottom: .4rem solid #ffb000;
	border-top: .4rem solid #ffb000;
}

.tcheadlines {
	border-bottom: .4rem solid #2f7ac1;
	border-top: .4rem solid #2f7ac1;
}

.startertips {
	border-bottom: .4rem solid #ff0;
	border-top: .4rem solid #ff0;
}

.didyouknow {
	border-bottom: .4rem solid #a2e8f2;
	border-top: .4rem solid #a2e8f2;
}

.relatedwikis {
	border-bottom: .4rem solid #dda0dd;
	border-top: .4rem solid #dda0dd;
}

.news {
	border-bottom: .4rem solid #90ee90;
	border-top: .4rem solid #90ee90;
}

.samplearticles {
	border-bottom: .4rem solid #ffc0cb;
	border-top: .4rem solid #ffc0cb;
}

.featuredhypos {
	border-bottom: .4rem solid #d4bbff;
	border-top: .4rem solid #d4bbff;
}

.countdowns {
	border-bottom: .4rem solid #f30;
	border-top: .4rem solid #f30;
}

/* Styling for the related wikis section on the mainpage */
.wikis-outer {
	display: flex;
	flex-flow: column;
    height: 5.5rem;
    margin-bottom: .5rem;
    overflow: auto;
    width: auto;
}

.wikis-inner {
	display: flex;
    width: max-content;
}

.wikis-mp {
    padding-right: 1rem;
}

/** Preparation for the new main page layout **/
.main-page-welcome,
.cyclone-headlines,
.new-user-tips {
	border-radius: 0.2rem;
	color: #000;
	font-size: 1.1rem;
	margin: 1rem 0;
	padding: 1.5rem;
}
/* Individual section colors */
.main-page-welcome {
	background: #ffccd9;
}
.cyclone-headlines {
	background: #94bee5;
}
.new-user-tips {
	background: #ffff89;
}
.theme-fandomdesktop-dark .main-page-welcome,
.theme-fandomdesktop-dark .cyclone-headlines,
.theme-fandomdesktop-dark .new-user-tips {
	background-color: var(--theme-page-background-color--secondary);
	border: .1rem solid var(--theme-border-color);
}

.main-page-welcome h2,
.cyclone-headlines h2,
.new-user-tips h2 {
	font-family: Rubik, Roboto Slab, serif;
	font-size: 2rem;
	font-weight: bold;
	margin: 0 0 0.5rem;
	padding-top: 0.2rem;
}

/** More dark theme compatibility stuff **/
/* For Lua-type season infoboxes */
.theme-fandomdesktop-dark .seasonheader {
	background-color: var(--theme-page-background-color--secondary);
}

.seasonheader {
	background-color: #CFCFCF;
}

/* For scale templates */
.theme-fandomdesktop-dark .sshws-template-header-text /* Template:Saffir-Simpson */{
    color: #e6e6e6;
}

.theme-fandomdesktop-dark .sshws-small-template-text, /* Template:Saffir-Simpson small */ 
.theme-fandomdesktop-dark .sshws-alt-small-template-text, /* Template:Saffir-Simpson small alt */
.theme-fandomdesktop-dark .nuc-usercane-template-text, /* Template:NUC usercane scale */
.theme-fandomdesktop-dark .aus-small-template-text /* Template:Australian scale small */ {
    color: #3a3a3a;
}

/* For RfX templates */
.boilerplate {
	border: 0.1rem solid #aaa;
	margin: 2rem 0 0;
	padding: 0 1rem;
}

.boilerplate.rfx-appr {
  background: #d0ffd0 !important; 
  color: #000 !important; 
  margin: 2em 0 0 0; 
  padding: 0 10px 0 10px;
  border: 1px solid #a5ffa5;
}

.boilerplate.rfx-deny,
.boilerplate.rfx-drew {
  background: #ffd0d0 !important; 
  color: #000 !important; 
  margin: 2em 0 0 0; 
  padding: 0 10px 0 10px;
  border: 1px solid #ffa5a5;
}

.theme-fandomdesktop-dark .boilerplate.rfx-appr,
.theme-fandomdesktop-dark .boilerplate.rfx-deny,
.theme-fandomdesktop-dark .boilerplate.rfx-drew {
	background: var(--theme-page-background-color--secondary);
	color: var(--theme-page-text-color);
}

/* For Template:Shortcut */
.shortcut ul {
	margin: .2rem 0 .2rem 1rem;
}

/* For Template:Staff tab*/
.theme-fandomdesktop-dark .stafftab {
	background: var(--theme-page-background-color--secondary);
	color: #fff !important;
}

/* For Template:Administration-Box */
.theme-fandomdesktop-dark .admin-box * span {
	color: #fff !important;
}

/* For Template:Div col start and Template:Div col end */
.profilecards {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: space-between;
}
.profilecards .portable-infobox {
	display: flex;
	flex-direction: column;
	max-width: 270px;
}
.profilecards .portable-infobox [data-source="description"] {
	height: 100%;
}
.profilecards .portable-infobox h2,
.profilecards .portable-infobox .pi-data {
	overflow: visible;
}
.pi-theme-StaffCard [data-source="extimage"] {
	justify-content: center;
}
.pi-theme-StaffCard [data-source="extimage"] img {
	height: 100px;
	width: auto;
}

/* For the Discord widget */
.discord-widget .widget-theme-dark .widget-header {
    background-color: var(--theme-accent-color);
}
.discord-widget .widget-theme-dark .widget-body, .discord-widget .widget-theme-dark .widget-footer {
    background-color: var(--theme-accent-color);
    color: #fff;
}
.discord-widget .widget-theme-dark .widget-footer-info {
    color: #fff;
}
.discord-widget .widget-theme-dark .widget-footer-info a {
    color: #eee;
    font-weight: 700;
    text-decoration: underline !important;
}
.discord-widget .widget-theme-dark .widget-member-avatar img {
    border: .15rem ridge var(--theme-accent-color);
    background-color: var(--theme-accent-color);
}
.discord-widget .widget-member .widget-member-name {
    background-color: var(--theme-accent-color);
}
.discord-widget .widget-theme-dark .widget-role-name {
    background: var(--theme-accent-color);
    border-radius: .3rem;
    color: #fff;
    padding: .25rem .5rem;
}
.discord-widget .widget-theme-dark .widget-btn-connect {
    background-color: #F8F8F6;
    border: 0;
    color: #044143;
}
.discord-widget .widget-theme-dark .widget-btn-connect:hover {
    background-color: #d9d4cc;
    border: 0;
    color: #3a3a3a;
    opacity: 1;
}
.discord-widget .widget-theme-dark .widget-body {
    background: url(https://static.wikia.nocookie.net/hypotheticalhurricanes/images/0/01/Community-Page-Header.jpg/revision/latest?cb=20190714173309) top / cover;
    box-shadow: none;
}

/* {{pp|small=yes}} */
.div-col {
	margin-top: 0.3em;
	column-width: 30em;
}

.div-col-small {
	font-size: 90%;
}

.div-col-rules {
	column-rule: 1px solid #aaa;
}

/* Reset top margin for lists in div col */
.div-col dl,
.div-col ol,
.div-col ul {
	margin-top: 0;
}

/* Avoid elements breaking between columns
   See also Template:No col break */
.div-col li,
.div-col dd {
	page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */
	break-inside: avoid-column;
}