Module:Message box/ambox.css: Difference between revisions

/* === ambox (merged from ombox) === */

/* {{pp|small=y}} */
.ambox {
    margin: 4px 0;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;                               /* Default “notice” gray */
    background-color: var(--background-color-neutral-subtle, #f8f9fa);
    box-sizing: border-box;
    color: var(--color-base, #202122);
}

/* For the "small=yes" option. */
.ambox.mbox-small {
    font-size: 88%;
    line-height: 1.25em;
}

/* Speedy: red */
.ambox-speedy {
    /* @noflip */ border-left: 10px solid #b32424;
    background-color: #fee7e6;
}

/* Delete: red border only */
.ambox-delete {
    /* @noflip */ border-left: 10px solid #b32424;
}

/* Content: orange */
.ambox-content {
    /* @noflip */ border-left: 10px solid #f28500;
}

/* Style: yellow */
.ambox-style {
    /* @noflip */ border-left: 10px solid #fc3;
}

/* Notice: blue */
.ambox-notice {
    /* @noflip */ border-left: 10px solid #3199f0;
}

/* Move: purple */
.ambox-move {
    /* @noflip */ border-left: 10px solid #9932cc;
}

/* Protection: gray-gold */
.ambox-protection {
    /* @noflip */ border-left: 10px solid #a2a9b1;
}

/* Inner structure */
.ambox .mbox-text {
    border: none;
    /* @noflip */ padding: 0.25em 0.9em;
    width: 100%;
}
.ambox .mbox-image {
    border: none;
    /* @noflip */ padding: 2px 0 2px 0.9em;
    text-align: center;
}
.ambox .mbox-imageright {
    border: none;
    /* @noflip */ padding: 2px 0.9em 2px 0;
    text-align: center;
}
/* An empty narrow cell */
.ambox .mbox-empty-cell {
    border: none;
    padding: 0;
    width: 1px;
}

/* Wide-screen centering */
@media (min-width: 720px) {
    .ambox {
        margin: 4px 10%;
    }
    .ambox.mbox-small {
        /* @noflip */ clear: right;
        /* @noflip */ float: right;
        /* @noflip */ margin: 4px 0 4px 1em;
        width: 238px;
    }
}

/* Hide in print on main namespace */
@media print {
    body.ns-0 .ambox {
        display: none !important;
    }
}

/* === Dark-mode tweak for speedy variant only === */
@media screen {
    html.skin-theme-clientpref-night .ambox-speedy {
        background-color: #310402; /* Dark red, same hue/sat as light */
    }
}
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .ambox-speedy {
        background-color: #310402;
    }
}