Template:Navbox/Styles.css

/* */

.zw-navbox { border: 1px solid #426787; border-radius: 0.25rem; clear: both; font-size: 0.875rem; margin-top: 0.5rem; padding: 0.125rem; width: 100%; }

.zw-navbox__header { display: flex; flex-shrink: 0; justify-content: space-between; gap: 0.25rem;

background-color: #17568c; border-radius: 0.25rem; font-size: 1rem; font-weight: bold; margin-bottom: 0.125rem; padding: 0.75rem 0.25rem; transition: background-color 300ms; } .zw-navbox__header:hover { background-color: #245681; } .zw-navbox__header.mw-collapsible-toggle { float: none; } .zw-navbox__header.mw-collapsible-toggle-collapsed { margin-bottom: 0; }

/* The ensures that the title is properly centered */ .zw-navbox__toggle-button { flex: 0 0 4rem; } .zw-navbox__title { display: flex; align-items: center; gap: 0.25rem; } .zw-navbox__toggle-button-counterbalance { flex: 0 1 4rem; }

.zw-navbox__toggle-button { font-weight: normal; text-align: center; } .zw-navbox__toggle-button::before { content: '[' } .zw-navbox__toggle-button::after { content: ']'; } .zw-navbox__toggle-button-text { color: #f4f26b; } .zw-navbox__header:hover .zw-navbox__toggle-button-text { text-decoration: underline; }

.zw-navbox__body { display: flex; }

.zw-navbox__rows { display: grid; align-items: center; flex-grow: 1; }

.zw-navbox__row-header { display: flex; align-items: center; justify-content: center; height: calc(100% - 0.5rem);

background-color: #17568c; border-radius: 0.25rem; font-weight: bold; padding: 0.25rem 0.5rem; text-align: center; }

.zw-navbox__row-links { display: flex; align-items: center; height: 100%; } .zw-navbox__row-links-content { flex-grow: 1; padding: 0.25rem 0.25rem; } .zw-navbox__row-links-content--nogroups { padding: 0.5rem 0.25rem; text-align: center; }

.zw-navbox__link { white-space: nowrap; }

.zw-navbox__image { display: none; }

.zw-navbox__footer { background-color: #17568c; border-radius: 0.25rem; font-weight: bold; margin-top: 0.125rem; padding: 0.25rem; text-align: center; }

@media (min-width: 53.125rem) { .zw-navbox__rows { grid-template-columns: minmax(auto, 15%) 1fr; grid-template-rows: auto; gap: 0.125rem; }	.zw-navbox__row-header { grid-column: 1; }   .zw-navbox__row-links { grid-column: 2; }   .zw-navbox__row-links--nogroups { grid-column: 1/-1; }   .zw-navbox__row-links--even { background-color: #1a4d7a; border-radius: 0.25rem; } }

@media (min-width: 53.125rem) { .zw-navbox__header { padding: 0.25rem; /* Thinner navbox headers on desktop as the "fat finger" problem does not apply */ }	.zw-navbox__title { flex-shrink: 0; } }

@media (min-width: 68.75rem) { .zw-navbox__image { display: block; align-self: center; flex: 0 1 150px; padding: 0.25rem; text-align: center; }   .zw-navbox__image img { width: auto; height: auto; } }