Template:Panel/styles.css: Difference between revisions

Latest revision as of 12:01, 3 August 2026

.wiki-panel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 1em 0;
    padding: 12px 16px;
    border-radius: 4px;
    border-left: 4px solid;
}
.wiki-panel-icon { font-size: 1.2em; flex-shrink: 0; }
.wiki-panel-body { flex: 1; }

.wiki-panel-info    { background: #deebff; border-color: #2684ff; }
.wiki-panel-note    { background: #eae6ff; border-color: #6554c0; }
.wiki-panel-warning { background: #fffae6; border-color: #ff991f; }
.wiki-panel-tip     { background: #e3fcef; border-color: #36b37e; }
.wiki-panel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 1em 0;
    padding: 12px 16px;
    border-radius: 4px;
    border-left: 4px solid;
    color: #172b4d; /* explicit dark text, don't inherit */
}
.wiki-panel-icon { font-size: 1.2em; flex-shrink: 0; }
.wiki-panel-body { flex: 1; }

.wiki-panel-info    { background: #deebff; border-color: #2684ff; }
.wiki-panel-note    { background: #eae6ff; border-color: #6554c0; }
.wiki-panel-warning { background: #fffae6; border-color: #ff991f; }
.wiki-panel-tip     { background: #e3fcef; border-color: #36b37e; }

/* Dark mode overrides — Citizen adds this class to <html> */
html.skin-citizen-dark .wiki-panel {
    color: #e6edf3;
}
html.skin-citizen-dark .wiki-panel-info    { background: #16283f; border-color: #4c9aff; }
html.skin-citizen-dark .wiki-panel-note    { background: #241f3d; border-color: #8777d9; }
html.skin-citizen-dark .wiki-panel-warning { background: #3d3315; border-color: #ffab00; }
html.skin-citizen-dark .wiki-panel-tip     { background: #123527; border-color: #57d9a3; }