MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 15:48, 22 December 2024

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

/* Ensure all wikitables are centered */
.wikitable,
body .mw-body .wikitable {
    margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
    box-sizing: border-box !important;
    border-collapse: separate !important;
}

/* Root Variables for Custom Colors */
:root {
    --myblueone: hsl(207, 45%, 8%); /*0B151D*/
    --mybluetwo: hsl(207, 44%, 12%); /*11202C*/
    --mybluetest: hsl(207, 44%, 14%); /*11202C*/

    /* The actual colors */
    --color-surface-0: var(--myblueone);
    --color-surface-1: var(--mybluetwo);
    --color-surface-2: var(--mybluetwo);
    --color-surface-3: var(--mybluetwo);
    --color-surface-4: var(--mybluetwo);

    /* Pink is the new black 
    --color-primary__h: 209; */
}

/* Remove all box shadows */
* {
    box-shadow: none !important;
}

/* Set the background color, fully rounded borders, and specific border style of the edit box */
.skin-citizen .mw-editform #wpTextbox1 {
    background-color: var(--color-surface-2) !important;
    border-radius: 10px !important; /* Fully rounded borders */
    border: 2px solid #2C4663 !important; /* Set border to 2px and #2C4663 */
}

/* Set the same border style for the .editOptions element with margin */
.skin-citizen .mw-editform .editOptions {
    background-color: var(--color-surface-2) !important;
    border-radius: 10px !important; /* Fully rounded borders */
    border: 1px solid #2C4663 !important; /* Set border to 2px and #2C4663 */
    margin-top: 10px !important; /* Add margin to create space above */
}

/* Scrollbar styles for WebKit browsers */
::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: var(--color-surface-1); /* Background of the scrollbar track */
    border-radius: 10px; /* Rounded borders for the track */
}

::-webkit-scrollbar-thumb {
    background: #2C4663; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded borders for the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #1A2A3A; /* Color of the scrollbar thumb on hover */
}