Cirno for Docs by Spaghs

/* ==UserStyle==
@name         Cirno for Docs
@version      2024.0004
@namespace    userstyles.world/user/Spaghs
@description  Some small changes for docs style. The colors and the background image can be changed in the configuration.
@author       Spagh
@license      No License

@advanced color header-color "Header font color" #FFF
@advanced color theme-color "Theme color" #023

@advanced select dark-mode "Dark page" {
"Dark mode": "filter: invert(1) hue-rotate(180deg) saturate(2)",
"White mode*" : ""
}

@advanced range outline-size "Outline size" [1, 0, 10, 1]
@advanced color outline-color "Outline color" #000

@advanced checkbox light-icons "light icons" 1

@advanced color ruler-color "Ruler color" #ADF

@advanced range dark "Darker background" [0.4, 0, 1, 0.01] 
@advanced range light "Lighter foreground" [0.85, 0, 1, 0.01]

@advanced dropdown bg "Background Image" {
1 "Cirno*" <<<EOT https://images2.alphacoders.com/548/548207.jpg EOT;
2 "Miku" <<<EOT https://images3.alphacoders.com/569/thumb-1920-569355.png EOT;
3 bg-custom-dropdown "Custom" <<<EOT /*[[bg-custom]]*\/ EOT;
}

@advanced text bg-custom "Background Image (Custom)" "https://images7.alphacoders.com/411/thumb-1920-411820.jpg"

==/UserStyle== */
@-moz-document url-prefix("https://docs.google.com/document/d/") {
    
    /*-------------------- Writing a doc --------------------*/
    
    /*
    ---Brightness of the background---
    */
    .kix-rotatingtilemanager.docs-ui-hit-region-surface {
        background: linear-gradient(rgba(0, 0, 0, /*[[dark]]*/), rgba(0, 0, 0, /*[[dark]]*/)), url(/*[[bg]]*/) bottom fixed no-repeat;
        background-position-x: 100px; 
    }

    /*
    -----------Color pattern-----------
    */
    .docs-gm.docsCommonWiz.docs-material.docs-grille-gm3 {
        background-color: /*[[theme-color]]*/;
    }
    
    .kix-appview-editor {
    background-color: /*[[theme-color]]*/ !important;
    }

    .docs-titlebar-buttons {
        border-radius: 50px;
    }
    
    .docs-gm .docs-menubar .goog-control,
    .docs-title-widget {
        color: /*[[header-color]]*/ !important;
    }
    
    .docs-icon-img-container.docs-icon-img.docs-icon-star-border-20,
    .docs-icon-img-container.docs-icon-img.docs-icon-folder-move-20,
    .docs-icon-img-container.docs-icon-img.docs-icon-cloud-check-20,
    .docs-floating-navigation-button-outer-box.goog-inline-block {
        filter: invert(/*[[light-icons]]*/);
    }
    
    /*
    ----------Ruler color guide----------
    */
    .docs-gm .docs-horizontal-ruler,
    .docs-gm #kix-vertical-ruler {
        background: /*[[ruler-color]]*/ !important;
        border-color: /*[[header-color]]*/ !important;
    }
    
    /*
    ----------Title backlight----------
    */
    .docs-title-input-label.docs-title-untitled {
        visibility: hidden !important;    
    }
    
    .docs-title-input {
        color: #fff !important;
        text-shadow: #fff 1px 0 10px;
    }

    #docs-chrome.docs-material.companion-enabled {
        background-color: #0000;
    }
    
    /*
    -----Brightness of the foreground-----
    */
    svg > rect {
        fill: rgba(255, 255, 255, /*[[light]]*/);
    }
    
    svg > rect, canvas {
        /*[[dark-mode]]*/
    }

    /*
    ------Outline of the foreground------
    */
    .kix-page-paginated {
        outline: solid /*[[outline-size]]*/px /*[[outline-color]]*/;
    }
    
    /*-------------------------------------*/
}

@-moz-document url-prefix("https://docs.google.com/document/u/0/") {

    /*-------------------- Menu --------------------*/
    
    /*
    ----- Dark Background + round corners -----
    */
    header,
    .docs-homescreen-homescreenmain,
    .docs-hs-tmp-sch.docs-hs-tmp-sch-content.docs-hs-tmp-sch-ns.docs-hs-tmp-alwaysvisiblecontentholder,
    .docs-homescreen-grid-header,
    .docs-homescreen-grid-item {
        background-color: #223 !important;
    }
    
    #aso_search_form_anchor {
        background-color: #445;
        border: solid 1px #DDF;
    }
    
    .gb_kd.gb_od.gb_Fd,
    .docs-homescreen-itemholder-content.docs-homescreen-floater-header,
    .docs-homescreen-grid-item-metadata-container,
    .docs-homescreen-grid-item-thumbnail {
        background-color: #334 !important;
        color: #DDF;
        border-radius: 25px;
    }
    
    /*
    ----- Light icons -----
    */
    .gb_Kc > svg,
    .gb_De.gb_af > svg,
    .gb_A > svg,
    .gb_sd.gb_ad,
    .docs-hs-tmp-contractedheader-text,
    .gb_qe,
    .docs-homescreen-grid-item-title {
        color: #DDF !important;
    }

    /*
    ----- Fix title position-----
    */
    .docs-homescreen-floater-header-cell.docs-homescreen-floater-header-title,
    .docs-hs-tmp-contractedheader-text {
        margin-left: 20%;
    }

    /*
    ----- Hover animation + no ugly borders -----
    */
    .gb_Kc > svg:hover,
    .goog-inline-block.goog-menu-button.docs-homescreen-owner-filter-button,
    .docs-hs-tmp-contractedheader-more.jfk-button{
        background-color: #445;
        color: #DDF;
        border-radius: 25px;
    }
    
    .docs-hs-tmp-contractedheader-separator.docs-hs-tmp-common-separator,
    .docs-homescreen-grid-item,
    .docs-homescreen-grid-item-metadata-container {
        border: none;
    }

    .docs-homescreen-grid-item,
    .docs-homescreen-templates-templateview.docs-homescreen-templates-templateview-showcase {
        transition: transform .2s;
    }
    
    .docs-homescreen-grid-item.docs-homescreen-item-shared.goog-control-hover,
    .docs-homescreen-grid-item.goog-control-hover,
    .docs-homescreen-templates-templateview.docs-homescreen-templates-templateview-showcase.goog-control-hover {
        border: none;
        border-radius: 25px;
        transform: scale(1.1);
    }
    
    /*-------------------------------------*/
}