MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--color-progressive-oklch__h: 253.3805;
}

.skin-theme-clientpref-day {

/* Example CSS for changing the background */
body {
    background-image: url("https://wiki.lbpunion.com/images/6/69/ProjectLighthouse_2.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 138, 254, 0.5), rgba(255, 255, 255, 0.3));
    z-index: 0; /* Ensures the overlay is above the background image but below other content */
    pointer-events: none; /* Ensures the overlay doesn't interfere with any interactions */
}

#content,
#mw-content-text {
    position: relative;
    z-index: 1; /* Ensure content is above the gradient overlay */
    background-color: rgba(255, 255, 255, 1); /* white, opaque background */
    padding: 20px;
    border-radius: 10px;
    color: #000000; /* Ensure text is readable */
    margin: 20px auto;
    max-width: 90%; /* Adjusted for wider content */
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}


}


.skin-theme-clientpref-night {

/* Example CSS for changing the background */
body {
    background-image: url("https://wiki.lbpunion.com/images/e/ea/PS_App_20210309_030239.jpeg?20250129203443");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    z-index: 0; /* Ensures the overlay is above the background image but below other content */
    pointer-events: none; /* Ensures the overlay doesn't interfere with any interactions */
}

#content,
#mw-content-text {
    position: relative;
    z-index: 1; /* Ensure content is above the gradient overlay */
    background-color: rgba(0, 0, 0, 0.8); /* Dark, opaque background */
    padding: 0px;
    border-radius: 10px;
    color: #FFF; /* Ensure text is readable */
    margin: 20px auto;
    max-width: 90%; /* Adjusted for wider content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
}



}