1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/common.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,228 @@
1.4 +%if 0
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +%endif
1.9 +
1.10 +:root {
1.11 + font: message-box;
1.12 +}
1.13 +
1.14 +.devtools-monospace {
1.15 +%ifdef XP_MACOSX
1.16 + font-family: Menlo, monospace;
1.17 +%elifdef XP_WIN
1.18 + font-family: Consolas, monospace;
1.19 +%else
1.20 + font-family: monospace;
1.21 +%endif
1.22 +%if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT)
1.23 + font-size: 80%;
1.24 +%endif
1.25 +}
1.26 +
1.27 +/* Splitters */
1.28 +.devtools-horizontal-splitter {
1.29 + -moz-appearance: none;
1.30 + background-image: none;
1.31 + background-color: transparent;
1.32 + border: 0;
1.33 + border-bottom: 1px solid rgba(118, 121, 125, .5);
1.34 + min-height: 3px;
1.35 + height: 3px;
1.36 + margin-top: -3px;
1.37 + position: relative;
1.38 +}
1.39 +
1.40 +.devtools-side-splitter {
1.41 + -moz-appearance: none;
1.42 + background-image: none;
1.43 + background-color: transparent;
1.44 + border: 0;
1.45 + -moz-border-end: 1px solid rgba(118, 121, 125, .5);
1.46 + min-width: 3px;
1.47 + width: 3px;
1.48 + -moz-margin-start: -3px;
1.49 + position: relative;
1.50 + cursor: e-resize;
1.51 +}
1.52 +
1.53 +.devtools-toolbox-side-iframe {
1.54 + min-width: 465px;
1.55 +}
1.56 +
1.57 +/* Autocomplete Popup */
1.58 +/* Dark and light theme */
1.59 +
1.60 +.devtools-autocomplete-popup {
1.61 + -moz-appearance: none !important;
1.62 + border: 1px solid hsl(210,11%,10%);
1.63 + box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
1.64 + background-color: transparent;
1.65 + background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
1.66 + border-radius: 3px;
1.67 + overflow-x: hidden;
1.68 +%if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT)
1.69 + max-height: 32rem;
1.70 +%else
1.71 + max-height: 40rem;
1.72 +%endif
1.73 +}
1.74 +
1.75 +.devtools-autocomplete-listbox {
1.76 + -moz-appearance: none !important;
1.77 + background-color: transparent;
1.78 + border-width: 0px !important;
1.79 +}
1.80 +
1.81 +.devtools-autocomplete-listbox > richlistitem,
1.82 +.devtools-autocomplete-listbox > richlistitem[selected] {
1.83 + width: 100%;
1.84 + background-color: transparent;
1.85 + border-radius: 4px;
1.86 +}
1.87 +
1.88 +.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
1.89 +.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
1.90 + background-color: rgba(0,0,0,0.5);
1.91 +}
1.92 +
1.93 +.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
1.94 +.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
1.95 + color: hsl(208,100%,60%);
1.96 +}
1.97 +
1.98 +.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
1.99 + color: #eee;
1.100 +}
1.101 +
1.102 +.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
1.103 + color: #ccc;
1.104 +}
1.105 +
1.106 +.devtools-autocomplete-listbox > richlistitem > .initial-value,
1.107 +.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
1.108 + margin: 0;
1.109 + padding: 1px 0;
1.110 +}
1.111 +
1.112 +.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
1.113 + text-align: right;
1.114 +}
1.115 +
1.116 +/* Rest of the light theme */
1.117 +
1.118 +.devtools-autocomplete-popup.light-theme {
1.119 + border: 1px solid hsl(210,24%,90%);
1.120 + box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
1.121 + background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
1.122 +}
1.123 +
1.124 +.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
1.125 +.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
1.126 + background-color: rgba(128,128,128,0.3);
1.127 +}
1.128 +
1.129 +.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
1.130 +.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
1.131 + color: #222;
1.132 +}
1.133 +
1.134 +.devtools-autocomplete-listbox.light-theme > richlistitem > label {
1.135 + color: #666;
1.136 +}
1.137 +
1.138 +/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */
1.139 +
1.140 +.devtools-tooltip .panel-arrowcontent {
1.141 + padding: 4px;
1.142 +}
1.143 +
1.144 +.devtools-tooltip .panel-arrowcontainer {
1.145 + /* Reseting the transition used when panels are shown */
1.146 + transition: none;
1.147 + /* Panels slide up/down/left/right when they appear using a transform.
1.148 + Since we want to remove the transition, we don't need to transform anymore
1.149 + plus it can interfeer by causing mouseleave events on the underlying nodes */
1.150 + transform: none;
1.151 +}
1.152 +
1.153 +.devtools-tooltip[clamped-dimensions] {
1.154 + min-height: 100px;
1.155 + max-height: 400px;
1.156 + min-width: 100px;
1.157 + max-width: 400px;
1.158 +}
1.159 +.devtools-tooltip[clamped-dimensions] .panel-arrowcontent {
1.160 + overflow: hidden;
1.161 +}
1.162 +
1.163 +/* Tooltip: Simple Text */
1.164 +
1.165 +.devtools-tooltip-simple-text {
1.166 + max-width: 400px;
1.167 + margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
1.168 + padding: 8px 12px;
1.169 + white-space: pre-wrap;
1.170 +}
1.171 +
1.172 +.devtools-tooltip-simple-text:first-child {
1.173 + margin-top: -4px;
1.174 +}
1.175 +
1.176 +.devtools-tooltip-simple-text:last-child {
1.177 + margin-bottom: -4px;
1.178 +}
1.179 +
1.180 +/* Tooltip: Font Family Previewer Text */
1.181 +.devtools-tooltip-font-previewer-text {
1.182 + max-width: 400px;
1.183 + line-height: 1.5;
1.184 + font-size: 150%;
1.185 + text-align: center;
1.186 +}
1.187 +
1.188 +/* Tooltip: Alert Icon */
1.189 +
1.190 +.devtools-tooltip-alert-icon {
1.191 + width: 32px;
1.192 + height: 32px;
1.193 + margin: 6px;
1.194 + -moz-margin-end: 20px;
1.195 +}
1.196 +
1.197 +.devtools-tooltip-alert-icon {
1.198 + list-style-image: url("chrome://global/skin/icons/warning-32.png");
1.199 +}
1.200 +
1.201 +/* Tooltip: Variables View */
1.202 +
1.203 +.devtools-tooltip-variables-view-box {
1.204 + margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
1.205 +}
1.206 +
1.207 +/* Tooltip: Tiles */
1.208 +
1.209 +.devtools-tooltip-tiles {
1.210 + background-color: #eee;
1.211 + background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
1.212 + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
1.213 + background-size: 20px 20px;
1.214 + background-position: 0 0, 10px 10px;
1.215 +}
1.216 +
1.217 +.devtools-tooltip-iframe {
1.218 + border: none;
1.219 + background: transparent;
1.220 +}
1.221 +
1.222 +/* Eyedropper Widget */
1.223 +
1.224 +.devtools-eyedropper-panel {
1.225 + pointer-events: none;
1.226 + -moz-appearance: none;
1.227 + width: 156px;
1.228 + height: 120px;
1.229 + background-color: transparent;
1.230 + border: none;
1.231 +}
