commit 44da652cf227b5cde6a76f66b423e0c0748588bc
parent 89b2caa4f947f383f25609cf33ea18c48403da7c
Author: Lootyhoof <lootyhoofer@gmail.com>
Date: Sun, 9 Oct 2016 15:59:07 +0100
Add statusbar styling
Diffstat:
10 files changed, 510 insertions(+), 0 deletions(-)
diff --git a/src/chrome/browser/statusbar/dynamic.css b/src/chrome/browser/statusbar/dynamic.css
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Progress bar/line styles */
+
+#urlbar[s4estyle="true"] > #urlbar-progress-alt > .progress-bar
+{
+ -moz-appearance: none;
+ background: #33FF33;
+}
+
+#status4evar-progress-bar[s4estyle="true"] > .progress-bar
+{
+ -moz-appearance: none;
+ background: #33FF33;
+ border-radius: 3px;
+}
+
+.urlbar-over-link-box
+{
+ color: GrayText;
+}
+
+#status4evar-download-progress-bar[pmType^="active"] > .progress-bar
+{
+ background-color: #33FF33;
+}
+
+#status4evar-download-progress-bar[pmType^="paused"] > .progress-bar
+{
+ background-color: gray;
+}
+
diff --git a/src/chrome/browser/statusbar/overlay.css b/src/chrome/browser/statusbar/overlay.css
@@ -0,0 +1,423 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/*
+ * General styles
+ */
+
+#status4evar-status-widget,
+#status4evar-progress-widget
+{
+ -moz-box-align: center;
+}
+
+[forcevisible="true"]
+{
+ visibility: visible !important;
+}
+
+#wrapper-status4evar-progress-widget progressmeter,
+#wrapper-status4evar-download-button toolbarbutton
+{
+ visibility: visible;
+}
+
+#wrapper-status4evar-status-widget toolbaritem label
+{
+ background-color: rgba(0,0,0,0.2);
+ padding: 2px 4px;
+}
+
+/*
+ * Options button
+ */
+
+#status4evar-options-button
+{
+ list-style-image: url("chrome://browser/skin/statusbar/pms24.png");
+}
+
+toolbar[iconsize="small"] #status4evar-options-button
+{
+ list-style-image: url("chrome://browser/skin/statusbar/pms16.png");
+}
+
+/*
+ * Download status
+ */
+
+toolbar[mode="icons"] #status4evar-download-button[forcelabel="true"],
+toolbar[mode="text"] #status4evar-download-button
+{
+ -moz-box-orient: horizontal !important;
+}
+
+toolbar[mode="icons"] #status4evar-download-button[forcelabel="true"] > label
+{
+ display: -moz-box !important;
+}
+
+#status4evar-download-progress-bar
+{
+ border: 1px solid gray;
+ -moz-appearance: none;
+ margin: 0px;
+ min-height: 0px;
+ min-width: 0px;
+}
+
+#status4evar-download-progress-bar > *
+{
+ -moz-appearance: none;
+ background: #FFFFFF;
+}
+
+#status4evar-download-progress-bar[pmType$="unknown"] > .progress-bar
+{
+ background-image: url("chrome://browser/skin/statusbar/pulse.png");
+}
+
+#status4evar-download-notification-container
+{
+ min-height: 1px;
+ min-width: 1px;
+ height: 1px;
+ margin-bottom: -1px;
+ position: relative;
+ z-index: 5;
+}
+
+#status4evar-download-notification-icon
+{
+ opacity: 0;
+ background-size: 16px;
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+}
+
+#status4evar-download-button #status4evar-download-icon
+{
+ background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 108, 18, 90) center no-repeat;
+}
+
+#status4evar-download-button:-moz-lwtheme-brighttext #status4evar-download-icon
+{
+ background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 108, 18, 90) center no-repeat;
+}
+
+#status4evar-download-button[attention] #status4evar-download-icon
+{
+ background-image: url("chrome://browser/skin/downloads/download-glow.png");
+}
+
+@keyframes status4evar-download-notification-finish
+{
+ from { opacity: 0; transform: scale(1); }
+ 20% { opacity: .65; animation-timing-function: ease-in; }
+ to { opacity: 0; transform: scale(8); }
+}
+
+#status4evar-download-notification-anchor[notification="finish"][forcevisible="true"] #status4evar-download-notification-icon
+{
+ background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
+ animation-name: status4evar-download-notification-finish;
+ animation-duration: 1s;
+}
+
+/*
+ * Splitter
+ */
+
+splitter.status4evar-status-splitter
+{
+ -moz-appearance: splitter;
+ border: none;
+ background: transparent;
+ position: relative;
+}
+
+splitter.status4evar-status-splitter:not(:hover)
+{
+ -moz-appearance: none;
+}
+
+/*
+ * Location bar progress
+ */
+
+#urlbar-progress-alt
+{
+ margin: 0px;
+ -moz-appearance: none;
+ min-height: 0px;
+ height: 3px;
+ border: none;
+ background-color: transparent;
+}
+
+#urlbar[pmpack="center"] #urlbar-progress-alt
+{
+ -moz-box-flex: 1;
+}
+
+#urlbar:not([pmpack="center"]) #urlbar-progress-alt > *
+{
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+#urlbar-container:not([combined]) #urlbar:not([pmpack="begin"]) #urlbar-progress-alt,
+#urlbar-container:not([combined]) #urlbar:not([pmpack="begin"]) #urlbar-progress-alt > *
+{
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+#urlbar-container:not([combined]) #urlbar:not([pmpack="end"]) #urlbar-progress-alt,
+#urlbar-container:not([combined]) #urlbar:not([pmpack="end"]) #urlbar-progress-alt > *
+{
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+/*
+ * General progress
+ */
+
+#urlbar-progress-alt > *,
+#status4evar-progress-bar[s4estyle="true"] > *
+{
+ border: none;
+}
+
+#urlbar-progress-alt > .progress-remainder,
+#status4evar-progress-bar > .progress-remainder
+{
+ background-image: none;
+ background-color: transparent;
+}
+
+#urlbar[s4estyle="true"] > #urlbar-progress-alt > .progress-bar,
+#status4evar-progress-bar[s4estyle="true"] > .progress-bar
+{
+ border-right: 1px solid rgba(0,0,0,.2);
+}
+
+#urlbar[s4estyle="true"] > #urlbar-progress-alt[value="0"] > .progress-bar,
+#urlbar[s4estyle="true"] > #urlbar-progress-alt[value="100"] > .progress-bar,
+#status4evar-progress-bar[s4estyle="true"][value="0"] > .progress-bar,
+#status4evar-progress-bar[s4estyle="true"][value="100"] > .progress-bar
+{
+ border-right: none;
+}
+
+/*
+ * Location bar status transisions
+ */
+
+#urlbar .urlbar-over-link-layer
+{
+ opacity: 0;
+}
+
+#urlbar .urlbar-input-layer[overlinkstate="fade-in"],
+#urlbar .urlbar-input-layer[overlinkstate="fade-in"] html|input.urlbar-input::-moz-placeholder
+{
+ -moz-transition-property: color;
+ -moz-transition-duration: 150ms;
+ color: transparent;
+}
+
+#urlbar .urlbar-input-layer[overlinkstate="fade-out"],
+#urlbar .urlbar-input-layer[overlinkstate="fade-out"] html|input.urlbar-input::-moz-placeholder
+{
+ -moz-transition-property: color;
+ -moz-transition-duration: 150ms;
+ -moz-transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 1.0);
+}
+
+#urlbar .urlbar-input-layer[overlinkstate="showing"],
+#urlbar .urlbar-input-layer[overlinkstate="showing"] html|input.urlbar-input::-moz-placeholder
+{
+ color: transparent;
+}
+
+#urlbar .urlbar-over-link-layer[overlinkstate="fade-in"]
+{
+ -moz-transition-property: opacity;
+ -moz-transition-duration: 150ms;
+ opacity: 1;
+}
+
+#urlbar .urlbar-over-link-layer[overlinkstate="fade-out"]
+{
+ -moz-transition-property: opacity;
+ -moz-transition-duration: 150ms;
+ -moz-transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 1.0);
+}
+
+#urlbar .urlbar-over-link-layer[overlinkstate="showing"]
+{
+ opacity: 1;
+}
+
+#urlbar .urlbar-input-layer-children[overlinkstate="fade-in"]
+{
+ -moz-transition-property: opacity;
+ -moz-transition-duration: 150ms;
+ opacity: 0;
+}
+
+#urlbar .urlbar-input-layer-children[overlinkstate="fade-out"]
+{
+ -moz-transition-property: opacity;
+ -moz-transition-duration: 150ms;
+ -moz-transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 1.0);
+}
+
+#urlbar .urlbar-input-layer-children[overlinkstate="showing"]
+{
+ opacity: 0;
+}
+
+/*
+ * Location bar status layout
+ */
+
+#urlbar[s4esalign="left"] .urlbar-origin-box
+{
+ display: none;
+}
+
+#urlbar .urlbar-origin-label
+{
+ -moz-padding-start: 1px;
+}
+
+#urlbar .urlbar-origin-label,
+#urlbar .urlbar-over-link-host-label,
+#urlbar .urlbar-over-link-path-label
+{
+ padding: 0;
+ margin: 0;
+ border: none;
+}
+
+#urlbar .urlbar-over-link-box:-moz-locale-dir(ltr)
+{
+ -moz-padding-start: 18px;
+ -moz-padding-end: 2px;
+}
+
+#urlbar .urlbar-over-link-box:-moz-locale-dir(rtl)
+{
+ -moz-padding-end: 18px;
+ -moz-padding-start: 2px;
+}
+
+#urlbar[s4esalign="left"] .urlbar-over-link-box:-moz-locale-dir(ltr)
+{
+ -moz-padding-start: 1px;
+}
+
+#urlbar[s4esalign="left"] .urlbar-over-link-box:-moz-locale-dir(rtl)
+{
+ -moz-padding-end: 1px;
+}
+
+#urlbar:not([s4esalign="left"]) .urlbar-over-link-box:-moz-locale-dir(ltr)
+{
+ background: url(chrome://browser/skin/statusbar/urlbar-over-link-arrow.png) no-repeat left center;
+}
+
+#urlbar:not([s4esalign="left"]) .urlbar-over-link-box:-moz-locale-dir(rtl)
+{
+ background: url(chrome://browser/skin/statusbar/urlbar-over-link-arrow-rtl.png) no-repeat right center;
+}
+
+/*
+ * Status bar
+ */
+
+#status-bar > .statusbar-resizerpanel
+{
+ display: none !important;
+}
+
+
+/*
+ * General
+ */
+
+#status4evar-status-text,
+#status4evar-progress-bar
+{
+ margin: 0px 3px;
+}
+
+/*
+ * Download status
+ */
+
+#status4evar-download-progress-bar
+{
+ height: 4px;
+}
+
+#status4evar-download-button #status4evar-download-icon
+{
+ min-width: 18px;
+ min-height: 18px;
+}
+
+toolbar[mode="icons"] #status4evar-download-button[forcelabel="true"] > label
+{
+ -moz-margin-start: 5px !important;
+}
+
+/*
+ * Splitter
+ */
+
+splitter.status4evar-status-splitter
+{
+ width: 6px;
+ margin: 0px -3px;
+}
+
+/*
+ * Location bar
+ */
+
+#urlbar-progress-alt
+{
+ -moz-margin-end: -2px;
+}
+
+/*
+ * Status bar
+ */
+
+#browser-bottombox[s4eboarder="true"] :-moz-any(#status4evar-status-bar, #addon-bar)
+{
+ -moz-appearance: none;
+}
+
+#browser-bottombox[s4eboarder="true"] > *:not([hidden="true"]):not([collapsed="true"])
+{
+ box-shadow: none !important;
+ border: none !important;
+ border-top: 2px solid !important;
+ -moz-border-top-colors: ThreeDShadow ThreeDHighlight !important;
+}
+
+#browser-bottombox[s4eboarder="true"] > *:not([hidden="true"]):not([collapsed="true"]) ~ *
+{
+ border: none !important;
+}
diff --git a/src/chrome/browser/statusbar/pms16.png b/src/chrome/browser/statusbar/pms16.png
Binary files differ.
diff --git a/src/chrome/browser/statusbar/pms24.png b/src/chrome/browser/statusbar/pms24.png
Binary files differ.
diff --git a/src/chrome/browser/statusbar/prefs.css b/src/chrome/browser/statusbar/prefs.css
@@ -0,0 +1,51 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+#status4evar-prefs > prefpane > vbox.content-box
+{
+ min-height: 18em !important;
+}
+
+radio[pane="status4evar-pane-status"]
+{
+ list-style-image: url("chrome://global/skin/icons/information-32.png");
+}
+
+radio[pane="status4evar-pane-progress"]
+{
+ list-style-image: url("chrome://browser/skin/statusbar/throbberStatic.png");
+}
+
+radio[pane="status4evar-pane-download"]
+{
+ list-style-image: url("chrome://mozapps/skin/downloads/downloadIcon.png");
+}
+
+radio[pane="status4evar-pane-addonbar"]
+{
+ list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
+}
+
+radio[pane="status4evar-pane-advanced"]
+{
+ list-style-image: url("chrome://browser/skin/preferences/Options.png");
+ -moz-image-region: rect(0px, 224px, 32px, 192px);
+}
+
+#status4evar-advanced-urlbar-forceBinding-desc
+{
+ -moz-appearance: none;
+ pointer-events: none;
+ background-color: transparent;
+ border: none;
+ padding: 0px;
+}
+
+#warningInnerBox
+{
+ max-width: 25em;
+}
+
diff --git a/src/chrome/browser/statusbar/pulse.png b/src/chrome/browser/statusbar/pulse.png
Binary files differ.
diff --git a/src/chrome/browser/statusbar/throbber-idle.png b/src/chrome/browser/statusbar/throbber-idle.png
Binary files differ.
diff --git a/src/chrome/browser/statusbar/throbberStatic.png b/src/chrome/browser/statusbar/throbberStatic.png
Binary files differ.
diff --git a/src/chrome/browser/statusbar/urlbar-over-link-arrow-rtl.png b/src/chrome/browser/statusbar/urlbar-over-link-arrow-rtl.png
Binary files differ.
diff --git a/src/chrome/browser/statusbar/urlbar-over-link-arrow.png b/src/chrome/browser/statusbar/urlbar-over-link-arrow.png
Binary files differ.
