responsive-browser.css (5402B)
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 /* This should map to --theme-toolbar-background. */ 7 --rdm-background-color: #f5f5f6; 8 --rdm-shadow-color: rgba(155, 155, 155, 0.26); 9 10 &[devtoolstheme="dark"] { 11 --rdm-background-color: #18181a; 12 --rdm-shadow-color: rgba(105, 105, 105, 0.26); 13 } 14 } 15 16 .browserContainer.responsive-mode { 17 background-color: var(--rdm-background-color); 18 --rdm-toolbar-height: 30px; 19 --rdm-toolbar-accomodate-ua-height: 60px; 20 } 21 22 .browserContainer.responsive-mode > .rdm-toolbar { 23 border: none; 24 position: absolute; 25 z-index: var(--browser-stack-z-index-rdm-toolbar); 26 height: var(--rdm-toolbar-height); 27 top: 0; 28 left: 0; 29 width: 100%; 30 31 /** 32 * The .rdm-toolbar will be above the .dialogBox in RDM so we shift the 33 * .dialogBox down by the height of the .rdm-toolbar so both are visible 34 */ 35 + .browserStack > .dialogStack:not(.content-prompt-dialog) > .dialogTemplate > .dialogBox { 36 margin-top: var(--rdm-toolbar-height); 37 } 38 } 39 40 .browserContainer.responsive-mode > .rdm-toolbar.accomodate-ua { 41 height: var(--rdm-toolbar-accomodate-ua-height); 42 43 /** 44 * When the browser window is less than 520 pixels wide, the RDM toolbar 45 * needs extra space to accomdate for the UA input so the .rdm-toolbar is 46 * set to a larger height of --rdm-toolbar-accomodate-ua-height. We also need 47 * to shift the .dialogBox down by the same height so both are visible. 48 */ 49 + .browserStack > .dialogStack > .dialogTemplate > .dialogBox { 50 margin-top: var(--rdm-toolbar-accomodate-ua-height); 51 } 52 } 53 54 .browserContainer.responsive-mode > .rdm-toolbar.device-modal-opened { 55 height: 100%; 56 } 57 58 .browserContainer.responsive-mode > .browserStack { 59 --resizer-offset: 4px; 60 --browser-viewport-width: calc(var(--rdm-width) + var(--resizer-offset)); 61 --browser-viewport-height: calc(var(--rdm-height) + var(--resizer-offset)); 62 --rdm-zoomed-width: calc(var(--rdm-width) * var(--rdm-zoom)); 63 --rdm-zoomed-height: calc(var(--rdm-height) * var(--rdm-zoom)); 64 min-height: 0; 65 min-width: 0; 66 overflow: auto; 67 contain: size; 68 grid-template-columns: 15px 1fr [center-align] var(--browser-viewport-width) 1fr; 69 grid-template-rows: 65px [margin-top-offset] var(--browser-viewport-height); 70 } 71 72 .browserContainer.responsive-mode > .browserStack > .rdm-dynamic-toolbar { 73 align-self: end; 74 background: lightslategray; 75 opacity: 0.5; 76 } 77 78 .browserContainer.responsive-mode > .browserStack > :is(browser, .rdm-viewport-resize-handle, .rdm-dynamic-toolbar) { 79 grid-column: center-align; 80 grid-row: margin-top-offset; 81 } 82 83 .browserContainer.responsive-mode.left-aligned > .browserStack > :is(browser, .rdm-viewport-resize-handle) { 84 grid-column: left-align; 85 } 86 87 .browserContainer.responsive-mode.left-aligned > .browserStack { 88 grid-template-columns: 15px [left-align] var(--browser-viewport-width) 1fr; 89 } 90 91 html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack { 92 grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px; 93 } 94 95 .browserContainer.responsive-mode > .browserStack > browser { 96 border: 1px solid var(--devtools-splitter-color); 97 box-shadow: 0 4px 4px 0 var(--rdm-shadow-color); 98 99 transform-origin: 50% 0; 100 transform: scale(var(--rdm-zoom), var(--rdm-zoom)); 101 box-sizing: content-box; /* This is important to ensure that the pane has the 102 precise number of pixels defined by --rdm-width 103 and --rdm-height. */ 104 height: var(--rdm-height); 105 width: var(--rdm-width); 106 } 107 108 .browserContainer.responsive-mode.left-aligned > .browserStack > browser { 109 transform-origin: 0 0; 110 } 111 112 /* Resize handles */ 113 114 .browserContainer.responsive-mode > .browserStack > .viewport-resize-handle { 115 width: 16px; 116 height: 16px; 117 background-image: url("./images/grippers.svg"); 118 margin-inline-end: var(--resizer-offset); 119 margin-block-end: var(--resizer-offset); 120 background-repeat: no-repeat; 121 background-origin: content-box; 122 cursor: nwse-resize; 123 align-self: end; 124 justify-self: right; 125 position: relative; 126 left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2); 127 top: calc(var(--rdm-zoomed-height) - var(--rdm-height)); 128 } 129 130 .browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-resize-handle { 131 left: calc(var(--rdm-zoomed-width) - var(--rdm-width)); 132 } 133 134 .browserContainer.responsive-mode > .browserStack > .viewport-horizontal-resize-handle { 135 width: 5px; 136 height: calc(var(--rdm-zoomed-height) - 16px); 137 cursor: ew-resize; 138 justify-self: right; 139 position: relative; 140 left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2); 141 } 142 143 .browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-horizontal-resize-handle { 144 left: calc(var(--rdm-zoomed-width) - var(--rdm-width)); 145 } 146 147 .browserContainer.responsive-mode > .browserStack > .viewport-vertical-resize-handle { 148 width: calc(var(--rdm-zoomed-width) - 16px); 149 height: 5px; 150 cursor: ns-resize; 151 align-self: end; 152 position: relative; 153 top: calc(var(--rdm-zoomed-height) - var(--rdm-height)); 154 left: calc((-1 * (var(--rdm-zoomed-width) - var(--rdm-width)) / 2)); 155 } 156 157 .browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-vertical-resize-handle { 158 left: 0; 159 }