No edit summary |
(Add styles for Template:Mbox) |
||
Line 2: | Line 2: | ||
margin: 0; | margin: 0; | ||
} | } | ||
/** | |||
* Adapted from https://starcitizen.tools/Template:Mbox/styles.css, | |||
* the following code is available under the CC-BY-SA 4.0 license. | |||
*/ | |||
.mbox { | |||
position: relative; | |||
display: grid; | |||
grid-template: | |||
'icon title' auto | |||
'icon text' auto | |||
/ 20px 1fr; | |||
padding: var(--space-sm) var(--space-md); | |||
gap: var(--space-sm) var(--space-md); | |||
align-items: center; | |||
margin-top: var( --space-xs ); | |||
margin-bottom: var( --space-md ); | |||
background-color: var( --color-surface-2 ); | |||
border-radius: var( --border-radius--medium ); | |||
color: var( --color-base--subtle ); | |||
font-size: 0.875rem; | |||
} | |||
.mbox-icon { | |||
grid-area: icon; | |||
} | |||
.mbox.mbox-danger { | |||
background-color: var( --background-color-destructive ); | |||
} | |||
.mbox.mbox-warning { | |||
background-color: var( --background-color-warning ); | |||
} | |||
.mbox.mbox-success { | |||
background-color: var( --background-color-success ); | |||
} | |||
.mbox-title { | |||
grid-area: title; | |||
display: flex; | |||
align-items: center; | |||
padding: 0 var( --space-sm ); | |||
font-weight: var( --font-weight-semibold ); | |||
} | |||
.mbox-text { | |||
grid-area: text; | |||
display: flex; | |||
align-items: center; | |||
padding: 0 var(--space-sm); | |||
} | |||
.mbox-icon img { | |||
width: 20px; | |||
height: auto; | |||
margin-right: var( --space-xs ); | |||
opacity: 0.5; | |||
} | |||
/* Dark mode */ | |||
html.skin-citizen-dark .mbox-icon img { | |||
filter: invert( 1 ); | |||
} | |||
/* Readability fixes */ | |||
html.skin-citizen-dark .mbox { | |||
color: var( --color-base--emphasized ); | |||
} | |||
/** | |||
* End CC-BY-SA 4.0 code | |||
*/ |
Revision as of 06:31, 26 April 2023
.portable-infobox p {
margin: 0;
}
/**
* Adapted from https://starcitizen.tools/Template:Mbox/styles.css,
* the following code is available under the CC-BY-SA 4.0 license.
*/
.mbox {
position: relative;
display: grid;
grid-template:
'icon title' auto
'icon text' auto
/ 20px 1fr;
padding: var(--space-sm) var(--space-md);
gap: var(--space-sm) var(--space-md);
align-items: center;
margin-top: var( --space-xs );
margin-bottom: var( --space-md );
background-color: var( --color-surface-2 );
border-radius: var( --border-radius--medium );
color: var( --color-base--subtle );
font-size: 0.875rem;
}
.mbox-icon {
grid-area: icon;
}
.mbox.mbox-danger {
background-color: var( --background-color-destructive );
}
.mbox.mbox-warning {
background-color: var( --background-color-warning );
}
.mbox.mbox-success {
background-color: var( --background-color-success );
}
.mbox-title {
grid-area: title;
display: flex;
align-items: center;
padding: 0 var( --space-sm );
font-weight: var( --font-weight-semibold );
}
.mbox-text {
grid-area: text;
display: flex;
align-items: center;
padding: 0 var(--space-sm);
}
.mbox-icon img {
width: 20px;
height: auto;
margin-right: var( --space-xs );
opacity: 0.5;
}
/* Dark mode */
html.skin-citizen-dark .mbox-icon img {
filter: invert( 1 );
}
/* Readability fixes */
html.skin-citizen-dark .mbox {
color: var( --color-base--emphasized );
}
/**
* End CC-BY-SA 4.0 code
*/