Template:Panel/styles.css
Template page
More actions
.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; }