Tana: Dim [Dark Theme] by Maciej Smoła v2 by macieksmola

/* ==UserStyle==
@name           Tana: Dim [Dark Theme] by Maciej Smoła v2
@namespace      github.com/openstyles/stylus/tana
@version        2.0.0
@description    Dimming various Tana design elements
@author         Maciej Smoła
==/UserStyle== */

@-moz-document url-prefix("https://app.tana.inc") {
 
    
/* TOPBAR */
    /* Dim Tana Early access logo and Search Icon */
    .TopBar-module_topBar__a-A3U {
        color: var(--colorGray525)
        }
    /* Dim TopBar's search bar background */
    .TopBar-module_topBar__a-A3U .TopBar-module_searchBarContainer__3AxR8 .TopBar-module_searchBar__vLIGY {
        background-color: var(--colorGray775);
        }
    /* Dim TopBar's text and icons
    .Button-module_button__WROwO.Button-module_topBar__I6P3m {
        color: var(--colorGray350);
        } 
    */
    /* Remove TopBar's bottom line (default = 1px) */
    .EditorPage-module_el__9-h9C {
        gap: 0px;
        }
    
    
/* SIDEBAR */
        /* Lighten up sidebar */
        /* Docked, Non-focused */
    .SidePane-module_sidePaneContainer__TNPOh.SidePane-module_docked__nP-vd .SidePane-module_sidePane__wxyI- {
        background-color: var(--colorGray825);
        }
        /* Docked, Focused */
    .TopBar-module_topBar__a-A3U .TopBar-module_sideBarController__0VGw0 {
        background-color: var(--colorGray825);
        }    
        /* Hovered */
    .SidePane-module_sidePaneContainer__TNPOh.SidePane-module_isHovered__Uh-Ru .SidePane-module_sidePane__wxyI- {
        background-color: var(--colorGray825);
        }
    

/* PARENT NODE BAR */
    /* Tweak Parent Node TopBar looks (visible when scrolling down the node) */
    .PanelToolbar-module_el__zgE-Y.PanelToolbar-module_anchorIsNotVisible__-3-jb {
        /* Alternative slight fadeout at the top:
        box-shadow: 0 0px 20px 0 var(--colorGray100); */
        box-shadow: 0 0px 0px 0;
    }

    
    
/* SEARCH NODE */ 
    /* Dim search node display options */
    .Button-module_button__WROwO.Button-module_smaller__Cszgf {
    --colorButtonText: var(--colorGray600);
    font-weight: 450;
    }
    .SearchRefreshButton-module_searchIndicator__077KE {
    --colorBlue400: var(--colorGray600);  
    }
    /* No search node dot animation */
    .SearchRefreshButton-module_searchRefreshButton__PK-X8.SearchRefreshButton-module_searchActive__zneUT .SearchRefreshButton-module_searchIndicator__077KE:before {
    animation: none !important;
    }
    
    
/* CHECKBOXES */
    /*  Dim completed items */
	.itemdone-checkbox .listContentItem .editable {
        color: var(--colorGray500);
        /*  text-decoration: line-through; */
        opacity: 1;     }
    /* ————————————————————————————————————— */
    /* Checkbox shadow + light gray background */
    
    .doneCheckbox input[type=checkbox]:checked {
        background-color: var(--colorGray650);    
        box-shadow: 0 0 0 1px var(--colorEditorBackground), 
            inset 0 0 0 3px var(--colorEditorBackground); 
        background-position: top; opacity: 1}
    .doneCheckbox input[type=checkbox]:checked:hover {
        background-color: var(--colorGray600); 
        box-shadow: 0 0 0 4px var(--colorGray200), 
            inset 0 0 0 2px var(--colorEditorBackground); 
        background-position: top;}
    .doneCheckbox input[type=checkbox]:checked:focus {
        background-color: var(--colorGray650); 
        box-shadow: 0 0 0 4px var(--colorGray500), 
            inset 0 0 0 2px var(--colorEditorBackground); 
        background-position: top;}
    .doneCheckbox input[type=checkbox] {
        background-color: var(--colorGray725);    
        box-shadow: 0 0 0 1px var(--colorEditorBackground), 
            inset 0 0 0 3px var(--colorEditorBackground); 
        background-position: top; opacity: 1}
    .doneCheckbox input[type=checkbox]:hover {
        background-color: var(--colorGray675); 
        box-shadow: 0 0 0 4px var(--colorGray200), 
            inset 0 0 0 2px var(--colorEditorBackground); 
        background-position: top;}
    .doneCheckbox input[type=checkbox]:focus {
        background-color: var(--colorGray725); 
        box-shadow: 0 0 0 4px var(--colorGray500), 
            inset 0 0 0 2px var(--colorEditorBackground); 
        background-position: top;
    }
    
/* OTHER */
    /* Dim various vertical and horizontal lines*/
    body {
    --colorUIStroke: var(--colorGray750);
    --colorUIStrokeHover: var(--colorGray700);
    --colorUIStrokeSoft: var(--colorGray750);
    --colorBulletExpandLine: var(--colorGray750);
    --colorBulletExpandLineReference: var(--colorGray750);
    --colorBulletExpandLineHoverBackground: var(--colorGray775);
    --colorUITupleStroke: var(--colorGray750);
    --colorButtonStroke: var(--colorGray100);
    }
    /* Dim "+" at the end of the node*/
    div.placeHolderButton>svg {
    color: var(--colorGray600);
    opacity: 1
    }
    /* Dim text of "Build title from fields" at the end of the node's title */
    .wrapEditableAndMenu .titleFields { 
        color: var(--colorGray600);
        opacity: 1;     }  
}