Fixed #34

vinceliuice · Oct 30, 2023 · a6a08d0 · a6a08d0
1 parent 9f0a25b
commit a6a08d0
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 57 deletions.
diff --git a/src/Monterey/colors/dark.css b/src/Monterey/colors/dark.css
@@ -119,14 +119,14 @@
 	--gnome-switch-hover-background: #525252;
 	--gnome-switch-active-background: #606060;
 	--gnome-switch-border-color: transparent;
-	--gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%);
-	--gnome-switch-slider-border-color: #111111;
+	--gnome-switch-slider-background: #ffffff;
+	--gnome-switch-slider-border-color: transparent;
 	--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
 	--gnome-switch-pressed-background: #315bef;
 	--gnome-switch-pressed-hover-background: #5073f1;
 	--gnome-switch-pressed-active-background: #6584f3;
-	--gnome-switch-active-border-color: #030c17;
-	--gnome-switch-active-slider-border-color: #030c17;
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
 
 	/* Dirty hacks for replaced symbolic icons, they load from
 	 * /usr/share/icons/<theme>/ and on some systems they need to be

diff --git a/src/Monterey/colors/light.css b/src/Monterey/colors/light.css
@@ -118,11 +118,11 @@
 	--gnome-switch-hover-background: #a0a0a0;
 	--gnome-switch-active-background: #929292;
 	--gnome-switch-border-color: transparent;
-	--gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%);
-	--gnome-switch-slider-border-color: #b8b8b8;
+	--gnome-switch-slider-background: #ffffff;
+	--gnome-switch-slider-border-color: transparent;
 	--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
-	--gnome-switch-active-border-color: #185fb4;
-	--gnome-switch-active-slider-border-color: #185fb4;
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
 	--gnome-switch-pressed-background: #315bef;
 	--gnome-switch-pressed-hover-background: #5073f1;
 	--gnome-switch-pressed-active-background: #6584f3;

diff --git a/src/Monterey/parts/tabsbar-alt.css b/src/Monterey/parts/tabsbar-alt.css
@@ -7,19 +7,19 @@
 }
 
 /* Fix tabs bar icon sizes */
-#TabsToolbar {
-	padding: 0 0 6px 0 !important;
+#TabsToolbar tab {
+	margin-bottom: 6px !important;
 }
 
 /* Tabs bar height */
 #tabbrowser-tabs,
 #tabbrowser-tabs arrowscrollbox {
-	height: 36px !important;
 	min-height: 36px !important;
 	--tab-min-height: 36px !important;
 }
 
 .tab-background, .tab-stack {
+	height: 36px !important;
 	min-height: 36px !important;
 }
 

diff --git a/src/WhiteSur/colors/dark.css b/src/WhiteSur/colors/dark.css
@@ -118,14 +118,14 @@
 	--gnome-switch-hover-background: #525252;
 	--gnome-switch-active-background: #606060;
 	--gnome-switch-border-color: transparent;
-	--gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%);
-	--gnome-switch-slider-border-color: #111111;
+	--gnome-switch-slider-background: #ffffff;
+	--gnome-switch-slider-border-color: transparent;
 	--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
 	--gnome-switch-pressed-background: #315bef;
 	--gnome-switch-pressed-hover-background: #5073f1;
 	--gnome-switch-pressed-active-background: #6584f3;
-	--gnome-switch-active-border-color: #030c17;
-	--gnome-switch-active-slider-border-color: #030c17;
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
 
 	/* Dirty hacks for replaced symbolic icons, they load from
 	 * /usr/share/icons/<theme>/ and on some systems they need to be

diff --git a/src/WhiteSur/colors/light.css b/src/WhiteSur/colors/light.css
@@ -116,11 +116,11 @@
 	--gnome-switch-hover-background: #a0a0a0;
 	--gnome-switch-active-background: #929292;
 	--gnome-switch-border-color: transparent;
-	--gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%);
-	--gnome-switch-slider-border-color: #b8b8b8;
+	--gnome-switch-slider-background: #ffffff;
+	--gnome-switch-slider-border-color: transparent;
 	--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
-	--gnome-switch-active-border-color: #185fb4;
-	--gnome-switch-active-slider-border-color: #185fb4;
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
 	--gnome-switch-pressed-background: #315bef;
 	--gnome-switch-pressed-hover-background: #5073f1;
 	--gnome-switch-pressed-active-background: #6584f3;

diff --git a/src/WhiteSur/parts/tabsbar.css b/src/WhiteSur/parts/tabsbar.css
@@ -19,14 +19,6 @@
 	max-height: 32px !important;
 }
 
-/* Extra margin for the first and last tabs */
-.tabbrowser-tab[first-tab]:not([pinned=true]) {
-	margin-left: 8px !important;
-}
-.tabbrowser-tab[last-tab]:not([pinned=true]) {
-	margin-right: 8px !important;
-}
-
 #TabsToolbar .toolbar-items {
 	margin-bottom: -1px !important;
 }
@@ -84,7 +76,7 @@
 }
 
 /* Space between tabs */
-.tabbrowser-tab:not([pinned=true]) {
+.tabbrowser-tab:not([pinned]) {
 	margin: 0 !important;
 }
 
@@ -228,11 +220,6 @@ tab[selected]:-moz-window-inactive {
 	margin-right: auto !important
 }
 
-/* Remove tab icons */
-/* tab:not([pinned=true]) .tab-icon-image {
-	display: none;
-} */
-
 /* Close tab button */
 .close-icon {
 	height: 16px !important;
@@ -377,10 +364,10 @@ tab[selected]:-moz-window-inactive {
 	border-image: none !important;
 }
 
-/* Tabs scroll buttons hover */
-#TabsToolbar .scrollbutton-up:not([disabled]):hover,
-#TabsToolbar .scrollbutton-down:not([disabled]):hover {
-	background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
+/* Tabs scroll buttons */
+#TabsToolbar #scrollbutton-up:not([disabled]):hover,
+#TabsToolbar #scrollbutton-down:not([disabled]):hover {
+	background: var(--gnome-tabbar-tab-active-hover-background) !important;
 }
 
 /* Full width tabs */
@@ -409,15 +396,6 @@ tab[selected]:-moz-window-inactive {
 	border: none !important;
 }
 
-#TabsToolbar #firefox-view-button {
-	padding: 0 4px !important;
-}
-
-#TabsToolbar #firefox-view-button[open] {
-	background-color: var(--gnome-tabbar-tab-active-background) !important;
-	box-shadow: inset 0 -1px var(--gnome-toolbar-border-color) !important;
-}
-
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
@@ -449,6 +427,15 @@ tab[selected]:-moz-window-inactive {
 	box-shadow: none !important;
 }
 
+#TabsToolbar #firefox-view-button {
+	padding: 0 4px !important;
+}
+
+#TabsToolbar #firefox-view-button[open] {
+	background-color: var(--gnome-tabbar-tab-active-background) !important;
+	box-shadow: inset 0 -1px var(--gnome-toolbar-border-color) !important;
+}
+
 /* Create new container tab indicator */
 .tabbrowser-tab[class*="identity-color-"] .tab-content::before {
 	content: "";

diff --git a/src/WhiteSur/parts/toolbox.css b/src/WhiteSur/parts/toolbox.css
@@ -26,7 +26,7 @@
 }
 
 #TabsToolbar {
-	border: 0 !important;
+	border: none !important;
 	background: var(--gnome-tabstoolbar-background) !important;
 	border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
 	box-shadow: inset 0 1px var(--gnome-toolbar-border-color) !important;

diff --git a/src/common/hide-single-tab.css b/src/common/hide-single-tab.css
@@ -1,9 +1,5 @@
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#tabbrowser-tabs {
-	--tab-min-height: 0 !important;
-}
-
 #tabbrowser-tabs tab:only-of-type,
 #TabsToolbar #alltabs-button {
 	display: none !important;
@@ -12,3 +8,9 @@
 .tab-background, .tab-stack {
 	min-height: 0 !important;
 }
+
+#tabbrowser-tabs,
+#tabbrowser-tabs arrowscrollbox {
+	min-height: 0 !important;
+	--tab-min-height: 0 !important;
+}
diff --git a/src/common/pages/common.css b/src/common/pages/common.css
@@ -0,0 +1,44 @@
+@media (prefers-color-scheme: dark) {
+  :host,
+  :root {
+    --in-content-page-background: rgb(29,29,29) !important;
+    --in-content-page-color: rgb(253,253,253) !important;
+
+    --in-content-box-background: rgb(36, 36, 36) !important;
+    --in-content-box-background-odd: rgba(250,250,250,0.05) !important;
+    --in-content-box-info-background: rgba(250,250,250,0.15) !important;
+
+    --in-content-border-color: rgba(250,250,250,0.2) !important;
+    --in-content-border-hover: rgba(250,250,250,0.3) !important;
+
+    --in-content-icon-color: rgb(252,252,252) !important;
+
+    --in-content-primary-button-text-color: rgb(255,255,255) !important;
+    --in-content-primary-button-background: var(--theme-primary-color) !important;
+    --in-content-primary-button-background-hover: var(--theme-primary-hover-color) !important;
+    --in-content-primary-button-background-active: var(--theme-primary-active-color) !important;
+
+    --in-content-table-background: rgb(35, 35, 35) !important;
+
+    scrollbar-color: rgba(250,250,250,.4) rgba(22,22,22,.3) !important;
+  }
+
+  @media not (prefers-contrast) {
+    :root[dialogroot],
+    :host(dialog) {
+      --in-content-page-background: #424242 !important;
+    }
+  }
+}
+
+.toggle-button {
+  --toggle-background-color: var(--gnome-switch-background) !important;
+  --toggle-background-color-hover: var(--gnome-switch-hover-background) !important;
+  --toggle-background-color-active: var(--gnome-switch-active-background) !important;
+  --toggle-background-color-pressed: var(--gnome-switch-pressed-background) !important;
+  --toggle-background-color-pressed-hover: var(--gnome-switch-pressed-hover-background) !important;
+  --toggle-background-color-pressed-active: var(--gnome-switch-pressed-active-background) !important;
+  --toggle-border-color: var(--gnome-switch-border-color) !important;
+  --toggle-dot-background-color: var(--gnome-switch-slider-background) !important;
+  --toggle-dot-background-color-on-pressed: var(--gnome-switch-slider-background) !important;
+}
diff --git a/src/common/pages/reader.css b/src/common/pages/reader.css
@@ -0,0 +1,17 @@
+body.dark {
+  --main-background: var(--gnome-browser-before-load-background) !important;
+  --main-foreground: var(--gnome-toolbar-color) !important;
+  --primary-color: var(--theme-primary-color) !important;
+  --toolbar-border: rgba(250, 250, 250, 0.2) !important;
+  --toolbar-button-background-hover: rgb(82, 82, 82) !important;
+  --toolbar-button-background-active: rgb(92, 92, 92) !important;
+  --popup-background: rgb(66, 66, 66) !important;
+  --opaque-popup-border: #424242 !important;
+  --popup-line: rgba(250, 250, 250, 0.1) !important;
+  --popup-button-background: rgb(43, 43, 43)!important;
+  --selected-background: rgba(var(--theme-primary-color), 0.3) !important;
+  --font-value-background: rgba(var(--theme-primary-color), 0.15) !important;
+  --font-value-border: #656565 !important;
+  --icon-fill: rgb(251, 251, 251) !important;
+  --icon-disabled-fill: rgba(251, 251, 251, 0.4) !important;
+}
diff --git a/src/common/parts/csd.css b/src/common/parts/csd.css
@@ -2,13 +2,9 @@
 
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#main-window {
-	-moz-appearance: -moz-window-titlebar !important;
-}
-
 /* Headerbar top border corners rounded */
 :root[tabsintitlebar]:not([inFullscreen]):not([sizemode="maximized"]) #nav-bar {
-	border-radius: 12px 12px 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 */
@@ -90,7 +86,7 @@
 /* Left window buttons */
 @media (-moz-gtk-csd-reversed-placement) {
 	:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
-		padding-right: 3px !important;
+		padding-right: 6px !important;
 	}
 
 	/* Window buttons box */

diff --git a/src/userContent-Monterey.css b/src/userContent-Monterey.css
@@ -2,4 +2,5 @@
 @import "Monterey/colors/dark.css";
 
 @import "Monterey/pages/newtab.css";
+@import "Monterey/pages/reader.css";
 @import "Monterey/pages/privatebrowsing.css";
diff --git a/src/userContent-WhiteSur.css b/src/userContent-WhiteSur.css
@@ -2,4 +2,5 @@
 @import "WhiteSur/colors/dark.css";
 
 @import "WhiteSur/pages/newtab.css";
+@import "WhiteSur/pages/reader.css";
 @import "WhiteSur/pages/privatebrowsing.css";