MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:39, 4 April 2026

.cdx-message {
    background-color: var(--background-color-notice-subtle, #eaecf0);
    color: var(--color-base, #202122);
    display: flex;
    align-items: flex-start;
    position: relative;
    border: 1px solid var(--border-color-notice, #72777d);
    border-radius: 2px;
    padding: 12px;
}

.cdx-message--warning {
    background-color: var(--background-color-warning-subtle, #fdf2d5);
    border-color: var(--border-color-warning, #ab7f2a);
}

.cdx-message .cdx-message__icon--vue {
    color: var(--color-icon-notice,#72777d)
}

.cdx-message--warning {
    background-color: var(--background-color-warning-subtle,#fdf2d5);
    border-color: var(--border-color-warning,#ab7f2a)
}

.cdx-message--warning .cdx-message__icon {
    min-width: 10px;
    min-height: 10px;
    width: calc(var(--font-size-medium,1rem) + 4px);
    height: calc(var(--font-size-medium,1rem) + 4px);
    display: inline-block;
    vertical-align: text-bottom
}

@supports not (((-webkit-mask-image: none) or (mask-image:none))) {
    .cdx-message--warning .cdx-message__icon {
        background-position:center;
        background-repeat: no-repeat;
        background-size: max(calc(var(--font-size-medium,1rem) + 4px),10px)
    }
}

@supports ((-webkit-mask-image: none) or (mask-image:none)) {
    .cdx-message--warning .cdx-message__icon {
        -webkit-mask-position:center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: max(calc(var(--font-size-medium,1rem) + 4px),10px);
        mask-size: max(calc(var(--font-size-medium,1rem) + 4px),10px)
    }
}

@supports not (((-webkit-mask-image: none) or (mask-image:none))) {
    .cdx-message--warning .cdx-message__icon {
        background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>');
        filter: invert(var(--filter-invert-icon,0));
        opacity: var(--opacity-icon-base,.87)
    }
}

@supports ((-webkit-mask-image: none) or (mask-image:none)) {
    .cdx-message--warning .cdx-message__icon {
        -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>');
        background-color: var(--color-icon-warning,#ab7f2a);
    }
}

.cdx-message--warning .cdx-message__icon--vue {
    color: var(--color-icon-warning,#ab7f2a)
}