Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-12 21:05:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 738796 - New style for checkboxes and radio buttons. r=jaws

Browse Source
This commit is contained in:
Tim Taubert 2013-12-07 11:54:45 +01:00
parent 5e06f9cfca
commit cb8d61b7f4
11 changed files with 258 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
browser/themes/linux/jar.mn
View File

@ -135,6 +135,7 @@ browser.jar:
#endif
* skin/classic/browser/preferences/preferences.css (preferences/preferences.css)
skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
skin/classic/browser/preferences/in-content/check.png (preferences/in-content/check.png)
skin/classic/browser/preferences/in-content/icons.png (preferences/in-content/icons.png)
skin/classic/browser/preferences/applications.css (preferences/applications.css)
skin/classic/browser/preferences/aboutPermissions.css (preferences/aboutPermissions.css)

BIN
browser/themes/linux/preferences/in-content/check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 B

85
browser/themes/linux/preferences/in-content/preferences.css
View File

@ -21,6 +21,91 @@ prefpane > .content-box {
overflow: auto;
}
/* Checkboxes and radio buttons */
checkbox {
-moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox");
}
.checkbox-check {
-moz-appearance: none;
width: 23px;
height: 23px;
max-height: 23px;
border-radius: 2px;
border: 1px solid rgba(23,50,77,0.40);
-moz-margin-end: 10px;
background-color: #f1f1f1;
background-image: -moz-linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0.80) 100%);
box-shadow: 0 1px 1px 0 #ffffff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
.checkbox-check[checked] {
border-color: #0096dc;
box-shadow: 0 0 2px 2px rgba(0,150,220,0.35), inset 0 0 2px 0 #0096dc;
}
checkbox:hover::before,
checkbox[checked]::before {
position: absolute;
content: "";
width: 15px;
height: 10px;
max-height: 10px;
margin-top: 7px;
margin-bottom: 6px;
-moz-margin-end: -19px;
-moz-margin-start: 4px;
background-image: url("chrome://browser/skin/preferences/in-content/check.png");
background-repeat: no-repeat;
}
checkbox[checked]::before {
background-position: -15px 0;
}
radio {
-moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
}
.radio-check {
-moz-appearance: none;
width: 23px;
height: 23px;
max-height: 23px;
border: 1px solid rgba(23,50,77,0.40);
border-radius: 50%;
-moz-margin-end: 10px;
background-color: #f1f1f1;
background-image: -moz-linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0.80) 100%);
box-shadow: 0 1px 1px 0 #ffffff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
.radio-check[selected] {
border-color: #0096dc;
box-shadow: 0 0 2px 2px rgba(0,150,220,0.35), inset 0 0 2px 0 #0096dc;
}
radio:hover::before,
radio[selected]::before {
position: absolute;
content: "";
width: 11px;
height: 11px;
max-height: 11px;
border-radius: 50%;
margin-bottom: 1px;
margin-top: 6px;
margin-bottom: 6px;
-moz-margin-end: -17px;
-moz-margin-start: 6px;
background-image: -moz-linear-gradient(-90deg, rgba(76,177,255,0.25) 0%, rgba(23,146,229,0.25) 100%);
}
radio[selected]::before {
background-image: -moz-linear-gradient(-90deg, #4cb1ff 0%, #1792e5 100%);
}
/* Category List */
#categories {

2
browser/themes/osx/jar.mn
View File

@ -224,6 +224,8 @@ browser.jar:
skin/classic/browser/preferences/saveFile.png (preferences/saveFile.png)
* skin/classic/browser/preferences/preferences.css (preferences/preferences.css)
* skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
skin/classic/browser/preferences/in-content/check.png (preferences/in-content/check.png)
skin/classic/browser/preferences/in-content/check@2x.png (preferences/in-content/check@2x.png)
skin/classic/browser/preferences/in-content/icons.png (preferences/in-content/icons.png)
skin/classic/browser/preferences/in-content/icons@2x.png (preferences/in-content/icons@2x.png)
skin/classic/browser/preferences/applications.css (preferences/applications.css)

BIN
browser/themes/osx/preferences/in-content/check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 B

BIN
browser/themes/osx/preferences/in-content/check@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

81
browser/themes/osx/preferences/in-content/preferences.css
View File

@ -23,6 +23,87 @@ prefpane > .content-box {
overflow: auto;
}
/* Checkboxes and radio buttons */
.checkbox-check {
-moz-appearance: none;
width: 23px;
height: 23px;
border-radius: 2px;
border: 1px solid rgba(23,50,77,0.40);
-moz-margin-end: 10px;
background-color: #f1f1f1;
background-image: -moz-linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0.80) 100%);
box-shadow: 0 1px 1px 0 #ffffff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
.checkbox-check[checked] {
border-color: #0096dc;
box-shadow: 0 0 2px 2px rgba(0,150,220,0.35), inset 0 0 2px 0 #0096dc;
}
checkbox:hover::before,
checkbox[checked]::before {
position: absolute;
content: "";
width: 15px;
height: 10px;
margin-bottom: -2px;
-moz-margin-end: -20px;
-moz-margin-start: 5px;
background-image: url("chrome://browser/skin/preferences/in-content/check.png");
}
checkbox[checked]::before {
background-position: -15px 0;
}
@media (min-resolution: 2dppx) {
checkbox:hover::before,
checkbox[checked]::before {
background-size: cover;
background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 30, 30, 0);
}
checkbox[checked]::before {
background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 60, 30, 30);
}
}
.radio-check {
-moz-appearance: none;
width: 23px;
height: 23px;
border: 1px solid rgba(23,50,77,0.40);
border-radius: 50%;
-moz-margin-end: 10px;
background-color: #f1f1f1;
background-image: -moz-linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0.80) 100%);
box-shadow: 0 1px 1px 0 #ffffff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
.radio-check[selected] {
border-color: #0096dc;
box-shadow: 0 0 2px 2px rgba(0,150,220,0.35), inset 0 0 2px 0 #0096dc;
}
radio:hover::before,
radio[selected]::before {
position: absolute;
content: "";
width: 11px;
height: 11px;
border-radius: 50%;
margin-bottom: 1px;
-moz-margin-end: -18px;
-moz-margin-start: 7px;
background-image: -moz-linear-gradient(-90deg, rgba(76,177,255,0.25) 0%, rgba(23,146,229,0.25) 100%);
}
radio[selected]::before {
background-image: -moz-linear-gradient(-90deg, #4cb1ff 0%, #1792e5 100%);
}
/* Category List */
#categories {

4
browser/themes/windows/jar.mn
View File

@ -160,6 +160,8 @@ browser.jar:
skin/classic/browser/preferences/saveFile.png (preferences/saveFile.png)
* skin/classic/browser/preferences/preferences.css (preferences/preferences.css)
skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
skin/classic/browser/preferences/in-content/check.png (preferences/in-content/check.png)
skin/classic/browser/preferences/in-content/check@2x.png (preferences/in-content/check@2x.png)
skin/classic/browser/preferences/in-content/icons.png (preferences/in-content/icons.png)
skin/classic/browser/preferences/in-content/icons@2x.png (preferences/in-content/icons@2x.png)
skin/classic/browser/preferences/applications.css (preferences/applications.css)
@ -503,6 +505,8 @@ browser.jar:
skin/classic/aero/browser/preferences/saveFile.png (preferences/saveFile-aero.png)
* skin/classic/aero/browser/preferences/preferences.css (preferences/preferences.css)
skin/classic/aero/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
skin/classic/aero/browser/preferences/in-content/check.png (preferences/in-content/check.png)
skin/classic/aero/browser/preferences/in-content/check@2x.png (preferences/in-content/check@2x.png)
skin/classic/aero/browser/preferences/in-content/icons.png (preferences/in-content/icons.png)
skin/classic/aero/browser/preferences/in-content/icons@2x.png (preferences/in-content/icons@2x.png)
skin/classic/aero/browser/preferences/applications.css (preferences/applications.css)

BIN
browser/themes/windows/preferences/in-content/check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 B

BIN
browser/themes/windows/preferences/in-content/check@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

85
browser/themes/windows/preferences/in-content/preferences.css
View File

@ -21,6 +21,91 @@ prefpane > .content-box {
overflow: auto;
}
/* Checkboxes and radio buttons */
.checkbox-check {
-moz-appearance: none;
width: 23px;
height: 23px;
border-radius: 2px;
border: 1px solid rgba(23,50,77,0.40);
-moz-margin-end: 10px;
background-color: #f1f1f1;
background-image: -moz-linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0.80) 100%);
box-shadow: 0 1px 1px 0 #ffffff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
.checkbox-check[checked] {
border-color: #0096dc;
box-shadow: 0 0 2px 2px rgba(0,150,220,0.35), inset 0 0 2px 0 #0096dc;
}
checkbox:hover::before,
checkbox[checked]::before {
position: absolute;
content: "";
width: 15px;
height: 10px;
margin-bottom: -1px;
-moz-margin-end: -19px;
-moz-margin-start: 4px;
background-image: url("chrome://browser/skin/preferences/in-content/check.png");
}
checkbox[checked]::before {
background-position: -15px 0;
}
@media (min-resolution: 2dppx) {
checkbox:hover::before,
checkbox[checked]::before {
background-size: cover;
background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 30, 30, 0);
}
checkbox[checked]::before {
background-image: -moz-image-rect(url("chrome://browser/skin/preferences/in-content/check@2x.png"), 0, 60, 30, 30);
}
}
radio {
-moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
}
.radio-check {
-moz-appearance: none;
width: 23px;
height: 23px;
border: 1px solid rgba(23,50,77,0.40);
border-radius: 50%;
-moz-margin-end: 10px;
background-color: #f1f1f1;
background-image: -moz-linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0.80) 100%);
box-shadow: 0 1px 1px 0 #ffffff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
.radio-check[selected] {
border-color: #0096dc;
box-shadow: 0 0 2px 2px rgba(0,150,220,0.35), inset 0 0 2px 0 #0096dc;
}
radio:hover::before,
radio[selected]::before {
position: absolute;
content: "";
width: 11px;
height: 11px;
border-radius: 50%;
margin-bottom: 1px;
-moz-margin-end: -17px;
-moz-margin-start: 6px;
background-image: -moz-linear-gradient(-90deg, rgba(76,177,255,0.25) 0%, rgba(23,146,229,0.25) 100%);
}
radio[selected]::before {
background-image: -moz-linear-gradient(-90deg, #4cb1ff 0%, #1792e5 100%);
}
/* Category List */
#categories {