m (Fix message box layout, hack for link readability on message boxes) |
(bold text should show with a brighter color) |
||
Line 1: | Line 1: | ||
.portable-infobox p { | .portable-infobox p { | ||
margin: 0; | margin: 0; | ||
} | |||
.mw-parser-output b { | |||
color: var(--color-base--emphasized); | |||
} | } | ||
Revision as of 21:39, 29 April 2023
.portable-infobox p {
margin: 0;
}
.mw-parser-output b {
color: var(--color-base--emphasized);
}
/**
* 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;
padding: 0 var( --space-sm );
font-weight: var( --font-weight-semibold );
}
.mbox-text {
grid-area: text;
padding: 0 var(--space-sm);
}
.mbox-icon img {
width: 20px;
height: auto;
margin-right: var( --space-xs );
opacity: 0.5;
}
/* HACK */
.mbox a {
color: var( --color-base--emphasized ) !important;
font-weight: 600;
}
.mbox a:hover, .mbox a:focus {
text-decoration: underline;
}
/* 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
*/