blob: bef56f7a873e8555ad2f00ae0876f3d1ac5a8d02 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* Tab Modal Prompt boxes */
.tabModalBackground {
-moz-box-pack: center;
-moz-box-orient: vertical;
}
.tabModalBackground,
tabmodalprompt {
width: 100%;
height: 100%;
}
tabmodalprompt {
--tabmodalprompt-padding: 20px;
overflow: hidden;
text-shadow: none; /* remove lightweight theme text-shadow */
}
tabmodalprompt:not([hidden]) {
display: grid;
grid-template-rows: 1fr [dialog-start] auto [dialog-end] 2fr;
justify-items: center;
}
/*
Adjustments for chrome level tab-prompts to make them
overlap with the upper chrome UI and move them in
front of content prompts.
*/
tabmodalprompt.tab-prompt {
overflow: visible;
z-index: 1;
grid-template-rows: [dialog-start] auto [dialog-end] 1fr;
}
tabmodalprompt.tab-prompt .tabmodalprompt-mainContainer {
margin-top: -5px;
}
.tabmodalprompt-mainContainer {
min-width: 20em;
min-height: 12em;
max-width: calc(60% + calc(var(--tabmodalprompt-padding) * 2));
-moz-user-focus: normal;
grid-row: dialog;
display: flex;
flex-direction: column;
}
.tabmodalprompt-topContainer {
flex-grow: 1;
padding: var(--tabmodalprompt-padding);
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
align-content: center; /* center content vertically */
max-width: 100%;
min-height: 0;
max-height: 60vh;
box-sizing: border-box;
}
.tabmodalprompt-topContainer > div:not(.tabmodalprompt-infoContainer, [hidden]) {
display: contents;
}
.tabmodalprompt-infoContainer {
grid-column: span 2;
display: block;
margin-block: auto;
max-width: 100%;
height: 100%;
min-height: 0;
justify-self: center; /* center text, but only when it fits in one line */
}
/* When all elements in the first column are hidden, prevent the second column
from becoming the first one because it won't have the right fraction */
.tabmodalprompt-topContainer > div > *:nth-child(2) {
grid-column: 2;
}
.infoTitle {
margin-bottom: 1em !important;
font-weight: bold;
}
.infoBody {
margin: 0 !important;
-moz-user-focus: normal;
user-select: text;
cursor: text !important;
white-space: pre-wrap;
unicode-bidi: plaintext;
outline: none; /* remove focus outline */
overflow: auto;
max-width: 100%;
max-height: 100%;
}
tabmodalprompt label[value=""] {
display: none;
}
.tabmodalprompt-buttonContainer {
display: flex;
padding: 12px var(--tabmodalprompt-padding) 15px;
}
.tabmodalprompt-buttonSpacer {
flex-grow: 1;
}
/* Tab-Modal Payment Request widget */
.paymentDialogContainer:not([hidden]) {
/* Center the .paymentDialogContainerFrame horizontally with flexbox. */
display: flex;
flex-direction: column;
position: absolute;
/* TODO: figure out which element is preventing this from showing */
z-index: 1;
width: 100%;
}
.paymentDialogContainer > div {
align-self: center;
box-sizing: border-box;
height: 600px;
/* By setting `inset-inline` to `auto` with `position: absolute`, the
* horizontal position from the `align-self: center` is used.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/right#Values. */
inset-inline: auto;
/* Shrink the height for small browser window sizes so the dialog footer
remains visible.
Ideally this would be 100vh minus the #navigator-toolbox height. */
max-height: 75vh;
/* Leave a 16px border on each side when the normal dialog width can't fit in
* the browser window. This ensure that the dialog still looks like a dialog
* (with content showing beside) instead of a full-width overlay. */
max-width: calc(100vw - 16px - 16px);
position: absolute;
/* Vertically overlap the browser chrome. */
top: -3px;
width: 600px;
}
.paymentDialogContainerFrame {
box-sizing: border-box;
height: 100%;
width: 100%;
}
|
