From a57d48dfcad5997067e360cd46266d4c6593a3dc Mon Sep 17 00:00:00 2001 From: KiKaraage Date: Wed, 11 Jun 2025 13:58:29 +0700 Subject: [PATCH] Cleaner Extensions v2.2: Update and improve CSS - Convert overflow pinned extensions to grid - Hide separator below the extension header - Improve the margin for "Manage extensions" button - Improve background color for hovered extension buttons --- .../chrome.css | 49 ++++++++++--------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/chrome.css b/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/chrome.css index 6cf4463b..7450e92f 100644 --- a/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/chrome.css +++ b/themes/1e86cf37-a127-4f24-b919-d265b5ce29a0/chrome.css @@ -1,6 +1,7 @@ @media not (-moz-bool-pref: "mod.extension.viewgrid") { /* Hide header, description, extension captions */ #unified-extensions-view box.panel-header, + #unified-extensions-view > :nth-child(2), #unified-extensions-description, #unified-extensions-messages-container, .unified-extensions-item-message-deck { @@ -15,13 +16,15 @@ padding-block: 0px !important; } #unified-extensions-manage-extensions { - padding-inline: 10px !important; + margin-inline: 4px !important; + padding: 8px 10px !important; + margin-block-end: 4px !important; } #unified-extensions-panel .unified-extensions-item { margin-block: 2px !important; } #unified-extensions-view .unified-extensions-item-action-button:hover { - background-color: transparent !important; + background-color: color-mix(in srgb, currentColor 3%, transparent) !important; } #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton, .unified-extensions-item-row-wrapper { @@ -35,6 +38,7 @@ .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon { opacity: 0.85 !important; } + background-color: transparent !important; } #unified-extensions-view .unified-extensions-item-action-button .panel-no-padding .webextension-browser-action { padding: 0 !important; @@ -43,10 +47,10 @@ max-height: 3em !important; } #unified-extensions-view .subviewbutton-iconic { - & > .toolbarbutton-icon { - width: 1.2em !important; - height: 1.2em !important; - padding: 0.7em !important; + & > .toolbarbutton-icon { + width: 1.2em !important; + height: 1.2em !important; + padding: 0.7em !important; } } } @@ -56,10 +60,11 @@ #unified-extensions-view { width: calc(var(--menu-panel-width) - 75px) !important; } - + /* Hide the header as well as texts and settings icon for each extension, so only icons are visible */ #unified-extensions-description, #unified-extensions-view .panel-header, + #unified-extensions-view > :nth-child(2), .unified-extensions-item-name, .unified-extensions-item-message, .unified-extensions-item-message-hover, @@ -67,9 +72,9 @@ .unified-extensions-item-menu-button { display: none !important; } - + /* Arrange extensions in a properly centered 4-column grid */ - #unified-extensions-area, .unified-extensions-list { + #overflowed-extensions-list, #unified-extensions-area, .unified-extensions-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; /* 4 columns */ justify-content: left !important; @@ -78,11 +83,11 @@ width: 0px !important; gap: 7px 0px; } - + #unified-extensions-area { padding-block: 7px !important; } - + /* Ensure the extensions are fully centered with squircle hover shape, and reduce unneeded margins/paddings */ .unified-extensions-item { display: flex !important; @@ -97,27 +102,23 @@ panelview .unified-extensions-item-action-button { padding: 5px 10px !important; } - .unified-extensions-item-row-wrapper .unified-extensions-item-action-button { - &:not([disabled]):hover { - color: inherit; - background-color: transparent !important; - } + + /* Set proper padding for the Manage Extensions button */ + #unified-extensions-manage-extensions { + padding: 8px 16px !important; + margin-block-end: 4px !important; } /* Set lighter opacity for passive extension buttons */ .unified-extensions-item-icon { opacity: 0.3; } - .unified-extensions-list .unified-extensions-item:hover { - background-color: color-mix(in srgb, currentColor 6%, transparent) !important; - } - - /* Set proper padding for the Manage Extensions button */ - #unified-extensions-manage-extensions { - padding: 8px 16px !important; + .unified-extensions-item-action-button:hover { + background-color: color-mix(in srgb, currentColor 3%, transparent) !important; } + #unified-extensions-view toolbarseparator { - margin-top: 12px !important; + margin-top: 8px !important; } }