Module:Message box/imbox.css: Difference between revisions
Fixes phab:T369874 via automated script |
m 1 revision imported |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
.imbox { | .imbox { | ||
margin: 4px 0; | margin: 4px 0; | ||
border: 3px solid #36c; /* Default "notice" blue */ | border: 3px solid #36c; /* Default "notice" blue */ | ||
background-color: var(--background-color-interactive-subtle, #f8f9fa); | background-color: var(--background-color-interactive-subtle, #f8f9fa); | ||
box-sizing: border-box; | box-sizing: border-box; | ||
overflow-x: hidden; | |||
} | } | ||
/* For imboxes inside imbox-text cells. */ | /* For imboxes inside imbox-text cells. */ | ||
.imbox .mbox-text .imbox { | .imbox .mbox-text .imbox { | ||
margin: 0 -0. | margin: 0 -0.6em; /* 1 - 0.6 = 0.4em left/right. */ | ||
} | } | ||
| Line 49: | Line 47: | ||
.imbox .mbox-text { | .imbox .mbox-text { | ||
padding: 0.35em 1em; | |||
flex: 1 1 100%; | |||
padding: 0. | |||
} | } | ||
.imbox .mbox-image { | .imbox .mbox-image, | ||
.imbox .mbox-imageright { | |||
padding: 4px 2px; | |||
padding: 2px | |||
text-align: center; | text-align: center; | ||
flex: none; | |||
} | } | ||
/* keep synced with each other type of message box as this isn't qualified */ | |||
.mbox-invalid-type { | |||
text-align: center; | text-align: center; | ||
} | } | ||
@media (min-width: 480px) { | |||
.imbox .mbox- | .imbox:not(.mbox-with-below), | ||
.imbox .mbox-flex { | |||
display: flex; | |||
align-items: center; | |||
} | } | ||
.imbox .mbox- | .imbox .mbox-image { | ||
/* @noflip */ | |||
padding-left: 1em; | |||
} | |||
.imbox .mbox-imageright { | |||
/* @noflip */ | |||
padding-right: 1em; | |||
} | |||
} | } | ||
@media (min-width: | @media (min-width: 640px) { | ||
.imbox { | .imbox { | ||
margin: 4px 10%; | margin: 4px 10%; | ||
} | } | ||
} | } | ||
@media screen { | @media screen { | ||
| Line 93: | Line 93: | ||
} | } | ||
@media screen and (prefers-color-scheme: dark) { | |||
@media screen and ( prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .imbox-speedy { | html.skin-theme-clientpref-os .imbox-speedy { | ||
background-color: #310402; /* Dark red, same hue/saturation as light */ | background-color: #310402; /* Dark red, same hue/saturation as light */ | ||
} | } | ||
} | } | ||