X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fwidgets.css;fp=LCARStrek%2Fdevtools%2Fwidgets.css;h=0000000000000000000000000000000000000000;hp=ba1dba2c7531b648550fa0a6fdafb17934f9d8de;hb=bdb9f97982138845069e66497bea0e2c4d0fe455;hpb=b1d1a8bbaca0a31b2c2581911368b6892d447718 diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css deleted file mode 100644 index ba1dba2c..00000000 --- a/LCARStrek/devtools/widgets.css +++ /dev/null @@ -1,1412 +0,0 @@ -/* 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 { - --table-splitter-color: #A09090; - --table-zebra-background: rgba(255,159,0,0.1); - --sidemenu-separator-color: rgba(160,144,144,0.15); - --sidemenu-selected-arrow: url(images/itemArrow-dark-ltr.svg); - --sidemenu-selected-arrow-rtl: url(images/itemArrow-dark-rtl.svg); - --delete-icon: url(chrome://devtools/skin/images/vview-delete.png); - --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png); -} - -/* Generic pane helpers */ - -.generic-toggled-pane { - margin-inline-start: 0 !important; - /* Unfortunately, transitions don't work properly with locale-aware properties, - so both the left and right margins are set via js, while the start margin - is always overridden here. */ -} - -.generic-toggled-pane[animated] { - transition: margin 0.25s ease-in-out; -} - -/* Responsive container */ - -.devtools-responsive-container { - -moz-box-orient: horizontal; -} - -.devtools-main-content { - min-width: 50px; -} - -.devtools-main-content, -.devtools-sidebar-tabs { - /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */ - position: relative; -} - -@media (min-width: 701px) { - .devtools-responsive-container .generic-toggled-pane { - /* To hide generic-toggled-pane, negative margins are applied dynamically. - * In the default horizontal layout, the pane is on the side and should be - * hidden using negative margin-inline-end only. - */ - margin-top: 0 !important; - margin-bottom: 0 !important; - } -} -@media (max-width: 700px) { - .devtools-responsive-container { - -moz-box-orient: vertical; - } - - .devtools-responsive-container > .devtools-side-splitter { - /* This is a normally vertical splitter, but we have turned it horizontal - due to the smaller resolution */ - 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)); - - /* Reset the vertical splitter styles */ - width: auto; - min-width: 0; - border-inline-end-width: 0; - border-inline-start-width: 0; - margin-inline-end: 0; - margin-inline-start: 0; - - /* In some edge case the cursor is not changed to n-resize */ - cursor: n-resize; - } - - .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) { - /* When the panel is collapsed min/max height should not be applied because - collapsing relies on negative margins, which implies constant height. */ - min-height: 35vh; - max-height: 75vh; - } - - .devtools-responsive-container .generic-toggled-pane { - /* To hide generic-toggled-pane, negative margins are applied dynamically. - * If a vertical layout, the pane is on the bottom and should be hidden - * using negative bottom margin only. - */ - margin-inline-end: 0 !important; - } -} - -/* BreacrumbsWidget */ - -.breadcrumbs-widget-container { - margin-inline-start: 2px; - max-height: 24px; /* Set max-height for proper sizing on linux */ - height: 24px; /* Set height to prevent starting small waiting for content */ -} - -.scrollbutton-up, -.scrollbutton-down { - background: transparent; - box-shadow: none; - border: none; - margin: 0; - padding: 0; -} - -.scrollbutton-up { - margin-inline-end: 1px; -} - -.scrollbutton-down { - margin-inline-end: 0; -} - -.scrollbutton-up > .toolbarbutton-icon, -.scrollbutton-down > .toolbarbutton-icon { - /* margin: 0 8px; */ -} - -.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, -.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { -} - -.scrollbutton-up[disabled] > .toolbarbutton-icon, -.scrollbutton-down[disabled] > .toolbarbutton-icon { -} - -.scrollbutton-up:-moz-locale-dir(ltr) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.scrollbutton-down:-moz-locale-dir(ltr) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.scrollbutton-up:-moz-locale-dir(rtl) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.scrollbutton-down:-moz-locale-dir(rtl) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */ -/* -.scrollbutton-up:-moz-locale-dir(ltr), -.scrollbutton-down:-moz-locale-dir(rtl) { - border-right: solid 1px rgba(255, 255, 255, .1); - border-left: solid 1px transparent; - box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background); -} - -.scrollbutton-down:-moz-locale-dir(ltr), -.scrollbutton-up:-moz-locale-dir(rtl) { - border-right: solid 1px transparent; - border-left: solid 1px rgba(255, 255, 255, .1); - box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background); -} - -.scrollbutton-up[disabled], -.scrollbutton-down[disabled] { - box-shadow: none; - border-color: transparent; -} -*/ - -.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), -.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { -/* transform: scaleX(-1); */ -} - -/* The breadcrumb separator elements are used as background images with - * -moz-element, so we position them offscreen since we don't care about - * seeing the original elements. - */ -.breadcrumb-separator-container { - position: fixed; - top: -1000px; - left: -1000px; -} - -#breadcrumb-separator-before, -#breadcrumb-separator-after, -#breadcrumb-separator-normal { - width: 12px; - height: 24px; - overflow: hidden; -} - -#breadcrumb-separator-before, -#breadcrumb-separator-after:after { - background: var(--theme-selection-background); -} - -#breadcrumb-separator-after, -#breadcrumb-separator-before:after { - background: var(--theme-body-background); -} - -/* This chevron arrow cannot be replicated easily in CSS, so we are using - * a background image for it (still keeping it in a separate element so - * we can handle RTL support with a CSS transform). - */ -#breadcrumb-separator-normal { - background: url("images/breadcrumbs-divider@2x.png") no-repeat center right; - background-size: 12px 24px; -} - -/* Fake a triangle by rotating a rectangle inside the elements */ -#breadcrumb-separator-before:after, -#breadcrumb-separator-after:after { - content: ""; - display: block; - width: 25px; - height: 24px; - transform: translateX(-18px) rotate(45deg); - box-sizing: border-box; -} - -.breadcrumbs-widget-item { - background-color: var(--theme-capped-toolbar-background); - min-height: 24px; - min-width: 65px; - margin: 0; - padding: 0 8px 0 20px; - border: none; - border-radius: 0; - outline: none; - color: var(--theme-content-color1); -} - -.breadcrumbs-widget-item:hover { - background-color: var(--theme-hover-background); - color: var(--theme-hover-color); -} - -.breadcrumbs-widget-item[checked]:not(:hover) { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.breadcrumbs-widget-item[siblings-menu-open], -.breadcrumbs-widget-item:active { - background-color: var(--theme-active-background); - color: var(--theme-active-color); -} - -.breadcrumbs-widget-item > .button-box { - border: none; - padding-top: 0; - padding-bottom: 0; -} - -:root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box { - border-width: 0; -} - -.breadcrumbs-widget-item:not([checked]) { - background-image: -moz-element(#breadcrumb-separator-normal); - background-repeat: no-repeat; - background-position: center left; -} - -.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { - background-image: -moz-element(#breadcrumb-separator-after); - background-repeat: no-repeat; - background-position: 0 0; -} - -.breadcrumbs-widget-item[checked] { - background-image: -moz-element(#breadcrumb-separator-before); - background-repeat: no-repeat; - background-position: 0 0; - background-color: var(--theme-selection-background); /* Select Highlight Blue */ -} - -.breadcrumbs-widget-item:first-child { - background-image: none; -} - -/* RTL support: move the images that were on the left to the right, - * and move images that were on the right to the left. - */ -.breadcrumbs-widget-item:-moz-locale-dir(rtl) { - padding: 0 20px 0 8px; -} - -.breadcrumbs-widget-item:-moz-locale-dir(rtl), -.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) { - background-position: center right; -} - -#breadcrumb-separator-before:-moz-locale-dir(rtl), -#breadcrumb-separator-after:-moz-locale-dir(rtl), -#breadcrumb-separator-normal:-moz-locale-dir(rtl) { - transform: scaleX(-1); -} - -#breadcrumb-separator-before:-moz-locale-dir(rtl):after, -#breadcrumb-separator-after:-moz-locale-dir(rtl):after { - transform: translateX(-5px) rotate(45deg); -} - -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { - color: var(--theme-button-color); /* --theme-highlight-lightorange */ -} - -.breadcrumbs-widget-item { - color: var(--theme-button-color); /* tag name, --theme-highlight-lightorange */ -} - -.breadcrumbs-widget-item:not([checked]):hover span, -.breadcrumbs-widget-item:not([checked]):hover label { - color: var(--theme-hover-color) !important; -} - -.breadcrumbs-widget-item-id { - color: var(--theme-highlight-red); /* --theme-body-color-alt */ -} - -.breadcrumbs-widget-item-classes { - color: #402800; /* --theme-content-color1 */ -} - -.breadcrumbs-widget-item-pseudo-classes { - color: var(--theme-button-color); /* --theme-highlight-lightorange */ -} - -/* SimpleListWidget */ - -.simple-list-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.simple-list-widget-item.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.simple-list-widget-item:not(.selected):hover { - background-color: var(--theme-hover-background); - color: var(--theme-hover-color); -} - -.simple-list-widget-perma-text, -.simple-list-widget-empty-text { - padding: 4px 8px; -} - -.simple-list-widget-perma-text, -.simple-list-widget-empty-text { - color: var(--theme-body-color-alt); -} - -/* FastListWidget */ - -.fast-list-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.fast-list-widget-empty-text { - padding: 4px 8px; -} - -.fast-list-widget-empty-text { - color: var(--theme-body-color-alt); -} - -/* SideMenuWidget */ - -.side-menu-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -/* SideMenuWidget container */ - -.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { - /* To compensate for the arrow image's dark margin. */ -/* margin-inline-end: -1px;*/ -} - -/* SideMenuWidget groups */ - -.side-menu-widget-group-title { - padding: 4px; - font-weight: 600; - border-bottom: 1px solid var(--sidemenu-separator-color); -} - -.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents { - padding-inline-start: 20px; -} - -/* SideMenuWidget items */ - -.side-menu-widget-item { - border-bottom: 1px solid var(--sidemenu-separator-color); - background-clip: padding-box; -} - -.side-menu-widget-item.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.side-menu-widget-item-arrow { - margin-inline-start: -7px; - width: 7px; /* The image's width is 7 pixels */ -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow { - background-image: var(--sidemenu-selected-arrow); - background-size: auto; - background-repeat: no-repeat; - background-position: center right; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: var(--sidemenu-selected-arrow-rtl); - background-position: center left; -} - -/* SideMenuWidget items contents */ - -.side-menu-widget-item-contents { - padding: 4px; - /* To avoid having content overlapping the arrow image. */ - padding-inline-end: 8px; -} - -.side-menu-widget-item-other { - /* To avoid having content overlapping the arrow image. */ - padding-inline-end: 8px; - /* To compensate for the .side-menu-widget-item-contents padding. */ - margin-inline-start: -4px; - margin-inline-end: -8px; - color: var(--theme-selection-color); -} - -.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other { - /* To compensate for the .side-menu-widget-item-contents padding. */ - margin-inline-start: -20px; -} - -.side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) { - background-color: var(--theme-sidebar-background); - box-shadow: inset 2px 0 0 var(--theme-selection-background); - color: var(--theme-body-color); -} - -.side-menu-widget-item.selected .side-menu-widget-item-other.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.side-menu-widget-item-other:first-of-type { - margin-top: 4px; -/* border-top-left-radius: 4px; */ -} - -.side-menu-widget-item-other:last-of-type { - margin-bottom: -4px; -} - -.side-menu-widget-item-other:not(.selected) > label { - color: #9C9CFF; -} - -/* SideMenuWidget checkboxes */ - -.side-menu-widget-group-checkbox { - margin: 0; - margin-inline-end: 4px; -} - -.side-menu-widget-item-checkbox { - margin: 0; - margin-inline-start: 4px; - margin-inline-end: -4px; -} - -/* SideMenuWidget misc */ - -.side-menu-widget-empty-text { - padding: 4px 8px; - background-color: var(--theme-sidebar-background); -} - -/* VariablesView */ - -.variables-view-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.variables-view-empty-notice { - padding: 2px; -} - -.variables-view-empty-notice { - color: var(--theme-body-color-alt); -} - -.variables-view-scope:focus > .title, -.theme-dark .variable-or-property:focus > .title { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.variables-view-scope > .title { - background-color: #A09090; - color: #000000; -} - -/* Custom scope stylings */ - -.variables-view-watch-expressions .title > .name { - max-width: 14em; -} - -/* Generic variables traits */ - -.variables-view-variable:not(:last-child) { - border-bottom: 1px solid #A09090; -} - -.variables-view-variable > .title > .name { - font-weight: 600; -} - -/* Generic variables *and* properties traits */ - -.variable-or-property:focus > .title > label { - color: inherit !important; -} - -.variables-view-container .theme-twisty { - margin: 2px; -} - -.variable-or-property > .title > .theme-twisty { - margin-inline-start: 5px; -} - -.variable-or-property:not([untitled]) > .variables-view-element-details { - margin-inline-start: 7px; -} - -/* Traits applied when variables or properties are changed or overridden */ - -.variable-or-property:not([overridden]) { - transition: background 1s ease-in-out, color 1s ease-in-out; -} - -.variable-or-property:not([overridden])[changed] { - color: #000000; - transition-duration: .4s; -} - -.variable-or-property[overridden] { - background: rgba(160,144,144,0.5); -} - -.variable-or-property[overridden] .title > label { - /* Cross out the title for this variable and all child properties. */ - font-style: italic; - text-decoration: line-through; - border-bottom: none !important; - color: #A09090; - opacity: 0.7; -} - -/* Traits applied when variables or properties are editable */ - -.variable-or-property[editable] > .title > .value { - cursor: text; -} - -.variable-or-property[overridden] .title > .value { - /* Disallow editing this variable and all child properties. */ - pointer-events: none; -} - -/* Custom configurable/enumerable/writable or frozen/sealed/extensible - * variables and properties */ - -.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name { - opacity: 0.6; -} - -.variable-or-property-non-writable-icon { - background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat; - background-size: cover; - width: 16px; - height: 16px; -} - -@media (min-resolution: 1.1dppx) { - .variable-or-property-non-writable-icon { - background-image: url("chrome://devtools/skin/images/vview-lock@2x.png"); - } -} - -.variable-or-property-frozen-label, -.variable-or-property-sealed-label, -.variable-or-property-non-extensible-label { - height: 16px; - padding-inline-end: 4px; -} - -.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { - color: #A09090; -} - -/* Aligned values */ - -.variables-view-container[aligned-values] .title > .separator { - -moz-box-flex: 1; -} - -.variables-view-container[aligned-values] .title > .value { - -moz-box-flex: 0; - width: 70vw; -} - -.variables-view-container[aligned-values] .title > .element-value-input { - width: calc(70vw - 10px); -} - -/* Actions first */ - -.variables-view-open-inspector { - -moz-box-ordinal-group: 1; -} - -.variables-view-edit, -.variables-view-add-property { - -moz-box-ordinal-group: 2; -} - -.variable-or-property-frozen-label, -.variable-or-property-sealed-label, -.variable-or-property-non-extensible-label, -.variable-or-property-non-writable-icon { - -moz-box-ordinal-group: 3; -} - -.variables-view-delete { - -moz-box-ordinal-group: 4; -} - -.variables-view-container[actions-first] .variables-view-delete, -.variables-view-container[actions-first] .variables-view-add-property, -.variables-view-container[actions-first] .variables-view-open-inspector { - -moz-box-ordinal-group: 0; -} - -.variables-view-container[actions-first] [invisible] { - visibility: hidden; -} - -/* Variables and properties tooltips */ - -.variable-or-property > tooltip > label { - margin: 0 2px 0 2px; -} - -.variable-or-property[non-enumerable] > tooltip > label.enumerable, -.variable-or-property[non-configurable] > tooltip > label.configurable, -.variable-or-property[non-writable] > tooltip > label.writable, -.variable-or-property[non-extensible] > tooltip > label.extensible { - color: #A09090; - text-decoration: line-through; -} - -.variable-or-property[overridden] > tooltip > label.overridden { - padding-inline-start: 4px; - border-inline-start: 1px dotted #9C9CFF; -} - -.variable-or-property[safe-getter] > tooltip > label.WebIDL { - padding-inline-start: 4px; - border-inline-start: 1px dotted #9C9CFF; - color: #008484; -} - -/* Variables and properties editing */ -.variables-view-delete, -.variables-view-edit, -.variables-view-open-inspector { - width: 16px; - height: 16px; - background-size: cover; - cursor: pointer; -} - -.variables-view-delete:hover, -.variables-view-edit:hover, -.variables-view-open-inspector:hover { - filter: url(images/filters.svg#checked-icon-state); -} - -.variables-view-delete:active, -.variables-view-edit:active, -.variables-view-open-inspector:active { - filter: url(images/filters.svg#checked-icon-state); -} - -.variable-or-property:focus > .title > .variables-view-delete, -.variable-or-property:focus > .title > .variables-view-edit, -.variable-or-property:focus > .title > .variables-view-open-inspector { - filter: none; -} - -.variables-view-delete { - background-image: var(--delete-icon); -} - -@media (min-resolution: 1.1dppx) { - .variables-view-delete { - background-image: var(--delete-icon-2x); - } -} - -.variables-view-edit { - background-image: url("chrome://devtools/skin/images/vview-edit.png"); -} - -@media (min-resolution: 1.1dppx) { - .variables-view-edit { - background-image: url("chrome://devtools/skin/images/vview-edit@2x.png"); - } -} - -.variables-view-open-inspector { - background-image: url("chrome://devtools/skin/images/vview-open-inspector.png"); -} - -@media (min-resolution: 1.1dppx) { - .variables-view-open-inspector { - background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png"); - } -} - -/* Variables and properties input boxes */ - -.variable-or-property > .title > .separator + .element-value-input { - margin-inline-start: -2px !important; - margin-inline-end: 2px !important; -} - -.variable-or-property > .title > .separator[hidden=true] + .element-value-input { - margin-inline-start: 4px !important; - margin-inline-end: 2px !important; -} - -.element-name-input { - margin-inline-start: -2px !important; - margin-inline-end: 2px !important; - font-weight: 600; -} - -.element-value-input, -.element-name-input { - border: 1px solid #008484 !important; - color: inherit; -} - -/* Variables and properties searching */ - -.variable-or-property[unmatched] { - border: none; - margin: 0; -} - -/* Canvas graphs */ - -.graph-widget-container { - position: relative; -} - -.graph-widget-canvas { - width: 100%; - height: 100%; -} - -.graph-widget-canvas[input=hovering-background] { - cursor: text; -} - -.graph-widget-canvas[input=hovering-region] { - cursor: pointer; -} - -.graph-widget-canvas[input=hovering-selection-start-boundary], -.graph-widget-canvas[input=hovering-selection-end-boundary], -.graph-widget-canvas[input=adjusting-selection-boundary] { - cursor: col-resize; -} - -.graph-widget-canvas[input=adjusting-view-area] { - cursor: grabbing; -} - -.graph-widget-canvas[input=hovering-selection-contents] { - cursor: grab; -} - -.graph-widget-canvas[input=dragging-selection-contents] { - cursor: grabbing; -} - -/* Line graph widget */ - -.line-graph-widget-gutter { - position: absolute; - width: 10px; - height: 100%; - top: 0; - left: 0; - pointer-events: none; - - background: #000000; - border-inline-end: 1px solid #9C9CFF; -} - -.line-graph-widget-gutter-line { - position: absolute; - width: 100%; - border-top: 1px solid; -} - -.line-graph-widget-gutter-line[type=maximum] { - border-color: #008484; -} - -.line-graph-widget-gutter-line[type=minimum] { - border-color: #FF0000; -} - -.line-graph-widget-gutter-line[type=average] { - border-color: #FF9F00; -} - -.line-graph-widget-tooltip { - position: absolute; - border-radius: 2px; - line-height: 15px; - padding-inline-start: 6px; - padding-inline-end: 6px; - transform: translateY(-50%); - font-size: 0.8rem !important; - z-index: 1; - pointer-events: none; - - background: #404000; -} - -.line-graph-widget-tooltip[with-arrows=true]::before { - content: ""; - position: absolute; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - top: calc(50% - 3px); -} - -.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - border-inline-end: 3px solid #9C9CFF; - left: -3px; -} - -.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - border-inline-start: 3px solid #9C9CFF; - right: -3px; -} - -.line-graph-widget-tooltip[type=maximum] { - left: 14px; -} - -.line-graph-widget-tooltip[type=minimum] { - left: 14px; -} - -.line-graph-widget-tooltip[type=average] { - right: 4px; -} - -.line-graph-widget-tooltip > [text=info] { - color: var(--theme-content-color2); -} - -.line-graph-widget-tooltip > [text=value] { - margin-inline-start: 3px; -} - -.line-graph-widget-tooltip > [text=metric] { - margin-inline-start: 1px; - color: var(--theme-content-color4); -} - -.line-graph-widget-tooltip > [text=value], -.line-graph-widget-tooltip > [text=metric] { -/* text-shadow: 1px 0px rgba(255,255,255,0.6), - -1px 0px rgba(255,255,255,0.6), - 0px -1px rgba(255,255,255,0.6), - 0px 1px rgba(255,255,255,0.6);*/ -} - -.line-graph-widget-tooltip[type=maximum] > [text=value] { - color: var(--theme-highlight-green); -} - -.line-graph-widget-tooltip[type=minimum] > [text=value] { - color: var(--theme-highlight-red); -} - -.line-graph-widget-tooltip[type=average] > [text=value] { - color: var(--theme-highlight-orange); -} - -/* Bar graph widget */ - -.bar-graph-widget-legend { - position: absolute; - top: 4px; - left: 8px; - color: #A09090; - font-size: 0.8rem !important; - pointer-events: none; -} - -.bar-graph-widget-legend-item { - float: left; - margin-inline-end: 8px; -} - -.bar-graph-widget-legend-item > [view="color"], -.bar-graph-widget-legend-item > [view="label"] { - vertical-align: middle; -} - -.bar-graph-widget-legend-item > [view="color"] { - display: inline-block; - width: 8px; - height: 8px; - border: 1px solid #9C9CFF; - border-radius: 1px; - margin-inline-end: 4px; - pointer-events: all; - cursor: pointer; -} - -.bar-graph-widget-legend-item > [view="label"] { -/* text-shadow: 1px 0px rgba(255,255,255,0.8), - -1px 0px rgba(255,255,255,0.8), - 0px -1px rgba(255,255,255,0.8), - 0px 1px rgba(255,255,255,0.8);*/ -} - -/* Charts */ - -.generic-chart-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.generic-chart-container { - color: var(--theme-body-color-alt); -} - -.chart-colored-blob { - fill: var(--theme-highlight-blue); - background: var(--theme-highlight-blue); -} - -/* Charts: Pie */ - -.pie-chart-slice { - stroke-width: 1px; - cursor: pointer; -} - -.pie-chart-slice { - stroke: #A09090; -} - -.pie-chart-slice[largest] { - stroke-width: 2px; - stroke: #9C9CFF; -} - -.pie-chart-label { - text-anchor: middle; - dominant-baseline: middle; - pointer-events: none; -} - -.pie-chart-label { - fill: #000; -} - -.pie-chart-container[slices="1"] > .pie-chart-slice { - stroke-width: 0px; -} - -.pie-chart-slice, -.pie-chart-label { - transition: all 0.1s ease-out; -} - -.pie-chart-slice:not(:hover):not([focused]), -.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label { - transform: none !important; -} - -/* Charts: Table */ - -.table-chart-title { - padding-bottom: 10px; - font-size: 120%; - font-weight: 600; -} - -.table-chart-row { - margin-top: 1px; - cursor: pointer; -} - -.table-chart-grid:hover > .table-chart-row { - transition: opacity 0.1s ease-in-out; -} - -.table-chart-grid:not(:hover) > .table-chart-row { - transition: opacity 0.2s ease-in-out; -} - -.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover), -.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) { - opacity: 0.4; -} - -.table-chart-row-box { - width: 8px; - height: 1.5em; - margin-inline-end: 10px; -} - -.table-chart-row-label { - width: 8em; - padding-inline-end: 6px; - cursor: inherit; -} - -.table-chart-totals { - margin-top: 8px; - padding-top: 6px; -} - -.table-chart-totals { - border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */ -} - -.table-chart-summary-label { - font-weight: 600; - padding: 1px 0px; -} - -.table-chart-summary-label { - color: var(--theme-content-color2); -} - -/* Table Widget */ - -/* Table body */ - -.table-widget-body > .devtools-side-splitter { - border: none; -} - -.table-widget-body { - overflow: auto; -} - -.table-widget-body, -.table-widget-empty-text { - background-color: var(--theme-body-background); -} - -/* Column Headers */ - -.table-widget-column-header, -.table-widget-cell { - border-inline-end: 1px solid var(--table-splitter-color) !important; -} - -/* Table widget column header colors are taken from netmonitor.inc.css to match - the look of both the tables. */ - -.table-widget-column-header { - position: sticky; - top: 0; - width: 100%; - margin: 0; - padding: 5px 0 0 !important; - color: inherit; - text-align: center; - font-weight: inherit !important; - border-image: linear-gradient(transparent 15%, - var(--theme-splitter-color) 15%, - var(--theme-splitter-color) 85%, - transparent 85%, - transparent calc(100% - 1px), - var(--theme-splitter-color) calc(100% - 1px)) 1 1; - background-repeat: no-repeat; -} - -.table-widget-column-header:not([sorted]):hover { -/* background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));*/ -} - -.table-widget-column-header[sorted] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); - border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; -/* box-shadow: -0.5px 0 0 0.5px var(--theme-splitter-color);*/ - background-position: right 6px center; -} - -.table-widget-column-header[sorted]:-moz-locale-dir(rtl) { - background-position: 6px center; -} - -.table-widget-column-header[sorted=ascending] { - background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending"); -} - -.table-widget-column-header[sorted=descending] { - background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending"); -} - -.table-widget-column[readonly] { - background-color: #402800; -} - -.table-widget-body .devtools-side-splitter:last-of-type { - display: none; -} - -/* Cells */ - -.table-widget-cell { - width: 100%; - padding: 3px 4px; - min-width: 100px; - -moz-user-focus: normal; - color: var(--theme-body-color); -} - -.table-widget-cell[hidden] { - display: none; -} - -.table-widget-column-header + .table-widget-cell { - border-top: 1px solid var(--theme-splitter-color); -} - -.table-widget-cell:last-child { - border-bottom: 1px solid var(--table-splitter-color); -} - -.table-widget-cell.even:not(.theme-selected) { - background-color: var(--table-zebra-background); -} - -:root:not(.no-animate) .table-widget-cell.flash-out { - animation: flash-out 0.5s ease-in; -} - -@keyframes flash-out { - to { - background: var(--theme-contrast-background2); - } -} - -/* Empty text and initial text */ - -.table-widget-empty-text { - display: none; - text-align: center; - font-size: large; - margin-top: -20px !important; -} - -.table-widget-body:empty + .table-widget-empty-text:not([value=""]), -.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { - display: block; -} - -/* Tree Widget */ - -.tree-widget-container { - padding: 0; - margin: 0; - width: 100%; - height: 100%; - list-style: none; - overflow: hidden; - margin-inline-end: 40px; -} - -.tree-widget-container:-moz-focusring, -.tree-widget-container *:-moz-focusring { - outline-style: none; -} - -.tree-widget-empty-text { - padding: 10px 20px; - font-size: medium; - background: transparent; - pointer-events: none; -} - -/* Tree Item */ - -.tree-widget-container .tree-widget-item { - padding: 2px 0px 4px; - /* OSX has line-height 14px by default, which causes weird alignment issues - * because of 20px high icons. thus making line-height consistent with that of - * windows. - */ - line-height: 17px !important; - display: inline-block; - width: 100%; - word-break: keep-all; /* To prevent long urls like http://foo.com/bar from - breaking in multiple lines */ -} - -.tree-widget-container .tree-widget-children { - margin: 0; - padding: 0; - list-style: none; -} - -.tree-widget-item[level="1"] { - font-weight: 700; -} - -/* Twisties */ -.tree-widget-item::before { - content: ""; - width: 14px; - height: 14px; - float: left; - margin: 3px 2px -3px; - background-repeat: no-repeat; - background-image: url("chrome://devtools/skin/images/controls.png"); - background-size: 56px 28px; - cursor: pointer; - background-position: -28px -14px; -} - -.tree-widget-item:-moz-locale-dir(rtl)::before { - float: right; - transform: scaleX(-1); -} - -.tree-widget-item[empty]::before { - background: transparent; -} - -.tree-widget-item[expanded]::before { - background-position: -42px -14px; -} - -.tree-widget-item + ul { - overflow: hidden; - animation: collapse-tree-item 0.2s; - max-height: 0; -} - -.tree-widget-item[expanded] + ul { - animation: expand-tree-item 0.3s; - max-height: unset; -} - -@keyframes collapse-tree-item { - from { - max-height: 300px; - } - to { - max-height: 0; - } -} - -@keyframes expand-tree-item { - from { - max-height: 0; - } - to { - max-height: 500px; - } -} - -@media (min-resolution: 1.1dppx) { - .tree-widget-item:before { - background-image: url("chrome://devtools/skin/images/controls@2x.png"); - } -} - -/* Indentation of child items in the tree */ - -/* For level > 6 */ -.tree-widget-item[level] + ul > li > .tree-widget-item { - padding-inline-start: 98px; -} - -/* First level */ -.tree-widget-item[level="1"] + ul > li > .tree-widget-item { - padding-inline-start: 14px; -} - -/* Second level */ -.tree-widget-item[level="2"] + ul > li > .tree-widget-item { - padding-inline-start: 28px; -} - -/* Third level */ -.tree-widget-item[level="3"] + ul > li > .tree-widget-item { - padding-inline-start: 42px; -} - -/* Fourth level */ -.tree-widget-item[level="4"] + ul > li > .tree-widget-item { - padding-inline-start: 56px; -} - -/* Fifth level */ -.tree-widget-item[level="5"] + ul > li > .tree-widget-item { - padding-inline-start: 70px; -} - -/* Sixth level */ -.tree-widget-item[level="6"] + ul > li > .tree-widget-item { - padding-inline-start: 84px; -} - -/* Custom icons for certain tree items indicating the type of the item */ - -.tree-widget-item[type]::after { - content: ""; - float: left; - width: 16px; - height: 17px; - margin-inline-end: 4px; - background-repeat: no-repeat; - background-size: 20px auto; - background-position: 0 0; - background-size: auto 20px; - opacity: 0.75; -} - -.tree-widget-item.theme-selected[type]::after { - opacity: 1; -} - -.tree-widget-item:-moz-locale-dir(rtl)::after { - float: right; -} - -/*.theme-light .tree-widget-item.theme-selected[type]::after,*/ -.tree-widget-item[type]::after { - filter: invert(1); -} - -.tree-widget-item[type="dir"]::after { - background-image: url("chrome://devtools/skin/images/filetypes/dir-close.svg"); - background-position: 2px 0; - background-size: auto 16px; - width: 20px; -} - -.tree-widget-item[type="dir"][expanded]:not([empty])::after { - background-image: url("chrome://devtools/skin/images/filetypes/dir-open.svg"); -} - -.tree-widget-item[type="url"]::after { - background-image: url("chrome://devtools/skin/images/filetypes/globe.svg"); - background-size: auto 18px; - width: 18px; -}