From c51827c0ea3097e7e382bb1a57f7a6529a6811f5 Mon Sep 17 00:00:00 2001 From: Rafael Mardojai CM Date: Thu, 6 Jun 2019 17:56:56 -0500 Subject: [PATCH] Popovers theming improvements and downloads support --- theme/parts/popups-contents.css | 127 ++++++++++++++++++++++++++++++++ theme/parts/popups.css | 106 ++++++++------------------ 2 files changed, 159 insertions(+), 74 deletions(-) create mode 100755 theme/parts/popups-contents.css diff --git a/theme/parts/popups-contents.css b/theme/parts/popups-contents.css new file mode 100755 index 0000000..24779b6 --- /dev/null +++ b/theme/parts/popups-contents.css @@ -0,0 +1,127 @@ +/* Popups contents syles */ + +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/* Main menu's zoom controls colors */ +#appMenu-zoomReset-button { + background: var(--gnome-urlbar-bgimage) !important; + border: 1px solid var(--gnome-urlbar-border-color) !important; + border-radius: 5px !important; + box-shadow: var(--gnome-urlbar-box-shadow) !important; + color: var(--gnome-urlbar-color) !important; +} + +/* Main menu remove items icons */ +panelview vbox.panel-subview-body > toolbarbutton image { + display: none; +} +panelview vbox.panel-subview-body > toolbarbutton label { + padding-inline-start: 0 !important; +} +#appMenu-zoom-controls > spacer, +#appMenu-edit-controls > spacer { + width: 12px !important; +} + +/* User sync account remove avatar */ +#fxa-menu-avatar { + display: none; +} + +/* Add search engine button remove icon */ +#pageAction-panel-addSearchEngine .toolbarbutton-badge-stack { + display: none !important; +} + +/* Bookmark add/edit */ +.editBookmarkPanelBottomButton { + border: 1px solid !important; + color: white !important; + margin: 6px 0 !important; + padding: 2px 16px !important; + width: 34px; + height: 34px; +} +#editBookmarkPanelRemoveButton { + background-image: var(--gnome-headerbar-button-destructive-action-bgimage); + border-radius: 3px 0 0 3px; + border-color: var(--gnome-headerbar-button-destructive-action-border-color) !important; + border-bottom-color: var(--gnome-headerbar-button-destructive-action-border-bottom-color) !important; + box-shadow: var(--gnome-headerbar-button-destructive-action-box-shadow); + text-shadow: 0 -1px rgba(0, 0, 0, 0.560784); +} +#editBookmarkPanelRemoveButton:hover { + background-image: var(--gnome-headerbar-button-destructive-action-hover-bgimage); +} +#editBookmarkPanelDoneButton { + background-image: var(--gnome-headerbar-button-suggested-action-bgimage); + border-left: 0 !important; + border-radius: 0 3px 3px 0; + border-color: var(--gnome-headerbar-button-suggested-action-border-color) !important; + border-bottom-color: var(--gnome-headerbar-button-suggested-action-border-bottom-color) !important; + box-shadow: var(--gnome-headerbar-button-suggested-action-box-shadow); + text-shadow: 0 -1px rgba(0, 0, 0, 0.543529); +} +#editBookmarkPanelDoneButton:hover { + background-image: var(--gnome-headerbar-button-suggested-action-hover-bgimage); +} + +/* Downloads popover */ +#downloadsPanel-mainView { + background: transparent !important; +} + +#downloadsPanel-mainView .download-state { + padding: 8px !important; + border: 0 !important; + border-radius: 5px !important; + display: flex; + align-items: center; +} +#downloadsPanel-mainView .download-state:hover { + background-color: var(--gnome-popup-button-hover-bgcolor) !important; +} +#downloadsPanel-mainView .download-state:last-child { + margin-bottom: 8px !important; +} + +#downloadsPanel-mainView .downloadMainArea { + flex: 1; + display: flex; +} +#downloadsPanel-mainView .downloadMainArea:hover { + background: transparent !important; +} + +#downloadsPanel-mainView .downloadTypeIcon { + margin: 0 !important; + margin-right: 6px !important; +} + +#downloadsPanel-mainView .downloadContainer { + margin-inline-end: 0 !important; + flex: 1; + display: flex; + flex-direction: column; +} + +#downloadsPanel-mainView .download-state .downloadButton { + -moz-appearance: none !important; + background-image: var(--gnome-headerbar-button-bgimage) !important; + box-shadow: var(--gnome-headerbar-button-box-shadow) !important; + border: 1px solid var(--gnome-headerbar-button-border-color) !important; + border-bottom-color: var(--gnome-headerbar-button-border-accent-color) !important; + border-radius: 100%; + min-width: 34px !important; + width: 34px !important; + height: 34px !important; + margin: auto; +} + +#downloadsPanel-mainView .download-state .downloadButton .button-box { + padding: 0 !important; + margin: 0 !important; +} +#downloadsPanel-mainView .download-state toolbarseparator { + display: none; +} diff --git a/theme/parts/popups.css b/theme/parts/popups.css index 1fde1a9..931652c 100755 --- a/theme/parts/popups.css +++ b/theme/parts/popups.css @@ -1,5 +1,6 @@ /* Popup menus and context menus */ +@import "popups-contents.css"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; /* Adjust popup position */ @@ -60,6 +61,15 @@ menupopup .popup-internal-box { border-radius: 0 5px 5px 0; } +/* Remove icons from the main context menu */ +#contentAreaContextMenu menuitem image, +#contentAreaContextMenu menu image { + visibility: hidden; +} +#contentAreaContextMenu menugroup menuitem image { + visibility: visible; +} + /* Style popups */ .panel-arrowcontent, .panel-header, .PanelUI-subView, .panel-subview-body, #widget-overflow-mainView { background: var(--gnome-popup-bgcolor) !important; @@ -80,7 +90,10 @@ menupopup .popup-internal-box { /* Style popups menu buttons */ .subviewbutton, .toolbarbutton-1 { border-radius: 3px !important; - +} + +.subviewbutton::after { + opacity: 0.7 !important; } .subviewbutton:hover, .toolbarbutton-1:hover { background-color: var(--gnome-popup-button-hover-bgcolor) !important; @@ -96,80 +109,30 @@ toolbarseparator, menuseparator { /* Style popups menu footer buttons */ .subviewbutton.panel-subview-footer, -.downloadsPanelFooter { - background-image: var(--gnome-headerbar-button-bgimage); - box-shadow: var(--gnome-headerbar-button-box-shadow); - border: 1px solid var(--gnome-headerbar-button-border-color); - border-bottom-color: var(--gnome-headerbar-button-border-accent-color); - border-radius: 3px; - margin: 6px 3px !important; +#downloadsHistory, +#overflowMenu-customize-button { + -moz-appearance: none !important; + background: var(--gnome-headerbar-button-bgimage) !important; + box-shadow: var(--gnome-headerbar-button-box-shadow) !important; + border: 1px solid var(--gnome-headerbar-button-border-color) !important; + border-bottom-color: var(--gnome-headerbar-button-border-accent-color) !important; + border-radius: 5px !important; padding: 2px 16px !important; - width: 34px; - height: 34px; + height: 34px !important; + min-height: 34px !important; } .subviewbutton.panel-subview-footer:hover, -.downloadsPanelFooter:hover { - background-image: var(--gnome-headerbar-button-hover-bgimage) !important; +#downloadsHistory:hover, +#overflowMenu-customize-button:hover { + outline: 0 !important; + background: var(--gnome-headerbar-button-hover-bgimage) !important; } -/* Burger menu's zoom controls colors */ -#appMenu-zoomReset-button { - background-color: var(--arrowpanel-background) !important; - border-color: var(--panel-separator-color) !important; -} - -/* Remove icons from the burger menu */ -panelview vbox.panel-subview-body > toolbarbutton image { - display: none; -} -panelview vbox.panel-subview-body > toolbarbutton label { - padding-inline-start: 0 !important; -} -#appMenu-zoom-controls > spacer, -#appMenu-edit-controls > spacer { - width: 12px !important; -} - -/* Remove icons from the context menu */ -#contentAreaContextMenu menuitem image, -#contentAreaContextMenu menu image { - visibility: hidden; -} -#contentAreaContextMenu menugroup menuitem image { - visibility: visible; -} - -/* Edit bookmark panel */ -.editBookmarkPanelBottomButton { - color: white !important; - margin: 6px 0 !important; - padding: 2px 16px !important; - width: 34px; - height: 34px; -} -#editBookmarkPanelRemoveButton { - background-image: var(--gnome-headerbar-button-destructive-action-bgimage); - border-radius: 3px 0 0 3px; - border-color: var(--gnome-headerbar-button-destructive-action-border-color) !important; - border-bottom-color: var(--gnome-headerbar-button-destructive-action-border-bottom-color) !important; - box-shadow: var(--gnome-headerbar-button-destructive-action-box-shadow); - text-shadow: 0 -1px rgba(0, 0, 0, 0.560784); -} -#editBookmarkPanelRemoveButton:hover { - background-image: var(--gnome-headerbar-button-destructive-action-hover-bgimage); -} -#editBookmarkPanelDoneButton { - background-image: var(--gnome-headerbar-button-suggested-action-bgimage); - border-left: 0 !important; - border-radius: 0 3px 3px 0; - border-color: var(--gnome-headerbar-button-suggested-action-border-color) !important; - border-bottom-color: var(--gnome-headerbar-button-suggested-action-border-bottom-color) !important; - box-shadow: var(--gnome-headerbar-button-suggested-action-box-shadow); - text-shadow: 0 -1px rgba(0, 0, 0, 0.543529); -} -#editBookmarkPanelDoneButton:hover { - background-image: var(--gnome-headerbar-button-suggested-action-hover-bgimage); +.panel-footer { + background-color: transparent !important; + display: flex; + justify-content: flex-end; } /* Customization overflow menu position */ @@ -193,9 +156,4 @@ panelview vbox.panel-subview-body > toolbarbutton label { } #confirmation-hint-message { color: white !important; -} - -/* User sync account menu */ -#fxa-menu-avatar { - display: none; } \ No newline at end of file