• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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    margin-bottom: 2rem;
108    line-height: 1.5;
109    color: rgba(0, 0, 0, 0.8);
110
111    .small-font {
112      font-size: 0.9rem;
113    }
114  }
115
116  footer {
117    display: flex;
118    justify-content: space-around;
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: 4px;
131    cursor: pointer;
132    text-transform: none;
133    overflow: visible;
134    margin: 5px;
135    transform: translateZ(0);
136    transition: border-color 0.25s var(--anim-easing),
137      background-color 0.25s var(--anim-easing);
138
139    &:focus {
140      border-color: #03a9f4;
141    }
142    &:hover {
143      background-color: #ececec;
144    }
145  }
146
147  .modal-btn-primary {
148    background-color: hsl(215deg, 22%, 19%);
149    color: #fff;
150    &:hover {
151      background-color: hsl(215deg, 22%, 35%);
152    }
153  }
154}
155
156.help {
157  table {
158    margin-bottom: 15px;
159    td {
160      min-width: 250px;
161    }
162    td:first-child {
163      font-family: var(--monospace-font);
164    }
165  }
166  h2 {
167    font: inherit;
168    font-weight: bold;
169  }
170}
171
172.modal-pre {
173  white-space: pre-line;
174  font-size: 13px;
175}
176
177.modal-logs,
178.modal-bash {
179  white-space: pre-wrap;
180  border: 1px solid #999;
181  background: #eee;
182  font-size: 10px;
183  font-family: var(--monospace-font);
184  margin-top: 10px;
185  margin-bottom: 10px;
186  min-height: 50px;
187  max-height: 40vh;
188  overflow: auto;
189}
190
191.modal-bash {
192  margin: 0;
193  padding: 5px 0;
194  overflow: auto;
195  min-height: 0;
196}
197
198.modal-textarea {
199  display: block;
200  margin-top: 10px;
201  margin-bottom: 10px;
202  width: 100%;
203}
204
205.modal-small {
206  font-size: 0.75rem;
207}
208