1 |
|
2 |
|
3 |
|
4 |
|
5 | @black: #10161a;
|
6 |
|
7 | @dark-gray1: #182026;
|
8 | @dark-gray2: #202b33;
|
9 | @dark-gray3: #293742;
|
10 | @dark-gray4: #30404d;
|
11 | @dark-gray5: #394b59;
|
12 |
|
13 | @gray1: #5c7080;
|
14 | @gray2: #738694;
|
15 | @gray3: #8a9ba8;
|
16 | @gray4: #a7b6c2;
|
17 | @gray5: #bfccd6;
|
18 |
|
19 | @light-gray1: #ced9e0;
|
20 | @light-gray2: #d8e1e8;
|
21 | @light-gray3: #e1e8ed;
|
22 | @light-gray4: #ebf1f5;
|
23 | @light-gray5: #f5f8fa;
|
24 |
|
25 | @white: #ffffff;
|
26 |
|
27 | @blue1: #0e5a8a;
|
28 | @blue2: #106ba3;
|
29 | @blue3: #137cbd;
|
30 | @blue4: #2b95d6;
|
31 | @blue5: #48aff0;
|
32 |
|
33 | @green1: #0a6640;
|
34 | @green2: #0d8050;
|
35 | @green3: #0f9960;
|
36 | @green4: #15b371;
|
37 | @green5: #3dcc91;
|
38 |
|
39 | @orange1: #a66321;
|
40 | @orange2: #bf7326;
|
41 | @orange3: #d9822b;
|
42 | @orange4: #f29d49;
|
43 | @orange5: #ffb366;
|
44 |
|
45 | @red1: #a82a2a;
|
46 | @red2: #c23030;
|
47 | @red3: #db3737;
|
48 | @red4: #f55656;
|
49 | @red5: #ff7373;
|
50 |
|
51 | @vermilion1: #9e2b0e;
|
52 | @vermilion2: #b83211;
|
53 | @vermilion3: #d13913;
|
54 | @vermilion4: #eb532d;
|
55 | @vermilion5: #ff6e4a;
|
56 |
|
57 | @rose1: #a82255;
|
58 | @rose2: #c22762;
|
59 | @rose3: #db2c6f;
|
60 | @rose4: #f5498b;
|
61 | @rose5: #ff66a1;
|
62 |
|
63 | @violet1: #5c255c;
|
64 | @violet2: #752f75;
|
65 | @violet3: #8f398f;
|
66 | @violet4: #a854a8;
|
67 | @violet5: #c274c2;
|
68 |
|
69 | @indigo1: #5642a6;
|
70 | @indigo2: #634dbf;
|
71 | @indigo3: #7157d9;
|
72 | @indigo4: #9179f2;
|
73 | @indigo5: #ad99ff;
|
74 |
|
75 | @cobalt1: #1f4b99;
|
76 | @cobalt2: #2458b3;
|
77 | @cobalt3: #2965cc;
|
78 | @cobalt4: #4580e6;
|
79 | @cobalt5: #669eff;
|
80 |
|
81 | @turquoise1: #008075;
|
82 | @turquoise2: #00998c;
|
83 | @turquoise3: #00b3a4;
|
84 | @turquoise4: #14ccbd;
|
85 | @turquoise5: #2ee6d6;
|
86 |
|
87 | @forest1: #1d7324;
|
88 | @forest2: #238c2c;
|
89 | @forest3: #29a634;
|
90 | @forest4: #43bf4d;
|
91 | @forest5: #62d96b;
|
92 |
|
93 | @lime1: #728c23;
|
94 | @lime2: #87a629;
|
95 | @lime3: #9bbf30;
|
96 | @lime4: #b6d94c;
|
97 | @lime5: #d1f26d;
|
98 |
|
99 | @gold1: #a67908;
|
100 | @gold2: #bf8c0a;
|
101 | @gold3: #d99e0b;
|
102 | @gold4: #f2b824;
|
103 | @gold5: #ffc940;
|
104 |
|
105 | @sepia1: #63411e;
|
106 | @sepia2: #7d5125;
|
107 | @sepia3: #96622d;
|
108 | @sepia4: #b07b46;
|
109 | @sepia5: #c99765;
|
110 |
|
111 | @pt-intent-primary: @blue3;
|
112 | @pt-intent-success: @green3;
|
113 | @pt-intent-warning: @orange3;
|
114 | @pt-intent-danger: @red3;
|
115 |
|
116 | @pt-app-background-color: @light-gray5;
|
117 | @pt-dark-app-background-color: @dark-gray3;
|
118 |
|
119 | @pt-outline-color: fade(@blue3, 60%);
|
120 |
|
121 | @pt-text-color: @dark-gray1;
|
122 | @pt-text-color-muted: @gray1;
|
123 | @pt-text-color-disabled: fade(@pt-text-color-muted, 60%);
|
124 | @pt-heading-color: @pt-text-color;
|
125 | @pt-link-color: @blue2;
|
126 | @pt-dark-text-color: @light-gray5;
|
127 | @pt-dark-text-color-muted: @gray4;
|
128 | @pt-dark-text-color-disabled: fade(@pt-dark-text-color-muted, 60%);
|
129 | @pt-dark-heading-color: @pt-dark-text-color;
|
130 | @pt-dark-link-color: @blue5;
|
131 | @pt-text-selection-color: rgba(125, 188, 255, 0.6);
|
132 |
|
133 | @pt-icon-color: @pt-text-color-muted;
|
134 | @pt-icon-color-hover: @pt-text-color;
|
135 | @pt-icon-color-disabled: @pt-text-color-disabled;
|
136 | @pt-icon-color-selected: @pt-intent-primary;
|
137 | @pt-dark-icon-color: @pt-dark-text-color-muted;
|
138 | @pt-dark-icon-color-hover: @pt-dark-text-color;
|
139 | @pt-dark-icon-color-disabled: @pt-dark-text-color-disabled;
|
140 | @pt-dark-icon-color-selected: @pt-intent-primary;
|
141 |
|
142 | @pt-divider-black: fade(@black, 15%);
|
143 | @pt-dark-divider-black: fade(@black, 40%);
|
144 | @pt-dark-divider-white: fade(@white, 15%);
|
145 |
|
146 | @pt-code-text-color: @pt-text-color-muted;
|
147 | @pt-dark-code-text-color: @pt-dark-text-color-muted;
|
148 | @pt-code-background-color: fade(@white, 70%);
|
149 | @pt-dark-code-background-color: fade(@black, 30%);
|
150 |
|
151 | @cerulean1: @cobalt1;
|
152 | @cerulean2: @cobalt2;
|
153 | @cerulean3: @cobalt3;
|
154 | @cerulean4: @cobalt4;
|
155 | @cerulean5: @cobalt5;
|
156 | @ns: bp3;
|
157 | @bp-ns: @ns;
|
158 |
|
159 | @pt-grid-size: 10px;
|
160 |
|
161 | @pt-font-family: -apple-system,
|
162 | "BlinkMacSystemFont",
|
163 | "Segoe UI",
|
164 | "Roboto",
|
165 | "Oxygen",
|
166 | "Ubuntu",
|
167 | "Cantarell",
|
168 | "Open Sans",
|
169 | "Helvetica Neue",
|
170 | "Icons16", sans-serif;
|
171 |
|
172 | @pt-font-family-monospace: monospace;
|
173 |
|
174 | @pt-font-size: @pt-grid-size * 1.4;
|
175 | @pt-font-size-large: @pt-grid-size * 1.6;
|
176 | @pt-font-size-small: @pt-grid-size * 1.2;
|
177 |
|
178 | @pt-line-height: (@pt-grid-size * 1.8) / @pt-font-size + 0.0001;
|
179 |
|
180 | @icons16-family: "Icons16";
|
181 | @icons20-family: "Icons20";
|
182 |
|
183 | @pt-icon-size-standard: 16px;
|
184 | @pt-icon-size-large: 20px;
|
185 |
|
186 | @pt-border-radius: floor(@pt-grid-size / 3);
|
187 |
|
188 | @pt-button-height: @pt-grid-size * 3;
|
189 | @pt-button-height-small: @pt-grid-size * 2.4;
|
190 | @pt-button-height-smaller: @pt-grid-size * 2;
|
191 | @pt-button-height-large: @pt-grid-size * 4;
|
192 |
|
193 | @pt-input-height: @pt-grid-size * 3;
|
194 | @pt-input-height-large: @pt-grid-size * 4;
|
195 | @pt-input-height-small: @pt-grid-size * 2.4;
|
196 |
|
197 | @pt-navbar-height: @pt-grid-size * 5;
|
198 |
|
199 | @pt-z-index-base: 0;
|
200 | @pt-z-index-content: @pt-z-index-base + 10;
|
201 | @pt-z-index-overlay: @pt-z-index-content + 10;
|
202 | @pt-z-index-dialog-header: @pt-z-index-overlay + 10;
|
203 |
|
204 | @pt-border-shadow-opacity: 0.1;
|
205 | @pt-drop-shadow-opacity: 0.2;
|
206 | @pt-dark-border-shadow-opacity: @pt-border-shadow-opacity * 2;
|
207 | @pt-dark-drop-shadow-opacity: @pt-drop-shadow-opacity * 2;
|
208 |
|
209 | @pt-elevation-shadow-0: 0 0 0 1px @pt-divider-black,
|
210 | 0 0 0 fade(@black, 0%),
|
211 | 0 0 0 fade(@black, 0%);
|
212 | @pt-elevation-shadow-1: 0 0 0 1px fade(@black, @pt-border-shadow-opacity * 100%),
|
213 | 0 0 0 fade(@black, 0%),
|
214 | 0 1px 1px fade(@black, @pt-drop-shadow-opacity * 100%);
|
215 | @pt-elevation-shadow-2: 0 0 0 1px fade(@black, @pt-border-shadow-opacity * 100%),
|
216 | 0 1px 1px fade(@black, @pt-drop-shadow-opacity * 100%),
|
217 | 0 2px 6px fade(@black, @pt-drop-shadow-opacity * 100%);
|
218 | @pt-elevation-shadow-3: 0 0 0 1px fade(@black, @pt-border-shadow-opacity * 100%),
|
219 | 0 2px 4px fade(@black, @pt-drop-shadow-opacity * 100%),
|
220 | 0 8px 24px fade(@black, @pt-drop-shadow-opacity * 100%);
|
221 | @pt-elevation-shadow-4: 0 0 0 1px fade(@black, @pt-border-shadow-opacity * 100%),
|
222 | 0 4px 8px fade(@black, @pt-drop-shadow-opacity * 100%),
|
223 | 0 18px 46px 6px fade(@black, @pt-drop-shadow-opacity * 100%);
|
224 |
|
225 | @pt-dark-elevation-shadow-0: 0 0 0 1px @pt-dark-divider-black,
|
226 | 0 0 0 fade(@black, 0%),
|
227 | 0 0 0 fade(@black, 0%);
|
228 | @pt-dark-elevation-shadow-1: 0 0 0 1px fade(@black, @pt-dark-border-shadow-opacity * 100%),
|
229 | 0 0 0 fade(@black, 0%),
|
230 | 0 1px 1px fade(@black, @pt-dark-drop-shadow-opacity * 100%);
|
231 | @pt-dark-elevation-shadow-2: 0 0 0 1px fade(@black, @pt-dark-border-shadow-opacity * 100%),
|
232 | 0 1px 1px fade(@black, @pt-dark-drop-shadow-opacity * 100%),
|
233 | 0 2px 6px fade(@black, @pt-dark-drop-shadow-opacity * 100%);
|
234 | @pt-dark-elevation-shadow-3: 0 0 0 1px fade(@black, @pt-dark-border-shadow-opacity * 100%),
|
235 | 0 2px 4px fade(@black, @pt-dark-drop-shadow-opacity * 100%),
|
236 | 0 8px 24px fade(@black, @pt-dark-drop-shadow-opacity * 100%);
|
237 | @pt-dark-elevation-shadow-4: 0 0 0 1px fade(@black, @pt-dark-border-shadow-opacity * 100%),
|
238 | 0 4px 8px fade(@black, @pt-dark-drop-shadow-opacity * 100%),
|
239 | 0 18px 46px 6px fade(@black, @pt-dark-drop-shadow-opacity * 100%);
|
240 |
|
241 | @pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9);
|
242 | @pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11);
|
243 | @pt-transition-duration: 100ms;
|
244 |
|
245 | @pt-input-box-shadow: inset 0 0 0 1px fade(@black, 15%),
|
246 | inset 0 1px 1px fade(@black, @pt-drop-shadow-opacity * 100%);
|
247 |
|
248 | @pt-dialog-box-shadow: @pt-elevation-shadow-4;
|
249 | @pt-popover-box-shadow: @pt-elevation-shadow-3;
|
250 | @pt-tooltip-box-shadow: @pt-popover-box-shadow;
|
251 |
|
252 | @pt-dark-input-box-shadow: inset 0 0 0 1px fade(@black, 30%),
|
253 | inset 0 1px 1px fade(@black, @pt-dark-drop-shadow-opacity * 100%);
|
254 |
|
255 | @pt-dark-dialog-box-shadow: @pt-dark-elevation-shadow-4;
|
256 | @pt-dark-popover-box-shadow: @pt-dark-elevation-shadow-3;
|
257 | @pt-dark-tooltip-box-shadow: @pt-dark-popover-box-shadow;
|