.theme-light {
--table-splitter-color: #A09090;
--table-zebra-background: rgba(255,159,0,0.1);
+ --smw-margin: #9C9CFF;
+ --smw-item-top-border: #A09090;
+ --smw-item-bottom-border: #008484;
}
/* Generic pane helpers */
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;
/* SideMenuWidget container */
-.side-menu-widget-container {
- /* Hack: force hardware acceleration */
- transform: translateZ(1px);
-}
-
.side-menu-widget-container:-moz-locale-dir(ltr),
.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
}
/* SideMenuWidget items */
.side-menu-widget-item {
- border-top: 1px solid #9C9CFF;
+ border-top: 1px solid var(--smw-item-top-border);
+/* border-bottom: 1px solid var(--smw-item-bottom-border);*/
+}
+
+.side-menu-widget-item:last-of-type {
+/* box-shadow: inset 0 -1px 0 var(--smw-item-top-border);*/
+ border-bottom: 1px solid var(--smw-item-top-border);
+}
+
+.side-menu-widget-item {
/* To compensate for the top and bottom borders */
margin-top: -1px;
margin-bottom: -1px;
background-clip: padding-box;
}
-.side-menu-widget-item:last-of-type {
- border-bottom: 1px solid #9C9CFF;
-}
-
.side-menu-widget-item.selected {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
.variable-or-property[overridden] {
- background: rgba(160,144,144,0.0.5);
+ background: rgba(160,144,144,0.5);
}
.variable-or-property[overridden] .title > label {
}
/* Variables and properties editing */
-
-.variables-view-delete {
- background: url("chrome://devtools/skin/images/vview-delete.png");
- background-size: cover;
+.variables-view-delete,
+.variables-view-edit,
+.variables-view-open-inspector {
width: 16px;
height: 16px;
+ background-size: cover;
+ cursor: pointer;
}
-@media (min-resolution: 1.1dppx) {
- .variables-view-delete {
- background-image: url("chrome://devtools/skin/images/vview-delete@2x.png");
- }
+.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);
}
-.variables-view-delete:hover {
- background-position: 32px;
+.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:active {
- background-position: 16px;
+.variables-view-delete {
+ background-image: url("chrome://devtools/skin/images/vview-delete.png");
}
-.variable-or-property:focus > .title > .variables-view-delete {
-/* background-position: 0px; */
+@media (min-resolution: 1.1dppx) {
+ .variables-view-delete {
+ background-image: url("chrome://devtools/skin/images/vview-delete@2x.png");
+ }
}
.variables-view-edit {
- background: url("chrome://devtools/skin/images/vview-edit.png");
- background-size: cover;
- width: 16px;
- height: 16px;
- cursor: pointer;
+ background-image: url("chrome://devtools/skin/images/vview-edit.png");
}
@media (min-resolution: 1.1dppx) {
}
}
-.variables-view-edit:hover {
- background-position: 32px;
-}
-
-.variables-view-edit:active {
- background-position: 16px;
-}
-
-.variable-or-property:focus > .title > .variables-view-edit {
-/* background-position: 0px; */
-}
-
.variables-view-open-inspector {
- background: url("chrome://devtools/skin/images/vview-open-inspector.png");
- background-size: cover;
- width: 16px;
- height: 16px;
- cursor: pointer;
-}
-
-.variables-view-open-inspector:hover {
- background-position: 32px;
-}
-
-.variables-view-open-inspector:active {
- background-position: 16px;
-}
-
-.variable-or-property:focus > .title > .variables-view-open-inspector {
-/* background-position: 0px; */
+ background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
}
/* Variables and properties input boxes */
.table-widget-column-header,
.table-widget-cell {
- -moz-border-end: 1px solid var(--table-splitter-color) !important;
+ 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. This needs to be updated along with netmonitor
- header colors in bug 951714 */
+ the look of both the tables. */
.table-widget-column-header {
- background: rgba(0,0,0,0);
position: sticky;
top: 0;
width: 100%;
+ margin: 0;
padding: 5px 0 0 !important;
color: inherit;
text-align: center;
font-weight: inherit !important;
- transition: background-color 0.1s ease-in-out;
+ border-bottom-width: 0 !important;
+ border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+ background-repeat: no-repeat;
}
-.table-widget-column-header:hover {
- background: var(--theme-hover-background);
+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:hover:active {
- background: var(--theme-active-background);
+.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:not(:active)[sorted] {
- background: var(--theme-selection-background);
+.table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
+ background-position: 6px center;
}
-.table-widget-column-header:not(:active)[sorted=ascending] {
- background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
- background-size: 100% 1px;
- background-repeat: no-repeat;
+.table-widget-column-header[sorted=ascending] {
+ background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
}
-.table-widget-column-header:not(:active)[sorted=descending] {
- background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
- background-size: 100% 1px;
- background-repeat: no-repeat;
- background-position: bottom;
+.table-widget-column-header[sorted=descending] {
+ background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
}
/* Cells */
.table-widget-cell {
width: 100%;
padding: 3px 4px;
- background-clip: padding-box;
min-width: 100px;
-moz-user-focus: normal;
+ color: var(--theme-body-color);
+}
- margin-bottom: -1px !important;
- border-bottom: 1px solid transparent;
- color: var(--theme-body-color);
+.table-widget-column-header + .table-widget-cell {
+ border-top: 1px solid var(--theme-splitter-color);
}
.table-widget-cell:last-child {
background: var(--table-zebra-background);
}
-.table-widget-cell.flash-out {
+:root:not(.no-animate) .table-widget-cell.flash-out {
animation: flash-out 0.5s ease-in;
}
projects / themes.git / blobdiff