button.css (3874B)
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 /* ===== button.css ===================================================== 6 == Styles used by the XUL button element. 7 ======================================================================= */ 8 9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 10 11 /* :::::::::: button :::::::::: */ 12 13 button { 14 -moz-appearance: none; 15 margin: 1px 5px 2px 5px; 16 min-width: 6.3em; 17 border: 1px solid; 18 border-radius: 3px; 19 -moz-border-top-colors: rgb(75,75,75); 20 -moz-border-right-colors: rgb(75,75,75); 21 -moz-border-bottom-colors: rgb(75,75,75); 22 -moz-border-left-colors: rgb(75,75,75); 23 background-color: #181411; 24 color: #bfbbb6; 25 text-shadow: none; 26 } 27 28 .button-box { 29 border: 1px solid transparent; 30 padding-top: 1px; 31 padding-bottom: 2px; 32 padding-inline-start: 3px; 33 padding-inline-end: 4px; 34 } 35 36 .button-text { 37 margin: 0 !important; 38 text-align: center; 39 } 40 41 /* .......... focused state .......... */ 42 43 button:focus { 44 -moz-border-top-colors: rgb(110,110,110); 45 -moz-border-right-colors: rgb(110,110,110); 46 -moz-border-bottom-colors: rgb(110,110,110); 47 -moz-border-left-colors: rgb(110,110,110); 48 } 49 50 button:-moz-focusring > .button-box { 51 border: 1px dotted rgb(110,110,110); 52 } 53 54 /* .......... default state .......... */ 55 56 button[default="true"] { 57 -moz-border-top-colors: rgb(75,75,75); 58 -moz-border-right-colors: rgb(75,75,75); 59 -moz-border-bottom-colors: rgb(75,75,75); 60 -moz-border-left-colors: rgb(75,75,75); 61 } 62 63 /* .......... active/open/checked state .......... */ 64 65 button:hover:active, 66 button[open="true"], 67 button[checked="true"] { 68 -moz-border-top-colors: rgb(75,75,75); 69 -moz-border-right-colors: rgb(75,75,75); 70 -moz-border-bottom-colors: rgb(75,75,75); 71 -moz-border-left-colors: rgb(75,75,75); 72 background-color: #181411; 73 color: #bfbbb6; 74 } 75 76 button:hover:not(:active):not([disabled=true]) { 77 background-color: #181411; 78 } 79 80 button:hover:active > .button-box:-moz-system-metric(windows-classic), 81 button[open="true"] > .button-box:-moz-system-metric(windows-classic), 82 button[checked="true"] > .button-box:-moz-system-metric(windows-classic) { 83 padding-top: 2px; 84 padding-bottom: 1px; 85 padding-inline-start: 4px; 86 padding-inline-end: 3px; 87 } 88 89 /* .......... disabled state .......... */ 90 91 button[disabled="true"] { 92 -moz-border-top-colors: rgb(75,75,75) !important; 93 -moz-border-right-colors: rgb(75,75,75) !important; 94 -moz-border-bottom-colors: rgb(75,75,75) !important; 95 -moz-border-left-colors: rgb(75,75,75) !important; 96 background-color: #181411; 97 color: GrayText; 98 } 99 100 button[disabled="true"] > .button-box { 101 padding-top: 1px !important; 102 padding-bottom: 2px !important; 103 padding-inline-start: 3px !important; 104 padding-inline-end: 4px !important; 105 } 106 107 /* ::::: menu/menu-button buttons ::::: */ 108 109 button[type="menu-button"] { 110 margin: 0; 111 border: none; 112 } 113 114 .button-menu-dropmarker, 115 .button-menubutton-dropmarker { 116 -moz-appearance: none !important; 117 margin: 1px; 118 background-color: transparent; 119 border: none; 120 width: 11px; 121 height: 11px; 122 } 123 124 .button-menubutton-dropmarker[open="true"] { 125 margin-top: 2px; 126 margin-bottom: 0px; 127 margin-inline-start: 2px; 128 margin-inline-end: 0px; 129 } 130 131 /* ::::: plain buttons ::::: */ 132 133 button.plain { 134 border: 0px !important; 135 margin: 0px !important; 136 padding: 0px !important; 137 } 138 139 button[type="disclosure"] { 140 border: 0px !important; 141 margin: 0px !important; 142 padding: 0px !important; 143 -moz-appearance: none; 144 list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd"); 145 min-width: 0px !important; 146 background-color: transparent; 147 } 148 149 button[type="disclosure"][open="true"] { 150 list-style-image: url("chrome://global/skin/tree/twisty.svg#open"); 151 }