ConditionalPanel.css (3140B)
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 /* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */ 6 .conditional-breakpoint-panel-container { 7 padding-block: 1em; 8 /* we want the conditional breakpoint/log point panel to be to the right of the gutter… */ 9 left: var(--cm-gutter-width, 0); 10 /* and to stick horizontally to it so it appears "fixed" … */ 11 position: sticky; 12 /* finally, we need to set it's width as the scroller width minus the gutter width so 13 it takes the whole horizontal visual space */ 14 width: calc(var(--cm-editor-scroller-width, 100%) - var(--cm-gutter-width, 0) - /* borders */ 2px); 15 } 16 17 .conditional-breakpoint-panel { 18 cursor: initial; 19 position: relative; 20 background: var(--theme-toolbar-background); 21 border-top: 1px solid var(--theme-splitter-color); 22 border-bottom: 1px solid var(--theme-splitter-color); 23 border-right: 1px solid var(--theme-splitter-color); 24 } 25 26 .conditional-breakpoint-panel .input-container:focus-within { 27 outline: var(--theme-focus-outline); 28 outline-offset: -2px; 29 } 30 31 .conditional-breakpoint-panel .prompt { 32 font-size: 1.8em; 33 color: var(--theme-graphs-orange); 34 padding-left: 3px; 35 padding-right: 3px; 36 padding-bottom: 3px; 37 text-align: right; 38 width: 30px; 39 flex-shrink: 0; 40 } 41 42 .conditional-breakpoint-panel .input-container { 43 display: flex; 44 flex-direction: row; 45 align-items: center; 46 position: relative; 47 } 48 49 .conditional-breakpoint-panel button[type="submit"] { 50 background-color: var(--blue-60); 51 color: white; 52 53 &:hover { 54 background-color: var(--blue-70); 55 color: white; 56 } 57 } 58 59 /* This is the panel "footer", with the "Show stacktrace" checkbox and Create/Cancel button 60 */ 61 .conditional-breakpoint-panel-controls { 62 display: flex; 63 flex-wrap: wrap; 64 justify-content: space-between; 65 align-items: center; 66 padding: 4px 8px; 67 border-top: 1px solid var(--theme-splitter-color); 68 gap: 8px 20px; 69 /* CodeMirror sets a monospace font on its content, let's go back to the defaut set on :root in common.css */ 70 font: message-box; 71 font-size: var(--theme-body-font-size); 72 } 73 74 .conditional-breakpoint-panel-buttons { 75 display: flex; 76 align-items: center; 77 flex-grow: 1; 78 justify-content: flex-end; 79 gap: 4px; 80 81 button { 82 outline-offset: 2px; 83 } 84 } 85 86 .conditional-breakpoint-panel-checkbox-label { 87 display: flex; 88 align-items: center; 89 } 90 91 .conditional-breakpoint-panel.log-point .prompt { 92 color: var(--purple-60); 93 } 94 95 .conditional-breakpoint-panel .CodeMirror { 96 margin: 6px 10px; 97 } 98 99 .conditional-breakpoint-panel .CodeMirror pre.CodeMirror-placeholder { 100 /* Match the color of the placeholder text to existing inputs in the Debugger */ 101 color: var(--theme-text-color-alt); 102 } 103 104 /* cm6 style */ 105 .conditional-breakpoint-panel .inline-codemirror-container { 106 flex: 1 1 100%; 107 108 /* We already set an outline on the conditional panel, so hide the default codemirror one */ 109 .cm-editor.cm-focused { 110 outline: none; 111 } 112 }