|
20 | 20 | .vp-apiblock-board-body { |
21 | 21 | position: relative; |
22 | 22 | overflow: hidden auto; |
23 | | - height: 100%; |
| 23 | + height: calc(100% - 100px); |
| 24 | +} |
| 25 | + |
| 26 | +.vp-apiblock-tab-container { |
| 27 | + |
| 28 | +} |
| 29 | + |
| 30 | +.vp-apiblock-tab-header { |
| 31 | + height: 40px; |
| 32 | + line-height: 40px; |
| 33 | + background: white; |
| 34 | + /* padding: 0px 20px; */ |
| 35 | + |
| 36 | + display: grid; |
| 37 | + grid-template-columns: repeat(2, 50%); |
| 38 | +} |
| 39 | + |
| 40 | +.vp-apiblock-tab-button { |
| 41 | + display: inline-block; |
| 42 | + height: 40px; |
| 43 | + background: var(--light-gray-color); |
| 44 | + border: 0.25px solid #E4E4E4; |
| 45 | + text-align: center; |
| 46 | + font-weight: bold; |
| 47 | +} |
| 48 | +.vp-apiblock-tab-button.selected { |
| 49 | + color: var(--hightlight-color); |
| 50 | + background: white; |
| 51 | + border-bottom: 2px solid var(--hightlight-color); |
| 52 | +} |
| 53 | +.vp-apiblock-tab-button:hover { |
| 54 | + background: var(--light-gray-color); |
24 | 55 | } |
25 | 56 |
|
| 57 | + |
| 58 | +.vp-apiblock-tab-box { |
| 59 | + height: calc(100% - 90px); |
| 60 | +} |
| 61 | + |
| 62 | + |
26 | 63 | .vp-apiblock-left { |
27 | 64 | /* padding: 1.5rem; */ |
28 | 65 | /* padding: 5px; */ |
29 | 66 | background-color: white; |
30 | 67 |
|
31 | 68 | /* 수정 */ |
32 | | - width: 200px; |
| 69 | + /* width: 200px; */ |
| 70 | + width: 100%; |
33 | 71 | height: 100%; |
34 | 72 | overflow: hidden auto; |
35 | 73 |
|
|
38 | 76 |
|
39 | 77 | .vp-apiblock-right { |
40 | 78 | position: relative; |
41 | | - margin-left: 5px; |
42 | | - margin-right: 5px; |
| 79 | + /* margin-left: 5px; |
| 80 | + margin-right: 5px; */ |
43 | 81 |
|
44 | 82 | /* min-width: 282px; */ |
45 | 83 | min-width: 265px; |
46 | 84 |
|
| 85 | + height: 100%; |
| 86 | + |
47 | 87 | color: #000; |
48 | 88 | background-size: 5px 5px; |
49 | 89 | /* background-image: repeating-linear-gradient( to right, #F5F5F5 0, #F5F5F5 0.25px, transparent 1px, transparent 50px ), repeating-linear-gradient( to bottom, #F5F5F5 0, #F5F5F5 0.25px, transparent 1px, transparent 50px ); */ |
|
63 | 103 | .vp-menu-search-box { |
64 | 104 | width: 100%; |
65 | 105 | height: 30px; |
| 106 | + |
| 107 | + border: 0.25px solid #E4E4E4; |
| 108 | + box-sizing: border-box; |
| 109 | + box-shadow: 2px 2px 1px rgb(0 0 0 / 10%); |
| 110 | + border-radius: 2px; |
66 | 111 | } |
67 | 112 |
|
68 | 113 | .vp-menu-search-icon { |
|
108 | 153 | } |
109 | 154 | .vp-apiblock-menu-apps-grid { |
110 | 155 | display: grid; |
111 | | - grid-template-columns: repeat(3, 58px); |
112 | | - grid-template-rows: repeat(3, 58px); |
| 156 | + grid-template-columns: repeat(auto-fill, 58px); |
| 157 | + grid-template-rows: repeat(auto-fill, 58px); |
113 | 158 | grid-column-gap: 5px; |
114 | 159 | grid-row-gap: 5px; |
115 | 160 |
|
|
119 | 164 | width: 58; |
120 | 165 | height: 58px; |
121 | 166 | text-align: center; |
122 | | - border: 0.25px solid #C4C4C4; |
| 167 | + /* border: 0.25px solid #C4C4C4; */ |
123 | 168 | box-sizing: border-box; |
124 | 169 | box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1); |
125 | 170 | border-radius: 2px; |
|
185 | 230 | left: unset !important; |
186 | 231 | z-index: 12; |
187 | 232 |
|
| 233 | + margin-left: 5px; |
| 234 | + |
188 | 235 | border: 0.25px solid var(--border-gray-color); |
189 | 236 | } |
190 | 237 |
|
|
259 | 306 | .vp-apiblock-option-buttons-container { |
260 | 307 | position: sticky; |
261 | 308 | bottom: 0; |
262 | | - height: 52px; |
| 309 | + height: 50px; |
263 | 310 | width: 100%; |
264 | 311 | background: #FFFFFF; |
265 | 312 | border-top: 0.25px solid #E4E4E4; |
|
282 | 329 | right: 105px; |
283 | 330 | } |
284 | 331 |
|
285 | | -.vp-apiblock-option-apply-button { |
| 332 | +/* .vp-apiblock-option-apply-button { |
286 | 333 | top: 11px; |
287 | 334 | right: 15px; |
| 335 | +} */ |
| 336 | +.vp-apiblock-option-addrun-button { |
| 337 | + top: 11px; |
| 338 | + right: 15px; |
| 339 | + width: fit-content; |
| 340 | + height: 30px; |
| 341 | + background: #F38504; |
| 342 | + border-radius: 2px; |
| 343 | +} |
| 344 | +.vp-apiblock-option-run-button { |
| 345 | + display: inline-block; |
| 346 | + width: 60px; |
| 347 | + border-radius: 2px 0px 0px 2px; |
| 348 | + border-right: 0.25px solid white !important; |
| 349 | +} |
| 350 | +.vp-apiblock-option-detail-button { |
| 351 | + display: inline-block; |
| 352 | + width: 20px; |
| 353 | + border-radius: 0px 2px 2px 0px; |
| 354 | +} |
| 355 | +.vp-apiblock-option-detail-box { |
| 356 | + background: white; |
| 357 | + border: 0.25px solid var(--border-gray-color); |
| 358 | + position: absolute; |
| 359 | + bottom: 35px; |
| 360 | + right: 1px; |
| 361 | + width: 84px; |
| 362 | + height: 30px; |
| 363 | + text-align: center; |
| 364 | + line-height: 30px; |
| 365 | +} |
| 366 | +.vp-apiblock-option-detail-item { |
| 367 | + color: var(--font-primary); |
| 368 | +} |
| 369 | +.vp-apiblock-option-detail-item:hover { |
| 370 | + color: var(--font-hightlight); |
| 371 | + background: var(--light-gray-color); |
288 | 372 | } |
289 | 373 |
|
290 | 374 | .vp-block-container { |
|
351 | 435 | } |
352 | 436 |
|
353 | 437 | .vp-block-class-def { |
354 | | - background-color: rgba(47, 133, 90, 0.2); |
| 438 | + /* background-color: rgba(47, 133, 90, 0.2); */ |
355 | 439 | } |
356 | 440 |
|
357 | 441 | .vp-block-control { |
358 | | - background-color: rgba(246, 173, 85, 0.2); |
| 442 | + /* background-color: rgba(246, 173, 85, 0.2); */ |
359 | 443 | } |
360 | 444 |
|
361 | 445 | .vp-block-text div { |
362 | 446 | white-space: normal; |
363 | 447 | } |
364 | 448 |
|
365 | 449 | .vp-block-api { |
366 | | - background-color: rgba(255, 165, 112, 0.2); |
| 450 | + /* background-color: rgba(255, 165, 112, 0.2); */ |
367 | 451 | } |
368 | 452 | .vp-apiblock-tab-navigation-node-block-body-btn.api.vp-block-api { |
369 | | - width: 100% !important; |
370 | | - max-width: 130px !important; |
| 453 | + /* width: 100% !important; |
| 454 | + max-width: 130px !important; */ |
371 | 455 | overflow: hidden; |
372 | 456 | text-overflow: ellipsis; |
373 | 457 | } |
|
417 | 501 | background-color:rgb(253, 239, 221); |
418 | 502 | } |
419 | 503 | .vp-block-blockcodelinetype-code { |
420 | | - background-color: rgb(229, 229, 229); |
| 504 | + /* background-color: rgb(229, 229, 229); */ |
421 | 505 | } |
422 | 506 |
|
423 | 507 | .vp-block-name { |
|
441 | 525 | .vp-apiblock-category { |
442 | 526 | cursor: pointer; |
443 | 527 | background: var(--light-gray-color); |
| 528 | + border-radius: 2px; |
444 | 529 | /* padding: 7px 0px 7px 0px !important; */ |
445 | 530 | padding: 7px 7px !important; /* 수정 */ |
446 | 531 | margin-top: 5px; |
|
461 | 546 | font-size: 10px; |
462 | 547 | } |
463 | 548 |
|
| 549 | +.vp-apiblock-group-list:empty::after { |
| 550 | + content: 'Work In Progress...'; |
| 551 | + color: var(--gray-color); |
| 552 | +} |
| 553 | + |
464 | 554 |
|
465 | 555 | .vp-apiblock-tab-title { |
466 | 556 | font-size: 16px; |
|
484 | 574 | padding-left: 15px; |
485 | 575 |
|
486 | 576 | overflow: auto; |
487 | | - height: calc(100% - 102px); |
| 577 | + height: calc(100% - 100px); |
488 | 578 | } |
489 | 579 |
|
490 | 580 | .vp-apiblock-tab-navigation-node-block-title { |
|
501 | 591 | .vp-apiblock-tab-navigation-node-block-body-btn { |
502 | 592 |
|
503 | 593 | position: relative; |
504 | | - text-align: center; |
| 594 | + /* text-align: center; */ |
| 595 | + |
| 596 | + /* width: 130px; */ |
| 597 | + width: 95%; |
505 | 598 |
|
506 | | - width: 130px; |
507 | 599 |
|
508 | 600 | padding: 0.25rem 0.5rem; |
509 | 601 | z-index: 1000; |
|
516 | 608 |
|
517 | 609 | display: flex; |
518 | 610 | flex-direction: row; |
519 | | - justify-content: space-around; |
| 611 | + /* justify-content: space-around; */ |
520 | 612 |
|
521 | 613 | color: #777; |
522 | 614 | } |
|
547 | 639 | transition: mask-position 0.3s, -webkit-mask-position 0.3s; */ |
548 | 640 |
|
549 | 641 | overflow-y: auto; |
550 | | - -webkit-mask-position: left top; |
| 642 | + --webkit-mask-position: left top; |
551 | 643 | } |
552 | 644 |
|
553 | 645 | /* .vp-apiblock-scrollbar:hover { |
|
559 | 651 | width: 5px; |
560 | 652 | height: 5px; |
561 | 653 | } |
562 | | -.vp-apiblock-scrollbar::-webkit-scrollbar-track { |
| 654 | +/* .vp-apiblock-scrollbar::-webkit-scrollbar-track { |
563 | 655 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); |
564 | | -} |
| 656 | +} */ |
565 | 657 | .vp-apiblock-scrollbar::-webkit-scrollbar-thumb { |
566 | 658 | border: 0.3px solid #C4C4C4; |
567 | 659 | background: #C4C4C4; |
|
1290 | 1382 |
|
1291 | 1383 | .vp-apiblock-board-button-container { |
1292 | 1384 | width: 100%; |
1293 | | - height: 52px; |
1294 | | - position: absolute; |
| 1385 | + height: 50px; |
| 1386 | + /* position: absolute; */ |
1295 | 1387 | bottom: 0; |
1296 | 1388 | background: #FFFFFF; |
1297 | 1389 | border-top: 0.25px solid #E4E4E4; |
|
0 commit comments