gecko-dev/devtools/client/webide/themes/webide.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
 *
 * Icons.png:
 *
 *  actions icons: 100x100. Starts at 0x0.
 *  menu icons: 26x26. Starts at 312x0.
 *  anchors icons: 27x16. Starts at 364x0.
 *
 */

#main-toolbar {
  padding: 0 12px;
}

/*
 * Hide dropdown anchor when we switch to the sidebar layout.
 * TODO: Remove if/when we remove the dropdown layout permanently.
 */
#main-toolbar.sidebar-layout .panel-button-anchor {
  display: none;
}

#action-buttons-container {
  -moz-box-pack: center;
  height: 50px;
}

#panel-buttons-container {
  height: 50px;
  margin-top: -50px;
  pointer-events: none;
}

#panel-buttons-container > .panel-button {
  pointer-events: auto;
}

#action-busy-undetermined {
  height: 24px;
  width: 24px;
}

window.busy .action-button,
window:not(.busy) #action-busy,
window.busy-undetermined #action-busy-determined,
window.busy-determined #action-busy-undetermined {
  display: none;
}

/* Panel buttons */

.panel-button {
  -moz-appearance: none;
  -moz-box-align: center;
  border-width: 0;
  background: none;
}

.panel-button-anchor {
  list-style-image: url('icons.png');
  -moz-image-region: rect(0px,491px,16px,464px);
  width: 12px;
  height: 7px;
}

.panel-button:hover > .panel-button-anchor {
  -moz-image-region: rect(0px,545px,16px,518px);
}

/* Panel buttons - projects */

#project-panel-button {
  -moz-box-pack: start;
  max-width: calc(50vw - 100px);
}

#project-panel-button > .panel-button-image {
  width: 13px;
  height: 13px;
}

#project-panel-button > .panel-button-image[src] {
  /* with app icon */
  width: 20px;
  height: 20px;
}

#project-panel-button.no-project > .panel-button-image {
  list-style-image: url("icons.png");
  -moz-image-region: rect(260px,438px,286px,412px);
}

#project-panel-button > .panel-button-label {
  -moz-box-flex: 1;
}

/* Panel buttons - runtime */

#runtime-panel-button > .panel-button-image {
  list-style-image: url('icons.png');
  -moz-image-region: rect(78px,438px,104px,412px);
  width: 13px;
  height: 13px;
}

#runtime-panel-button[active="true"] > .panel-button-image {
  -moz-image-region: rect(78px,464px,104px,438px);
}

/* Action buttons */

.action-button {
  -moz-appearance: none;
  border-width: 0;
  margin: 0;
  padding: 0;
  list-style-image: url('icons.png');
}

.action-button[disabled="true"] {
  opacity: 0.4;
}

.action-button > .toolbarbutton-icon {
  width: 40px;
  height: 40px;
}

.action-button > .toolbarbutton-text {
  display: none;
}

#action-button-play  { -moz-image-region: rect(0,100px,100px,0) }
#action-button-stop  { -moz-image-region: rect(0,200px,100px,100px) }
#action-button-debug { -moz-image-region: rect(0,300px,100px,200px) }

#action-button-play:not([disabled="true"]):hover  { -moz-image-region: rect(200px,100px,300px,0) }
#action-button-stop:not([disabled="true"]):hover  { -moz-image-region: rect(200px,200px,300px,100px) }
#action-button-debug:not([disabled="true"]):not([active="true"]):hover { -moz-image-region: rect(200px,300px,300px,200px) }

#action-button-play.reload { -moz-image-region: rect(0,400px,100px,303px) }
#action-button-play.reload:hover { -moz-image-region: rect(200px,400px,300px,303px) }

#action-button-debug[active="true"] { -moz-image-region: rect(100px,300px,200px,200px) }

/* Panels */

panel > vbox {
  overflow-x: hidden;
}

panel > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 12px 0;
  min-width: 200px;
  max-width: 400px;
}

.panel-list {
  display: none;
  position: relative;
  max-width: 180px;
  overflow: hidden;
}

#project-listing-panel.panel-list {
  max-width: 165px;
}

.panel-list-wrapper {
  height: 100%;
  width: 100%;
  min-width: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.panel-list-wrapper > iframe {
  height: inherit;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

/* TODO: remove once Bug 1079347 is complete */
.project-listing, #project-listing-splitter, #runtime-listing-splitter {
  display: none;
}

#project-listing-splitter[sidebar-displayed], #project-listing-panel[sidebar-displayed],
#project-listing-panel[sidebar-displayed] .project-listing,
#runtime-listing-splitter[sidebar-displayed], #runtime-listing-panel[sidebar-displayed],
#runtime-listing-panel[sidebar-displayed] .runtime-listing {
  display: block;
}

.panel-item {
  padding: 3px 12px;
  margin: 0;
  -moz-appearance: none;
  border-width: 0;
  font-size: 13px; /* height of the icons */
}

.panel-item:hover,
.panel-item-complex:hover {
  background: #CBF0FE;
}

.panel-header {
  /* We can't use borders or vertical padding here because
   * panels don't take these into account when calculated the
   * height of the panel.
   */
  background-color: #EEE;
  outline-width: 1px;
  outline-color: #D5D5D5;
  outline-style: solid;
  color: #ACACAC;
  text-transform: uppercase;
  padding: 0 16px;
  line-height: 200%;
  margin: 5px 0;
  font-size: 90%;
  font-weight: bold;
}

.panel-item > .toolbarbutton-icon {
  width: 13px;
  height: 13px;
  margin-right: 12px; /* to compensate panel-item padding */
}

.panel-item > .toolbarbutton-text {
  text-align: start;
}

/* project panel */

.project-panel-item-newapp,
.project-panel-item-openpackaged,
.project-panel-item-openhosted {
  list-style-image: url("icons.png");
}

.project-panel-item-newapp       { -moz-image-region: rect(234px,438px,260px,412px) }
.project-panel-item-openpackaged { -moz-image-region: rect(260px,438px,286px,412px) }
.project-panel-item-openhosted   { -moz-image-region: rect(208px,438px,234px,412px) }

/* runtime panel */

#runtime-panel .panel-arrowcontent {
  padding: 12px 0 0;
}

#runtime-panel-other {
  margin-bottom: 12px;
}

#runtime-details,
#runtime-screenshot,
#runtime-permissions,
#runtime-preferences,
#runtime-settings,
#runtime-disconnect,
#runtime-panel-nousbdevice,
#runtime-panel-noadbhelper,
#runtime-panel-installsimulator,
.runtime-panel-item-usb,
.runtime-panel-item-wifi,
.runtime-panel-item-other,
.runtime-panel-item-simulator,
.configure-button {
  list-style-image: url("icons.png");
}

#runtime-details                { -moz-image-region: rect(156px,438px,182px,412px) }
#runtime-screenshot             { -moz-image-region: rect(130px,438px,156px,412px) }
#runtime-permissions            { -moz-image-region: rect(104px,438px,130px,412px) }
#runtime-preferences, #runtime-settings {
  -moz-image-region: rect(104px,462px,129px,438px);
}
#runtime-disconnect             { -moz-image-region: rect(52px,438px,78px,412px) }
#runtime-panel-nousbdevice      { -moz-image-region: rect(156px,438px,182px,412px) }
#runtime-panel-noadbhelper      { -moz-image-region: rect(234px,438px,260px,412px) }
#runtime-panel-installsimulator { -moz-image-region: rect(0px,438px,26px,412px) }
.runtime-panel-item-usb         { -moz-image-region: rect(52px,438px,78px,412px) }
.runtime-panel-item-wifi        { -moz-image-region: rect(208px,438px,234px,412px) }
.runtime-panel-item-other       { -moz-image-region: rect(26px,438px,52px,412px) }
.runtime-panel-item-simulator   { -moz-image-region: rect(0px,438px,26px,412px) }
.configure-button               { -moz-image-region: rect(104px,462px,129px,438px) }

.configure-button > .toolbarbutton-icon {
  width: 13px;
  height: 13px;
}

.configure-button > .toolbarbutton-text {
  display: none;
}

#runtime-actions {
  border-top: 1px solid rgba(221,221,221,1);
}

#runtime-actions > toolbarbutton {
  border-top: 1px solid rgba(221,221,221,1);
  background-color: rgba(233,233,233,1);
  color: rgba(87,87,87,1);
  padding-top: 8px;
  padding-bottom: 8px;
}

#runtime-actions > toolbarbutton[disabled="true"] {
  opacity: 0.4;
}

#runtime-actions > toolbarbutton:not([disabled="true"]):hover {
  background-color: #CBF0FE;
}

#runtime-actions > toolbarbutton:last-child {
  border-radius: 0 0 3px 3px;
}

/* Main view */

#deck {
  background-color: rgb(225, 225, 225);
  background-image: url('chrome://devtools/skin/themes/app-manager/images/rocket.svg'), url('chrome://devtools/skin/themes/app-manager/images/noise.png');
  background-repeat: no-repeat, repeat;
  background-size: 35%, auto;
  background-position: center center, top left;
%ifndef XP_MACOSX
  border-top: 1px solid #AAA;
%endif
}

.devtools-horizontal-splitter {
  position: relative;
  border-bottom: 1px solid #aaa;
}

/* Toolbox */

#notificationbox[toolboxfullscreen] > .devtools-horizontal-splitter {
  min-height: 0;
  max-height: 0;
}

#notificationbox[toolboxfullscreen] > #deck-panels {
  display: none;
}

#notificationbox[toolboxfullscreen] > #toolbox {
  -moz-box-flex: 1;
}