X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fwidgets.css;h=67d6790a5c4d21f534ea3e3c1916e73a929c63d3;hp=ff341043f820fd67bccc336b0c94425bf92aeadb;hb=c877146a907a47dc9c88507a58a8048b8b5f1562;hpb=7d6161c5de5eb8284455c6ca486f0f51b51a1618

diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css
index ff341043..67d6790a 100644
--- a/LCARStrek/devtools/widgets.css
+++ b/LCARStrek/devtools/widgets.css
@@ -17,7 +17,7 @@
 /* Generic pane helpers */
 
 .generic-toggled-pane {
-  -moz-margin-start: 0 !important;
+  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. */
@@ -47,7 +47,7 @@
   .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 -moz-margin-end only.
+     * hidden using negative margin-inline-end only.
      */
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -80,7 +80,7 @@
     cursor: n-resize;
   }
 
-  .devtools-responsive-container > .devtools-sidebar-tabs:not([pane-collapsed]) {
+  .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;
@@ -92,14 +92,14 @@
      * If a vertical layout, the pane is on the bottom and should be hidden
      * using negative bottom margin only.
      */
-    -moz-margin-end: 0 !important;
+    margin-inline-end: 0 !important;
   }
 }
 
 /* BreacrumbsWidget */
 
 .breadcrumbs-widget-container {
-  -moz-margin-start: 2px;
+  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 */
 }
@@ -114,11 +114,11 @@
 }
 
 .scrollbutton-up {
-  -moz-margin-end: 1px;
+  margin-inline-end: 1px;
 }
 
 .scrollbutton-down {
-  -moz-margin-end: 0;
+  margin-inline-end: 0;
 }
 
 .scrollbutton-up > .toolbarbutton-icon,
@@ -231,7 +231,7 @@
 }
 
 .breadcrumbs-widget-item {
-  background-color: var(--theme-toolbar-background);
+  background-color: var(--theme-capped-toolbar-background);
   min-height: 24px;
   min-width: 65px;
   margin: 0;
@@ -254,8 +254,17 @@
 
 .breadcrumbs-widget-item[siblings-menu-open],
 .breadcrumbs-widget-item:active {
-  background-color: #FF9F00;
-  color: #000000;
+  background-color: var(--theme-active-background);
+  color: var(--theme-active-color);
+}
+
+.breadcrumbs-widget-item:-moz-focusring {
+  outline: none;
+}
+
+.breadcrumbs-widget-item[checked]:-moz-focusring > .button-box {
+  outline: var(--theme-focus-outline);
+  outline-offset: -1px;
 }
 
 .breadcrumbs-widget-item > .button-box {
@@ -269,16 +278,22 @@
 }
 
 .breadcrumbs-widget-item:not([checked]) {
-  background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
+  background-image: -moz-element(#breadcrumb-separator-normal);
+  background-repeat: no-repeat;
+  background-position: center left;
 }
 
 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
-  background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
+  background-image: -moz-element(#breadcrumb-separator-after);
+  background-repeat: no-repeat;
+  background-position: 0 0;
 }
 
 .breadcrumbs-widget-item[checked] {
-  background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
-  background-color: #008484; /* Select Highlight Blue */
+  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 {
@@ -312,27 +327,28 @@
 .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-highlight-lightorange);
+  color: var(--theme-button-color); /* --theme-highlight-lightorange */
 }
 
 .breadcrumbs-widget-item {
-  color: var(--theme-highlight-lightorange);
+  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-body-color-alt);
+  color: var(--theme-highlight-red); /* --theme-body-color-alt */
 }
 
 .breadcrumbs-widget-item-classes {
-  color: var(--theme-content-color1);
+  color: #402800; /* --theme-content-color1 */
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
-  color: var(--theme-highlight-lightorange);
+  color: var(--theme-button-color); /* --theme-highlight-lightorange */
 }
 
 /* SimpleListWidget */
@@ -416,7 +432,7 @@
 }
 
 .side-menu-widget-item-arrow {
-  -moz-margin-start: -7px;
+  margin-inline-start: -7px;
   width: 7px; /* The image's width is 7 pixels */
 }
 
@@ -482,13 +498,13 @@
 
 .side-menu-widget-group-checkbox {
   margin: 0;
-  -moz-margin-end: 4px;
+  margin-inline-end: 4px;
 }
 
 .side-menu-widget-item-checkbox {
   margin: 0;
-  -moz-margin-start: 4px;
-  -moz-margin-end: -4px;
+  margin-inline-start: 4px;
+  margin-inline-end: -4px;
 }
 
 /* SideMenuWidget misc */
@@ -524,6 +540,12 @@
   color: #000000;
 }
 
+/* Custom scope stylings */
+
+.variables-view-watch-expressions .title > .name  {
+  max-width: 14em;
+}
+
 /* Generic variables traits */
 
 .variables-view-variable:not(:last-child) {
@@ -545,11 +567,11 @@
 }
 
 .variable-or-property > .title > .theme-twisty {
-  -moz-margin-start: 5px;
+  margin-inline-start: 5px;
 }
 
 .variable-or-property:not([untitled]) > .variables-view-element-details {
-  -moz-margin-start: 7px;
+  margin-inline-start: 7px;
 }
 
 /* Traits applied when variables or properties are changed or overridden */
@@ -611,7 +633,7 @@
 .variable-or-property-sealed-label,
 .variable-or-property-non-extensible-label {
   height: 16px;
-  -moz-padding-end: 4px;
+  padding-inline-end: 4px;
 }
 
 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
@@ -682,13 +704,13 @@
 }
 
 .variable-or-property[overridden] > tooltip > label.overridden {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #9C9CFF;
+  padding-inline-start: 4px;
+  border-inline-start: 1px dotted #9C9CFF;
 }
 
 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #9C9CFF;
+  padding-inline-start: 4px;
+  border-inline-start: 1px dotted #9C9CFF;
   color: #008484;
 }
 
@@ -753,18 +775,18 @@
 /* Variables and properties input boxes */
 
 .variable-or-property > .title > .separator + .element-value-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
+  margin-inline-start: -2px !important;
+  margin-inline-end: 2px !important;
 }
 
 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
-  -moz-margin-start: 4px !important;
-  -moz-margin-end: 2px !important;
+  margin-inline-start: 4px !important;
+  margin-inline-end: 2px !important;
 }
 
 .element-name-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
+  margin-inline-start: -2px !important;
+  margin-inline-end: 2px !important;
   font-weight: 600;
 }
 
@@ -829,7 +851,7 @@
   pointer-events: none;
 
   background: #000000;
-  -moz-border-end: 1px solid #9C9CFF;
+  border-inline-end: 1px solid #9C9CFF;
 }
 
 .line-graph-widget-gutter-line {
@@ -854,8 +876,8 @@
   position: absolute;
   border-radius: 2px;
   line-height: 15px;
-  -moz-padding-start: 6px;
-  -moz-padding-end: 6px;
+  padding-inline-start: 6px;
+  padding-inline-end: 6px;
   transform: translateY(-50%);
   font-size: 0.8rem !important;
   z-index: 1;
@@ -873,12 +895,12 @@
 }
 
 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
-  -moz-border-end: 3px solid #9C9CFF;
+  border-inline-end: 3px solid #9C9CFF;
   left: -3px;
 }
 
 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
-  -moz-border-start: 3px solid #9C9CFF;
+  border-inline-start: 3px solid #9C9CFF;
   right: -3px;
 }
 
@@ -899,11 +921,11 @@
 }
 
 .line-graph-widget-tooltip > [text=value] {
-  -moz-margin-start: 3px;
+  margin-inline-start: 3px;
 }
 
 .line-graph-widget-tooltip > [text=metric] {
-  -moz-margin-start: 1px;
+  margin-inline-start: 1px;
   color: var(--theme-content-color4);
 }
 
@@ -940,7 +962,7 @@
 
 .bar-graph-widget-legend-item {
   float: left;
-  -moz-margin-end: 8px;
+  margin-inline-end: 8px;
 }
 
 .bar-graph-widget-legend-item > [view="color"],
@@ -954,7 +976,7 @@
   height: 8px;
   border: 1px solid #9C9CFF;
   border-radius: 1px;
-  -moz-margin-end: 4px;
+  margin-inline-end: 4px;
   pointer-events: all;
   cursor: pointer;
 }
@@ -1051,12 +1073,12 @@
 .table-chart-row-box {
   width: 8px;
   height: 1.5em;
-  -moz-margin-end: 10px;
+  margin-inline-end: 10px;
 }
 
 .table-chart-row-label {
   width: 8em;
-  -moz-padding-end: 6px;
+  padding-inline-end: 6px;
   cursor: inherit;
 }
 
@@ -1214,7 +1236,7 @@
   height: 100%;
   list-style: none;
   overflow: hidden;
-  -moz-margin-end: 40px;
+  margin-inline-end: 40px;
 }
 
 .tree-widget-container:-moz-focusring,
@@ -1320,37 +1342,37 @@
 
 /* For level > 6 */
 .tree-widget-item[level] + ul > li > .tree-widget-item {
-  -moz-padding-start: 98px;
+  padding-inline-start: 98px;
 }
 
 /* First level */
 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
-  -moz-padding-start: 14px;
+  padding-inline-start: 14px;
 }
 
 /* Second level */
 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
-  -moz-padding-start: 28px;
+  padding-inline-start: 28px;
 }
 
 /* Third level */
 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
-  -moz-padding-start: 42px;
+  padding-inline-start: 42px;
 }
 
 /* Fourth level */
 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
-  -moz-padding-start: 56px;
+  padding-inline-start: 56px;
 }
 
 /* Fifth level */
 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
-  -moz-padding-start: 70px;
+  padding-inline-start: 70px;
 }
 
 /* Sixth level */
 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
-  -moz-padding-start: 84px;
+  padding-inline-start: 84px;
 }
 
 /* Custom icons for certain tree items indicating the type of the item */
@@ -1360,7 +1382,7 @@
   float: left;
   width: 16px;
   height: 17px;
-  -moz-margin-end: 4px;
+  margin-inline-end: 4px;
   background-repeat: no-repeat;
   background-size: 20px auto;
   background-position: 0 0;