UNPKG

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