模板:Alert/styles.css

.markdown-alert {
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 12px;
    border: 1px solid var(--c-alert-border);
    border-left: 6px solid var(--c-alert);
    background-color: var(--c-alert-bg);
    color: var(--color-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.markdown-alert-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: 0 !important;
    margin-bottom: 0.5rem;
    color: var(--c-alert);
    line-height: 1.2;
}

.markdown-alert p:last-child {
    margin-bottom: 0;
}

.markdown-alert-title::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-image: var(--i-alert);
    display: inline-block;
}

.markdown-alert-note {
    --c-alert: #3182ce;
    --c-alert-bg: rgba(49, 130, 206, 0.1);
    --c-alert-border: rgba(49, 130, 206, 0.2);
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

.markdown-alert-tip {
    --c-alert: #38a169;
    --c-alert-bg: rgba(56, 161, 105, 0.1);
    --c-alert-border: rgba(56, 161, 105, 0.2);
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-1 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'%3E%3C/path%3E%3Cpath d='M9 18h6'%3E%3C/path%3E%3Cpath d='M10 22h4'%3E%3C/path%3E%3C/svg%3E");
}

.markdown-alert-important {
    --c-alert: #805ad5;
    --c-alert-bg: rgba(128, 90, 213, 0.1);
    --c-alert-border: rgba(128, 90, 213, 0.2);
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

.markdown-alert-warning {
    --c-alert: #dd6b20;
    --c-alert-bg: rgba(221, 107, 32, 0.1);
    --c-alert-border: rgba(221, 107, 32, 0.2);
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.markdown-alert-caution {
    --c-alert: #e53e3e;
    --c-alert-bg: rgba(229, 62, 62, 0.1);
    --c-alert-border: rgba(229, 62, 62, 0.2);
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
}

.markdown-alert-custom {
    --c-alert: var(--color-custom, #718096);
    --c-alert-bg: color-mix(in srgb, var(--c-alert), transparent 90%);
    --c-alert-border: color-mix(in srgb, var(--c-alert), transparent 80%);
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}

body.skin-theme-clientpref-night .markdown-alert {
    --c-alert-bg: rgba(255, 255, 255, 0.05);
}