summaryrefslogtreecommitdiffstats
path: root/devtools/client/debugger/new/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/debugger/new/styles.css')
-rw-r--r--devtools/client/debugger/new/styles.css1724
1 files changed, 1724 insertions, 0 deletions
diff --git a/devtools/client/debugger/new/styles.css b/devtools/client/debugger/new/styles.css
new file mode 100644
index 000000000..479bee363
--- /dev/null
+++ b/devtools/client/debugger/new/styles.css
@@ -0,0 +1,1724 @@
+:root.theme-light,
+:root .theme-light {
+ --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+#mount {
+ display: flex;
+ height: 100%;
+}
+
+
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ background: transparent;
+}
+
+::-webkit-scrollbar-track {
+ border-radius: 8px;
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ border-radius: 8px;
+ background: rgba(113,113,113,0.5);
+}
+
+:root.theme-dark .CodeMirror-scrollbar-filler {
+ background: transparent;
+}
+.landing-page {
+ flex: 1;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-direction: row;
+}
+
+.landing-page .sidebar {
+ display: flex;
+ background-color: var(--theme-tab-toolbar-background);
+ width: 200px;
+ height: 100%;
+ flex-direction: column;
+}
+
+.landing-page .sidebar h1 {
+ color: var(--theme-body-color);
+ font-size: 24px;
+ margin: 0;
+ line-height: 30px;
+ font-weight: normal;
+ padding: 40px 20px;
+}
+
+.landing-page .sidebar ul {
+ list-style: none;
+ padding: 0;
+ line-height: 30px;
+ font-size: 18px;
+}
+
+.landing-page .sidebar li {
+ padding: 5px 20px;
+}
+
+.landing-page .sidebar li.selected {
+ background: var(--theme-search-overlays-semitransparent);
+ transition: all 0.25s ease;
+}
+
+.landing-page .sidebar li:hover {
+ background: var(--theme-selection-background);
+ cursor: pointer;
+}
+
+.landing-page .sidebar li a {
+ color: var(--theme-body-color);
+}
+
+.landing-page .sidebar li:hover a {
+ color: var(--theme-selection-color);
+}
+
+.landing-page .panel {
+ display: flex;
+ flex: 1;
+ height: 100%;
+ overflow: auto;
+ flex-direction: column;
+}
+
+.landing-page .panel .title {
+ margin: 20px 40px;
+ width: calc(100% - 80px);
+ font-size: 16px;
+ border-bottom: 1px solid var(--theme-splitter-color);
+ height: 54px;
+}
+
+.landing-page .panel h2 {
+ color: var(--theme-body-color);
+ font-weight: normal;
+}
+
+.landing-page .panel .center {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.landing-page .panel .center .center-message {
+ margin: 40px;
+ font-size: 16px;
+ line-height: 25px;
+ padding: 10px;
+}
+
+.landing-page .center a {
+ color: var(--theme-highlight-bluegrey);
+ text-decoration: none;
+}
+
+.landing-page .tab-group {
+ margin: 40px;
+}
+
+.landing-page .tab-list {
+ list-style: none;
+ padding: 0px;
+ margin: 0px;
+}
+
+.landing-page .tab {
+ border-bottom: 1px solid var(--theme-splitter-color);
+ padding: 10px;
+ font-family: sans-serif;
+}
+
+.landing-page .tab:hover {
+ background-color: var(--theme-toolbar-background);
+ cursor: pointer;
+}
+
+.landing-page .tab-title {
+ line-height: 25px;
+ font-size: 16px;
+ color: var(--theme-highlight-bluegrey);
+}
+
+.landing-page .tab-url {
+ color: var(--theme-comment);
+}
+
+.landing-page .panel .center .footer-note {
+ flex: 1;
+ padding: 50px;
+ font-size: 14px;
+ color: var(--theme-comment);
+ bottom: 0;
+ position: absolute;
+}
+/* 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/. */
+
+:root.theme-light,
+:root .theme-light {
+ --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
+ --theme-faded-tab-color: #7e7e7e;
+}
+
+:root.theme-dark,
+:root .theme-dark {
+ --theme-faded-tab-color: #6e7d8c;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+#mount {
+ display: flex;
+ height: 100%;
+}
+
+.debugger {
+ display: flex;
+ flex: 1;
+ height: 100%;
+}
+
+.center-pane {
+ display: flex;
+ position: relative;
+ flex: 1;
+ background-color: var(--theme-tab-toolbar-background);
+ overflow: hidden;
+}
+
+.editor-container {
+ display: flex;
+ flex: 1;
+}
+
+.subsettings:hover {
+ cursor: pointer;
+}
+
+.search-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ z-index: 200;
+ background-color: var(--theme-search-overlays-semitransparent);
+}
+
+.search-container .autocomplete {
+ flex: 1;
+}
+
+.search-container .close-button {
+ width: 16px;
+ margin-top: 25px;
+ margin-right: 20px;
+}
+
+.welcomebox {
+ width: calc(100% - 1px);
+
+ /* Offsetting it by 30px for the sources-header area */
+ height: calc(100% - 30px);
+ position: absolute;
+ top: 30px;
+ left: 0;
+ padding: 50px 0;
+ text-align: center;
+ font-size: 1.25em;
+ color: var(--theme-comment-alt);
+ background-color: var(--theme-tab-toolbar-background);
+ font-weight: lighter;
+ z-index: 100;
+}
+menupopup {
+ position: fixed;
+ z-index: 10000;
+ background: white;
+ border: 1px solid #cccccc;
+ padding: 5px 0;
+ background: #f2f2f2;
+ border-radius: 5px;
+ color: #585858;
+ box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8);
+ min-width: 130px;
+}
+
+menuitem {
+ display: block;
+ padding: 0 20px;
+ line-height: 20px;
+ font-weight: 500;
+ font-size: 13px;
+}
+
+menuitem:hover {
+ background: #3780fb;
+ color: white;
+ cursor: pointer;
+}
+
+menuseparator {
+ border-bottom: 1px solid #cacdd3;
+ width: 100%;
+ height: 5px;
+ display: block;
+ margin-bottom: 5px;
+}
+
+#contextmenu-mask.show {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 999;
+}
+/* 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/. */
+
+.split-box {
+ display: flex;
+ flex: 1;
+ min-width: 0;
+ height: 100%;
+ width: 100%;
+}
+
+.split-box.vert {
+ flex-direction: row;
+}
+
+.split-box.horz {
+ flex-direction: column;
+}
+
+.split-box > .uncontrolled {
+ display: flex;
+ flex: 1;
+ min-width: 0;
+ overflow: auto;
+}
+
+.split-box > .controlled {
+ display: flex;
+ overflow: auto;
+}
+
+.split-box > .splitter {
+ background-image: none;
+ border: 0;
+ border-style: solid;
+ border-color: transparent;
+ background-color: var(--theme-splitter-color);
+ background-clip: content-box;
+ position: relative;
+
+ box-sizing: border-box;
+
+ /* Positive z-index positions the splitter on top of its siblings and makes
+ it clickable on both sides. */
+ z-index: 1;
+}
+
+.split-box.vert > .splitter {
+ min-width: calc(var(--devtools-splitter-inline-start-width) +
+ var(--devtools-splitter-inline-end-width) + 1px);
+
+ border-left-width: var(--devtools-splitter-inline-start-width);
+ border-right-width: var(--devtools-splitter-inline-end-width);
+
+ margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
+ margin-right: calc(-1 * var(--devtools-splitter-inline-end-width));
+
+ cursor: ew-resize;
+}
+
+.split-box.horz > .splitter {
+ min-height: calc(var(--devtools-splitter-top-width) +
+ var(--devtools-splitter-bottom-width) + 1px);
+
+ border-top-width: var(--devtools-splitter-top-width);
+ border-bottom-width: var(--devtools-splitter-bottom-width);
+
+ margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
+ margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
+
+ cursor: ns-resize;
+}
+
+.split-box.disabled {
+ pointer-events: none;
+}
+
+/**
+ * Make sure splitter panels are not processing any mouse
+ * events. This is good for performance during splitter
+ * bar dragging.
+ */
+.split-box.dragging > .controlled,
+.split-box.dragging > .uncontrolled {
+ pointer-events: none;
+}
+/* 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/. */
+
+.theme-dark,
+.theme-light {
+ --number-color: var(--theme-highlight-green);
+ --string-color: var(--theme-highlight-orange);
+ --null-color: var(--theme-comment);
+ --object-color: var(--theme-body-color);
+ --caption-color: var(--theme-highlight-blue);
+ --location-color: var(--theme-content-color1);
+ --source-link-color: var(--theme-highlight-blue);
+ --node-color: var(--theme-highlight-bluegrey);
+ --reference-color: var(--theme-highlight-purple);
+}
+
+.theme-firebug {
+ --number-color: #000088;
+ --string-color: #FF0000;
+ --null-color: #787878;
+ --object-color: DarkGreen;
+ --caption-color: #444444;
+ --location-color: #555555;
+ --source-link-color: blue;
+ --node-color: rgb(0, 0, 136);
+ --reference-color: rgb(102, 102, 255);
+}
+
+/******************************************************************************/
+
+.objectLink:hover {
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+.inline {
+ display: inline;
+ white-space: normal;
+}
+
+.objectBox-object {
+ font-weight: bold;
+ color: var(--object-color);
+ white-space: pre-wrap;
+}
+
+.objectBox-string,
+.objectBox-text,
+.objectLink-textNode,
+.objectBox-table {
+ white-space: pre-wrap;
+}
+
+.objectBox-number,
+.objectLink-styleRule,
+.objectLink-element,
+.objectLink-textNode,
+.objectBox-array > .length {
+ color: var(--number-color);
+}
+
+.objectBox-string {
+ color: var(--string-color);
+}
+
+.objectLink-function,
+.objectBox-stackTrace,
+.objectLink-profile {
+ color: var(--object-color);
+}
+
+.objectLink-Location {
+ font-style: italic;
+ color: var(--location-color);
+}
+
+.objectBox-null,
+.objectBox-undefined,
+.objectBox-hint,
+.logRowHint {
+ font-style: italic;
+ color: var(--null-color);
+}
+
+.objectLink-sourceLink {
+ position: absolute;
+ right: 4px;
+ top: 2px;
+ padding-left: 8px;
+ font-weight: bold;
+ color: var(--source-link-color);
+}
+
+/******************************************************************************/
+
+.objectLink-event,
+.objectLink-eventLog,
+.objectLink-regexp,
+.objectLink-object,
+.objectLink-Date {
+ font-weight: bold;
+ color: var(--object-color);
+ white-space: pre-wrap;
+}
+
+/******************************************************************************/
+
+.objectLink-object .nodeName,
+.objectLink-NamedNodeMap .nodeName,
+.objectLink-NamedNodeMap .objectEqual,
+.objectLink-NamedNodeMap .arrayLeftBracket,
+.objectLink-NamedNodeMap .arrayRightBracket,
+.objectLink-Attr .attrEqual,
+.objectLink-Attr .attrTitle {
+ color: var(--node-color);
+}
+
+.objectLink-object .nodeName {
+ font-weight: normal;
+}
+
+/******************************************************************************/
+
+.objectLeftBrace,
+.objectRightBrace,
+.arrayLeftBracket,
+.arrayRightBracket {
+ cursor: pointer;
+ font-weight: bold;
+}
+
+.objectLeftBrace,
+.arrayLeftBracket {
+ margin-right: 4px;
+}
+
+.objectRightBrace,
+.arrayRightBracket {
+ margin-left: 4px;
+}
+
+/******************************************************************************/
+/* Cycle reference*/
+
+.objectLink-Reference {
+ font-weight: bold;
+ color: var(--reference-color);
+}
+
+.objectBox-array > .objectTitle {
+ font-weight: bold;
+ color: var(--object-color);
+}
+
+.caption {
+ font-weight: bold;
+ color: var(--caption-color);
+}
+
+/******************************************************************************/
+/* Themes */
+
+.theme-dark .objectBox-null,
+.theme-dark .objectBox-undefined,
+.theme-light .objectBox-null,
+.theme-light .objectBox-undefined {
+ font-style: normal;
+}
+
+.theme-dark .objectBox-object,
+.theme-light .objectBox-object {
+ font-weight: normal;
+ white-space: pre-wrap;
+}
+
+.theme-dark .caption,
+.theme-light .caption {
+ font-weight: normal;
+}
+/* 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/. */
+
+.search-container {
+ position: absolute;
+ top: 30px;
+ left: 0;
+ width: calc(100% - 1px);
+ height: calc(100% - 31px);
+ display: flex;
+ z-index: 200;
+ background-color: var(--theme-body-background);
+}
+
+.search-container .autocomplete {
+ flex: 1;
+}
+
+.searchinput-container {
+ display: flex;
+}
+
+.searchinput-container .close-btn-big {
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.autocomplete {
+ width: 100%;
+}
+
+.autocomplete .results * {
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.autocomplete .results-summary {
+ margin: 10px;
+}
+
+.autocomplete ul {
+ list-style: none;
+ width: 100%;
+ max-height: calc(100% - 32px);
+ margin: 0px;
+ padding: 0px;
+ overflow: auto;
+}
+
+.autocomplete li {
+ border: 2px solid var(--theme-splitter-color);
+ background-color: var(--theme-tab-toolbar-background);
+ padding: 10px;
+ margin: 10px;
+}
+
+.autocomplete li:hover {
+ background: var(--theme-tab-toolbar-background);
+ cursor: pointer;
+}
+
+.autocomplete li.selected {
+ border: 2px solid var(--theme-selection-background);
+}
+
+.autocomplete li .title {
+ line-height: 1.5em;
+ word-break: break-all;
+}
+
+.autocomplete li .subtitle {
+ line-height: 1.5em;
+ color: grey;
+ word-break: break-all;
+}
+
+.autocomplete input {
+ width: 100%;
+ border: none;
+ background-color: var(--theme-body-background);
+ color: var(--theme-comment);
+ border-bottom: 1px solid var(--theme-splitter-color);
+ outline: none;
+ line-height: 30px;
+ font-size: 14px;
+ height: 40px;
+ padding-left: 30px;
+}
+
+.autocomplete input::placeholder {
+ color: var(--theme-body-color-inactive);
+}
+
+.autocomplete .magnifying-glass svg {
+ width: 16px;
+ position: absolute;
+ top: 12px;
+ left: 10px;
+}
+
+.autocomplete.focused .magnifying-glass path,
+.autocomplete.focused .magnifying-glass ellipse {
+ stroke: var(--theme-highlight-blue);
+}
+
+.autocomplete .magnifying-glass path,
+.autocomplete .magnifying-glass ellipse {
+ stroke: var(--theme-splitter-color);
+}
+
+.autocomplete .no-result-msg {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ color: var(--theme-graphs-full-red);
+ font-size: 24px;
+}
+
+.autocomplete .no-result-msg .sad-face {
+ width: 24px;
+ margin-right: 4px;
+ line-height: 0;
+}
+
+.autocomplete .no-result-msg .sad-face svg {
+ fill: var(--theme-graphs-full-red);
+}
+.close-btn path {
+ fill: var(--theme-body-color);
+}
+
+.close-btn .close {
+ cursor: pointer;
+ width: 12px;
+ height: 12px;
+ padding: 2px;
+ text-align: center;
+ margin-top: 2px;
+ line-height: 5px;
+ transition: all 0.25s easeinout;
+}
+
+.close-btn .close svg {
+ width: 6px;
+}
+
+.close-btn .close:hover {
+ background: var(--theme-selection-background);
+ border-radius: 2px;
+}
+
+.close-btn .close:hover path {
+ fill: white;
+}
+
+.close-btn-big {
+ padding: 13px;
+ width: 40px;
+ height: 40px;
+}
+
+.close-btn-big path {
+ fill: var(--theme-body-color);
+}
+
+.close-btn-big .close {
+ cursor: pointer;
+ display: inline-block;
+ padding: 2px;
+ text-align: center;
+ transition: all 0.25s easeinout;
+ line-height: 100%;
+ width: 16px;
+ height: 16px;
+}
+
+.close-btn-big .close svg {
+ width: 9px;
+ height: 9px;
+}
+
+.close-btn-big .close:hover {
+ background: var(--theme-selection-background);
+ border-radius: 2px;
+}
+
+.close-btn-big .close:hover path {
+ fill: white;
+}
+.tree {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+
+ flex: 1;
+ white-space: nowrap;
+ overflow: auto;
+}
+
+.tree button {
+ display: block;
+}
+
+.tree .node {
+ padding: 2px 5px;
+ position: relative;
+}
+
+.tree .node.focused {
+ color: white;
+ background-color: var(--theme-selection-background);
+}
+
+html:not([dir="rtl"]) .tree .node > div {
+ margin-left: 10px;
+}
+
+html[dir="rtl"] .tree .node > div {
+ margin-right: 10px;
+}
+
+.tree .node.focused svg {
+ fill: white;
+}
+
+.tree-node button {
+ position: fixed;
+}
+.sources-panel {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.sources-panel * {
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.sources-header {
+ height: 30px;
+ border-bottom: 1px solid var(--theme-splitter-color);
+ padding-top: 0px;
+ padding-bottom: 0px;
+ line-height: 30px;
+ font-size: 1.2em;
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+html:not([dir="rtl"]) .sources-header {
+ padding-left: 10px;
+}
+
+html[dir="rtl"] .sources-header {
+ padding-right: 10px;
+}
+
+.sources-header-info {
+ font-size: 12px;
+ color: var(--theme-comment-alt);
+ font-weight: lighter;
+ white-space: nowrap;
+}
+
+html:not([dir="rtl"]) .sources-header-info {
+ padding-right: 10px;
+ float: right;
+}
+
+html[dir="rtl"] .sources-header-info {
+ padding-left: 10px;
+ float: left;
+}
+
+.sources-list {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+}
+
+.arrow,
+.folder,
+.domain,
+.file,
+.worker {
+ fill: var(--theme-splitter-color);
+}
+
+.domain,
+.file,
+.worker {
+ position: relative;
+ top: 1px;
+}
+
+.worker,
+.folder {
+ position: relative;
+ top: 2px;
+}
+
+.domain svg,
+.folder svg,
+.worker svg {
+ width: 15px;
+}
+
+.file svg {
+ width: 13px;
+}
+
+html:not([dir="rtl"]) .file svg,
+html:not([dir="rtl"]) .domain svg,
+html:not([dir="rtl"]) .folder svg,
+html:not([dir="rtl"]) .worker svg {
+ margin-right: 5px;
+}
+
+html[dir="rtl"] .file svg,
+html[dir="rtl"] .domain svg,
+html[dir="rtl"] .folder svg,
+html[dir="rtl"] .worker svg {
+ margin-left: 5px;
+}
+
+.tree {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+
+ flex: 1;
+ white-space: nowrap;
+ overflow: auto;
+}
+
+.tree button {
+ display: block;
+}
+
+.tree .node {
+ padding: 2px 5px;
+ position: relative;
+ cursor: pointer;
+}
+
+.tree .node:hover {
+ background: var(--theme-tab-toolbar-background);
+}
+
+.tree .node.focused {
+ color: white;
+ background-color: var(--theme-selection-background);
+}
+
+.tree .node > div {
+ margin-left: 10px;
+}
+
+.tree .node.focused svg {
+ fill: white;
+}
+
+.sources-list .tree-node button {
+ position: fixed;
+}
+
+.source-footer {
+ background: var(--theme-body-background);
+ border-top: 1px solid var(--theme-splitter-color);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 1px;
+ opacity: 1;
+ z-index: 100;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+html:not([dir="rtl"]) .source-footer .command-bar {
+ float: right;
+}
+
+html[dir="rtl"] .source-footer .command-bar {
+ float: left;
+}
+
+.source-footer .command-bar * {
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.command-bar > span {
+ cursor: pointer;
+ width: 1em;
+ height: 1.1em;
+ display: inline-block;
+ text-align: center;
+ transition: opacity 200ms;
+}
+
+html:not([dir="rtl"]) .command-bar > span {
+ margin-right: 0.7em;
+}
+
+html[dir="rtl"] .command-bar > span {
+ margin-left: 0.7em;
+}
+
+.source-footer .prettyPrint.pretty {
+ stroke: var(--theme-highlight-blue);
+}
+
+.source-footer input:focus {
+ border-color: var(--theme-highlight-blue);
+ outline: none;
+}
+
+.source-footer input {
+ line-height: 16px;
+ margin: 7px;
+ border-radius: 2px;
+ border: 1px solid var(--theme-splitter-color);
+ padding-left: 4px;
+ font-size: 10px;
+}
+.search-bar {
+ width: calc(100% - 1px);
+ height: 40px;
+ background: white;
+ border-bottom: 1px solid var(--theme-splitter-color);
+ display: flex;
+}
+
+.search-bar i {
+ display: block;
+ padding: 13px 0 0 13px;
+ width: 40px;
+}
+
+.search-bar i svg {
+ width: 16px;
+}
+
+.search-bar input {
+ border: none;
+ line-height: 30px;
+ font-size: 14px;
+ background-color: var(--theme-body-background);
+ color: var(--theme-comment);
+ width: calc(100% - 38px);
+ flex: 1;
+}
+
+.search-bar .magnifying-glass {
+ background-color: var(--theme-body-background);
+ width: 40px;
+}
+
+.search-bar .magnifying-glass path,
+.search-bar .magnifying-glass ellipse {
+ stroke: var(--theme-splitter-color);
+}
+
+.search-bar input::placeholder {
+ color: var(--theme-body-color-inactive);
+}
+
+.search-bar input:focus {
+ outline-width: 0;
+}
+
+.search-bar input.empty {
+ color: var(--theme-highlight-orange);
+}
+
+.search-bar .summary {
+ line-height: 40px;
+ padding-right: 10px;
+ color: var(--theme-body-color-inactive);
+}
+/* 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/. */
+
+/**
+ * There's a known codemirror flex issue with chrome that this addresses.
+ * BUG https://github.com/devtools-html/debugger.html/issues/63
+ */
+.editor-wrapper {
+ position: absolute;
+ height: calc(100% - 31px);
+ width: 100%;
+ top: 30px;
+ left: 0px;
+}
+
+html[dir="rtl"] .editor-mount {
+ direction: ltr;
+}
+
+.editor-wrapper .breakpoints {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.editor.new-breakpoint svg {
+ fill: var(--theme-selection-background);
+ width: 60px;
+ height: 14px;
+ position: absolute;
+ top: 0px;
+ right: -4px;
+}
+
+.new-breakpoint.has-condition svg {
+ fill: var(--theme-graphs-yellow);
+}
+
+.editor.new-breakpoint.breakpoint-disabled svg {
+ opacity: 0.3;
+}
+
+.CodeMirror {
+ width: 100%;
+ height: 100%;
+}
+
+.editor-wrapper .editor-mount {
+ width: 100%;
+ height: calc(100% - 32px);
+ background-color: var(--theme-body-background);
+}
+
+.search-bar ~ .editor-mount {
+ height: calc(100% - 72px);
+}
+
+.CodeMirror-linenumber {
+ font-size: 11px;
+ line-height: 14px;
+}
+
+/* set the linenumber white when there is a breakpoint */
+.new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
+ color: white;
+}
+
+/* move the breakpoint below the linenumber */
+.new-breakpoint .CodeMirror-gutter-elt:last-child {
+ z-index: 0;
+}
+
+.editor-wrapper .CodeMirror-line {
+ font-size: 11px;
+ line-height: 14px;
+}
+
+.debug-line .CodeMirror-line {
+ background-color: var(--breakpoint-active-color) !important;
+}
+
+/* Don't display the highlight color since the debug line
+ is already highlighted */
+.debug-line .CodeMirror-activeline-background {
+ display: none;
+}
+
+.highlight-line .CodeMirror-line {
+ animation: fade-highlight-out 1.5s normal forwards;
+}
+
+@keyframes fade-highlight-out {
+ 0% { background-color: var(--theme-highlight-gray); }
+ 100% { background-color: transparent; }
+}
+
+.welcomebox {
+ width: calc(100% - 1px);
+
+ /* Offsetting it by 30px for the sources-header area */
+ height: calc(100% - 30px);
+ position: absolute;
+ top: 30px;
+ left: 0;
+ padding: 50px 0;
+ text-align: center;
+ font-size: 1.25em;
+ color: var(--theme-comment-alt);
+ background-color: var(--theme-tab-toolbar-background);
+ font-weight: lighter;
+ z-index: 100;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.conditional-breakpoint-panel {
+ cursor: initial;
+ margin: 1em 0;
+ position: relative;
+ background: var(--theme-toolbar-background);
+ border-top: 1px solid var(--theme-splitter-color);
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.conditional-breakpoint-panel input {
+ margin: 5px 10px;
+ width: calc(100% - 2em);
+ border: none;
+ background: var(--theme-toolbar-background);
+ font-size: 14px;
+ color: var(--theme-comment);
+ line-height: 30px;
+}
+
+.conditional-breakpoint-panel input:focus {
+ outline-width: 0;
+}
+.breakpoints-list * {
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.breakpoints-list .breakpoint {
+ font-size: 12px;
+ color: var(--theme-content-color1);
+ padding: 0.5em 1px;
+ line-height: 1em;
+ position: relative;
+ border-left: 4px solid transparent;
+ transition: all 0.25s ease;
+}
+
+.breakpoints-list .breakpoint:last-of-type {
+ padding-bottom: 0.45em;
+}
+
+.breakpoints-list .breakpoint.paused {
+ background-color: var(--theme-toolbar-background-alt);
+ border-color: var(--breakpoint-active-color);
+}
+
+.breakpoints-list .breakpoint.disabled .breakpoint-label {
+ color: var(--theme-content-color3);
+ transition: color 0.5s linear;
+}
+
+.breakpoints-list .breakpoint:hover {
+ cursor: pointer;
+ background-color: var(--theme-search-overlays-semitransparent);
+}
+
+.breakpoints-list .breakpoint.paused:hover {
+ border-color: var(--breakpoint-active-color-hover);
+}
+
+.breakpoints-list .breakpoint-checkbox {
+ margin-left: 0;
+}
+
+.breakpoints-list .breakpoint-label {
+ display: inline-block;
+ padding-left: 2px;
+ padding-bottom: 4px;
+}
+
+.breakpoints-list .pause-indicator {
+ flex: 0 1 content;
+ order: 3;
+}
+
+.breakpoint-snippet {
+ color: var(--theme-comment);
+ padding-left: 18px;
+}
+
+.breakpoint .close-btn {
+ position: absolute;
+ right: 6px;
+ top: 12px;
+}
+
+.breakpoint .close {
+ display: none;
+}
+
+.breakpoint:hover .close {
+ display: block;
+}
+.input-expression {
+ width: 100%;
+ padding: 5px;
+ margin: 0px;
+ border: none;
+ cursor: hand;
+}
+
+.expression-container {
+ border: 1px;
+ padding: 5px 2px 5px 5px;
+ margin: 1px;
+ width: 100%;
+ color: var(--theme-body-color) !important;
+ background-color: var(--theme-tab-toolbar-background);
+}
+
+.expression-container:hover {
+ background-color: var(--theme-selection-background);
+ color: var(--theme-body-background) !important;
+}
+
+.expression-output-container .close-btn {
+ width: 6px;
+ height: 6px;
+ float: right;
+ margin-right: 6px;
+ display: block;
+ cursor: pointer;
+}
+
+.expression-input {
+ cursor: pointer;
+ max-width: 50%;
+}
+
+.expression-value {
+ overflow-x: scroll;
+ color: var(--theme-content-color2);
+ max-width: 50% !important;
+}
+
+.expression-error {
+ color: var(--theme-highlight-red);
+}
+.arrow svg {
+ fill: var(--theme-splitter-color);
+ margin-top: 3px;
+ transition: transform 0.25s ease;
+ width: 10px;
+}
+
+html:not([dir="rtl"]) .arrow svg {
+ margin-right: 5px;
+ transform: rotate(-90deg);
+}
+
+html[dir="rtl"] .arrow svg {
+ margin-left: 5px;
+ transform: rotate(90deg);
+}
+
+/* TODO (Amit): html is just for specificity. keep it like this? */
+html .arrow.expanded svg {
+ transform: rotate(0deg);
+}
+
+.arrow.hidden {
+ visibility: hidden;
+}
+
+.object-label {
+ color: var(--theme-highlight-blue);
+}
+
+.objectBox-object,
+.objectBox-string,
+.objectBox-text,
+.objectBox-table,
+.objectLink-textNode,
+.objectLink-event,
+.objectLink-eventLog,
+.objectLink-regexp,
+.objectLink-object,
+.objectLink-Date,
+.theme-dark .objectBox-object,
+.theme-light .objectBox-object {
+ white-space: nowrap;
+}
+
+.scopes-list .tree-node {
+ overflow: hidden;
+}
+.frames ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.frames ul li {
+ cursor: pointer;
+ padding: 7px 10px 7px 21px;
+ clear: both;
+ overflow: hidden;
+}
+
+/* Style the focused call frame like so:
+.frames ul li:focus {
+ border: 3px solid red;
+}
+*/
+
+.frames ul li * {
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.frames ul li:nth-of-type(2n) {
+ background-color: var(--theme-tab-toolbar-background);
+}
+
+.frames .location {
+ float: right;
+ color: var(--theme-comment);
+ font-weight: lighter;
+}
+
+.frames .title {
+ float: left;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ margin-right: 1em;
+}
+
+.frames ul li.selected,
+.frames ul li.selected .location {
+ background-color: var(--theme-selection-background);
+ color: white;
+}
+
+.show-more {
+ cursor: pointer;
+ text-align: center;
+ padding: 8px 0px;
+ border-top: 1px solid var(--theme-splitter-color);
+ background-color: var(--theme-tab-toolbar-background);
+}
+
+.show-more:hover {
+ background-color: var(--theme-search-overlays-semitransparent);
+}
+.accordion {
+ background-color: var(--theme-body-background);
+ width: 100%;
+}
+
+.accordion ._header {
+ background-color: var(--theme-toolbar-background);
+ border-bottom: 1px solid var(--theme-splitter-color);
+ cursor: pointer;
+ font-size: 12px;
+ padding: 5px;
+ transition: all 0.25s ease;
+ width: 100%;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.accordion ._header:hover {
+ background-color: var(--theme-search-overlays-semitransparent);
+}
+
+.accordion ._header:hover svg {
+ fill: var(--theme-comment-alt);
+}
+
+.accordion ._content {
+ border-bottom: 1px solid var(--theme-splitter-color);
+ font-size: 12px;
+}
+.right-sidebar {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ white-space: nowrap;
+}
+
+.right-siderbar * {
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.right-sidebar .accordion {
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.right-sidebar .command-bar {
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.command-bar {
+ height: 30px;
+}
+
+html:not([dir="rtl"]) .command-bar {
+ padding: 8px 5px 10px 1px;
+}
+
+html[dir="rtl"] .command-bar {
+ padding: 8px 1px 10px 5px;
+}
+
+.command-bar > span {
+ cursor: pointer;
+ width: 16px;
+ height: 17px;
+ display: inline-block;
+ text-align: center;
+ transition: all 0.25s ease;
+}
+
+:root.theme-dark .command-bar > span {
+ fill: var(--theme-body-color);
+}
+
+:root.theme-dark .command-bar > span:hover {
+ fill: var(--theme-selection-color);
+}
+
+html:not([dir="rtl"]) .command-bar > span {
+ margin-right: 0.7em;
+}
+
+html[dir="rtl"] .command-bar > span {
+ margin-left: 0.7em;
+}
+
+.command-bar > span.disabled {
+ opacity: 0.3;
+ cursor: default;
+}
+
+html:not([dir="rtl"]) .command-bar .stepOut {
+ margin-right: 2em;
+}
+
+html[dir="rtl"] .command-bar .stepOut {
+ margin-left: 2em;
+}
+
+.command-bar .subSettings {
+ float: right;
+}
+
+.pane {
+ color: var(--theme-body-color);
+}
+
+.pane .pane-info {
+ font-style: italic;
+ text-align: center;
+ padding: 0.5em;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.toggleBreakpoints.breakpoints-disabled path {
+ stroke: var(--theme-highlight-blue);
+}
+
+span.pause-exceptions.uncaught {
+ stroke: var(--theme-highlight-purple);
+}
+
+span.pause-exceptions.all {
+ stroke: var(--theme-highlight-blue);
+}
+.source-header {
+ border-bottom: 1px solid var(--theme-splitter-color);
+ height: 30px;
+ flex: 1;
+}
+
+.source-header * {
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.source-tabs {
+ min-width: 50px;
+ max-width: calc(100% - 60px);
+ overflow: hidden;
+ float: left;
+}
+
+.source-header .new-tab-btn {
+ width: 16px;
+ display: inline-block;
+ position: relative;
+ top: 4px;
+ margin: 4px;
+ line-height: 0;
+}
+
+.source-header .new-tab-btn path {
+ fill: var(--theme-splitter-color);
+}
+
+.source-header .new-tab-btn:hover path {
+ fill: var(--theme-comment);
+}
+
+.source-tab {
+ background-color: var(--theme-toolbar-background-alt);
+ color: var(--theme-faded-tab-color);
+ border: 1px solid var(--theme-splitter-color);
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ height: 23px;
+ line-height: 20px;
+ display: inline-block;
+ border-bottom: none;
+ position: relative;
+ transition: all 0.25s ease;
+ min-width: 40px;
+ overflow: hidden;
+}
+
+html:not([dir="rtl"]) .source-tab {
+ padding: 2px 20px 2px 12px;
+ margin: 6px 0 0 8px;
+}
+
+html[dir="rtl"] .source-tab {
+ padding: 2px 12px 2px 20px;
+ margin: 6px 8px 0 0;
+}
+
+.source-tab:hover {
+ background: var(--theme-toolbar-background);
+ cursor: pointer;
+}
+
+.source-tab.active {
+ color: var(--theme-body-color);
+ background-color: var(--theme-body-background);
+}
+
+.source-tab path {
+ fill: var(--theme-faded-tab-color);
+}
+
+.source-tab.active path {
+ fill: var(--theme-body-color);
+}
+
+.source-tab .close-btn {
+ position: absolute;
+ top: 3px;
+}
+
+.source-tab .filename {
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+html:not([dir="rtl"]) .source-tab .close-btn {
+ right: 4px;
+}
+
+html[dir="rtl"] .source-tab .close-btn {
+ left: 4px;
+}
+
+.source-tab .close {
+ display: none;
+}
+
+.source-tab:hover .close {
+ display: block;
+}
+.dropdown {
+ background: var(--theme-body-background);
+ border: 1px solid var(--theme-splitter-color);
+ box-shadow: 0 4px 4px 0 var(--theme-search-overlays-semitransparent);
+ max-height: 300px;
+ position: absolute;
+ right: 8px;
+ top: 35px;
+ width: 150px;
+ z-index: 1000;
+}
+
+.dropdown-button {
+ position: absolute;
+ right: 12px;
+ top: 5px;
+ font-size: 16px;
+ color: var(--theme-body-color);
+ cursor: pointer;
+}
+
+.dropdown li {
+ transition: all 0.25s ease;
+ padding: 2px 10px 10px 5px;
+ overflow: hidden;
+ height: 30px;
+ text-overflow: ellipsis;
+}
+
+.dropdown li:hover {
+ background-color: var(--theme-search-overlays-semitransparent);
+ cursor: pointer;
+}
+
+.dropdown ul {
+ list-style: none;
+ line-height: 2em;
+ font-size: 1em;
+ margin: 0;
+ padding: 0;
+}
+
+.dropdown-mask {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ z-index: 999;
+ left: 0;
+ top: 0;
+}
+
+/*# sourceMappingURL=styles.css.map*/ \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-07 13:17:09 +0000