More actions
(Automation: Update CSS file from SCSS file.) |
(Automation: Update CSS file from SCSS file.) |
||
Line 201: | Line 201: | ||
background-color: hsl(210, 17%, 98%); | background-color: hsl(210, 17%, 98%); | ||
color: black; | color: black; | ||
} | |||
.frontpage-image-button p { | |||
margin: 0; | |||
} | } | ||
Line 219: | Line 222: | ||
font-family: "roboto"; | font-family: "roboto"; | ||
font-weight: 500; | font-weight: 500; | ||
position: relative; | |||
z-index: 1; | |||
} | } | ||
Line 236: | Line 241: | ||
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
z-index: | z-index: 0; | ||
top: -57px; | top: -57px; | ||
left: 0; | left: 0; | ||
Line 242: | Line 247: | ||
} | } | ||
.frontpage-image-button:hover > img { | .frontpage-image-button p:hover > img { | ||
transform: scale(1.2); | transform: scale(1.2); | ||
} | } |
Revision as of 22:10, 26 March 2024
/* Style overrides for the Citizen skin */ /* Not to be edited in the wiki, see https://github.com/repair-wiki/content for instructions on how to contribute */ /* Overrides for third party extensions */ .editOptions { color: var(--color-base); background: var(--color-surface-0); border: 1px solid var(--border-color-base); border-radius: var(--border-radius--medium); } span.select2.select2-container.select2-container--default *, .select2-container * { color: var(--color-base); background: var(--color-surface-0); border-color: var(--border-color-base); border-radius: var(--border-radius--medium); } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--active-bg-color); color: var(--active-text-color); } .pf-select2-dropdown .select2-results__options .select2-results__option--highlighted { background: var(--active-bg-color); } .pf-select2-dropdown .select2-results__options .select2-results__option--highlighted * { color: var(--active-text-color) !important; } span.select2-match-entire { background-color: transparent; } form#pfForm * { border-color: var(--border-color-base); } option { color: black; } .mw-ui-button-fw { width: 100%; } li#ca-formedit a:before { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%3E%3Cg%20id%3D%22surface1%22%3E%3Cpath%20style%3D%22%20stroke%3Anone%3Bfill-rule%3Anonzero%3Bfill%3A%2300000%3Bfill-opacity%3A1%3B%22%20d%3D%22M%201.332031%200.382812%20L%2019.214844%200.382812%20C%2019.445312%200.382812%2019.632812%200.570312%2019.632812%200.800781%20L%2019.632812%203.617188%20C%2019.632812%203.847656%2019.445312%204.035156%2019.214844%204.035156%20L%201.332031%204.035156%20C%201.101562%204.035156%200.917969%203.847656%200.917969%203.617188%20L%200.917969%200.800781%20C%200.917969%200.570312%201.101562%200.382812%201.332031%200.382812%20Z%20M%201.332031%200.382812%20%22%2F%3E%3Cpath%20style%3D%22%20stroke%3Anone%3Bfill-rule%3Anonzero%3Bfill%3A%2300000%3Bfill-opacity%3A1%3B%22%20d%3D%22M%201.269531%204.625%20L%2019.253906%204.59375%20C%2019.457031%204.59375%2019.621094%204.757812%2019.621094%204.957031%20L%2019.644531%2018.410156%20C%2019.644531%2018.609375%2019.480469%2018.777344%2019.277344%2018.777344%20L%201.296875%2018.808594%20C%201.09375%2018.808594%200.929688%2018.644531%200.929688%2018.441406%20L%200.90625%204.992188%20C%200.90625%204.789062%201.070312%204.625%201.269531%204.625%20Z%20M%201.269531%204.625%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); content: ""; display: block; width: var(--size-icon); height: var(--size-icon); contain: strict; font-size: 0; opacity: var(--opacity-icon-base); filter: var(--filter-invert); background-repeat: no-repeat; background-size: inherit; } /* Infoboxes */ .infobox { font-size: 80%; margin-bottom: var(--space-md); background: var(--color-surface-2); border-radius: var(--border-radius--medium); display: table; min-width: 25em; max-width: 30em; border-collapse: collapse; float: right; clear: right; margin: 2em; margin-right: 0; margin-top: 0; overflow: hidden; } .infobox tbody tr { border-top: 1px solid var(--border-color-base); } .infobox tbody tr * { vertical-align: middle; padding: var(--space-sm) 0; } .infobox tbody tr .infobox-heading { text-align: center; padding-left: 1em; padding-right: 1em; background: var(--color-primary--hover); color: white; } .infobox tbody tr th { width: 40%; text-align: left; padding-left: 1em; } .infobox tbody tr td { width: 60%; padding-right: 1em; } .infobox tbody tr:nth-child(1) { border: none; } @media only screen and (max-width: 1024px) { table.infobox { float: none; width: 100%; max-width: none; margin: 0; min-width: auto; overflow-x: scroll; } } /* Frontpage containers */ .frontpage-container-row { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.25em; } .frontpage-container-column { flex: 1; background: var(--color-surface-2); border-radius: var(--border-radius--medium); border: 1px solid var(--border-color-base); overflow: hidden; margin: 0.5em; padding: 0; font-weight: 200; } .frontpage-container-content { padding: 0.5em; margin: var(--space-sm); } .frontpage-container-content ul { margin-top: 0; } .frontpage-container-heading { text-align: left; margin: 0; padding-left: 1em; padding-right: 1em; border-bottom: 1px solid var(--border-color-base); color: white; padding: var(--space-sm); } .frontpage-container-heading h2 { font-weight: 500 !important; margin: 0; font-size: 1em; padding: 0.5em; } .container-row-links-grid a { width: 20%; display: flex; margin: 0; padding: 0.5em; } .container-row-links-grid a .frontpage-container-column { text-align: center; width: 100%; margin: 0; } .container-row-links-grid a .frontpage-container-column p { padding: var(--space-sm) 0; } .container-row-links-grid .frontpage-container-column p { padding: 0; margin: 0; } .container-row-links-grid .frontpage-container-column p a { margin: 0; text-align: center; padding: var(--space-sm) 0; width: 100%; display: block; } .frontpage-icon { display: inline-block; width: 1em; height: 1em; vertical-align: top; } /* Image buttons */ .frontpage-image-button { flex: 1; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.05); overflow: hidden; padding: 0; font-family: "Sans-serif"; position: relative; margin: 0.5em; background-color: hsl(210, 17%, 98%); color: black; } .frontpage-image-button p { margin: 0; } .frontpage-image-button.has-image { background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 200%); } .frontpage-image-button.has-image a { color: white; } .frontpage-image-button a { display: inline-block; text-decoration: none; color: black; padding: 1em; width: 100%; font-family: "roboto"; font-weight: 500; position: relative; z-index: 1; } .double-height a { padding: 2em 1em; } .frontpage-container-row { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.25em; } .frontpage-image-button.has-image img { pointer-events: none; position: absolute; width: 100%; z-index: 0; top: -57px; left: 0; transition: background-color 0.6s ease, transform 0.6s; } .frontpage-image-button p:hover > img { transform: scale(1.2); } .frontpage-image-button-container { display: flex; } /* Main page */ .page-Main_Page header.mw-body-header { display: none; } .frontpage-title { padding: 2em; color: var(--color-base--subtle); font-weight: 300; } .frontpage-title .prefix, .frontpage-title .suffix { font-weight: 100; } .frontpage-title .prefix { margin-bottom: 0; } .frontpage-title h1 { margin-bottom: 0; margin-top: 0; font-weight: 800; color: var(--color-base--emphasized); } .frontpage-title .suffix { margin-top: 0; }