Template:Navbox/Styles.css: Difference between revisions
From Zelda Wiki, the Zelda encyclopedia
no edit summary
PhantomCaleb (talk | contribs) No edit summary |
PhantomCaleb (talk | contribs) No edit summary |
||
| (26 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* [[Category:Template Styles]] */ | |||
.zw-navbox { | .zw-navbox { | ||
border: 1px solid #426787; | border: 1px solid #426787; | ||
| Line 13: | Line 15: | ||
flex-shrink: 0; | flex-shrink: 0; | ||
justify-content: space-between; | justify-content: space-between; | ||
gap: 0.25rem; | |||
background-color: # | background-color: #17568c; | ||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
font-size: 1rem; | font-size: 1rem; | ||
font-weight: bold; | font-weight: bold; | ||
margin-bottom: 0.125rem; | margin-bottom: 0.125rem; | ||
padding: 0.25rem; | padding: 0.75rem 0.25rem; | ||
transition: background-color 300ms; | |||
} | } | ||
.zw-navbox__header:hover { | .zw-navbox__header:hover { | ||
| Line 36: | Line 40: | ||
} | } | ||
.zw-navbox__title { | .zw-navbox__title { | ||
display: flex; | |||
align-items: center; | |||
gap: 0.25rem; | |||
} | } | ||
.zw-navbox__toggle-button-counterbalance { | .zw-navbox__toggle-button-counterbalance { | ||
flex | flex: 0 1 4rem; | ||
} | } | ||
| Line 66: | Line 72: | ||
display: grid; | display: grid; | ||
align-items: center; | align-items: center; | ||
flex-grow: 1; | |||
} | } | ||
| Line 72: | Line 79: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
height: calc(100% - 0. | height: calc(100% - 0.5rem); | ||
background-color: # | background-color: #17568c; | ||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
font-weight: bold; | font-weight: bold; | ||
padding: 0. | padding: 0.25rem 0.5rem; | ||
text-align: center; | |||
} | } | ||
| Line 83: | Line 91: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
height: | height: 100%; | ||
padding: 0. | } | ||
.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; | |||
} | } | ||
| Line 92: | Line 111: | ||
.zw-navbox__footer { | .zw-navbox__footer { | ||
background-color: # | background-color: #17568c; | ||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
font-weight: bold; | font-weight: bold; | ||
margin-top: 0.125rem; | |||
padding: 0.25rem; | padding: 0.25rem; | ||
text-align: center; | text-align: center; | ||
} | } | ||
@media (min-width: 53.125rem) { | @media (min-width: 53.125rem) { | ||
.zw-navbox__rows { | .zw-navbox__rows { | ||
grid-template-columns: auto 1fr | grid-template-columns: minmax(auto, 15%) 1fr; | ||
grid-template-rows: auto; | grid-template-rows: auto; | ||
gap: 0.125rem; | gap: 0.125rem; | ||
} | } | ||
.zw-navbox__row-header { | .zw-navbox__row-header { | ||
| Line 117: | Line 130: | ||
.zw-navbox__row-links { | .zw-navbox__row-links { | ||
grid-column: 2; | grid-column: 2; | ||
} | |||
.zw-navbox__row-links--nogroups { | |||
grid-column: 1/-1; | |||
} | } | ||
.zw-navbox__row-links--even { | .zw-navbox__row-links--even { | ||
| Line 122: | Line 138: | ||
border-radius: 0.25rem; | 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; | |||
} | |||
} | } | ||
| Line 128: | Line 153: | ||
display: block; | display: block; | ||
align-self: center; | align-self: center; | ||
flex: 1 | flex: 0 1 150px; | ||
padding: 0.25rem; | padding: 0.25rem; | ||
text-align: center; | |||
} | } | ||
.zw-navbox__image img { | .zw-navbox__image img { | ||
width: | width: auto; | ||
height: | height: auto; | ||
} | } | ||
} | } | ||
