Proton: Theme new dialogs

move dialogs theming to a new file

theme/gnome-theme.css

@@ -7,6 +7,7 @@
 @import "parts/findbar.css";
 @import "parts/sidebar.css";
 @import "parts/popups.css";
+@import "parts/dialogs.css";
 @import "parts/remove-white-flash.css";
 @import "parts/icons.css";
 @import "colors/light.css";

theme/parts/buttons.css

@@ -39,7 +39,7 @@ button.close,
 .tracking-protection-button,
 .dialog-button,
 .autocomplete-richlistitem[type="loginsFooter"],
-tabmodalprompt[role="dialog"] button[class*='tabmodalprompt-button'],
+.dialog-button-box button,
 .searchbar-engine-one-off-item {
 	-moz-appearance: none !important;
 	background: var(--gnome-button-background) !important;
@@ -86,7 +86,7 @@ tabmodalprompt[role="dialog"] button[class*='tabmodalprompt-button'],
 .tracking-protection-button,
 .dialog-button,
 .autocomplete-richlistitem[type="loginsFooter"],
-tabmodalprompt[role="dialog"] button[class*='tabmodalprompt-button'],
+.dialog-button-box button,
 #appMenu-popup #appMenu-fxa-label2:not(#hack) {
 	padding: 2px 16px !important;
 	text-align: center !important;
@@ -147,7 +147,7 @@ menulist:hover .menulist-label-box,
 .tracking-protection-button:hover,
 .dialog-button:hover,
 .autocomplete-richlistitem[type="loginsFooter"]:hover,
-tabmodalprompt[role="dialog"] button[class*='tabmodalprompt-button']:hover,
+.dialog-button-box button:hover,
 .searchbar-engine-one-off-item:hover {
 	outline: 0 !important;
 	background: var(--gnome-button-hover-background) !important;
@@ -185,7 +185,7 @@ menulist[open] .menulist-label-box,
 .tracking-protection-button:active,
 .dialog-button:active,
 .autocomplete-richlistitem[type="loginsFooter"]:active,
-tabmodalprompt[role="dialog"] button[class*='tabmodalprompt-button']:active {
+.dialog-button-box 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;

theme/parts/dialogs.css

@@ -0,0 +1,59 @@
+/* Dialogs */
+
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/* Browser dialog prompts center */
+.content-prompt {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Dialog */
+#commonDialogWindow {
+	background: var(--gnome-popover-background) !important;
+	border: 0 !important;
+	border-radius: 9px !important;
+	box-shadow: var(--gnome-popover-shadow) !important;
+	padding-top: 0 !important;
+}
+dialog#commonDialog {
+	padding: 0 !important;
+}
+
+/* Content */
+.dialog-content-box {
+	padding: 24px;
+}
+#titleContainer {
+	justify-content: center !important;
+}
+
+/* Buttons */
+.dialog-button-box {
+	display: flex !important;
+}
+
+.dialog-button-box button:not(#hack) {
+	height: auto !important;
+	max-height: unset !important;
+  padding: 10px 14px !important;
+	margin: 0 !important;
+	border-radius: 0 !important;
+	flex: 1;
+	border-bottom: 0 !important;
+}
+
+/* Buttons border-radius - only suppor for cancel/ok */
+.dialog-button-box button[dlgtype="accept"] {
+	border-radius: 0 0 9px 9px !important;
+	border-right: 0 !important;
+	border-left: 0 !important;
+}
+.dialog-button-box button[dlgtype="cancel"]:not([hidden]) ~ button.tabmodalprompt-button0:not(#hack) {
+	border-radius: 0 0 9px 0 !important;
+}
+.dialog-button-box button[dlgtype="cancel"]:not(#hack) {
+	border-left: 0 !important;
+	border-radius: 0 0 0 9px !important;
+}

theme/parts/entries.css

@@ -6,7 +6,9 @@
 #urlbar,
 #searchbar,
 #search-box,
-.findbar-textbox {
+.findbar-textbox,
+#loginTextbox,
+#password1Textbox {
 	-moz-appearance: none !important;
 	background: var(--gnome-entry-background) !important;
 	border: 1px solid var(--gnome-entry-border-color) !important;
@@ -25,7 +27,9 @@
 #searchbar:focus-within,
 #search-box[focused], 
 .findbar-textbox[focused],
-.findbar-textbox:focus {
+.findbar-textbox:focus,
+#loginTextbox:focus,
+#password1Textbox:focus {
 	outline: 2px solid var(--gnome-focused-urlbar-border-color) !important;
 	outline-offset: -2px;
 	-moz-outline-radius: 5px;
@@ -44,7 +48,9 @@
 #urlbar:-moz-window-inactive,
 #searchbar:-moz-window-inactive,
 #search-box:-moz-window-inactive,
-.findbar-textbox:-moz-window-inactive {
+.findbar-textbox:-moz-window-inactive,
+#loginTextbox:-moz-window-inactive,
+#password1Textbox:-moz-window-inactive {
 	background: var(--gnome-inactive-entry-background) !important;
 	border-color: var(--gnome-inactive-entry-border-color) !important;
 	box-shadow: var(--gnome-inactive-entry-box-shadow) !important;

theme/parts/popups-contents.css

@@ -2,6 +2,15 @@
 
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
+/* Main menu fxa */
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label {
+	padding-left: 22px !important;
+	margin-inline-start: -22px !important;
+}
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar {
+	margin-inline-start: 5px !important;
+}
+
 /* Style main context menu & buttons */
 #context-navigation {
 	padding: 4px 8px 8px;

theme/parts/popups.css

@@ -172,62 +172,3 @@ panel[type="autocomplete-richlistbox"] {
 	fill: #fff !important;
 }
 
-/* TODO: Move to a new file */
-
-/* Browser dialog prompts center */
-.content-prompt {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Browser dialog prompts */
-tabmodalprompt[role="dialog"] .tabmodalprompt-mainContainer {
-	background: var(--gnome-popover-background) !important;
-	border: 0 !important;
-	border-radius: 9px !important;
-	box-shadow: var(--gnome-popover-shadow) !important;
-	padding-top: 0 !important;
-}
-tabmodalprompt[role="dialog"] .tabmodalprompt-buttonContainer {
-	background: transparent !important;
-	border: 0 !important;
-	padding: 0 !important;
-	display: flex !important;
-}
-tabmodalprompt[role="dialog"] .tabmodalprompt-buttonSpacer {
-	display: none !important;
-}
-
-tabmodalprompt[role="dialog"] button[class*='tabmodalprompt-button']:not(#hack) {
-	height: auto !important;
-	max-height: unset !important;
-  padding: 10px 14px !important;
-	margin: 0 !important;
-	border-radius: 0 !important;
-	flex: 1;
-	border-bottom: 0 !important;
-}
-
-/* Buttons border-radius - only suppor for cancel/ok */
-tabmodalprompt[role="dialog"] button.tabmodalprompt-button0:not(#hack) {
-	border-radius: 0 0 9px 9px !important;
-	border-right: 0 !important;
-	border-left: 0 !important;
-}
-tabmodalprompt[role="dialog"] button.tabmodalprompt-button1:not([hidden]) ~ button.tabmodalprompt-button0:not(#hack) {
-	border-radius: 0 0 9px 0 !important;
-}
-tabmodalprompt[role="dialog"] button.tabmodalprompt-button1:not(#hack) {
-	border-left: 0 !important;
-	border-radius: 0 0 0 9px !important;
-}
-
-/* Main menu fxa */
-#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label {
-	padding-left: 22px !important;
-	margin-inline-start: -22px !important;
-}
-#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar {
-	margin-inline-start: 5px !important;
-}