1 files changed, 445 insertions, 0 deletions
diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css
new file mode 100644
index 000000000..db70a340a
--- /dev/null
+++ b/devtools/client/themes/styleeditor.css
@@ -0,0 +1,445 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+#style-editor-chrome {
+  -moz-box-flex: 1;
+}
+
+.splitview-nav > li,
+.stylesheet-info,
+.stylesheet-more,
+.stylesheet-rule-count,
+li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
+li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
+  display: -moz-box;
+}
+
+.devtools-toolbar > spacer {
+  -moz-box-flex: 1;
+}
+
+.style-editor-newButton {
+  list-style-image: url(images/add.svg);
+}
+
+.style-editor-importButton {
+  list-style-image: url(images/import.svg);
+}
+
+.stylesheet-details-container {
+  -moz-box-flex: 1;
+}
+
+.stylesheet-media-container {
+  overflow-y: auto;
+}
+
+.stylesheet-error-message {
+  display: none;
+}
+
+li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
+  display: block;
+}
+
+.stylesheet-title,
+.stylesheet-name {
+  text-decoration: none;
+}
+
+.stylesheet-name {
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.stylesheet-name > label {
+  display: inline;
+  cursor: pointer;
+}
+
+.stylesheet-info > h1 {
+  -moz-box-flex: 1;
+}
+
+.splitview-nav > li > hgroup.stylesheet-info {
+  -moz-box-pack: center;
+}
+
+.stylesheet-more > spacer {
+  -moz-box-flex: 1;
+}
+
+.theme-dark .stylesheet-title,
+.theme-dark .stylesheet-name {
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .stylesheet-rule-count,
+.theme-dark .stylesheet-linked-file,
+.theme-dark .stylesheet-saveButton {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-light .stylesheet-title,
+.theme-light .stylesheet-name {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-light .stylesheet-rule-count,
+.theme-light .stylesheet-linked-file,
+.theme-light .stylesheet-saveButton {
+  color: var(--theme-body-color);
+}
+
+.stylesheet-saveButton {
+  display: none;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.splitview-active .stylesheet-title,
+.splitview-active .stylesheet-name,
+.theme-light .splitview-active .stylesheet-rule-count,
+.theme-light .splitview-active .stylesheet-linked-file,
+.theme-light .splitview-active .stylesheet-saveButton {
+  color: var(--theme-selection-color);
+}
+
+.splitview-nav:focus {
+  outline: 0; /* focus ring is on the stylesheet name */
+}
+
+.splitview-nav > li {
+  -moz-box-orient: horizontal;
+}
+
+.splitview-nav > li > hgroup {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+.splitview-nav > li.unsaved > hgroup .stylesheet-name {
+  font-style: italic;
+}
+
+.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
+.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
+  font-style: italic;
+}
+
+.splitview-nav.empty > p {
+  padding: 0 10px;
+}
+
+.stylesheet-sidebar {
+  max-width: 400px;
+  min-width: 100px;
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-light .media-rule-label {
+  border-bottom-color: #cddae5; /* Grey */
+}
+
+.theme-dark .media-rule-label {
+  border-bottom-color: #303b47; /* Grey */
+}
+
+.media-rule-label {
+  display: flex;
+  padding: 4px;
+  cursor: pointer;
+  border-bottom: 1px solid;
+}
+
+.media-responsive-mode-toggle {
+  color: var(--theme-highlight-blue);
+  text-decoration: underline;
+}
+
+.media-rule-line {
+  padding-inline-start: 4px;
+}
+
+.media-condition-unmatched {
+  opacity: 0.4;
+}
+
+.media-rule-condition {
+  flex: 1;
+  overflow: hidden;
+}
+
+.stylesheet-enabled {
+  display: -moz-box;
+  cursor: pointer;
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(images/item-toggle.svg);
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: center;
+  background-size: 16px;
+  width: 24px;
+  height: 40px;
+  filter: var(--icon-filter);
+}
+
+.disabled > .stylesheet-enabled {
+  opacity: 0.3;
+}
+
+/* Invert the toggle icon in the active row for light theme */
+.theme-light .splitview-nav > li.splitview-active .stylesheet-enabled {
+  filter: invert(1);
+}
+
+.splitview-nav > li > .stylesheet-enabled:focus,
+.splitview-nav > li:hover > .stylesheet-enabled {
+  outline: 0;
+}
+
+.stylesheet-linked-file:not(:empty){
+  margin-inline-end: 0.4em;
+}
+
+.stylesheet-linked-file:not(:empty):before {
+  margin-inline-start: 0.4em;
+  content: " ↳ ";
+}
+
+li.unsaved > hgroup > h1 > .stylesheet-name:before {
+  content: "*";
+}
+
+li.linked-file-error .stylesheet-linked-file {
+  text-decoration: line-through;
+}
+
+li.linked-file-error .stylesheet-linked-file:after {
+  font-size: 110%;
+  content: " ✘";
+}
+
+li.linked-file-error .stylesheet-rule-count {
+  visibility: hidden;
+}
+
+.stylesheet-more > h3 {
+  font-size: 11px;
+  margin-inline-end: 2px;
+}
+
+.devtools-searchinput,
+.devtools-filterinput {
+  max-width: 25ex;
+  font-size: 11px;
+}
+
+.placeholder a {
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3 {
+  font-size: inherit;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+@media (max-width: 700px) {
+  .stylesheet-sidebar {
+    width: 150px;
+  }
+}
+
+/* portrait mode */
+@media (max-width: 550px) {
+  li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
+  li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
+    display: none;
+  }
+
+  .splitview-nav {
+    box-shadow: none;
+  }
+
+  .splitview-nav > li.splitview-active {
+    background-size: 0 0, 0 0, auto;
+  }
+
+  .stylesheet-enabled {
+    padding: 0;
+    background-position: 0 0;
+    height: 24px;
+  }
+
+  .disabled > .stylesheet-enabled {
+    background-position: -24px 0;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    -moz-box-align: baseline;
+    -moz-box-orient: horizontal;
+    -moz-box-flex: 1;
+  }
+
+  .stylesheet-sidebar {
+    width: 180px;
+  }
+
+  .stylesheet-more {
+    -moz-box-flex: 1;
+    -moz-box-pack: end;
+  }
+
+  .stylesheet-more > spacer {
+    -moz-box-flex: 0;
+  }
+}
+
+/* CSS coverage */
+.csscoverage-report {
+  background-color: var(--theme-toolbar-background);
+  -moz-box-orient: horizontal;
+}
+
+.csscoverage-report-container {
+  height: 100vh;
+  padding: 0 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -moz-box-flex: 1;
+}
+
+.csscoverage-report-content {
+  margin: 20px auto;
+  -moz-column-width: 300px;
+  font-size: 13px;
+  -moz-user-select: text;
+}
+
+.csscoverage-report-summary,
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  display: inline-block;
+}
+
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 950px) {
+  .csscoverage-report-content {
+    display: block;
+  }
+
+  .csscoverage-report-summary {
+    display: block;
+    text-align: center;
+  }
+}
+
+.csscoverage-report h1 {
+  font-size: 120%;
+}
+
+.csscoverage-report h2 {
+  font-size: 110%;
+}
+
+.csscoverage-report h1,
+.csscoverage-report h2,
+.csscoverage-report h3 {
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.csscoverage-report code,
+.csscoverage-report textarea {
+  font-family: var(--monospace-font-family);
+  font-size: inherit;
+}
+
+.csscoverage-list:after {
+  content: ', ';
+}
+
+.csscoverage-list:last-child:after {
+  display: none;
+}
+
+.csscoverage-report textarea {
+  width: 100%;
+  height: 100px;
+}
+
+.csscoverage-report a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.csscoverage-report > .csscoverage-toolbar {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.csscoverage-report > .csscoverage-toolbarbutton {
+  min-width: 4em;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  border-inline-start: none;
+}
+
+.csscoverage-report .pie-table-chart-container {
+  -moz-box-orient: vertical;
+  text-align: start;
+}
+
+.chart-colored-blob[name="Used Preload"] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);
+}
+
+.chart-colored-blob[name=Used] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
+}
+
+.chart-colored-blob[name=Unused] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
+}
+
+/* Undo 'largest' customization */
+.theme-dark .pie-chart-slice[largest] {
+  stroke-width: 1px;
+  stroke: rgba(0,0,0,0.2);
+}
+
+.theme-light .pie-chart-slice[largest] {
+  stroke-width: 1px;
+  stroke: rgba(255,255,255,0.8);
+}
+
+.csscoverage-report .pie-chart-slice {
+  cursor: default;
+}
+
+.csscoverage-report-chart {
+  margin: 0 20px;
+}