mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1192568 - Update the tab audio icons; r=jaws

This commit is contained in:
Ehsan Akhgari 2015-08-06 23:40:44 -04:00
Родитель 69b84fe63a
Коммит bd1133f4fe
4 изменённых файлов: 132 добавлений и 180 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
browser/base/content/tabbrowser.xml
Просмотреть файл

@ -5738,7 +5738,7 @@
xbl:inherits="value=visibleLabel,crop,accesskey,fadein,pinned,selected,visuallyselected" xbl:inherits="value=visibleLabel,crop,accesskey,fadein,pinned,selected,visuallyselected"
class="tab-text tab-label" class="tab-text tab-label"
role="presentation"/> role="presentation"/>
<xul:image xbl:inherits="soundplaying,pinned,muted" <xul:image xbl:inherits="soundplaying,pinned,muted,visuallyselected"
anonid="soundplaying-icon" anonid="soundplaying-icon"
class="tab-icon-sound" class="tab-icon-sound"
role="presentation"/> role="presentation"/>

97
browser/themes/shared/tabbrowser/tab-audio-small.svg
Просмотреть файл

@ -4,82 +4,41 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<style> <style>
use:not(:target) { .icon:not(:target) {
display: none; display: none;
} }
.icon { .icon {
fill: #4d4d4d; fill: #262626;
} }
.icon.hover { .icon > .outline {
fill: #333333;
}
.icon.pressed {
fill: #000;
}
.icon.dark {
fill: #ccc;
}
.icon.dark.hover {
fill: #b2b2b2;
}
.icon.dark.pressed {
fill: #fff; fill: #fff;
} }
.muted {
opacity: .7; .icon.white {
stroke: #4d4d4d; fill: #fff;
stroke-width: 0;
} }
.muted.hover { .icon.white > .outline {
opacity: .85; fill: #000;
stroke: #333333; fill-opacity: .5;
}
.muted.pressed {
opacity: 1;
stroke: #000;
}
.muted.dark {
stroke: #ccc;
}
.muted.dark.hover {
stroke: #b2b2b2;
}
.muted.dark.pressed {
stroke: #fff;
} }
</style> </style>
<defs>
<clipPath id="clip-wave"> <g id="tab-audio" class="icon">
<path d="M 11,7 l 3,-8 l 2,0 l 0,18 l -2,0 l -3,-8 z" /> <path class="outline" d="M12.4,3.6l-1-0.6l-0.9,2.5H10V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5H4C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.6l3.6,3.6 c0.3,0.3,0.9,0.1,0.9-0.4v-3.7h0.5l0.9,2.5l1-0.6C14,11.5,15,9.8,15,8S14,4.5,12.4,3.6z M9,13l-3-3H4c-0.6,0-1-0.4-1-1V7 c0-0.6,0.4-1,1-1h2l3-3V13z M10,9.5v-3c0.8,0,1.5,0.7,1.5,1.5S10.8,9.5,10,9.5z M11.9,11.5l-0.4-0.9C12.4,10,13,9.1,13,8 s-0.6-2-1.4-2.5l0.3-1C13.2,5.2,14,6.5,14,8S13.2,10.8,11.9,11.5z"/>
</clipPath> <path d="M4,6C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h2l3,3V3L6,6H4z M10,6.5v3c0.8,0,1.5-0.7,1.5-1.5S10.8,6.5,10,6.5z M11.9,4.5 l-0.4,0.9C12.4,6,13,6.9,13,8s-0.6,2-1.4,2.5l0.4,0.9c1.2-0.7,2.1-2,2.1-3.5S13.2,5.2,11.9,4.5z"/>
<mask id="disabled-cutout"> </g>
<rect width="16" height="16" fill="#fff" /> <g id="tab-audio-muted" class="icon">
<line x1="4" y1="14" x2="14" y2="4" stroke="#000" stroke-width="2" /> <path class="outline" d="M5.6,5H4C2.9,5,2,5.9,2,7v2c0,0.7,0.3,1.3,0.9,1.7l-1.8,1.8l2.5,2.5l3-3l2.6,2.6c0.3,0.3,0.9,0.1,0.9-0.4V8.5l3.9-3.9 l-2.5-2.5L10,3.5V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5z"/>
</mask> <path d="M11.5,3.5L9,5.9V3L6,6H4C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h0.9l-2.5,2.5l1.1,1.1l9-9L11.5,3.5z M9,13V9.7l-1.7,1.7L9,13z"/>
<g id="shape-tab-audio"> </g>
<rect x="3" y="6" width="5" height="4" rx="1" ry="1" />
<polygon points="5.5,6.5 9,3 9,13 5.5,9.5" /> <g id="tab-audio-white" class="icon white">
<path d="M 10,6.5 a 1.5 1.5 0 0,1 0,3 z" /> <path class="outline" d="M12.4,3.6l-1-0.6l-0.9,2.5H10V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5H4C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.6l3.6,3.6 c0.3,0.3,0.9,0.1,0.9-0.4v-3.7h0.5l0.9,2.5l1-0.6C14,11.5,15,9.8,15,8S14,4.5,12.4,3.6z M9,13l-3-3H4c-0.6,0-1-0.4-1-1V7 c0-0.6,0.4-1,1-1h2l3-3V13z M10,9.5v-3c0.8,0,1.5,0.7,1.5,1.5S10.8,9.5,10,9.5z M11.9,11.5l-0.4-0.9C12.4,10,13,9.1,13,8 s-0.6-2-1.4-2.5l0.3-1C13.2,5.2,14,6.5,14,8S13.2,10.8,11.9,11.5z"/>
<path d="M 10,4 a 4 4 0 0,1 0,8 l 0,-1 a 3 3 0 0,0 0,-6 z" clip-path="url(#clip-wave)" /> <path d="M4,6C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h2l3,3V3L6,6H4z M10,6.5v3c0.8,0,1.5-0.7,1.5-1.5S10.8,6.5,10,6.5z M11.9,4.5 l-0.4,0.9C12.4,6,13,6.9,13,8s-0.6,2-1.4,2.5l0.4,0.9c1.2-0.7,2.1-2,2.1-3.5S13.2,5.2,11.9,4.5z"/>
</g> </g>
<g id="shape-tab-audio-muted"> <g id="tab-audio-white-muted" class="icon white">
<g mask="url(#disabled-cutout)"> <path class="outline" d="M5.6,5H4C2.9,5,2,5.9,2,7v2c0,0.7,0.3,1.3,0.9,1.7l-1.8,1.8l2.5,2.5l3-3l2.6,2.6c0.3,0.3,0.9,0.1,0.9-0.4V8.5l3.9-3.9 l-2.5-2.5L10,3.5V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5z"/>
<rect x="4" y="6" width="5" height="4" rx="1" ry="1" /> <path d="M11.5,3.5L9,5.9V3L6,6H4C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h0.9l-2.5,2.5l1.1,1.1l9-9L11.5,3.5z M9,13V9.7l-1.7,1.7L9,13z"/>
<polygon points="6.5,6.5 10,3 10,13 6.5,9.5" /> </g>
</g>
<line x1="3" y1="14" x2="13" y2="4" stroke-width="1.5" />
</g>
</defs>
<use id="tab-audio" class="icon" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-hover" class="icon hover" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-pressed" class="icon pressed" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-muted" class="icon muted" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-hover" class="icon muted hover" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-pressed" class="icon muted pressed" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-dark" class="icon dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-dark-hover" class="icon hover dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-dark-pressed" class="icon pressed dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-muted-dark" class="icon muted dark" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-dark-hover" class="icon muted hover dark" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-dark-pressed" class="icon muted pressed dark" xlink:href="#shape-tab-audio-muted" />
</svg> </svg>

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 3.0 KiB

После

Ширина:  |  Высота:  |  Размер: 2.8 KiB

127
browser/themes/shared/tabbrowser/tab-audio.svg
Просмотреть файл

@ -4,83 +4,84 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<style> <style>
use:not(:target) { .icon:not(:target) {
display: none; display: none;
} }
.icon { .icon {
fill: #666; fill: #333;
opacity: .75;
} }
.icon.hover { .icon.hover {
fill: #4d4d4d; fill: #1a1a1a;
opacity: .85;
} }
.icon.pressed { .icon.pressed {
fill: #000; fill: #0d0d0d;
opacity: .95;
} }
.icon.dark {
fill: #999; .icon.white {
}
.icon.dark.hover {
fill: #b2b2b2;
}
.icon.dark.pressed {
fill: #fff; fill: #fff;
} }
.muted { .icon.white.hover {
opacity: .7; opacity: .9;
stroke: #666;
stroke-width: 0;
} }
.muted.hover { .icon.white.pressed {
opacity: .85;
stroke: #4d4d4d;
}
.muted.pressed {
opacity: 1; opacity: 1;
stroke: #000;
} }
.muted.dark { .icon.white > .outline {
stroke: #999; fill: #000;
fill-opacity: .5;
} }
.muted.dark.hover {
stroke: #b2b2b2; .icon.backgroundTab,
} .icon.backgroundTab.hover,
.muted.dark.pressed { .icon.backgroundTab.pressed {
stroke: #fff; fill: -moz-MenuBarText;
} }
</style> </style>
<defs>
<clipPath id="clip-wave"> <path id="tab-audio" class="icon" d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<path d="M 10,7 l 3,-8 l 2,0 l 0,18 l -2,0 l -3,-8 z" /> <path id="tab-audio-hover" class="icon hover" d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
</clipPath> <path id="tab-audio-pressed" class="icon pressed" d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<mask id="disabled-cutout">
<rect width="16" height="16" fill="#fff" /> <path id="tab-audio-muted" class="icon" d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
<line x1="4" y1="14" x2="14" y2="4" stroke="#000" stroke-width="2" /> <path id="tab-audio-muted-hover" class="icon hover" d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
</mask> <path id="tab-audio-muted-pressed" class="icon pressed" d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
<g id="shape-tab-audio">
<rect x="2" y="5" width="6" height="6" rx="2" ry="2" /> <path id="tab-audio-backgroundTab" class="icon backgroundTab" d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<polygon points="4,6 9,2 9,14 4,10" /> <path id="tab-audio-backgroundTab-hover" class="icon backgroundTab hover" d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<path d="M 10,7 a 1 1 0 0,1 0,2 z" /> <path id="tab-audio-backgroundTab-pressed" class="icon backgroundTab pressed" d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<path d="M 10,5 a 3 3 0 0,1 0,6 l 0,-1 a 2 2 0 0,0 0,-4 z" clip-path="url(#clip-wave)" />
<path d="M 10,3 a 5 5 0 0,1 0,10 l 0,-1 a 4 4 0 0,0 0,-8 z" clip-path="url(#clip-wave)" /> <path id="tab-audio-backgroundTab-muted" class="icon backgroundTab" d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
</g> <path id="tab-audio-backgroundTab-muted-hover" class="icon backgroundTab hover" d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
<g id="shape-tab-audio-muted"> <path id="tab-audio-backgroundTab-muted-pressed" class="icon backgroundTab pressed" d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
<g mask="url(#disabled-cutout)">
<rect x="3" y="5" width="6" height="6" rx="2" ry="2" /> <g id="tab-audio-white" class="icon white">
<polygon points="5,6 10,2 10,14 5,10" /> <path class="outline" d="M9,2v12l-3.8-3H4c-1.1,0-2-0.9-2-2V7c0-1.1,0.9-2,2-2h1.2L9,2 M11.4,3.2C13.5,3.8,15,5.7,15,8 s-1.5,4.2-3.5,4.7l-0.4-0.9c1.7-0.4,2.9-2,2.9-3.8s-1.2-3.4-3-3.9L11.4,3.2 M10.7,5.1C12,5.4,13,6.6,13,8s-1,2.6-2.2,2.9L10.4,10 C11.3,9.8,12,9,12,8s-0.7-1.8-1.6-2L10.7,5.1 M10,7c0.6,0,1,0.4,1,1s-0.4,1-1,1V7 M10-0.1L8.4,1.2L4.9,4H4C2.3,4,1,5.3,1,7v2 c0,1.7,1.3,3,3,3h0.9l3.5,2.8l1.6,1.3V14v-2.2l0.2,0.4l0.4,0.9l0.3,0.8l0.8-0.2C14.2,13,16,10.7,16,8c0-2.7-1.7-5-4.3-5.8L10.8,2 l-0.4,0.8l-0.4,0.9L10,3.9V2V-0.1L10-0.1z"/>
</g> <path d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<line x1="2" y1="13" x2="14" y2="3" stroke-width="1.5" /> </g>
</g> <g id="tab-audio-white-hover" class="icon white hover">
</defs> <path class="outline" d="M9,2v12l-3.8-3H4c-1.1,0-2-0.9-2-2V7c0-1.1,0.9-2,2-2h1.2L9,2 M11.4,3.2C13.5,3.8,15,5.7,15,8 s-1.5,4.2-3.5,4.7l-0.4-0.9c1.7-0.4,2.9-2,2.9-3.8s-1.2-3.4-3-3.9L11.4,3.2 M10.7,5.1C12,5.4,13,6.6,13,8s-1,2.6-2.2,2.9L10.4,10 C11.3,9.8,12,9,12,8s-0.7-1.8-1.6-2L10.7,5.1 M10,7c0.6,0,1,0.4,1,1s-0.4,1-1,1V7 M10-0.1L8.4,1.2L4.9,4H4C2.3,4,1,5.3,1,7v2 c0,1.7,1.3,3,3,3h0.9l3.5,2.8l1.6,1.3V14v-2.2l0.2,0.4l0.4,0.9l0.3,0.8l0.8-0.2C14.2,13,16,10.7,16,8c0-2.7-1.7-5-4.3-5.8L10.8,2 l-0.4,0.8l-0.4,0.9L10,3.9V2V-0.1L10-0.1z"/>
<use id="tab-audio" class="icon" xlink:href="#shape-tab-audio"/> <path d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<use id="tab-audio-hover" class="icon hover" xlink:href="#shape-tab-audio"/> </g>
<use id="tab-audio-pressed" class="icon pressed" xlink:href="#shape-tab-audio"/> <g id="tab-audio-white-pressed" class="icon white pressed">
<use id="tab-audio-muted" class="icon muted" xlink:href="#shape-tab-audio-muted" /> <path class="outline" d="M9,2v12l-3.8-3H4c-1.1,0-2-0.9-2-2V7c0-1.1,0.9-2,2-2h1.2L9,2 M11.4,3.2C13.5,3.8,15,5.7,15,8 s-1.5,4.2-3.5,4.7l-0.4-0.9c1.7-0.4,2.9-2,2.9-3.8s-1.2-3.4-3-3.9L11.4,3.2 M10.7,5.1C12,5.4,13,6.6,13,8s-1,2.6-2.2,2.9L10.4,10 C11.3,9.8,12,9,12,8s-0.7-1.8-1.6-2L10.7,5.1 M10,7c0.6,0,1,0.4,1,1s-0.4,1-1,1V7 M10-0.1L8.4,1.2L4.9,4H4C2.3,4,1,5.3,1,7v2 c0,1.7,1.3,3,3,3h0.9l3.5,2.8l1.6,1.3V14v-2.2l0.2,0.4l0.4,0.9l0.3,0.8l0.8-0.2C14.2,13,16,10.7,16,8c0-2.7-1.7-5-4.3-5.8L10.8,2 l-0.4,0.8l-0.4,0.9L10,3.9V2V-0.1L10-0.1z"/>
<use id="tab-audio-muted-hover" class="icon muted hover" xlink:href="#shape-tab-audio-muted" /> <path d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/>
<use id="tab-audio-muted-pressed" class="icon muted pressed" xlink:href="#shape-tab-audio-muted" /> </g>
<use id="tab-audio-dark" class="icon dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-dark-hover" class="icon hover dark" xlink:href="#shape-tab-audio"/> <g id="tab-audio-muted-white" class="icon muted white">
<use id="tab-audio-dark-pressed" class="icon pressed dark" xlink:href="#shape-tab-audio"/> <path class="outline" d="M9,2v4.3l3.5-2.9l0.9,1.2l-11,9l-1-1.2l1.9-1.5C2.6,10.6,2,9.9,2,9V7c0-1.1,0.9-2,2-2h1.2L9,2 M9,10v4l-2.5-2L9,10 M10-0.1 L8.4,1.2L4.9,4H4C2.3,4,1,5.3,1,7v2c0,0.7,0.3,1.4,0.7,2l-0.8,0.7l-0.8,0.6l0.6,0.8l1,1.2L2.3,15l0.8-0.6l2.3-1.9l0.4,0.3l2.5,2 l1.6,1.3V14v-4V8.7l4.1-3.4l0.8-0.6l-0.6-0.8l-0.9-1.2L12.7,2l-0.8,0.6L10,4.2V2V-0.1L10-0.1z"/>
<use id="tab-audio-muted-dark" class="icon muted dark" xlink:href="#shape-tab-audio-muted" /> <path d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
<use id="tab-audio-muted-dark-hover" class="icon muted hover dark" xlink:href="#shape-tab-audio-muted" /> </g>
<use id="tab-audio-muted-dark-pressed" class="icon muted pressed dark" xlink:href="#shape-tab-audio-muted" /> <g id="tab-audio-muted-white-hover" class="icon muted white hover">
<path class="outline" d="M9,2v4.3l3.5-2.9l0.9,1.2l-11,9l-1-1.2l1.9-1.5C2.6,10.6,2,9.9,2,9V7c0-1.1,0.9-2,2-2h1.2L9,2 M9,10v4l-2.5-2L9,10 M10-0.1 L8.4,1.2L4.9,4H4C2.3,4,1,5.3,1,7v2c0,0.7,0.3,1.4,0.7,2l-0.8,0.7l-0.8,0.6l0.6,0.8l1,1.2L2.3,15l0.8-0.6l2.3-1.9l0.4,0.3l2.5,2 l1.6,1.3V14v-4V8.7l4.1-3.4l0.8-0.6l-0.6-0.8l-0.9-1.2L12.7,2l-0.8,0.6L10,4.2V2V-0.1L10-0.1z"/>
<path d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
</g>
<g id="tab-audio-muted-white-pressed" class="icon muted white pressed">
<path class="outline" d="M9,2v4.3l3.5-2.9l0.9,1.2l-11,9l-1-1.2l1.9-1.5C2.6,10.6,2,9.9,2,9V7c0-1.1,0.9-2,2-2h1.2L9,2 M9,10v4l-2.5-2L9,10 M10-0.1 L8.4,1.2L4.9,4H4C2.3,4,1,5.3,1,7v2c0,0.7,0.3,1.4,0.7,2l-0.8,0.7l-0.8,0.6l0.6,0.8l1,1.2L2.3,15l0.8-0.6l2.3-1.9l0.4,0.3l2.5,2 l1.6,1.3V14v-4V8.7l4.1-3.4l0.8-0.6l-0.6-0.8l-0.9-1.2L12.7,2l-0.8,0.6L10,4.2V2V-0.1L10-0.1z"/>
<path d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/>
</g>
</svg> </svg>

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 3.1 KiB

После

Ширина:  |  Высота:  |  Размер: 8.7 KiB

86
browser/themes/shared/tabs.inc.css
Просмотреть файл

@ -123,48 +123,16 @@
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
} }
.tab-icon-overlay[soundplaying][pinned]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-hover");
}
.tab-icon-overlay[soundplaying][pinned]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-pressed");
}
.tab-icon-overlay[muted][pinned]:not([crashed]) { .tab-icon-overlay[muted][pinned]:not([crashed]) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
} }
.tab-icon-overlay[muted][pinned]:not([crashed]):hover { #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned]:not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-hover"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
} }
.tab-icon-overlay[muted][pinned]:not([crashed]):hover:active { #TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:not([crashed]):not(:hover) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-pressed"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-dark");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-hover");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-pressed");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:not([crashed]) {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:not([crashed]):hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-hover");
}
#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:not([crashed]):hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-pressed");
} }
.tab-throbber[busy] { .tab-throbber[busy] {
@ -199,51 +167,75 @@
} }
.tab-icon-sound[soundplaying] { .tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
} }
.tab-icon-sound[soundplaying]:hover { .tab-icon-sound[soundplaying]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
} }
.tab-icon-sound[soundplaying]:hover:active { .tab-icon-sound[soundplaying]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
} }
.tab-icon-sound[muted] { .tab-icon-sound[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
} }
.tab-icon-sound[muted]:hover { .tab-icon-sound[muted]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
} }
.tab-icon-sound[muted]:hover:active { .tab-icon-sound[muted]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
}
.tab-icon-sound[visuallyselected=true][soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
}
.tab-icon-sound[visuallyselected=true][soundplaying]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
}
.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
}
.tab-icon-sound[visuallyselected=true][muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
}
.tab-icon-sound[visuallyselected=true][muted]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
}
.tab-icon-sound[visuallyselected=true][muted]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
} }
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
} }
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-hover"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
} }
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-pressed"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
} }
#TabsToolbar[brighttext] .tab-icon-sound[muted] { #TabsToolbar[brighttext] .tab-icon-sound[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
} }
#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
} }
#TabsToolbar[brighttext] .tab-icon-sound[muted]: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"); list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
} }
.tab-background, .tab-background,