1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 :root {
6  --breadcrumb-id-class-color: #909090;
7  --breadcrumb-pseudo-class-text-color: var(--yellow-70) ;
8 }
9
10 .theme-dark:root {
11  --breadcrumb-id-class-color: var(--theme-text-color-strong);
12  --breadcrumb-pseudo-class-text-color: var(--yellow-50);
13 }
14
15/* Inspector HTMLBreadcrumbs */
16
17.breadcrumbs-widget-container {
18  margin-right: 3px;
19  max-height: 24px; /* Set max-height for proper sizing on linux */
20  height: 24px; /* Set height to prevent starting small waiting for content */
21}
22
23.breadcrumbs-widget-container:-moz-locale-dir(rtl) {
24  margin-right: 0;
25  margin-left: 3px;
26}
27
28.scrollbutton-up,
29.scrollbutton-down {
30  appearance: none;
31  background: transparent;
32  box-shadow: none;
33  border: none;
34  list-style-image: none;
35  margin: 0;
36  padding: 0;
37  visibility: collapse;
38}
39
40.scrollbutton-up > .toolbarbutton-icon,
41.scrollbutton-down > .toolbarbutton-icon {
42  appearance: none;
43  width: 20px;
44  height: 16px;
45  background-size: 16px;
46  background-position: center;
47  background-repeat: no-repeat;
48  background-image: url("images/breadcrumbs-scrollbutton.svg");
49  list-style-image: none;
50  padding: 0;
51
52  -moz-context-properties: fill;
53  fill: var(--theme-toolbar-color);
54}
55
56.scrollbutton-up:not([disabled]):active:hover,
57.scrollbutton-down:not([disabled]):active:hover {
58  background-color: var(--theme-toolbar-hover);
59}
60
61.scrollbutton-up[disabled] > .toolbarbutton-icon,
62.scrollbutton-down[disabled] > .toolbarbutton-icon {
63  opacity: 0.5;
64}
65
66/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
67.scrollbutton-up {
68  border-right: solid 1px var(--theme-splitter-color);
69  border-left: solid 1px transparent;
70  box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
71}
72
73.scrollbutton-down {
74  border-right: solid 1px transparent;
75  border-left: solid 1px var(--theme-splitter-color);
76  box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
77}
78
79.scrollbutton-up[disabled],
80.scrollbutton-down[disabled] {
81  box-shadow: none;
82  border-color: transparent;
83}
84
85.scrollbutton-down > .toolbarbutton-icon {
86  transform: scaleX(-1);
87}
88
89.breadcrumbs-widget-item {
90  background-color: transparent;
91  border: none;
92  margin-inline: 10px 1px;
93  padding: 0;
94}
95
96.breadcrumbs-widget-item:first-child::before {
97  /* The first crumb does not need any separator before itself */
98  content: unset;
99}
100
101.breadcrumbs-widget-item:not(:first-child)::before {
102  content: url(chrome://devtools/skin/images/breadcrumbs-divider.svg);
103  background: none;
104  position: relative;
105  left: -3px;
106  margin: 0 4px 0 -1px;
107  top: -1px;
108}
109
110.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
111  color: var(--theme-highlight-purple);
112}
113
114.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
115.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
116.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
117  color: var(--theme-highlight-blue);
118}
119
120.theme-dark .breadcrumbs-widget-item {
121  color: var(--theme-selection-color);
122}
123
124.theme-light .breadcrumbs-widget-item {
125  color: var(--theme-body-color);
126}
127
128.breadcrumbs-widget-item-id,
129.breadcrumbs-widget-item-classes {
130  color: var(--breadcrumb-id-class-color);
131}
132
133.breadcrumbs-widget-item-pseudo-classes {
134  color: var(--breadcrumb-pseudo-class-text-color);
135}
136