mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-24 02:35:41 +00:00
973205986c
Tooltip styles are scattered between common.css and panel-specific CSS files (e.g. inspector.css). For the HTML tooltip, the panel specific CSS files will not be applied since the tooltip container is appended to the devtools top window. This changeset creates a new tooltips.css file which is loaded by default with devtools themes. MozReview-Commit-ID: BnoRi9gLfD5 --HG-- extra : rebase_source : 3fee4731f65563c4b61371e3a3c51fb797d1a12b extra : source : bd8878532e1f370fb49e0c50de0b2da267f7de8a
393 lines
9.2 KiB
CSS
393 lines
9.2 KiB
CSS
/* 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/. */
|
|
|
|
@import url(variables.css);
|
|
@import url(common.css);
|
|
@import url(toolbars.css);
|
|
@import url(tooltips.css);
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.theme-body {
|
|
background: var(--theme-body-background);
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.theme-sidebar {
|
|
background: var(--theme-sidebar-background);
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-bg-darker {
|
|
background: var(--theme-selection-background-semitransparent);
|
|
}
|
|
|
|
.theme-selected,
|
|
.CodeMirror-hint-active {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-bg-contrast,
|
|
.variable-or-property:not([overridden])[changed] {
|
|
background: var(--theme-contrast-background);
|
|
}
|
|
|
|
.theme-link,
|
|
.cm-s-mozilla .cm-link,
|
|
.CodeMirror-Tern-type {
|
|
color: var(--theme-highlight-blue);
|
|
}
|
|
|
|
/*
|
|
* FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
|
|
* failures in debug builds.
|
|
*/
|
|
.theme-link:visited,
|
|
.cm-s-mozilla .cm-link:visited {
|
|
color: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.theme-comment,
|
|
.cm-s-mozilla .cm-meta,
|
|
.cm-s-mozilla .cm-hr,
|
|
.cm-s-mozilla .cm-comment,
|
|
.variable-or-property .token-undefined,
|
|
.variable-or-property .token-null,
|
|
.CodeMirror-Tern-completion-unknown:before {
|
|
color: var(--theme-comment);
|
|
}
|
|
|
|
.theme-gutter {
|
|
background-color: var(--theme-tab-toolbar-background);
|
|
color: var(--theme-content-color3);
|
|
border-color: var(--theme-splitter-color);
|
|
}
|
|
|
|
.theme-separator { /* grey */
|
|
border-color: #cddae5;
|
|
}
|
|
|
|
.cm-s-mozilla .cm-unused-line {
|
|
text-decoration: line-through;
|
|
text-decoration-color: var(--theme-highlight-bluegrey);
|
|
}
|
|
|
|
.cm-s-mozilla .cm-executed-line {
|
|
background-color: #fcfffc;
|
|
}
|
|
|
|
.theme-fg-color1,
|
|
.cm-s-mozilla .cm-number,
|
|
.variable-or-property .token-number,
|
|
.variable-or-property[return] > .title > .name,
|
|
.variable-or-property[scope] > .title > .name {
|
|
color: var(--theme-highlight-purple);
|
|
}
|
|
|
|
.CodeMirror-Tern-completion-number:before {
|
|
background-color: hsl(72,100%,27%);
|
|
}
|
|
|
|
.theme-fg-color2,
|
|
.cm-s-mozilla .cm-attribute,
|
|
.cm-s-mozilla .cm-builtin,
|
|
.cm-s-mozilla .cm-property,
|
|
.variables-view-variable > .title > .name {
|
|
color: var(--theme-highlight-red);
|
|
}
|
|
|
|
.cm-s-mozilla .cm-def {
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.CodeMirror-Tern-completion-object:before {
|
|
background-color: hsl(208,56%,40%);
|
|
}
|
|
|
|
.theme-fg-color3,
|
|
.cm-s-mozilla .cm-variable,
|
|
.cm-s-mozilla .cm-tag,
|
|
.cm-s-mozilla .cm-header,
|
|
.cm-s-mozilla .cm-bracket,
|
|
.cm-s-mozilla .cm-qualifier,
|
|
.variables-view-property > .title > .name {
|
|
color: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.CodeMirror-Tern-completion-array:before {
|
|
background-color: var(--theme-highlight-bluegrey);
|
|
}
|
|
|
|
.theme-fg-color4 {
|
|
color: var(--theme-highlight-orange);
|
|
}
|
|
|
|
.theme-fg-color5,
|
|
.cm-s-mozilla .cm-keyword {
|
|
color: var(--theme-highlight-red);
|
|
}
|
|
|
|
.theme-fg-color6,
|
|
.cm-s-mozilla .cm-string,
|
|
.cm-s-mozilla .cm-string-2,
|
|
.variable-or-property .token-string,
|
|
.CodeMirror-Tern-farg {
|
|
color: var(--theme-highlight-purple);
|
|
}
|
|
|
|
.CodeMirror-Tern-completion-string:before,
|
|
.CodeMirror-Tern-completion-fn:before {
|
|
background-color: hsl(24,85%,39%);
|
|
}
|
|
|
|
.theme-fg-color7,
|
|
.cm-s-mozilla .cm-atom,
|
|
.cm-s-mozilla .cm-quote,
|
|
.cm-s-mozilla .cm-error,
|
|
.variable-or-property .token-boolean,
|
|
.variable-or-property .token-domnode,
|
|
.variable-or-property[exception] > .title > .name {
|
|
color: var(--theme-highlight-red);
|
|
}
|
|
|
|
.CodeMirror-Tern-completion-bool:before {
|
|
background-color: #bf5656;
|
|
}
|
|
|
|
.variable-or-property .token-domnode {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
|
|
color: black;
|
|
}
|
|
|
|
.theme-toolbar,
|
|
.devtools-toolbar,
|
|
.devtools-sidebar-tabs tabs,
|
|
.devtools-sidebar-alltabs,
|
|
.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
|
|
color: var(--theme-body-color);
|
|
background-color: var(--theme-toolbar-background);
|
|
border-color: var(--theme-splitter-color);
|
|
}
|
|
|
|
.ruleview-swatch,
|
|
.computedview-colorswatch {
|
|
box-shadow: 0 0 0 1px #c4c4c4;
|
|
}
|
|
|
|
/* CodeMirror specific styles.
|
|
* Best effort to match the existing theme, some of the colors
|
|
* are duplicated here to prevent weirdness in the main theme. */
|
|
|
|
.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
background: transparent;
|
|
}
|
|
|
|
.CodeMirror.cm-s-mozilla pre,
|
|
.cm-s-mozilla .cm-variable-2,
|
|
.cm-s-mozilla .cm-variable-3,
|
|
.cm-s-mozilla .cm-operator,
|
|
.cm-s-mozilla .cm-special {
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
|
|
border-left: solid 1px black;
|
|
}
|
|
|
|
.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
|
|
background: rgb(185, 215, 253);
|
|
}
|
|
|
|
.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
|
|
background: rgb(176, 176, 176);
|
|
}
|
|
|
|
.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
|
|
background: rgba(185, 215, 253, .35);
|
|
}
|
|
|
|
div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
|
|
outline: solid 1px rgba(0, 0, 0, .25);
|
|
color: black;
|
|
}
|
|
|
|
/* Highlight for a line that contains an error. */
|
|
div.CodeMirror div.error-line {
|
|
background: rgba(255,0,0,0.2);
|
|
}
|
|
|
|
/* Generic highlighted text */
|
|
div.CodeMirror span.marked-text {
|
|
background: rgba(255,255,0,0.2);
|
|
border: 1px dashed rgba(192,192,0,0.6);
|
|
margin-inline-start: -1px;
|
|
margin-inline-end: -1px;
|
|
}
|
|
|
|
/* Highlight for evaluating current statement. */
|
|
div.CodeMirror span.eval-text {
|
|
background-color: #ccd;
|
|
}
|
|
|
|
.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
|
|
color: var(--theme-content-color3);
|
|
}
|
|
|
|
.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
|
|
border-right-color: var(--theme-splitter-color);
|
|
background-color: var(--theme-sidebar-background);
|
|
}
|
|
|
|
.cm-s-markup-view pre {
|
|
line-height: 1.4em;
|
|
min-height: 1.4em;
|
|
}
|
|
|
|
/* Twisty and checkbox controls */
|
|
|
|
.theme-twisty, .theme-checkbox {
|
|
width: 14px;
|
|
height: 14px;
|
|
background-repeat: no-repeat;
|
|
background-image: url("chrome://devtools/skin/images/controls.png");
|
|
background-size: 56px 28px;
|
|
}
|
|
|
|
.theme-twisty {
|
|
cursor: pointer;
|
|
background-position: 0 -14px;
|
|
}
|
|
|
|
.theme-twisty:-moz-focusring {
|
|
outline-style: none;
|
|
}
|
|
|
|
.theme-twisty[open], .theme-twisty.open {
|
|
background-position: -14px -14px;
|
|
}
|
|
|
|
.theme-twisty[invisible] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Use white twisty when next to a selected item in markup view */
|
|
.theme-selected ~ .theme-twisty {
|
|
background-position: -28px -14px;
|
|
}
|
|
|
|
.theme-selected ~ .theme-twisty[open] {
|
|
background-position: -42px -14px;
|
|
}
|
|
|
|
.theme-checkbox {
|
|
display: inline-block;
|
|
border: 0;
|
|
padding: 0;
|
|
outline: none;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.theme-checkbox[checked] {
|
|
background-position: -14px 0;
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.theme-twisty, .theme-checkbox {
|
|
background-image: url("chrome://devtools/skin/images/controls@2x.png");
|
|
}
|
|
}
|
|
|
|
/* XUL panel styling (see devtools/client/shared/widgets/Tooltip.js) */
|
|
|
|
.theme-tooltip-panel .panel-arrowcontent {
|
|
padding: 4px;
|
|
background: rgba(255, 255, 255, .9);
|
|
border-radius: 5px;
|
|
box-shadow: none;
|
|
border: 3px solid #d9e1e8;
|
|
}
|
|
|
|
/* Overring panel arrow images to fit with our light and dark themes */
|
|
|
|
.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-light.png");
|
|
/* !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="right"] {
|
|
list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
|
|
/* !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"] {
|
|
margin-left: var(--arrow-margin);
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.theme-tooltip-panel .panel-arrow[side="top"],
|
|
.theme-tooltip-panel .panel-arrow[side="bottom"] {
|
|
list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
|
|
}
|
|
|
|
.theme-tooltip-panel .panel-arrow[side="left"],
|
|
.theme-tooltip-panel .panel-arrow[side="right"] {
|
|
list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png");
|
|
}
|
|
}
|
|
|
|
.theme-tooltip-panel .devtools-tooltip-simple-text {
|
|
color: black;
|
|
border-bottom: 1px solid #d9e1e8;
|
|
}
|
|
|
|
.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.CodeMirror-hints,
|
|
.CodeMirror-Tern-tooltip {
|
|
box-shadow: 0 0 4px rgba(128, 128, 128, .5);
|
|
background-color: var(--theme-sidebar-background);
|
|
}
|