Merge branch 'master' of github.com:vinceliuice/WhiteSur-gtk-theme

shell/lib-install.sh

@@ -678,7 +678,8 @@ install_firefox_theme() {
 
   if [[ "${monterey}" == 'true' ]]; then
     udo cp -rf "${FIREFOX_SRC_DIR}"/Monterey                                                  "${TARGET_DIR}"
-    udo cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur/{icons,titlebuttons}                             "${TARGET_DIR}"/Monterey
+    udo cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur/{icons,titlebuttons,pages}                       "${TARGET_DIR}"/Monterey
+    udo cp -rf "${FIREFOX_SRC_DIR}"/userContent-Monterey.css                                  "${TARGET_DIR}"/userContent.css
     if [[ "${alttheme}" == 'true' ]]; then
       udo cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt.css                             "${TARGET_DIR}"/userChrome.css
     else
@@ -687,6 +688,7 @@ install_firefox_theme() {
   else
     udo cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur                                                  "${TARGET_DIR}"
     udo cp -rf "${FIREFOX_SRC_DIR}"/userChrome-WhiteSur.css                                   "${TARGET_DIR}"/userChrome.css
+    udo cp -rf "${FIREFOX_SRC_DIR}"/userContent-WhiteSur.css                                  "${TARGET_DIR}"/userContent.css
   fi
 
   config_firefox

src/other/firefox/Monterey/parts/buttons-fixes.css

@@ -229,4 +229,3 @@ button.close.ghost-button:active {
 .close-icon:not(.tab-close-button) .toolbarbutton-icon {
 	outline: 0 !important;
 }
-

src/other/firefox/Monterey/parts/buttons.css

@@ -41,7 +41,8 @@ button.close:not(.ghost-button),
 .permission-popup-permission-remove-button,
 .button.connect-device,
 #item-choose button,
-#editBMPanel_newFolderButton {
+#editBMPanel_newFolderButton,
+button.customizationmode-button {
 	-moz-appearance: none !important;
 	background: var(--gnome-button-background) !important;
 	box-shadow: var(--gnome-button-box-shadow) !important;
@@ -89,7 +90,8 @@ menulist,
 [overflowedItem="true"]) > #appMenu-fxa-label2:not(#hack),
 .button.connect-device,
 #item-choose button,
-#editBMPanel_newFolderButton {
+#editBMPanel_newFolderButton,
+button.customizationmode-button {
 	padding: 2px 10px !important;
 	text-align: center !important;
 }
@@ -151,7 +153,8 @@ menulist:hover .menulist-label-box,
 .autocomplete-richlistitem[type="loginsFooter"]:hover,
 .dialog-button-box button:hover,
 .searchbar-engine-one-off-item:hover,
-.permission-popup-permission-remove-button:hover {
+.permission-popup-permission-remove-button:hover,
+button.customizationmode-button:hover {
 	outline: 0 !important;
 	background: var(--gnome-button-hover-background) !important;
 }
@@ -188,7 +191,8 @@ menulist[open] .menulist-label-box,
 .dialog-button:active,
 .autocomplete-richlistitem[type="loginsFooter"]:active,
 .dialog-button-box button:active,
-.permission-popup-permission-remove-button:active {
+.permission-popup-permission-remove-button:active,
+button.customizationmode-button: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;
@@ -197,7 +201,8 @@ menulist[open] .menulist-label-box,
 /* Disabled buttons */
 /*#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled],*/
 #appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled],
-#context-navigation menuitem[disabled] {
+#context-navigation menuitem[disabled],
+button.customizationmode-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;

src/other/firefox/Monterey/parts/dialogs.css

@@ -24,30 +24,38 @@ window {
 /* Dialog */
 .dialogBox {
 	border-radius: 12px !important;
-	margin-top: 0 !important;
+	margin: 0 !important;
 }
 
 window[role="dialog"] {
 	background: var(--gnome-toolbar-background) !important;
 	border: 0 !important;
-	box-shadow: var(--gnome-menu-shadow) !important;
 	padding: 0 !important;
 }
+
 dialog {
 	padding: 0 !important;
 }
 
+dialog[subdialog] {
+	border-radius: 12px !important;
+	border: 1px solid var(--gnome-popover-border-color) !important;
+	box-shadow: var(--gnome-popover-shadow) !important;
+}
+
 /* Content */
 .dialog-content-box,
 #dialogGrid {
 	padding: 24px;
 	padding-bottom: 0;
 }
+
 #titleContainer {
 	padding: 6px !important;
 	margin-top: 6px !important;
 	justify-content: center !important;
 }
+
 .titleIcon {
 	background-color: transparent !important;
 }

src/other/firefox/Monterey/parts/headerbar-urlbar.css

@@ -84,6 +84,7 @@ toolbarspring {
 
 #urlbar-input {
 	text-align: center !important;
+	padding: 0 28px 0 0 !important;
 }
 
 /* URL bar results */

src/other/firefox/Monterey/parts/popups.css

@@ -4,7 +4,9 @@
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 /* Style menus */
-menupopup {
+menupopup, panel,
+:is(menupopup, panel)[type="arrow"] {
+	-moz-appearance: none !important;
 	--panel-background: var(--gnome-menu-background) !important;
 	--panel-border-color: var(--gnome-menu-border-color) !important;
 	--arrowpanel-border-radius: 12px !important;
@@ -12,8 +14,8 @@ menupopup {
 	--arrowpanel-border-color: var(--gnome-menu-border-color) !important;
 	--panel-border-radius: 12px !important;
 	--panel-padding: 6px !important;
-	-moz-appearance: none !important;
+	--panel-shadow: var(--gnome-popover-shadow) !important;
-	--panel-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
+	--panel-shadow-margin: 3px 8px 13px !important;
 	color: var(--gnome-toolbar-color) !important;
 }
 
@@ -21,7 +23,9 @@ menupopup label {
 	color: var(--gnome-toolbar-color) !important;
 }
 
-#PlacesToolbar menupopup[placespopup="true"]::part(content), #PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox), #PlacesToolbar menupopup {
+#PlacesToolbar menupopup[placespopup="true"]::part(content),
+#PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox),
+#PlacesToolbar menupopup {
 	background: none !important;
 	padding: 3px 4px 6px !important;
 	margin: -3px 0 0 -12px !important;
@@ -46,16 +50,6 @@ menuitem[disabled="true"]:hover, menupopup menu[disabled="true"]:hover {
 	background: transparent !important;
 }
 
-panel {
-	--panel-background: var(--gnome-menu-background) !important;
-	--panel-border-color: var(--gnome-menu-border-color) !important;
-}
-
-:is(menupopup, panel)[type="arrow"] {
-	--panel-border-radius: 12px !important;
-	--panel-padding: 6px !important;
-}
-
 :is(panel, menupopup)::part(content) {
 	border: none !important;
 }
@@ -78,16 +72,19 @@ panelview {
 }
 
 panelview {
-	padding: 6px !important;
+	padding: var(--panel-padding) !important;
-	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
-	border-radius: 12px !important;
 }
 
-.panel-arrowcontent {
+#customization-panelWrapper > .panel-arrowcontent {
-	background: var(--gnome-popover-background) !important;
+	border: 1px solid var(--gnome-menu-border-color) !important;
-	border: 1px solid var(--gnome-popover-border-color) !important;
+	box-shadow: var(--gnome-popover-shadow) !important;
 	border-radius: 12px !important;
-	color: var(--gnome-toolbar-color) !important;
+	background: var(--gnome-menu-background) !important;
+}
+
+#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+	fill: var(--gnome-menu-background) !important;
+	stroke: var(--gnome-menu-border-color) !important;
 }
 
 #BMB_bookmarksPopup {

src/other/firefox/Monterey/parts/toolbox-alt.css

@@ -7,11 +7,10 @@
 
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
-#nav-bar, #PersonalToolbar, #toolbar-menubar, #TabsToolbar {
+#nav-bar, #PersonalToolbar, #toolbar-menubar, #TabsToolbar, #titlebar {
-	border: 0 !important;
+	border: none !important;
 	color: var(--gnome-toolbar-color);
 	background: var(--gnome-toolbar-background) !important;
-	border-bottom: none !important;
 }
 
 #TabsToolbar {

src/other/firefox/Monterey/parts/video-player.css

@@ -0,0 +1,75 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/** Video player **/
+
+.progressBar::-moz-progress-bar {
+	background-color: #fff !important;
+}
+
+.scrubber:hover::-moz-range-thumb,
+.volumeControl:hover::-moz-range-thumb {
+	background-color: #ccc !important;
+}
+
+.scrubber:active::-moz-range-thumb,
+.volumeControl:active::-moz-range-thumb {
+	background-color: #bbb !important;
+}
+
+.controlBar {
+	border-radius: 5px;
+	margin: auto;
+	margin-bottom: 5px;
+	width: 98.5%;
+	max-width: 800px;
+	height: 30px !important;
+	background-color: rgba(20,20,20,0.8) !important;
+}
+
+.controlBar > .button:enabled:hover {
+	fill: #ccc !important;
+}
+  
+.controlBar > .button:enabled:hover:active {
+	fill: #bbb !important;
+}
+
+.scrubberStack {
+	margin: 0 10px;
+}
+
+.playButton {
+	scale: 0.8;
+}
+  
+
+
+/** Vertical Volume Bar **/
+/* I'm to stupid to get this working. Wasn't able to set proper position relative to mute button */
+
+/* .muteButton:hover ~ .volumeStack{
+	margin-bottom: 129px !important;
+  }
+	.volumeStack:hover {
+	margin-bottom: 129px !important;
+  }
+  
+  .volumeStack {
+	transform: rotate(270deg);
+	max-height: 33px !important;
+	min-width: 100px !important;
+  position:absolute !important;
+  margin-bottom: -150px !important;
+	background-color: rgba(20,20,20,0.8) !important;
+	border-bottom-right-radius: 5px !important;
+	border-top-right-radius: 5px !important;
+	transition-property: margin-bottom;
+	transition-duration: 0.13s;
+	transition-timing-function: linear;
+  }
+  
+  .volumeControl{
+	  width: 92% !important;
+	  margin-left: 5px !important;
+} */

src/other/firefox/Monterey/theme-alt.css

@@ -21,6 +21,8 @@
 
 /* Set theme version text in customization panel */
 #customization-footer::before {
+	background: url(icons/icon.svg) no-repeat;
+	background-size: contain;
 	content: "Firefox Monterey theme";
-	padding: 10px;
+	padding: 10px 10px 10px 50px;
 }

src/other/firefox/Monterey/theme.css

@@ -21,6 +21,8 @@
 
 /* Set theme version text in customization panel */
 #customization-footer::before {
+	background: url(icons/icon.svg) no-repeat;
+	background-size: contain;
 	content: "Firefox Monterey theme";
-	padding: 10px;
+	padding: 10px 10px 10px 50px;
 }

src/other/firefox/WhiteSur/colors/dark.css

@@ -8,7 +8,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
 	/* Browser area before a page starts loading */
-	--gnome-browser-before-load-background: #333333;
+	--gnome-browser-before-load-background: #242424;
 	--theme-primary-color: #315bef;
 
 	/* Toolbars */

src/other/firefox/WhiteSur/icons/icon.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   version="1.1"
+   viewBox="0 0 16.933 16.933"
+   id="svg11"
+   sodipodi:docname="icon.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview13"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="3.6875"
+     inkscape:cx="19.661017"
+     inkscape:cy="32.135593"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <defs
+     id="defs7">
+    <linearGradient
+       id="linearGradient1041"
+       x1="3.2959"
+       x2="13.637"
+       y1="8.4665"
+       y2="8.4665"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#ffd137"
+         offset="0"
+         id="stop2" />
+      <stop
+         stop-color="#e50d71"
+         offset="1"
+         id="stop4" />
+    </linearGradient>
+  </defs>
+  <path
+     class="ColorScheme-Text"
+     d="m11.932 8.8634c-0.01587-1.5875 1.3121-2.3812 1.3708-2.3812-0.74611-1.1112-1.9081-1.27-2.3217-1.27-0.98904-0.15875-1.9304 0.55561-2.432 0.55561-0.50005 0-1.2747-0.55561-2.0955-0.55561-1.0778 0-2.0717 0.63499-2.6272 1.5875-1.1184 1.9843-0.28495 4.8418 0.80564 6.4292 0.53418 0.71436 1.17 1.5875 2.0049 1.5875 0.80406 0 1.1081-0.55561 2.0804-0.55561 0.97235 0 1.2462 0.55561 2.0971 0.55561 0.86517 0 1.4137-0.79374 1.9431-1.5875 0.61196-0.87311 0.86438-1.7462 0.87946-1.8256-0.0192 0-1.6874-0.63499-1.7041-2.54zm-1.5994-4.683c0.44369-0.55561 0.74293-1.3493 0.66118-2.0637-0.63816 0-1.4128 0.39687-1.8709 0.95248-0.41036 0.47624-0.76992 1.27-0.67467 1.9843 0.71356 0.07938 1.4406-0.39687 1.8844-0.87311z"
+     color="#ffffff"
+     fill="url(#linearGradient1041)"
+     stroke-width=".79374"
+     id="path9"
+     style="fill:#999999" />
+</svg>

src/other/firefox/WhiteSur/pages/newtab.css

@@ -0,0 +1,9 @@
+/* about:newtab */
+
+@-moz-document url("about:newtab"), url("about:home") {
+    body {
+        --newtab-background-color: var(--gnome-browser-before-load-background) !important;
+        --newtab-background-color-secondary: var(--gnome-menu-background) !important;
+        --newtab-primary-action-background: var(--gnome-accent) !important;
+    }
+}

src/other/firefox/WhiteSur/pages/privatebrowsing.css

@@ -0,0 +1,16 @@
+/* about:privatebrowsing */
+
+@-moz-document url("about:privatebrowsing") {
+    html.private {
+        --in-content-page-background: var(--gnome-private-in-content-page-background) !important;
+
+        /* Used by headings in promo boxes Firefox shows (like an ad for Firefox Focus) */
+        --in-content-text-color: var(--gnome-private-text-primary-color) !important;
+    }
+    .wordmark {
+        fill: var(--gnome-private-wordmark) !important;
+    }
+    .showPrivate {
+        color: var(--gnome-private-text-primary-color);
+    }
+}

src/other/firefox/WhiteSur/parts/buttons-fixes.css

@@ -229,4 +229,3 @@ button.close.ghost-button:active {
 .close-icon:not(.tab-close-button) .toolbarbutton-icon {
 	outline: 0 !important;
 }
-

src/other/firefox/WhiteSur/parts/buttons.css

@@ -41,7 +41,8 @@ button.close:not(.ghost-button),
 .permission-popup-permission-remove-button,
 .button.connect-device,
 #item-choose button,
-#editBMPanel_newFolderButton {
+#editBMPanel_newFolderButton,
+button.customizationmode-button {
 	-moz-appearance: none !important;
 	background: var(--gnome-button-background) !important;
 	box-shadow: var(--gnome-button-box-shadow) !important;
@@ -89,7 +90,8 @@ menulist,
 [overflowedItem="true"]) > #appMenu-fxa-label2:not(#hack),
 .button.connect-device,
 #item-choose button,
-#editBMPanel_newFolderButton {
+#editBMPanel_newFolderButton,
+button.customizationmode-button {
 	padding: 2px 10px !important;
 	text-align: center !important;
 }
@@ -151,7 +153,8 @@ menulist:hover .menulist-label-box,
 .autocomplete-richlistitem[type="loginsFooter"]:hover,
 .dialog-button-box button:hover,
 .searchbar-engine-one-off-item:hover,
-.permission-popup-permission-remove-button:hover {
+.permission-popup-permission-remove-button:hover,
+button.customizationmode-button:hover {
 	outline: 0 !important;
 	background: var(--gnome-button-hover-background) !important;
 }
@@ -188,7 +191,8 @@ menulist[open] .menulist-label-box,
 .dialog-button:active,
 .autocomplete-richlistitem[type="loginsFooter"]:active,
 .dialog-button-box button:active,
-.permission-popup-permission-remove-button:active {
+.permission-popup-permission-remove-button:active,
+button.customizationmode-button: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;
@@ -197,7 +201,8 @@ menulist[open] .menulist-label-box,
 /* Disabled buttons */
 /*#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled],*/
 #appMenu-popup .toolbaritem-combined-buttons toolbarbutton[disabled],
-#context-navigation menuitem[disabled] {
+#context-navigation menuitem[disabled],
+button.customizationmode-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;
@@ -286,7 +291,7 @@ button.close,
 .search-panel-one-offs .searchbar-engine-one-off-item:not(:last-child) {
 	border-top-right-radius: 0 !important;
 	border-bottom-right-radius: 0 !important;
-	border-right-width: 0 !important;
+	border-right-width: 1px !important;
 	margin-right: 0 !important;
 }
 
@@ -299,6 +304,7 @@ button.close,
 .search-panel-one-offs .searchbar-engine-one-off-item:not(:first-child) {
 	border-top-left-radius: 0 !important;
 	border-bottom-left-radius: 0 !important;
+	border-left-width: 0 !important;
 	margin-left: 0 !important;
 }
 
@@ -339,7 +345,7 @@ button.popup-notification-primary-button.popup-notification-button:active,
 	border-color: var(--gnome-button-destructive-action-border-color) !important;
 	border-bottom-color: var(--gnome-button-destructive-action-border-accent-color) !important;
 	box-shadow: var(--gnome-button-destructive-action-box-shadow) !important;
-	text-shadow: 0 -1px rgba(0, 0, 0, 0.558275) !important;
+	text-shadow: 0 -1px rgba(0, 0, 0, 0.5) !important;
 }
 
 #editBookmarkPanelRemoveButton:hover,

src/other/firefox/WhiteSur/parts/dialogs.css

@@ -24,30 +24,38 @@ window {
 /* Dialog */
 .dialogBox {
 	border-radius: 12px !important;
-	margin-top: 0 !important;
+	margin: 0 !important;
 }
 
 window[role="dialog"] {
 	background: var(--gnome-toolbar-background) !important;
 	border: 0 !important;
-	box-shadow: var(--gnome-menu-shadow) !important;
 	padding: 0 !important;
 }
+
 dialog {
 	padding: 0 !important;
 }
 
+dialog[subdialog] {
+	border-radius: 12px !important;
+	border: 1px solid var(--gnome-popover-border-color) !important;
+	box-shadow: var(--gnome-popover-shadow) !important;
+}
+
 /* Content */
 .dialog-content-box,
 #dialogGrid {
 	padding: 24px;
 	padding-bottom: 0;
 }
+
 #titleContainer {
 	padding: 6px !important;
 	margin-top: 6px !important;
 	justify-content: center !important;
 }
+
 .titleIcon {
 	background-color: transparent !important;
 }

src/other/firefox/WhiteSur/parts/headerbar-urlbar.css

@@ -62,6 +62,7 @@ toolbarspring {
 
 #urlbar-input {
 	text-align: center !important;
+	padding: 0 28px 0 0 !important;
 }
 
 /* URL bar results */

src/other/firefox/WhiteSur/parts/popups.css

@@ -4,7 +4,9 @@
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 /* Style menus */
-menupopup {
+menupopup, panel,
+:is(menupopup, panel)[type="arrow"] {
+	-moz-appearance: none !important;
 	--panel-background: var(--gnome-menu-background) !important;
 	--panel-border-color: var(--gnome-menu-border-color) !important;
 	--arrowpanel-border-radius: 12px !important;
@@ -12,8 +14,8 @@ menupopup {
 	--arrowpanel-border-color: var(--gnome-menu-border-color) !important;
 	--panel-border-radius: 12px !important;
 	--panel-padding: 6px !important;
-	-moz-appearance: none !important;
+	--panel-shadow: var(--gnome-popover-shadow) !important;
-	--panel-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
+	--panel-shadow-margin: 3px 8px 13px !important;
 	color: var(--gnome-toolbar-color) !important;
 }
 
@@ -21,7 +23,9 @@ menupopup label {
 	color: var(--gnome-toolbar-color) !important;
 }
 
-#PlacesToolbar menupopup[placespopup="true"]::part(content), #PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox), #PlacesToolbar menupopup {
+#PlacesToolbar menupopup[placespopup="true"]::part(content),
+#PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox),
+#PlacesToolbar menupopup {
 	background: none !important;
 	padding: 3px 4px 6px !important;
 	margin: -3px 0 0 -12px !important;
@@ -46,16 +50,6 @@ menuitem[disabled="true"]:hover, menupopup menu[disabled="true"]:hover {
 	background: transparent !important;
 }
 
-panel {
-	--panel-background: var(--gnome-menu-background) !important;
-	--panel-border-color: var(--gnome-menu-border-color) !important;
-}
-
-:is(menupopup, panel)[type="arrow"] {
-	--panel-border-radius: 12px !important;
-	--panel-padding: 6px !important;
-}
-
 :is(panel, menupopup)::part(content) {
 	border: none !important;
 }
@@ -78,16 +72,19 @@ panelview {
 }
 
 panelview {
-	padding: 6px !important;
+	padding: var(--panel-padding) !important;
-	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
-	border-radius: 12px !important;
 }
 
-.panel-arrowcontent {
+#customization-panelWrapper > .panel-arrowcontent {
-	background: var(--gnome-popover-background) !important;
+	border: 1px solid var(--gnome-menu-border-color) !important;
-	border: 1px solid var(--gnome-popover-border-color) !important;
+	box-shadow: var(--gnome-popover-shadow) !important;
 	border-radius: 12px !important;
-	color: var(--gnome-toolbar-color) !important;
+	background: var(--gnome-menu-background) !important;
+}
+
+#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+	fill: var(--gnome-menu-background) !important;
+	stroke: var(--gnome-menu-border-color) !important;
 }
 
 #BMB_bookmarksPopup {

src/other/firefox/WhiteSur/parts/video-player.css

@@ -0,0 +1,75 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/** Video player **/
+
+.progressBar::-moz-progress-bar {
+	background-color: #fff !important;
+}
+
+.scrubber:hover::-moz-range-thumb,
+.volumeControl:hover::-moz-range-thumb {
+	background-color: #ccc !important;
+}
+
+.scrubber:active::-moz-range-thumb,
+.volumeControl:active::-moz-range-thumb {
+	background-color: #bbb !important;
+}
+
+.controlBar {
+	border-radius: 5px;
+	margin: auto;
+	margin-bottom: 5px;
+	width: 98.5%;
+	max-width: 800px;
+	height: 30px !important;
+	background-color: rgba(20,20,20,0.8) !important;
+}
+
+.controlBar > .button:enabled:hover {
+	fill: #ccc !important;
+}
+  
+.controlBar > .button:enabled:hover:active {
+	fill: #bbb !important;
+}
+
+.scrubberStack {
+	margin: 0 10px;
+}
+
+.playButton {
+	scale: 0.8;
+}
+  
+
+
+/** Vertical Volume Bar **/
+/* I'm to stupid to get this working. Wasn't able to set proper position relative to mute button */
+
+/* .muteButton:hover ~ .volumeStack{
+	margin-bottom: 129px !important;
+  }
+	.volumeStack:hover {
+	margin-bottom: 129px !important;
+  }
+  
+  .volumeStack {
+	transform: rotate(270deg);
+	max-height: 33px !important;
+	min-width: 100px !important;
+  position:absolute !important;
+  margin-bottom: -150px !important;
+	background-color: rgba(20,20,20,0.8) !important;
+	border-bottom-right-radius: 5px !important;
+	border-top-right-radius: 5px !important;
+	transition-property: margin-bottom;
+	transition-duration: 0.13s;
+	transition-timing-function: linear;
+  }
+  
+  .volumeControl{
+	  width: 92% !important;
+	  margin-left: 5px !important;
+} */

src/other/firefox/WhiteSur/theme.css

@@ -13,12 +13,15 @@
 @import "parts/remove-white-flash.css";
 @import "parts/custom-icons.css";
 @import "parts/icons.css";
+@import "parts/video-player.css";
 @import "colors/light.css";
 @import "colors/dark.css";
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 /* Set theme version text in customization panel */
 #customization-footer::before {
+	background: url(icons/icon.svg) no-repeat;
+	background-size: contain;
 	content: "Firefox WhiteSur theme";
-	padding: 10px;
+	padding: 10px 10px 10px 50px;
 }

src/other/firefox/userContent-Monterey.css

@@ -0,0 +1,5 @@
+@import "Monterey/colors/light.css";
+@import "Monterey/colors/dark.css";
+
+@import "Monterey/pages/newtab.css";
+@import "Monterey/pages/privatebrowsing.css";

src/other/firefox/userContent-WhiteSur.css

@@ -0,0 +1,5 @@
+@import "WhiteSur/colors/light.css";
+@import "WhiteSur/colors/dark.css";
+
+@import "WhiteSur/pages/newtab.css";
+@import "WhiteSur/pages/privatebrowsing.css";