appscms-tools-theme 2.2.3 → 2.2.6

Sign up to get free protection for your applications and to get access to all the features.
data/assets/css/frame.css CHANGED
@@ -1,431 +1,431 @@
1
- #img-svg {
2
- margin: auto;
3
- margin-top: 16px;
4
- height: 67px;
5
- width: 98px;
6
- }
7
-
8
- #file-loader {
9
- display: flex;
10
- align-items: center;
11
- flex-direction: column;
12
- }
13
-
14
- #file-loader img {
15
- height: 60px;
16
- }
17
-
18
- #file-loader p {
19
- text-align: center;
20
- color: #fff;
21
- font-size: 17px;
22
- }
23
-
24
- #loading-img {
25
- height: 27px;
26
- width: 27px;
27
- margin-right: 21px;
28
- }
29
-
30
- #dropbox svg,
31
- #filepicker svg,
32
- .boxes svg {
33
- height: 24px !important;
34
- width: 24px !important;
35
- }
36
-
37
- .file-picker-dropdown a,
38
- .file-picker-dropdown button {
39
- border: none;
40
- width: 100%;
41
- border-radius: 4px;
42
- text-align: left;
43
- background: #fff;
44
- font-weight: 400;
45
- font-size: 16px;
46
- line-height: 24px;
47
- padding: 15px 24px;
48
- list-style: none;
49
- height: 54px;
50
- }
51
-
52
- .file-picker-dropdown {
53
- width: 213px;
54
- position: absolute;
55
- background: #fff;
56
- top: 111%;
57
- right: 0;
58
- display: none;
59
- box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
60
- border-radius: 4px;
61
- }
62
-
63
- .file-pick-dropdown i {
64
- margin: 0;
65
- }
66
-
67
- .boxes {
68
- background: #fff;
69
- border-radius: 0;
70
- cursor: pointer;
71
- display: flex;
72
- align-items: center;
73
- padding: 15px 24px;
74
- height: 54px;
75
- border-top-left-radius: 4px;
76
- border-bottom-left-radius: 4px;
77
- justify-content: center;
78
- font-size: 15px;
79
- font-weight: 800;
80
- color: #000;
81
- }
82
-
83
- .file-pick-dropdown {
84
- color: #000;
85
- cursor: pointer;
86
- display: inline-flex;
87
- background: #fff;
88
- height: 54px;
89
- border-left: 1px solid rgba(95, 88, 88, 0.75);
90
- padding: 13px 20px;
91
- border-top-right-radius: 4px;
92
- border-bottom-right-radius: 4px;
93
- align-items: center;
94
- position: relative;
95
- }
96
-
97
- .custom-box {
98
- padding: 15px;
99
- }
100
-
101
- .inner-box {
102
- border: 1px dashed rgba(0, 0, 0, 0.15);
103
- background: rgba(0, 0, 0, 0.1);
104
- padding: 40px;
105
- min-height: 300px;
106
- width: 100%;
107
- display: flex;
108
- align-items: center;
109
- justify-content: center;
110
- }
111
- #dropfile {
112
- font-size: 16px;
113
- margin-top: 15px;
114
- text-align: center;
115
- color: #fff;
116
- }
117
- .saving-file-download-wrap {
118
- display: flex;
119
- flex-direction: column;
120
- align-items: center;
121
- }
122
- #download {
123
- padding: 10px 16px;
124
- background: #fff;
125
- }
126
-
127
- .trust-img {
128
- height: 80px;
129
- width: 80px;
130
- }
131
- .options-panel select,
132
- textarea,
133
- input {
134
- width: 100%;
135
- text-align: left;
136
- background: #fff;
137
- height: 34px;
138
- display: flex;
139
- border-radius: 4px;
140
- align-items: center;
141
- justify-content: space-between;
142
- box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
143
- color: #0f0c0c;
144
- border: 1px solid #ccc;
145
- }
146
- .options-panel div {
147
- width: 100%;
148
- }
149
- #action-button {
150
- background-color: #ff6537;
151
- margin: 0;
152
- width: 180px;
153
- padding: 10px 0;
154
- font-size: 13pt;
155
- position: relative;
156
- border-radius: 2px;
157
- border: 1px solid #ff6131;
158
- color: #fff;
159
- font-weight: 600;
160
- display: block;
161
- margin: auto;
162
- margin-top: 20px;
163
- }
164
- #workspace-area input[type='text'] {
165
- height: 40px;
166
- border: 1px solid gray;
167
- border-radius: 2px;
168
- }
169
- #canvas-area {
170
- width: 100%;
171
- margin-top: 30px;
172
- max-width: 100%;
173
- }
174
- #img-svg {
175
- margin: auto;
176
- margin-top: 16px;
177
- height: 67px;
178
- width: 98px;
179
- }
180
-
181
- #file-loader {
182
- display: flex;
183
- align-items: center;
184
- flex-direction: column;
185
- }
186
-
187
- #file-loader img {
188
- height: 60px;
189
- }
190
-
191
- #file-loader p {
192
- text-align: center;
193
- color: #fff;
194
- font-size: 17px;
195
- }
196
-
197
- #loading-img {
198
- height: 27px;
199
- width: 27px;
200
- margin-right: 21px;
201
- }
202
-
203
- #dropbox svg,
204
- #filepicker svg,
205
- .boxes svg {
206
- height: 24px !important;
207
- width: 24px !important;
208
- }
209
-
210
- .file-picker-dropdown a,
211
- .file-picker-dropdown button {
212
- border: none;
213
- width: 100%;
214
- border-radius: 4px;
215
- text-align: left;
216
- background: #fff;
217
- font-weight: 400;
218
- font-size: 16px;
219
- line-height: 24px;
220
- padding: 15px 24px;
221
- list-style: none;
222
- height: 54px;
223
- }
224
-
225
- .file-picker-dropdown {
226
- width: 213px;
227
- position: absolute;
228
- background: #fff;
229
- top: 111%;
230
- right: 0;
231
- display: none;
232
- box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
233
- border-radius: 4px;
234
- }
235
-
236
- .file-pick-dropdown i {
237
- margin: 0;
238
- }
239
-
240
- .boxes {
241
- background: #fff;
242
- border-radius: 0;
243
- cursor: pointer;
244
- display: flex;
245
- align-items: center;
246
- padding: 15px 24px;
247
- height: 54px;
248
- border-top-left-radius: 4px;
249
- border-bottom-left-radius: 4px;
250
- justify-content: center;
251
- font-size: 15px;
252
- font-weight: 800;
253
- color: #000;
254
- }
255
-
256
- .file-pick-dropdown {
257
- color: #000;
258
- cursor: pointer;
259
- display: inline-flex;
260
- background: #fff;
261
- height: 54px;
262
- border-left: 1px solid rgba(95, 88, 88, 0.75);
263
- padding: 13px 20px;
264
- border-top-right-radius: 4px;
265
- border-bottom-right-radius: 4px;
266
- align-items: center;
267
- position: relative;
268
- }
269
-
270
- .crop-img-box {
271
- background-color: #fff;
272
- width: 100%;
273
- border-radius: 0.75em;
274
- border: 1px solid #f2f2f2;
275
- box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
276
- font-size: 16px;
277
- height: auto;
278
- display: none;
279
- }
280
-
281
- .custom-box {
282
- padding: 15px;
283
- }
284
-
285
- .inner-box {
286
- border: 1px dashed rgba(0, 0, 0, 0.15);
287
- background: rgba(0, 0, 0, 0.1);
288
- padding: 40px;
289
- min-height: 300px;
290
- width: 100%;
291
- }
292
- #dropfile {
293
- font-size: 16px;
294
- margin-top: 15px;
295
- text-align: center;
296
- color: #fff;
297
- }
298
- .options-panel {
299
- box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
300
- border-radius: 4px;
301
- padding: 30px;
302
- width: 100%;
303
- }
304
- .options-panel .title {
305
- width: 100%;
306
- font-size: 28px;
307
- line-height: 36px;
308
- color: #000;
309
- font-weight: 700;
310
- text-align: left;
311
- text-transform: capitalize;
312
- }
313
- .options-panel .description {
314
- width: 100%;
315
- font-size: 17px;
316
- color: #666;
317
- font-weight: 400;
318
- text-align: left;
319
- }
320
- .options-title {
321
- width: 100%;
322
- font-size: 17px;
323
- color: #666;
324
- font-weight: 400;
325
- text-align: left;
326
- }
327
- #download-button {
328
- cursor: pointer;
329
- display: inline-block;
330
- width: 100%;
331
- padding: 14px 0;
332
- margin-bottom: 20px;
333
- text-align: center;
334
- border-radius: 50px;
335
- background: #0050e5;
336
- font-size: 18px;
337
- color: #fff;
338
- font-weight: 700;
339
- text-decoration: none;
340
- transition: all 0.3s;
341
- border: none;
342
- }
343
- #download-button svg {
344
- fill: #fff;
345
- margin-right: 4px;
346
- margin-bottom: 4px;
347
- height: 20px;
348
- }
349
- .download-wrapper {
350
- display: flex;
351
- align-items: center;
352
- border-bottom: 1px solid #ddd;
353
- margin: 12px 0px;
354
- padding: 12px 0px;
355
- }
356
- #canvas-panel canvas {
357
- max-width: 100%;
358
- }
359
- .options-panel select,
360
- textarea,
361
- input {
362
- width: 100%;
363
- text-align: left;
364
- background: #fff;
365
- height: 34px;
366
- display: flex;
367
- border-radius: 4px;
368
- justify-content: space-between;
369
- box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
370
- color: #0f0c0c;
371
- border: 1px solid #ccc;
372
- }
373
- .crop-image-modal-container {
374
- position: fixed;
375
- display: none;
376
- justify-content: center;
377
- background-color: rgba(0, 0, 0, 0.297);
378
- height: 100vh;
379
- width: 100%;
380
- top: 0;
381
- left: 0;
382
- z-index: 999999;
383
- padding: 0px 20px;
384
- }
385
- .crop-image-modal {
386
- height: fit-content;
387
- background-color: #fff;
388
- width: 100%;
389
- margin-top: 10px;
390
- border-radius: 5px;
391
- padding: 0;
392
- overflow-y: auto;
393
- }
394
- .crop-image-modal-header {
395
- border-top-right-radius: 5px;
396
- border-top-left-radius: 5px;
397
- display: flex;
398
- justify-content: space-between;
399
- background-color: #ff5554;
400
- display: flex;
401
- align-items: center;
402
- padding: 10px 20px;
403
- }
404
- .crop-image-modal-header div {
405
- height: 100%;
406
- display: flex;
407
- align-items: center;
408
- font-size: 20px;
409
- color: #fff;
410
- }
411
- .crop-image-modal-body {
412
- width: 450px;
413
- margin: 10px auto;
414
- }
415
- .crop-image-modal-header button {
416
- border: none;
417
- background-color: transparent;
418
- }
419
- .crop-image-modal-header button i {
420
- color: #fff;
421
- font-size: 20px;
422
- }
423
- .crop-image-modal-body {
424
- border-top-right-radius: 5px;
425
- border-top-left-radius: 5px;
426
- }
427
- #crop {
428
- border: none;
429
- padding: 7px 14px;
430
- color: #fff;
431
- }
1
+ #img-svg {
2
+ margin: auto;
3
+ margin-top: 16px;
4
+ height: 67px;
5
+ width: 98px;
6
+ }
7
+
8
+ #file-loader {
9
+ display: flex;
10
+ align-items: center;
11
+ flex-direction: column;
12
+ }
13
+
14
+ #file-loader img {
15
+ height: 60px;
16
+ }
17
+
18
+ #file-loader p {
19
+ text-align: center;
20
+ color: #fff;
21
+ font-size: 17px;
22
+ }
23
+
24
+ #loading-img {
25
+ height: 27px;
26
+ width: 27px;
27
+ margin-right: 21px;
28
+ }
29
+
30
+ #dropbox svg,
31
+ #filepicker svg,
32
+ .boxes svg {
33
+ height: 24px !important;
34
+ width: 24px !important;
35
+ }
36
+
37
+ .file-picker-dropdown a,
38
+ .file-picker-dropdown button {
39
+ border: none;
40
+ width: 100%;
41
+ border-radius: 4px;
42
+ text-align: left;
43
+ background: #fff;
44
+ font-weight: 400;
45
+ font-size: 16px;
46
+ line-height: 24px;
47
+ padding: 15px 24px;
48
+ list-style: none;
49
+ height: 54px;
50
+ }
51
+
52
+ .file-picker-dropdown {
53
+ width: 213px;
54
+ position: absolute;
55
+ background: #fff;
56
+ top: 111%;
57
+ right: 0;
58
+ display: none;
59
+ box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
60
+ border-radius: 4px;
61
+ }
62
+
63
+ .file-pick-dropdown i {
64
+ margin: 0;
65
+ }
66
+
67
+ .boxes {
68
+ background: #fff;
69
+ border-radius: 0;
70
+ cursor: pointer;
71
+ display: flex;
72
+ align-items: center;
73
+ padding: 15px 24px;
74
+ height: 54px;
75
+ border-top-left-radius: 4px;
76
+ border-bottom-left-radius: 4px;
77
+ justify-content: center;
78
+ font-size: 15px;
79
+ font-weight: 800;
80
+ color: #000;
81
+ }
82
+
83
+ .file-pick-dropdown {
84
+ color: #000;
85
+ cursor: pointer;
86
+ display: inline-flex;
87
+ background: #fff;
88
+ height: 54px;
89
+ border-left: 1px solid rgba(95, 88, 88, 0.75);
90
+ padding: 13px 20px;
91
+ border-top-right-radius: 4px;
92
+ border-bottom-right-radius: 4px;
93
+ align-items: center;
94
+ position: relative;
95
+ }
96
+
97
+ .custom-box {
98
+ padding: 15px;
99
+ }
100
+
101
+ .inner-box {
102
+ border: 1px dashed rgba(0, 0, 0, 0.15);
103
+ background: rgba(0, 0, 0, 0.1);
104
+ padding: 40px;
105
+ min-height: 300px;
106
+ width: 100%;
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ }
111
+ #dropfile {
112
+ font-size: 16px;
113
+ margin-top: 15px;
114
+ text-align: center;
115
+ color: #fff;
116
+ }
117
+ .saving-file-download-wrap {
118
+ display: flex;
119
+ flex-direction: column;
120
+ align-items: center;
121
+ }
122
+ #download {
123
+ padding: 10px 16px;
124
+ background: #fff;
125
+ }
126
+
127
+ .trust-img {
128
+ height: 80px;
129
+ width: 80px;
130
+ }
131
+ .options-panel select,
132
+ textarea,
133
+ input {
134
+ width: 100%;
135
+ text-align: left;
136
+ background: #fff;
137
+ height: 34px;
138
+ display: flex;
139
+ border-radius: 4px;
140
+ align-items: center;
141
+ justify-content: space-between;
142
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
143
+ color: #0f0c0c;
144
+ border: 1px solid #ccc;
145
+ }
146
+ .options-panel div {
147
+ width: 100%;
148
+ }
149
+ #action-button {
150
+ background-color: #ff6537;
151
+ margin: 0;
152
+ width: 180px;
153
+ padding: 10px 0;
154
+ font-size: 13pt;
155
+ position: relative;
156
+ border-radius: 2px;
157
+ border: 1px solid #ff6131;
158
+ color: #fff;
159
+ font-weight: 600;
160
+ display: block;
161
+ margin: auto;
162
+ margin-top: 20px;
163
+ }
164
+ #workspace-area input[type='text'] {
165
+ height: 40px;
166
+ border: 1px solid gray;
167
+ border-radius: 2px;
168
+ }
169
+ #canvas-area {
170
+ width: 100%;
171
+ margin-top: 30px;
172
+ max-width: 100%;
173
+ }
174
+ #img-svg {
175
+ margin: auto;
176
+ margin-top: 16px;
177
+ height: 67px;
178
+ width: 98px;
179
+ }
180
+
181
+ #file-loader {
182
+ display: flex;
183
+ align-items: center;
184
+ flex-direction: column;
185
+ }
186
+
187
+ #file-loader img {
188
+ height: 60px;
189
+ }
190
+
191
+ #file-loader p {
192
+ text-align: center;
193
+ color: #fff;
194
+ font-size: 17px;
195
+ }
196
+
197
+ #loading-img {
198
+ height: 27px;
199
+ width: 27px;
200
+ margin-right: 21px;
201
+ }
202
+
203
+ #dropbox svg,
204
+ #filepicker svg,
205
+ .boxes svg {
206
+ height: 24px !important;
207
+ width: 24px !important;
208
+ }
209
+
210
+ .file-picker-dropdown a,
211
+ .file-picker-dropdown button {
212
+ border: none;
213
+ width: 100%;
214
+ border-radius: 4px;
215
+ text-align: left;
216
+ background: #fff;
217
+ font-weight: 400;
218
+ font-size: 16px;
219
+ line-height: 24px;
220
+ padding: 15px 24px;
221
+ list-style: none;
222
+ height: 54px;
223
+ }
224
+
225
+ .file-picker-dropdown {
226
+ width: 213px;
227
+ position: absolute;
228
+ background: #fff;
229
+ top: 111%;
230
+ right: 0;
231
+ display: none;
232
+ box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
233
+ border-radius: 4px;
234
+ }
235
+
236
+ .file-pick-dropdown i {
237
+ margin: 0;
238
+ }
239
+
240
+ .boxes {
241
+ background: #fff;
242
+ border-radius: 0;
243
+ cursor: pointer;
244
+ display: flex;
245
+ align-items: center;
246
+ padding: 15px 24px;
247
+ height: 54px;
248
+ border-top-left-radius: 4px;
249
+ border-bottom-left-radius: 4px;
250
+ justify-content: center;
251
+ font-size: 15px;
252
+ font-weight: 800;
253
+ color: #000;
254
+ }
255
+
256
+ .file-pick-dropdown {
257
+ color: #000;
258
+ cursor: pointer;
259
+ display: inline-flex;
260
+ background: #fff;
261
+ height: 54px;
262
+ border-left: 1px solid rgba(95, 88, 88, 0.75);
263
+ padding: 13px 20px;
264
+ border-top-right-radius: 4px;
265
+ border-bottom-right-radius: 4px;
266
+ align-items: center;
267
+ position: relative;
268
+ }
269
+
270
+ .crop-img-box {
271
+ background-color: #fff;
272
+ width: 100%;
273
+ border-radius: 0.75em;
274
+ border: 1px solid #f2f2f2;
275
+ box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
276
+ font-size: 16px;
277
+ height: auto;
278
+ display: none;
279
+ }
280
+
281
+ .custom-box {
282
+ padding: 15px;
283
+ }
284
+
285
+ .inner-box {
286
+ border: 1px dashed rgba(0, 0, 0, 0.15);
287
+ background: rgba(0, 0, 0, 0.1);
288
+ padding: 40px;
289
+ min-height: 300px;
290
+ width: 100%;
291
+ }
292
+ #dropfile {
293
+ font-size: 16px;
294
+ margin-top: 15px;
295
+ text-align: center;
296
+ color: #fff;
297
+ }
298
+ .options-panel {
299
+ box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
300
+ border-radius: 4px;
301
+ padding: 30px;
302
+ width: 100%;
303
+ }
304
+ .options-panel .title {
305
+ width: 100%;
306
+ font-size: 28px;
307
+ line-height: 36px;
308
+ color: #000;
309
+ font-weight: 700;
310
+ text-align: left;
311
+ text-transform: capitalize;
312
+ }
313
+ .options-panel .description {
314
+ width: 100%;
315
+ font-size: 17px;
316
+ color: #666;
317
+ font-weight: 400;
318
+ text-align: left;
319
+ }
320
+ .options-title {
321
+ width: 100%;
322
+ font-size: 17px;
323
+ color: #666;
324
+ font-weight: 400;
325
+ text-align: left;
326
+ }
327
+ #download-button {
328
+ cursor: pointer;
329
+ display: inline-block;
330
+ width: 100%;
331
+ padding: 14px 0;
332
+ margin-bottom: 20px;
333
+ text-align: center;
334
+ border-radius: 50px;
335
+ background: #0050e5;
336
+ font-size: 18px;
337
+ color: #fff;
338
+ font-weight: 700;
339
+ text-decoration: none;
340
+ transition: all 0.3s;
341
+ border: none;
342
+ }
343
+ #download-button svg {
344
+ fill: #fff;
345
+ margin-right: 4px;
346
+ margin-bottom: 4px;
347
+ height: 20px;
348
+ }
349
+ .download-wrapper {
350
+ display: flex;
351
+ align-items: center;
352
+ border-bottom: 1px solid #ddd;
353
+ margin: 12px 0px;
354
+ padding: 12px 0px;
355
+ }
356
+ #canvas-panel canvas {
357
+ max-width: 100%;
358
+ }
359
+ .options-panel select,
360
+ textarea,
361
+ input {
362
+ width: 100%;
363
+ text-align: left;
364
+ background: #fff;
365
+ height: 34px;
366
+ display: flex;
367
+ border-radius: 4px;
368
+ justify-content: space-between;
369
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
370
+ color: #0f0c0c;
371
+ border: 1px solid #ccc;
372
+ }
373
+ .crop-image-modal-container {
374
+ position: fixed;
375
+ display: none;
376
+ justify-content: center;
377
+ background-color: rgba(0, 0, 0, 0.297);
378
+ height: 100vh;
379
+ width: 100%;
380
+ top: 0;
381
+ left: 0;
382
+ z-index: 999999;
383
+ padding: 0px 20px;
384
+ }
385
+ .crop-image-modal {
386
+ height: fit-content;
387
+ background-color: #fff;
388
+ width: 100%;
389
+ margin-top: 10px;
390
+ border-radius: 5px;
391
+ padding: 0;
392
+ overflow-y: auto;
393
+ }
394
+ .crop-image-modal-header {
395
+ border-top-right-radius: 5px;
396
+ border-top-left-radius: 5px;
397
+ display: flex;
398
+ justify-content: space-between;
399
+ background-color: #ff5554;
400
+ display: flex;
401
+ align-items: center;
402
+ padding: 10px 20px;
403
+ }
404
+ .crop-image-modal-header div {
405
+ height: 100%;
406
+ display: flex;
407
+ align-items: center;
408
+ font-size: 20px;
409
+ color: #fff;
410
+ }
411
+ .crop-image-modal-body {
412
+ width: 450px;
413
+ margin: 10px auto;
414
+ }
415
+ .crop-image-modal-header button {
416
+ border: none;
417
+ background-color: transparent;
418
+ }
419
+ .crop-image-modal-header button i {
420
+ color: #fff;
421
+ font-size: 20px;
422
+ }
423
+ .crop-image-modal-body {
424
+ border-top-right-radius: 5px;
425
+ border-top-left-radius: 5px;
426
+ }
427
+ #crop {
428
+ border: none;
429
+ padding: 7px 14px;
430
+ color: #fff;
431
+ }