X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fwidgets.css;h=110c4bc8655c7afc58cb441d57c401888d76924c;hp=4494587435fbaea3e953d90321068f6d7aaf1a5e;hb=936e60fe1e8ef7a38298736369448d66d0507842;hpb=2b5a514788884f7527ad59c3381c75a71d4dbeea diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css index 44945874..110c4bc8 100644 --- a/LCARStrek/browser/devtools/widgets.css +++ b/LCARStrek/browser/devtools/widgets.css @@ -24,17 +24,34 @@ -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 (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 */ border: 0; margin: 0; min-height: 3px; height: 3px; - margin-bottom: -3px; + margin-top: -3px; + + /* Reset the vertical splitter styles */ + width: auto; + min-width: 0; + /* In some edge case the cursor is not changed to n-resize */ cursor: n-resize; } @@ -110,14 +127,14 @@ .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 #181d20; + 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 #181d20; + box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background); } .scrollbutton-up[disabled], @@ -152,12 +169,12 @@ #breadcrumb-separator-before, #breadcrumb-separator-after:after { - background: #008484; /* Select Highlight Blue */ + background: var(--theme-selection-background); } #breadcrumb-separator-after, #breadcrumb-separator-before:after { - background: #000000; /* Toolbars */ + background: var(--theme-toolbar-background); } /* This chevron arrow cannot be replicated easily in CSS, so we are using @@ -181,7 +198,7 @@ } .breadcrumbs-widget-item { - background-color: #000000; + background-color: var(--theme-toolbar-background); min-height: 24px; min-width: 65px; margin: 0; @@ -189,17 +206,17 @@ border: none; border-radius: 0; outline: none; - color: #FF9F00; + color: var(--theme-content-color1); } .breadcrumbs-widget-item:hover { - background-color: #FFCF00; - color: #000000; + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); } .breadcrumbs-widget-item[checked]:not(:hover) { - background-color: #008484; - color: #000000; + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .breadcrumbs-widget-item[siblings-menu-open], @@ -208,6 +225,12 @@ color: #000000; } +.breadcrumbs-widget-item > .button-box { + border: none; + padding-top: 0; + padding-bottom: 0; +} + .breadcrumbs-widget-item:not([checked]) { background-image: -moz-element(#breadcrumb-separator-normal); background-repeat: no-repeat; @@ -258,30 +281,30 @@ .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: #FF9F00; /* Foreground (Text) - Light */ + color: var(--theme-highlight-lightorange); } .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id, .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag, .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes, .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes { - color: #000000 !important; + color: var(--theme-hover-color) !important; } .breadcrumbs-widget-item { - color: #FFCF00; /* Foreground (Text) - Light */ + color: var(--theme-highlight-lightorange); } .breadcrumbs-widget-item-id { - color: #A09090; /* Foreground (Text) - Grey */ + color: var(--theme-body-color-alt); } .breadcrumbs-widget-item-classes { - color: #FF9F00; /* Content (Text) - Light */ + color: var(--theme-content-color1); } .breadcrumbs-widget-item-pseudo-classes { - color: #FFCF00; /* Light Orange */ + color: var(--theme-highlight-lightorange); } /* SimpleListWidget */ @@ -292,18 +315,18 @@ } .simple-list-widget-item.selected { - background-color: #008484; /* Select Highlight Blue */ - color: #FFCF00; /* Light foreground text */ + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .simple-list-widget-item:not(.selected):hover { - background-color: #FFCF00; - color: #FFCF00; + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); } .simple-list-widget-perma-text, .simple-list-widget-empty-text { - color: #8050B0; + color: var(--theme-body-color-alt); padding: 4px 8px; } @@ -318,7 +341,7 @@ .fast-list-widget-empty-text { padding: 12px; font-weight: 600; - color: #8050B0; + color: var(--theme-body-color-alt); } /* SideMenuWidget */ @@ -328,9 +351,6 @@ .side-menu-widget-container { /* Hack: force hardware acceleration */ transform: translateZ(1px); - - background-color: #000000; - color: #FF9F00; } .side-menu-widget-container:-moz-locale-dir(ltr), @@ -355,9 +375,8 @@ .side-menu-widget-group-title { padding: 4px; - - background-color: #A09090; - color: #000000; + background-color: var(--theme-contrastsidebar-background); + color: var(--theme-contrastsidebar-color); } /* SideMenuWidget items */ @@ -375,8 +394,8 @@ } .side-menu-widget-item.selected { - background-color: #008484 !important; - color: #000000; + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .side-menu-widget-item-arrow { @@ -422,13 +441,12 @@ /* To compensate for the .side-menu-widget-item-contents padding. */ -moz-margin-start: -4px; -moz-margin-end: -8px; - - background-color: #000000; + color: var(--theme-selection-color); } .side-menu-widget-item-other.selected { - background-color: #008484; - color: #000000; + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .side-menu-widget-item-other:first-of-type { @@ -459,12 +477,13 @@ /* SideMenuWidget misc */ +.theme-dark .side-menu-widget-container, +.theme-dark .side-menu-widget-empty-text { + background-color: var(--theme-toolbar-background); +} + .side-menu-widget-empty-text { padding: 12px; - - background-color: #000000; - font-weight: 600; - color: #A09090; } /* VariablesView */ @@ -475,14 +494,14 @@ } .variables-view-empty-notice { - color: #A09090; + color: var(--theme-body-color-alt); padding: 2px; } .variables-view-scope:focus > .title, .theme-dark .variable-or-property:focus > .title { - background-color: #008484; /* Selection colors */ - color: #FFCF00; + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .variables-view-scope > .title { @@ -568,7 +587,7 @@ opacity: 0.5; } -@media (min-resolution: 2dppx) { +@media (min-resolution: 1.25dppx) { .variable-or-property-non-writable-icon > .title:after { background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); } @@ -668,7 +687,7 @@ height: 16px; } -@media (min-resolution: 2dppx) { +@media (min-resolution: 1.25dppx) { .variables-view-delete { background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); } @@ -694,7 +713,7 @@ cursor: pointer; } -@media (min-resolution: 2dppx) { +@media (min-resolution: 1.25dppx) { .variables-view-edit { background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); } @@ -788,6 +807,10 @@ cursor: col-resize; } +.graph-widget-canvas[input=adjusting-view-area] { + cursor: grabbing; +} + .graph-widget-canvas[input=hovering-selection-contents] { cursor: grab; } @@ -796,31 +819,24 @@ cursor: grabbing; } -.graph-widget-canvas ~ * { - pointer-events: none; -} - /* Line graph widget */ -.line-graph-widget-canvas { - background: #000000; -} - .line-graph-widget-gutter { position: absolute; - background: #000000; width: 10px; height: 100%; top: 0; left: 0; - border-right: 1px solid #9C9CFF; + pointer-events: none; + + background: #000000; + -moz-border-end: 1px solid #9C9CFF; } .line-graph-widget-gutter-line { position: absolute; width: 100%; border-top: 1px solid; - transform: translateY(-1px); } .line-graph-widget-gutter-line[type=maximum] { @@ -837,17 +853,19 @@ .line-graph-widget-tooltip { position: absolute; - background: #404000; border-radius: 2px; line-height: 15px; -moz-padding-start: 6px; -moz-padding-end: 6px; transform: translateY(-50%); - font-size: 80%; + font-size: 0.8rem !important; z-index: 1; + pointer-events: none; + + background: #404000; } -.line-graph-widget-tooltip::before { +.line-graph-widget-tooltip[with-arrows=true]::before { content: ""; position: absolute; border-top: 3px solid transparent; @@ -855,30 +873,30 @@ top: calc(50% - 3px); } -.line-graph-widget-tooltip[arrow=start]::before { +.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { -moz-border-end: 3px solid #9C9CFF; left: -3px; } -.line-graph-widget-tooltip[arrow=end]::before { +.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { -moz-border-start: 3px solid #9C9CFF; right: -3px; } .line-graph-widget-tooltip[type=maximum] { - left: calc(10px + 6px); + left: 14px; } .line-graph-widget-tooltip[type=minimum] { - left: calc(10px + 6px); + left: 14px; } .line-graph-widget-tooltip[type=average] { - right: 6px; + right: 4px; } .line-graph-widget-tooltip > [text=info] { - color: #A09090; + color: var(--theme-content-color2); } .line-graph-widget-tooltip > [text=value] { @@ -887,7 +905,7 @@ .line-graph-widget-tooltip > [text=metric] { -moz-margin-start: 1px; - color: #9C9CFF; + color: var(--theme-content-color4); } .line-graph-widget-tooltip > [text=value], @@ -899,15 +917,15 @@ } .line-graph-widget-tooltip[type=maximum] > [text=value] { - color: #008484; + color: var(--theme-highlight-green); } .line-graph-widget-tooltip[type=minimum] > [text=value] { - color: #FF0000; + color: var(--theme-highlight-red); } .line-graph-widget-tooltip[type=average] > [text=value] { - color: #FF9F00; + color: var(--theme-highlight-orange); } /* Bar graph widget */ @@ -921,7 +939,8 @@ top: 4px; left: 8px; color: #A09090; - font-size: 80%; + font-size: 0.8rem !important; + pointer-events: none; } .bar-graph-widget-legend-item { @@ -941,6 +960,7 @@ border: 1px solid #9C9CFF; border-radius: 1px; -moz-margin-end: 4px; + pointer-events: none; } .bar-graph-widget-legend-item > [view="label"] { @@ -958,12 +978,12 @@ } .generic-chart-container { - color: #A09090; /* Light foreground text */ + color: var(--theme-body-color-alt); } .chart-colored-blob { - fill: #9C9CFF; /* Light content text */ - background: #9C9CFF; + fill: var(--theme-highlight-blue); + background: var(--theme-highlight-blue); } /* Charts: Pie */ @@ -1050,7 +1070,7 @@ } .table-chart-totals { - border-top: 1px solid #A09090; /* Grey foreground text */ + border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */ } .table-chart-summary-label { @@ -1059,7 +1079,7 @@ } .table-chart-summary-label { - color: #A09090; /* Light foreground text */ + color: var(--theme-content-color2); } /* Table Widget */ @@ -1072,10 +1092,8 @@ .table-widget-body { overflow: auto; -} -.table-widget-body { - background: #000000; /* Background-Sidebar */ + background: var(--theme-sidebar-background); } .table-widget-body:-moz-locale-dir(ltr) { @@ -1158,7 +1176,7 @@ .table-widget-cell { border-top: 1px solid #A09090; border-bottom: 1px solid #A09090; - color: #FF9F00; /* Light foreground text */ + color: var(--theme-body-color); } .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), @@ -1177,7 +1195,7 @@ @keyframes flash-out { to { - background: #795900; + background: var(--theme-contrast-background2); } } @@ -1216,6 +1234,7 @@ padding: 10px 20px; font-size: medium; background: transparent; + pointer-events: none; } /* Tree Item */ @@ -1307,7 +1326,7 @@ } } -@media (min-resolution: 2dppx) { +@media (min-resolution: 1.25dppx) { .tree-widget-item:before { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); }