MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */ .center { width: 100%; text-align: center; } .news-box { border-color: #2b2f36; background-color: #24262f; } .card { margin: 0 0.2rem 0.4rem 0.2rem; min-width: 240px; max-width: 100%; display: flex; font-size: 0.875rem; flex-grow: 1; flex-direction: column; justify-content: space-between; box-sizing: border-box; border: 1px solid #eaecf0; background-color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease; }

.card:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.0475), 0 6px 6px rgba(0, 0, 0, 0.0575); }

.card-col2 { width: calc(100% / 2 - 0.4rem); }

.card-col3 { width: calc(100% / 3 - 0.4rem); }

.card-col4 { width: calc(100% / 4 - 0.4rem); }

.card-col5 { width: calc(100% / 5 - 0.4rem); }

.card-col6 { width: calc(100% / 6 - 0.4rem); }

.card-container { margin-top: 1.6rem !important; margin-bottom: 1.6rem !important; margin-left: -0.2rem; margin-right: -0.2rem; }

.card-container.floatnone { padding: 0 20px; }

.card-row { display: flex; width: 100%; flex-wrap: wrap; }

.card-caption { font-size: 0.875rem; font-weight: 600; }

.card-image a { display: flex; justify-content: center; overflow: hidden; background: none !important; }

.card-image a img { transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0); }

.card:hover .card-image a img { transform: scale(1.1); }

.card .card-title { margin-top: 0; margin-bottom: 0.8rem; line-height: 1.2; font-size: 1.25rem; color: #222222; font-family: 'Titillium Web', 'Univia Pro', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-weight: 600; }

/* CSS hack */ .card .card-title+.byline-bottom { margin-top: -0.6rem; }

.card ol, .card ul { margin: 0; padding-left: 1.6rem; }

.card .byline-top, .card .byline-bottom { color: #72777d; font-size: 0.825rem; }

.card .byline-top { margin: 0 0 0.2rem 0; }

.card .byline-bottom { margin: 0.2rem 0 1.6rem 0; }

.card .byline-bottom+p { margin-top: 0.8rem; }

.card .numdata { margin-top: 0.8rem; }

.card-top, .card-bottom { padding: 1.2rem; }

.card-button { background: #72777d; transition: opacity 0.2s ease; }

.card-button:hover { opacity: .8; }

.card-button a { padding: 0.6rem; display: block; text-align: center; font-size: 0.875rem; letter-spacing: .25px; font-weight: 600; /* Cancel out a styles */ background: none !important; color: white; transition: background 0.2s ease, color 0.2s ease; }

.card-bottom { background: #eaecf0; }

@media only screen and (max-width: 720px) { .card-row { width: auto; margin: 0 -20px; padding: 0 20px; overflow: auto; flex-wrap: nowrap; } }

/* Dark mode */ @media (prefers-color-scheme: dark) { .card { border-color: #2b2f36; background-color: #24272f; }

.card .card-title { color: #e0e1e2; }

.card .byline-top, .card .byline-bottom { color: #a0a1a5; }

.card-bottom { background-color: #1d2129; } }

.mainpage-navigation .card { width: calc(100%/5 - 0.4rem); min-width: calc(860px/5 - 0.4rem); border: 0; }

.mainpage-navigation .card:hover .card-caption { color: white; }

.mainpage-navigation .card-caption { padding: 0.4rem; background: #304665; color: #bfcee7; text-align: center; transition: color 0.2s ease; } .mainpage-navigation .card-image { height: 180px; background-color: #f8f9fa; overflow: hidden; }

@media (prefers-color-scheme: dark) { .mainpage-navigation .card-image { background: #2b2f36; } }