Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Mbox/styles.css: Difference between revisions

Template page
Created page with "Based on https://starcitizen.tools/Module:Mbox/styles.css: .mbox { position: relative; display: flex; flex-direction: column; margin-block: var(--space-md); background-color: var(--color-surface-1); border: var(--border-base); border-radius: var(--border-radius-medium); font-size: var(--font-size-small); line-height: var(--line-height-xx-small); } .mbox.mbox-high { background-color: var(--background-color-destructive-subtle); } .mbox.mbox-med { backgro..."
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 4: Line 4:
position: relative;
position: relative;
display: flex;
display: flex;
flex-direction: column;
align-items: center;
margin-block: var(--space-md);
margin-block: var(--space-md);
background-color: var(--color-surface-1);
background-color: var(--color-surface-1);
border: var(--border-base);
border: var(--border-base);
border-radius: var(--border-radius-medium);
border-left: 5px solid var(--color-progressive);
border-radius: var(--tg-border-radius-small);
font-size: var(--font-size-small);
font-size: var(--font-size-small);
line-height: var(--line-height-xx-small);
line-height: var(--line-height-xx-small);
Line 19: Line 20:
.mbox.mbox-med {
.mbox.mbox-med {
background-color: var(--background-color-warning-subtle);
background-color: var(--background-color-warning-subtle);
}
.mbox-content {
display: flex;
flex-direction: column;
}
}


Line 27: Line 33:


.mbox-title {
.mbox-title {
display: flex;
font-weight: var(--font-weight-semi-bold);
align-items: center;
font-size: var(--font-size-medium);
}
}


.mbox-icon img {
.mbox-icon img {
display: block;
display: block;
width: var(--font-size-small);
width: auto;
height: auto;
height: var(--font-size-x-large);
margin-right: var(--space-xs);
margin-right: var(--space-xs);
opacity: var(--opacity-icon-base);
filter: var(--filter-invert);
}
}


.mbox-text {
.mbox-text {
position: absolute;
padding-top: 0;
top: 100%;
left: 0;
right: 0;
z-index: 10;
margin-inline: -1px;
box-sizing: border-box;
background-color: var(--color-surface-1);
border-inline: var(--border-base);
border-bottom: var(--border-base);
border-bottom-left-radius: var(--border-radius-medium);
border-bottom-right-radius: var(--border-radius-medium);
box-shadow: var(--box-shadow-drop-xx-large);
opacity: 0;
visibility: hidden;
}
 
.mbox-text::before {
content: '';
display: block;
position: absolute;
top: 0;
left: var(--space-md);
right: var(--space-md);
height: var(--border-width-base);
background: var(--border-color-subtle);
}
 
.mbox:hover {
/* Merge with popup */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: var(--box-shadow-drop-xx-large);
}
 
.mbox:hover .mbox-text {
opacity: 1;
visibility: visible;
}
}

Latest revision as of 13:47, 2 November 2025

/* Based on https://starcitizen.tools/Module:Mbox/styles.css */

.mbox {
	position: relative;
	display: flex;
	align-items: center;
	margin-block: var(--space-md);
	background-color: var(--color-surface-1);
	border: var(--border-base);
	border-left: 5px solid var(--color-progressive);
	border-radius: var(--tg-border-radius-small);
	font-size: var(--font-size-small);
	line-height: var(--line-height-xx-small);
}

.mbox.mbox-high {
	background-color: var(--background-color-destructive-subtle);
}

.mbox.mbox-med {
	background-color: var(--background-color-warning-subtle);
}

.mbox-content {
	display: flex;
	flex-direction: column;
}

.mbox-title,
.mbox-text {
	padding: var(--space-sm) var(--space-md);
}

.mbox-title {
	font-weight: var(--font-weight-semi-bold);
	font-size: var(--font-size-medium);
}

.mbox-icon img {
	display: block;
	width: auto;
	height: var(--font-size-x-large);
	margin-right: var(--space-xs);
}

.mbox-text {
	padding-top: 0;
}