@import url(variables.css);
@import url(common.css);
@import url(toolbars.css);
+@import url(tooltips.css);
body, html {
padding: 0;
}
.theme-link,
-.cm-s-mozilla .cm-link { /* original: blue */
- color: var(--theme-text-blue);
+.cm-s-mozilla .cm-link,
+.cm-s-mozilla .cm-keyword {
+ color: var(--theme-text-green);
}
/*
}
.theme-gutter {
- background-color: #000000;
+ background-color: var(--theme-tab-toolbar-background);
color: var(--theme-content-color3);
- border-color: #9C9CFF;
+ border-color: var(--theme-splitter-color);
}
-.theme-separator { /* original: grey */
- border-color: #8050B0;
+.theme-separator {
+ border-color: var(--theme-splitter-color);
}
.theme-fg-color1,
.variable-or-property .token-number,
.variable-or-property[return] > .title > .name,
.variable-or-property[scope] > .title > .name {
- color: var(--theme-highlight-green);
+ color: var(--theme-highlight-red);
}
.CodeMirror-Tern-completion-number:before {
.theme-fg-color2,
.cm-s-mozilla .cm-attribute,
-.cm-s-mozilla .cm-variable,
.cm-s-mozilla .cm-def,
.cm-s-mozilla .cm-property,
.cm-s-mozilla .cm-qualifier,
.variables-view-variable > .title > .name {
- color: var(--theme-highlight-blue);
+ color: var(--theme-highlight-purple);
}
.CodeMirror-Tern-completion-object:before {
.cm-s-mozilla .cm-tag,
.cm-s-mozilla .cm-header,
.cm-s-mozilla .cm-bracket,
-.variables-view-property > .title > .name,
-.variable-or-property[safe-getter] > .title > .name {
- color: var(--theme-highlight-pink);
+.variables-view-property > .title > .name {
+ color: var(--theme-highlight-green);
}
.CodeMirror-Tern-completion-array:before {
color: var(--theme-highlight-purple);
}
-.theme-fg-color5,
-.cm-s-mozilla .cm-keyword {
- color: var(--theme-highlight-lightorange);
+.theme-fg-color5 {
+ color: var(--theme-highlight-purple);
}
.theme-fg-color6,
.cm-s-mozilla .cm-string,
.cm-s-mozilla .cm-string-2,
.variable-or-property .token-string,
+.cm-s-mozilla .cm-variable,
.CodeMirror-Tern-farg {
- color: var(--theme-highlight-pink); /* -orange? */
+ color: var(--theme-highlight-gray);
}
.CodeMirror-Tern-completion-string:before,
.devtools-toolbar,
.devtools-sidebar-tabs tabs,
.devtools-sidebar-alltabs,
-.CodeMirror-dialog { /* General toolbar styling */
+.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
/* color: var(--theme-body-color-alt);
- background-color: var(--theme-toolbar-background);*/
+ background-color: var(--theme-toolbar-background);
+ border-color: var(--theme-splitter-color);*/
}
-
.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
color: #FFCF00;
}
-.ruleview-colorswatch,
-.computedview-colorswatch,
-.ruleview-bezierswatch {
+.ruleview-swatch,
+.computedview-colorswatch {
/* box-shadow: 0 0 0 1px #818181; */
}
* Best effort to match the existing theme, some of the colors
* are duplicated here to prevent weirdness in the main theme. */
-.CodeMirror,
.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
font-family: inherit;
font-size: inherit;
background: transparent;
}
-.CodeMirror pre,
+.CodeMirror.cm-s-mozilla pre,
.cm-s-mozilla .cm-variable-2,
.cm-s-mozilla .cm-variable-3,
.cm-s-mozilla .cm-operator,
background: rgba(255, 0, 0, 0.2);
}
-/* Highlight for a line that represents a stack frame's location. */
-div.CodeMirror div.debug-line {
- background: rgba(156, 156, 255, 0.2);
-}
-
/* Generic highlighted text */
div.CodeMirror span.marked-text {
background: rgba(255,207,0,0.2);
border: 1px dashed rgba(156, 156, 255, 0.6);
- -moz-margin-start: -1px;
- -moz-margin-end: -1px;
+ margin-inline-start: -1px;
+ margin-inline-end: -1px;
}
/* Highlight for evaluating current statement. */
width: 14px;
height: 14px;
background-repeat: no-repeat;
- background-image: url("chrome://devtools/skin/controls.png");
+ background-image: url("chrome://devtools/skin/images/controls.png");
background-size: 28px 28px;
}
visibility: hidden;
}
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
.theme-checkbox {
display: inline-block;
border: 0;
@media (min-resolution: 1.1dppx) {
.theme-twisty, .theme-checkbox {
- background-image: url("chrome://devtools/skin/controls@2x.png");
+ background-image: url("chrome://devtools/skin/images/controls@2x.png");
}
}
-/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
+/* XUL panel styling (see devtools/client/shared/widgets/Tooltip.js) */
.theme-tooltip-panel .panel-arrowcontent {
/* padding: 5px; */
/* Overring panel arrow images to fit with our light and dark themes */
/*
-.theme-tooltip-panel .panel-arrow[side="top"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
- margin-bottom: -4px;
+.theme-tooltip-panel .panel-arrow {
+ --arrow-margin: -4px;
+}
+
+:root[platform="win"] .theme-tooltip-panel .panel-arrow {
+ --arrow-margin: -7px;
}
+.theme-tooltip-panel .panel-arrow[side="top"],
.theme-tooltip-panel .panel-arrow[side="bottom"] {
list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
- margin-top: -4px;
+ / !important is needed to override the popup.css rules in toolkit/themes /
+ width: 39px !important;
+ height: 16px !important;
}
-.theme-tooltip-panel .panel-arrow[side="left"] {
+.theme-tooltip-panel .panel-arrow[side="left"],
+.theme-tooltip-panel .panel-arrow[side="right"] {
list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
- margin-right: -4px;
+ / !important is needed to override the popup.css rules in toolkit/themes /
+ width: 16px !important;
+ height: 39px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"] {
+ margin-bottom: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+ margin-top: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+ margin-right: var(--arrow-margin);
}
.theme-tooltip-panel .panel-arrow[side="right"] {
- list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
- margin-left: -4px;
+ margin-left: var(--arrow-margin);
}
@media (min-resolution: 1.1dppx) {
}
.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
- border-bottom: 0;
+ border-bottom: 0;
}
.devtools-textinput,
-.devtools-searchinput {
+.devtools-searchinput,
+.devtools-filterinput,
+.devtools-plaininput {
background-color: #000000;
color: #E7ADE7;
border: 1px solid #9C9CFF;
+ border-radius: 3px;
}
.devtools-textinput:focus,
-.devtools-searchinput:focus {
+.devtools-searchinput:focus,
+.devtools-filterinput:focus,
+.devtools-plaininput:focus {
border-color: #008484;
}
+.devtools-textinput::placeholder,
+.devtools-searchinput::placeholder,
+.devtools-filterinput::placeholder,
+.devtools-plaininput::placeholder {
+ color: #8050B0;
+ opacity: 1.0;
+}
+
.CodeMirror-Tern-fname {
color: #A09090;
}