diff --git a/screenshot.png b/screenshot.png index e3d8fcf..7d210fd 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/theme/colors/dark.css b/theme/colors/dark.css index f85beb2..b70b80f 100644 --- a/theme/colors/dark.css +++ b/theme/colors/dark.css @@ -7,86 +7,82 @@ @media (prefers-color-scheme: dark) { :root { /* Browser area before a page starts loading */ - --gnome-browser-before-load-background: #353535; + --gnome-browser-before-load-background: #242424; /* Accent */ - --gnome-accent: #15539e; + --gnome-accent: #5F7999; /* Toolbars */ - --gnome-toolbar-background: #282828; + --gnome-toolbar-background: var(--gnome-headerbar-background); --gnome-toolbar-color: #ffffff; - --gnome-toolbar-border-color: #1b1b1b; + --gnome-toolbar-border-color: var(--gnome-headerbar-border-color); --gnome-toolbar-icon-fill: #eeeeec; --gnome-inactive-toolbar-color: #919190; - --gnome-inactive-toolbar-background: #353535; - --gnome-inactive-toolbar-border-color: #202020; + --gnome-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); + --gnome-inactive-toolbar-border-color: var(--gnome-inactive-headerbar-border-color); --gnome-inactive-toolbar-icon-fill: #919190; /* Sidebar */ - --gnome-sidebar-background: #313131; - --gnome-inactive-sidebar-background: #323232; + --gnome-sidebar-background: var(--gnome-headerbar-background); + --gnome-inactive-sidebar-background: var(--gnome-sidebar-background); /* Popups */ --gnome-menu-background: #2f2f2f; --gnome-menu-border-color: #1b1b1b; - --gnome-popover-background: #353535; + --gnome-popover-background: #383838; --gnome-popover-border-color: #1b1b1b; --gnome-popover-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - --gnome-popover-button-hover-background: #424242; + --gnome-popover-button-hover-background: var(--gnome-button-hover-background); --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); /* Header bar */ - --gnome-headerbar-background: linear-gradient(to top, #262626, #2b2b2b); - --gnome-headerbar-border-color: #070707; - --gnome-headerbar-box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); - --gnome-inactive-headerbar-background: linear-gradient(#353535, #353535); - --gnome-inactive-headerbar-border-color: #202020; + --gnome-headerbar-background: #303030; + --gnome-headerbar-border-color: #4E4E4E; + --gnome-headerbar-box-shadow: none; + --gnome-inactive-headerbar-background: #242424; + --gnome-inactive-headerbar-border-color: #3F3F3F; --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); /* Buttons */ - --gnome-button-background: linear-gradient(to top, #323232 2px, #353535); - --gnome-button-border-color: #1b1b1b; - --gnome-button-border-accent-color: #070707; - --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-button-hover-background: linear-gradient(to top, #323232, #373737 1px); - --gnome-button-active-background: linear-gradient(#1e1e1e, #1e1e1e); - --gnome-button-active-border-color: #1b1b1b; - --gnome-button-active-border-accent-color: #000000; - --gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-button-disabled-background: #323232; - --gnome-button-disabled-border-color: #202020; - --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-inactive-button-background: linear-gradient(#353535, #353535); - --gnome-inactive-button-border-color: #202020; - --gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-button-background: rgba(255, 255, 255, .1); + --gnome-button-hover-background: rgba(255, 255, 255, .15); + --gnome-button-active-background: rgba(255, 255, 255, .3); + --gnome-button-flat-hover-background: rgba(255, 255, 255, .07); + --gnome-button-flat-active-background: rgba(255, 255, 255, .1); + --gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e); - --gnome-button-suggested-action-border-color: #0f3b71; + --gnome-button-suggested-action-border-color: none; --gnome-button-suggested-action-border-accent-color: #092444; --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px); --gnome-button-suggested-action-active-background: #103e75; --gnome-button-suggested-action-active-border-color: #0f3b71; --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d); - --gnome-button-destructive-action-border-color: #851015; + --gnome-button-destructive-action-background: var(--gnome-button-background); + --gnome-button-destructive-action-border-color: #3E3E3E; --gnome-button-destructive-action-border-accent-color: #570b0e; --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px); - --gnome-button-destructive-action-active-background: #8a1116; - --gnome-button-destructive-action-active-border-color: #851015; + --gnome-button-destructive-action-active-background: #3D3E3D; + --gnome-button-destructive-action-active-border-color: none; --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-button-close-background: var(--gnome-button-flat-hover-background); + --gnome-button-hover-close-background:var(--gnome-button-hover-background); + --gnome-button-active-close-background: var(--gnome-button-active-background); + /* Entries */ - --gnome-entry-background: linear-gradient(#2d2d2d, #2d2d2d); - --gnome-entry-border-color: #1b1b1b; - --gnome-entry-box-shadow: inset 0 0 0 1px rgba(21, 83, 158, 0); + --gnome-entry-background: rgba(255, 255, 255, .1); + --gnome-entry-border-color: none; + --gnome-entry-box-shadow: none; --gnome-entry-color: #ffffff; - --gnome-inactive-entry-background: linear-gradient(#303030, #303030); - --gnome-inactive-entry-border-color: #202020; + --gnome-inactive-entry-background: #2E2E2E; + --gnome-inactive-entry-border-color: none; --gnome-inactive-entry-box-shadow: none; --gnome-inactive-entry-color: #d6d6d6; --gnome-focused-urlbar-border-color: var(--gnome-accent); - --gnome-focused-urlbar-item-hover: var(--gnome-popover-button-hover-background); + --gnome-focused-urlbar-item-hover: #4c4c4c; + --gnome-urlbar-view: #383838; /* Switch */ --gnome-switch-background: #282828; @@ -101,50 +97,30 @@ /* Tabs */ --gnome-tabbar-tab-color: rgb(141, 144, 145); --gnome-tabbar-tab-background: #262626; - --gnome-tabbar-tab-border-color: #070707; - --gnome-tabbar-tab-hover-background: #2d2d2d; + --gnome-tabbar-tab-border-color: #454545; + --gnome-tabbar-tab-hover-background: #2D2D2D; --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); - --gnome-tabbar-tab-active-background: #353535; - --gnome-tabbar-tab-active-background-contrast: #4c4c4c; + --gnome-tabbar-tab-active-background: #303030; + --gnome-tabbar-tab-active-background-contrast: #4F4F4F; --gnome-tabbar-tab-active-color: #ffffff; - --gnome-tabbar-tab-active-hover-background: #3c3c3c; + --gnome-tabbar-tab-active-hover-background: #363636; --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); - --gnome-inactive-tabbar-tab-background: #2e2e2e; - --gnome-inactive-tabbar-tab-active-background: #353535; + --gnome-inactive-tabbar-tab-background: #1C1C1C; + --gnome-inactive-tabbar-tab-active-background: #242424; --gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); - --gnome-tabbar-close-hover: #565656; + --gnome-tabbar-close-hover: #444444; } /* Private window colors */ :root { - --gnome-private-accent: rgb(158, 70, 224); + --gnome-private-accent: #71A1DB; /* Header bar */ - --gnome-private-headerbar-background: linear-gradient(to top, rgb(81, 44, 109), rgb(86, 47, 116)); - --gnome-private-headerbar-border-color: rgb(49, 27, 66); - --gnome-private-headerbar-box-shadow: 0 1px rgba(255, 255, 255, .07) inset; - --gnome-private-inactive-headerbar-background: #613583; - --gnome-private-inactive-headerbar-border-color: rgb(77, 41, 102); + --gnome-private-headerbar-background: #252F49; + --gnome-private-headerbar-border-color: #3F475E; + --gnome-private-headerbar-box-shadow: none; + --gnome-private-inactive-headerbar-background: #1C2438; + --gnome-private-inactive-headerbar-border-color: #3A4152; --gnome-private-inactive-headerbar-box-shadow: var(--gnome-private-headerbar-box-shadow); - - /* Buttons */ - --gnome-private-button-background: linear-gradient(to top, rgb(94, 52, 127) 2px, rgb(97, 53, 131)); - --gnome-private-button-border-color: rgb(70, 38, 95); - --gnome-private-button-border-accent-color: rgb(49, 27, 66); - --gnome-private-button-box-shadow: 0 1px rgba(255, 255, 255, .02) inset, 0 1px 2px rgba(0, 0, 0, .07); - --gnome-private-button-hover-background: linear-gradient(to top, rgb(94, 52, 127), rgb(100, 54, 135) 1px); - --gnome-private-button-active-background: rgb(73, 40, 98); - --gnome-private-button-active-border-color: rgb(62, 34, 84); - --gnome-private-button-active-border-accent-color: rgb(49, 27, 66); - --gnome-private-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-private-button-disabled-background: #613583; - --gnome-private-button-disabled-border-color: rgb(74, 41, 102); - --gnome-private-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-private-inactive-button-background: #613583; - --gnome-private-inactive-button-border-color: rgb(74, 41, 102); - --gnome-private-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - - /* Entries */ - --gnome-private-entry-border-color: #202020; } } diff --git a/theme/colors/light.css b/theme/colors/light.css index 9906444..ff6e5e2 100644 --- a/theme/colors/light.css +++ b/theme/colors/light.css @@ -7,86 +7,83 @@ :root { /* Browser area before a page starts loading */ - --gnome-browser-before-load-background: #d6d6d6; + --gnome-browser-before-load-background: #F8F7F7; /* Accent */ - --gnome-accent: #3584e4; + --gnome-accent: #83ADE1; /* Toolbars */ - --gnome-toolbar-background: #e0ddda; + --gnome-toolbar-background: var(--gnome-headerbar-background); --gnome-toolbar-color: rgb(46, 52, 54); - --gnome-toolbar-border-color: #b6b6b3; + --gnome-toolbar-border-color: var(--gnome-headerbar-border-color); --gnome-toolbar-icon-fill: #2e3436; - --gnome-inactive-toolbar-background: #f6f5f4; + --gnome-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); --gnome-inactive-toolbar-color: #d5d0cc; - --gnome-inactive-toolbar-border-color: #d5d0cc; + --gnome-inactive-toolbar-border-color: var(--gnome-inactive-headerbar-border-color); --gnome-inactive-toolbar-icon-fill: #929595; /* Sidebar */ - --gnome-sidebar-background: #fbfafa; - --gnome-inactive-sidebar-background: #f9f9f8; + --gnome-sidebar-background: var(--gnome-headerbar-background); + --gnome-inactive-sidebar-background: var(--gnome-sidebar-background); /* Popups */ --gnome-menu-background: #ffffff; --gnome-menu-border-color: #cdc7c2; - --gnome-popover-background: #f6f5f4; + --gnome-popover-background: #ffffff; --gnome-popover-border-color: #cdc7c2; - --gnome-popover-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - --gnome-popover-button-hover-background: #ffffff; + --gnome-popover-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + --gnome-popover-button-hover-background: var(--gnome-button-hover-background); --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); /* Header bar */ - --gnome-headerbar-background: linear-gradient(to top, /*#dad6d2,*/ #cdc9c3, #ddd9d5 2px, #e0ddda); - --gnome-headerbar-border-color: #bdb7b0; - --gnome-headerbar-box-shadow: 0 -1px rgb(217, 217, 217) inset, 0 1px #fff inset; - --gnome-inactive-headerbar-background: linear-gradient(#f6f5f4, #f6f5f4); - --gnome-inactive-headerbar-border-color: #d5d0cc; + --gnome-headerbar-background: #EBEBEB; + --gnome-headerbar-border-color: #CECECE; + --gnome-headerbar-box-shadow: none; + --gnome-inactive-headerbar-background: #FAFAFA; + --gnome-inactive-headerbar-border-color: #DCDCDC; --gnome-inactive-headerbar-box-shadow: 0 1px #fff inset; /* Buttons */ - --gnome-button-background: linear-gradient(to top, #edebe9 2px, #f6f5f4); - --gnome-button-border-color: #cdc7c2; - --gnome-button-border-accent-color: #bfb8b1; - --gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-button-hover-background: linear-gradient(to top, #f6f5f4, #f8f8f7 1px); - --gnome-button-active-background: linear-gradient(#cfcac4, #cfcac4); - --gnome-button-active-border-color: #c6bfb9; - --gnome-button-active-border-accent-color: #bab3ab; - --gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-button-disabled-background: #faf9f8; - --gnome-button-disabled-border-color: #cdc7c2; - --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-inactive-button-background: linear-gradient(#f6f5f4, #f6f5f4); - --gnome-inactive-button-border-color: #d5d0cc; - --gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); + --gnome-button-background: rgba(0, 0, 0, .08); + --gnome-button-hover-background: rgba(0, 0, 0, .12); + --gnome-button-active-background: rgba(0, 0, 0, .24); + --gnome-button-flat-hover-background: rgba(0, 0, 0, .056); + --gnome-button-flat-active-background: rgba(0, 0, 0, .128); + --gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4); - --gnome-button-suggested-action-border-color: #1b6acb; + --gnome-button-suggested-action-border-color: none; --gnome-button-suggested-action-border-accent-color: #15539e; --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-button-suggested-action-hover-background: linear-gradient(to top, #3584e4, #3987e5 1px); --gnome-button-suggested-action-active-background: #1961b9; --gnome-button-suggested-action-active-border-color: #1b6acb; --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24); - --gnome-button-destructive-action-border-color: #b2161d; + --gnome-button-destructive-action-background: var(--gnome-button-background); + --gnome-button-destructive-action-border-color: #E5E2E1; --gnome-button-destructive-action-border-accent-color: #851015; --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px); - --gnome-button-destructive-action-active-background: #a0131a; - --gnome-button-destructive-action-active-border-color: #b2161d; + --gnome-button-destructive-action-active-background: #E4E2E0; + --gnome-button-destructive-action-active-border-color: none; --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + + --gnome-button-close-background: var(--gnome-button-flat-hover-background); + --gnome-button-hover-close-background:var(--gnome-button-hover-background); + --gnome-button-active-close-background: var(--gnome-button-active-background); + /* Entries */ - --gnome-entry-background: linear-gradient(#fff, #fff); - --gnome-entry-border-color: #b6b6b3; + --gnome-entry-background: rgba(0, 0, 0, .08); + --gnome-entry-border-color: none; --gnome-entry-box-shadow: none; - --gnome-entry-color: #020202; - --gnome-inactive-entry-background: linear-gradient(#fcfcfc, #fcfcfc); - --gnome-inactive-entry-border-color: #d5d0cc; + --gnome-entry-color: #303030; + --gnome-inactive-entry-background: #F0F0F0; + --gnome-inactive-entry-border-color: none; --gnome-inactive-entry-box-shadow: none; - --gnome-inactive-entry-color: #323232; + --gnome-inactive-entry-color: #303030; --gnome-focused-urlbar-border-color: var(--gnome-accent); - --gnome-focused-urlbar-item-hover: var(--gnome-toolbar-background); + --gnome-focused-urlbar-item-hover: #ebebeb; + --gnome-urlbar-view: #FFFFFF; /* Switch */ --gnome-switch-background: #e1dedb; @@ -98,52 +95,33 @@ --gnome-switch-active-border-color: #185fb4; --gnome-switch-active-slider-border-color: #185fb4; - /* Tabs */ - --gnome-tabbar-tab-color: #2e3436; - --gnome-tabbar-tab-background: #dad6d2; - --gnome-tabbar-tab-border-color: #bfb8b1; - --gnome-tabbar-tab-hover-background: #e1dedb; - --gnome-tabbar-tab-hover-color: #2e3436; - --gnome-tabbar-tab-active-background: #e8e6e3; - --gnome-tabbar-tab-active-background-contrast: #F7F5F3; - --gnome-tabbar-tab-active-color: #2e3436; - --gnome-tabbar-tab-active-hover-background: #EFEDEC; - --gnome-inactive-tabbar-tab-color: #929595; - --gnome-inactive-tabbar-tab-background: #eae8e6; - --gnome-inactive-tabbar-tab-active-background: #f6f5f4; + /* Tabs */ + --gnome-tabbar-tab-color: #303030; + --gnome-tabbar-tab-background: #E1E1E1; + --gnome-tabbar-tab-border-color: #CECECE; + --gnome-tabbar-tab-hover-background: #DCDCDC; + --gnome-tabbar-tab-hover-color: #303030; + --gnome-tabbar-tab-active-background: #EBEBEB; + --gnome-tabbar-tab-active-background-contrast: #FAFAFA; + --gnome-tabbar-tab-active-color: #303030; + --gnome-tabbar-tab-active-hover-background: #E5E5E5; + --gnome-inactive-tabbar-tab-color: #303030; + --gnome-inactive-tabbar-tab-background: #EFEFEF; + --gnome-inactive-tabbar-tab-active-background: #FAFAFA; --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); - --gnome-tabbar-close-hover: #d2d1d1; + --gnome-tabbar-close-hover: #D9D9D9; } /* Private window colors */ :root { - --gnome-private-accent: rgb(132, 77, 179); + --gnome-private-accent: #272F42; /* Header bar */ - --gnome-private-headerbar-background: linear-gradient(to top, rgb(206, 191, 219), rgb(214, 201, 255)); - --gnome-private-headerbar-border-color: rgb(176, 152, 197); - --gnome-private-headerbar-box-shadow: 0 1px rgba(255, 255, 255, .8) inset; - --gnome-private-inactive-headerbar-background: #ECE6F1; - --gnome-private-inactive-headerbar-border-color: rgb(200, 183, 215); + --gnome-private-headerbar-background: #D7E3F0; + --gnome-private-headerbar-border-color: #BEC9D5; + --gnome-private-headerbar-box-shadow: none; + --gnome-private-inactive-headerbar-background: #EAF0F7; + --gnome-private-inactive-headerbar-border-color: #D8DEE4; --gnome-private-inactive-headerbar-box-shadow: var(--gnome-private-headerbar-box-shadow); - - /* Buttons */ - --gnome-private-button-background: linear-gradient(to top, rgb(226, 217, 234) 2px, rgb(236, 230, 241)); - --gnome-private-button-border-color: rgb(191, 171, 208); - --gnome-private-button-border-accent-color: rgb(179, 152, 197); - --gnome-private-button-box-shadow: 0 1px rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(0, 0, 0, .07); - --gnome-private-button-hover-background: linear-gradient(to top, rgb(236, 230, 241), rgb(238, 233, 243) 1px); - --gnome-private-button-active-background: rgb(194, 174, 210); - --gnome-private-button-active-border-color: rgb(184, 161, 203); - --gnome-private-button-active-border-accent-color: rgb(171, 145, 194); - --gnome-private-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-private-button-disabled-background: #ECE6F1; - --gnome-private-button-disabled-border-color: rgb(200, 183, 215); - --gnome-private-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - --gnome-private-inactive-button-background: #ECE6F1; - --gnome-private-inactive-button-border-color: rgb(200, 183, 215); - --gnome-private-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; - - /* Entries */ - --gnome-private-entry-border-color: rgb(191, 171, 208); } + diff --git a/theme/icons/process-working-symbolic-black.svg b/theme/icons/process-working-symbolic-black.svg new file mode 100644 index 0000000..4083d9f --- /dev/null +++ b/theme/icons/process-working-symbolic-black.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/theme/icons/process-working-symbolic.svg b/theme/icons/process-working-symbolic.svg index 0f819e8..7548638 100644 --- a/theme/icons/process-working-symbolic.svg +++ b/theme/icons/process-working-symbolic.svg @@ -1,4 +1,9 @@ - - - + + + + + + + + diff --git a/theme/parts/buttons.css b/theme/parts/buttons.css index 5f73219..f06564b 100644 --- a/theme/parts/buttons.css +++ b/theme/parts/buttons.css @@ -45,10 +45,7 @@ button.close, #item-choose button { -moz-appearance: none !important; background: var(--gnome-button-background) !important; - box-shadow: var(--gnome-button-box-shadow) !important; - border: 1px solid var(--gnome-button-border-color) !important; - border-bottom-color: var(--gnome-button-border-accent-color) !important; - border-radius: 5px !important; + border-radius: 6px !important; padding: 0 1px !important; height: 34px !important; max-height: 34px !important; @@ -63,6 +60,17 @@ button.close, -moz-box-pack: center !important; } +/* Flat Buttons */ +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton), +.close-icon:not(.tab-close-button), +button.close, +#protections-popup-info-button, +#protections-popup-trackers-blocked-counter-box, +.permission-popup-permission-remove-button, +#item-choose button { + background: transparent !important; +} + /* Buttons with margins */ #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton), .notification-button, @@ -143,7 +151,6 @@ menulist, /* Hover buttons */ menulist:hover, -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([open]):not([disabled]):not([checked]):hover, .subviewbutton.panel-subview-footer:hover, .panel-footer button:hover, #downloadsHistory:hover, @@ -157,32 +164,35 @@ menulist:hover, .findbar-closebutton .toolbarbutton-icon:hover, #sidebar-switcher-target:hover, #viewButton:hover, -.close-icon:not(.tab-close-button):hover, -button.close:hover, menulist:hover .menulist-label-box, .expander-down:hover, .expander-up:hover, .notification-button:hover, .protections-popup-footer-button:hover, #identity-popup-security-expander:hover, -#protections-popup-info-button:hover, .tracking-protection-button:hover, .dialog-button:hover, .autocomplete-richlistitem[type="loginsFooter"]:hover, .dialog-button-box button:not([disabled]):hover, .searchbar-engine-one-off-item:hover, -.permission-popup-permission-remove-button:hover, -#protections-popup-trackers-blocked-counter-box:hover, -.button.connect-device:hover, -#item-choose button:hover { +.button.connect-device:hover { outline: 0 !important; background: var(--gnome-button-hover-background) !important; } +/* Hover flat buttons */ +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([open]):not([disabled]):not([checked]):hover, +.close-icon:not(.tab-close-button):hover, +button.close:hover, +#protections-popup-info-button:hover, +#protections-popup-trackers-blocked-counter-box:hover, +.permission-popup-permission-remove-button:hover, +#item-choose button:hover { + outline: 0 !important; + background: var(--gnome-button-flat-hover-background) !important; +} + /* Active buttons */ menulist[open], -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled]):not(#hack):active, -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.subviewbutton):not([disabled])[open], -#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled])[checked], .subviewbutton.panel-subview-footer:active, .panel-footer button:active, #downloadsHistory:active, @@ -196,28 +206,31 @@ menulist[open], .findbar-container toolbarbutton:active, #sidebar-switcher-target:active, #sidebar-switcher-target.active, #viewButton[open], -.close-icon:not(.tab-close-button):active, -button.close:active, menulist[open] .menulist-label-box, .expander-down:active, .expander-up:active, .notification-button:active, .protections-popup-footer-button:not(#hack):active, #identity-popup-security-expander:active, -#protections-popup-info-button:not(#hack):active, -#protections-popup-info-button:not(#hack)[checked], .tracking-protection-button:active, .dialog-button:active, .autocomplete-richlistitem[type="loginsFooter"]:active, .dialog-button-box button:not([disabled]):active, -.permission-popup-permission-remove-button:active, -#protections-popup-trackers-blocked-counter-box:active, -.button.connect-device:active, -#item-choose button:active { +.button.connect-device:active { background: var(--gnome-button-active-background) !important; - box-shadow: var(--gnome-button-active-box-shadow) !important; - border-color: var(--gnome-button-active-border-color) !important; - border-bottom-color: var(--gnome-button-active-border-color) !important; - border-top-color: var(--gnome-button-active-border-accent-color) !important; +} + +/* Active flat buttons */ +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled]):not(#hack):active, +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.subviewbutton):not([disabled])[open], +#nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled])[checked], +.close-icon:not(.tab-close-button):active, +button.close:active, +#protections-popup-info-button:not(#hack):active, +#protections-popup-info-button:not(#hack)[checked], +#protections-popup-trackers-blocked-counter-box:active, +.permission-popup-permission-remove-button:active, +#item-choose button:active { + background: var(--gnome-button-flat-active-background) !important; } /* Disabled buttons */ @@ -225,21 +238,7 @@ menulist[open] .menulist-label-box, #appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled], #context-navigation menuitem[disabled], .dialog-button-box button[disabled] { - background: var(--gnome-button-disabled-background) !important; - border-color: var(--gnome-button-disabled-border-color) !important; - box-shadow: var(--gnome-button-disabled-box-shadow) !important; - opacity: 1 !important; -} -#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] image, -#appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled] image, -#context-navigation menuitem[disabled] image, -.dialog-button-box button[disabled] label { - opacity: .4 !important; -} - -#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled]:hover, -#appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled]:hover { - background: var(--gnome-button-disabled-background) !important; + opacity: .5 !important; } /* Inactive window buttons */ @@ -253,35 +252,6 @@ menulist[open] .menulist-label-box, border-color: var(--gnome-inactive-button-border-color) !important; } -/* Flat buttons */ -.close-icon:not(.tab-close-button), -button.close, -#protections-popup-info-button, -#protections-popup-trackers-blocked-counter-box { - background: transparent !important; - box-shadow: none !important; - border-color: transparent !important; - border-radius: 5px !important; -} -/* List style */ -.permission-popup-permission-remove-button, -#item-choose button { - background: transparent !important; - box-shadow: none !important; - border-color: var(--gnome-popover-separator-color) !important; - border-radius: 5px !important; -} -.close-icon:not(.tab-close-button):not(:active):hover, -button.close:not(:active):hover, -#protections-popup-info-button:hover, -.permission-popup-permission-remove-button:not(:active):hover, -#protections-popup-trackers-blocked-counter-box:not(:active):hover, -#item-choose button:not(:active):hover { - box-shadow: var(--gnome-button-box-shadow) !important; - border-color: var(--gnome-button-border-color) !important; - border-bottom-color: var(--gnome-button-border-accent-color) !important; -} - /* Circle buttons */ #downloadsPanel-mainView .download-state .downloadButton, .permission-popup-permission-remove-button:not(#hack) { @@ -290,7 +260,6 @@ button.close:not(:active):hover, /* Combined buttons */ #nav-bar .toolbaritem-combined-buttons toolbarbutton:not(:last-of-type):not(#hack), -#nav-bar #back-button:not(#hack), #appMenu-popup .toolbaritem-combined-buttons toolbarbutton:not(:last-of-type):not(#appMenu-zoomEnlarge-button), #context-navigation menuitem:not(:last-of-type), .findbar-container toolbarbutton.findbar-find-previous, @@ -303,7 +272,6 @@ button.close:not(:active):hover, } #nav-bar .toolbaritem-combined-buttons toolbarbutton:not(:first-of-type):not(#hack), -#nav-bar #forward-button:not(#hack), #appMenu-popup .toolbaritem-combined-buttons toolbarbutton:not(:first-of-type):not(#appMenu-fullscreen-button), #context-navigation menuitem:not(:first-of-type), .findbar-container toolbarbutton.findbar-find-previous, diff --git a/theme/parts/csd.css b/theme/parts/csd.css index bf8ebbd..8af100b 100644 --- a/theme/parts/csd.css +++ b/theme/parts/csd.css @@ -8,7 +8,7 @@ /* Headerbar top border corners rounded */ :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #nav-bar { - border-radius: 7px 7px 0 0 !important; + border-radius: env(-moz-gtk-csd-titlebar-radius) env(-moz-gtk-csd-titlebar-radius) 0 0 !important; } /* Window buttons: at least 1 button */ @@ -118,21 +118,19 @@ :root[tabsintitlebar] #titlebar .titlebar-button, :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { -moz-appearance: none !important; - border: 1px solid var(--gnome-button-border-color) !important; - border-color: transparent !important; - border-radius: 5px !important; padding: 0 2px !important; + background: var(--gnome-button-close-background); } :root[tabsintitlebar] #titlebar .titlebar-button { border-radius: 100% !important; - height: 30px !important; - margin: 2px 5px !important; - width: 30px; + height: 24px !important; + margin: 6px 6px !important; + width: 24px !important; } :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { - border-radius: 5px !important; + border-radius: 6px !important; height: 34px; margin: 0 3px !important; width: 34px; @@ -142,22 +140,21 @@ :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { width: 16px; } -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon, -:root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon { +:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button, +:root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton { opacity: .3 !important; } :root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):hover, :root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):hover { - background-image: var(--gnome-button-hover-background); - border-color: var(--gnome-button-border-color) !important; - border-bottom-color: var(--gnome-button-border-accent-color) !important; - box-shadow: var(--gnome-button-box-shadow); + background: var(--gnome-button-hover-background); } :root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):active, :root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):active { - background: var(--gnome-button-active-background); - box-shadow: var(--gnome-button-active-box-shadow); - border-color: var(--gnome-button-active-border-color) !important; + background: var(--gnome-button-active-close-background); +} + +:root[tabsintitlebar] #titlebar .titlebar-button:where(:hover) { + background: var(--gnome-button-hover-close-background); } /* OPTIONAL: Allow draging the window from headerbar buttons */ diff --git a/theme/parts/entries.css b/theme/parts/entries.css index 10fdd43..c06cf1b 100644 --- a/theme/parts/entries.css +++ b/theme/parts/entries.css @@ -15,7 +15,7 @@ -moz-appearance: none !important; background: var(--gnome-entry-background) !important; border: 1px solid var(--gnome-entry-border-color) !important; - border-radius: 5px !important; + border-radius: 8px !important; box-shadow: var(--gnome-entry-box-shadow) !important; color: var(--gnome-entry-color) !important; height: 34px !important; @@ -41,20 +41,6 @@ outline-offset: -2px; -moz-outline-radius: 5px; } -@media (prefers-color-scheme: dark) { - #urlbar[breakout][breakout-extend], - #searchbar:focus-within, - #search-box[focused], - .findbar-textbox[focused], - .findbar-textbox:focus, - #loginTextbox:focus, - #password1Textbox:focus, - .tabsFilter[focused], - #editBMPanel_namePicker:focus-visible, - #editBMPanel_tagsField:focus-visible { - outline-width: 1px !important; - } -} /* Inactive window entries */ #urlbar:-moz-window-inactive, diff --git a/theme/parts/headerbar-private-window.css b/theme/parts/headerbar-private-window.css index 3b7b773..b740b1c 100644 --- a/theme/parts/headerbar-private-window.css +++ b/theme/parts/headerbar-private-window.css @@ -11,29 +11,6 @@ --gnome-inactive-headerbar-background: var(--gnome-private-inactive-headerbar-background) !important; --gnome-inactive-headerbar-border-color: var(--gnome-private-inactive-headerbar-border-color) !important; --gnome-inactive-headerbar-box-shadow: var(--gnome-private-inactive-headerbar-box-shadow) !important; - /* Change urlbar colors */ - --gnome-entry-border-color: var(--gnome-private-entry-border-color) !important; -} - -/* Change headerbar buttons colors */ -:root[privatebrowsingmode="temporary"] #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton), -:root[privatebrowsingmode="temporary"][tabsintitlebar] #titlebar .titlebar-button, -:root[privatebrowsingmode="temporary"][tabsintitlebar][inFullscreen] #window-controls toolbarbutton { - --gnome-button-background: var(--gnome-private-button-background) !important; - --gnome-button-border-color: var(--gnome-private-button-border-color) !important; - --gnome-button-border-accent-color: var(--gnome-private-button-border-accent-color) !important; - --gnome-button-box-shadow: var(--gnome-private-button-box-shadow) !important; - --gnome-button-hover-background: var(--gnome-private-button-hover-background) !important; - --gnome-button-active-background: var(--gnome-private-button-active-background) !important; - --gnome-button-active-border-color: var(--gnome-private-button-active-border-color) !important; - --gnome-button-active-border-accent-color: var(--gnome-private-button-active-border-accent-color) !important; - --gnome-button-active-box-shadow: var(--gnome-private-button-active-box-shadow) !important; - --gnome-button-disabled-background: var(--gnome-private-button-disabled-background) !important; - --gnome-button-disabled-border-color: var(--gnome-private-button-disabled-border-color) !important; - --gnome-button-disabled-box-shadow: var(--gnome-private-button-disabled-box-shadow) !important; - --gnome-inactive-button-background: var(--gnome-private-inactive-button-background) !important; - --gnome-inactive-button-border-color: var(--gnome-private-inactive-button-border-color) !important; - --gnome-inactive-button-box-shadow: var(--gnome-private-inactive-button-box-shadow) !important; } /* Add private window headerbar indicator */ diff --git a/theme/parts/popups.css b/theme/parts/popups.css index d05b37d..4735015 100644 --- a/theme/parts/popups.css +++ b/theme/parts/popups.css @@ -149,10 +149,13 @@ panel[type="arrow"].panel-no-padding::part(content) { fill-opacity: 1 !important; } -.subviewbutton:not([disabled]):hover, .toolbarbutton-1:not([disabled]):hover, .protections-popup-category:not([disabled]):hover, +.subviewbutton:not([disabled], #appMenu-zoom-controls2, #appMenu-fxa-label2):hover, .toolbarbutton-1:not([disabled]):hover, .protections-popup-category:not([disabled]):hover, .identity-popup-content-blocking-category:not([disabled]):hover, #PlacesToolbar .bookmark-item:hover, #PlacesToolbar .bookmark-item[open], #PlacesToolbar .bookmark-item[_moz-menuactive] { background-color: var(--gnome-popover-button-hover-background) !important; } +#appMenu-fxa-label2:hover { + background: transparent !important; +} .subviewbutton-back { width: 100%; diff --git a/theme/parts/urlbar.css b/theme/parts/urlbar.css index 64a8cae..6b3e09c 100644 --- a/theme/parts/urlbar.css +++ b/theme/parts/urlbar.css @@ -29,31 +29,29 @@ toolbarspring { z-index: 5 !important; padding: 0 !important; } -#urlbar[breakout][breakout-extend][open] { - height: auto !important; - max-height: unset !important; -} + #urlbar #urlbar-input-container { padding: 0 !important; } -#urlbar[breakout][breakout-extend] #urlbar-input-container { - height: 32px !important; - max-height: 32px !important; -} /* URL bar results */ .urlbarView { background: transparent !important; color: var(--gnome-toolbar-color) !important; - margin: 0 !important; + margin: 11px 0 0 0 !important; width: 100% !important; + position: absolute !important; + box-shadow: var(--gnome-popover-shadow) !important; + border-radius: 8px !important } .urlbarView-body-outer { --item-padding-start: 0 !important; --item-padding-end: 0 !important; + background: var(--gnome-urlbar-view) !important; overflow-x: auto; padding: 0 8px !important; + border-radius: 8px 8px 0 0 !important; } .urlbarView-body-inner { @@ -69,10 +67,11 @@ toolbarspring { } .urlbarView-row[selected] .urlbarView-row-inner { - background: var(--gnome-accent) !important; - color: white; + background: transparent !important; + outline: 2px solid var(--gnome-focused-urlbar-border-color) !important; + color: var(--gnome-toolbar-color) !important; } -.urlbarView-row:not([selected]):hover .urlbarView-row-inner { +.urlbarView-row:hover .urlbarView-row-inner { background: var(--gnome-focused-urlbar-item-hover) !important; } @@ -82,17 +81,16 @@ toolbarspring { /* Search engines buttons */ .search-one-offs { - margin-bottom: 2px !important; padding: 8px !important; - background: var(--gnome-popover-background) !important; - border-top: 1px solid var(--gnome-popover-border-color) !important; - border-radius: 0 0 5px 5px !important; + background: var(--gnome-urlbar-view) !important; + border-top: 1px solid var(--gnome-popover-separator-color) !important; + border-radius: 0 0 8px 8px !important; } #urlbar-anon-search-settings-compact { border-left-width: 1px !important; border-bottom: 1px solid var(--gnome-button-border-accent-color) !important; - border-radius: 5px; + border-radius: 5px; margin-left: 6px !important; }