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
This commit is contained in:
KiKaraage 2025-06-11 13:58:29 +07:00 committed by GitHub
parent b56e9eeb43
commit a57d48dfca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,6 +1,7 @@
@media not (-moz-bool-pref: "mod.extension.viewgrid") { @media not (-moz-bool-pref: "mod.extension.viewgrid") {
/* Hide header, description, extension captions */ /* Hide header, description, extension captions */
#unified-extensions-view box.panel-header, #unified-extensions-view box.panel-header,
#unified-extensions-view > :nth-child(2),
#unified-extensions-description, #unified-extensions-description,
#unified-extensions-messages-container, #unified-extensions-messages-container,
.unified-extensions-item-message-deck { .unified-extensions-item-message-deck {
@ -15,13 +16,15 @@
padding-block: 0px !important; padding-block: 0px !important;
} }
#unified-extensions-manage-extensions { #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 { #unified-extensions-panel .unified-extensions-item {
margin-block: 2px !important; margin-block: 2px !important;
} }
#unified-extensions-view .unified-extensions-item-action-button:hover { #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-view .unified-extensions-item-menu-button.subviewbutton,
.unified-extensions-item-row-wrapper { .unified-extensions-item-row-wrapper {
@ -35,6 +38,7 @@
.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon { .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
opacity: 0.85 !important; opacity: 0.85 !important;
} }
background-color: transparent !important;
} }
#unified-extensions-view .unified-extensions-item-action-button .panel-no-padding .webextension-browser-action { #unified-extensions-view .unified-extensions-item-action-button .panel-no-padding .webextension-browser-action {
padding: 0 !important; padding: 0 !important;
@ -60,6 +64,7 @@
/* Hide the header as well as texts and settings icon for each extension, so only icons are visible */ /* Hide the header as well as texts and settings icon for each extension, so only icons are visible */
#unified-extensions-description, #unified-extensions-description,
#unified-extensions-view .panel-header, #unified-extensions-view .panel-header,
#unified-extensions-view > :nth-child(2),
.unified-extensions-item-name, .unified-extensions-item-name,
.unified-extensions-item-message, .unified-extensions-item-message,
.unified-extensions-item-message-hover, .unified-extensions-item-message-hover,
@ -69,7 +74,7 @@
} }
/* Arrange extensions in a properly centered 4-column grid */ /* 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; display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 columns */ grid-template-columns: repeat(4, 1fr) !important; /* 4 columns */
justify-content: left !important; justify-content: left !important;
@ -97,27 +102,23 @@
panelview .unified-extensions-item-action-button { panelview .unified-extensions-item-action-button {
padding: 5px 10px !important; padding: 5px 10px !important;
} }
.unified-extensions-item-row-wrapper .unified-extensions-item-action-button {
&:not([disabled]):hover { /* Set proper padding for the Manage Extensions button */
color: inherit; #unified-extensions-manage-extensions {
background-color: transparent !important; padding: 8px 16px !important;
} margin-block-end: 4px !important;
} }
/* Set lighter opacity for passive extension buttons */ /* Set lighter opacity for passive extension buttons */
.unified-extensions-item-icon { .unified-extensions-item-icon {
opacity: 0.3; opacity: 0.3;
} }
.unified-extensions-list .unified-extensions-item:hover { .unified-extensions-item-action-button:hover {
background-color: color-mix(in srgb, currentColor 6%, transparent) !important; background-color: color-mix(in srgb, currentColor 3%, transparent) !important;
} }
/* Set proper padding for the Manage Extensions button */
#unified-extensions-manage-extensions {
padding: 8px 16px !important;
}
#unified-extensions-view toolbarseparator { #unified-extensions-view toolbarseparator {
margin-top: 12px !important; margin-top: 8px !important;
} }
} }