mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-04 23:08:39 +09:00
Issue #638 - Part 8: Add overlay sound icon for pinned tabs
- This also moves some styles to tabbrowser.css
This commit is contained in:
parent
3e51f5e6cf
commit
b0a98ca25b
5 changed files with 163 additions and 17 deletions
|
|
@ -45,10 +45,19 @@ tabpanels {
|
|||
}
|
||||
|
||||
.tab-throbber:not([busy]),
|
||||
.tab-throbber[busy] + .tab-icon-image {
|
||||
.tab-throbber[busy] + .tab-icon-image,
|
||||
.tab-icon-sound:not([soundplaying]):not([muted]):not([blocked]),
|
||||
.tab-icon-sound[pinned],
|
||||
.tab-icon-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-icon-overlay[soundplaying][pinned],
|
||||
.tab-icon-overlay[muted][pinned],
|
||||
.tab-icon-overlay[blocked][pinned] {
|
||||
display: -moz-box;
|
||||
}
|
||||
|
||||
.closing-tabs-spacer {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4888,6 +4888,10 @@
|
|||
class="tab-icon-image"
|
||||
role="presentation"
|
||||
anonid="tab-icon"/>
|
||||
<xul:image xbl:inherits="busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected"
|
||||
anonid="overlay-icon"
|
||||
class="tab-icon-overlay"
|
||||
role="presentation"/>
|
||||
<xul:label flex="1"
|
||||
xbl:inherits="value=label,crop,accesskey,fadein,pinned,selected"
|
||||
class="tab-text tab-label"
|
||||
|
|
|
|||
|
|
@ -1766,11 +1766,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");
|
||||
|
|
@ -1798,6 +1793,55 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
|
|||
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");
|
||||
}
|
||||
|
||||
/* Tabstrip new tab button */
|
||||
.tabs-newtab-button,
|
||||
#TabsToolbar > #new-tab-button ,
|
||||
|
|
|
|||
|
|
@ -1829,11 +1829,6 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
|
|||
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");
|
||||
|
|
@ -1861,6 +1856,55 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
|
|||
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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue