App.css (3512B)
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 @property --cm-gutter-width { 6 syntax: "<length>"; 7 inherits: true; 8 initial-value: 20px; 9 } 10 11 @property --cm-editor-scroller-width { 12 syntax: "<length>"; 13 inherits: true; 14 initial-value: 20px; 15 } 16 17 * { 18 box-sizing: border-box; 19 } 20 21 html, 22 body { 23 height: 100%; 24 width: 100%; 25 margin: 0; 26 padding: 0; 27 } 28 29 #mount { 30 height: 100%; 31 } 32 33 button { 34 background: transparent; 35 border: none; 36 font-family: inherit; 37 font-size: inherit; 38 } 39 40 button:hover { 41 background-color: var(--theme-toolbar-background-hover); 42 } 43 44 .theme-dark button:hover { 45 background-color: var(--theme-toolbar-hover); 46 } 47 48 .debugger { 49 display: flex; 50 flex: 1; 51 height: 100%; 52 } 53 54 .debugger .tree-indent { 55 width: 16px; 56 margin-inline-start: 0; 57 border-inline-start: 0; 58 } 59 60 .editor-pane { 61 display: flex; 62 position: relative; 63 flex: 1; 64 background-color: var(--theme-body-background); 65 height: 100%; 66 overflow: hidden; 67 } 68 69 .editor-container { 70 width: 100%; 71 display: grid; 72 grid-template-areas: 73 "editor-header" 74 "editor " 75 "notification " 76 "editor-footer"; 77 grid-template-rows: 78 var(--editor-header-height) 79 1fr 80 auto 81 var(--editor-footer-height); 82 max-height: 100%; 83 overflow-y: auto; 84 container-type: inline-size; 85 86 .source-header { 87 width: 100cqw; 88 } 89 } 90 91 .editor-notification-footer { 92 background: var(--theme-warning-background); 93 border-top: 1px solid var(--theme-warning-border); 94 color: var(--theme-warning-color); 95 padding: 0.5em; 96 gap: 8px; 97 grid-area: notification; 98 display: flex; 99 /* center text within the notification */ 100 align-items: center; 101 102 .info.icon { 103 align-self: normal; 104 } 105 106 .close-button { 107 /* set a fixed height in order to avoid having it flexed to full height */ 108 height: 16px; 109 padding: 0; 110 /* put in top-right corner */ 111 margin-inline-start: auto; 112 align-self: normal; 113 114 &::before { 115 display: block; 116 width: 16px; 117 height: 16px; 118 content: ""; 119 background-image: url("chrome://devtools/skin/images/close.svg"); 120 fill: var(--theme-icon-color); 121 -moz-context-properties: fill; 122 } 123 } 124 } 125 126 /* Utils */ 127 .d-flex { 128 display: flex; 129 } 130 131 .align-items-center { 132 align-items: center; 133 } 134 135 .rounded-circle { 136 border-radius: 50%; 137 } 138 139 .text-white { 140 color: white; 141 } 142 143 .text-center { 144 text-align: center; 145 } 146 147 .min-width-0 { 148 min-width: 0; 149 } 150 151 /* 152 Prevents horizontal scrollbar from displaying when 153 right pane collapsed (#7505) 154 */ 155 .split-box > .splitter:last-child { 156 display: none; 157 } 158 159 /** 160 * In RTL layouts, the Debugger UI overlays the splitters. See Bug 1731233. 161 * Note: we need to the `.debugger` prefix here to beat the specificity of the 162 * general rule defined in SlitBox.css for `.split-box.vert > .splitter`. 163 */ 164 .debugger .split-box.vert > .splitter { 165 border-left-width: var(--devtools-splitter-inline-start-width); 166 border-right-width: var(--devtools-splitter-inline-end-width); 167 168 margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px); 169 margin-right: calc(-1 * var(--devtools-splitter-inline-end-width)); 170 } 171 172 ::-webkit-scrollbar { 173 width: 8px; 174 height: 8px; 175 background: transparent; 176 } 177 178 ::-webkit-scrollbar-track { 179 border-radius: 8px; 180 background: transparent; 181 } 182 183 ::-webkit-scrollbar-thumb { 184 border-radius: 8px; 185 background: rgba(113, 113, 113, 0.5); 186 }