From 627f407641db15de8b1641ef5367785b4846b709 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Sat, 20 May 2023 12:18:12 +0800 Subject: [PATCH] Fixed #113 Almost all Vince's themes broken on Gnome 44.1 --- .../chrome/Colloid/parts/buttons-fixes.css | 57 +++++++++++++++---- .../firefox/chrome/Colloid/parts/buttons.css | 14 +++-- .../firefox/chrome/Colloid/parts/popups.css | 4 +- .../firefox/chrome/Colloid/parts/tabsbar.css | 13 ++++- .../firefox/chrome/Colloid/parts/toolbox.css | 5 ++ src/other/firefox/chrome/Colloid/theme.css | 9 +++ src/sass/_variables.scss | 4 +- src/sass/gtk/_common-4.0.scss | 23 ++++++-- 8 files changed, 103 insertions(+), 26 deletions(-) diff --git a/src/other/firefox/chrome/Colloid/parts/buttons-fixes.css b/src/other/firefox/chrome/Colloid/parts/buttons-fixes.css index 1c30b939..6f8013e6 100644 --- a/src/other/firefox/chrome/Colloid/parts/buttons-fixes.css +++ b/src/other/firefox/chrome/Colloid/parts/buttons-fixes.css @@ -12,6 +12,11 @@ padding: 0 1px 0 4px !important; } +/* Fix subviewbutton icon buttons alignment */ +.subviewbutton.subviewbutton-iconic:not(.subviewbutton-back) { + justify-content: center !important; +} + /* Fix hover background */ .toolbarbutton-badge-stack:not(#hack), .toolbarbutton-icon:not(#hack), .toolbarbutton-text:not(#hack) { background: transparent !important; @@ -22,9 +27,18 @@ display: -moz-box !important; } +/* Fix unified-extensions-item margin */ +toolbar .unified-extensions-item { + margin-inline: 0 3px !important; +} + /* menulist */ #label-box:not([native]) { - font-weight: 400 !important; + font-weight: 400 !important; + padding: 0 8px; +} +dropmarker:not([native]) { + margin-right: 8px; } /* Overrides: Make the back button the same as other buttons */ @@ -172,6 +186,11 @@ button.close.ghost-button { font-size: 1em !important; } +/* Sidebar header button sizing */ +#sidebar-switcher-target { + flex: unset !important; +} + /* Sidebar header button arrow opacity */ #sidebar-switcher-arrow { opacity: 1 !important; @@ -238,6 +257,7 @@ button.close.ghost-button { /* Downloads button */ #downloads-indicator-progress-inner { background: conic-gradient(var(--gnome-toolbar-icon-fill) var(--download-progress-pcent), transparent var(--download-progress-pcent)) !important; + background-color: var(--gnome-button-active-background) !important; } #downloads-indicator-progress-outer, #downloads-indicator-start-image, @@ -253,6 +273,20 @@ button.close.ghost-button { #downloads-indicator-finish-image { background: var(--gnome-toolbar-icon-fill) !important; } + +#downloads-button[progress="true"] #downloads-indicator-progress-outer { + visibility: visible !important; +} +#downloads-button:not([progress="true"]) #downloads-indicator-icon { + visibility: visible !important; +} + +/* Stop/Reload button */ +#stop-reload-button .toolbarbutton-icon { + margin-top: -2px !important; +} + +/* Toolbar Animations */ #downloads-button .toolbarbutton-animatable-box { top: 8px !important; left: 8px !important; @@ -263,22 +297,14 @@ button.close.ghost-button { height: 16px !important; width: 16px !important; } -#downloads-button .toolbarbutton-animatable-image { - --anim-steps: 1 !important; - transform: none !important; - list-style-image: none !important; -} - -/* Stop/Reload button */ -#stop-reload-button .toolbarbutton-animatable-image:not(#hack) { +#downloads-button .toolbarbutton-animatable-image, +#stop-reload-button .toolbarbutton-animatable-image:not(#hack), +#nav-bar-overflow-button .toolbarbutton-animatable-image:not(#hack) { --anim-steps: 1 !important; transform: none !important; list-style-image: none !important; display: none !important; } -#stop-reload-button .toolbarbutton-icon { - margin-top: -2px !important; -} /* Panel banner */ #appMenu-popup .panel-banner-item { @@ -307,3 +333,10 @@ button.customizationmode-button { .customization-uidensity-menuitem:last-of-type { margin: 3px 3px !important; } + +/* OPTIONAL: Hide unified-extensions-button */ +@supports -moz-bool-pref("gnomeTheme.hideUnifiedExtensions") { + #unified-extensions-button { + display: none; + } +} diff --git a/src/other/firefox/chrome/Colloid/parts/buttons.css b/src/other/firefox/chrome/Colloid/parts/buttons.css index b55252cc..a1a870c7 100644 --- a/src/other/firefox/chrome/Colloid/parts/buttons.css +++ b/src/other/firefox/chrome/Colloid/parts/buttons.css @@ -39,7 +39,8 @@ button.close, .permission-popup-permission-remove-button, .button.connect-device, #item-choose button, -#editBMPanel_newFolderButton { +#editBMPanel_newFolderButton, +.unified-extensions-item-menu-button { -moz-appearance: none !important; background: var(--gnome-button-background) !important; border-radius: 6px !important; @@ -63,7 +64,8 @@ button.close, .close-icon:not(.tab-close-button), button.close, #protections-popup-info-button, -.permission-popup-permission-remove-button { +.permission-popup-permission-remove-button, +.unified-extensions-item-menu-button { background: transparent !important; } @@ -171,7 +173,8 @@ menulist:hover .menulist-label-box, button.close:hover, #protections-popup-info-button:hover, .permission-popup-permission-remove-button:hover, -#item-choose button:hover { +#item-choose button:hover, +.unified-extensions-item-menu-button:hover { outline: 0 !important; background: var(--gnome-button-flat-hover-background) !important; } @@ -211,7 +214,8 @@ button.close:active, #protections-popup-info-button:not(#hack):active, #protections-popup-info-button:not(#hack)[checked], .permission-popup-permission-remove-button:active, -#item-choose button:active { +#item-choose button:active, +.unified-extensions-item-menu-button:active { background: var(--gnome-button-flat-active-background) !important; box-shadow: none !important; } @@ -266,7 +270,7 @@ button.close:active, margin-left: 0 !important; } -#nav-bar .toolbaritem-combined-buttons { +#nav-bar .toolbaritem-combined-buttons:not(.unified-extensions-item) { margin-left: 0 !important; margin-right: 0 !important; } diff --git a/src/other/firefox/chrome/Colloid/parts/popups.css b/src/other/firefox/chrome/Colloid/parts/popups.css index 91a49be0..af34c928 100644 --- a/src/other/firefox/chrome/Colloid/parts/popups.css +++ b/src/other/firefox/chrome/Colloid/parts/popups.css @@ -116,14 +116,14 @@ panelview { /* Panel arrow */ .panel-arrowcontent { - background: var(--arrowpanel-background) !important; + background: var(--gnome-menu-background) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; color: var(--gnome-toolbar-color) !important; box-shadow: 0 0 0 1px var(--gnome-menu-border-color)!important; } .panel-arrow { - fill: var(--arrowpanel-background) !important; + fill: var(--gnome-menu-background) !important; stroke: var(--gnome-menu-border-color) !important; display: -moz-inline-box !important; } diff --git a/src/other/firefox/chrome/Colloid/parts/tabsbar.css b/src/other/firefox/chrome/Colloid/parts/tabsbar.css index 5f6b3f6c..d7f8d051 100644 --- a/src/other/firefox/chrome/Colloid/parts/tabsbar.css +++ b/src/other/firefox/chrome/Colloid/parts/tabsbar.css @@ -165,9 +165,16 @@ tab { justify-items: center; } -/* Adjust tab label width */ +/* Center tab content */ .tab-label-container { min-width: 0 !important; + max-width: min-content !important; +} +.tabbrowser-tab:not([pinned]) .tab-icon-stack { + margin-left: auto !important; +} +.tab-close-button { + margin-left: auto; } /* Put tab close button to the right */ @@ -221,6 +228,10 @@ tab { margin: auto !important; } +#alltabs-button { + display: none; +} + /* Always show the muted icon when poresent */ #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon] { opacity: 1 !important; diff --git a/src/other/firefox/chrome/Colloid/parts/toolbox.css b/src/other/firefox/chrome/Colloid/parts/toolbox.css index 38bd43c4..2ae3a3d9 100644 --- a/src/other/firefox/chrome/Colloid/parts/toolbox.css +++ b/src/other/firefox/chrome/Colloid/parts/toolbox.css @@ -72,18 +72,23 @@ findbar:-moz-window-inactive description, /* Reorder toolbars */ #navigator-toolbox #nav-bar { -moz-box-ordinal-group: 0; + order: 0; } #navigator-toolbox #PersonalToolbar { -moz-box-ordinal-group: 1; + order: 1; } #navigator-toolbox #titlebar { -moz-box-ordinal-group: 2; + order: 2; } #navigator-toolbox toolbar { -moz-box-ordinal-group: 10; + order: 10; } #navigator-toolbox #TabsToolbar { -moz-box-ordinal-group: 100; + order: 100; } /* Overrides: Don't shift other toolbars on tab drag and drop */ diff --git a/src/other/firefox/chrome/Colloid/theme.css b/src/other/firefox/chrome/Colloid/theme.css index 667ff9cc..2289f231 100644 --- a/src/other/firefox/chrome/Colloid/theme.css +++ b/src/other/firefox/chrome/Colloid/theme.css @@ -34,3 +34,12 @@ content: "Colloid firefox theme"; padding: 9px 9px 9px 50px; } + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; +} + +#customization-container:-moz-lwtheme { + background-image: linear-gradient(var(--gnome-toolbar-background), var(--gnome-toolbar-background)) !important; +} diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 56f19414..7a0061f7 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -56,9 +56,9 @@ $transition-shadow: box-shadow $duration $ease-out; // $shadow-z1: - 0 2px 2px -2px rgba(black, 0.3), + 0 2px 3px -2px rgba(black, 0.3), 0 1px 2px -1px rgba(black, 0.24), - 0 1px 2px -.6px rgba(black, 0.17); + 0 1px 2px -1px rgba(black, 0.17); $shadow-z2: 0 3px 2px -3px rgba(black, 0.2), 0 2px 2px -1px rgba(black, 0.24), diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index 231bcdbc..47b3940e 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -4767,11 +4767,19 @@ window { outline-offset: -1px; outline: 1px solid highlight($background); margin: 0; + transition: none; @if $rimless == 'true' { - box-shadow: $shadow-z16, 0 0 36px transparent; + box-shadow: $shadow-z16, + 0 2px 3px -1px rgba(black, 0), + 0 4px 3px 0 rgba(black, 0), + 0 1px 6px 0 rgba(black, 0); } @else { - box-shadow: $shadow-z16, 0 0 0 1px $window-border, 0 0 36px transparent; + box-shadow: $shadow-z16, + 0 0 0 1px $window-border, + 0 2px 3px -1px rgba(black, 0), + 0 4px 3px 0 rgba(black, 0), + 0 1px 6px 0 rgba(black, 0); } &:backdrop { @@ -4782,9 +4790,16 @@ window { transition: $transition-shadow; @if $rimless == 'true' { - box-shadow: $shadow-z4, 0 0 36px transparent; + box-shadow: $shadow-z4, + 0 8px 6px -5px rgba(black, 0), + 0 16px 15px 2px rgba(black, 0), + 0 6px 18px 5px rgba(black, 0); } @else { - box-shadow: $shadow-z4, 0 0 0 1px $window-border, 0 0 36px transparent; + box-shadow: $shadow-z4, + 0 0 0 1px $window-border, + 0 8px 6px -5px rgba(black, 0), + 0 16px 15px 2px rgba(black, 0), + 0 6px 18px 5px rgba(black, 0); } }