+41 -41

chrome/browser/icons.css

··· 2 2 /* SPDX-FileCopyrightText: 2024 awwpotato */ 3 3 4 4 .unified-extensions-item .toolbarbutton-badge { 5 5 - border-radius: var(--uc-button-radius) !important; 6 6 - background-color: var(--toolbarbutton-icon-fill) !important; 7 7 - box-shadow: none !important; 8 8 - color: var(--uc-bg-opaque) !important; 9 9 - margin-inline-end: 0 !important; 10 10 - top: 0 !important; 11 11 - right: 0 !important; 12 12 - position: absolute !important; 13 13 - font-weight: !important; 5 5 + border-radius: var(--uc-button-radius) !important; 6 6 + background-color: var(--toolbarbutton-icon-fill) !important; 7 7 + box-shadow: none !important; 8 8 + color: var(--uc-bg-opaque) !important; 9 9 + margin-inline-end: 0 !important; 10 10 + top: 0 !important; 11 11 + right: 0 !important; 12 12 + position: absolute !important; 13 13 + font-weight: 500 !important; 14 14 } 15 15 16 16 @media not (-moz-bool-pref: "uc.tweak.no-custom-icons") { 17 17 - /* userChrome toggle -> sidebar icon */ 18 18 - :is(.webextension-browser-action, .eom-addon-button):is( 19 19 - [data-extensionid="userchrome-toggle-extended@n2ezr.ru"], 20 20 - [data-extensionid="userchrome-toggle@joolee.nl"] 21 21 - ) .toolbarbutton-icon { 22 22 - list-style-image: url("chrome://browser/skin/sidebars.svg"); 23 23 - } 17 17 + /* userChrome toggle -> sidebar icon */ 18 18 + :is(.webextension-browser-action, .eom-addon-button):is( 19 19 + [data-extensionid="userchrome-toggle-extended@n2ezr.ru"], 20 20 + [data-extensionid="userchrome-toggle@joolee.nl"] 21 21 + ) .toolbarbutton-icon { 22 22 + list-style-image: url("chrome://browser/skin/sidebars.svg"); 23 23 + } 24 24 25 25 - /* uBlock Origin -> custom svg icon */ 26 26 - :is(.webextension-browser-action, .eom-addon-button 27 27 - )[data-extensionid="uBlock0@raymondhill.net"] .toolbarbutton-icon { 28 28 - list-style-image: url("../icons/ublock.svg"); 29 29 - } 25 25 + /* uBlock Origin -> custom svg icon */ 26 26 + :is(.webextension-browser-action, .eom-addon-button 27 27 + )[data-extensionid="uBlock0@raymondhill.net"] .toolbarbutton-icon { 28 28 + list-style-image: url("../icons/ublock.svg"); 29 29 + } 30 30 31 31 - /* Bitwarden -> custom svg icon */ 32 32 - :is(.webextension-browser-action, .eom-addon-button 33 33 - )[data-extensionid="{446900e4-71c2-419f-a6a7-df9c091e268b}"] .toolbarbutton-icon { 34 34 - list-style-image: url("../icons/bitwarden.svg"); 35 35 - } 31 31 + /* Bitwarden -> custom svg icon */ 32 32 + :is(.webextension-browser-action, .eom-addon-button 33 33 + )[data-extensionid="{446900e4-71c2-419f-a6a7-df9c091e268b}"] .toolbarbutton-icon { 34 34 + list-style-image: url("../icons/bitwarden.svg"); 35 35 + } 36 36 37 37 - /* Privacy Badger -> it's own monochrome icon */ 38 38 - :is(.webextension-browser-action, .eom-addon-button 39 39 - )[data-extensionid="jid1-MnnxcxisBPnSXQ@jetpack"] .toolbarbutton-icon { 40 40 - list-style-image: image-set( url("moz-extension://51ac6f66-1bb5-4473-93a0-41ead025ec8f/icons/badger-19-disabled.png"), url("moz-extension://51ac6f66-1bb5-4473-93a0-41ead025ec8f/icons/badger-38-disabled.png") ); 41 41 - } 37 37 + /* Privacy Badger -> it's own monochrome icon */ 38 38 + :is(.webextension-browser-action, .eom-addon-button 39 39 + )[data-extensionid="jid1-MnnxcxisBPnSXQ@jetpack"] .toolbarbutton-icon { 40 40 + list-style-image: image-set( url("moz-extension://51ac6f66-1bb5-4473-93a0-41ead025ec8f/icons/badger-19-disabled.png"), url("moz-extension://51ac6f66-1bb5-4473-93a0-41ead025ec8f/icons/badger-38-disabled.png") ); 41 41 + } 42 42 43 43 - /* Dark Reader -> custom svg icon (moon) */ 44 44 - :is(.webextension-browser-action, .eom-addon-button 45 45 - )[data-extensionid="addon@darkreader.org"] .toolbarbutton-icon { 46 46 - list-style-image: url("../icons/moon.svg"); 47 47 - } 43 43 + /* Dark Reader -> custom svg icon (moon) */ 44 44 + :is(.webextension-browser-action, .eom-addon-button 45 45 + )[data-extensionid="addon@darkreader.org"] .toolbarbutton-icon { 46 46 + list-style-image: url("../icons/moon.svg"); 47 47 + } 48 48 49 49 - /* Proton Pass -> custom notification badge */ 50 50 - :is(.webextension-browser-action, .eom-addon-button 51 51 - )[data-extensionid="78272b6fa58f4a1abaac99321d503a20@proton.me"] .toolbarbutton-icon { 52 52 - list-style-image: url("../icons/proton-pass.svg"); 53 53 - } 49 49 + /* Proton Pass -> custom notification badge */ 50 50 + :is(.webextension-browser-action, .eom-addon-button 51 51 + )[data-extensionid="78272b6fa58f4a1abaac99321d503a20@proton.me"] .toolbarbutton-icon { 52 52 + list-style-image: url("../icons/proton-pass.svg"); 53 53 + } 54 54 }

+88 -88

chrome/browser/main.css

··· 9 9 @import url("window-controls.css"); 10 10 11 11 body { 12 12 - background-color: var(--uc-bg) !important; 13 13 - background-image: var(--lwt-additional-images); 14 14 - background-repeat: var(--lwt-background-tiling); 15 15 - background-position: var(--lwt-background-alignment); 12 12 + background-color: var(--uc-bg) !important; 13 13 + background-image: var(--lwt-additional-images); 14 14 + background-repeat: var(--lwt-background-tiling); 15 15 + background-position: var(--lwt-background-alignment); 16 16 } 17 17 18 18 /* remove bg from things */ ··· 25 25 #sidebar-box, 26 26 #sidebar, 27 27 #sidebar-splitter { 28 28 - background-color: transparent !important; 29 29 - background-image: none !important; 28 28 + background-color: transparent !important; 29 29 + background-image: none !important; 30 30 } 31 31 32 32 :root { 33 33 - --uc-content-margin-top: 0px; 34 34 - --uc-content-margin-right: 0px; 35 35 - --uc-content-margin-bottom: 0px; 36 36 - --uc-content-margin-left: 0px; 37 37 - &:not( 38 38 - [inFullscreen="true"], 39 39 - [inDOMFullscreen="true"], 40 40 - [chromehidden*="toolbar"], 41 41 - [chromehidden*="menubar"] 42 42 - ) { 43 43 - @media not (-moz-bool-pref: "uc.tweak.borderless") { 44 44 - --uc-content-margin-top: var(--uc-content-margin); 45 45 - --uc-content-margin-right: var(--uc-content-margin); 46 46 - --uc-content-margin-bottom: var(--uc-content-margin); 47 47 - --uc-content-margin-left: var(--uc-content-margin); 33 33 + --uc-content-margin-top: 0px; 34 34 + --uc-content-margin-right: 0px; 35 35 + --uc-content-margin-bottom: 0px; 36 36 + --uc-content-margin-left: 0px; 37 37 + &:not( 38 38 + [inFullscreen="true"], 39 39 + [inDOMFullscreen="true"], 40 40 + [chromehidden*="toolbar"], 41 41 + [chromehidden*="menubar"] 42 42 + ) { 43 43 + @media not (-moz-bool-pref: "uc.tweak.borderless") { 44 44 + --uc-content-margin-top: var(--uc-content-margin); 45 45 + --uc-content-margin-right: var(--uc-content-margin); 46 46 + --uc-content-margin-bottom: var(--uc-content-margin); 47 47 + --uc-content-margin-left: var(--uc-content-margin); 48 48 49 49 - & #appcontent { 50 50 - margin: 51 51 - var(--uc-content-margin-top) 52 52 - var(--uc-content-margin-right) 53 53 - var(--uc-content-margin-bottom) 54 54 - var(--uc-content-margin-left) 55 55 - !important; 56 56 - & browser { 57 57 - border-radius: var(--uc-content-radius); 58 58 - clip-path: circle(100%); 59 59 - background-color: var(--uc-content-bg) !important; 60 60 - box-shadow: var(--uc-content-shadow) !important; 61 61 - } 62 62 - } 63 63 - } 64 64 - @media (-moz-bool-pref: "uc.tweak.borderless") { 65 65 - & #appcontent browser { 66 66 - clip-path: circle(100%); 67 67 - background-color: var(--uc-content-bg) !important; 68 68 - box-shadow: var(--uc-content-shadow) !important; 69 69 - } 70 70 - 71 71 - /* not navbar hidden */ 72 72 - &:not([titlepreface*="​"]) { 73 73 - & #appcontent browser { 74 74 - border-top-left-radius: var(--uc-content-radius) !important; 75 75 - border-top-right-radius: var(--uc-content-radius) !important; 76 76 - } 77 77 - } 78 78 - /* not sidebar hidden */ 79 79 - &:not([titlepreface*="‌"]) { 80 80 - &:has(#sidebar-box:not([positionend="true"])) #appcontent browser { 81 81 - border-top-left-radius: var(--uc-content-radius) !important; 82 82 - border-bottom-left-radius: var(--uc-content-radius) !important; 83 83 - } &:has(#sidebar-box[positionend="true"]) #appcontent browser { 84 84 - border-top-right-radius: var(--uc-content-radius) !important; 85 85 - border-bottom-right-radius: var(--uc-content-radius) !important; 86 86 - } 87 87 - } 49 49 + & #appcontent { 50 50 + margin: 51 51 + var(--uc-content-margin-top) 52 52 + var(--uc-content-margin-right) 53 53 + var(--uc-content-margin-bottom) 54 54 + var(--uc-content-margin-left) 55 55 + !important; 56 56 + & browser { 57 57 + border-radius: var(--uc-content-radius); 58 58 + clip-path: circle(100%); 59 59 + background-color: var(--uc-content-bg) !important; 60 60 + box-shadow: var(--uc-content-shadow) !important; 88 61 } 62 62 + } 89 63 } 90 90 - &:not( 91 91 - [inDOMFullscreen="true"], 92 92 - [chromehidden*="toolbar"], 93 93 - [chromehidden*="menubar"] 94 94 - ) { 64 64 + @media (-moz-bool-pref: "uc.tweak.borderless") { 65 65 + & #appcontent browser { 66 66 + clip-path: circle(100%); 67 67 + background-color: var(--uc-content-bg) !important; 68 68 + box-shadow: var(--uc-content-shadow) !important; 69 69 + } 70 70 + 71 71 + /* not navbar hidden */ 72 72 + &:not([titlepreface*="​"]) { 95 73 & #appcontent browser { 96 96 - clip-path: circle(100%); 97 97 - background-color: var(--uc-content-bg) !important; 98 98 - } 99 99 - /* not navbar hidden */ 100 100 - &:not([titlepreface*="​"]) { 101 101 - & #appcontent browser { 102 102 - border-top-left-radius: var(--uc-content-radius) !important; 103 103 - border-top-right-radius: var(--uc-content-radius) !important; 104 104 - } 105 105 - } 106 106 - /* not sidebar hidden */ 107 107 - &:not([titlepreface*="‌"]) { 108 108 - &:has(#sidebar-box:not([positionend="true"])) #appcontent browser { 109 109 - border-top-left-radius: var(--uc-content-radius) !important; 110 110 - border-bottom-left-radius: var(--uc-content-radius) !important; 111 111 - } &:has(#sidebar-box[positionend="true"]) #appcontent browser { 112 112 - border-top-right-radius: var(--uc-content-radius) !important; 113 113 - border-bottom-right-radius: var(--uc-content-radius) !important; 114 114 - } 74 74 + border-top-left-radius: var(--uc-content-radius) !important; 75 75 + border-top-right-radius: var(--uc-content-radius) !important; 115 76 } 77 77 + } 78 78 + /* not sidebar hidden */ 79 79 + &:not([titlepreface*="‌"]) { 80 80 + &:has(#sidebar-box:not([positionend="true"])) #appcontent browser { 81 81 + border-top-left-radius: var(--uc-content-radius) !important; 82 82 + border-bottom-left-radius: var(--uc-content-radius) !important; 83 83 + } &:has(#sidebar-box[positionend="true"]) #appcontent browser { 84 84 + border-top-right-radius: var(--uc-content-radius) !important; 85 85 + border-bottom-right-radius: var(--uc-content-radius) !important; 86 86 + } 87 87 + } 116 88 } 89 89 + } 90 90 + &:not( 91 91 + [inDOMFullscreen="true"], 92 92 + [chromehidden*="toolbar"], 93 93 + [chromehidden*="menubar"] 94 94 + ) { 95 95 + & #appcontent browser { 96 96 + clip-path: circle(100%); 97 97 + background-color: var(--uc-content-bg) !important; 98 98 + } 99 99 + /* not navbar hidden */ 100 100 + &:not([titlepreface*="​"]) { 101 101 + & #appcontent browser { 102 102 + border-top-left-radius: var(--uc-content-radius) !important; 103 103 + border-top-right-radius: var(--uc-content-radius) !important; 104 104 + } 105 105 + } 106 106 + /* not sidebar hidden */ 107 107 + &:not([titlepreface*="‌"]) { 108 108 + &:has(#sidebar-box:not([positionend="true"])) #appcontent browser { 109 109 + border-top-left-radius: var(--uc-content-radius) !important; 110 110 + border-bottom-left-radius: var(--uc-content-radius) !important; 111 111 + } &:has(#sidebar-box[positionend="true"]) #appcontent browser { 112 112 + border-top-right-radius: var(--uc-content-radius) !important; 113 113 + border-bottom-right-radius: var(--uc-content-radius) !important; 114 114 + } 115 115 + } 116 116 + } 117 117 118 118 - @media (-moz-bool-pref: "uc.tweak.translucency") 119 119 - and (-moz-platform: macos ) { 120 120 - -moz-appearance: menupopup !important; 121 121 - } 118 118 + @media (-moz-bool-pref: "uc.tweak.translucency") 119 119 + and (-moz-platform: macos ) { 120 120 + -moz-appearance: menupopup !important; 121 121 + } 122 122 }

+72 -72

chrome/browser/misc.css

··· 4 4 5 5 /* dev tools */ 6 6 splitter.devtools-horizontal-splitter { 7 7 - opacity: 0 !important; 8 8 - min-height: var(--uc-content-margin) !important; 9 9 - margin: 0 !important; 10 10 - border: none !important; 7 7 + opacity: 0 !important; 8 8 + min-height: var(--uc-content-margin) !important; 9 9 + margin: 0 !important; 10 10 + border: none !important; 11 11 } 12 12 13 13 .devtools-side-splitter { 14 14 - opacity: 0 !important; 15 15 - min-width: var(--uc-content-margin) !important; 16 16 - margin: 0 !important; 17 17 - border: none !important; 14 14 + opacity: 0 !important; 15 15 + min-width: var(--uc-content-margin) !important; 16 16 + margin: 0 !important; 17 17 + border: none !important; 18 18 } 19 19 20 20 .devtools-toolbox-bottom-iframe { 21 21 - border-radius: var(--uc-radius) !important; 21 21 + border-radius: var(--uc-radius) !important; 22 22 } 23 23 24 24 .devtools-toolbox-side-iframe { 25 25 - border-radius: var(--uc-radius) !important; 25 25 + border-radius: var(--uc-radius) !important; 26 26 } 27 27 28 28 .browserContainer.responsive-mode { 29 29 - background-color: var(--uc-content-bg) !important; 30 30 - border-radius: var(--uc-content-radius) !important; 29 29 + background-color: var(--uc-content-bg) !important; 30 30 + border-radius: var(--uc-content-radius) !important; 31 31 } 32 32 33 33 .browserContainer.responsive-mode > .browserStack > browser { 34 34 - border: none !important; 35 35 - box-shadow: none !important; 34 34 + border: none !important; 35 35 + box-shadow: none !important; 36 36 } 37 37 38 38 .browserContainer.responsive-mode > .rdm-toolbar { 39 39 - border-radius: var(--uc-radius) !important; 39 39 + border-radius: var(--uc-radius) !important; 40 40 } 41 41 42 42 /* screenshot tool */ 43 43 #screenshotsPagePanel { 44 44 - screenshots-buttons { 45 45 - top: var(--uc-floating-margin) !important; 46 46 - right: calc(var(--uc-floating-margin) + var(--uc-content-margin-right)) !important; 47 47 - 48 48 - padding: var(--uc-content-margin) !important; 49 49 - border-radius: var(--uc-radius) !important; 50 50 - } 51 51 - 52 52 - & .footer-button { 53 53 - margin-inline-start: var(--uc-content-margin) !important; 54 54 - } 44 44 + screenshots-buttons { 45 45 + top: var(--uc-floating-margin) !important; 46 46 + right: calc(var(--uc-floating-margin) + var(--uc-content-margin-right)) !important; 47 47 + 48 48 + padding: var(--uc-content-margin) !important; 49 49 + border-radius: var(--uc-radius) !important; 50 50 + } 51 51 + 52 52 + & .footer-button { 53 53 + margin-inline-start: var(--uc-content-margin) !important; 54 54 + } 55 55 } 56 56 57 57 /* navbar hidden */ 58 58 #main-window[titlepreface*="​"]:not([inDOMFullscreen="true"]) #screenshotsPagePanel { 59 59 - position: fixed !important; 60 60 - width: 100vw !important; 61 61 - left: 0 !important; 62 62 - top: 0 !important; 63 63 - & screenshots-buttons { 64 64 - top: calc(var(--uc-floating-margin) + var(--uc-content-margin-right)) !important; 65 65 - } 59 59 + position: fixed !important; 60 60 + width: 100vw !important; 61 61 + left: 0 !important; 62 62 + top: 0 !important; 63 63 + & screenshots-buttons { 64 64 + top: calc(var(--uc-floating-margin) + var(--uc-content-margin-right)) !important; 65 65 + } 66 66 } 67 67 68 68 .dialogBox[sizeto="available"] { 69 69 - border-radius: var(--uc-radius) !important; 70 70 - margin: var(--uc-content-margin) !important; 69 69 + border-radius: var(--uc-radius) !important; 70 70 + margin: var(--uc-content-margin) !important; 71 71 } 72 72 73 73 /* findbar thingy */ 74 74 .browserContainer > findbar { 75 75 - background-image: none !important; 76 76 - border: none !important; 75 75 + background-image: none !important; 76 76 + border: none !important; 77 77 + border-radius: var(--uc-radius) !important; 78 78 + background-color: var(--uc-bg-tran) !important; 79 79 + @media not (-moz-bool-pref: "uc.tweak.no-blur") { 80 80 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 81 81 + } 82 82 + 83 83 + position: absolute !important; 84 84 + left: var(--uc-small-floating-margin) !important; 85 85 + right: var(--uc-small-floating-margin) !important; 86 86 + width: auto !important; 87 87 + 88 88 + .findbar-textbox { 77 89 border-radius: var(--uc-radius) !important; 78 78 - background-color: var(--uc-bg-tran) !important; 79 79 - @media not (-moz-bool-pref: "uc.tweak.no-blur") { 80 80 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 81 81 - } 82 82 - 83 83 - position: absolute !important; 84 84 - left: var(--uc-small-floating-margin) !important; 85 85 - right: var(--uc-small-floating-margin) !important; 86 86 - width: auto !important; 87 87 - 88 88 - .findbar-textbox { 89 89 - border-radius: var(--uc-radius) !important; 90 90 - } 90 90 + } 91 91 92 92 - @media not (-moz-bool-pref: "uc.tweak.findbar.bottom") { 93 93 - top: var(--uc-small-floating-margin) !important; 94 94 - } @media (-moz-bool-pref: "uc.tweak.findbar.bottom") { 95 95 - bottom: var(--uc-small-floating-margin) !important; 96 96 - } 92 92 + @media not (-moz-bool-pref: "uc.tweak.findbar.bottom") { 93 93 + top: var(--uc-small-floating-margin) !important; 94 94 + } @media (-moz-bool-pref: "uc.tweak.findbar.bottom") { 95 95 + bottom: var(--uc-small-floating-margin) !important; 96 96 + } 97 97 } 98 98 99 99 /* link thingy when hovering over url */ 100 100 #statuspanel { 101 101 - bottom: var(--uc-small-floating-margin) !important; 102 102 - &:not([mirror="true"]) { 103 103 - left: var(--uc-small-floating-margin) !important; 104 104 - } &[mirror="true"] { 105 105 - right: var(--uc-small-floating-margin) !important; 106 106 - } 107 107 - 108 108 - & #statuspanel-label { 109 109 - border-radius: var(--uc-radius) !important; 110 110 - background-color: var(--uc-bg-tran) !important; 111 111 - border: none !important; 112 112 - @media not (-moz-bool-pref: "uc.tweak.no-blur") { 113 113 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 114 114 - } 101 101 + bottom: var(--uc-small-floating-margin) !important; 102 102 + &:not([mirror="true"]) { 103 103 + left: var(--uc-small-floating-margin) !important; 104 104 + } &[mirror="true"] { 105 105 + right: var(--uc-small-floating-margin) !important; 106 106 + } 107 107 + 108 108 + & #statuspanel-label { 109 109 + border-radius: var(--uc-radius) !important; 110 110 + background-color: var(--uc-bg-tran) !important; 111 111 + border: none !important; 112 112 + @media not (-moz-bool-pref: "uc.tweak.no-blur") { 113 113 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 115 114 } 115 115 + } 116 116 } 117 117 118 118 /* menu that appears when alt is pressed */ 119 119 #toolbar-menubar[autohide="true"]:not([inactive], [customizing]) { 120 120 - height: unset !important; 120 120 + height: unset !important; 121 121 } 122 122 123 123 /* notification thingy (in navbar) */ 124 124 #tab-notification-deck .notificationbox-stack { 125 125 - background-color: transparent !important; 125 125 + background-color: transparent !important; 126 126 } 127 127 128 128 /* private browser indicator */ 129 129 #private-browsing-indicator-with-label { 130 130 - display: none !important; 130 130 + display: none !important; 131 131 }

+187 -185

chrome/browser/navbar.css

··· 3 3 4 4 /* navbar hidden */ 5 5 :root:not([titlepreface*="​"], [inDOMFullscreen="true"]) { 6 6 - --uc-content-margin-top: 0px !important; 6 6 + --uc-content-margin-top: 0px !important; 7 7 } 8 8 9 9 10 10 @media not (-moz-platform: macos) { 11 11 - :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) 12 12 - #navigator-toolbox { 13 13 - margin-top: 0px !important; 14 14 - } 11 11 + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) 12 12 + #navigator-toolbox { 13 13 + margin-top: 0px !important; 14 14 + } 15 15 } @media (-moz-platform: macos) { 16 16 - #navigator-toolbox[style*="transform: translateY"] { 17 17 - background-color: var(--uc-bg) !important; 18 18 - } 16 16 + #navigator-toolbox[style*="transform: translateY"] { 17 17 + background-color: var(--uc-bg) !important; 18 18 + } 19 19 } 20 20 21 21 #nav-bar, #navigator-toolbox { 22 22 - border: none !important; 23 23 - box-shadow: none !important; 22 22 + border: none !important; 23 23 + box-shadow: none !important; 24 24 } 25 25 26 26 #PersonalToolbar { 27 27 - background-color: transparent !important; 28 28 - margin-inline: var(--uc-sidebar-margin) !important; 27 27 + background-color: transparent !important; 28 28 + margin-inline: var(--uc-sidebar-margin) !important; 29 29 } 30 30 31 31 #nav-bar { 32 32 - margin-inline: var(--uc-sidebar-margin) !important; 33 33 - --toolbarbutton-border-radius: var(--uc-button-radius) !important; 34 34 - --urlbar-icon-border-radius: var(--uc-button-radius) !important; 32 32 + margin-inline: var(--uc-sidebar-margin) !important; 33 33 + --toolbarbutton-border-radius: var(--uc-button-radius) !important; 34 34 + --urlbar-icon-border-radius: var(--uc-button-radius) !important; 35 35 } 36 36 37 37 #main-window[lwtheme="true"] .urlbar-input-container image { 38 38 - fill: var(--toolbarbutton-icon-fill) !important; 38 38 + fill: var(--toolbarbutton-icon-fill) !important; 39 39 } 40 40 41 41 /* fix margin for buttons on the sides */ 42 42 #PanelUI-menu-button { 43 43 - padding: 0 var(--toolbarbutton-outer-padding) !important; 43 43 + padding: 0 var(--toolbarbutton-outer-padding) !important; 44 44 } 45 45 #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child, 46 46 #nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) { 47 47 - padding-inline-start: 0px !important; 47 47 + padding-inline-start: 0px !important; 48 48 } 49 49 50 50 toolbarspring { 51 51 - border-radius: var(--uc-button-radius) 51 51 + border-radius: var(--uc-button-radius) 52 52 } 53 53 54 54 #TabsToolbar { display: none !important; } 55 55 /* navbar hidden */ 56 56 #main-window[titlepreface*="​"]:not([inDOMFullscreen="true"]) { 57 57 - &:not([sizemode="fullscreen"]) { 58 58 - @media not (-moz-bool-pref: "uc.tweak.borderless") { 59 59 - --uc-content-margin-top: var(--uc-content-margin) !important; 60 60 - }} 61 61 - --uc-content-margin-inline: calc(var(--uc-content-margin)*2); 62 62 - @media (-moz-bool-pref: "uc.tweak.borderless") { 63 63 - --uc-content-margin-inline: 0px; 57 57 + &:not([sizemode="fullscreen"]) { 58 58 + @media not (-moz-bool-pref: "uc.tweak.borderless") { 59 59 + --uc-content-margin-top: var(--uc-content-margin) !important; 60 60 + }} 61 61 + --uc-content-margin-inline: calc(var(--uc-content-margin)*2); 62 62 + @media (-moz-bool-pref: "uc.tweak.borderless") { 63 63 + --uc-content-margin-inline: 0px; 64 64 + } 65 65 + --nav-width: 66 66 + clamp( 67 67 + min( 68 68 + calc( 69 69 + 100vw 70 70 + - var(--uc-floating-margin)*2 71 71 + - var(--uc-content-margin-inline) 72 72 + ), 700px 73 73 + ), 74 74 + 75vw, 75 75 + 1000px 76 76 + ); 77 77 + --nav-height: 38px; 78 78 + --personal-height: 24.5px; 79 79 + &[uidensity=compact] { 80 80 + --nav-height: 34.5px; 81 81 + } 82 82 + 83 83 + --uc-navbar-hover-margin-top: 84 84 + calc( 85 85 + var(--uc-floating-margin) 86 86 + + 87 87 + var(--uc-content-margin-top) 88 88 + ); 89 89 + 90 90 + #urlbar-container { width: unset !important; } 91 91 + 92 92 + #navigator-toolbox { 93 93 + position: absolute !important; 94 94 + z-index: 50 !important; 95 95 + 96 96 + width: var(--nav-width) !important; 97 97 + height: var(--uc-hover-target-size) !important; 98 98 + left: calc(50vw - var(--nav-width)*0.5) !important; 99 99 + right: auto !important; 100 100 + 101 101 + border-radius: var(--uc-radius) !important; 102 102 + background-color: transparent !important; 103 103 + } 104 104 + 105 105 + @media not (-moz-bool-pref: "uc.tweak.borderless") { 106 106 + &:not([customizing]):not([sizemode="fullscreen"]) #navigator-toolbox { 107 107 + &::before { 108 108 + content: ""; 109 109 + position: absolute; 110 110 + top: calc(var(--uc-content-margin)*0.5 - var(--uc-panel-hint-size)*0.5) !important; 111 111 + width: 100%; 112 112 + height: var(--uc-panel-hint-size) !important; 113 113 + background-color: var(--uc-panel-hint) !important; 114 114 + border-radius: var(--uc-radius) !important; 115 115 + transition: opacity var(--uc-transition) var(--uc-mouseout-delay) !important; 64 116 } 65 65 - --nav-width: 66 66 - clamp( 67 67 - min(calc( 68 68 - 100vw 69 69 - - var(--uc-floating-margin)*2 70 70 - - var(--uc-content-margin-inline) 71 71 - ), 700px ), 72 72 - 75vw, 73 73 - 1000px 74 74 - ); 75 75 - --nav-height: 38px; 76 76 - --personal-height: 24.5px; 77 77 - &[uidensity=compact] { 78 78 - --nav-height: 34.5px; 117 117 + &::after { 118 118 + content: ""; 119 119 + position: fixed; 120 120 + top: 0; 121 121 + width: 100vw; 122 122 + height: var(--uc-content-margin-top); 123 123 + left: 0; 124 124 + -moz-window-dragging: drag; 125 125 + pointer-events: none !important; 79 126 } 80 80 - 81 81 - --uc-navbar-hover-margin-top: 82 82 - calc( 83 83 - var(--uc-floating-margin) 84 84 - + 85 85 - var(--uc-content-margin-top) 86 86 - ); 87 87 - 88 88 - #urlbar-container { width: unset !important; } 127 127 + }} 128 128 + 129 129 + #nav-bar { 130 130 + min-height: unset !important; 131 131 + max-height: unset !important; 132 132 + height: var(--nav-height) !important; 133 133 + margin-top: calc(-1 * (var(--nav-height) + var(--personal-height) + var(--uc-floating-margin) + var(--uc-content-margin))); 134 134 + 135 135 + transition: margin-top var(--uc-transition) var(--uc-mouseout-delay) !important; 136 136 + will-change: margin-top !important; 137 137 + border-radius: var(--uc-radius) !important; 138 138 + } 139 139 + 140 140 + #PersonalToolbar { 141 141 + min-height: var(--personal-height) !important; 142 142 + max-height: var(--personal-height) !important; 143 143 + margin-top: var(--uc-floating-margin) !important; 144 144 + border-radius: var(--uc-radius) !important; 145 145 + } 89 146 90 90 - #navigator-toolbox { 91 91 - position: absolute !important; 92 92 - z-index: 50 !important; 93 93 - 94 94 - width: var(--nav-width) !important; 95 95 - height: var(--uc-hover-target-size) !important; 96 96 - left: calc(50vw - var(--nav-width)*0.5) !important; 97 97 - right: auto !important; 98 98 - 99 99 - border-radius: var(--uc-radius) !important; 100 100 - background-color: transparent !important; 147 147 + &[customizing] { 148 148 + & #customization-content-container { 149 149 + margin-top: var(--nav-height) !important; 101 150 } 102 102 - 103 103 - @media not (-moz-bool-pref: "uc.tweak.borderless") { 104 104 - &:not([customizing]):not([sizemode="fullscreen"]) #navigator-toolbox { 105 105 - &::before { 106 106 - content: ""; 107 107 - position: absolute; 108 108 - top: calc(var(--uc-content-margin)*0.5 - var(--uc-panel-hint-size)*0.5) !important; 109 109 - width: 100%; 110 110 - height: var(--uc-panel-hint-size) !important; 111 111 - background-color: var(--uc-panel-hint) !important; 112 112 - border-radius: var(--uc-radius) !important; 113 113 - transition: opacity var(--uc-transition) var(--uc-mouseout-delay) !important; 114 114 - } 115 115 - &::after { 116 116 - content: ""; 117 117 - position: fixed; 118 118 - top: 0; 119 119 - width: 100vw; 120 120 - height: var(--uc-content-margin-top); 121 121 - left: 0; 122 122 - -moz-window-dragging: drag; 123 123 - pointer-events: none !important; 124 124 - } 125 125 - }} 126 126 - 127 127 - #nav-bar { 128 128 - min-height: unset !important; 129 129 - max-height: unset !important; 130 130 - height: var(--nav-height) !important; 131 131 - margin-top: calc(-1 * (var(--nav-height) + var(--personal-height) + var(--uc-floating-margin) + var(--uc-content-margin))); 132 132 - 133 133 - transition: margin-top var(--uc-transition) var(--uc-mouseout-delay) !important; 134 134 - will-change: margin-top !important; 135 135 - border-radius: var(--uc-radius) !important; 151 151 + & #nav-bar, 152 152 + & #PersonalToolbar { 153 153 + background-color: var(--uc-bg) !important; 154 154 + } 155 155 + & #nav-bar { 156 156 + margin-top: var(--uc-sidebar-margin) !important; 157 157 + top: var(--uc-content-margin-top) !important; 158 158 + } 159 159 + } 160 160 + 161 161 + &:not([customizing]) { 162 162 + #toolbar-menubar { 163 163 + display: none !important; 164 164 + } 165 165 + 166 166 + #nav-bar, 167 167 + #PersonalToolbar { 168 168 + width: 100% !important; 169 169 + background-color: transparent !important; 170 170 + z-index: 100 !important; 171 171 + background-color: var(--uc-bg-tran) !important; 136 172 } 137 137 - 138 173 #PersonalToolbar { 139 139 - min-height: var(--personal-height) !important; 140 140 - max-height: var(--personal-height) !important; 141 141 - margin-top: var(--uc-floating-margin) !important; 142 142 - border-radius: var(--uc-radius) !important; 174 174 + position: relative !important; 175 175 + overflow: unset !important; 143 176 } 144 177 145 145 - &[customizing] { 146 146 - & #customization-content-container { 147 147 - margin-top: var(--nav-height) !important; 148 148 - } 149 149 - & #nav-bar, 150 150 - & #PersonalToolbar { 151 151 - background-color: var(--uc-bg) !important; 152 152 - } 153 153 - & #nav-bar { 154 154 - margin-top: var(--uc-sidebar-margin) !important; 155 155 - top: var(--uc-content-margin-top) !important; 156 156 - } 178 178 + @media not (-moz-bool-pref: "uc.tweak.no-blur") { 179 179 + #nav-bar::before, 180 180 + #PersonalToolbar::before { 181 181 + content: ""; 182 182 + position: absolute; 183 183 + top: 0; 184 184 + left: 0; 185 185 + width: 100%; 186 186 + height: 100%; 187 187 + background: transparent !important; 188 188 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 189 189 + border-radius: var(--uc-radius) !important; 190 190 + z-index: -1 !important; 191 191 + } 157 192 } 158 158 - 159 159 - &:not([customizing]) { 160 160 - #toolbar-menubar { 161 161 - display: none !important; 162 162 - } 163 163 - 164 164 - #nav-bar, 165 165 - #PersonalToolbar { 166 166 - width: 100% !important; 167 167 - background-color: transparent !important; 168 168 - z-index: 100 !important; 169 169 - background-color: var(--uc-bg-tran) !important; 170 170 - } 171 171 - #PersonalToolbar { 172 172 - position: relative !important; 173 173 - overflow: unset !important; 174 174 - } 175 175 - 176 176 - @media not (-moz-bool-pref: "uc.tweak.no-blur") { 177 177 - #nav-bar::before, 178 178 - #PersonalToolbar::before { 179 179 - content: ""; 180 180 - position: absolute; 181 181 - top: 0; 182 182 - left: 0; 183 183 - width: 100%; 184 184 - height: 100%; 185 185 - background: transparent !important; 186 186 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 187 187 - border-radius: var(--uc-radius) !important; 188 188 - z-index: -1 !important; 189 189 - } 190 190 - } 191 191 - #PersonalToolbar::after { 192 192 - content: ""; 193 193 - position: absolute; 194 194 - bottom: 0; 195 195 - left: 0; 196 196 - width: 100%; 197 197 - height: calc(var(--personal-height) + var(--uc-floating-margin)); 198 198 - background: transparent !important; 199 199 - z-index: -1 !important; 200 200 - } 201 201 - 202 202 - toolbarspring { flex-grow: 0 !important; } 193 193 + #PersonalToolbar::after { 194 194 + content: ""; 195 195 + position: absolute; 196 196 + bottom: 0; 197 197 + left: 0; 198 198 + width: 100%; 199 199 + height: calc(var(--personal-height) + var(--uc-floating-margin)); 200 200 + background: transparent !important; 201 201 + z-index: -1 !important; 202 202 + } 203 203 + 204 204 + toolbarspring { flex-grow: 0 !important; } 205 205 + 206 206 + &:has( 207 207 + #navigator-toolbox:hover, 208 208 + #nav-bar-customization-target:hover, 209 209 + #PanelUI-button:hover, 210 210 + #urlbar:focus-within, 211 211 + #urlbar[breakout][breakout-extend], 212 212 + #nav-bar-overflow-button[open], 213 213 + #nav-bar-overflow-button:hover, 214 214 + #nav-bar-customization-target toolbarbutton[open="true"], 215 215 + .urlbar-input-container > *[role="button"][open="true"], 216 216 + #identity-box > *[role="button"][open="true"], 217 217 + #PanelUI-menu-button[open="true"] 218 218 + ) { 219 219 + #nav-bar { 220 220 + margin-top: var(--uc-navbar-hover-margin-top) !important; 221 221 + transition: margin-top var(--uc-transition) !important; 203 222 204 204 - &:has( 205 205 - #navigator-toolbox:hover, 206 206 - #nav-bar-customization-target:hover, 207 207 - #PanelUI-button:hover, 208 208 - #urlbar:focus-within, 209 209 - #urlbar[breakout][breakout-extend], 210 210 - #nav-bar-overflow-button[open], 211 211 - #nav-bar-overflow-button:hover, 212 212 - #nav-bar-customization-target toolbarbutton[open="true"], 213 213 - .urlbar-input-container > *[role="button"][open="true"], 214 214 - #identity-box > *[role="button"][open="true"], 215 215 - #PanelUI-menu-button[open="true"] 216 216 - ) { 217 217 - #nav-bar { 218 218 - margin-top: var(--uc-navbar-hover-margin-top) !important; 219 219 - transition: margin-top var(--uc-transition) !important; 223 223 + #nav-bar-customization-target > *:not([disabled="true"]), 224 224 + #nav-bar-overflow-button, #PanelUI-button:not([disabled="true"]) {opacity: 1 !important;} 225 225 + #nav-bar-customization-target > *[disabled="true"], #PanelUI-button[disabled="true"] {opacity: 0.5 !important;} 226 226 + } 227 227 + #navigator-toolbox { 228 228 + height: calc(2*var(--uc-content-margin) + var(--nav-height)) !important; 229 229 + z-index: 99 !important; 220 230 221 221 - #nav-bar-customization-target > *:not([disabled="true"]), 222 222 - #nav-bar-overflow-button, #PanelUI-button:not([disabled="true"]) {opacity: 1 !important;} 223 223 - #nav-bar-customization-target > *[disabled="true"], #PanelUI-button[disabled="true"] {opacity: 0.5 !important;} 224 224 - } 225 225 - #navigator-toolbox { 226 226 - height: calc(2*var(--uc-content-margin) + var(--nav-height)) !important; 227 227 - z-index: 99 !important; 228 228 - 229 229 - &::before { 230 230 - transition: opacity var(--uc-transition) !important; 231 231 - opacity: 0 !important; 232 232 - } 233 233 - } 231 231 + &::before { 232 232 + transition: opacity var(--uc-transition) !important; 233 233 + opacity: 0 !important; 234 234 } 235 235 + } 235 236 } 237 237 + } 236 238 }

+290 -290

chrome/browser/sidebar.css

··· 3 3 4 4 /* make sidebar bg transparent */ 5 5 @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") { 6 6 - window#webextpanels-window { 7 7 - background-color: transparent !important; 8 8 - } 6 6 + window#webextpanels-window { 7 7 + background-color: transparent !important; 8 8 + } 9 9 } 10 10 11 11 #main-window:not([customizing]):has(#sidebar-box:not([hidden="true"])) { 12 12 - /* adjust #appcontent margin */ 13 13 - &:has(#sidebar-box:not([positionend="true"])) { 14 14 - --uc-content-margin-left: 0px !important; 15 15 - } &:has(#sidebar-box[positionend="true"]) { 16 16 - --uc-content-margin-right: 0px !important; 12 12 + /* adjust #appcontent margin */ 13 13 + &:has(#sidebar-box:not([positionend="true"])) { 14 14 + --uc-content-margin-left: 0px !important; 15 15 + } &:has(#sidebar-box[positionend="true"]) { 16 16 + --uc-content-margin-right: 0px !important; 17 17 + } 18 18 + 19 19 + #sidebar-box { 20 20 + min-width: var(--uc-sidebar-width) !important; 21 21 + margin-bottom: var(--uc-content-margin-bottom) !important; 22 22 + @media (-moz-bool-pref: "uc.tweak.borderless") { 23 23 + margin-bottom: var(--uc-sidebar-margin) !important; 24 24 + } 25 25 + margin-top: var(--uc-content-margin-top) !important; 26 26 + &[positionend="true"] { 27 27 + margin-right: var(--uc-sidebar-margin); 28 28 + } &:not([positionend="true"]) { 29 29 + margin-left: var(--uc-sidebar-margin); 30 30 + } 31 31 + 32 32 + &::before { 33 33 + content: ""; 34 34 + position: absolute; 35 35 + z-index: -10; 36 36 + top: 0; 37 37 + bottom: 0; 38 38 + left: calc(-1*var(--uc-sidebar-margin)); 39 39 + right: calc(-1*var(--uc-sidebar-margin)); 40 40 + width: auto; 41 41 + height: auto; 42 42 + } 43 43 + } 44 44 + 45 45 + @media (-moz-bool-pref: "uc.tweak.borderless") { 46 46 + /* navbar hidden */ 47 47 + &[titlepreface*="​"] #sidebar-box { 48 48 + margin-top: var(--uc-sidebar-margin) !important; 49 49 + } 50 50 + } 51 51 + 52 52 + #sidebar { 53 53 + clip-path: circle(100%); 54 54 + border-radius: var(--uc-content-radius) !important; 55 55 + @media (-moz-bool-pref: "uc.tweak.sidebar.header") { 56 56 + border-top-left-radius: 0px !important; 57 57 + border-top-right-radius: 0px !important; 58 58 + } 59 59 + } 60 60 + 61 61 + #sidebar-splitter { 62 62 + width: var(--uc-sidebar-margin) !important; 63 63 + border: none !important; 64 64 + margin-inline: 0 !important; 65 65 + } 66 66 + 67 67 + #sidebar-header { 68 68 + @media not (-moz-bool-pref: "uc.tweak.sidebar.header") { 69 69 + display: none !important; 70 70 + } 71 71 + border-top-left-radius: var(--uc-radius) !important; 72 72 + border-top-right-radius: var(--uc-radius) !important; 73 73 + padding: 0 1.5px !important; 74 74 + border: none !important; 75 75 + font-size: 16px !important; 76 76 + 77 77 + #sidebar-switcher-target { 78 78 + align-content: flex-start !important; 79 79 + min-width: 0 !important; 80 80 + display: flex !important; 81 81 + width: auto !important; 82 82 + margin-inline-end: 0 !important; 83 83 + padding: 0 !important; 84 84 + border: none !important; 85 85 + appearance: unset !important; 86 86 + flex: unset !important; 87 87 + padding-block-start: 4px !important; 88 88 + padding-block-end: 2px !important; 89 89 + padding-inline-end: 4px !important; 17 90 } 18 18 - 19 19 - #sidebar-box { 20 20 - min-width: var(--uc-sidebar-width) !important; 21 21 - margin-bottom: var(--uc-content-margin-bottom) !important; 22 22 - @media (-moz-bool-pref: "uc.tweak.borderless") { 23 23 - margin-bottom: var(--uc-sidebar-margin) !important; 24 24 - } 25 25 - margin-top: var(--uc-content-margin-top) !important; 26 26 - &[positionend="true"] { 27 27 - margin-right: var(--uc-sidebar-margin); 28 28 - } &:not([positionend="true"]) { 29 29 - margin-left: var(--uc-sidebar-margin); 30 30 - } 31 31 - 32 32 - &::before { 33 33 - content: ""; 34 34 - position: absolute; 35 35 - z-index: -10; 36 36 - top: 0; 37 37 - bottom: 0; 38 38 - left: calc(-1*var(--uc-sidebar-margin)); 39 39 - right: calc(-1*var(--uc-sidebar-margin)); 40 40 - width: auto; 41 41 - height: auto; 42 42 - } 91 91 + 92 92 + #sidebar-icon { 93 93 + margin-inline: 7px 5px !important; 43 94 } 44 44 - 45 45 - @media (-moz-bool-pref: "uc.tweak.borderless") { 46 46 - /* navbar hidden */ 47 47 - &[titlepreface*="​"] #sidebar-box { 48 48 - margin-top: var(--uc-sidebar-margin) !important; 49 49 - } 95 95 + 96 96 + #sidebar-title { 97 97 + padding: 0 !important; 98 98 + padding-inline: 1px !important; 99 99 + font: 15px sans-serif !important; 50 100 } 101 101 + #sidebar-switcher-arrow { min-width: 0 !important; } 102 102 + #sidebar-close { display: none !important; } 103 103 + } 51 104 52 52 - #sidebar { 53 53 - clip-path: circle(100%); 54 54 - border-radius: var(--uc-content-radius) !important; 55 55 - @media (-moz-bool-pref: "uc.tweak.sidebar.header") { 56 56 - border-top-left-radius: 0px !important; 57 57 - border-top-right-radius: 0px !important; 58 58 - } 105 105 + /* navbar hidden */ 106 106 + &[sizemode="fullscreen"][titlepreface*="​"] #sidebar-box { 107 107 + margin-top: 0 !important; 108 108 + height: 100% !important; 109 109 + & #sidebar { 110 110 + padding-block: var(--uc-sidebar-margin) !important; 59 111 } 112 112 + } 60 113 114 114 + /* sidebar collapse or sidebar hidden */ 115 115 + &:is([titlepreface*="᠎"], [titlepreface*="‌"]) { 61 116 #sidebar-splitter { 62 62 - width: var(--uc-sidebar-margin) !important; 63 63 - border: none !important; 64 64 - margin-inline: 0 !important; 117 117 + display: none !important; 118 118 + } 119 119 + 120 120 + #sidebar-box { 121 121 + position: relative; 122 122 + z-index: 1; 123 123 + min-width: var(--uc-sidebar-width) !important; 124 124 + width: var(--uc-sidebar-width) !important; 125 125 + max-width: var(--uc-sidebar-width) !important; 126 126 + 127 127 + &[positionend="true"] { 128 128 + margin-left: var(--uc-sidebar-margin); 129 129 + } &:not([positionend="true"]) { 130 130 + margin-right: var(--uc-sidebar-margin); 131 131 + } 132 132 + 133 133 + &:not(:hover) #sidebar-header { 134 134 + overflow: clip !important; 135 135 + } 136 136 + } 137 137 + 138 138 + #sidebar, 139 139 + #sidebar-header, 140 140 + #sidebar-header #sidebar-switcher-target { 141 141 + transition: 142 142 + min-width var(--uc-transition) var(--uc-mouseout-delay), 143 143 + max-width var(--uc-transition) var(--uc-mouseout-delay), 144 144 + width var(--uc-transition) var(--uc-mouseout-delay), 145 145 + background var(--uc-transition) var(--uc-mouseout-delay), 146 146 + backdrop-filter var(--uc-transition) var(--uc-mouseout-delay) 147 147 + !important; 148 148 + will-change: min-width; 149 149 + } 150 150 + 151 151 + #sidebar-box:hover > #sidebar-header, 152 152 + #sidebar-box:hover > #sidebar-header > #sidebar-switcher-target, 153 153 + #sidebar-box:hover > #sidebar { 154 154 + transition: 155 155 + min-width var(--uc-transition), 156 156 + max-width var(--uc-transition), 157 157 + width var(--uc-transition), 158 158 + background var(--uc-transition), 159 159 + backdrop-filter var(--uc-transition) 160 160 + !important; 161 161 + min-width: var(--uc-sidebar-hover-width) !important; 65 162 } 66 66 - 67 67 - #sidebar-header { 68 68 - @media not (-moz-bool-pref: "uc.tweak.sidebar.header") { 69 69 - display: none !important; 163 163 + 164 164 + #sidebar-box:hover > #sidebar-header, 165 165 + #sidebar-box:hover > #sidebar { 166 166 + background-color: var(--uc-bg-tran) !important; 167 167 + @media not (-moz-bool-pref: "uc.tweak.no-blur") { 168 168 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 169 169 + } 170 170 + } 171 171 + 172 172 + /* sidebar hidden */ 173 173 + &[titlepreface*="‌"] { 174 174 + #sidebar-box { 175 175 + min-width: var(--uc-content-margin) !important; 176 176 + max-width: var(--uc-content-margin) !important; 177 177 + margin-inline: 0px !important; 178 178 + 179 179 + & #sidebar, 180 180 + & #sidebar-header { 181 181 + will-change: auto !important; 182 182 + transition: 183 183 + margin-left var(--uc-transition) var(--uc-mouseout-delay), 184 184 + margin-right var(--uc-transition) var(--uc-mouseout-delay) 185 185 + !important; 186 186 + background-color: var(--uc-bg-tran) !important; 187 187 + @media not (-moz-bool-pref: "uc.tweak.no-blur") { 188 188 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 189 189 + } 190 190 + 191 191 + margin-left: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin-left))) !important; 192 192 + min-width: var(--uc-sidebar-hover-width) !important; 193 193 + max-width: var(--uc-sidebar-hover-width) !important; 70 194 } 71 71 - border-top-left-radius: var(--uc-radius) !important; 72 72 - border-top-right-radius: var(--uc-radius) !important; 73 73 - padding: 0 1.5px !important; 74 74 - border: none !important; 75 75 - font-size: 16px !important; 76 76 - 77 77 - #sidebar-switcher-target { 78 78 - align-content: flex-start !important; 79 79 - min-width: 0 !important; 80 80 - display: flex !important; 81 81 - width: auto !important; 82 82 - margin-inline-end: 0 !important; 83 83 - padding: 0 !important; 84 84 - border: none !important; 85 85 - appearance: unset !important; 86 86 - flex: unset !important; 87 87 - padding-block-start: 4px !important; 88 88 - padding-block-end: 2px !important; 89 89 - padding-inline-end: 4px !important; 195 195 + 196 196 + &:hover #sidebar, 197 197 + &:hover #sidebar-header { 198 198 + transition: 199 199 + margin-left var(--uc-transition), 200 200 + margin-right var(--uc-transition) 201 201 + !important; 90 202 } 91 91 - 92 92 - #sidebar-icon { 93 93 - margin-inline: 7px 5px !important; 203 203 + 204 204 + & #sidebar-header { margin-top: var(--uc-floating-margin) !important; } 205 205 + & #sidebar { 206 206 + margin-block: var(--uc-floating-margin) !important; 207 207 + @media (-moz-bool-pref: "uc.tweak.sidebar.header") { 208 208 + margin-top: 0 !important; 209 209 + } 94 210 } 95 95 - 96 96 - #sidebar-title { 97 97 - padding: 0 !important; 98 98 - padding-inline: 1px !important; 99 99 - font: 15px sans-serif !important; 211 211 + 212 212 + 213 213 + &:not([positionend="true"]) #sidebar, 214 214 + &:not([positionend="true"]) #sidebar-header { 215 215 + margin-left: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin))) !important; 216 216 + } 217 217 + &[positionend="true"] #sidebar, 218 218 + &[positionend="true"] #sidebar-header { 219 219 + margin-right: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin))) !important; 100 220 } 101 101 - #sidebar-switcher-arrow { min-width: 0 !important; } 102 102 - #sidebar-close { display: none !important; } 103 103 - } 104 104 - 105 105 - /* navbar hidden */ 106 106 - &[sizemode="fullscreen"][titlepreface*="​"] #sidebar-box { 107 107 - margin-top: 0 !important; 108 108 - height: 100% !important; 109 109 - & #sidebar { 110 110 - padding-block: var(--uc-sidebar-margin) !important; 221 221 + 222 222 + &:not([positionend="true"]):hover #sidebar, 223 223 + &:not([positionend="true"]):hover #sidebar-header { 224 224 + margin-left: calc(var(--uc-content-margin) + var(--uc-floating-margin)) !important; 225 225 + } 226 226 + &[positionend="true"]:hover #sidebar, 227 227 + &[positionend="true"]:hover #sidebar-header { 228 228 + margin-right: calc(var(--uc-content-margin) + var(--uc-floating-margin)) !important; 111 229 } 112 112 - } 113 230 114 114 - /* sidebar collapse or sidebar hidden */ 115 115 - &:is([titlepreface*="᠎"], [titlepreface*="‌"]) { 116 116 - #sidebar-splitter { 117 117 - display: none !important; 231 231 + &::after { 232 232 + content: ""; 233 233 + position: absolute !important; 234 234 + top: 0 !important; 235 235 + left: 0 !important; 236 236 + height: 100% !important; 237 237 + width: var(--uc-hover-target-size) !important; 238 238 + } &[positionend="true"]::after { 239 239 + left: unset !important; 240 240 + right: 0 !important; 118 241 } 119 119 - 120 120 - #sidebar-box { 121 121 - position: relative; 122 122 - z-index: 1; 123 123 - min-width: var(--uc-sidebar-width) !important; 124 124 - width: var(--uc-sidebar-width) !important; 125 125 - max-width: var(--uc-sidebar-width) !important; 126 126 - 127 127 - &[positionend="true"] { 128 128 - margin-left: var(--uc-sidebar-margin); 129 129 - } &:not([positionend="true"]) { 130 130 - margin-right: var(--uc-sidebar-margin); 131 131 - } 132 242 133 133 - &:not(:hover) #sidebar-header { 134 134 - overflow: clip !important; 135 135 - } 243 243 + &:hover::after { 244 244 + width: calc(var(--uc-floating-margin) + var(--uc-content-margin) + 1px) !important; 136 245 } 137 137 - 138 138 - #sidebar, 139 139 - #sidebar-header, 140 140 - #sidebar-header #sidebar-switcher-target { 141 141 - transition: 142 142 - min-width var(--uc-transition) var(--uc-mouseout-delay), 143 143 - max-width var(--uc-transition) var(--uc-mouseout-delay), 144 144 - width var(--uc-transition) var(--uc-mouseout-delay), 145 145 - background var(--uc-transition) var(--uc-mouseout-delay), 146 146 - backdrop-filter var(--uc-transition) var(--uc-mouseout-delay) 147 147 - !important; 148 148 - will-change: min-width; 246 246 + } 247 247 + 248 248 + @media not (-moz-bool-pref: "uc.tweak.borderless") { 249 249 + &:not([sizemode="fullscreen"]) 250 250 + #sidebar-box:not([positionend="true"])::before { 251 251 + left: calc(var(--uc-content-margin)*0.5 - var(--uc-panel-hint-size)*0.5) !important; 149 252 } 150 150 - 151 151 - #sidebar-box:hover > #sidebar-header, 152 152 - #sidebar-box:hover > #sidebar-header > #sidebar-switcher-target, 153 153 - #sidebar-box:hover > #sidebar { 154 154 - transition: 155 155 - min-width var(--uc-transition), 156 156 - max-width var(--uc-transition), 157 157 - width var(--uc-transition), 158 158 - background var(--uc-transition), 159 159 - backdrop-filter var(--uc-transition) 160 160 - !important; 161 161 - min-width: var(--uc-sidebar-hover-width) !important; 253 253 + &:not([sizemode="fullscreen"]) 254 254 + #sidebar-box[positionend="true"]::before { 255 255 + right: calc(var(--uc-content-margin)*0.5 - var(--uc-panel-hint-size)*0.5) !important; 162 256 } 163 163 - 164 164 - #sidebar-box:hover > #sidebar-header, 165 165 - #sidebar-box:hover > #sidebar { 166 166 - background-color: var(--uc-bg-tran) !important; 167 167 - @media not (-moz-bool-pref: "uc.tweak.no-blur") { 168 168 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 169 169 - } 257 257 + &:not([sizemode="fullscreen"]) #sidebar-box::before { 258 258 + content: ""; 259 259 + position: absolute; 260 260 + height: 80%; 261 261 + top: 10%; 262 262 + bottom: auto !important; 263 263 + width: var(--uc-panel-hint-size) !important; 264 264 + z-index: 199 !important; 265 265 + 266 266 + visibility: visible; 267 267 + display: unset; 268 268 + opacity: 1 !important; 269 269 + background-color: var(--uc-panel-hint) !important; 270 270 + border-radius: var(--uc-content-radius) !important; 271 271 + transition: opacity var(--uc-transition) var(--uc-mouseout-delay) !important; 170 272 } 171 171 - 172 172 - /* sidebar hidden */ 173 173 - &[titlepreface*="‌"] { 174 174 - #sidebar-box { 175 175 - min-width: var(--uc-content-margin) !important; 176 176 - max-width: var(--uc-content-margin) !important; 177 177 - margin-inline: 0px !important; 178 178 - 179 179 - & #sidebar, 180 180 - & #sidebar-header { 181 181 - will-change: auto !important; 182 182 - transition: 183 183 - margin-left var(--uc-transition) var(--uc-mouseout-delay), 184 184 - margin-right var(--uc-transition) var(--uc-mouseout-delay) 185 185 - !important; 186 186 - background-color: var(--uc-bg-tran) !important; 187 187 - @media not (-moz-bool-pref: "uc.tweak.no-blur") { 188 188 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 189 189 - } 190 190 - 191 191 - margin-left: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin-left))) !important; 192 192 - min-width: var(--uc-sidebar-hover-width) !important; 193 193 - max-width: var(--uc-sidebar-hover-width) !important; 194 194 - } 195 195 - 196 196 - &:hover #sidebar, 197 197 - &:hover #sidebar-header { 198 198 - transition: 199 199 - margin-left var(--uc-transition), 200 200 - margin-right var(--uc-transition) 201 201 - !important; 202 202 - } 203 203 - 204 204 - & #sidebar-header { margin-top: var(--uc-floating-margin) !important; } 205 205 - & #sidebar { 206 206 - margin-block: var(--uc-floating-margin) !important; 207 207 - @media (-moz-bool-pref: "uc.tweak.sidebar.header") { 208 208 - margin-top: 0 !important; 209 209 - } 210 210 - } 211 211 - 212 212 - 213 213 - &:not([positionend="true"]) #sidebar, 214 214 - &:not([positionend="true"]) #sidebar-header { 215 215 - margin-left: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin))) !important; 216 216 - } 217 217 - &[positionend="true"] #sidebar, 218 218 - &[positionend="true"] #sidebar-header { 219 219 - margin-right: calc(-1 * (var(--uc-sidebar-hover-width) + var(--uc-content-margin))) !important; 220 220 - } 221 221 - 222 222 - &:not([positionend="true"]):hover #sidebar, 223 223 - &:not([positionend="true"]):hover #sidebar-header { 224 224 - margin-left: calc(var(--uc-content-margin) + var(--uc-floating-margin)) !important; 225 225 - } 226 226 - &[positionend="true"]:hover #sidebar, 227 227 - &[positionend="true"]:hover #sidebar-header { 228 228 - margin-right: calc(var(--uc-content-margin) + var(--uc-floating-margin)) !important; 229 229 - } 230 230 - 231 231 - &::after { 232 232 - content: ""; 233 233 - position: absolute !important; 234 234 - top: 0 !important; 235 235 - left: 0 !important; 236 236 - height: 100% !important; 237 237 - width: var(--uc-hover-target-size) !important; 238 238 - } &[positionend="true"]::after { 239 239 - left: unset !important; 240 240 - right: 0 !important; 241 241 - } 242 242 - 243 243 - &:hover::after { 244 244 - width: calc(var(--uc-floating-margin) + var(--uc-content-margin) + 1px) !important; 245 245 - } 246 246 - } 247 247 - 248 248 - @media not (-moz-bool-pref: "uc.tweak.borderless") { 249 249 - &:not([sizemode="fullscreen"]) 250 250 - #sidebar-box:not([positionend="true"])::before { 251 251 - left: calc(var(--uc-content-margin)*0.5 - var(--uc-panel-hint-size)*0.5) !important; 252 252 - } 253 253 - &:not([sizemode="fullscreen"]) 254 254 - #sidebar-box[positionend="true"]::before { 255 255 - right: calc(var(--uc-content-margin)*0.5 - var(--uc-panel-hint-size)*0.5) !important; 256 256 - } 257 257 - &:not([sizemode="fullscreen"]) #sidebar-box::before { 258 258 - content: ""; 259 259 - position: absolute; 260 260 - height: 80%; 261 261 - top: 10%; 262 262 - bottom: auto !important; 263 263 - width: var(--uc-panel-hint-size) !important; 264 264 - z-index: 199 !important; 273 273 + 274 274 + &:not([sizemode="fullscreen"]) #sidebar-box:hover::before { 275 275 + opacity: 0 !important; 276 276 + transition: opacity var(--uc-transition) !important; 277 277 + } 278 278 + } 279 279 + 280 280 + &[sizemode="fullscreen"] #sidebar-box { 281 281 + background-color: transparent !important; 282 282 + &[positionend="true"] { 283 283 + margin-left: calc(-1 * var(--uc-content-margin)) !important; 284 284 + } &:not([positionend="true"]) { 285 285 + margin-right: calc(-1 * var(--uc-content-margin)) !important; 286 286 + } 265 287 266 266 - visibility: visible; 267 267 - display: unset; 268 268 - opacity: 1 !important; 269 269 - background-color: var(--uc-panel-hint) !important; 270 270 - border-radius: var(--uc-content-radius) !important; 271 271 - transition: opacity var(--uc-transition) var(--uc-mouseout-delay) !important; 272 272 - } 288 288 + &:not([positionend="true"]):hover #sidebar, 289 289 + &:not([positionend="true"]):hover #sidebar-header { 290 290 + margin-left: var(--uc-content-margin) !important; 291 291 + } 292 292 + &[positionend="true"]:hover #sidebar, 293 293 + &[positionend="true"]:hover #sidebar-header { 294 294 + margin-right: var(--uc-content-margin) !important; 295 295 + } 296 296 + } 273 297 274 274 - &:not([sizemode="fullscreen"]) #sidebar-box:hover::before { 275 275 - opacity: 0 !important; 276 276 - transition: opacity var(--uc-transition) !important; 277 277 - } 278 278 - } 279 279 - 280 280 - &[sizemode="fullscreen"] #sidebar-box { 281 281 - background-color: transparent !important; 282 282 - &[positionend="true"] { 283 283 - margin-left: calc(-1 * var(--uc-content-margin)) !important; 284 284 - } &:not([positionend="true"]) { 285 285 - margin-right: calc(-1 * var(--uc-content-margin)) !important; 286 286 - } 287 287 - 288 288 - &:not([positionend="true"]):hover #sidebar, 289 289 - &:not([positionend="true"]):hover #sidebar-header { 290 290 - margin-left: var(--uc-content-margin) !important; 291 291 - } 292 292 - &[positionend="true"]:hover #sidebar, 293 293 - &[positionend="true"]:hover #sidebar-header { 294 294 - margin-right: var(--uc-content-margin) !important; 295 295 - } 296 296 - } 297 297 - 298 298 - @media (-moz-bool-pref: "uc.tweak.borderless") { 299 299 - #sidebar-box { 300 300 - background-color: transparent !important; 301 301 - &[positionend="true"] { 302 302 - margin-left: calc(-1 * var(--uc-content-margin)) !important; 303 303 - } &:not([positionend="true"]) { 304 304 - margin-right: calc(-1 * var(--uc-content-margin)) !important; 305 305 - } 298 298 + @media (-moz-bool-pref: "uc.tweak.borderless") { 299 299 + #sidebar-box { 300 300 + background-color: transparent !important; 301 301 + &[positionend="true"] { 302 302 + margin-left: calc(-1 * var(--uc-content-margin)) !important; 303 303 + } &:not([positionend="true"]) { 304 304 + margin-right: calc(-1 * var(--uc-content-margin)) !important; 305 305 + } 306 306 307 307 - &:not([positionend="true"]):hover #sidebar, 308 308 - &:not([positionend="true"]):hover #sidebar-header { 309 309 - margin-left: var(--uc-floating-margin) !important; 310 310 - } 311 311 - &[positionend="true"]:hover #sidebar, 312 312 - &[positionend="true"]:hover #sidebar-header { 313 313 - margin-right: var(--uc-floating-margin) !important; 314 314 - } 315 315 - } 316 316 - } 307 307 + &:not([positionend="true"]):hover #sidebar, 308 308 + &:not([positionend="true"]):hover #sidebar-header { 309 309 + margin-left: var(--uc-floating-margin) !important; 310 310 + } 311 311 + &[positionend="true"]:hover #sidebar, 312 312 + &[positionend="true"]:hover #sidebar-header { 313 313 + margin-right: var(--uc-floating-margin) !important; 314 314 + } 317 315 } 318 318 - 319 319 - #sidebar-box[positionend="true"]{ direction: rtl } 320 320 - #sidebar-box[positionend="true"] > *{ direction: ltr } 321 321 - #sidebar-box[positionend="true"]:-moz-locale-dir(rtl){ direction: ltr } 322 322 - #sidebar-box[positionend="true"]:-moz-locale-dir(rtl) > *{ direction: rtl } 316 316 + } 323 317 } 318 318 + 319 319 + #sidebar-box[positionend="true"]{ direction: rtl } 320 320 + #sidebar-box[positionend="true"] > *{ direction: ltr } 321 321 + #sidebar-box[positionend="true"]:-moz-locale-dir(rtl){ direction: ltr } 322 322 + #sidebar-box[positionend="true"]:-moz-locale-dir(rtl) > *{ direction: rtl } 323 323 + } 324 324 }

+45 -45

chrome/browser/urlbar.css

··· 3 3 4 4 #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > 5 5 .identity-box-button { 6 6 - 7 7 - &:not(:hover){ 8 8 - background-color: transparent !important; 9 9 - } 10 10 - & image { 11 11 - list-style-image: url("../icons/firefox.svg") !important; 12 12 - } 13 13 - 14 14 - & #identity-icon-label { 15 15 - display: none !important; 16 16 - } 6 6 + 7 7 + &:not(:hover){ 8 8 + background-color: transparent !important; 9 9 + } 10 10 + & image { 11 11 + list-style-image: url("../icons/firefox.svg") !important; 12 12 + } 13 13 + 14 14 + & #identity-icon-label { 15 15 + display: none !important; 16 16 + } 17 17 18 18 - fill: var(--toolbarbutton-icon-fill) !important; 18 18 + fill: var(--toolbarbutton-icon-fill) !important; 19 19 } 20 20 21 21 #urlbar { 22 22 - z-index: 9999 !important; 23 23 - margin: auto !important; 22 22 + z-index: 9999 !important; 23 23 + margin: auto !important; 24 24 } 25 25 26 26 #urlbar-background { 27 27 - border-radius: var(--uc-button-radius) !important; 28 28 - border: none !important; 29 29 - box-shadow: none !important; 30 30 - background: transparent !important; 27 27 + border-radius: var(--uc-button-radius) !important; 28 28 + border: none !important; 29 29 + box-shadow: none !important; 30 30 + background: transparent !important; 31 31 } 32 32 33 33 #urlbar[breakout-extend] #urlbar-background { 34 34 - background-color: Field !important; 35 35 - @media not (-moz-bool-pref: "uc.tweak.no-blur") { 36 36 - background-color: color-mix(in srgb, Field, transparent 10%) !important; 37 37 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 38 38 - } 34 34 + background-color: Field !important; 35 35 + @media not (-moz-bool-pref: "uc.tweak.no-blur") { 36 36 + background-color: color-mix(in srgb, Field, transparent 10%) !important; 37 37 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 38 38 + } 39 39 } 40 40 41 41 @media not (-moz-bool-pref: "uc.tweak.urlbar.not-floating") { 42 42 - #main-window:not([customizing]) { 42 42 + #main-window:not([customizing]) { 43 43 #urlbar-container { 44 44 - flex: 1; 45 45 - max-width: 1000px; 46 46 - margin: auto !important; 44 44 + flex: 1; 45 45 + max-width: 1000px; 46 46 + margin: auto !important; 47 47 } 48 48 - 48 48 + 49 49 #urlbar[breakout-extend] { 50 50 - position: fixed !important; 51 51 - width: clamp(400px,64vw,800px) !important; 52 52 - left: calc(50vw - (clamp(400px,64vw,800px)/2)) !important; 53 53 - right: calc(50vw - (clamp(400px,64vw,800px)/2)) !important; 54 54 - 55 55 - top: 20vh !important; 56 56 - bottom: auto !important; 57 57 - 58 58 - .urlbar-input { 59 59 - font-size: 16px !important; 60 60 - } 50 50 + position: fixed !important; 51 51 + width: clamp(400px,64vw,800px) !important; 52 52 + left: calc(50vw - (clamp(400px,64vw,800px)/2)) !important; 53 53 + right: calc(50vw - (clamp(400px,64vw,800px)/2)) !important; 54 54 + 55 55 + top: 20vh !important; 56 56 + bottom: auto !important; 57 57 + 58 58 + .urlbar-input { 59 59 + font-size: 16px !important; 60 60 + } 61 61 } 62 62 - 62 62 + 63 63 #urlbar:not([breakout-extend]) { 64 64 - & .urlbar-input-container { 65 65 - text-align: center !important; 66 66 - & .urlbar-input-box { transition: none !important; } 67 67 - } 64 64 + & .urlbar-input-container { 65 65 + text-align: center !important; 66 66 + & .urlbar-input-box { transition: none !important; } 67 67 + } 68 68 } 69 69 - }} 69 69 + }}

+73 -73

chrome/browser/window-controls.css

··· 3 3 4 4 /* navbar collapse */ 5 5 :root[titlepreface*="​"] .titlebar-buttonbox-container { 6 6 - display: none !important; 6 6 + display: none !important; 7 7 } 8 8 9 9 @media (-moz-bool-pref: "uc.tweak.no-window-controls") { 10 10 - .titlebar-buttonbox-container { 11 11 - display: none !important; 12 12 - } 10 10 + .titlebar-buttonbox-container { 11 11 + display: none !important; 12 12 + } 13 13 } 14 14 15 15 @media not (-moz-bool-pref: "uc.tweak.no-window-controls") { 16 16 - /* navbar hidden */ 17 17 - :root:not([inDOMFullscreen], [titlepreface*="​"]) { 18 18 - 16 16 + /* navbar hidden */ 17 17 + :root:not([inDOMFullscreen], [titlepreface*="​"]) { 18 18 + 19 19 & .titlebar-buttonbox-container { 20 20 - z-index: 100 !important; 21 21 - visibility: visible !important; 22 22 - position: absolute !important; 23 23 - height: 40.5px !important; 20 20 + z-index: 100 !important; 21 21 + visibility: visible !important; 22 22 + position: absolute !important; 23 23 + height: 40.5px !important; 24 24 } &[uidensity=compact] .titlebar-buttonbox-container { 25 25 - height: 34px !important; 25 25 + height: 34px !important; 26 26 } &[uidensity=touch] .titlebar-buttonbox-container { 27 27 - height: 44px !important; 27 27 + height: 44px !important; 28 28 } 29 29 - 29 29 + 30 30 #TabsToolbar { min-height: 0px !important; } 31 31 32 32 &:not([sizemode="fullscreen"]) { 33 33 - @media (-moz-platform: macos ) { 33 33 + @media (-moz-platform: macos ) { 34 34 #nav-bar { 35 35 - margin-left: 78px !important; 35 35 + margin-left: 78px !important; 36 36 } 37 37 .titlebar-buttonbox-container { 38 38 - width: 78px !important; 39 39 - position: fixed !important; 40 40 - & .titlebar-buttonbox { 41 41 - margin-inline: 12px !important; 42 42 - } 38 38 + width: 78px !important; 39 39 + position: fixed !important; 40 40 + & .titlebar-buttonbox { 41 41 + margin-inline: 12px !important; 42 42 + } 43 43 } 44 44 - }} 45 45 - 44 44 + }} 45 45 + 46 46 @media (-moz-platform: windows) { 47 47 - .titlebar-buttonbox-container { 48 48 - top: 0 !important; 49 49 - right: 0 !important; 50 50 - } 51 51 - #nav-bar { 52 52 - margin-right: 138px !important; 53 53 - } 47 47 + .titlebar-buttonbox-container { 48 48 + top: 0 !important; 49 49 + right: 0 !important; 50 50 + } 51 51 + #nav-bar { 52 52 + margin-right: 138px !important; 53 53 + } 54 54 } 55 55 - 55 55 + 56 56 /* Linux */ 57 57 @media (-moz-gtk-csd-available) { 58 58 - &[lwtheme="true"] .titlebar-button > .toolbarbutton-icon { 59 59 - border-radius: var(--toolbarbutton-border-radius) !important; 60 60 - height: 32px !important; 61 61 - width: 32px !important; 62 62 - } 63 63 - &[lwtheme="true"][uidensity="compact"] .titlebar-button > .toolbarbutton-icon { 64 64 - height: 28px !important; 65 65 - width: 28px !important; 66 66 - } 67 67 - &[lwtheme="true"]:not([uidensity="compact"]) .titlebar-button > .toolbarbutton-icon { 68 68 - margin-block: 3px !important; 69 69 - } 70 70 - 71 71 - @media (-moz-gtk-csd-minimize-button) or (-moz-gtk-csd-maximize-button) or (-moz-gtk-csd-close-button) { 72 72 - --gtk-window-button-width: var(--gtk-window-control-single); 73 73 - } 74 74 - @media ((-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button)) or 75 75 - ((-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button)) or 76 76 - ((-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button)) { 77 77 - --gtk-window-button-width: var(--gtk-window-control-dual); 78 78 - } 58 58 + &[lwtheme="true"] .titlebar-button > .toolbarbutton-icon { 59 59 + border-radius: var(--toolbarbutton-border-radius) !important; 60 60 + height: 32px !important; 61 61 + width: 32px !important; 62 62 + } 63 63 + &[lwtheme="true"][uidensity="compact"] .titlebar-button > .toolbarbutton-icon { 64 64 + height: 28px !important; 65 65 + width: 28px !important; 66 66 + } 67 67 + &[lwtheme="true"]:not([uidensity="compact"]) .titlebar-button > .toolbarbutton-icon { 68 68 + margin-block: 3px !important; 69 69 + } 70 70 + 71 71 + @media (-moz-gtk-csd-minimize-button) or (-moz-gtk-csd-maximize-button) or (-moz-gtk-csd-close-button) { 72 72 + --gtk-window-button-width: var(--gtk-window-control-single); 73 73 + } 74 74 + @media ((-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button)) or 75 75 + ((-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button)) or 76 76 + ((-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button)) { 77 77 + --gtk-window-button-width: var(--gtk-window-control-dual); 78 78 + } 79 79 80 80 - @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 81 81 - --gtk-window-button-width: var(--gtk-window-control-tri); 82 82 - } 80 80 + @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 81 81 + --gtk-window-button-width: var(--gtk-window-control-tri); 82 82 + } 83 83 84 84 - @media not (-moz-gtk-csd-reversed-placement) { 85 85 - #nav-bar { 86 86 - margin-right: 87 87 - var(--gtk-window-button-width) 88 88 - !important; 89 89 - } 90 90 - .titlebar-buttonbox-container { right: 0px; } 84 84 + @media not (-moz-gtk-csd-reversed-placement) { 85 85 + #nav-bar { 86 86 + margin-right: 87 87 + var(--gtk-window-button-width) 88 88 + !important; 91 89 } 92 92 - @media (-moz-gtk-csd-reversed-placement) { 93 93 - #nav-bar { 94 94 - margin-left: 95 95 - var(--gtk-window-button-width) 96 96 - !important; 97 97 - } 98 98 - .titlebar-buttonbox-container { left: 0px; } 90 90 + .titlebar-buttonbox-container { right: 0px; } 91 91 + } 92 92 + @media (-moz-gtk-csd-reversed-placement) { 93 93 + #nav-bar { 94 94 + margin-left: 95 95 + var(--gtk-window-button-width) 96 96 + !important; 99 97 } 98 98 + .titlebar-buttonbox-container { left: 0px; } 99 99 + } 100 100 } @media (-moz-platform: linux) and (not (-moz-gtk-csd-available)) { 101 101 - .titlebar-buttonbox-container { 102 102 - display: none !important; 103 103 - } 101 101 + .titlebar-buttonbox-container { 102 102 + display: none !important; 103 103 + } 104 104 } 105 105 - }} 105 105 + }}

+111 -111

chrome/content/about.css

··· 7 7 url-prefix("about:newtab"), 8 8 url-prefix("about:privatebrowsing"), 9 9 url-prefix("about:home") { 10 10 - @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 11 11 - and (-moz-bool-pref: "uc.tweak.translucency") { 12 12 - body { 13 13 - background-color: 14 14 - color-mix( 15 15 - in srgb, 16 16 - transparent, 17 17 - var(--newtab-background-color) 50% 18 18 - ) !important; 19 19 - } 10 10 + @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 11 11 + and (-moz-bool-pref: "uc.tweak.translucency") { 12 12 + body { 13 13 + background-color: 14 14 + color-mix( 15 15 + in srgb, 16 16 + transparent, 17 17 + var(--newtab-background-color) 50% 18 18 + ) !important; 20 19 } 21 21 - .customize-menu { 22 22 - height: fit-content !important; 23 23 - border-radius: var(--uc-content-radius) !important; 24 24 - box-shadow: none !important; 25 25 - margin: var(--uc-content-margin) !important; 26 26 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 27 27 - background-color: 28 28 - color-mix(in srgb, 29 29 - var( 30 30 - --lwt-sidebar-background-color, 31 31 - var(--newtab-background-color-secondary) 32 32 - ), 33 33 - transparent 20% 34 34 - ) !important; 35 35 - 36 36 - & .close-button-wrapper { 37 37 - background-color: transparent !important; 38 38 - } 39 39 - & .wallpaper-list.category { 40 40 - height: 100% !important; 41 41 - width: 100% !important; 42 42 - top: 0 !important; 43 43 - left: 0 !important; 44 44 - margin: auto !important; 45 45 - border-radius: var(--uc-content-radius) !important; 46 46 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 47 47 - background-color: 48 48 - color-mix(in srgb, 49 49 - var( 50 50 - --lwt-sidebar-background-color, 51 51 - var(--newtab-background-color-secondary) 52 52 - ), 53 53 - transparent 30% 54 54 - ) !important; 55 55 - } 56 56 - /* back button on wallpaper page */ 57 57 - & .wallpaper-list.category button.arrow-button { 58 58 - margin: 16px !important; 59 59 - } 20 20 + } 21 21 + .customize-menu { 22 22 + height: fit-content !important; 23 23 + border-radius: var(--uc-content-radius) !important; 24 24 + box-shadow: none !important; 25 25 + margin: var(--uc-content-margin) !important; 26 26 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 27 27 + background-color: 28 28 + color-mix(in srgb, 29 29 + var( 30 30 + --lwt-sidebar-background-color, 31 31 + var(--newtab-background-color-secondary) 32 32 + ), 33 33 + transparent 20% 34 34 + ) !important; 35 35 + 36 36 + & .close-button-wrapper { 37 37 + background-color: transparent !important; 60 38 } 61 61 - .top-sites .tile, 62 62 - .search-wrapper .search-handoff-button, 63 63 - .search-wrapper input, 64 64 - .card-outer, 65 65 - .compact-cards .card-outer .card-context, 66 66 - .weatherButtonContextMenuWrapper, 67 67 - .weatherInfoLink, 68 68 - .context-menu, 69 69 - .weatherButtonContextMenuWrapper::after, 70 70 - .personalize-button:hover { 71 71 - backdrop-filter: blur(var(--uc-blur-radius)) !important; 72 72 - background-color: 73 73 - color-mix(in srgb, 74 74 - var( 75 75 - --lwt-sidebar-background-color, 76 76 - var(--newtab-background-color-secondary) 77 77 - ), 78 78 - transparent 20% 79 79 - ) !important; 39 39 + & .wallpaper-list.category { 40 40 + height: 100% !important; 41 41 + width: 100% !important; 42 42 + top: 0 !important; 43 43 + left: 0 !important; 44 44 + margin: auto !important; 45 45 + border-radius: var(--uc-content-radius) !important; 46 46 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 47 47 + background-color: 48 48 + color-mix(in srgb, 49 49 + var( 50 50 + --lwt-sidebar-background-color, 51 51 + var(--newtab-background-color-secondary) 52 52 + ), 53 53 + transparent 30% 54 54 + ) !important; 80 55 } 81 81 - & .compact-cards .card-outer .card-context { 82 82 - clip-path: none !important; 56 56 + /* back button on wallpaper page */ 57 57 + & .wallpaper-list.category button.arrow-button { 58 58 + margin: 16px !important; 83 59 } 84 84 - .personalize-button { 85 85 - border-radius: var(--uc-radius) !important; 86 86 - transition: opacity var(--uc-transition) !important; 87 87 - &:not(:hover) { 88 88 - opacity: 0.2 !important; 89 89 - } 60 60 + } 61 61 + .top-sites .tile, 62 62 + .search-wrapper .search-handoff-button, 63 63 + .search-wrapper input, 64 64 + .card-outer, 65 65 + .compact-cards .card-outer .card-context, 66 66 + .weatherButtonContextMenuWrapper, 67 67 + .weatherInfoLink, 68 68 + .context-menu, 69 69 + .weatherButtonContextMenuWrapper::after, 70 70 + .personalize-button:hover { 71 71 + backdrop-filter: blur(var(--uc-blur-radius)) !important; 72 72 + background-color: 73 73 + color-mix(in srgb, 74 74 + var( 75 75 + --lwt-sidebar-background-color, 76 76 + var(--newtab-background-color-secondary) 77 77 + ), 78 78 + transparent 20% 79 79 + ) !important; 80 80 + } 81 81 + & .compact-cards .card-outer .card-context { 82 82 + clip-path: none !important; 83 83 + } 84 84 + .personalize-button { 85 85 + border-radius: var(--uc-radius) !important; 86 86 + transition: opacity var(--uc-transition) !important; 87 87 + &:not(:hover) { 88 88 + opacity: 0.2 !important; 90 89 } 90 90 + } 91 91 } 92 92 93 93 /* common theming */ ··· 101 101 url-prefix("about:support"), 102 102 url-prefix("about:profiles"), 103 103 url-prefix("about:addons") { 104 104 - @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 105 105 - and (-moz-bool-pref: "uc.tweak.translucency") { 106 106 - :root { 107 107 - --in-content-page-background: transparent !important; 108 108 - --in-content-table-background: transparent !important; 109 109 - /* --in-content-table-header-background: 110 110 - color-mix(in srgb, var(--in-content-primary-button-background), transparent 80%) !important; */ 111 111 - --in-content-box-background: 112 112 - color-mix(in srgb, var(--background-color-box), transparent 80%) !important; 113 113 - } 114 114 - .card { 115 115 - box-shadow: none !important; 116 116 - } 104 104 + @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 105 105 + and (-moz-bool-pref: "uc.tweak.translucency") { 106 106 + :root { 107 107 + --in-content-page-background: transparent !important; 108 108 + --in-content-table-background: transparent !important; 109 109 + /* --in-content-table-header-background: 110 110 + color-mix(in srgb, var(--in-content-primary-button-background), transparent 80%) !important; */ 111 111 + --in-content-box-background: 112 112 + color-mix(in srgb, var(--background-color-box), transparent 80%) !important; 113 113 + } 114 114 + .card { 115 115 + box-shadow: none !important; 117 116 } 117 117 + } 118 118 } 119 119 120 120 @-moz-document url-prefix("about:config") { 121 121 - @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 122 122 - and (-moz-bool-pref: "uc.tweak.translucency") { 123 123 - #about-config-search { 124 124 - backdrop-filter: blur(33px) !important; 125 125 - background-color: color-mix(in srgb, var(--background-color-box), transparent 20%) !important; 126 126 - } 121 121 + @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 122 122 + and (-moz-bool-pref: "uc.tweak.translucency") { 123 123 + #about-config-search { 124 124 + backdrop-filter: blur(33px) !important; 125 125 + background-color: color-mix(in srgb, var(--background-color-box), transparent 20%) !important; 127 126 } 127 127 + } 128 128 } 129 129 130 130 @-moz-document url-prefix("about:addons") { 131 131 - @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 132 132 - and (-moz-bool-pref: "uc.tweak.translucency") { 133 133 - :root { 134 134 - --in-content-box-background: 135 135 - color-mix(in srgb, var(--background-color-box), transparent 60%) !important; 136 136 - } 137 137 - .main-heading { 138 138 - display: none !important; 139 139 - } 131 131 + @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 132 132 + and (-moz-bool-pref: "uc.tweak.translucency") { 133 133 + :root { 134 134 + --in-content-box-background: 135 135 + color-mix(in srgb, var(--background-color-box), transparent 60%) !important; 136 136 + } 137 137 + .main-heading { 138 138 + display: none !important; 140 139 } 140 140 + } 141 141 } 142 142 143 143 @-moz-document 144 144 url-prefix("about:preferences"), 145 145 url-prefix("about:support") { 146 146 - @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 147 147 - and (-moz-bool-pref: "uc.tweak.translucency") { 148 148 - #searchInput { 149 149 - backdrop-filter: blur(33px) !important; 150 150 - background-color: color-mix(in srgb, var(--background-color-box), transparent 10%) !important; 151 151 - } 146 146 + @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") 147 147 + and (-moz-bool-pref: "uc.tweak.translucency") { 148 148 + #searchInput { 149 149 + backdrop-filter: blur(33px) !important; 150 150 + background-color: color-mix(in srgb, var(--background-color-box), transparent 10%) !important; 152 151 } 152 152 + } 153 153 } 154 154 - 154 154 +

+152 -152

chrome/content/sidebery.css

··· 2 2 /* SPDX-FileCopyrightText: 2024 awwpotato */ 3 3 4 4 @-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") { 5 5 - :root, .root, #root { 6 6 - --general-border-radius: var(--uc-button-radius) !important; 7 7 - --tabs-margin: 1.5px !important; 8 8 - --tabs-pinned-height: 30px !important; 9 9 - --tabs-pinned-width: 30px !important; 10 10 - --tabs-height: 30px !important; 11 11 - --nav-btn-width: 30px !important; 12 12 - --nav-btn-height: 28px !important; 13 13 - 14 14 - @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") { 15 15 - background-color: transparent !important; 16 16 - --frame-bg: transparent !important; 17 17 - } 18 18 - } 5 5 + :root, .root, #root { 6 6 + --general-border-radius: var(--uc-button-radius) !important; 7 7 + --tabs-margin: 1.5px !important; 8 8 + --tabs-pinned-height: 30px !important; 9 9 + --tabs-pinned-width: 30px !important; 10 10 + --tabs-height: 30px !important; 11 11 + --nav-btn-width: 30px !important; 12 12 + --nav-btn-height: 28px !important; 19 13 20 20 - @media (max-width: 40px) { 21 21 - .TabsPanel { 22 22 - --tabs-indent: 0px !important; 23 23 - } 24 24 - .bookmarks-tree { 25 25 - --bookmarks-indent: 0px !important; 26 26 - } 27 27 - .Tab:not([data-active="true"]) .close { 28 28 - display: none !important; 29 29 - } 30 30 - } 31 31 - 32 32 - .NavigationBar .main-items .nav-item[data-index="-1"]:not([data-active="true"]), 33 33 - .NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns { 34 34 - display: none !important; 35 35 - } 36 36 - @media (max-width: 66px ) { 37 37 - .NavigationBar .static-btns { 38 38 - display: none !important; 39 39 - } 40 40 - } 41 41 - 42 42 - .NavigationBar .main-items .nav-item[data-index="-1"] { 43 43 - opacity: 1 !important; 44 44 - z-index: 1 !important; 45 45 - transform: scale(1,1) !important; 46 46 - } 47 47 - 48 48 - .central-box { 49 49 - margin-top: var(--tabs-margin) !important; 50 50 - } 51 51 - 52 52 - .TabsPanel .new-tab-btns { 53 53 - padding: 0 var(--tabs-margin) !important; 14 14 + @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") { 15 15 + background-color: transparent !important; 16 16 + --frame-bg: transparent !important; 54 17 } 18 18 + } 55 19 56 56 - #new-tab-btn { 57 57 - width: 100% !important; 20 20 + @media (max-width: 40px) { 21 21 + .TabsPanel { 22 22 + --tabs-indent: 0px !important; 58 23 } 59 59 - 60 60 - .NavigationBar { 61 61 - border-radius: 6px !important; 62 62 - margin: 0.3px !important 24 24 + .bookmarks-tree { 25 25 + --bookmarks-indent: 0px !important; 63 26 } 64 64 - 65 65 - #nav_bar { 66 66 - background-color: transparent !important; 67 67 - padding: var(--tabs-margin) !important; 27 27 + .Tab:not([data-active="true"]) .close { 28 28 + display: none !important; 68 29 } 69 69 - 70 70 - @media not (-moz-bool-pref: "uc.tweak.sidebery.top-navbar") { 71 71 - .top-horizontal-box { 72 72 - order: 100 !important; 73 73 - margin-bottom: 0px !important; 74 74 - } 75 75 - 76 76 - .NavigationBar.-top .hidden-panels-popup { 77 77 - position: absolute !important; 78 78 - margin-top: -1000px !important; 79 79 - top: auto !important; 80 80 - bottom: 36px !important; 30 30 + } 81 31 82 82 - } 83 83 - .NavigationBar.-top .hidden-panels-popup-layer::before { 84 84 - display: none !important; 85 85 - background-color: transparent !important; 86 86 - } 32 32 + .NavigationBar .main-items .nav-item[data-index="-1"]:not([data-active="true"]), 33 33 + .NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns { 34 34 + display: none !important; 35 35 + } 36 36 + @media (max-width: 66px ) { 37 37 + .NavigationBar .static-btns { 38 38 + display: none !important; 87 39 } 88 88 - 89 89 - @media (-moz-bool-pref: "uc.tweak.sidebery.big-pinned") { 90 90 - .PinnedTabsBar { 91 91 - display: grid !important; 92 92 - grid-template-rows: 3rem; 93 93 - grid-auto-rows: 3rem; 94 94 - grid-template-columns: repeat(auto-fit, minmax(min(100%, 3rem), 1fr)); 95 95 - } 96 96 - 97 97 - .Tab[data-pin="true"] { 98 98 - width: 100% !important; 99 99 - height: 100% !important; 100 100 - } 40 40 + } 41 41 + 42 42 + .NavigationBar .main-items .nav-item[data-index="-1"] { 43 43 + opacity: 1 !important; 44 44 + z-index: 1 !important; 45 45 + transform: scale(1,1) !important; 46 46 + } 47 47 + 48 48 + .central-box { 49 49 + margin-top: var(--tabs-margin) !important; 50 50 + } 51 51 + 52 52 + .TabsPanel .new-tab-btns { 53 53 + padding: 0 var(--tabs-margin) !important; 54 54 + } 55 55 + 56 56 + #new-tab-btn { 57 57 + width: 100% !important; 58 58 + } 59 59 + 60 60 + .NavigationBar { 61 61 + border-radius: 6px !important; 62 62 + margin: 0.3px !important 63 63 + } 64 64 + 65 65 + #nav_bar { 66 66 + background-color: transparent !important; 67 67 + padding: var(--tabs-margin) !important; 68 68 + } 69 69 + 70 70 + @media not (-moz-bool-pref: "uc.tweak.sidebery.top-navbar") { 71 71 + .top-horizontal-box { 72 72 + order: 100 !important; 73 73 + margin-bottom: 0px !important; 101 74 } 102 102 - 103 103 - /* tab audio indicator */ 104 104 - .Tab .audio { 105 105 - top: 2px !important; 106 106 - left: 2px !important; 107 107 - height: 12px !important; 108 108 - width: 12px !important; 75 75 + 76 76 + .NavigationBar.-top .hidden-panels-popup { 77 77 + position: absolute !important; 78 78 + margin-top: -1000px !important; 79 79 + top: auto !important; 80 80 + bottom: 36px !important; 81 81 + 109 82 } 110 110 - .Tab .child-count { 111 111 - display: none !important; 83 83 + .NavigationBar.-top .hidden-panels-popup-layer::before { 84 84 + display: none !important; 85 85 + background-color: transparent !important; 112 86 } 113 113 - .Tab[data-audible="true"] .t-box .title, .Tab[data-muted="true"] .t-box .title, .Tab[data-paused="true"] .t-box .title { 114 114 - transform: translateX(0px) !important; 87 87 + } 88 88 + 89 89 + @media (-moz-bool-pref: "uc.tweak.sidebery.big-pinned") { 90 90 + .PinnedTabsBar { 91 91 + display: grid !important; 92 92 + grid-template-rows: 3rem; 93 93 + grid-auto-rows: 3rem; 94 94 + grid-template-columns: repeat(auto-fit, minmax(min(100%, 3rem), 1fr)); 115 95 } 116 116 - 117 117 - /* replace new tab panel and new tab button with plus */ 118 118 - .NavigationBar #add_tp.nav-item .icon, .new-tab-btn > svg { 119 119 - fill: transparent; 120 120 - background-color: var(--nav-btn-fg); 121 121 - mask: url("chrome://global/skin/icons/plus.svg") !important; 96 96 + 97 97 + .Tab[data-pin="true"] { 98 98 + width: 100% !important; 99 99 + height: 100% !important; 122 100 } 123 123 - 124 124 - .nav-item .audio, .nav-item .bookmarks-badge-icon { 125 125 - background-color: var(--frame-bg) !important; 101 101 + } 102 102 + 103 103 + /* tab audio indicator */ 104 104 + .Tab .audio { 105 105 + top: 2px !important; 106 106 + left: 2px !important; 107 107 + height: 12px !important; 108 108 + width: 12px !important; 109 109 + } 110 110 + .Tab .child-count { 111 111 + display: none !important; 112 112 + } 113 113 + .Tab[data-audible="true"] .t-box .title, .Tab[data-muted="true"] .t-box .title, .Tab[data-paused="true"] .t-box .title { 114 114 + transform: translateX(0px) !important; 115 115 + } 116 116 + 117 117 + /* replace new tab panel and new tab button with plus */ 118 118 + .NavigationBar #add_tp.nav-item .icon, .new-tab-btn > svg { 119 119 + fill: transparent; 120 120 + background-color: var(--nav-btn-fg); 121 121 + mask: url("chrome://global/skin/icons/plus.svg") !important; 122 122 + } 123 123 + 124 124 + .nav-item .audio, .nav-item .bookmarks-badge-icon { 125 125 + background-color: var(--frame-bg) !important; 126 126 + } 127 127 + 128 128 + /* new tab button */ 129 129 + .TabsPanel .new-tab-btns { 130 130 + height: calc(var(--tabs-height) + var(--tabs-margin)) !important; 131 131 + width: calc(100% - var(--tabs-margin)*2) !important; 132 132 + padding: 0px !important; 133 133 + padding-bottom: var(--tabs-margin) !important; 134 134 + margin: 0 var(--tabs-margin); 135 135 + border-radius: var(--tabs-border-radius); 136 136 + 137 137 + position: relative !important; 138 138 + overflow: clip !important; 139 139 + 140 140 + & .new-tab-btn { 141 141 + width: 100% !important; 142 142 + height: 100% !important; 143 143 + 144 144 + justify-content: flex-start !important; 145 145 + flex-wrap: nowrap !important; 146 146 + overflow: clip !important; 147 147 + min-width: unset !important; 148 148 + position: relative !important; 149 149 + 150 150 + &::after { 151 151 + content: "New Tab"; 152 152 + position: relative; 153 153 + margin-left: calc(var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px) !important; 154 154 + width: calc(100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px)) !important; 155 155 + 156 156 + font: var(--tabs-font); 157 157 + color: var(--tabs-normal-fg); 158 158 + white-space: nowrap; 159 159 + display: block !important; 160 160 + box-sizing: border-box; 161 161 + text-align: start; 162 162 + overflow: hidden; 163 163 + transition: transform var(--d-fast); 164 164 + mask: linear-gradient(-90deg,transparent,#000 8px,#000); 165 165 + margin-right: 2px !important; 166 166 + } 126 167 } 127 127 - 128 128 - /* new tab button */ 129 129 - .TabsPanel .new-tab-btns { 130 130 - height: calc(var(--tabs-height) + var(--tabs-margin)) !important; 131 131 - width: calc(100% - var(--tabs-margin)*2) !important; 132 132 - padding: 0px !important; 133 133 - padding-bottom: var(--tabs-margin) !important; 134 134 - margin: 0 var(--tabs-margin); 135 135 - border-radius: var(--tabs-border-radius); 136 136 - 137 137 - position: relative !important; 138 138 - overflow: clip !important; 139 139 - 140 140 - & .new-tab-btn { 141 141 - width: 100% !important; 142 142 - height: 100% !important; 143 143 - 144 144 - justify-content: flex-start !important; 145 145 - flex-wrap: nowrap !important; 146 146 - overflow: clip !important; 147 147 - min-width: unset !important; 148 148 - position: relative !important; 149 149 - 150 150 - &::after { 151 151 - content: "New Tab"; 152 152 - position: relative; 153 153 - margin-left: calc(var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px) !important; 154 154 - width: calc(100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px)) !important; 155 168 156 156 - font: var(--tabs-font); 157 157 - color: var(--tabs-normal-fg); 158 158 - white-space: nowrap; 159 159 - display: block !important; 160 160 - box-sizing: border-box; 161 161 - text-align: start; 162 162 - overflow: hidden; 163 163 - transition: transform var(--d-fast); 164 164 - mask: linear-gradient(-90deg,transparent,#000 8px,#000); 165 165 - margin-right: 2px !important; 166 166 - } 167 167 - } 168 168 - 169 169 - & svg { 170 170 - margin: 0 var(--tabs-inner-gap)0 calc(var(--tabs-inner-gap) + 2px); 171 171 - } 169 169 + & svg { 170 170 + margin: 0 var(--tabs-inner-gap)0 calc(var(--tabs-inner-gap) + 2px); 172 171 } 172 172 + } 173 173 }

+14 -14

chrome/icons/bitwarden.svg

··· 1 1 <?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 2 <svg 3 3 - version="1.1" 4 4 - viewBox="0 0 800 800" 5 5 - fill="context-fill" 6 6 - width="800" 7 7 - height="800" 8 8 - id="svg1" 9 9 - xmlns="http://www.w3.org/2000/svg" 10 10 - xmlns:svg="http://www.w3.org/2000/svg"> 11 11 - <defs 12 12 - id="defs1" /> 13 13 - <path 14 14 - d="M 714.04355,33.594262 C 707.86998,27.420689 700.2265,24.186913 691.7011,24.186913 H 120.79267 c -8.52541,0 -16.16888,3.233776 -22.342461,9.407349 -6.173563,6.173571 -9.407343,13.817042 -9.407343,22.34245 V 436.64032 c 0,28.51603 5.58561,56.4441 16.462854,84.37215 11.17122,27.92808 24.69429,52.62237 41.15715,74.37686 16.46285,21.75449 35.86551,42.62705 58.50194,63.20561 22.63642,20.57859 43.50898,37.6294 62.61766,51.15247 19.10867,13.52305 39.0993,26.45817 59.97184,38.51132 20.87256,12.05317 35.57154,20.28461 44.39093,24.40032 8.81939,4.40968 15.8749,7.64346 21.16653,9.99529 3.82174,2.05788 8.23144,2.93981 12.9351,2.93981 4.70368,0 8.81939,-0.88193 12.9351,-2.93981 5.29164,-2.35183 12.34715,-5.58561 21.16654,-9.99529 8.81939,-4.40971 23.51837,-12.34715 44.39093,-24.40032 20.87256,-12.05315 40.86317,-24.98827 59.97183,-38.51132 19.10868,-13.52307 39.98124,-30.57388 62.61766,-51.15247 22.63644,-20.57856 42.0391,-41.45112 58.50196,-63.20561 16.46285,-21.75449 29.98592,-46.44878 41.15714,-74.37686 11.17122,-27.92805 16.46286,-56.1501 16.46286,-84.37215 V 55.936712 c 0,-8.525408 -3.23378,-15.874898 -9.40734,-22.34245 z M 640.54864,440.16808 c 0,137.87645 -234.00779,256.35023 -234.00779,256.35023 V 105.61927 h 234.00779 z" 15 15 - id="path1" 16 16 - style="stroke-width:2.10073" /> 3 3 + version="1.1" 4 4 + viewBox="0 0 800 800" 5 5 + fill="context-fill" 6 6 + width="800" 7 7 + height="800" 8 8 + id="svg1" 9 9 + xmlns="http://www.w3.org/2000/svg" 10 10 + xmlns:svg="http://www.w3.org/2000/svg"> 11 11 + <defs 12 12 + id="defs1" /> 13 13 + <path 14 14 + d="M 714.04355,33.594262 C 707.86998,27.420689 700.2265,24.186913 691.7011,24.186913 H 120.79267 c -8.52541,0 -16.16888,3.233776 -22.342461,9.407349 -6.173563,6.173571 -9.407343,13.817042 -9.407343,22.34245 V 436.64032 c 0,28.51603 5.58561,56.4441 16.462854,84.37215 11.17122,27.92808 24.69429,52.62237 41.15715,74.37686 16.46285,21.75449 35.86551,42.62705 58.50194,63.20561 22.63642,20.57859 43.50898,37.6294 62.61766,51.15247 19.10867,13.52305 39.0993,26.45817 59.97184,38.51132 20.87256,12.05317 35.57154,20.28461 44.39093,24.40032 8.81939,4.40968 15.8749,7.64346 21.16653,9.99529 3.82174,2.05788 8.23144,2.93981 12.9351,2.93981 4.70368,0 8.81939,-0.88193 12.9351,-2.93981 5.29164,-2.35183 12.34715,-5.58561 21.16654,-9.99529 8.81939,-4.40971 23.51837,-12.34715 44.39093,-24.40032 20.87256,-12.05315 40.86317,-24.98827 59.97183,-38.51132 19.10868,-13.52307 39.98124,-30.57388 62.61766,-51.15247 22.63644,-20.57856 42.0391,-41.45112 58.50196,-63.20561 16.46285,-21.75449 29.98592,-46.44878 41.15714,-74.37686 11.17122,-27.92805 16.46286,-56.1501 16.46286,-84.37215 V 55.936712 c 0,-8.525408 -3.23378,-15.874898 -9.40734,-22.34245 z M 640.54864,440.16808 c 0,137.87645 -234.00779,256.35023 -234.00779,256.35023 V 105.61927 h 234.00779 z" 15 15 + id="path1" 16 16 + style="stroke-width:2.10073" /> 17 17 </svg>

+1 -1

chrome/icons/firefox.svg

··· 1 1 <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> 2 2 - <path d="M5.397 3.138c-.13.619-.17 1.272.035 1.906.71.595.666.713 1.237 1.052.84.498 1.35.65 1.363.728.011.077-.138.264-.323.45-.158.157-.414.37-.587.409-1.024 0-2.162.28-2.583 1.33.063 1.3 1.418 2.891 3.39 2.891 1.972 0 3.284-1.39 3.284-3.24 0-1.387-.783-2.324-1.67-2.78.587-.06 1.14-.004 1.866.454a3.927 3.927 0 0 0-5.524-1.357 3.929 3.929 0 0 1 1.883-.898C7.992 2.567 8.95.893 10.453.035c.366 1.088 1.302 2.029 2.02 2.879.625.738 1.414 1.571 1.899 2.835-.071-.8-.504-1.764-.784-2.296.795.433 2.14 1.977 2.14 4.854a7.728 7.728 0 0 1-15.456 0c0-2.345 1.269-4.729 2.998-5.668-.027.665-.027 1.381.253 1.964.452-.52 1.02-1.063 1.874-1.465Z"/> 2 2 + <path d="M5.397 3.138c-.13.619-.17 1.272.035 1.906.71.595.666.713 1.237 1.052.84.498 1.35.65 1.363.728.011.077-.138.264-.323.45-.158.157-.414.37-.587.409-1.024 0-2.162.28-2.583 1.33.063 1.3 1.418 2.891 3.39 2.891 1.972 0 3.284-1.39 3.284-3.24 0-1.387-.783-2.324-1.67-2.78.587-.06 1.14-.004 1.866.454a3.927 3.927 0 0 0-5.524-1.357 3.929 3.929 0 0 1 1.883-.898C7.992 2.567 8.95.893 10.453.035c.366 1.088 1.302 2.029 2.02 2.879.625.738 1.414 1.571 1.899 2.835-.071-.8-.504-1.764-.784-2.296.795.433 2.14 1.977 2.14 4.854a7.728 7.728 0 0 1-15.456 0c0-2.345 1.269-4.729 2.998-5.668-.027.665-.027 1.381.253 1.964.452-.52 1.02-1.063 1.874-1.465Z"/> 3 3 </svg>

+15 -15

chrome/icons/moon.svg

··· 2 2 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> 3 3 4 4 <svg 5 5 - fill="context-fill" 6 6 - width="16" 7 7 - height="16" 8 8 - viewBox="0 0 0.7 0.7" 9 9 - data-name="Layer 2" 10 10 - id="Layer_2" 11 11 - version="1.1" 12 12 - xmlns="http://www.w3.org/2000/svg" 13 13 - xmlns:svg="http://www.w3.org/2000/svg"> 14 14 - <defs 15 15 - id="defs1" /> 16 16 - <path 17 17 - d="m 0.36584958,0.67060638 c -0.0183214,-7.56e-6 -0.036612,-0.001501 -0.0546919,-0.004468 C 0.12701605,0.63592354 0.00214561,0.46227037 0.03211678,0.2780885 0.04843716,0.17605537 0.11080183,0.08720801 0.20121552,0.03718323 c 0.0153735,-0.0085898 0.0343439,-0.0074268 0.0485531,0.0029765 0.014531,0.0099425 0.0210896,0.02732609 0.0178664,0.04463537 l -5.6588e-4,0.0024292 c -0.0266771,0.14150675 0.0540369,0.28127407 0.1899338,0.32889614 v 0 c 0.0506435,0.0175756 0.10512569,0.0209848 0.1575651,0.00986 0.036844,-0.007231 0.0660356,0.0308499 0.0494835,0.0645514 -0.0584658,0.11053887 -0.1731544,0.17979563 -0.29820196,0.18007454 z M 0.19984447,0.10896335 c -0.12126409,0.0891337 -0.13769965,0.25859868 -0.0366323,0.399372 0.17009995,0.17037169 0.34776783,0.0960092 0.42914441,-0.0144958 -0.0607408,0.0165303 -0.11162771,0.004044 -0.16935046,-0.015781 C 0.28112572,0.42116287 0.16947009,0.27376154 0.19984447,0.10896335 Z" 18 18 - id="path1" 19 19 - style="stroke-width:4.94047;stroke-dasharray:none" /> 5 5 + fill="context-fill" 6 6 + width="16" 7 7 + height="16" 8 8 + viewBox="0 0 0.7 0.7" 9 9 + data-name="Layer 2" 10 10 + id="Layer_2" 11 11 + version="1.1" 12 12 + xmlns="http://www.w3.org/2000/svg" 13 13 + xmlns:svg="http://www.w3.org/2000/svg"> 14 14 + <defs 15 15 + id="defs1" /> 16 16 + <path 17 17 + d="m 0.36584958,0.67060638 c -0.0183214,-7.56e-6 -0.036612,-0.001501 -0.0546919,-0.004468 C 0.12701605,0.63592354 0.00214561,0.46227037 0.03211678,0.2780885 0.04843716,0.17605537 0.11080183,0.08720801 0.20121552,0.03718323 c 0.0153735,-0.0085898 0.0343439,-0.0074268 0.0485531,0.0029765 0.014531,0.0099425 0.0210896,0.02732609 0.0178664,0.04463537 l -5.6588e-4,0.0024292 c -0.0266771,0.14150675 0.0540369,0.28127407 0.1899338,0.32889614 v 0 c 0.0506435,0.0175756 0.10512569,0.0209848 0.1575651,0.00986 0.036844,-0.007231 0.0660356,0.0308499 0.0494835,0.0645514 -0.0584658,0.11053887 -0.1731544,0.17979563 -0.29820196,0.18007454 z M 0.19984447,0.10896335 c -0.12126409,0.0891337 -0.13769965,0.25859868 -0.0366323,0.399372 0.17009995,0.17037169 0.34776783,0.0960092 0.42914441,-0.0144958 -0.0607408,0.0165303 -0.11162771,0.004044 -0.16935046,-0.015781 C 0.28112572,0.42116287 0.16947009,0.27376154 0.19984447,0.10896335 Z" 18 18 + id="path1" 19 19 + style="stroke-width:4.94047;stroke-dasharray:none" /> 20 20 </svg>

+22 -22

chrome/userChrome.css

··· 5 5 @import url("vars.css"); 6 6 7 7 :root { 8 8 - @media not (-moz-bool-pref: "uc.tweak.no-panel-hint") { 9 9 - --uc-panel-hint: color-mix( in srgb, var(--toolbarbutton-icon-fill), transparent 75%); 10 10 - } 8 8 + @media not (-moz-bool-pref: "uc.tweak.no-panel-hint") { 9 9 + --uc-panel-hint: color-mix( in srgb, var(--toolbarbutton-icon-fill), transparent 75%); 10 10 + } 11 11 12 12 - --uc-bg-opaque: light-dark(rgb(239, 239, 242), rgb(27, 26, 32)); 13 13 - @media (-moz-platform: linux) { 14 14 - --uc-bg-opaque: ActiveCaption; 15 15 - } 16 16 - --uc-content-bg: transparent; 17 17 - &[lwtheme="true"] { 18 18 - --uc-bg-opaque: var(--lwt-accent-color); 19 19 - @media not (-moz-bool-pref: "uc.tweak.translucency") { 20 20 - --uc-content-bg: var(--newtab-background-color); 21 21 - } 22 22 - } 23 23 - 24 24 - --uc-bg: var(--uc-bg-opaque); 25 25 - --uc-bg-tran: var(--uc-bg-opaque); 26 26 - --uc-bg-translucency: color-mix(in srgb, var(--uc-bg-opaque), transparent 10%); 27 27 - @media not (-moz-bool-pref: "uc.tweak.no-blur") { 28 28 - --uc-bg-tran: var(--uc-bg-translucency); 29 29 - } @media (-moz-bool-pref: "uc.tweak.translucency") { 30 30 - --uc-bg: var(--uc-bg-translucency); 12 12 + --uc-bg-opaque: light-dark(rgb(239, 239, 242), rgb(27, 26, 32)); 13 13 + @media (-moz-platform: linux) { 14 14 + --uc-bg-opaque: ActiveCaption; 15 15 + } 16 16 + --uc-content-bg: transparent; 17 17 + &[lwtheme="true"] { 18 18 + --uc-bg-opaque: var(--lwt-accent-color); 19 19 + @media not (-moz-bool-pref: "uc.tweak.translucency") { 20 20 + --uc-content-bg: var(--newtab-background-color); 31 21 } 22 22 + } 23 23 + 24 24 + --uc-bg: var(--uc-bg-opaque); 25 25 + --uc-bg-tran: var(--uc-bg-opaque); 26 26 + --uc-bg-translucency: color-mix(in srgb, var(--uc-bg-opaque), transparent 10%); 27 27 + @media not (-moz-bool-pref: "uc.tweak.no-blur") { 28 28 + --uc-bg-tran: var(--uc-bg-translucency); 29 29 + } @media (-moz-bool-pref: "uc.tweak.translucency") { 30 30 + --uc-bg: var(--uc-bg-translucency); 31 31 + } 32 32 }

+9 -9

chrome/userContent.css

··· 7 7 8 8 /* pdf viewer */ 9 9 [mozdisallowselectionprint] > body { 10 10 - & #mainContainer { 11 11 - & .toolbar { 12 12 - padding: 4px !important; 13 13 - padding-bottom: none !important; 14 14 - & #toolbarContainer { 15 15 - border-radius: var(--uc-radius) !important; 16 16 - box-shadow: none !important; 17 17 - } 18 18 - } 10 10 + & #mainContainer { 11 11 + & .toolbar { 12 12 + padding: 4px !important; 13 13 + padding-bottom: none !important; 14 14 + & #toolbarContainer { 15 15 + border-radius: var(--uc-radius) !important; 16 16 + box-shadow: none !important; 17 17 + } 19 18 } 19 19 + } 20 20 }

+44 -44

chrome/vars.css

··· 4 4 @import url("overrides.css"); 5 5 6 6 :root { 7 7 - @media not (-moz-bool-pref: "uc.tweak.no-animations") { 8 8 - --uc-transition: 200ms ease-in-out; 9 9 - --uc-mouseout-delay: 250ms; 10 10 - } 11 11 - 12 12 - --uc-radius: 5px; 13 13 - --uc-button-radius: 5px; 14 14 - --uc-content-radius: 5px; 15 15 - 16 16 - --uc-panel-hint-size: clamp(min(4px, var(--uc-content-margin)), calc(var(--uc-content-margin)*0.5), 5px); 7 7 + @media not (-moz-bool-pref: "uc.tweak.no-animations") { 8 8 + --uc-transition: 200ms ease-in-out; 9 9 + --uc-mouseout-delay: 250ms; 10 10 + } 17 11 18 18 - --uc-blur-radius: 9px; 19 19 - 20 20 - --uc-content-margin: 6px; 21 21 - --uc-sidebar-margin: 3px; 22 22 - --uc-hover-target-size: 8px; 23 23 - 24 24 - --uc-small-floating-margin: 4px; 25 25 - --uc-floating-margin: 8px; 26 26 - 27 27 - @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") and (not (-moz-bool-pref: "uc.tweak.translucency")) { 28 28 - --uc-content-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2); 29 29 - } 30 30 - 31 31 - /* sidebar vars */ 32 32 - --uc-sidebar-hover-width: 170px; 33 33 - @media (-moz-bool-pref: "uc.tweak.sidebar.short") { 34 34 - --uc-sidebar-hover-width: 140px; 35 35 - } @media (-moz-bool-pref: "uc.tweak.sidebar.wide") { 36 36 - --uc-sidebar-hover-width: 200px; 37 37 - } 12 12 + --uc-radius: 5px; 13 13 + --uc-button-radius: 5px; 14 14 + --uc-content-radius: 5px; 15 15 + 16 16 + --uc-panel-hint-size: clamp(min(4px, var(--uc-content-margin)), calc(var(--uc-content-margin)*0.5), 5px); 38 17 39 39 - --uc-sidebar-width: 34px; 18 18 + --uc-blur-radius: 9px; 40 19 41 41 - /* linux window controls */ 42 42 - --gtk-window-control-single: 38px; 43 43 - --gtk-window-control-dual: 76px; 20 20 + --uc-content-margin: 6px; 21 21 + --uc-sidebar-margin: 3px; 22 22 + --uc-hover-target-size: 8px; 23 23 + 24 24 + --uc-small-floating-margin: 4px; 25 25 + --uc-floating-margin: 8px; 26 26 + 27 27 + @media (-moz-bool-pref: "browser.tabs.allow_transparent_browser") and (not (-moz-bool-pref: "uc.tweak.translucency")) { 28 28 + --uc-content-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2); 29 29 + } 30 30 + 31 31 + /* sidebar vars */ 32 32 + --uc-sidebar-hover-width: 170px; 33 33 + @media (-moz-bool-pref: "uc.tweak.sidebar.short") { 34 34 + --uc-sidebar-hover-width: 140px; 35 35 + } @media (-moz-bool-pref: "uc.tweak.sidebar.wide") { 36 36 + --uc-sidebar-hover-width: 200px; 37 37 + } 38 38 + 39 39 + --uc-sidebar-width: 34px; 40 40 + 41 41 + /* linux window controls */ 42 42 + --gtk-window-control-single: 38px; 43 43 + --gtk-window-control-dual: 76px; 44 44 + --gtk-window-control-tri: 114px; 45 45 + /* linux window controls w/ firefox color extension enabled*/ 46 46 + &[lwtheme="true"] { 47 47 + --gtk-window-control-single: 35px; 48 48 + --gtk-window-control-dual: 73px; 44 49 --gtk-window-control-tri: 114px; 45 45 - /* linux window controls w/ firefox color extension enabled*/ 46 46 - &[lwtheme="true"] { 47 47 - --gtk-window-control-single: 35px; 48 48 - --gtk-window-control-dual: 73px; 49 49 - --gtk-window-control-tri: 114px; 50 50 - &[uidensity=compact] { 51 51 - --gtk-window-control-single: 31px; 52 52 - --gtk-window-control-dual: 65px; 53 53 - --gtk-window-control-tri: 99px; 54 54 - } 50 50 + &[uidensity=compact] { 51 51 + --gtk-window-control-single: 31px; 52 52 + --gtk-window-control-dual: 65px; 53 53 + --gtk-window-control-tri: 99px; 55 54 } 55 55 + } 56 56 }