User:FrankFrankUltimate/citizen.css: Difference between revisions

.citizen-header {
    margin: 15px !important;
    border-radius: 50px !important;
    
    /* The "Glass" Core */
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    
    /* The "Liquid" Edge - creates the refraction look */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    /* Depth and Shine */
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    
    /* Ensuring content doesn't bleed out of the rounded corners */
    /*fuck that, let it happen*/
	
}

.page-actions {
    display: flex;
    gap: var(--space-xxs);
    align-items: center;
    margin: 15px !important;
    border-radius: 50px !important;
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.1) !important;
}
#ca-edit > a, #ca-ve-edit > a {
    background-color: oklch(0 0 0 / 0.10);
    border-radius: 50px;
    color: var(--background-color-progressive);
}

.citizen-sticky-header {
    padding-inline: var(--padding-page);
    border-bottom: var(--border-base);
    background: oklch(var(--color-surface-0-oklch__l) var(--color-surface-0-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
    margin: 15px 15px 15px 40px !important;
    border-radius: 50px !important;
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.1) !important;
}