Yasus Asana Theme by KitsuneYasu

/* ==UserStyle==
@name           Yasus Asana Theme
@namespace      github.com/openstyles/stylus
@version        1.1.0
@description    Asana with background image
@author         Kitsune Yasu
@preprocessor   uso
@advanced text image-custom "Image (Custom)" "https://example.com/image.png"
@advanced color foreground "Text" "#fffbf8"
@advanced color background "Background" "#040509"
@advanced color scrollbar "Scrollbar" "#2a48b1"
@advanced dropdown transparency "Opacity" {
    10 "10 %" <<<EOT .1 EOT;
    20 "20 %" <<<EOT .2 EOT;
    30 "30 %" <<<EOT .3 EOT;
    40 "40 %" <<<EOT .4 EOT;
    50 "50 %" <<<EOT .5 EOT;
    60 "60 %" <<<EOT .6 EOT;
    70 "70 %" <<<EOT .7 EOT;
    80 "80 %" <<<EOT .8 EOT;
    90 "90 %" <<<EOT .9 EOT;
    100 "100 %" <<<EOT 1 EOT;
}
==/UserStyle== */

@-moz-document domain("app.asana.com") {
    /* Variables */
    :root {
        --yat-scrollbar-color: /*[[scrollbar-rgb]]*/;
        --yat-foreground-color: /*[[foreground-rgb]]*/;
        --yat-background-color: /*[[background-rgb]]*/;
        --yat-transparency: /*[[transparency]]*/
    }
    
    :root .DesignTokenThemeSelectors-theme--systemDarkMode {
        --color-background-weak: rgba(var(--yat-background-color), var(--yat-transparency));
        --color-background-medium: transparent;
        
        --color-navigation-background-weak: rgba(var(--yat-background-color), var(--yat-transparency));
        --color-navigation-background-medium: rgba(var(--yat-background-color), var(--yat-transparency));
        --color-navigation-body-background-strong: rgba(var(--yat-background-color), var(--yat-transparency));
        --color-navigation-body-background-strong-rgb: var(--yat-background-color);
        --color-navigation-border: rgb(var(--yat-background-color));
        --color-navigation-border-strong: rgb(var(--yat-background-color));
        --color-navigation-topbar-background: rgba(var(--yat-background-color), var(--yat-transparency));
        --color-navigation-omnibutton-background: transparent;
        
        --color-home-background-dark-accent: rgba(var(--yat-background-color), var(--yat-transparency));
        
        --color-box-shadow-small: rgb(var(--yat-background-color));
        
        --color-card-background: rgba(var(--yat-background-color), calc(var(--yat-transparency)/2));
        --color-card-background-rgb: var(--yat-background-color);
        --color-elevation-small: transparent;
        
        --color-border: rgb(var(--yat-background-color));
        --color-border-strong: rgb(var(--yat-background-color));
        --color-button-border-secondary: rgb(var(--yat-background-color));
        --color-elevation-large: 0 0 0 1px rgb(var(--yat-background-color));
        
        --color-icon: rgb(var(--yat-foreground-color));
        --color-text-weak: rgb(var(--yat-foreground-color));
    }
    
    /* Beautiful scrollbars */
    html, body {
        scrollbar-color: rgba(var(--yat-scrollbar-color), var(--yat-transparency)) transparent;
    }
    
    /* Fix invite button */
    .SidebarInvite.ThemeableRectangularButtonPresentation {
        background: var(--color-button-background-secondary);
        border-color: var(--color-button-border-secondary);
        color: var(--color-text);
        fill: var(--color-icon);
    }
    
    /* Background Image */
    .AppRoot-fullPage::before {
        content: '';
        
        z-index: -1;
        width: 100%;
        height: 100%;
        position: absolute;
        
        background-image: url("/*[[image-custom]]*/") !important;
        background-size: cover;
        background-position: center;
        filter: brightness(60%);
    }
        
    .ThemeSetter-themeBackground {
        display: none;
    }
    
    /* Remove Background of opaque elements */
    .ProsemirrorEditor-codeBlock {
        background-color: var(--color-navigation-body-background-strong);
    }
    
    /* Remove double Background */
    .CommentComposerEditor,
    .simpleTextarea,
    .TaskPaneFields .TextEditor3,
    .TaskPaneBody {
        background-color: transparent;
    }
    
    .ObjectReorderableTabNavigationBar-leftBuffer,
    .TopbarPageHeaderStructureWithBreadcrumbs-rightChildrenWrapper,
    .Sidebar {
        background: none;
    }
    
    /* Remove double box-shadow */
    .DynamicBorderScrollable--canScrollUp::before,
    .DynamicBorderScrollable--canScrollDown::before,
    .DynamicBorderScrollable--canScrollUp.DynamicBorderScrollable--canScrollDown::before {
        box-shadow: none;
    }
    
    /* Remove Background-images */
    .HomePageContent {
        background-image: none !important;
    }
}