/* 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. */
.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;
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;
* 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 */
}
}
.scrollbutton-up {
- -moz-margin-end: 1px;
+ margin-inline-end: 1px;
}
.scrollbutton-down {
- -moz-margin-end: 0;
+ margin-inline-end: 0;
}
.scrollbutton-up > .toolbarbutton-icon,
}
.breadcrumbs-widget-item {
- background-color: var(--theme-toolbar-background);
+ background-color: var(--theme-capped-toolbar-background);
min-height: 24px;
min-width: 65px;
margin: 0;
.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 {
}
.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 {
.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 */
}
.side-menu-widget-item-arrow {
- -moz-margin-start: -7px;
+ margin-inline-start: -7px;
width: 7px; /* The image's width is 7 pixels */
}
.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 */
color: #000000;
}
+/* Custom scope stylings */
+
+.variables-view-watch-expressions .title > .name {
+ max-width: 14em;
+}
+
/* Generic variables traits */
.variables-view-variable:not(:last-child) {
}
.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 */
.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,
}
.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;
}
/* 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;
}
pointer-events: none;
background: #000000;
- -moz-border-end: 1px solid #9C9CFF;
+ border-inline-end: 1px solid #9C9CFF;
}
.line-graph-widget-gutter-line {
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;
}
.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;
}
}
.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);
}
.bar-graph-widget-legend-item {
float: left;
- -moz-margin-end: 8px;
+ margin-inline-end: 8px;
}
.bar-graph-widget-legend-item > [view="color"],
height: 8px;
border: 1px solid #9C9CFF;
border-radius: 1px;
- -moz-margin-end: 4px;
+ margin-inline-end: 4px;
pointer-events: all;
cursor: pointer;
}
.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;
}
height: 100%;
list-style: none;
overflow: hidden;
- -moz-margin-end: 40px;
+ margin-inline-end: 40px;
}
.tree-widget-container:-moz-focusring,
/* 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 */
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;
projects / themes.git / blobdiff