MediaWiki:Custom-common.less/containers.less

/* Custom container styling ("boxes") for this wiki */

/* Message Boxes & Text Sections */ /* Coloring impl attributed to Minecraft Wiki (minecraft.fandom.com) */ /* Template:MessageBoxPlus */ .messagebox, .messagebox-inline { --box-background-color: ~"rgba(var(--theme-accent-color--rgb), .05)"; --box-border-color: var(--theme-accent-color); display: flex; justify-content: space-between; align-items: center; gap: 1em; margin: 1em 0; padding: .4em 1.6em; background-color: var(--box-background-color); box-shadow: inset 3px 0 0 0 var(--box-border-color), inset -3px 0 0 0 var(--box-border-color); border-radius: .5em; border: none; font-size: 14px; text-align: left; overflow: auto; } .textsection, .textsection-inline { --box-background-color: ~"rgba(var(--theme-accent-color--rgb), .2)"; --box-border-color: ~"rgba(var(--theme-accent-color--rgb), .5)"; padding: .5em 1em; background-color: var(--box-background-color); border-left: 5px solid var(--box-border-color); border-right: 5px solid var(--box-border-color); } .messagebox-inline, .textsection-inline { display: inline-flex; margin: 0 1em; } .messagebox-main { display: flex; align-items: center; gap: 1em; } table.messagebox td { /* for messageboxes that still uses a table */ padding: 0 0.8em; } .messagebox-blue, .textsection-blue { --box-background-color: var(--custom-background-blue-highlight); --box-border-color: var(--custom-border-blue-highlight); } .messagebox-green, .textsection-green { --box-background-color: var(--custom-background-green-highlight); --box-border-color: var(--custom-border-green-highlight); } .messagebox-orange, .textsection-gray { --box-background-color: var(--custom-background-orange-highlight); --box-border-color: var(--custom-border-orange-highlight); } .messagebox-purple, .textsection-purple { --box-background-color: var(--custom-background-purple-highlight); --box-border-color: var(--custom-border-purple-highlight); } .messagebox-red, .textsection-red { --box-background-color: var(--custom-background-red-highlight); --box-border-color: var(--custom-border-red-highlight); } .messagebox-yellow, .textsection-yellow { --box-background-color: var(--custom-background-yellow-highlight); --box-border-color: var(--custom-border-yellow-highlight); } .messagebox-magenta, .textsection-magenta { --box-background-color: var(--custom-background-magenta-highlight); --box-border-color: var(--custom-border-magenta-highlight); } .messagebox-gray, .textsection-gray { --box-background-color: var(--custom-background-grey); --box-border-color: var(--custom-border-grey); } /* Other Message Boxes */ .messagebox-disambiguations { font-size: 95%; text-align: center; margin: 6px auto; padding: 0 10px; border-radius: 10px; display: table; } .messagebox-warn, .messagebox-error { box-shadow: inset 3px 0 0 0 var(--theme-page-text-color), inset -3px 0 0 0 var(--theme-page-text-color); color: #eee; a { color: #fec356; } } .messagebox-warn { background-color: #905f00; } .messagebox-error { background-color: #7F0000; } /* Dark Message Box - Template:DarkMessageBox */ .darkmsgbox { margin: 1em auto; .darkmsgbox-image { padding: 15px; box-shadow: 0 0 5px var(--theme-accent-color); border: 1px solid; border-color: var(--theme-accent-color); .theme-fandomdesktop-dark & { background-color: var(--custom-adaptive-lighter); }		.theme-fandomdesktop-light & { background-color: var(--custom-adaptive-semidark); }	}	.darkmsgbox-text { padding: 3px 8px; box-shadow: 0 0 5px var(--theme-accent-color); border: 1px solid; border-color: var(--theme-accent-color); .theme-fandomdesktop-dark & { background-color: var(--custom-adaptive-semidark); }		.theme-fandomdesktop-light & { background-color: var(--custom-adaptive-lighter); }	}	.darkmsgbox-bottom { text-align: center; box-shadow: 0 0 5px var(--theme-accent-color); border: 1px solid; border-color: var(--theme-accent-color); .theme-fandomdesktop-dark & { background-color: var(--custom-adaptive-extradark); }		.theme-fandomdesktop-light & { background-color: #c9c9c9; /* using grayscale */ }	} }

/* AF Warning Styles */ .afwarning-box { .afwarning-mark { opacity: 75%; min-width: fit-content; .theme-fandomdesktop-light & { filter: invert(1); }	}	.afwarning-title { font-size: 2.3em; } } @media only screen and (max-width: 1023px) { .afwarning-box .afwarning-mark img { max-width: 250px; height: auto; } } @media only screen and (max-width: 785px) { .afwarning-box .messagebox-main { flex-direction: column; } }

/* Custom widgetbox styling */ .custom-widgetbox-gold { display: block; border: 2px solid #ed9a01; border-radius: 5px; padding: 10px; text-align: center; .custom-widgetbox-image { font-size: 1em; background-color: rgba(0,0,0,0.1); padding: .4em; text-align: center; }	.custom-widgetbox-bottomtext { padding-top: 1em; } }

/* Delete Box */ .delete-box { padding: 15px; margin: 5px; background-color: #7f1d1d; text-align: center; color: white; a { color: #fec356; }	hr { margin: 0.1em 3px; border: 0.5px solid tan; }	.button { padding: 10px; font-size: 1em; font-weight: bold; width: 100%; height: 100%; }	.delete-box-buttons { margin-left: 2%; margin-right: 2%; font-size: 14px; td:first-of-type { text-align: left; }		td:last-of-type { margin-right: 2em; }	}	.delete-box-reason { font-size: 14px; } }

/* Rightbox */ .hsw-rightbox { &.small { float: right; margin: 5px 2px 2px 5px; padding: 14px; text-align: center; font-size: 75%; }	&.medium { float: right; width: 240px; margin: .1em .1em .5em .25em; padding: 4px; }	&.small, &.medium { border: 1px solid var(--theme-accent-color); box-shadow: 0 0 5px var(--theme-accent-color); .theme-fandomdesktop-light & { background-color: #ddd; /* using grayscale */ }		.theme-fandomdesktop-dark & { background-color: var(--custom-adaptive-dark); }	}	.hsw-rightbox-sep { border-bottom: 1px solid #555; padding: 0 3px; clear: right; }	.hsw-rightbox-image { border-right: 0; padding: 0 12px; }	.hsw-rightbox-content { border-left: 0; width: 100%; padding: 0 5px 0 0; } } .hsw-luabox { float: right; width: 240px; margin: .1em .1em .5em .25em; padding: 4px; box-shadow: 0 0 5px var(--theme-accent-color); border: 1px solid var(--theme-accent-color); .theme-fandomdesktop-light & { background-color: #ddd; /* using grayscale */ }	.theme-fandomdesktop-dark & { background-color: var(--custom-adaptive-dark); }	.hsw-luabox-list { list-style-type: disc; margin: 0 0 0 15px; white-space: nowrap; }	.hsw-luabox-actions { font-size: small; } }	border-left: 0; padding: 12px 12px 12px 0; }	border-right: 0; padding: 0 12px; } .hsw-userbox-list { padding: 2.5px } .hsw-shortcut-list { font-weight: bold; } .hsw-archivebox { float: right; margin: 7px 0; border: 2px solid var(--theme-page-text-color); box-shadow: 0 0 15px #000000; .hsw-archivebox-header { padding: 1.5px; }	.hsw-archivebox-content { padding: 2px 15px; background-color: var(--custom-adaptive-light); }	.hsw-archivebox-text { padding: 0 15px; background-color: var(--custom-adaptive-light); text-align: center; }	.hsw-archivebox-list { padding: 4px 14px; border-top: 2px solid var(--custom-adaptive-extralight); border-bottom: 2px solid var(--custom-adaptive-extralight); }	.hsw-archivebox-search { padding: 4px; }	.mw-ui-input { font-size: small; }	.mw-ui-button { height: 32px; } } .hsw-archivelist { .hsw-archivelist-actions { font-size: 10px; } }
 * 1) content .hsw-luabox .hsw-luabox-content {
 * 1) content .hsw-luabox .hsw-luabox-icon {

/* 2020 SkyDate - Template:SkyDateCountdownWidget */ .skydate-countdown-active { color: green; } /* SkyDate Countdown Widget */ .skydate-countdown-widget { float: right; clear: right; margin: 0 0 5px 10px; min-width: 23em; table { border: 3px solid orange; width: 100%; }	.sdcw-title, .sdcw-subtitle { padding: 0 1.2em; div { font-weight: bold; text-align: center; font-family: Consolas, monospace; }	}	.sdcw-title div { font-size: 1.3em; }	.sdcw-subtitle div { font-size: .8em; }	.sdcw-legend { width: 8.5em; } } .skydate-countdown-widget-wrapper { display: flex; flex-direction: column; min-width: 22em; float: right; clear: right; }

/* SBTE - Template:CountdownBox */ .sbte-timestamp, .sbte-routine-waiting { color: #777; } .sbte-routine-ongoing { color: #4dcf4d; .theme-fandomdesktop-light & { color: #349134; } } .sbte-routine-stopped { color: #d87093; } .countdownbox { float: right; clear: right; margin: 0 0 5px 10px; min-width: 23em; table { border: 3px solid orange; width: 100%; }	.countdownbox-title, .countdownbox-subtitle { padding: 0 1.2em; div { font-weight: bold; text-align: center; font-family: Consolas, monospace; }	}	.countdownbox-title div { font-size: 1.3em; }	.countdownbox-subtitle div { font-size: .8em; }	.countdownbox-legend { width: 8.5em; } } /* widgetbox */ .widgetbox-wrapper { display: flex; flex-direction: column; min-width: 22em; float: right; clear: right; }

/* Tutorial box styling */ .tutorial-box-buttons { display: flex; justify-content: space-evenly; align-items: center; } .tutorial-box-inputbox { margin: 0 1em; max-width: 20em; }

/* Discord Link Box styling */ .discord-link-wrapper .discord-link { text-transform: none; font-size: 80%; display: contents; line-height: 80%; } .discord-link-wrapper .wds-button { border-color: black; margin: 0.7em; padding: 1em 8em; background-color: #0f090a; cursor: pointer; font-size: 1em; color: #e6e6e6; transition: all .5s; } .discord-link-wrapper .wds-button:hover { font-size: 1.2em; }

/* Retro userboxes */ .userbox-retro { .userbox-info { background-color: var(--custom-adaptive-extralight); }	.userbox-id { background-color: var(--custom-adaptive-light); } }

/* Documentation Boxes */ .hsw-documentation { border: 1.3px solid var(--theme-page-text-color); clear: both; .hsw-documentation-titlebox { padding: 18px 8px 2px 8px; margin: 4px 4px 0 4px; box-shadow: 0 0 2px var(--theme-page-text-color); .hsw-documentation-icon { float: left; }		.hsw-documentation-header { font: bold x-large Arial; margin-left: 7px; text-align: center; }		.hsw-documentation-actions { font-size: small; margin-left: 7px; }		.hsw-documentation-tnote { font-size: small; font-style: italic; }		.page-header__separator { background-color: var(--theme-accent-label-color); border: 0; height: 1px; margin-bottom: 3px; margin-top: 0; width: 100%; }		p { margin: 0; }	}	.hsw-documentation-body { background-color: rgba(120,120,120,0.05); box-shadow: 0 0 2px var(--theme-page-text-color); padding: 0.5em; margin: 0 4px; padding: 20px 20px 10px; clear: both; .hsw-documentation-main-idk { display: none; }		.hsw-documentation-main-pd { clear: both; margin-bottom: 5px; }	}	.hsw-documentation-bottombox { padding: 2px 8px; margin: 0 4px 4px 4px; box-shadow: 0 0 2px var(--theme-page-text-color); .hsw-documentation-hdtw { margin: 5px; font-weight: bold; }	}	.hsw-documentation-jtc, .hsw-documentation-btt { float: right; margin-top: 4px; font-style: italic; font-size: small; } }