UNPKG

3.37 kBCSSView Raw
1/*-----------------------------------------------------------------------------
2| Copyright (c) 2014-2017, Jupyter Development Team.
3|
4| Distributed under the terms of the Modified BSD License.
5|----------------------------------------------------------------------------*/
6
7.jp-Dialog {
8 position: absolute;
9 z-index: 10000;
10 display: flex;
11 flex-direction: column;
12 align-items: center;
13 justify-content: center;
14 top: 0;
15 left: 0;
16 margin: 0;
17 padding: 0;
18 width: 100%;
19 height: 100%;
20 background: var(--jp-dialog-background);
21}
22
23.jp-Dialog-content {
24 display: flex;
25 flex-direction: column;
26 margin-left: auto;
27 margin-right: auto;
28 background: var(--jp-layout-color1);
29 padding: 24px 24px 12px;
30 min-width: 300px;
31 min-height: 150px;
32 max-width: 1000px;
33 max-height: 500px;
34 box-sizing: border-box;
35 box-shadow: var(--jp-elevation-z20);
36 word-wrap: break-word;
37 border-radius: var(--jp-border-radius);
38
39 /* This is needed so that all font sizing of children done in ems is
40 * relative to this base size */
41 font-size: var(--jp-ui-font-size1);
42 color: var(--jp-ui-font-color1);
43 resize: both;
44}
45
46.jp-Dialog-content.jp-Dialog-content-small {
47 max-width: 500px;
48}
49
50.jp-Dialog-button {
51 overflow: visible;
52}
53
54button.jp-Dialog-button:focus {
55 outline: 1px solid var(--jp-brand-color1);
56 outline-offset: 4px;
57 -moz-outline-radius: 0;
58}
59
60button.jp-Dialog-button:focus::-moz-focus-inner {
61 border: 0;
62}
63
64button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus,
65button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus,
66button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
67 outline-offset: 4px;
68 -moz-outline-radius: 0;
69}
70
71button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus {
72 outline: 1px solid var(--jp-accept-color-normal, var(--jp-brand-color1));
73}
74
75button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus {
76 outline: 1px solid var(--jp-warn-color-normal, var(--jp-error-color1));
77}
78
79button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
80 outline: 1px solid var(--jp-reject-color-normal, var(--md-grey-600));
81}
82
83button.jp-Dialog-close-button {
84 padding: 0;
85 height: 100%;
86 min-width: unset;
87 min-height: unset;
88}
89
90.jp-Dialog-header {
91 display: flex;
92 justify-content: space-between;
93 flex: 0 0 auto;
94 padding-bottom: 12px;
95 font-size: var(--jp-ui-font-size3);
96 font-weight: 400;
97 color: var(--jp-ui-font-color1);
98}
99
100.jp-Dialog-body {
101 display: flex;
102 flex-direction: column;
103 flex: 1 1 auto;
104 font-size: var(--jp-ui-font-size1);
105 background: var(--jp-layout-color1);
106 color: var(--jp-ui-font-color1);
107 overflow: auto;
108}
109
110.jp-Dialog-footer {
111 display: flex;
112 flex-direction: row;
113 justify-content: flex-end;
114 align-items: center;
115 flex: 0 0 auto;
116 margin-left: -12px;
117 margin-right: -12px;
118 padding: 12px;
119}
120
121.jp-Dialog-checkbox {
122 padding-right: 5px;
123}
124
125.jp-Dialog-checkbox > input:focus-visible {
126 outline: 1px solid var(--jp-input-active-border-color);
127 outline-offset: 1px;
128}
129
130.jp-Dialog-spacer {
131 flex: 1 1 auto;
132}
133
134.jp-Dialog-title {
135 overflow: hidden;
136 white-space: nowrap;
137 text-overflow: ellipsis;
138}
139
140.jp-Dialog-body > .jp-select-wrapper {
141 width: 100%;
142}
143
144.jp-Dialog-body > button {
145 padding: 0 16px;
146}
147
148.jp-Dialog-body > label {
149 line-height: 1.4;
150 color: var(--jp-ui-font-color0);
151}
152
153.jp-Dialog-button.jp-mod-styled:not(:last-child) {
154 margin-right: 12px;
155}