some corrections and finishing touches to that LCARStrek works well for Firefox 55...
[themes.git] / inspector.css
... / ...
CommitLineData
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 --eyedropper-image: url(images/command-eyedropper.svg);
7}
8
9window {
10 padding: 0;
11}
12
13:root {
14 --breadcrumbs-border-color: #9C9CFF;
15}
16
17* {
18 box-sizing: border-box;
19}
20
21/* Make sure to hide scroll bars for the parent window */
22window {
23 overflow: hidden;
24}
25
26/* The main Inspector panel container. */
27.inspector-responsive-container {
28 height: 100vh;
29}
30
31/* The main panel layout. This area consists of a toolbar, markup view
32 and breadcrumbs bar. */
33#inspector-main-content {
34 /* Subtract 1 pixel from the panel height. It's puzzling why this
35 is needed, but if not presented the entire Inspector panel
36 content jumps 1 pixel up when the Toolbox is opened. */
37 height: calc(100% - 1px);
38 /* This min-width avoids a visual glitch when moving the splitter quickly to the left.
39 See bug 1307408 comment #12. */
40 min-width: 125px;
41 display: flex;
42 flex-direction: column;
43 flex: 1 1 auto;
44}
45
46/* Inspector Panel Splitter */
47
48#inspector-splitter-box {
49 height: 100vh;
50 width: 100vw;
51 position: fixed;
52}
53
54/* Minimum dimensions for the Inspector splitter areas. */
55#inspector-splitter-box .uncontrolled,
56#inspector-splitter-box .controlled {
57 min-height: 50px;
58 min-width: 50px;
59 overflow-x: hidden;
60}
61
62/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
63 the sidebar tab to small width. If a specific panel supports smaller width, this should
64 be overridden on a panel-by-panel basis */
65.inspector-tabpanel {
66 min-width: 200px;
67}
68
69#inspector-splitter-box .controlled.pane-collapsed {
70 visibility: collapse;
71}
72
73/* Use flex layout for the Inspector toolbar. For now, it's done
74 specifically for the Inspector toolbar since general rule applied
75 on .devtools-toolbar breaks breadcrumbs and also toolbars in other
76 panels (e.g. webconsole, debugger), these are not ready for HTML
77 layout yet. */
78#inspector-toolbar.devtools-toolbar {
79 display: flex;
80}
81
82#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
83 flex-grow: 1;
84 display: inline-block;
85}
86
87/* Add element toolbar button */
88#inspector-element-add-button::before {
89 background-image: url("chrome://devtools/skin/images/add.svg");
90 list-style-image: url("chrome://devtools/skin/images/add.svg");
91 -moz-user-focus: normal;
92}
93
94#inspector-searchlabel {
95 overflow: hidden;
96}
97
98/* Make sure the text is vertically centered in Inspector's
99 search box. This can be removed when the search box is
100 switched to HTML.
101 See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */
102#inspector-searchbox {
103 line-height: 19px;
104}
105
106#inspector-search {
107 flex: unset;
108}
109
110/* Eyedropper toolbar button */
111
112#inspector-eyedropper-toggle {
113 /* Required to display tooltip when eyedropper is disabled in non-HTML documents */
114 pointer-events: auto;
115}
116
117#inspector-eyedropper-toggle::before {
118 background-image: var(--eyedropper-image);
119}
120
121#inspector-sidebar-toggle-box {
122 line-height: initial;
123}
124
125#inspector-breadcrumbs-toolbar {
126 padding: 0px;
127 border-bottom-width: 0px;
128/* border-top-width: 1px;
129 border-top-color: var(--breadcrumbs-border-color);*/
130 /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
131 get mistaken as a splitter */
132 background-color: var(--theme-alternate-toolbar-background);
133 background-image: none;
134 background-size: auto;
135 display: block;
136 position: relative;
137}
138
139/* Remove LCARS startcap and endcap */
140div#inspector-breadcrumbs-toolbar::before,
141div#inspector-breadcrumbs-toolbar::after {
142 display: none;
143}
144
145#inspector-breadcrumbs-toolbar,
146#inspector-breadcrumbs-toolbar * {
147 box-sizing: border-box;
148}
149
150#inspector-breadcrumbs {
151 display: flex;
152
153 /* Break out of the XUL flexbox, so the splitter can still shrink the
154 markup view even if the contents of the breadcrumbs are wider than
155 the new width. */
156 position: absolute;
157 top: 0;
158 left: 0;
159 bottom: 0;
160 right: 0;
161}
162
163#inspector-breadcrumbs .scrollbutton-up,
164#inspector-breadcrumbs .scrollbutton-down {
165 flex: 0;
166 display: flex;
167 align-items: center;
168}
169
170#inspector-breadcrumbs .html-arrowscrollbox-inner {
171 flex: 1;
172 display: flex;
173 overflow: hidden;
174}
175
176#inspector-breadcrumbs .breadcrumbs-widget-item {
177 white-space: nowrap;
178 flex-shrink: 0;
179 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
180}
181
182#inspector-sidebar-container {
183 overflow: hidden;
184 position: relative;
185 height: 100%;
186}
187
188#inspector-sidebar {
189 position: absolute;
190 top: 0;
191 bottom: 0;
192 left: 0;
193 right: 0;
194}
195
196/* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */
197.inspector-tabpanel > * {
198 -moz-user-focus: normal;
199}
200
201/* "no results" warning message displayed in the ruleview and in the computed view */
202
203#ruleview-no-results,
204#computedview-no-results {
205 color: var(--theme-body-color-inactive);
206 text-align: center;
207 margin: 5px;
208}
209
210/* Markup Box */
211
212iframe {
213 border: 0;
214}
215
216#markup-box {
217 width: 100%;
218 flex: 1;
219 min-height: 0;
220}
221
222#markup-box > iframe {
223 height: 100%;
224 width: 100%;
225}