astro-tips/styles/tips.css

🎨 Beautiful, customizable tip and notice blocks for Astro - 16 built-in styles with auto dark mode support and built-in compression

/* 布局样式 */
.astro-tips-layout {
    margin: 0.5rem 0;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    border: 1px solid;
    border-left-width: 6px;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
    min-width: 2rem;
    height:auto;
    overflow-x: auto; 
    overflow-y: hidden; 
}

.astro-tips-layout:hover {
    transform: translateX(5px);
}

.astro-tips-layout .icon {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: clamp(2em, 2vw, 3em);
    min-width: 2rem;
    scale: 1.5;
    transition: transform 0.3s ease;
}

.astro-tips-layout:hover .icon {
    transform: scale(1.3);
}

.astro-tips-layout .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease;
    line-height: 1.6;
}

.astro-tips-layout:hover .content {
    transform: translateX(3px);
}

.content > *:first-child {
    margin-top: 0;
}

.content > *:last-child {
    margin-bottom: 0;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .astro-tips-layout {
        padding: 1rem;
    }
}

/* 为每种类型的提示框添加主题样式 */
[class^="tips-style-"] {
    --tips-light-bg: #fff; /* 默认值 */
    --tips-dark-bg: #333;  /* 默认值 */
    --tips-border: #000;   /* 默认值 */
}

/* 主题样式规则 */
.astro-tips-layout {
    border-color: var(--tips-border);
}

.astro-tips-layout .icon {
    color: var(--tips-border);
}

/* 1. 手动暗色模式优先 */
html.dark .astro-tips-layout {
    background-color: var(--tips-dark-bg);
}

/* 2. 系统暗色模式其次 */
@media (prefers-color-scheme: dark) {
    html:not(.light) .astro-tips-layout {
        background-color: var(--tips-dark-bg);
    }
}

/* 3. 亮色模式最后 */
html:not(.dark) .astro-tips-layout,
html.light .astro-tips-layout {
    background-color: var(--tips-light-bg);
}