Customisations for Floorp to fill the gap between Lepton and an authentic Photon experience

userChrome.css

/*************************************************************************************************************************************************************************************************************************************************************

"userChrome.css" is a custom CSS file that can be used to specify CSS style rules for Floorp's interface (NOT internal site) using "chrome" privileges.
For instance, if you want to hide the tab bar, you can use the following CSS rule:

**************************************
#TabsToolbar {                       *
    display: none !important;        *
}                                    *
**************************************

NOTE: You can use the userChrome.css file without change preferences (about:config)

Quote: https://userChrome.org | https://github.com/topics/userchrome 

************************************************************************************************************************************************************************************************************************************************************/

@charset "UTF-8";
@-moz-document url(chrome://browser/content/browser.xhtml) {
    /* DARK THEME LESS DARK START */
    * {
        --toolbar-bgcolor: #3f3e48 !important;
        --toolbar-field-background-color: #29282d !important;
        --grey-90: #222 !important;
    }
    /* DARK THEME LESS DARK END */

    /* REMOVE MEGABAR START
    * VERSION 1.0.4
    * CODE AT: http://userchrome.wesleybranton.com/megabar
    * RELEASE NOTES: http://userchrome.wesleybranton.com/notes/megabar */

    /* DISABLE EXPANDING START */
    #urlbar[breakout][breakout-extend] {
        top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
        left: 0 !important;
        width: 100% !important;
    }

    #urlbar[breakout][breakout-extend] > #urlbar-input-container {
        height: var(--urlbar-height) !important;
        padding-block: 0 !important;
        padding-inline: 0 !important;
    }

    #urlbar[breakout][breakout-extend] > #urlbar-background {
        animation-name: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
    }
    /* DISABLE EXPANDING END */

    /* REMOVE MEGABAR END */

    /* BRING BACK ACCENT COLOR START */
    :root:not(:-moz-window-inactive) #TabsToolbar,
    :root:not(:-moz-window-inactive) #toolbar-menubar {
      transition: background-color 0.2s ease;
    }

    :root:not(:-moz-window-inactive) #navigator-toolbox {
      --lwt-accent-color: #c239b3 !important;
    }

    :root:not(:-moz-window-inactive) #TabsToolbar,
    :root:not(:-moz-window-inactive) #toolbar-menubar {
      color: -moz-accent-color-foreground !important;
    }
    /* BRING BACK ACCENT COLOR END */

    /* REMOVE CONTEXT MENU NAV BUTTONS START */
    #context-back image,
    #context-forward image,
    #context-reload image,
    #context-stop image,
    #context-bookmarkpage image,
    #context-navigation,
    #context-sep-navigation {
        display:none !important;
    }
    /* REMOVE CONTEXT MENU NAV BUTTONS END */

    /* REMOVE FLOOP QR CODE (and other annoyances) START */
    .urlbar-addon-page-action {
        display: none !important;
    }
    /* REMOVE FLOOP QR CODE END */

    /* More accurate tab close buttons */
    .tab-close-button.close-icon {
        padding: 3px !important;
        content-padding-end: 13px;
        width: 19px !important;
        height: 19px !important;
        margin-inline-end: 1.5px !important;
    }
    /* Fix slignment of the new tab button */
    #tabs-newtab-button {
        display: flex !important;
    }
    @supports not -moz-bool-pref("userChrome.tabbar.multi_row") {
      :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
        height: var(--tab-min-height) !important;
    }
    /* More accurate menu item padding*/
    :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
    :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item,
    :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem,
    :root:not([uidensity="touch"]) menuitem,
    :root:not([uidensity="touch"]) popupset menuitem,
    :root:not([uidensity="touch"]) popupset toolbarbutton,
    :root:not([uidensity="touch"]) panelmultiview toolbarbutton {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        border-radius: 0 !important;
    }
    toolbarbutton {
        /* Reduce padding inside toolbar buttons so it's not so cramped against the top/bottom of the toolbar */
        --toolbarbutton-inner-padding: 7px;
        /** Remove ugly colour from zoom controls **/
        --button-bgcolor: transparent;
    }
    
    #appMenu-header-description[value*="@"] {
        font-size: 0;
    }
    toolbarbutton[label*="@"] vbox::before {
        content: 'Manage Account';
    }
}

userContent.css

/*************************************************************************************************************************************************************************************************************************************************************
 
"userContent.css" is a custom CSS file that can be used to specify CSS style rules for Floorp's intenal site using "chrome" privileges.
For instance, if you want to apply CSS at "about:newtab" and "about:home", you can use the following CSS rule:

***********************************************************************
@-moz-document url-prefix("about:newtab"), url-prefix("about:home") { *
                                                                      *
/ *Write your css* /                                                  *
                                                                      *
}                                                                     *
***********************************************************************

NOTE: You can use the userContent.css file without change preferences (about:config)

************************************************************************************************************************************************************************************************************************************************************/

@charset "UTF-8";
/* Please write your custom CSS under this line*/

/* for some reason @-moz-document doesn't work for about:pages */
/* @-moz-document url-prefix("about:newtab"), url-prefix("about:home") { */

    .floorp-backdrop-blur-enable #floorp, .floorp-backdrop-blur-enable .personalize-button {
        display: none !important;
    }

    .floorp-backdrop-blur-enable .top-site-outer {
        border: none !important;
    }
    .floorp-backdrop-blur-enable .top-site-outer .tile .icon-wrapper {
        width: 80px !important;
        height: 80px !important;
    }

    * {
        --grey-90: #222 !important;
    }
/*}*/