1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/windows/tabview/tabview.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,676 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +body {
1.9 + font: message-box;
1.10 + color: rgba(0, 0, 0, 0.6);
1.11 + font-size: 13px;
1.12 +}
1.13 +
1.14 +#bg:not(:-moz-system-metric(windows-compositor)) {
1.15 + background: url("chrome://browser/skin/tabview/grain.png") repeat scroll center top,
1.16 + linear-gradient(#CCD9EA, #C7D5E7) repeat scroll 0 0;
1.17 +}
1.18 +
1.19 +/* Tabs
1.20 +----------------------------------*/
1.21 +
1.22 +.tab {
1.23 + margin: 4px;
1.24 + padding-top: 4px;
1.25 + -moz-padding-end: 6px;
1.26 + padding-bottom: 6px;
1.27 + -moz-padding-start: 4px;
1.28 + background-color: #E0EAF5;
1.29 + border-radius: 0.4em;
1.30 + cursor: pointer;
1.31 +}
1.32 +
1.33 +html[dir=rtl] .tab {
1.34 + box-shadow:
1.35 + 0 1px 0 #FFFFFF inset,
1.36 + 0 -1px 1px rgba(255, 255, 255, 0.8) inset,
1.37 + -1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.38 + 1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.39 + 0 1px 1.5px rgba(4, 38, 60, 0.4);
1.40 +}
1.41 +
1.42 +.tab canvas,
1.43 +.cached-thumb {
1.44 + border: 1px solid rgba(73, 99, 119, 0.3);
1.45 +}
1.46 +
1.47 +.thumb {
1.48 + box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
1.49 + background-color: white;
1.50 +}
1.51 +
1.52 +html[dir=rtl] .thumb {
1.53 + box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.1);
1.54 +}
1.55 +
1.56 +.favicon {
1.57 + background-color: #E0EAF5;
1.58 + padding-top: 4px;
1.59 + -moz-padding-end: 6px;
1.60 + padding-bottom: 6px;
1.61 + -moz-padding-start: 4px;
1.62 + top: 4px;
1.63 + left: 4px;
1.64 + -moz-border-end: 1px solid rgba(73, 99, 119, 0.3);
1.65 + border-bottom: 1px solid rgba(73, 99, 119, 0.3);
1.66 + height: 17px;
1.67 + width: 17px;
1.68 +}
1.69 +
1.70 +html[dir=ltr] .favicon {
1.71 + border-bottom-right-radius: 0.4em;
1.72 +}
1.73 +
1.74 +html[dir=rtl] .favicon {
1.75 + border-bottom-left-radius: 0.4em;
1.76 + left: auto;
1.77 + right: 2px;
1.78 +}
1.79 +
1.80 +.favicon img {
1.81 + border: none;
1.82 + width: 16px;
1.83 + height: 16px;
1.84 +}
1.85 +
1.86 +.close {
1.87 + top: 6px;
1.88 + right: 6px;
1.89 + width: 16px;
1.90 + height: 16px;
1.91 + background-image: -moz-image-rect(url("chrome://browser/skin/tabview/close.png"), 0, 16, 16, 0);
1.92 + background-repeat: no-repeat;
1.93 +}
1.94 +
1.95 +.close:hover {
1.96 + background-image: -moz-image-rect(url("chrome://browser/skin/tabview/close.png"), 0, 32, 16, 16);
1.97 +}
1.98 +
1.99 +.close:hover:active {
1.100 + background-image: -moz-image-rect(url("chrome://browser/skin/tabview/close.png"), 0, 48, 16, 32);
1.101 +}
1.102 +
1.103 +html[dir=rtl] .close {
1.104 + right: auto;
1.105 + left: 6px;
1.106 +}
1.107 +
1.108 +.expander {
1.109 + bottom: 6px;
1.110 + right: 6px;
1.111 + width: 16px;
1.112 + height: 16px;
1.113 + background: url(chrome://global/skin/icons/resizer.png) no-repeat;
1.114 + transition-property: opacity;
1.115 + transition-duration: 0.5s;
1.116 + transition-timing-function: ease-out;
1.117 + opacity: 0.2;
1.118 +}
1.119 +
1.120 +html[dir=rtl] .expander {
1.121 + right: auto;
1.122 + left: 6px;
1.123 + transform: scaleX(-1);
1.124 +}
1.125 +
1.126 +.expander:hover,
1.127 +.appTabIcon:hover {
1.128 + transition-property: opacity;
1.129 + transition-duration: 0.5s;
1.130 + transition-timing-function: ease-out;
1.131 + opacity: 1.0;
1.132 +}
1.133 +
1.134 +.favicon img:hover,
1.135 +.close img:hover,
1.136 +.expander img:hover {
1.137 + opacity: 1;
1.138 + border: none;
1.139 +}
1.140 +
1.141 +.tab-title {
1.142 + bottom: -20px;
1.143 + text-align: center;
1.144 + width: 94.5%;
1.145 + text-shadow: 0 1px rgba(255, 255, 255, 0.6);
1.146 +}
1.147 +
1.148 +.stacked {
1.149 + padding: 0;
1.150 +}
1.151 +
1.152 +.stacked .thumb {
1.153 + box-shadow: rgba(0,0,0,.2) 1px 1px 4px;
1.154 +}
1.155 +
1.156 +html[dir=rtl] .stacked .thumb {
1.157 + box-shadow: rgba(0,0,0,.2) -1px 1px 4px;
1.158 +}
1.159 +
1.160 +.stack-trayed .tab-title {
1.161 + text-shadow: rgba(0,0,0,1) 1px 1px 1.5px;
1.162 + color: #EEE;
1.163 + font-size: 11px;
1.164 +}
1.165 +
1.166 +html[dir=rtl] .stack-trayed .tab-title {
1.167 + text-shadow: rgba(0,0,0,1) -1px 1px 1.5px;
1.168 +}
1.169 +
1.170 +.stack-trayed .thumb {
1.171 + box-shadow: none !important;
1.172 +}
1.173 +
1.174 +.tab.focus {
1.175 + box-shadow:
1.176 + 0 1px 0 #FFFFFF inset,
1.177 + 0 -1px 1px #FFFFFF inset,
1.178 + 1px 0 1px #FFFFFF inset,
1.179 + -1px 0 1px #FFFFFF inset,
1.180 + 0 0 5.5px #007ECE;
1.181 +}
1.182 +
1.183 +html[dir=rtl] .tab.focus {
1.184 + box-shadow:
1.185 + 0 1px 0 #FFFFFF inset,
1.186 + 0 -1px 1px #FFFFFF inset,
1.187 + -1px 0 1px #FFFFFF inset,
1.188 + 1px 0 1px #FFFFFF inset,
1.189 + 0 0 5.5px #007ECE;
1.190 +}
1.191 +
1.192 +/* Tab: Zooming
1.193 +----------------------------------*/
1.194 +
1.195 +.front .tab-title,
1.196 +.front .close,
1.197 +.front .favicon,
1.198 +.front .expander,
1.199 +.front .thumb-shadow {
1.200 + display: none;
1.201 +}
1.202 +
1.203 +.front .thumb {
1.204 + box-shadow: none !important;
1.205 +}
1.206 +
1.207 +.front.focus {
1.208 + box-shadow: none !important;
1.209 +}
1.210 +
1.211 +/* Tab GroupItem
1.212 +----------------------------------*/
1.213 +
1.214 +.groupItem {
1.215 + cursor: pointer;
1.216 + background-color: #E0EAF5;
1.217 + border-radius: 0.4em;
1.218 + box-shadow:
1.219 + 0 1px 0 #FFFFFF inset,
1.220 + 0 -1px 1px rgba(255, 255, 255, 0.8) inset,
1.221 + 1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.222 + -1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.223 + 0 1px 3px rgba(4, 38, 60, 0.6);
1.224 +}
1.225 +
1.226 +html[dir=rtl] .groupItem {
1.227 + box-shadow:
1.228 + 0 1px 0 #FFFFFF inset,
1.229 + 0 -1px 1px rgba(255, 255, 255, 0.8) inset,
1.230 + -1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.231 + 1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.232 + 0 1px 3px rgba(4, 38, 60, 0.6);
1.233 +}
1.234 +
1.235 +.groupItem.activeGroupItem {
1.236 + box-shadow:
1.237 + rgba(0,0,0,0.8) 2px 2px 8px;
1.238 +}
1.239 +
1.240 +html[dir=rtl] .groupItem.activeGroupItem {
1.241 + box-shadow:
1.242 + rgba(0,0,0,0.8) -2px 2px 8px;
1.243 +}
1.244 +
1.245 +.groupItem .close {
1.246 + z-index: 10;
1.247 + top: 0px;
1.248 + right: 0px;
1.249 + width: 22px;
1.250 + height: 22px;
1.251 + background-position: bottom left;
1.252 +}
1.253 +
1.254 +html[dir=rtl] .groupItem .close {
1.255 + right: auto;
1.256 + left: 0px;
1.257 + background-position: bottom right;
1.258 +}
1.259 +
1.260 +.dragRegion {
1.261 + background: rgba(224, 234, 245, 0.4);
1.262 +}
1.263 +
1.264 +.overlay {
1.265 + background-color: rgba(0,0,0,.7) !important;
1.266 + box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);
1.267 + border-radius: 0.4em;
1.268 +}
1.269 +
1.270 +html[dir=rtl] .overlay {
1.271 + box-shadow: -3px 3px 5.5px rgba(0,0,0,.5);
1.272 +}
1.273 +
1.274 +.appTabTrayContainer {
1.275 + top: 34px;
1.276 + right: 1px;
1.277 + -moz-border-start: 1px solid #E1E1E1;
1.278 + padding: 0 5px;
1.279 + overflow: -moz-hidden-unscrollable;
1.280 + text-align: start;
1.281 + line-height: 0;
1.282 +}
1.283 +
1.284 +html[dir=rtl] .appTabTrayContainer {
1.285 + right: auto;
1.286 + left: 1px;
1.287 +}
1.288 +
1.289 +.appTabTray {
1.290 + display: inline-block;
1.291 + -moz-column-width: 16px;
1.292 + -moz-column-gap: 5px;
1.293 +}
1.294 +
1.295 +.appTabTrayContainerTruncated {
1.296 + padding-bottom: 7px;
1.297 +}
1.298 +
1.299 +.appTabTrayContainerTruncated:after {
1.300 + content: "…";
1.301 + position: absolute;
1.302 + bottom: 2px;
1.303 + left: 0;
1.304 + display: block;
1.305 + width: 100%;
1.306 + height: 15px;
1.307 + line-height: 15px;
1.308 + text-align: center;
1.309 + font-size: 15px;
1.310 +}
1.311 +
1.312 +.appTabIcon {
1.313 + width: 16px;
1.314 + height: 16px;
1.315 + cursor: pointer;
1.316 + opacity: 0.8;
1.317 + padding-bottom: 3px;
1.318 + display: block;
1.319 +}
1.320 +
1.321 +.undo {
1.322 + background-color: #A0A0A0;
1.323 + padding-top: 3px;
1.324 + padding-bottom: 3px;
1.325 + -moz-padding-start: 5px;
1.326 + -moz-padding-end: 20px;
1.327 + width: 135px;
1.328 + line-height: 25px;
1.329 + box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.24);
1.330 + text-shadow: 0px -1px 0px rgba(255,255,255,.2);
1.331 + color: rgba( 0,0,0, .8);
1.332 + border-radius: 0.4em;
1.333 + text-align: center;
1.334 + border: none;
1.335 + cursor: pointer;
1.336 +}
1.337 +
1.338 +.undo:hover {
1.339 + background-color: #949494;
1.340 +}
1.341 +
1.342 +.undo .close {
1.343 + top: 7px;
1.344 + right: 7px;
1.345 + opacity: 0.5;
1.346 +}
1.347 +
1.348 +html[dir=rtl] .undo .close {
1.349 + right: auto;
1.350 + left: 7px;
1.351 +}
1.352 +
1.353 +.undo .close:hover{
1.354 + opacity: 1.0;
1.355 +}
1.356 +
1.357 +/* Trenches
1.358 +----------------------------------*/
1.359 +
1.360 +.guideTrench {
1.361 + opacity: 0.9;
1.362 + border: 1px dashed rgba(0,0,0,.12);
1.363 + border-bottom: none;
1.364 + -moz-border-end: none;
1.365 + box-shadow: 1px 1px 0 rgba(255,255,255,.15);
1.366 +}
1.367 +
1.368 +html[dir=rtl] .guideTrench {
1.369 + box-shadow: -1px 1px 0 rgba(255,255,255,.15);
1.370 +}
1.371 +
1.372 +.visibleTrench {
1.373 + opacity: 0.05;
1.374 +}
1.375 +
1.376 +.activeVisibleTrench {
1.377 + opacity: 0;
1.378 +}
1.379 +
1.380 +.activeVisibleTrench.activeTrench {
1.381 + opacity: 0.45;
1.382 +}
1.383 +
1.384 +.visibleTrench.border,
1.385 +.activeVisibleTrench.border {
1.386 + background-color: red;
1.387 +}
1.388 +
1.389 +.visibleTrench.guide,
1.390 +.activeVisibleTrench.guide {
1.391 + background-color: blue;
1.392 +}
1.393 +
1.394 +/* Other
1.395 +----------------------------------*/
1.396 +
1.397 +.active {
1.398 + box-shadow: 5px 5px 3px rgba(0,0,0,.5);
1.399 +}
1.400 +
1.401 +html[dir=rtl] .active {
1.402 + box-shadow: -5px 5px 3px rgba(0,0,0,.5);
1.403 +}
1.404 +
1.405 +.acceptsDrop {
1.406 + box-shadow: 2px 2px 7px -1px rgba(0,0,0,.6);
1.407 +}
1.408 +
1.409 +html[dir=rtl] .acceptsDrop {
1.410 + box-shadow: -2px 2px 7px -1px rgba(0,0,0,.6);
1.411 +}
1.412 +
1.413 +.titlebar {
1.414 + cursor: move;
1.415 + font-size: 12px;
1.416 + height: 18px;
1.417 +}
1.418 +
1.419 +input.name {
1.420 + background: transparent;
1.421 + border: 1px solid transparent;
1.422 + color: #999;
1.423 + margin-top: 3px;
1.424 + -moz-margin-end: 0;
1.425 + margin-bottom: 0;
1.426 + -moz-margin-start: 3px;
1.427 + padding: 1px;
1.428 +}
1.429 +
1.430 +html[dir=rtl] input.name {
1.431 + background-position: right top;
1.432 +}
1.433 +
1.434 +.title-container:hover input.name,
1.435 +.title-container input.name:focus {
1.436 + border: 1px solid #ddd;
1.437 +}
1.438 +
1.439 +.title-container:hover input.name-locked {
1.440 + border: 1px solid transparent !important;
1.441 + cursor: default;
1.442 +}
1.443 +
1.444 +input.name:focus {
1.445 + color: #555;
1.446 +}
1.447 +
1.448 +input.name::-moz-placeholder {
1.449 + opacity: 1.0;
1.450 + font-style: italic !important;
1.451 + color: transparent;
1.452 + background-image: url(chrome://browser/skin/tabview/edit-light.png);
1.453 + background-repeat: no-repeat;
1.454 +}
1.455 +
1.456 +.title-container:hover input.name::-moz-placeholder {
1.457 + color: #CCC;
1.458 + background-image: none;
1.459 +}
1.460 +
1.461 +input.name:focus::-moz-placeholder {
1.462 + background-image: none;
1.463 +}
1.464 +
1.465 +.title-shield {
1.466 + margin-top: 3px;
1.467 + -moz-margin-end: 0;
1.468 + margin-bottom: 0;
1.469 + -moz-margin-start: 3px;
1.470 + padding: 1px;
1.471 + left: 0;
1.472 + top: 0;
1.473 + height: 100%;
1.474 + width: -moz-available;
1.475 + cursor: text;
1.476 +}
1.477 +
1.478 +html[dir=rtl] .title-shield {
1.479 + left: auto;
1.480 + right: 0;
1.481 +}
1.482 +
1.483 +.transparentBorder {
1.484 + border: 1px solid transparent !important;
1.485 +}
1.486 +
1.487 +.stackExpander {
1.488 + cursor: pointer;
1.489 + bottom: 8px;
1.490 + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);
1.491 + width: 24px;
1.492 + height: 24px;
1.493 +}
1.494 +
1.495 +.stackExpander:hover {
1.496 + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);
1.497 +}
1.498 +
1.499 +/* Resizable
1.500 +----------------------------------*/
1.501 +.resizer {
1.502 + background-image: url(chrome://global/skin/icons/resizer.png);
1.503 + width: 16px;
1.504 + height: 16px;
1.505 + bottom: 0px;
1.506 + right: 0px;
1.507 + opacity: .2;
1.508 +}
1.509 +
1.510 +html[dir=rtl] .resizer {
1.511 + right: auto;
1.512 + left: 0;
1.513 + transform: scaleX(-1);
1.514 +}
1.515 +
1.516 +.iq-resizable-handle {
1.517 + font-size: 0.1px;
1.518 +}
1.519 +
1.520 +.iq-resizable-se {
1.521 + cursor: se-resize;
1.522 + width: 12px;
1.523 + height: 12px;
1.524 + padding-right: 3px;
1.525 + padding-bottom: 3px;
1.526 + right: -2px;
1.527 + bottom: -2px;
1.528 +}
1.529 +
1.530 +html[dir=rtl] .iq-resizable-se {
1.531 + cursor: sw-resize;
1.532 + right: auto;
1.533 + left: 1px;
1.534 +}
1.535 +
1.536 +/* Exit button
1.537 ++----------------------------------*/
1.538 +#exit-button {
1.539 + width: 18px;
1.540 + height: 18px;
1.541 + -moz-margin-end: 4px;
1.542 + margin-top: 2px;
1.543 + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 90, 18, 72);
1.544 + background-attachment: scroll;
1.545 + background-repeat: no-repeat;
1.546 + border: none;
1.547 +}
1.548 +
1.549 +#exit-button[groups="0"] {
1.550 + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 18, 18, 0);
1.551 +}
1.552 +
1.553 +#exit-button[groups="1"] {
1.554 + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 36, 18, 18);
1.555 +}
1.556 +
1.557 +#exit-button[groups="2"] {
1.558 + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 54, 18, 36);
1.559 +}
1.560 +
1.561 +#exit-button[groups="3"] {
1.562 + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 72, 18, 54);
1.563 +}
1.564 +
1.565 +/* Search
1.566 +----------------------------------*/
1.567 +#searchshade{
1.568 + background-color: rgba(0,0,0,.42);
1.569 + width: 100%;
1.570 + height: 100%;
1.571 +}
1.572 +
1.573 +#search{
1.574 + width: 100%;
1.575 + height: 100%;
1.576 +}
1.577 +
1.578 +#searchbox{
1.579 + width: 270px;
1.580 + max-width: -moz-available;
1.581 + -moz-margin-start: 20px;
1.582 + height: 30px;
1.583 + box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,1), 0px 0px 9px rgba(0,0,0,.8);
1.584 + color: white;
1.585 + border: none;
1.586 + background-color: #272727;
1.587 + border-radius: 0.4em;
1.588 + -moz-padding-start: 5px;
1.589 + -moz-padding-end: 5px;
1.590 + font-size: 14px;
1.591 +}
1.592 +
1.593 +#actions{
1.594 + top: -3px;
1.595 + padding-top: 3px;
1.596 + width: 29px;
1.597 + border: none;
1.598 + text-align: center;
1.599 + background-color: #E0EAF5;
1.600 + border-radius: 0.4em;
1.601 + box-shadow:
1.602 + 0 1px 0 #FFFFFF inset,
1.603 + 0 -1px 1px rgba(255, 255, 255, 0.8) inset,
1.604 + 1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.605 + -1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.606 + 0 1px 3px rgba(4, 38, 60, 0.6);
1.607 +}
1.608 +
1.609 +html[dir=rtl] #actions {
1.610 + box-shadow:
1.611 + 0 1px 0 #FFFFFF inset,
1.612 + 0 -1px 1px rgba(255, 255, 255, 0.8) inset,
1.613 + -1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.614 + 1px 0 1px rgba(255, 255, 255, 0.8) inset,
1.615 + 0 1px 3px rgba(4, 38, 60, 0.6);
1.616 +}
1.617 +
1.618 +#actions #searchbutton{
1.619 + background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
1.620 + border: none;
1.621 + width: 20px;
1.622 + height: 20px;
1.623 + margin-top: 3px;
1.624 + -moz-margin-end: 1px;
1.625 +}
1.626 +
1.627 +.notMainMatch{
1.628 + opacity: .70;
1.629 +}
1.630 +
1.631 +#otherresults {
1.632 + left: 0px;
1.633 + bottom: 0px;
1.634 + width: 100%;
1.635 + height: 30px;
1.636 + background-color: rgba(0,0,0,.3);
1.637 + box-shadow: 0px -1px 0px rgba(255,255,255,.1), inset 0px 2px 5px rgba(0,0,0,.3);
1.638 +}
1.639 +
1.640 +html[dir=rtl] #otherresults {
1.641 + left: auto;
1.642 + right: 0;
1.643 +}
1.644 +
1.645 +#otherresults .label {
1.646 + color: #999;
1.647 + line-height: 30px;
1.648 + -moz-margin-start: 5px;
1.649 + -moz-margin-end: 5px;
1.650 +}
1.651 +
1.652 +.inlineMatch {
1.653 + background-color: #EBEBEB;
1.654 + border-radius: 0.4em;
1.655 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
1.656 + border: 1px solid rgba(255, 255, 255, 0.5);
1.657 + -moz-padding-start: 3px;
1.658 + -moz-padding-end: 3px;
1.659 + height: 20px;
1.660 + -moz-margin-end: 5px;
1.661 + cursor: pointer;
1.662 +}
1.663 +
1.664 +.inlineMatch:hover {
1.665 + opacity: 1.0;
1.666 +}
1.667 +
1.668 +.inlineMatch > img {
1.669 + -moz-margin-end: 5px;
1.670 + position: relative;
1.671 + top: 2px;
1.672 + width: 16px;
1.673 + height: 16px;
1.674 +}
1.675 +
1.676 +.inlineMatch > span {
1.677 + max-width: 200px;
1.678 + height: 15px;
1.679 +}
