More actions
 add background image  | 
				No edit summary  | 
				||
| Line 16: | Line 16: | ||
.citizen-page-container {  | .citizen-page-container {  | ||
    position: relative;  | |||
     background-image: url("resources/assets/hero.webp");  |      background-image: url("resources/assets/hero.webp");  | ||
     background-repeat: no-repeat;  |      background-repeat: no-repeat;  | ||
     background-position: center;  |      background-position: center;  | ||
     background-attachment: fixed;  |      background-attachment: fixed;  | ||
    background-size: cover;  | |||
    z-index: 0;  | |||
    overflow: hidden;  | |||
}  | |||
.citizen-page-container::before {  | |||
    content: "";  | |||
    position: absolute;  | |||
    top: 0;  | |||
    left: 0;  | |||
    width: 100%;  | |||
    height: 100%;  | |||
    background-color: rgba(0, 0, 0, 0.5);  | |||
    z-index: 1;  | |||
    pointer-events: none;  | |||
}  | |||
.citizen-page-container > * {  | |||
    position: relative;  | |||
    z-index: 2;  | |||
}  | }  | ||
Revision as of 23:33, 12 May 2025
/* All CSS here will be loaded for users of the Citizen skin */
:root.skin-theme-clientpref-dark {
    --color-surface-0: #050e1b;
    --color-surface-1: #0d1014;
    --color-base: #fff;
    --color-base--emphasized: #808080;
    --color-base--subtle: #162132;
}
:root.skin-theme-clientpref-os {
    --color-surface-0: #050e1b;
    --color-surface-1: #0d1014;
    --color-base: #fff;
    --color-base--emphasized: #808080;
    --color-base--subtle: #162132;
}
.citizen-page-container {
    position: relative;
    background-image: url("resources/assets/hero.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
    overflow: hidden;
}
.citizen-page-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
}
.citizen-page-container > * {
    position: relative;
    z-index: 2;
}