X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fwidgets.css;h=6c8df2454fc9793801aebe986d6779ab42515830;hp=7e3c18070f74a5c19173a82daf24d01f16868106;hb=19988d2d5bba419a5f24824e3c7edf3119d95898;hpb=42f880d7999a96ab6998882d52ab5b0113a23285 diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css index 7e3c1807..6c8df245 100644 --- a/LCARStrek/browser/devtools/widgets.css +++ b/LCARStrek/browser/devtools/widgets.css @@ -5,6 +5,12 @@ /* === BEGIN widgets.inc.css === */ +.theme-dark, +.theme-light { + --table-splitter-color: #A09090; + --table-zebra-background: rgba(255,159,0,0.1); +} + /* Generic pane helpers */ .generic-toggled-side-pane { @@ -40,11 +46,18 @@ } .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; } @@ -120,14 +133,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], @@ -162,12 +175,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 @@ -191,7 +204,7 @@ } .breadcrumbs-widget-item { - background-color: #000000; + background-color: var(--theme-toolbar-background); min-height: 24px; min-width: 65px; margin: 0; @@ -199,17 +212,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], @@ -274,30 +287,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 */ @@ -308,18 +321,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; } @@ -334,7 +347,7 @@ .fast-list-widget-empty-text { padding: 12px; font-weight: 600; - color: #8050B0; + color: var(--theme-body-color-alt); } /* SideMenuWidget */ @@ -344,9 +357,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), @@ -371,9 +381,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 */ @@ -391,8 +400,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 { @@ -438,13 +447,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 { @@ -475,12 +483,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 */ @@ -491,14 +500,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 { @@ -584,7 +593,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"); } @@ -684,7 +693,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"); } @@ -710,7 +719,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"); } @@ -804,6 +813,10 @@ cursor: col-resize; } +.graph-widget-canvas[input=adjusting-view-area] { + cursor: grabbing; +} + .graph-widget-canvas[input=hovering-selection-contents] { cursor: grab; } @@ -814,26 +827,22 @@ /* 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] { @@ -850,18 +859,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; @@ -869,30 +879,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] { @@ -901,7 +911,7 @@ .line-graph-widget-tooltip > [text=metric] { -moz-margin-start: 1px; - color: #9C9CFF; + color: var(--theme-content-color4); } .line-graph-widget-tooltip > [text=value], @@ -913,29 +923,25 @@ } .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 */ -.bar-graph-widget-canvas { - background: #000000; -} - .bar-graph-widget-legend { position: absolute; top: 4px; left: 8px; color: #A09090; - font-size: 80%; + font-size: 0.8rem !important; pointer-events: none; } @@ -974,12 +980,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 */ @@ -1066,7 +1072,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 { @@ -1075,7 +1081,7 @@ } .table-chart-summary-label { - color: #A09090; /* Light foreground text */ + color: var(--theme-content-color2); } /* Table Widget */ @@ -1090,31 +1096,16 @@ overflow: auto; } -.table-widget-body { - background: #000000; /* Background-Sidebar */ -} - -.table-widget-body:-moz-locale-dir(ltr) { -/* box-shadow: inset -1px 0 0 @smw_marginDark@;*/ -} - -.table-widget-body:-moz-locale-dir(rtl) { -/* box-shadow: inset 1px 0 0 @smw_marginDark@;*/ -} - -.table-widget-body:-moz-locale-dir(ltr) { -/* box-shadow: inset -1px 0 0 @smw_marginLight@;*/ -} - -.table-widget-body:-moz-locale-dir(rtl) { -/* box-shadow: inset 1px 0 0 @smw_marginLight@;*/ +table-widget-body, +.table-widget-empty-text { + background-color: var(--theme-body-background); } /* Column Headers */ .table-widget-column-header, .table-widget-cell { - -moz-border-end: 1px solid #A09090; + -moz-border-end: 1px solid var(--table-splitter-color) !important; } /* Table widget column header colors are taken from netmonitor.inc.css to match @@ -1125,10 +1116,8 @@ background: rgba(0,0,0,0); position: sticky; top: 0; - min-height: 32px; width: 100%; - border: none; - padding: 8px 0 0 !important; + padding: 5px 0 0 !important; color: inherit; text-align: center; font-weight: inherit !important; @@ -1136,15 +1125,15 @@ } .table-widget-column-header:hover { - background: #FFCF00; + background: var(--theme-hover-background); } .table-widget-column-header:hover:active { - background: #FF9F00; + background: var(--theme-active-background); } .table-widget-column-header:not(:active)[sorted] { - background: #008484; + background: var(--theme-selection-background); } .table-widget-column-header:not(:active)[sorted=ascending] { @@ -1164,27 +1153,23 @@ .table-widget-cell { width: 100%; - margin: -1px 0 !important; padding: 3px 4px; background-clip: padding-box; min-width: 100px; -moz-user-focus: normal; -} -.table-widget-cell { - border-top: 1px solid #A09090; - border-bottom: 1px solid #A09090; - color: #FF9F00; /* Light foreground text */ + margin-bottom: -1px !important; + border-bottom: 1px solid transparent; + color: var(--theme-body-color); } -.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.table-widget-cell:not(.theme-selected)[odd] { - background: #404000; +.table-widget-cell:last-child { + border-bottom: 1px solid var(--table-splitter-color); } -.table-widget-cell:last-of-type { -/* box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/ +:root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.table-widget-cell:not(.theme-selected)[odd] { + background: var(--table-zebra-background); } .table-widget-cell.flash-out { @@ -1193,7 +1178,7 @@ @keyframes flash-out { to { - background: #795900; + background: var(--theme-contrast-background2); } } @@ -1257,11 +1242,11 @@ } .tree-widget-item[level="1"] { - font-weight: 800; + font-weight: 700; } /* Twisties */ -.tree-widget-item:before { +.tree-widget-item::before { content: ""; width: 14px; height: 14px; @@ -1274,27 +1259,19 @@ background-position: -28px -14px; } -.tree-widget-item:-moz-locale-dir(rtl):before { +.tree-widget-item:-moz-locale-dir(rtl)::before { float: right; transform: scaleX(-1); } -.theme-light .tree-widget-item:before { - background-position: 0 -14px; -} - -.tree-widget-item[empty]:before { +.tree-widget-item[empty]::before { background: transparent; } -.tree-widget-item[expanded]:before { +.tree-widget-item[expanded]::before { background-position: -42px -14px; } -.theme-light .tree-widget-item[expanded]:before { - background-position: -14px -14px; -} - .tree-widget-item + ul { overflow: hidden; animation: collapse-tree-item 0.2s; @@ -1324,7 +1301,7 @@ } } -@media (min-resolution: 2dppx) { +@media (min-resolution: 1.25dppx) { .tree-widget-item:before { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -1369,7 +1346,7 @@ /* Custom icons for certain tree items indicating the type of the item */ -.tree-widget-item[type]:after { +.tree-widget-item[type]::after { content: ""; float: left; width: 16px; @@ -1377,31 +1354,36 @@ -moz-margin-end: 4px; background-repeat: no-repeat; background-size: 20px auto; - filter: url('filters.svg#invert'); 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 { +.tree-widget-item:-moz-locale-dir(rtl)::after { float: right; } -.theme-dark .tree-widget-item[type]:after { - filter: url('filters.svg#invert-white'); +/*.theme-light .tree-widget-item.theme-selected[type]::after,*/ +.tree-widget-item[type]::after { + filter: invert(1); } -.tree-widget-item[type="dir"]:after { +.tree-widget-item[type="dir"]::after { background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg"); background-position: 2px 0; background-size: auto 16px; width: 20px; } -.tree-widget-item[type="dir"][expanded]:not([empty]):after { +.tree-widget-item[type="dir"][expanded]:not([empty])::after { background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg"); } -.tree-widget-item[type="url"]:after { +.tree-widget-item[type="url"]::after { background-image: url("chrome://browser/skin/devtools/filetype-globe.svg"); background-size: auto 18px; width: 18px;