1 files changed, 149 insertions, 0 deletions
diff --git a/devtools/client/webide/themes/webide.css b/devtools/client/webide/themes/webide.css
new file mode 100644
index 000000000..0dea91a5f
--- /dev/null
+++ b/devtools/client/webide/themes/webide.css
@@ -0,0 +1,149 @@
+/* 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;
+}
+
+#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 - 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-list {
+  display: none;
+  position: relative;
+  max-width: 190px;
+  overflow: hidden;
+}
+
+#project-listing-panel {
+  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;
+}
+
+[sidebar-displayed] {
+  display: block;
+}
+
+/* Main view */
+
+#deck {
+  background-color: rgb(225, 225, 225);
+  background-image: url('rocket.svg'), url('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;
+}