Plantilla:Upperbox/styles.css

/* Echanted Upperboxes 

---Autores:
-- Haobo12 (código original)
-- Dark (estilos generales para calamity)
---

--Versión: V 2.1
--Última actualización: 1/11/2023

*/

/* Inicializando estilos.... */
.calamity-upperbox {
	background-color: var(--custom-template-background);
	border-radius: 1rem;
	padding: 1rem;
	margin: 1rem 0;
	display: flex !important;
	gap: 1rem;
	align-items: center;
	position: relative;
}

.calamity-upperbox__toggle {
	position: absolute;
	/* propiedad inset en common.css */
	font-size: .75em;
	transform: rotate(45deg);
	transition: transform .2s;
    background: none;
}
.calamity-upperbox__toggle:hover {
    border: none !important;
}

.calamity-upperbox.mw-collapsed .calamity-upperbox__toggle {
	transform: rotate(0);
}

.calamity-upperbox__icon {
	width: 60px;
	height: 60px;
/*	background-image: var(--cal-hexagon);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;*/
	display: grid;
	place-items: center;
	font-size: 30px;
	transition: width .2s, height .2s, font-size .2s; 
}

.calamity-upperbox.mw-collapsed .calamity-upperbox__icon {
	width: 1.25em;
	height: 1.25em;
	font-size: 1.55em;
}

.calamity-upperbox__image img {
	width: auto;
	height: auto;
	transition: height .2s, width .2s;
	object-fit: contain;
}

.calamity-upperbox.mw-collapsed .calamity-upperbox__image img {
	height: 2.25em;
	width: 50px;
}

.calamity-upperbox__header {
	font-weight: bold;
	font-family: Rubik;
	font-size: 1.15em;
}

.calamity-upperbox__content {
	font-size: inherit;
	transition: font-size .2s;
	visibility: visible;
	font-size: .85em;
}

.calamity-upperbox.mw-collapsed .calamity-upperbox__content {
	font-size: 0;
	visibility: collapse;
}

/* Colores */
.calamity-upperbox.upperbox-estado {
    background-color: var(--custom-upperbox-background-estado);
    border-left: 4px solid;
    border-left-color: var(--custom-upperbox-border-estado);
}
.calamity-upperbox.upperbox-info {
    background-color: var(--custom-upperbox-background-info);
    border-left:4px solid;
    border-left-color: var(--custom-upperbox-border-info);
}
.calamity-upperbox.upperbox-mod {
    background-color: var(--custom-upperbox-background-mod);
    border-left:4px solid;
    border-left-color: var(--custom-upperbox-border-mod);
}
.calamity-upperbox.upperbox-venganza {
    background-color: var(--custom-upperbox-background-venganza);
    border-left:4px solid;
    border-left-color: var(--custom-upperbox-border-venganza);
}
.calamity-upperbox-oldcontent {
    background-color: var(--custom-upperbox-background-oldcontent) !important;
    border-left: 5px solid var(--custom-upperbox-border-oldcontent) !important;
    box-shadow: 0 4px 6px 0 rgba(219,94,210,0.2) !important;
}
.calamity-upperbox-eliminar {
    background-color: var(--custom-upperbox-background-eliminar) !important;
    border-left: 4px solid;
    border-left-color: var(--custom-upperbox-border-eliminar);
}