Template:Hide/Styles.css

/* [[Category:Template Styles]] */

.template-hide {
	display: table;
}

.template-hide--framed {
    border: 1px solid #426787;
    border-radius: 0.5rem;
    clear: left;
    margin-bottom: 0.5rem;
    padding: 0.25rem;
}

.template-hide--stretch {
	display: block;
}

/* Prevents the header from unexpectedly changing width by having it the same width as the content, even when the content is collapsed */
.template-hide--framed.mw-collapsed .template-hide__content, 
.template-hide--framed.mw-collapsed .template-hide__content > * {
	display: block !important;  /* Override the inline display:none set by MediaWiki's JavaScript */
	height: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	visibility: hidden; 
}

.template-hide__header.mw-collapsible-toggle {
	float: none;
}

.template-hide__header {
    cursor: pointer;
    font-weight: bold;
}

.template-hide--framed .template-hide__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;

    background-color: #17568c;
    background-image: linear-gradient(#1d679b, #1a4e7d);
    border: 2px solid #426787;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
	transition: 300ms;
}

.template-hide--framed .template-hide__header:hover {
    background-color: #214b71;
    background-image: linear-gradient(#305f89, #17456e);
}

.template-hide__header-text {
	flex-shrink: 0;
}
.template-hide__toggle-button {
    font-weight: normal;
}
.template-hide--frameless .template-hide__toggle-button {
	margin-left: 0.5rem;
}
.template-hide--framed .template-hide__toggle-button {
	flex: 0 0 4rem;
}
.template-hide--framed .template-hide__toggle-button-counterbalance {
	flex: 0 1 4rem;
}
.template-hide__toggle-button::before {
	content: '[';
}
.template-hide__toggle-button::after {
	content: ']';
}
.template-hide__toggle-button-text {
	color: #f4f26b;
}
.template-hide__header:hover .template-hide__toggle-button-text {
	text-decoration: underline;
}

.template-hide--framed .template-hide__content {
	margin: 0.5rem;
}