+* {
+ box-sizing: border-box;
+}
+
+/* Make sure to hide scroll bars for the parent window */
+window {
+ overflow: hidden;
+}
+
+/* The main Inspector panel container. */
+.inspector-responsive-container {
+ height: 100vh;
+}
+
+/* The main panel layout. This area consists of a toolbar, markup view
+ and breadcrumbs bar. */
+#inspector-main-content {
+ /* Subtract 1 pixel from the panel height. It's puzzling why this
+ is needed, but if not presented the entire Inspector panel
+ content jumps 1 pixel up when the Toolbox is opened. */
+ height: calc(100% - 1px);
+ /* This min-width avoids a visual glitch when moving the splitter quickly to the left.
+ See bug 1307408 comment #12. */
+ min-width: 125px;
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+}
+
+/* Inspector Panel Splitter */
+
+#inspector-splitter-box {
+ height: 100vh;
+ width: 100vw;
+ position: fixed;
+}
+
+/* Minimum dimensions for the Inspector splitter areas. */
+#inspector-splitter-box .uncontrolled,
+#inspector-splitter-box .controlled {
+ min-height: 50px;
+ min-width: 50px;
+ overflow-x: hidden;
+}
+
+/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
+ the sidebar tab to small width. If a specific panel supports smaller width, this should
+ be overridden on a panel-by-panel basis */
+.inspector-tabpanel {
+ min-width: 200px;
+}
+
+#inspector-splitter-box .controlled.pane-collapsed {
+ visibility: collapse;
+}
+