Modal.css (1047B)
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 .modal-wrapper { 6 position: fixed; 7 display: flex; 8 flex-direction: column; 9 align-items: center; 10 width: 100%; 11 height: 100%; 12 top: 0; 13 left: 0; 14 z-index: 100; 15 } 16 17 .modal { 18 display: flex; 19 flex-direction: column; 20 /* Place the modal below the sources tab strip */ 21 margin-block-start: var(--editor-header-height); 22 width: 80%; 23 max-height: 80vh; 24 overflow-y: auto; 25 background-color: var(--theme-toolbar-background); 26 box-shadow: 1px 1px 6px 1px var(--popup-shadow-color); 27 28 @media not (prefers-reduced-motion) { 29 animation: 150ms cubic-bezier(0.07, 0.95, 0, 1) slidein forwards; 30 } 31 } 32 33 @keyframes slidein { 34 from { 35 transform: translateY(-101%); 36 } 37 to { 38 transform: translateY(0); 39 } 40 } 41 42 /* This rule is active when the screen is not narrow */ 43 @media (min-width: 580px) { 44 .modal { 45 width: 50%; 46 } 47 }