Template:Village pump/styles.css

.tpl-vp-sections { background-color: #f8f9fa; border: 1px solid #a2a9b1; border-bottom: 0; clear: none; float: left; margin: 0 auto; text-align: center; } .tpl-vp-sections.tpl-vp-colors { background-color: #fffaea; border:2px solid #bfb1a3; } .tpl-vp-heading { background-color: #eaecf0; font-size: 140%; font-weight: bold; } .tpl-vp-colors .tpl-vp-heading, .tpl-vp-colors .tpl-vp-footer { background-color: #eee9d9 } .tpl-vp-blocks { border: 1px solid #a2a9b1; border-bottom: 0; border-right: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 -1px; } .tpl-vp-block { border-bottom: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; display: flex; flex: 1 1; flex-direction: column; padding: 1em .5em; text-align: center; min-width: 8em; } .tpl-vp-block > div:nth-child(2) { font-size: larger; font-weight: bold; } .tpl-vp-all { padding: .5em 0; } .tpl-vp-footer { align-items: center; background-color: #eaecf0; border-top: 1px solid #a2a9b1; display: flex; padding: .5em; } @media screen and (max-width: 720px) { .tpl-vp-footer input { max-width: 15em; white-space: normal; } }

@media screen { html.skin-theme-clientpref-night .tpl-vp-sections, html.skin-theme-clientpref-night .tpl-vp-footer, html.skin-theme-clientpref-night .tpl-vp-heading { background-color: var( --background-color-neutral-subtle ); } } @media screen and (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .tpl-vp-sections, html.skin-theme-clientpref-os .tpl-vp-footer, html.skin-theme-clientpref-os .tpl-vp-heading { background-color: var( --background-color-neutral-subtle ); } }