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