splitters.css (3842B)
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 /* This file is loaded by both browser.xhtml and toolbox.xhtml. Therefore, rules 6 defined here can not rely on toolbox.xhtml variables. */ 7 8 /* Splitters */ 9 10 :root { 11 --devtools-splitter-color: #e0e0e2 /* --grey-25 */; 12 /* Use :where() so we don't get a higher specificity for this rule */ 13 &:where([devtoolstheme="dark"]) { 14 --devtools-splitter-color: #38383d /* --grey-70 */; 15 } 16 17 /* We can't use (forced-colors: active) as forced-colors doesn't apply as is, 18 but @media (forced-colors) should be enough to detect HCM */ 19 @media (forced-colors) { 20 --devtools-splitter-color: CanvasText; 21 } 22 23 /* Draggable splitter element size */ 24 --devtools-splitter-element-size: 1px; 25 --devtools-emphasized-splitter-element-size: 2px; 26 27 /* Define the widths of the draggable areas on each side of a splitter. top 28 and bottom widths are used for horizontal splitters, inline-start and 29 inline-end for side splitters.*/ 30 31 --devtools-splitter-top-width: 2px; 32 --devtools-splitter-bottom-width: 2px; 33 --devtools-horizontal-splitter-min-height: calc( 34 var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + var(--devtools-splitter-element-size) 35 ); 36 --devtools-emphasized-horizontal-splitter-min-height: calc( 37 var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + var(--devtools-emphasized-splitter-element-size) 38 ); 39 40 /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/ 41 --devtools-splitter-inline-start-width: 1px; 42 --devtools-splitter-inline-end-width: 4px; 43 44 --devtools-vertical-splitter-min-width: calc( 45 var(--devtools-splitter-inline-start-width) + var(--devtools-splitter-inline-end-width) + var(--devtools-splitter-element-size) 46 ); 47 } 48 49 splitter.devtools-horizontal-splitter, 50 .devtools-side-splitter { 51 appearance: none; 52 background-image: none; 53 border: 0; 54 border-style: solid; 55 border-color: transparent; 56 background-color: var(--devtools-splitter-color); 57 background-clip: content-box; 58 position: relative; 59 60 box-sizing: border-box; 61 62 z-index: var(--browser-stack-z-index-devtools-splitter, 1); 63 64 /* opt-out of forced colors because the transparent borders are turned into 65 opaque ones in High Contrast Mode. --devtools-splitter-color has specific value 66 in High Contrast Mode so we should be fine */ 67 forced-color-adjust: none; 68 } 69 70 splitter.devtools-horizontal-splitter { 71 min-height: var(--devtools-horizontal-splitter-min-height); 72 73 border-top-width: var(--devtools-splitter-top-width); 74 border-bottom-width: var(--devtools-splitter-bottom-width); 75 76 margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); 77 margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width)); 78 79 cursor: ns-resize; 80 } 81 82 #toolbox-deck ~ splitter.devtools-horizontal-splitter { 83 min-height: var(--devtools-emphasized-horizontal-splitter-min-height); 84 } 85 86 /** 87 * Emphasized splitter has the hover style. 88 * This emphasized splitter affect splitter console only. 89 */ 90 #toolbox-deck ~ splitter.devtools-horizontal-splitter:hover { 91 background-color: var(--theme-emphasized-splitter-color-hover); 92 } 93 94 .devtools-side-splitter { 95 min-width: var(--devtools-vertical-splitter-min-width); 96 97 border-inline-start-width: var(--devtools-splitter-inline-start-width); 98 border-inline-end-width: var(--devtools-splitter-inline-end-width); 99 100 margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px); 101 margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width)); 102 103 cursor: ew-resize; 104 } 105 106 .devtools-horizontal-splitter.disabled, 107 .devtools-side-splitter.disabled { 108 pointer-events: none; 109 }