From becd71a8600c7229f765d8eda21c1843c4f4adf1 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Fri, 16 Nov 2018 20:59:11 +0800 Subject: Issue #638 - Part 1: Provide a visual indicator for muting/unmuting tabs --- application/palemoon/themes/windows/browser.css | 72 +++++++++++++++++++++++++ 1 file changed, 72 insertions(+) (limited to 'application/palemoon/themes/windows/browser.css') diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index 45f0e066c..aa7afa7a6 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -2018,6 +2018,78 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- list-style-image: url("chrome://global/skin/icons/close-inverted.svg"); } +/* Tab sound indicator */ +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; +} + +.tab-icon-sound:not(:-moz-any([soundplaying],[muted])), +.tab-icon-sound[pinned] { + display: none; +} + +.tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); +} + +.tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); +} + +.tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); +} + +.tab-icon-sound[muted], +.tab-icon-sound[blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); +} + +.tab-icon-sound[muted]:hover, +.tab-icon-sound[blocked]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); +} + +.tab-icon-sound[muted]:hover:active, +.tab-icon-sound[blocked]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[blocked], +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover, +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover:active, +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-pressed"); +} + +.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover) { + transition: opacity .3s linear var(--soundplaying-removal-delay); + opacity: 0; +} + /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */ .tabbrowser-arrowscrollbox > .scrollbutton-up, -- cgit v1.2.3 From 719234847ecbab2fe8b4b4c2f153fa0c12bffbc6 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Fri, 16 Nov 2018 22:40:59 +0800 Subject: Issue #638 - Part 4: Add tab sound icon to tab drop-down list --- application/palemoon/themes/windows/browser.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'application/palemoon/themes/windows/browser.css') diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index aa7afa7a6..26d096055 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -2031,6 +2031,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: none; } +.alltabs-endimage[soundplaying], .tab-icon-sound[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } @@ -2043,6 +2044,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); } +.alltabs-endimage[muted], +.alltabs-endimage[blocked], .tab-icon-sound[muted], .tab-icon-sound[blocked] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); -- cgit v1.2.3 From 66cc7d91a44fd6789b80cd61ee7b84c63d402122 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Sat, 17 Nov 2018 10:25:16 +0800 Subject: Issue #638 - Part 7: Remove hover and active states for sound indicator --- application/palemoon/themes/windows/browser.css | 50 ++++--------------------- 1 file changed, 7 insertions(+), 43 deletions(-) (limited to 'application/palemoon/themes/windows/browser.css') diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index 26d096055..ca3d187c1 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -2026,7 +2026,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } -.tab-icon-sound:not(:-moz-any([soundplaying],[muted])), +.tab-icon-sound:not(:-moz-any([soundplaying],[muted],[blocked])), .tab-icon-sound[pinned] { display: none; } @@ -2036,56 +2036,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } -.tab-icon-sound[soundplaying]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); -} - -.tab-icon-sound[soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); -} - .alltabs-endimage[muted], -.alltabs-endimage[blocked], -.tab-icon-sound[muted], -.tab-icon-sound[blocked] { +.tab-icon-sound[muted] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } -.tab-icon-sound[muted]:hover, -.tab-icon-sound[blocked]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); -} - -.tab-icon-sound[muted]:hover:active, -.tab-icon-sound[blocked]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); -} - -#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark"); -} - -#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-hover"); -} - -#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-pressed"); +.alltabs-endimage[blocked], +.tab-icon-sound[blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked"); } +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying], #TabsToolbar[brighttext] .tab-icon-sound[blocked], #TabsToolbar[brighttext] .tab-icon-sound[muted] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark"); -} - -#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover, -#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover"); -} - -#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover:active, -#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-pressed"); + filter: invert(1); } .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover) { -- cgit v1.2.3 From a6b250b47730cc4751cfc5ca9e96a4b74e4d6572 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Sat, 17 Nov 2018 10:55:10 +0800 Subject: Issue #638 - Part 8: Add overlay sound icon for pinned tabs - This also moves some styles to tabbrowser.css --- application/palemoon/themes/windows/browser.css | 57 ++++++++++++++++++++++--- 1 file changed, 51 insertions(+), 6 deletions(-) (limited to 'application/palemoon/themes/windows/browser.css') diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index ca3d187c1..506b85bf0 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -2026,11 +2026,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } -.tab-icon-sound:not(:-moz-any([soundplaying],[muted],[blocked])), -.tab-icon-sound[pinned] { - display: none; -} - .alltabs-endimage[soundplaying], .tab-icon-sound[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); @@ -2052,11 +2047,61 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- filter: invert(1); } -.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover) { +.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover), +.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) { transition: opacity .3s linear var(--soundplaying-removal-delay); opacity: 0; } +/* Tab icon overlay */ +.tab-icon-overlay { + width: 16px; + height: 16px; + margin-top: -8px; + margin-inline-start: -15px; + margin-inline-end: -1px; + position: relative; +} + +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-overlay[blocked]:not([crashed]) { + border-radius: 10px; +} + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover, +.tab-icon-overlay[blocked]:not([crashed]):hover { + background-color: white; +} + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); +} + +.tab-icon-overlay[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); +} + +.tab-icon-overlay[blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover), +.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover), +.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover), +.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked"); +} + /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */ .tabbrowser-arrowscrollbox > .scrollbutton-up, -- cgit v1.2.3 From deb4791e21e9cda73083f0c61c44a51270f433e2 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Sat, 17 Nov 2018 12:11:34 +0800 Subject: Issue #638 - Part 10: Rename all tabs sound icon to be consistent with others - alltabs => allTabs --- application/palemoon/themes/windows/browser.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'application/palemoon/themes/windows/browser.css') diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index 506b85bf0..ebc417786 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -2026,17 +2026,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } -.alltabs-endimage[soundplaying], +.allTabs-endimage[soundplaying], .tab-icon-sound[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } -.alltabs-endimage[muted], +.allTabs-endimage[muted], .tab-icon-sound[muted] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } -.alltabs-endimage[blocked], +.allTabs-endimage[blocked], .tab-icon-sound[blocked] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked"); } -- cgit v1.2.3 From a5bdec9a680e926d8b9e828fe748fb50a57ed914 Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Mon, 19 Nov 2018 01:47:32 +0100 Subject: Replace toolbar PNG bitmaps with SVG vectors. This makes the main toolbar icon set use SVG vector images, so they are prepared for HiDPI use. The download indicator "attention" state (green arrow) has been folded into the main toolbar image. This is a direct replacement of the previous images (and not separate icon files) to have a direct drop-in replacement for the previously used files. Tag #576 --- application/palemoon/themes/windows/browser.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'application/palemoon/themes/windows/browser.css') diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index 45f0e066c..e4f5f679f 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -39,9 +39,9 @@ --toolbarbutton-border-radius: 2.5px; --toolbarbutton-border-color: hsla(210,54%,20%,.2); - --toolbarbutton-image: url("chrome://browser/skin/Toolbar.png"); - --toolbarbutton-glass-image: url("chrome://browser/skin/Toolbar-glass.png"); - --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.png"); + --toolbarbutton-image: url("chrome://browser/skin/Toolbar.svg"); + --toolbarbutton-glass-image: url("chrome://browser/skin/Toolbar-glass.svg"); + --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.svg"); --tab-background: linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)); --tab-background-hover: linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)); -- cgit v1.2.3