wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

BBug 1223701 - Use opacity and an SVG filter to style command buttons. r=bgrins

Browse Source
This commit is contained in:
Tim Nguyen 2015-11-11 14:12:00 +01:00
parent f9f4e5b9dc
commit 38818ee13d
3 changed files with 8 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
devtools/client/themes/animationinspector.css
View File

@ -106,21 +106,6 @@ body {
border-width: 0 1px 0 0;
}
.devtools-button {
position: relative;
}
.devtools-button::before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
}
#element-picker::before {
background-image: url("chrome://devtools/skin/images/command-pick.png");
}
@ -140,7 +125,6 @@ body {
@media (min-resolution: 1.1dppx) {
#element-picker::before {
background-image: url("chrome://devtools/skin/images/command-pick@2x.png");
background-size: 64px;
}
.pause-button::before {

2
devtools/client/themes/memory.css
View File

@ -88,8 +88,6 @@ html, body, #app, #memory-tool {
.devtools-toolbar > .devtools-button.take-snapshot::before {
background-image: url(images/command-screenshot.png);
background-size: 64px 16px;
background-position: 0 center;
}
@media (min-resolution: 1.1dppx) {
.devtools-toolbar > .devtools-button.take-snapshot::before {

19
devtools/client/themes/toolbars.css
View File

@ -695,21 +695,21 @@
-moz-appearance: none;
width: 16px;
height: 16px;
background-size: 64px 16px;
background-size: cover;
background-position: 0 center;
background-repeat: no-repeat;
opacity: 0.7;
}
.command-button:hover > image {
background-position: -16px center;
opacity: 0.85;
}
.command-button:hover:active > image {
background-position: -32px center;
.command-button:hover:active > image,
.command-button[checked=true] > image,
.command-button[open=true] > image {
opacity: 1;
}
.command-button[checked=true] > image {
background-position: -48px center;
}
.command-button[open=true] > image {
background-position: 0 center;
filter: url(images/filters.svg#checked-icon-state) !important;
}
#command-button-paintflashing > image {
@ -730,7 +730,6 @@
#command-button-scratchpad > image {
background-image: url("chrome://devtools/skin/images/command-scratchpad.png");
background-size: 48px 16px;
}
#command-button-pick > image {
@ -973,7 +972,6 @@
.theme-light .devtools-tab[icon-invertable] > image,
.theme-light #toolbox-dock-buttons > toolbarbutton > image,
.theme-light .command-button-invertable > image,
.theme-light .command-button-invertable:active > image,
.theme-light .devtools-closebutton > image,
.theme-light .devtools-toolbarbutton > image,
.theme-light .devtools-button::before,
@ -990,7 +988,6 @@
/* Since selected backgrounds are blue, we want to use the normal
* (light) icons. */
.theme-light .command-button-invertable[checked=true]:not(:active) > image,
.theme-light .devtools-tab[icon-invertable][selected] > image,
.theme-light .devtools-tab[icon-invertable][highlighted] > image {
filter: none !important;