1// Copyright (C) 2019 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15@import "widgets/theme"; 16 17// The opacity changes are only transitional. Once the `modalFadeOut` animation 18// reaches the end, the Mithril component that renders .modal-backdrop 19// (and .modal-dialog) is fully destroyed and removed from the DOM. 20// We use keyframes+animation, rather than transition, because the former allow 21// hooking the onanimationend events to synchronize the Mithril removal with 22// the end of the CSS animation. 23@keyframes modalFadeOut { 24 from { 25 opacity: 1; 26 } 27 to { 28 opacity: 0; 29 } 30} 31 32@keyframes modalFadeIn { 33 from { 34 opacity: 0; 35 } 36 to { 37 opacity: 1; 38 } 39} 40 41.modal-backdrop { 42 position: absolute; 43 z-index: 99; 44 background-color: rgba(0, 0, 0, 0.6); 45 top: 0; 46 left: 0; 47 right: 0; 48 bottom: 0; 49 backdrop-filter: blur(2px); 50 animation: modalFadeIn 0.25s var(--anim-easing); 51 animation-fill-mode: both; 52 53 &.modal-fadeout { 54 animation: modalFadeOut 0.25s var(--anim-easing); 55 animation-fill-mode: both; 56 } 57} 58 59.modal-dialog { 60 position: absolute; 61 z-index: 100; 62 background-color: #fff; 63 margin: auto; 64 min-width: 25vw; 65 min-height: 10vh; 66 padding: 30px; 67 max-width: 90vw; 68 max-height: 90vh; 69 border-radius: $pf-border-radius; 70 overflow-y: auto; 71 top: 50%; 72 left: 50%; 73 transform: translate(-50%, -50%); 74 font-family: Roboto, sans-serif; 75 font-weight: 300; 76 77 &.modal-dialog-valign-top { 78 top: 1rem; 79 transform: translate(-50%, 0); 80 } 81 82 > header { 83 display: flex; 84 justify-content: space-between; 85 align-items: center; 86 87 h2 { 88 margin-top: 0; 89 margin-bottom: 0; 90 font-family: "Roboto", sans-serif; 91 font-weight: 600; 92 font-size: 1.25rem; 93 line-height: 1.25; 94 color: #262f3c; 95 box-sizing: border-box; 96 } 97 98 button { 99 background: transparent; 100 border: 0; 101 } 102 } // header 103 104 main { 105 font-size: 1rem; 106 margin-top: 2rem; 107 line-height: 1.5; 108 color: rgba(0, 0, 0, 0.8); 109 110 .small-font { 111 font-size: 0.9rem; 112 } 113 } 114 115 footer { 116 display: flex; 117 justify-content: space-around; 118 margin-top: 2rem; 119 } // footer 120 121 .modal-btn { 122 font-size: 0.875rem; 123 padding-left: 1rem; 124 padding-right: 1rem; 125 padding-top: 0.5rem; 126 padding-bottom: 0.5rem; 127 background-color: #e6e6e6; 128 color: rgba(0, 0, 0, 0.8); 129 border: 2px solid transparent; 130 border-radius: $pf-border-radius; 131 cursor: pointer; 132 text-transform: none; 133 overflow: visible; 134 margin: 5px; 135 width: fit-content; 136 transition: 137 border-color 0.25s var(--anim-easing), 138 background-color 0.25s var(--anim-easing); 139 140 &:focus { 141 border-color: #03a9f4; 142 } 143 &:hover { 144 background-color: #ececec; 145 } 146 } 147 148 .modal-btn-primary { 149 background-color: hsl(215deg, 22%, 19%); 150 color: #fff; 151 &:hover { 152 background-color: hsl(215deg, 22%, 35%); 153 } 154 } 155} 156 157.help { 158 table { 159 margin-bottom: 15px; 160 td { 161 min-width: 250px; 162 } 163 td:first-child { 164 font-family: var(--monospace-font); 165 } 166 } 167 h2 { 168 font: inherit; 169 font-weight: bold; 170 } 171} 172 173.modal-pre { 174 white-space: pre-line; 175 font-size: 13px; 176} 177 178.modal-logs, 179.modal-bash { 180 white-space: pre-wrap; 181 border: 1px solid #999; 182 background: #eee; 183 font-size: 10px; 184 font-family: var(--monospace-font); 185 margin-top: 10px; 186 margin-bottom: 10px; 187 min-height: 50px; 188 max-height: 40vh; 189 overflow: auto; 190} 191 192.modal-bash { 193 margin: 0; 194 padding: 5px 0; 195 overflow: auto; 196 min-height: 0; 197} 198 199.modal-textarea { 200 display: block; 201 margin-top: 10px; 202 margin-bottom: 10px; 203 width: 100%; 204} 205 206.modal-small { 207 font-size: 0.75rem; 208} 209