From 23ec5ed77260f9e6014dfb14eb62e7add1beb2da Mon Sep 17 00:00:00 2001 From: Rafael Mardojai CM Date: Mon, 10 May 2021 09:20:11 -0500 Subject: [PATCH] Proton: Theme new dialogs move dialogs theming to a new file --- theme/gnome-theme.css | 1 + theme/parts/buttons.css | 8 ++--- theme/parts/dialogs.css | 59 +++++++++++++++++++++++++++++++++ theme/parts/entries.css | 12 +++++-- theme/parts/popups-contents.css | 9 +++++ theme/parts/popups.css | 59 --------------------------------- 6 files changed, 82 insertions(+), 66 deletions(-) create mode 100644 theme/parts/dialogs.css diff --git a/theme/gnome-theme.css b/theme/gnome-theme.css index b6ee76a..06c71bf 100644 --- a/theme/gnome-theme.css +++ b/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"; diff --git a/theme/parts/buttons.css b/theme/parts/buttons.css index 2ed5501..a4fa5d8 100644 --- a/theme/parts/buttons.css +++ b/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; diff --git a/theme/parts/dialogs.css b/theme/parts/dialogs.css new file mode 100644 index 0000000..e0c07b6 --- /dev/null +++ b/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; +} diff --git a/theme/parts/entries.css b/theme/parts/entries.css index 2808677..6468c14 100644 --- a/theme/parts/entries.css +++ b/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; diff --git a/theme/parts/popups-contents.css b/theme/parts/popups-contents.css index 152865f..853799d 100644 --- a/theme/parts/popups-contents.css +++ b/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; diff --git a/theme/parts/popups.css b/theme/parts/popups.css index 2164508..47500b2 100644 --- a/theme/parts/popups.css +++ b/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; -}