radio.css (2279B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* ===== radio.css =================================================== 6 == Styles used by the XUL radio element. 7 ======================================================================= */ 8 9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 10 11 /* ::::: radio ::::: */ 12 13 radio { 14 -moz-appearance: none; 15 -moz-box-align: center; 16 margin: 2px 4px; 17 padding-top: 1px; 18 padding-bottom: 1px; 19 padding-inline-start: 4px; 20 padding-inline-end: 2px; 21 } 22 23 .radio-label-box { 24 margin-inline-start: 2px; 25 border: 1px solid transparent; 26 padding-top: 0px; 27 padding-bottom: 1px; 28 padding-inline-start: 1px; 29 padding-inline-end: 0px; 30 } 31 32 .radio-icon { 33 margin-inline-end: 2px; 34 } 35 36 .radio-label { 37 margin: 0 !important; 38 } 39 40 /* ..... focused state ..... */ 41 42 radio[focused="true"] > .radio-label-box { 43 border: 1px dotted rgb(64,64,64); 44 } 45 46 /* ..... disabled state ..... */ 47 48 radio[disabled="true"] > .radio-check-box1 { 49 background-color: #181411; 50 } 51 52 radio[disabled="true"] { 53 color: GrayText; 54 } 55 56 /* ::::: checkmark image ::::: */ 57 58 .radio-check-box1 { 59 -moz-appearance: none; 60 margin: 1px 0px; 61 border-top: 1px solid rgb(64,64,64); 62 border-right: 1px solid rgb(64,64,64); 63 border-bottom: 1px solid rgb(64,64,64); 64 border-left: 1px solid rgb(64,64,64); 65 border-radius: 50%; 66 width: 12px; 67 height: 12px; 68 background-color: #181411; 69 } 70 71 .radio-check-box2 { 72 border-top: 1px solid rgb(64,64,64); 73 border-right: 1px solid rgb(64,64,64); 74 border-bottom: 1px solid rgb(64,64,64); 75 border-left: 1px solid rgb(64,64,64); 76 border-radius: 50%; 77 padding: 2px; 78 width: 4px; 79 height: 4px; 80 list-style-image: none; 81 } 82 83 radio:hover:active > .radio-check-box1 { 84 background-color: rgb(1,1,1); 85 } 86 87 /* ..... selected state ..... */ 88 89 radio[selected="true"] > .radio-check-box1 > .radio-check-box2 { 90 list-style-image: url("chrome://global/skin/radio/radio-check.svg#radio"); 91 } 92 93 radio[selected="true"][disabled="true"] > .radio-check-box1 > .radio-check-box2 { 94 list-style-image: url("chrome://global/skin/radio/radio-check.svg#radio-dis") !important 95 }