LCARStrek/navigator/navigator.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /** Contains style definitions for the navigator application
   6  **/
   7
   8 @import url("chrome://navigator/content/navigator.css");
   9 @import url("chrome://communicator/skin/");
  10 @import url("chrome://communicator/skin/bookmarks/bookmarksToolbar.css");
  11
  12 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  13
  14 /* ::::: primary toolbar buttons ::::: */
  15
  16 #back-button {
  17   list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
  18   -moz-image-region: rect(42px 25px 63px 0px);
  19 }
  20
  21 #back-button[disabled="true"] {
  22   -moz-image-region: rect(42px 50px 63px 25px);
  23 }
  24
  25 #back-button:not([disabled="true"]):hover,
  26 #back-button:not([disabled="true"]):hover:active,
  27 #back-button[open="true"] {
  28   -moz-image-region: rect(42px 75px 63px 50px);
  29 }
  30
  31 #forward-button {
  32   list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
  33   -moz-image-region: rect(63px 25px 84px 0px);
  34 }
  35
  36 #forward-button[disabled="true"] {
  37   -moz-image-region: rect(63px 50px 84px 25px);
  38 }
  39
  40 #forward-button:not([disabled="true"]):hover,
  41 #forward-button:not([disabled="true"]):hover:active,
  42 #forward-button[open="true"] {
  43   -moz-image-region: rect(63px 75px 84px 50px);
  44 }
  45
  46 #reload-button {
  47   list-style-image: url("chrome://navigator/skin/icons/navigatoricons.png");
  48   -moz-image-region: rect(0px 25px 21px 0px);
  49 }
  50
  51 #reload-button[disabled="true"] {
  52   -moz-image-region: rect(0px 50px 21px 25px);
  53 }
  54
  55 #reload-button:not([disabled="true"]):hover,
  56 #reload-button:not([disabled="true"]):hover:active {
  57   -moz-image-region: rect(0px 75px 21px 50px);
  58 }
  59
  60 #stop-button {
  61   list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
  62   -moz-image-region: rect(21px 25px 42px 0px);
  63 }
  64
  65 #stop-button[disabled="true"] {
  66   -moz-image-region: rect(21px 50px 42px 25px);
  67 }
  68
  69 #stop-button:not([disabled="true"]):hover,
  70 #stop-button:not([disabled="true"]):hover:active {
  71   -moz-image-region: rect(21px 75px 42px 50px);
  72 }
  73
  74 #home-button {
  75   list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
  76   -moz-image-region: rect(84px 25px 105px 0px);
  77 }
  78
  79 #home-button[disabled="true"] {
  80   -moz-image-region: rect(84px 50px 105px 25px);
  81 }
  82
  83 #home-button:not([disabled="true"]):hover,
  84 #home-button:not([disabled="true"]):hover:active {
  85   -moz-image-region: rect(84px 75px 105px 50px);
  86 }
  87
  88 #sync-button {
  89   list-style-image: url("chrome://communicator/skin/sync/sync-32.png");
  90 }
  91
  92 #sync-button[status=active] {
  93   list-style-image: url("chrome://communicator/skin/sync/sync-32-throbber.png");
  94 }
  95
  96 #clear-button {
  97   list-style-image: url("chrome://global/skin/icons/close-button.gif");
  98 }
  99
 100 #clear-button:hover {
 101   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
 102 }
 103
 104 /* ::::: small primary toolbar buttons ::::: */
 105
 106 toolbar[iconsize="small"] > #back-button {
 107   list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
 108   -moz-image-region: rect(32px 16px 48px 0);
 109 }
 110
 111 toolbar[iconsize="small"] > #back-button[disabled="true"] {
 112   -moz-image-region: rect(32px 32px 48px 16px) !important;
 113 }
 114
 115 toolbar[iconsize="small"] > #back-button:not([disabled="true"]):hover,
 116 toolbar[iconsize="small"] > #back-button:not([disabled="true"]):hover:active {
 117   -moz-image-region: rect(32px 48px 48px 32px);
 118 }
 119
 120 toolbar[iconsize="small"] > #forward-button {
 121   list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
 122   -moz-image-region: rect(48px 16px 64px 0);
 123 }
 124
 125 toolbar[iconsize="small"] > #forward-button[disabled="true"] {
 126   -moz-image-region: rect(48px 32px 64px 16px) !important;
 127 }
 128
 129 toolbar[iconsize="small"] > #forward-button:not([disabled="true"]):hover,
 130 toolbar[iconsize="small"] > #forward-button:not([disabled="true"]):hover:active {
 131   -moz-image-region: rect(48px 48px 64px 32px);
 132 }
 133
 134 toolbar[iconsize="small"] > #reload-button {
 135   list-style-image: url("chrome://navigator/skin/icons/navigatoricons-small.png");
 136   -moz-image-region: rect(0 16px 16px 0);
 137 }
 138
 139 toolbar[iconsize="small"] > #reload-button[disabled="true"] {
 140   -moz-image-region: rect(0 32px 16px 16px) !important;
 141 }
 142
 143 toolbar[iconsize="small"] > #reload-button:not([disabled="true"]):hover,
 144 toolbar[iconsize="small"] > #reload-button:not([disabled="true"]):hover:active {
 145   -moz-image-region: rect(0 48px 16px 32px);
 146 }
 147
 148 toolbar[iconsize="small"] > #stop-button {
 149   list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
 150   -moz-image-region: rect(16px 16px 32px 0);
 151 }
 152
 153 toolbar[iconsize="small"] > #stop-button[disabled="true"] {
 154   -moz-image-region: rect(16px 32px 32px 16px) !important;
 155 }
 156
 157 toolbar[iconsize="small"] > #stop-button:not([disabled="true"]):hover,
 158 toolbar[iconsize="small"] > #stop-button:not([disabled="true"]):hover:active {
 159   -moz-image-region: rect(16px 48px 32px 32px);
 160 }
 161
 162 toolbar[iconsize="small"] > #home-button {
 163   list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
 164   -moz-image-region: rect(64px 16px 80px 0);
 165 }
 166
 167 toolbar[iconsize="small"] > #home-button[disabled="true"] {
 168   -moz-image-region: rect(64px 32px 80px 16px) !important;
 169 }
 170
 171 toolbar[iconsize="small"] > #home-button:not([disabled="true"]):hover,
 172 toolbar[iconsize="small"] > #home-button:not([disabled="true"]):hover:active {
 173   -moz-image-region: rect(64px 48px 80px 32px);
 174 }
 175
 176 toolbar[iconsize="small"] > toolbarpaletteitem > #sync-button,
 177 toolbar[iconsize="small"] > #sync-button {
 178   list-style-image: url("chrome://communicator/skin/sync/sync-16.png");
 179 }
 180
 181 toolbar[iconsize="small"] > toolbarpaletteitem > #sync-button[status=active],
 182 toolbar[iconsize="small"] > #sync-button[status=active] {
 183   list-style-image: url("chrome://communicator/skin/sync/sync-16-throbber.png");
 184 }
 185
 186 #FindToolbar:-moz-lwtheme {
 187 /*  -moz-border-top-colors: transparent;
 188   -moz-border-bottom-colors: transparent; */
 189 }
 190
 191 /* ::::: fullscreen window controls ::::: */
 192
 193 #window-controls {
 194   -moz-box-align: center;
 195   padding: 0 1px;
 196   border-left: 3px solid #000000;
 197   -moz-margin-start: 2px;
 198 }
 199
 200 #window-controls > toolbarbutton {
 201   padding: 3px;
 202   -moz-padding-start: 2px;
 203   -moz-padding-end: 1px;
 204 }
 205
 206 toolbar[mode="text"] > #window-controls > toolbarbutton > .toolbarbutton-icon {
 207   display: -moz-box;
 208 }
 209
 210 #minimize-button {
 211   list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
 212 }
 213
 214 #minimize-button:hover {
 215   list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
 216 }
 217
 218 #restore-button {
 219   list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
 220 }
 221
 222 #restore-button:hover {
 223   list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
 224 }
 225
 226 #close-button {
 227   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
 228 }
 229
 230 #close-button:hover {
 231   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
 232 }
 233
 234 /* ::::: nav-bar-inner ::::: */
 235
 236 .nav-bar-class {
 237   -moz-padding-start: 1px;
 238   -moz-padding-end: 1px;
 239   min-width: 0px;
 240   -moz-box-align: center;
 241 }
 242
 243 #urlbar {
 244   border-radius: 5px;
 245   margin: 0;
 246   -moz-margin-start: 3px;
 247   /* make color as light as possible to deal with dark non-domain parts */
 248   color: #FFBFFF;
 249 }
 250
 251 .urlbar-security-level {
 252   border-radius: 3px 0 0 3px;
 253   padding: 2px;
 254 }
 255
 256 .urlbar-security-level[level="high"] {
 257   background-color: #FFCF00;
 258   color: #000000;
 259 }
 260
 261 #wrapper-nav-bar-inner[place="palette"] > #nav-bar-inner > .button-toolbar,
 262 #wrapper-nav-bar-inner[place="palette"] > #nav-bar-inner > #urlbar > .urlbar-icons {
 263   display: none;
 264 }
 265
 266 /* ::::: notification popups ::::: */
 267
 268 .popup-notification-icon {
 269   width: 64px;
 270   height: 64px;
 271   -moz-margin-end: 10px;
 272 }
 273
 274 .popup-notification-icon[popupid="geolocation"] {
 275   list-style-image: url("chrome://communicator/skin/icons/geolocation-64.png");
 276 }
 277
 278 .popup-notification-icon[popupid="addon-install-disabled"],
 279 .popup-notification-icon[popupid="addon-install-blocked"],
 280 .popup-notification-icon[popupid="addon-install-started"],
 281 .popup-notification-icon[popupid="addon-install-cancelled"],
 282 .popup-notification-icon[popupid="addon-install-failed"],
 283 .popup-notification-icon[popupid="addon-install-complete"],
 284 .popup-notification-icon[popupid="lwtheme-install-request"],
 285 .popup-notification-icon[popupid="lwtheme-install-notification"] {
 286   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
 287   width: 32px;
 288   height: 32px;
 289 }
 290
 291 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
 292 .popup-notification-icon[popupid="indexedDB-quota-prompt"] {
 293   list-style-image: url("chrome://global/skin/icons/question-64.png");
 294 }
 295
 296 .popup-notification-icon[popupid="password-change"],
 297 .popup-notification-icon[popupid="password-save"] {
 298   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
 299 }
 300
 301 .popup-notification-icon[popupid="click-to-play-plugins"] {
 302   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
 303   width: 32px;
 304   height: 32px;
 305 }
 306
 307 .addon-progress-description {
 308   width: 350px;
 309   max-width: 350px;
 310 }
 311
 312 /* Notification icon box */
 313 #notification-popup-box {
 314   -moz-margin-end: 3px;
 315 }
 316
 317 .notification-anchor-icon:-moz-focusring {
 318   outline: 1px dotted;
 319 }
 320
 321 #default-notification-icon {
 322   list-style-image: url("chrome://global/skin/icons/information-16.png");
 323   width: 16px;
 324   height: 16px;
 325 }
 326
 327 #geo-notification-icon {
 328   list-style-image: url("chrome://communicator/skin/icons/geolocation-16.png");
 329   width: 16px;
 330   height: 16px;
 331 }
 332
 333 #addons-notification-icon {
 334   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
 335   width: 16px;
 336   height: 16px;
 337 }
 338
 339 #indexedDB-notification-icon {
 340   list-style-image: url("chrome://global/skin/icons/question-16.png");
 341   width: 16px;
 342   height: 16px;
 343 }
 344
 345 #password-notification-icon {
 346   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
 347   width: 16px;
 348   height: 16px;
 349 }
 350
 351 #plugins-notification-icon {
 352   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric-16.png");
 353   width: 16px;
 354   height: 16px;
 355 }
 356
 357 /* ::::: page proxy icon ::::: */
 358
 359 #page-proxy-deck,
 360 #page-proxy-favicon,
 361 #page-proxy-button {
 362   width: 16px;
 363   height: 16px;
 364 }
 365
 366 #page-proxy-deck {
 367   cursor: -moz-grab;
 368   margin: 0;
 369 }
 370
 371 #page-proxy-button {
 372   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-item.gif");
 373 }
 374
 375 #page-proxy-favicon {
 376   list-style-image: none;
 377 }
 378
 379 /* ::::: autocomplete ::::: */
 380
 381 .autocomplete-treebody::-moz-tree-cell-text(value) {
 382   -moz-padding-start: 13px;
 383 }
 384
 385 .autocomplete-treebody::-moz-tree-cell-text(comment) {
 386   color: #E7ADE7;
 387 /*  font-style: italic; */
 388 }
 389
 390 .autocomplete-search-box {
 391   border-top: 1px solid #FF9F00;
 392   background-color: #9C9CFF;
 393   color: #000000;
 394 }
 395
 396 .autocomplete-result-popup[nomatch] > .autocomplete-search-box {
 397   border-top: 1px solid #9C9CFF;
 398 }
 399
 400 .autocomplete-search-engine {
 401   padding: 2px;
 402 }
 403
 404 .autocomplete-search-engine[menuactive="true"] {
 405   background-color: #008484;
 406   color: #FFCF00;
 407 }
 408
 409 .autocomplete-search-engine-img {
 410   -moz-margin-end: 4px;
 411 }
 412
 413 .autocomplete-history-dropmarker:hover {
 414   background-color: #FFCF00;
 415 }
 416
 417 .autocomplete-history-dropmarker:hover:active,
 418 .autocomplete-history-dropmarker[open="true"] {
 419   background-color: #FF9F00;
 420 }
 421
 422 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
 423   color: #E7ADE7;
 424 }
 425
 426 /* ::::: go and searchbuttons ::::: */
 427
 428 #search-button,
 429 #go-button {
 430   margin: 0;
 431   padding: 2px 0;
 432   -moz-margin-start: 2px;
 433   background-color: #000000;
 434 }
 435
 436 #search-button:hover,
 437 #go-button:hover {
 438   background-color: #FFCF00;
 439 }
 440
 441 /* care that those buttons base on the same min height of 16px that the urlbar
 442    autocomplete box gets through site icon and urlbar icons at the right */
 443 #search-button > .button-box,
 444 #go-button > .button-box {
 445   min-height: 16px;
 446 }
 447
 448 #search-button {
 449 /*  list-style-image: url("chrome://communicator/skin/icons/search.gif"); */
 450 }
 451
 452 #search-button > .button-box > .button-icon {
 453   display: -moz-box;
 454 }
 455
 456 /*
 457 toolbar[mode="text"] #search-button > .button-box > .button-icon,
 458 toolbar[mode="icons"] #search-button > .button-box > .button-text {
 459   display: none;
 460 }
 461 */
 462
 463 /* ::::: search bar ::::: */
 464
 465 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
 466 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) {
 467   color: #E7ADE7;
 468   font-size: smaller;
 469 }
 470
 471 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
 472   border-top: 1px solid #E7ADE7;
 473 }
 474
 475 /* ::::: throbber ::::: */
 476
 477 #throbber-box {
 478   -moz-margin-start: 2px;
 479 }
 480
 481 /* ::::: security button ::::: */
 482
 483 #security-button {
 484   list-style-image: url("chrome://communicator/skin/icons/lock-insecure.gif");
 485 }
 486
 487 #security-button > .statusbarpanel-contentbox > .statusbarpanel-text {
 488   margin: 0px;
 489 }
 490
 491 /* |high| and |low| styles could be different, to better reflect the secure level... */
 492 #security-button[level="high"] > .statusbarpanel-contentbox {
 493   list-style-image: url("chrome://communicator/skin/icons/lock-secure-hover.png");
 494   background-color: #FFCF00;
 495 }
 496
 497 #security-button[level="broken"] > .statusbarpanel-contentbox {
 498   list-style-image: url("chrome://communicator/skin/icons/lock-broken.gif");
 499   background-color: #FF0000;
 500 }
 501
 502 #security-button[label][level="high"] > .statusbarpanel-contentbox {
 503   list-style-image: url("chrome://communicator/skin/icons/lock-secure.gif");
 504   background-color: #008484;
 505   color: #FFCF00;
 506 }
 507
 508 #ev-button {
 509   list-style-image: url("chrome://communicator/skin/icons/identity.png");
 510 }
 511
 512 #popupIcon {
 513   list-style-image:url("chrome://navigator/skin/icons/popup-blocked.gif");
 514 }
 515
 516 #invalid-form-popup {
 517   border: 1px solid #FFCF00;
 518   border : 1px outset #FFFFCC;
 519   padding: 2px 3px 0px 3px;
 520   max-width: 40em;
 521   background-color: #9C9CFF;
 522   color: #000000;
 523   font-weight: bold;
 524 }
 525
 526 /* ::::: personal toolbar ::::: */
 527
 528 #bookmarks-button {
 529   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 530 }
 531
 532 #bookmarks-button[open="true"] {
 533   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 534 }
 535
 536 toolbarbutton.chevron {
 537   list-style-image: url("chrome://navigator/skin/icons/chevron.gif") !important;
 538 }
 539
 540 toolbarbutton.chevron:hover,
 541 toolbarbutton.chevron[open="true"] {
 542   list-style-image: url("chrome://navigator/skin/icons/chevron-hover.gif") !important;
 543 }
 544
 545 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 546   display: none;
 547 }
 548
 549 toolbarbutton.chevron > .toolbarbutton-text {
 550   display: none; /* hide chevron label which has a width even if blank */
 551 }
 552
 553 toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 554   display: -moz-box; /* display chevron icon in text mode */
 555 }
 556
 557 /* Prevent [mode="icons"|"text"] from hiding the label and icon */
 558 #bookmarks-ptf .bookmark-item > .toolbarbutton-text,
 559 #bookmarks-ptf .bookmark-item > .toolbarbutton-icon {
 560   display: -moz-box !important;
 561 }
 562
 563 #PersonalToolbar[iconsize="small"] > toolbarpaletteitem > #home-button > .toolbarbutton-icon,
 564 #PersonalToolbar[iconsize="small"] > #home-button > .toolbarbutton-icon {
 565   /* width: 16px;
 566   height: 16px; */
 567 }
 568
 569 #PersonalToolbar > #home-button {
 570   cursor: pointer;
 571 }
 572
 573 #PersonalToolbar > #home-button[disabled="true"] {
 574   cursor: default !important;
 575 }
 576
 577 /*
 578   In customize mode we hide the normal bookmark items and show a placeholder
 579   for the drag/drop UI.
 580 */
 581 .bookmarks-toolbar-customize {
 582   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
 583   display: none;
 584   max-width: 15em !important;
 585 }
 586
 587 #wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
 588   width: 16px;
 589   height: 16px;
 590   background: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") no-repeat;
 591 }
 592
 593 /* ::::: star button ::::: */
 594
 595 #star-button {
 596   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark.png");
 597   -moz-image-region: rect(16px 16px 32px 0px);
 598 }
 599
 600 #star-button:hover {
 601   -moz-image-region: rect(16px 32px 32px 16px);
 602 }
 603
 604 #star-button:hover:active {
 605   -moz-image-region: rect(16px 48px 32px 32px);
 606 }
 607
 608 #star-button[starred="true"] {
 609   -moz-image-region: rect(0px 16px 16px 0px);
 610 }
 611
 612 #star-button[starred="true"]:hover {
 613   -moz-image-region: rect(0px 32px 16px 16px);
 614 }
 615
 616 #star-button[starred="true"]:hover:active {
 617   -moz-image-region: rect(0px 48px 16px 32px);
 618 }
 619
 620 #editBookmarkPanelStarIcon {
 621   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark.png");
 622   -moz-image-region: rect(0px 16px 16px 0px);
 623 }
 624
 625 /* ::::: feeds ::::: */
 626
 627 .feedsMenu {
 628   list-style-image: url("chrome://navigator/skin/linkButtons/feeds.png");
 629   -moz-image-region: rect(0px 16px 16px 0px);
 630 }
 631
 632 .feedsMenu[disabled="true"] {
 633   -moz-image-region: rect(32px 16px 48px 0px);
 634 }
 635
 636 .feedsButton {
 637   list-style-image: url("chrome://navigator/skin/linkButtons/feeds.png");
 638   -moz-image-region: rect(0px 32px 16px 16px);
 639 }
 640
 641 .feedsButton:hover {
 642   -moz-image-region: rect(16px 32px 32px 16px);
 643 }
 644
 645 .feedsButton:hover:active {
 646   -moz-image-region: rect(48px 32px 64px 16px);
 647 }