browser/themes/shared/devtools/common.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

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

mercurial