Module:Message/styles.css

/**
 * Module:Message/styles.css
 * TemplateStyles for message boxes, stubs, quality banners, and inline tags.
 *
 * INSTALLATION:
 * 1. Create page: Module:Message/styles.css
 * 2. Paste this entire file
 * 3. Mark as sanitized CSS (Content model: Sanitized CSS)
 *
 * DARK MODE:
 * Uses [data-theme="dark"] selector to match wiki's dark mode toggle.
 */

/* ==========================================================================
   MESSAGE BOX (AMBOX)
   ========================================================================== */

.mbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin: 8px 0;
    border: 1px solid #a2a9b1;
    border-left-width: 3px;
    background-color: #f8f9fa;
    font-size: 0.9em;
    line-height: 1.5;
}

.mbox-image {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mbox-text {
    flex: 1;
    min-width: 0;
}

.mbox-text p:first-child {
    margin-top: 0;
}

.mbox-text p:last-child {
    margin-bottom: 0;
}

/* Small variant */
.mbox-small {
    padding: 8px 12px;
    font-size: 0.85em;
}

.mbox-small .mbox-image img {
    max-width: 30px;
    max-height: 30px;
}

/* Type variants */
.mbox-notice {
    border-left-color: #36c;
    background-color: #eaf3ff;
}

.mbox-warning {
    border-left-color: #fc3;
    background-color: #fef6e7;
}

.mbox-serious {
    border-left-color: #d33;
    background-color: #fee7e6;
}

.mbox-content {
    border-left-color: #f28500;
    background-color: #fff4e6;
}

.mbox-style {
    border-left-color: #fc3;
    background-color: #fffbe6;
}

.mbox-delete {
    border-left-color: #b32424;
    background-color: #ffdbdb;
}

.mbox-protection {
    border-left-color: #a2a9b1;
    background-color: #f8f9fa;
}

/* ==========================================================================
   QUALITY BANNER
   ========================================================================== */

.quality-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin: 8px 0;
    border: 1px solid;
    border-radius: 2px;
    font-size: 0.9em;
    line-height: 1.5;
}

.quality-icon {
    flex-shrink: 0;
}

.quality-text {
    flex: 1;
    min-width: 0;
}

.quality-text strong {
    display: inline;
}

/* Quality levels */
.quality-unverified {
    border-color: #fc3;
    background-color: #fef6e7;
}

.quality-wip {
    border-color: #36c;
    background-color: #eaf3ff;
}

.quality-verified {
    border-color: #14866d;
    background-color: #d5fdf4;
}

/* ==========================================================================
   STUB BOX
   ========================================================================== */

.stub-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    margin: 16px 0;
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    font-size: 0.9em;
    line-height: 1.5;
    text-align: left;
}

.stub-icon {
    flex-shrink: 0;
}

.stub-text {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   INLINE TAGS
   ========================================================================== */

.inline-tag {
    font-size: 0.85em;
    font-weight: normal;
    font-style: normal;
    margin-left: 2px;
    white-space: nowrap;
}

.inline-tag a {
    color: #d33;
}

.inline-tag a:hover {
    color: #b32424;
}

/* ==========================================================================
   AS OF
   ========================================================================== */

.as-of {
    font-style: italic;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .mbox {
    border-color: #72777d;
    background-color: #27292d;
    color: #c8ccd1;
}

[data-theme="dark"] .mbox-notice {
    border-left-color: #447ff5;
    background-color: #1a2a3d;
}

[data-theme="dark"] .mbox-warning {
    border-left-color: #fc3;
    background-color: #3d3520;
}

[data-theme="dark"] .mbox-serious {
    border-left-color: #ff5b5b;
    background-color: #3d1f1f;
}

[data-theme="dark"] .mbox-content {
    border-left-color: #f28500;
    background-color: #3d2a15;
}

[data-theme="dark"] .mbox-style {
    border-left-color: #fc3;
    background-color: #3d3520;
}

[data-theme="dark"] .mbox-delete {
    border-left-color: #ff5b5b;
    background-color: #3d1a1a;
}

[data-theme="dark"] .mbox-protection {
    border-left-color: #72777d;
    background-color: #27292d;
}

[data-theme="dark"] .quality-banner {
    color: #c8ccd1;
}

[data-theme="dark"] .quality-unverified {
    border-color: #fc3;
    background-color: #3d3520;
}

[data-theme="dark"] .quality-wip {
    border-color: #447ff5;
    background-color: #1a2a3d;
}

[data-theme="dark"] .quality-verified {
    border-color: #00af89;
    background-color: #1a3d35;
}

[data-theme="dark"] .stub-box {
    border-color: #72777d;
    background-color: #27292d;
    color: #c8ccd1;
}

[data-theme="dark"] .inline-tag a {
    color: #ff6b6b;
}

[data-theme="dark"] .inline-tag a:hover {
    color: #ff8a8a;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .mbox,
    .quality-banner,
    .stub-box {
        border-color: #000 !important;
        background-color: #fff !important;
        color: #000 !important;
    }

    .inline-tag {
        display: none;
    }
}