The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/common.css
browser/themes/shared/devtools/common.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:b8425a8583de |
|---|---|
| 1 %if 0 | |
| 2 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 3 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 5 %endif | |
| 6 | |
| 7 :root { | |
| 8 font: message-box; | |
| 9 } | |
| 10 | |
| 11 .devtools-monospace { | |
| 12 %ifdef XP_MACOSX | |
| 13 font-family: Menlo, monospace; | |
| 14 %elifdef XP_WIN | |
| 15 font-family: Consolas, monospace; | |
| 16 %else | |
| 17 font-family: monospace; | |
| 18 %endif | |
| 19 %if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT) | |
| 20 font-size: 80%; | |
| 21 %endif | |
| 22 } | |
| 23 | |
| 24 /* Splitters */ | |
| 25 .devtools-horizontal-splitter { | |
| 26 -moz-appearance: none; | |
| 27 background-image: none; | |
| 28 background-color: transparent; | |
| 29 border: 0; | |
| 30 border-bottom: 1px solid rgba(118, 121, 125, .5); | |
| 31 min-height: 3px; | |
| 32 height: 3px; | |
| 33 margin-top: -3px; | |
| 34 position: relative; | |
| 35 } | |
| 36 | |
| 37 .devtools-side-splitter { | |
| 38 -moz-appearance: none; | |
| 39 background-image: none; | |
| 40 background-color: transparent; | |
| 41 border: 0; | |
| 42 -moz-border-end: 1px solid rgba(118, 121, 125, .5); | |
| 43 min-width: 3px; | |
| 44 width: 3px; | |
| 45 -moz-margin-start: -3px; | |
| 46 position: relative; | |
| 47 cursor: e-resize; | |
| 48 } | |
| 49 | |
| 50 .devtools-toolbox-side-iframe { | |
| 51 min-width: 465px; | |
| 52 } | |
| 53 | |
| 54 /* Autocomplete Popup */ | |
| 55 /* Dark and light theme */ | |
| 56 | |
| 57 .devtools-autocomplete-popup { | |
| 58 -moz-appearance: none !important; | |
| 59 border: 1px solid hsl(210,11%,10%); | |
| 60 box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; | |
| 61 background-color: transparent; | |
| 62 background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%)); | |
| 63 border-radius: 3px; | |
| 64 overflow-x: hidden; | |
| 65 %if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT) | |
| 66 max-height: 32rem; | |
| 67 %else | |
| 68 max-height: 40rem; | |
| 69 %endif | |
| 70 } | |
| 71 | |
| 72 .devtools-autocomplete-listbox { | |
| 73 -moz-appearance: none !important; | |
| 74 background-color: transparent; | |
| 75 border-width: 0px !important; | |
| 76 } | |
| 77 | |
| 78 .devtools-autocomplete-listbox > richlistitem, | |
| 79 .devtools-autocomplete-listbox > richlistitem[selected] { | |
| 80 width: 100%; | |
| 81 background-color: transparent; | |
| 82 border-radius: 4px; | |
| 83 } | |
| 84 | |
| 85 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected], | |
| 86 .devtools-autocomplete-listbox.dark-theme > richlistitem:hover { | |
| 87 background-color: rgba(0,0,0,0.5); | |
| 88 } | |
| 89 | |
| 90 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value, | |
| 91 .devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value { | |
| 92 color: hsl(208,100%,60%); | |
| 93 } | |
| 94 | |
| 95 .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label { | |
| 96 color: #eee; | |
| 97 } | |
| 98 | |
| 99 .devtools-autocomplete-listbox.dark-theme > richlistitem > label { | |
| 100 color: #ccc; | |
| 101 } | |
| 102 | |
| 103 .devtools-autocomplete-listbox > richlistitem > .initial-value, | |
| 104 .devtools-autocomplete-listbox > richlistitem > .autocomplete-value { | |
| 105 margin: 0; | |
| 106 padding: 1px 0; | |
| 107 } | |
| 108 | |
| 109 .devtools-autocomplete-listbox > richlistitem > .autocomplete-count { | |
| 110 text-align: right; | |
| 111 } | |
| 112 | |
| 113 /* Rest of the light theme */ | |
| 114 | |
| 115 .devtools-autocomplete-popup.light-theme { | |
| 116 border: 1px solid hsl(210,24%,90%); | |
| 117 box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset; | |
| 118 background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%)); | |
| 119 } | |
| 120 | |
| 121 .devtools-autocomplete-listbox.light-theme > richlistitem[selected], | |
| 122 .devtools-autocomplete-listbox.light-theme > richlistitem:hover { | |
| 123 background-color: rgba(128,128,128,0.3); | |
| 124 } | |
| 125 | |
| 126 .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value, | |
| 127 .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value { | |
| 128 color: #222; | |
| 129 } | |
| 130 | |
| 131 .devtools-autocomplete-listbox.light-theme > richlistitem > label { | |
| 132 color: #666; | |
| 133 } | |
| 134 | |
| 135 /* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */ | |
| 136 | |
| 137 .devtools-tooltip .panel-arrowcontent { | |
| 138 padding: 4px; | |
| 139 } | |
| 140 | |
| 141 .devtools-tooltip .panel-arrowcontainer { | |
| 142 /* Reseting the transition used when panels are shown */ | |
| 143 transition: none; | |
| 144 /* Panels slide up/down/left/right when they appear using a transform. | |
| 145 Since we want to remove the transition, we don't need to transform anymore | |
| 146 plus it can interfeer by causing mouseleave events on the underlying nodes */ | |
| 147 transform: none; | |
| 148 } | |
| 149 | |
| 150 .devtools-tooltip[clamped-dimensions] { | |
| 151 min-height: 100px; | |
| 152 max-height: 400px; | |
| 153 min-width: 100px; | |
| 154 max-width: 400px; | |
| 155 } | |
| 156 .devtools-tooltip[clamped-dimensions] .panel-arrowcontent { | |
| 157 overflow: hidden; | |
| 158 } | |
| 159 | |
| 160 /* Tooltip: Simple Text */ | |
| 161 | |
| 162 .devtools-tooltip-simple-text { | |
| 163 max-width: 400px; | |
| 164 margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ | |
| 165 padding: 8px 12px; | |
| 166 white-space: pre-wrap; | |
| 167 } | |
| 168 | |
| 169 .devtools-tooltip-simple-text:first-child { | |
| 170 margin-top: -4px; | |
| 171 } | |
| 172 | |
| 173 .devtools-tooltip-simple-text:last-child { | |
| 174 margin-bottom: -4px; | |
| 175 } | |
| 176 | |
| 177 /* Tooltip: Font Family Previewer Text */ | |
| 178 .devtools-tooltip-font-previewer-text { | |
| 179 max-width: 400px; | |
| 180 line-height: 1.5; | |
| 181 font-size: 150%; | |
| 182 text-align: center; | |
| 183 } | |
| 184 | |
| 185 /* Tooltip: Alert Icon */ | |
| 186 | |
| 187 .devtools-tooltip-alert-icon { | |
| 188 width: 32px; | |
| 189 height: 32px; | |
| 190 margin: 6px; | |
| 191 -moz-margin-end: 20px; | |
| 192 } | |
| 193 | |
| 194 .devtools-tooltip-alert-icon { | |
| 195 list-style-image: url("chrome://global/skin/icons/warning-32.png"); | |
| 196 } | |
| 197 | |
| 198 /* Tooltip: Variables View */ | |
| 199 | |
| 200 .devtools-tooltip-variables-view-box { | |
| 201 margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ | |
| 202 } | |
| 203 | |
| 204 /* Tooltip: Tiles */ | |
| 205 | |
| 206 .devtools-tooltip-tiles { | |
| 207 background-color: #eee; | |
| 208 background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), | |
| 209 linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); | |
| 210 background-size: 20px 20px; | |
| 211 background-position: 0 0, 10px 10px; | |
| 212 } | |
| 213 | |
| 214 .devtools-tooltip-iframe { | |
| 215 border: none; | |
| 216 background: transparent; | |
| 217 } | |
| 218 | |
| 219 /* Eyedropper Widget */ | |
| 220 | |
| 221 .devtools-eyedropper-panel { | |
| 222 pointer-events: none; | |
| 223 -moz-appearance: none; | |
| 224 width: 156px; | |
| 225 height: 120px; | |
| 226 background-color: transparent; | |
| 227 border: none; | |
| 228 } |
