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