pinokiod 7.3.10 → 7.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/kernel/bin/brew.js +12 -2
  2. package/kernel/bin/caddy.js +24 -20
  3. package/kernel/bin/huggingface.js +2 -2
  4. package/kernel/bin/setup.js +2 -3
  5. package/kernel/bin/uv.js +13 -6
  6. package/kernel/connect/index.js +5 -1
  7. package/kernel/connect/providers/huggingface/index.js +213 -75
  8. package/kernel/environment.js +16 -1
  9. package/kernel/router/localhost_home_router.js +7 -0
  10. package/kernel/shell.js +1 -5
  11. package/kernel/util.js +1 -0
  12. package/package.json +1 -1
  13. package/server/index.js +75 -33
  14. package/server/public/common.js +45 -71
  15. package/server/public/install.js +20 -2
  16. package/server/public/layout.js +1 -1
  17. package/server/public/style.css +1432 -511
  18. package/server/public/tab-link-popover.css +162 -18
  19. package/server/public/tab-link-popover.js +230 -21
  20. package/server/public/task-launcher.css +121 -84
  21. package/server/public/terminal-settings.js +121 -45
  22. package/server/public/universal-launcher.css +42 -33
  23. package/server/public/urldropdown.css +284 -0
  24. package/server/views/app.ejs +1608 -321
  25. package/server/views/autolaunch.ejs +4 -5
  26. package/server/views/checkpoints.ejs +223 -50
  27. package/server/views/connect/huggingface.ejs +406 -325
  28. package/server/views/connect.ejs +0 -1
  29. package/server/views/github.ejs +277 -324
  30. package/server/views/index.ejs +53 -1
  31. package/server/views/install.ejs +119 -19
  32. package/server/views/logs.ejs +10 -9
  33. package/server/views/net.ejs +341 -64
  34. package/server/views/network.ejs +85 -63
  35. package/server/views/partials/main_sidebar.ejs +237 -12
  36. package/server/views/plugins.ejs +141 -3
  37. package/server/views/settings.ejs +103 -7
  38. package/server/views/setup.ejs +0 -5
  39. package/server/views/skills.ejs +0 -1
  40. package/server/views/task_list.ejs +0 -1
  41. package/server/views/terminal.ejs +142 -1
  42. package/server/views/terminals.ejs +346 -6
  43. package/server/views/tools.ejs +828 -1691
  44. package/test/caddy-install.test.js +53 -0
  45. package/test/connect-setup.test.js +16 -0
  46. package/test/github-connection.test.js +1 -1
  47. package/test/huggingface-bin.test.js +4 -4
  48. package/test/huggingface-connect.test.js +73 -0
  49. package/test/main-sidebar.test.js +31 -0
  50. package/test/shell-run-template.test.js +5 -1
  51. package/test/uv-bin.test.js +29 -0
@@ -1514,21 +1514,333 @@ body.main-sidebar-page aside.main-sidebar .tab.selected .main-sidebar-action-ico
1514
1514
  -webkit-mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
1515
1515
  mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
1516
1516
  }
1517
- .main-sidebar-peer {
1518
- margin-top: 8px;
1519
- padding-top: 8px;
1520
- border-top: 0;
1517
+ .main-sidebar-peer-dialog[hidden],
1518
+ .main-sidebar-peer-dialog-panel[hidden] {
1519
+ display: none !important;
1521
1520
  }
1522
- .main-sidebar .qr {
1523
- padding: 10px 0 0;
1521
+ .main-sidebar-peer-dialog {
1522
+ position: fixed;
1523
+ inset: 0;
1524
+ z-index: 10000;
1525
+ display: grid;
1526
+ place-items: center;
1527
+ box-sizing: border-box;
1528
+ padding: 16px;
1529
+ }
1530
+ .main-sidebar-peer-dialog-backdrop {
1531
+ position: absolute;
1532
+ inset: 0;
1533
+ width: 100%;
1534
+ height: 100%;
1535
+ appearance: none;
1536
+ border: 0;
1537
+ border-radius: 0;
1538
+ background: rgba(15, 23, 42, 0.28);
1539
+ cursor: default;
1540
+ }
1541
+ body.dark .main-sidebar-peer-dialog-backdrop {
1542
+ background: rgba(0, 0, 0, 0.44);
1543
+ }
1544
+ .main-sidebar-peer-dialog-surface {
1545
+ position: relative;
1546
+ width: min(300px, calc(100vw - 32px));
1547
+ max-height: calc(100vh - 32px);
1548
+ box-sizing: border-box;
1549
+ overflow: auto;
1550
+ padding: 10px;
1551
+ border: 1px solid var(--pinokio-sidebar-tabbar-border);
1552
+ border-radius: 8px;
1553
+ background: var(--pinokio-sidebar-tabbar-bg);
1554
+ color: var(--pinokio-sidebar-tab-active-color);
1555
+ box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
1556
+ }
1557
+ body.dark .main-sidebar-peer-dialog-surface {
1558
+ box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
1559
+ }
1560
+ .main-sidebar-peer-dialog-header {
1561
+ display: grid;
1562
+ grid-template-columns: 30px minmax(0, 1fr) 28px;
1563
+ align-items: center;
1564
+ gap: 8px;
1565
+ }
1566
+ .main-sidebar-peer-dialog-icon,
1567
+ .main-sidebar-peer-dialog-close,
1568
+ .main-sidebar-peer-copy {
1569
+ width: 28px;
1570
+ height: 28px;
1571
+ min-width: 28px;
1572
+ display: inline-flex;
1573
+ align-items: center;
1574
+ justify-content: center;
1575
+ box-sizing: border-box;
1576
+ border-radius: 6px;
1577
+ }
1578
+ .main-sidebar-peer-dialog-icon {
1579
+ background: var(--pinokio-sidebar-tab-active-bg);
1580
+ color: var(--pinokio-sidebar-icon-active);
1581
+ }
1582
+ .main-sidebar-peer-dialog-heading {
1583
+ min-width: 0;
1584
+ }
1585
+ .main-sidebar-peer-dialog-title {
1586
+ color: var(--pinokio-sidebar-tab-active-color);
1587
+ font-size: 13px;
1588
+ font-weight: 650;
1589
+ line-height: 1.2;
1590
+ letter-spacing: 0;
1591
+ }
1592
+ .main-sidebar-peer-dialog-subtitle {
1593
+ margin-top: 2px;
1594
+ color: var(--pinokio-sidebar-action-muted);
1595
+ font-size: 11px;
1596
+ font-weight: 500;
1597
+ line-height: 1.2;
1598
+ letter-spacing: 0;
1599
+ overflow: hidden;
1600
+ text-overflow: ellipsis;
1601
+ white-space: nowrap;
1602
+ }
1603
+ .main-sidebar-peer-dialog-close,
1604
+ .main-sidebar-peer-copy {
1605
+ appearance: none;
1606
+ border: 0;
1607
+ background: transparent;
1608
+ color: var(--pinokio-sidebar-icon-muted);
1609
+ cursor: pointer;
1610
+ transition: background-color 120ms ease, color 120ms ease;
1611
+ }
1612
+ .main-sidebar-peer-dialog-close:hover,
1613
+ .main-sidebar-peer-dialog-close:focus-visible,
1614
+ .main-sidebar-peer-copy:hover,
1615
+ .main-sidebar-peer-copy:focus-visible {
1616
+ background: var(--pinokio-sidebar-tab-hover);
1617
+ color: var(--pinokio-sidebar-icon-active);
1618
+ outline: none;
1619
+ }
1620
+ .main-sidebar-peer-dialog-tabs {
1621
+ display: flex;
1622
+ gap: 2px;
1623
+ margin-top: 10px;
1624
+ padding: 2px;
1625
+ border-radius: 7px;
1626
+ background: var(--pinokio-sidebar-control-bg);
1627
+ }
1628
+ .main-sidebar-peer-dialog-tab {
1629
+ flex: 1 1 0;
1630
+ min-width: 0;
1631
+ appearance: none;
1632
+ border: 0;
1633
+ border-radius: 5px;
1634
+ padding: 5px 7px;
1635
+ background: transparent;
1636
+ color: var(--pinokio-sidebar-tab-muted);
1637
+ font: inherit;
1638
+ font-size: 11px;
1639
+ font-weight: 600;
1640
+ line-height: 1.2;
1641
+ letter-spacing: 0;
1642
+ overflow: hidden;
1643
+ text-overflow: ellipsis;
1644
+ white-space: nowrap;
1645
+ cursor: pointer;
1646
+ }
1647
+ .main-sidebar-peer-dialog-tab:hover,
1648
+ .main-sidebar-peer-dialog-tab:focus-visible,
1649
+ .main-sidebar-peer-dialog-tab.is-active {
1650
+ background: var(--pinokio-sidebar-control-active-bg);
1651
+ color: var(--pinokio-sidebar-tab-active-color);
1652
+ outline: none;
1653
+ }
1654
+ .main-sidebar-peer-dialog-body {
1655
+ margin-top: 10px;
1656
+ }
1657
+ .main-sidebar-peer-dialog-panel {
1658
+ display: grid;
1659
+ justify-items: center;
1660
+ gap: 8px;
1661
+ }
1662
+ .main-sidebar-peer-qr-link {
1663
+ display: block;
1664
+ box-sizing: border-box;
1665
+ padding: 10px;
1666
+ border-radius: 6px;
1667
+ background: #ffffff;
1668
+ line-height: 0;
1669
+ }
1670
+ .main-sidebar-peer-qr-image {
1671
+ width: 174px;
1672
+ height: 174px;
1673
+ display: block;
1674
+ image-rendering: pixelated;
1675
+ }
1676
+ .main-sidebar-peer-caption {
1677
+ width: 100%;
1678
+ color: var(--pinokio-sidebar-tab-active-color);
1679
+ font-size: 12px;
1680
+ font-weight: 650;
1681
+ line-height: 1.25;
1682
+ text-align: center;
1683
+ letter-spacing: 0;
1684
+ overflow-wrap: anywhere;
1685
+ }
1686
+ .main-sidebar-peer-local-note {
1687
+ width: 100%;
1688
+ color: var(--pinokio-sidebar-action-muted);
1689
+ font-size: 10px;
1690
+ font-weight: 500;
1691
+ line-height: 1.35;
1692
+ text-align: center;
1693
+ letter-spacing: 0;
1694
+ }
1695
+ .main-sidebar-peer-url-row {
1696
+ width: 100%;
1697
+ display: grid;
1698
+ grid-template-columns: minmax(0, 1fr) 28px;
1699
+ align-items: center;
1700
+ gap: 6px;
1701
+ }
1702
+ .main-sidebar-peer-url {
1703
+ min-width: 0;
1704
+ display: block;
1705
+ padding: 6px 7px;
1706
+ border-radius: 6px;
1707
+ background: var(--pinokio-sidebar-control-bg);
1524
1708
  color: var(--pinokio-sidebar-tab-muted);
1709
+ font-size: 10px;
1710
+ font-weight: 600;
1711
+ line-height: 1.2;
1712
+ letter-spacing: 0;
1713
+ text-decoration: none;
1714
+ overflow: hidden;
1715
+ text-overflow: ellipsis;
1716
+ white-space: nowrap;
1717
+ }
1718
+ .main-sidebar-peer-url:hover,
1719
+ .main-sidebar-peer-url:focus-visible {
1720
+ color: var(--pinokio-sidebar-tab-active-color);
1721
+ outline: none;
1722
+ }
1723
+ .main-sidebar-peer-setup {
1724
+ display: grid;
1725
+ gap: 12px;
1726
+ }
1727
+ .main-sidebar-peer-setup-copy {
1728
+ margin: 0;
1729
+ color: var(--pinokio-sidebar-tab-active-color);
1730
+ font-size: 12px;
1731
+ font-weight: 500;
1732
+ line-height: 1.45;
1733
+ letter-spacing: 0;
1734
+ }
1735
+ .main-sidebar-peer-setup-actions {
1736
+ display: flex;
1737
+ flex-wrap: wrap;
1738
+ gap: 8px;
1739
+ }
1740
+ .main-sidebar-peer-setup-primary,
1741
+ .main-sidebar-peer-setup-secondary {
1742
+ min-height: 32px;
1743
+ display: inline-flex;
1744
+ align-items: center;
1745
+ justify-content: center;
1746
+ box-sizing: border-box;
1747
+ border-radius: 6px;
1748
+ padding: 7px 10px;
1749
+ font-size: 12px;
1750
+ font-weight: 650;
1751
+ line-height: 1.2;
1752
+ letter-spacing: 0;
1753
+ text-decoration: none;
1754
+ cursor: pointer;
1755
+ transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
1756
+ }
1757
+ .main-sidebar-peer-setup-primary {
1758
+ border: 1px solid var(--pinokio-sidebar-tab-active-color);
1759
+ background: var(--pinokio-sidebar-tab-active-color);
1760
+ color: var(--pinokio-sidebar-tabbar-bg);
1761
+ }
1762
+ .main-sidebar-peer-setup-primary:hover,
1763
+ .main-sidebar-peer-setup-primary:focus-visible {
1764
+ border-color: var(--pinokio-sidebar-icon-active);
1765
+ background: var(--pinokio-sidebar-icon-active);
1766
+ color: var(--pinokio-sidebar-tabbar-bg);
1767
+ outline: none;
1525
1768
  }
1526
- .main-sidebar .qr img {
1527
- width: 128px;
1528
- height: 128px;
1529
- max-width: calc(100% - 24px);
1769
+ .main-sidebar-peer-setup-secondary {
1770
+ appearance: none;
1771
+ border: 1px solid var(--pinokio-sidebar-tabbar-border);
1772
+ background: var(--pinokio-sidebar-control-bg);
1773
+ color: var(--pinokio-sidebar-tab-active-color);
1774
+ }
1775
+ .main-sidebar-peer-setup-secondary:hover,
1776
+ .main-sidebar-peer-setup-secondary:focus-visible {
1777
+ background: var(--pinokio-sidebar-tab-hover);
1778
+ color: var(--pinokio-sidebar-icon-active);
1779
+ outline: none;
1530
1780
  }
1531
1781
  @media only screen and (min-width: 601px) {
1782
+ body.main-sidebar-page {
1783
+ display: flex;
1784
+ flex-direction: column;
1785
+ height: 100vh;
1786
+ min-height: 0;
1787
+ overflow: hidden;
1788
+ }
1789
+
1790
+ body.main-sidebar-page > header.navheader {
1791
+ flex: 0 0 auto;
1792
+ }
1793
+
1794
+ body.main-sidebar-page main {
1795
+ flex: 1 1 auto;
1796
+ min-height: 0;
1797
+ overflow: hidden;
1798
+ }
1799
+
1800
+ body.main-sidebar-page main > :not(.main-sidebar) {
1801
+ min-height: 0;
1802
+ max-height: 100%;
1803
+ overflow-y: auto;
1804
+ overscroll-behavior: contain;
1805
+ }
1806
+
1807
+ body.main-sidebar-page main > iframe {
1808
+ overflow: hidden;
1809
+ }
1810
+
1811
+ body.main-sidebar-page .main-sidebar {
1812
+ align-self: stretch;
1813
+ height: auto;
1814
+ max-height: none;
1815
+ overflow-x: hidden;
1816
+ overflow-y: auto;
1817
+ overscroll-behavior: contain;
1818
+ scrollbar-width: thin;
1819
+ scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
1820
+ }
1821
+
1822
+ body.dark.main-sidebar-page .main-sidebar {
1823
+ scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
1824
+ }
1825
+
1826
+ body.main-sidebar-page .main-sidebar::-webkit-scrollbar {
1827
+ width: 6px;
1828
+ }
1829
+
1830
+ body.main-sidebar-page .main-sidebar::-webkit-scrollbar-track {
1831
+ background: transparent;
1832
+ }
1833
+
1834
+ body.main-sidebar-page .main-sidebar::-webkit-scrollbar-thumb {
1835
+ background-color: rgba(148, 163, 184, 0.42);
1836
+ border: 0;
1837
+ border-radius: 999px;
1838
+ }
1839
+
1840
+ body.dark.main-sidebar-page .main-sidebar::-webkit-scrollbar-thumb {
1841
+ background-color: rgba(148, 163, 184, 0.32);
1842
+ }
1843
+
1532
1844
  body.main-sidebar-page.main-sidebar-collapsed .main-sidebar {
1533
1845
  width: 0;
1534
1846
  min-width: 0;
@@ -2859,59 +3171,86 @@ body.dark .swal2-title {
2859
3171
  background: rgba(0,0,0,0.8) !important;
2860
3172
  */
2861
3173
  }
3174
+ .swal2-container.pinokio-download-container.swal2-backdrop-show {
3175
+ background: rgba(9, 11, 15, 0.34) !important;
3176
+ }
3177
+ body.dark .swal2-container.pinokio-download-container.swal2-backdrop-show {
3178
+ background: rgba(0, 0, 0, 0.58) !important;
3179
+ }
2862
3180
  .swal2-popup.pinokio-download-modal {
2863
- border-radius: 14px !important;
2864
- padding: 18px !important;
2865
- background: #ffffff !important;
2866
- color: #0f172a !important;
2867
- border: 1px solid rgba(148, 163, 184, 0.2) !important;
2868
- box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
3181
+ --pinokio-download-bg: #ffffff;
3182
+ --pinokio-download-control-bg: #ffffff;
3183
+ --pinokio-download-text: #18181b;
3184
+ --pinokio-download-muted: #71717a;
3185
+ --pinokio-download-border: rgba(24, 24, 27, 0.12);
3186
+ --pinokio-download-border-strong: rgba(24, 24, 27, 0.2);
3187
+ --pinokio-download-chip-bg: rgba(24, 24, 27, 0.04);
3188
+ --pinokio-download-primary-bg: #18181b;
3189
+ --pinokio-download-primary-hover: #27272a;
3190
+ --pinokio-download-primary-text: #ffffff;
3191
+ --pinokio-download-focus: rgba(24, 24, 27, 0.14);
3192
+ width: min(420px, calc(100vw - 32px)) !important;
3193
+ border-radius: 8px !important;
3194
+ padding: 20px !important;
3195
+ background: var(--pinokio-download-bg) !important;
3196
+ color: var(--pinokio-download-text) !important;
3197
+ border: 1px solid var(--pinokio-download-border) !important;
3198
+ box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
2869
3199
  }
2870
3200
  body.dark .swal2-popup.pinokio-download-modal {
2871
- background: #0f172a !important;
2872
- color: #e2e8f0 !important;
2873
- border: 1px solid rgba(148, 163, 184, 0.24) !important;
2874
- box-shadow: 0 32px 90px rgba(2, 8, 23, 0.72) !important;
3201
+ --pinokio-download-bg: #1b1c1d;
3202
+ --pinokio-download-control-bg: rgba(255, 255, 255, 0.04);
3203
+ --pinokio-download-text: rgba(250, 250, 250, 0.94);
3204
+ --pinokio-download-muted: rgba(229, 231, 235, 0.62);
3205
+ --pinokio-download-border: rgba(255, 255, 255, 0.1);
3206
+ --pinokio-download-border-strong: rgba(255, 255, 255, 0.18);
3207
+ --pinokio-download-chip-bg: rgba(255, 255, 255, 0.055);
3208
+ --pinokio-download-primary-bg: rgba(250, 250, 250, 0.94);
3209
+ --pinokio-download-primary-hover: #ffffff;
3210
+ --pinokio-download-primary-text: #1b1c1d;
3211
+ --pinokio-download-focus: rgba(255, 255, 255, 0.18);
3212
+ box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
2875
3213
  }
2876
3214
  .swal2-popup.pinokio-download-modal .swal2-title {
2877
- margin: 0 40px 6px 0 !important;
3215
+ margin: 0 32px 8px 0 !important;
2878
3216
  padding: 0 !important;
2879
3217
  text-align: left !important;
2880
- font-size: 20px !important;
2881
- font-weight: 700 !important;
2882
- line-height: 1.2 !important;
2883
- letter-spacing: -0.02em !important;
2884
- color: #0f172a !important;
2885
- }
2886
- body.dark .swal2-popup.pinokio-download-modal .swal2-title {
2887
- color: #f8fafc !important;
3218
+ font-size: 18px !important;
3219
+ font-weight: 600 !important;
3220
+ line-height: 1.25 !important;
3221
+ letter-spacing: 0 !important;
3222
+ color: var(--pinokio-download-text) !important;
2888
3223
  }
2889
- .pinokio-download-html.swal2-html-container {
2890
- margin: 0 0 12px 0 !important;
3224
+ .swal2-popup.pinokio-download-modal .pinokio-download-html.swal2-html-container {
3225
+ margin: 0 0 16px 0 !important;
2891
3226
  padding: 0 !important;
2892
3227
  text-align: left !important;
2893
3228
  font-size: 13px !important;
2894
3229
  line-height: 1.45 !important;
2895
- color: rgba(71, 85, 105, 0.84) !important;
2896
- }
2897
- body.dark .pinokio-download-html.swal2-html-container {
2898
- color: rgba(148, 163, 184, 0.88) !important;
3230
+ color: var(--pinokio-download-muted) !important;
2899
3231
  }
2900
- .pinokio-download-note {
3232
+ .swal2-popup.pinokio-download-modal .pinokio-download-note {
3233
+ display: flex;
3234
+ align-items: center;
3235
+ gap: 6px;
2901
3236
  margin: 0;
2902
3237
  }
2903
- .pinokio-download-note code {
3238
+ .swal2-popup.pinokio-download-modal .pinokio-download-note code {
3239
+ max-width: 100%;
3240
+ min-width: 0;
3241
+ padding: 1px 6px;
3242
+ border-radius: 6px;
3243
+ border: 1px solid var(--pinokio-download-border);
3244
+ background: var(--pinokio-download-chip-bg);
3245
+ color: var(--pinokio-download-text);
2904
3246
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2905
3247
  font-size: 12px;
2906
- padding: 2px 6px;
2907
- border-radius: 999px;
2908
- background: rgba(15, 23, 42, 0.06);
2909
- color: inherit;
2910
- }
2911
- body.dark .pinokio-download-note code {
2912
- background: rgba(148, 163, 184, 0.16);
3248
+ line-height: 1.45;
3249
+ overflow: hidden;
3250
+ text-overflow: ellipsis;
3251
+ white-space: nowrap;
2913
3252
  }
2914
- .pinokio-download-label.swal2-input-label {
3253
+ .swal2-popup.pinokio-download-modal .pinokio-download-label.swal2-input-label {
2915
3254
  display: block !important;
2916
3255
  width: 100% !important;
2917
3256
  margin: 0 0 6px 0 !important;
@@ -2919,108 +3258,117 @@ body.dark .pinokio-download-note code {
2919
3258
  font-size: 12px !important;
2920
3259
  font-weight: 600 !important;
2921
3260
  line-height: 1.3 !important;
2922
- color: rgba(15, 23, 42, 0.78) !important;
3261
+ color: var(--pinokio-download-text) !important;
2923
3262
  }
2924
- body.dark .pinokio-download-label.swal2-input-label {
2925
- color: rgba(241, 245, 249, 0.84) !important;
2926
- }
2927
- .pinokio-download-input.swal2-input {
3263
+ .swal2-popup.pinokio-download-modal .pinokio-download-input.swal2-input {
3264
+ box-sizing: border-box !important;
2928
3265
  width: 100% !important;
3266
+ height: 36px !important;
2929
3267
  margin: 0 !important;
2930
- height: 40px !important;
2931
- padding: 0 12px !important;
2932
- border-radius: 10px !important;
2933
- border: 1px solid rgba(148, 163, 184, 0.58) !important;
2934
- background: #ffffff !important;
2935
- color: #0f172a !important;
3268
+ padding: 0 10px !important;
3269
+ border-radius: 7px !important;
3270
+ border: 1px solid var(--pinokio-download-border-strong) !important;
3271
+ background: var(--pinokio-download-control-bg) !important;
3272
+ color: var(--pinokio-download-text) !important;
2936
3273
  box-shadow: none !important;
2937
- font-size: 14px !important;
3274
+ font-size: 13px !important;
2938
3275
  line-height: 1.2 !important;
2939
3276
  }
2940
- .pinokio-download-input.swal2-input:focus {
2941
- border-color: rgba(59, 130, 246, 0.78) !important;
2942
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16) !important;
3277
+ .swal2-popup.pinokio-download-modal .pinokio-download-input.swal2-input:focus {
3278
+ border-color: var(--pinokio-download-text) !important;
3279
+ box-shadow: 0 0 0 3px var(--pinokio-download-focus) !important;
3280
+ outline: none !important;
2943
3281
  }
2944
- body.dark .pinokio-download-input.swal2-input {
2945
- border-color: rgba(148, 163, 184, 0.45) !important;
2946
- background: rgba(15, 23, 42, 0.65) !important;
2947
- color: rgba(248, 250, 252, 0.96) !important;
3282
+ .swal2-popup.pinokio-download-modal .pinokio-download-input.swal2-input::placeholder {
3283
+ color: var(--pinokio-download-muted) !important;
2948
3284
  }
2949
- .pinokio-download-actions.swal2-actions {
3285
+ .swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions {
2950
3286
  width: 100% !important;
2951
3287
  justify-content: flex-end !important;
2952
3288
  gap: 8px !important;
2953
- margin-top: 14px !important;
3289
+ margin-top: 16px !important;
2954
3290
  padding: 0 !important;
2955
3291
  }
2956
- .pinokio-download-actions.swal2-actions.swal2-loading {
3292
+ .swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions.swal2-loading {
2957
3293
  justify-content: flex-end !important;
2958
3294
  gap: 8px !important;
2959
3295
  }
2960
- .pinokio-download-confirm.swal2-confirm,
2961
- .pinokio-download-cancel.swal2-cancel {
2962
- min-width: 92px !important;
2963
- height: 36px !important;
3296
+ .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm,
3297
+ .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
3298
+ min-width: 78px !important;
3299
+ height: 32px !important;
2964
3300
  margin: 0 !important;
2965
- padding: 0 14px !important;
2966
- border-radius: 10px !important;
3301
+ padding: 0 12px !important;
3302
+ border-radius: 6px !important;
3303
+ border: 1px solid var(--pinokio-download-border) !important;
3304
+ box-shadow: none !important;
2967
3305
  font-size: 13px !important;
2968
- font-weight: 650 !important;
3306
+ line-height: 1 !important;
3307
+ font-weight: 600 !important;
2969
3308
  }
2970
3309
  .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm {
2971
- border: none !important;
2972
- background: royalblue !important;
2973
- color: #ffffff !important;
2974
- }
2975
- .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm:hover {
2976
- background: #315cd8 !important;
3310
+ border-color: var(--pinokio-download-primary-bg) !important;
3311
+ background: var(--pinokio-download-primary-bg) !important;
3312
+ color: var(--pinokio-download-primary-text) !important;
3313
+ }
3314
+ .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm:hover,
3315
+ .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm:focus-visible {
3316
+ border-color: var(--pinokio-download-primary-hover) !important;
3317
+ background: var(--pinokio-download-primary-hover) !important;
3318
+ color: var(--pinokio-download-primary-text) !important;
3319
+ outline: none !important;
2977
3320
  }
2978
3321
  .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
2979
- border: 1px solid rgba(148, 163, 184, 0.6) !important;
2980
- background: #ffffff !important;
2981
- color: #0f172a !important;
2982
- }
2983
- body.dark .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
2984
- border-color: rgba(148, 163, 184, 0.52) !important;
2985
- background: rgba(15, 23, 42, 0.64) !important;
2986
- color: rgba(248, 250, 252, 0.96) !important;
2987
- }
2988
- .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:hover {
2989
- background: rgba(148, 163, 184, 0.12) !important;
3322
+ background: transparent !important;
3323
+ color: var(--pinokio-download-muted) !important;
2990
3324
  }
2991
- body.dark .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:hover {
2992
- background: rgba(148, 163, 184, 0.18) !important;
3325
+ .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:hover,
3326
+ .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:focus-visible {
3327
+ border-color: var(--pinokio-download-border-strong) !important;
3328
+ background: var(--pinokio-download-chip-bg) !important;
3329
+ color: var(--pinokio-download-text) !important;
3330
+ outline: none !important;
2993
3331
  }
2994
3332
  .pinokio-install-inline-status {
2995
- padding: 14px 18px;
3333
+ --pinokio-inline-status-bg: #ffffff;
3334
+ --pinokio-inline-status-border: rgba(24, 24, 27, 0.12);
3335
+ --pinokio-inline-status-title: #18181b;
3336
+ --pinokio-inline-status-detail: #71717a;
3337
+ --pinokio-inline-status-progress: #18181b;
3338
+ flex: 0 0 auto;
3339
+ padding: 12px 14px;
2996
3340
  box-sizing: border-box;
2997
3341
  width: 100%;
2998
3342
  margin: 0;
2999
3343
  overflow: hidden;
3000
- border-top: 1px solid rgba(15, 23, 42, 0.12);
3001
- background: var(--pinokio-chrome-accent-bg-light);
3002
- color: var(--pinokio-chrome-accent-fg-light);
3344
+ border-top: 1px solid var(--pinokio-inline-status-border);
3345
+ background: var(--pinokio-inline-status-bg);
3346
+ color: var(--pinokio-inline-status-title);
3003
3347
  }
3004
3348
  body.dark .pinokio-install-inline-status {
3005
- border-top-color: rgba(255, 255, 255, 0.08);
3006
- background: var(--pinokio-chrome-accent-bg-dark);
3007
- color: var(--pinokio-chrome-accent-fg-dark);
3349
+ --pinokio-inline-status-bg: #1b1c1d;
3350
+ --pinokio-inline-status-border: rgba(255, 255, 255, 0.1);
3351
+ --pinokio-inline-status-title: rgba(250, 250, 250, 0.94);
3352
+ --pinokio-inline-status-detail: rgba(229, 231, 235, 0.62);
3353
+ --pinokio-inline-status-progress: rgba(250, 250, 250, 0.94);
3008
3354
  }
3009
3355
  body.pinokio-install-status-visible {
3010
3356
  min-height: 100vh;
3011
3357
  display: flex;
3012
- flex-direction: column;
3358
+ flex-direction: column !important;
3359
+ align-items: stretch;
3013
3360
  }
3014
- body.pinokio-install-status-visible main,
3015
- body.pinokio-install-status-visible .terminal-container {
3361
+ body.pinokio-install-status-visible > main,
3362
+ body.pinokio-install-status-visible > .terminal-container,
3363
+ body.pinokio-install-status-visible > .containers {
3016
3364
  flex: 1 1 auto;
3017
3365
  min-height: 0;
3018
3366
  }
3019
3367
  .pinokio-install-inline-status-shell {
3020
3368
  display: flex;
3021
3369
  align-items: flex-start;
3022
- gap: 12px;
3023
- min-height: 44px;
3370
+ gap: 10px;
3371
+ min-height: 36px;
3024
3372
  }
3025
3373
  .pinokio-install-inline-status-icon {
3026
3374
  width: 18px;
@@ -3030,28 +3378,64 @@ body.pinokio-install-status-visible .terminal-container {
3030
3378
  display: inline-flex;
3031
3379
  align-items: center;
3032
3380
  justify-content: center;
3033
- font-size: 15px;
3381
+ color: var(--pinokio-inline-status-progress);
3382
+ font-size: 14px;
3383
+ }
3384
+ .pinokio-install-inline-status-spinner {
3385
+ position: relative;
3386
+ width: 18px;
3387
+ height: 18px;
3388
+ flex: 0 0 18px;
3389
+ margin-top: 1px;
3390
+ display: inline-flex;
3391
+ }
3392
+ .pinokio-install-inline-status-spinner-dot {
3393
+ position: absolute;
3394
+ width: 7px;
3395
+ height: 7px;
3396
+ border-radius: 2px;
3397
+ background: var(--pinokio-inline-status-progress);
3398
+ opacity: 0.34;
3399
+ transform: scale(0.82);
3400
+ animation: pinokio-inline-status-spinner 1.1s ease-in-out infinite;
3401
+ }
3402
+ .pinokio-install-inline-status-spinner-dot-1 {
3403
+ top: 1px;
3404
+ left: 1px;
3405
+ animation-delay: 0s;
3406
+ }
3407
+ .pinokio-install-inline-status-spinner-dot-2 {
3408
+ top: 1px;
3409
+ left: 10px;
3410
+ animation-delay: 0.12s;
3411
+ }
3412
+ .pinokio-install-inline-status-spinner-dot-3 {
3413
+ top: 10px;
3414
+ left: 10px;
3415
+ animation-delay: 0.24s;
3416
+ }
3417
+ .pinokio-install-inline-status-spinner-dot-4 {
3418
+ top: 10px;
3419
+ left: 1px;
3420
+ animation-delay: 0.36s;
3034
3421
  }
3035
3422
  .pinokio-install-inline-status-copy {
3036
3423
  min-width: 0;
3037
3424
  flex: 1;
3038
3425
  }
3039
3426
  .pinokio-install-inline-status-title {
3040
- font-size: 15px;
3041
- line-height: 1.2;
3042
- font-weight: 700;
3427
+ font-size: 13px;
3428
+ line-height: 1.25;
3429
+ font-weight: 600;
3043
3430
  color: inherit;
3044
3431
  }
3045
3432
  .pinokio-install-inline-status-detail {
3046
3433
  margin-top: 4px;
3047
- color: rgba(235, 222, 197, 0.82);
3434
+ color: var(--pinokio-inline-status-detail);
3048
3435
  font-size: 12px;
3049
3436
  line-height: 1.35;
3050
3437
  word-break: break-word;
3051
3438
  }
3052
- body.dark .pinokio-install-inline-status-detail {
3053
- color: rgba(239, 233, 214, 0.76);
3054
- }
3055
3439
  .pinokio-install-inline-status-detail > *:first-child {
3056
3440
  margin-top: 0;
3057
3441
  }
@@ -3062,98 +3446,126 @@ body.dark .pinokio-install-inline-status-detail {
3062
3446
  font-family: "RobotoMono", monospace;
3063
3447
  }
3064
3448
  .pinokio-install-inline-status.is-error {
3065
- background: color-mix(in srgb, var(--pinokio-chrome-accent-bg-light) 78%, #7f1d1d);
3066
- color: #ffe2df;
3449
+ --pinokio-inline-status-bg: #fff7f7;
3450
+ --pinokio-inline-status-border: rgba(220, 38, 38, 0.18);
3451
+ --pinokio-inline-status-title: #b91c1c;
3452
+ --pinokio-inline-status-detail: rgba(127, 29, 29, 0.78);
3453
+ --pinokio-inline-status-progress: #b91c1c;
3067
3454
  }
3068
3455
  body.dark .pinokio-install-inline-status.is-error {
3069
- background: color-mix(in srgb, var(--pinokio-chrome-accent-bg-dark) 72%, #7f1d1d);
3070
- color: #ffd5d1;
3071
- }
3072
- .pinokio-install-inline-status.is-error .pinokio-install-inline-status-detail {
3073
- color: rgba(255, 226, 223, 0.88);
3456
+ --pinokio-inline-status-bg: color-mix(in srgb, #1b1c1d 88%, #7f1d1d);
3457
+ --pinokio-inline-status-border: rgba(248, 113, 113, 0.28);
3458
+ --pinokio-inline-status-title: #fecaca;
3459
+ --pinokio-inline-status-detail: rgba(255, 223, 219, 0.76);
3460
+ --pinokio-inline-status-progress: #fecaca;
3461
+ }
3462
+ @keyframes pinokio-inline-status-spinner {
3463
+ 0%,
3464
+ 100% {
3465
+ opacity: 0.34;
3466
+ transform: scale(0.82);
3467
+ }
3468
+ 45% {
3469
+ opacity: 1;
3470
+ transform: scale(1);
3471
+ }
3074
3472
  }
3075
- body.dark .pinokio-install-inline-status.is-error .pinokio-install-inline-status-detail {
3076
- color: rgba(255, 223, 219, 0.84);
3473
+ @media (prefers-reduced-motion: reduce) {
3474
+ .pinokio-install-inline-status-spinner-dot {
3475
+ animation: none;
3476
+ opacity: 0.84;
3477
+ transform: none;
3478
+ }
3077
3479
  }
3078
- .pinokio-download-close.swal2-close {
3480
+ .swal2-popup.pinokio-download-modal .pinokio-download-close.swal2-close {
3079
3481
  position: absolute !important;
3080
- top: 14px !important;
3081
- right: 14px !important;
3482
+ top: 12px !important;
3483
+ right: 12px !important;
3082
3484
  width: 28px !important;
3083
3485
  height: 28px !important;
3084
- line-height: 28px !important;
3486
+ line-height: 1 !important;
3085
3487
  margin: 0 !important;
3488
+ border-radius: 6px !important;
3489
+ color: var(--pinokio-download-muted) !important;
3086
3490
  font-size: 20px !important;
3087
- color: rgba(71, 85, 105, 0.7) !important;
3088
- border-radius: 999px !important;
3089
3491
  display: flex !important;
3090
3492
  align-items: center !important;
3091
3493
  justify-content: center !important;
3092
- transition: background 0.2s ease, color 0.2s ease !important;
3093
- }
3094
- .pinokio-download-close.swal2-close:hover {
3095
- background: rgba(148, 163, 184, 0.14) !important;
3096
- color: #0f172a !important;
3494
+ transition: background-color 0.14s ease, color 0.14s ease !important;
3097
3495
  }
3098
- body.dark .pinokio-download-close.swal2-close {
3099
- color: rgba(226, 232, 240, 0.72) !important;
3100
- }
3101
- body.dark .pinokio-download-close.swal2-close:hover {
3102
- background: rgba(148, 163, 184, 0.16) !important;
3103
- color: #f8fafc !important;
3496
+ .swal2-popup.pinokio-download-modal .pinokio-download-close.swal2-close:hover,
3497
+ .swal2-popup.pinokio-download-modal .pinokio-download-close.swal2-close:focus-visible {
3498
+ background: var(--pinokio-download-chip-bg) !important;
3499
+ color: var(--pinokio-download-text) !important;
3500
+ outline: none !important;
3104
3501
  }
3105
- .pinokio-download-validation.swal2-validation-message {
3502
+ .swal2-popup.pinokio-download-modal .pinokio-download-validation.swal2-validation-message {
3106
3503
  margin: 10px 0 0 0 !important;
3107
- padding: 10px 12px !important;
3108
- border-radius: 10px !important;
3109
- background: rgba(255, 66, 66, 0.1) !important;
3110
- border: 1px solid rgba(255, 66, 66, 0.18) !important;
3111
- border-left: 4px solid rgba(255, 66, 66, 0.5) !important;
3112
- color: rgba(15, 23, 42, 0.92) !important;
3113
- font-size: 13px !important;
3504
+ padding: 9px 10px !important;
3505
+ border-radius: 7px !important;
3506
+ background: rgba(220, 38, 38, 0.08) !important;
3507
+ border: 1px solid rgba(220, 38, 38, 0.18) !important;
3508
+ color: #b91c1c !important;
3509
+ font-size: 12px !important;
3114
3510
  line-height: 1.4 !important;
3115
3511
  justify-content: flex-start !important;
3116
- align-items: flex-start !important;
3512
+ align-items: center !important;
3513
+ text-align: left !important;
3117
3514
  }
3118
- .pinokio-download-validation.swal2-validation-message::before {
3515
+ .swal2-popup.pinokio-download-modal .pinokio-download-validation.swal2-validation-message::before {
3119
3516
  display: none !important;
3120
3517
  }
3121
- body.dark .pinokio-download-validation.swal2-validation-message {
3122
- background: rgba(255, 66, 66, 0.16) !important;
3123
- border-color: rgba(255, 66, 66, 0.24) !important;
3124
- border-left-color: rgba(255, 66, 66, 0.68) !important;
3125
- color: rgba(248, 250, 252, 0.94) !important;
3518
+ body.dark .swal2-popup.pinokio-download-modal .pinokio-download-validation.swal2-validation-message {
3519
+ background: rgba(239, 68, 68, 0.13) !important;
3520
+ border-color: rgba(248, 113, 113, 0.28) !important;
3521
+ color: #fecaca !important;
3126
3522
  }
3127
- .pinokio-download-loader.swal2-loader {
3523
+ .swal2-popup.pinokio-download-modal .pinokio-download-loader.swal2-loader {
3128
3524
  align-items: center !important;
3129
3525
  justify-content: center !important;
3130
- gap: 8px !important;
3526
+ gap: 7px !important;
3131
3527
  width: auto !important;
3132
- height: 36px !important;
3528
+ height: 32px !important;
3133
3529
  margin: 0 !important;
3134
- padding: 0 14px !important;
3530
+ padding: 0 12px !important;
3135
3531
  animation: none !important;
3136
- border: none !important;
3137
- border-radius: 10px !important;
3138
- background: royalblue !important;
3139
- color: #ffffff !important;
3532
+ border: 1px solid var(--pinokio-download-primary-bg) !important;
3533
+ border-radius: 6px !important;
3534
+ background: var(--pinokio-download-primary-bg) !important;
3535
+ color: var(--pinokio-download-primary-text) !important;
3140
3536
  }
3141
- .pinokio-download-actions.swal2-actions.swal2-loading .pinokio-download-loader.swal2-loader {
3537
+ .swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions.swal2-loading .pinokio-download-loader.swal2-loader {
3142
3538
  display: inline-flex !important;
3143
3539
  }
3144
- .pinokio-download-loader-spinner {
3145
- width: 14px;
3146
- height: 14px;
3147
- border: 2px solid rgba(255, 255, 255, 0.34);
3148
- border-top-color: #ffffff;
3540
+ .swal2-popup.pinokio-download-modal .pinokio-download-loader-spinner {
3541
+ width: 13px;
3542
+ height: 13px;
3543
+ border: 2px solid color-mix(in srgb, var(--pinokio-download-primary-text) 30%, transparent);
3544
+ border-top-color: var(--pinokio-download-primary-text);
3149
3545
  border-radius: 50%;
3150
3546
  animation: pinokio-download-spin 0.8s linear infinite;
3151
3547
  }
3152
- .pinokio-download-loader-text {
3548
+ .swal2-popup.pinokio-download-modal .pinokio-download-loader-text {
3153
3549
  font-size: 13px;
3154
- font-weight: 700;
3550
+ font-weight: 600;
3155
3551
  line-height: 1;
3156
3552
  }
3553
+ @media (max-width: 520px) {
3554
+ .swal2-popup.pinokio-download-modal {
3555
+ width: calc(100vw - 24px) !important;
3556
+ padding: 16px !important;
3557
+ }
3558
+ .swal2-popup.pinokio-download-modal .swal2-title {
3559
+ margin-right: 30px !important;
3560
+ }
3561
+ .swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions {
3562
+ flex-wrap: wrap !important;
3563
+ }
3564
+ .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm,
3565
+ .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
3566
+ flex: 1 1 118px !important;
3567
+ }
3568
+ }
3157
3569
  @keyframes pinokio-download-spin {
3158
3570
  to {
3159
3571
  transform: rotate(360deg);
@@ -3858,7 +4270,7 @@ aside .qr {
3858
4270
  display: none;
3859
4271
  }
3860
4272
 
3861
- @media only screen and (max-width: 600px) {
4273
+ @media only screen and (max-width: 768px) {
3862
4274
  html.main-sidebar-mobile-open,
3863
4275
  body.main-sidebar-mobile-open {
3864
4276
  overflow: hidden;
@@ -3923,12 +4335,12 @@ aside .qr {
3923
4335
  position: fixed;
3924
4336
  top: 0;
3925
4337
  left: 0;
3926
- bottom: 0;
4338
+ bottom: var(--main-mobile-navbar-total-height, 46px);
3927
4339
  z-index: 10000020;
3928
4340
  width: min(280px, calc(100vw - 40px));
3929
4341
  max-width: 100%;
3930
4342
  margin: 0 !important;
3931
- padding: calc(52px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
4343
+ padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
3932
4344
  box-sizing: border-box;
3933
4345
  overflow-y: auto;
3934
4346
  background: var(--pinokio-sidebar-tabbar-bg);
@@ -3948,11 +4360,37 @@ aside .qr {
3948
4360
  transform: translateX(0);
3949
4361
  }
3950
4362
 
4363
+ body.main-sidebar-page .main-sidebar-nav,
4364
+ body.main-sidebar-page .main-sidebar-section {
4365
+ gap: 4px;
4366
+ }
4367
+
4368
+ body.main-sidebar-page .main-sidebar-section + .main-sidebar-section {
4369
+ margin-top: 10px;
4370
+ }
4371
+
3951
4372
  body.main-sidebar-page .main-sidebar .tab,
3952
4373
  body.main-sidebar-page .main-sidebar .tab.submenu {
4374
+ min-height: 36px;
4375
+ column-gap: 10px !important;
4376
+ padding: 6px 9px !important;
3953
4377
  font-size: 12px;
3954
4378
  }
3955
4379
 
4380
+ body.main-sidebar-page .main-sidebar .tab.submenu {
4381
+ padding-left: 18px !important;
4382
+ }
4383
+
4384
+ body.main-sidebar-page .main-sidebar .tab i,
4385
+ body.main-sidebar-page .main-sidebar .tab .main-sidebar-action-icon {
4386
+ font-size: 14px;
4387
+ }
4388
+
4389
+ body.main-sidebar-page .main-sidebar-section-title {
4390
+ min-height: 22px;
4391
+ padding: 6px 9px 4px;
4392
+ }
4393
+
3956
4394
  body.main-sidebar-page .main-sidebar .tab .caption {
3957
4395
  width: auto !important;
3958
4396
  text-align: left !important;
@@ -4124,6 +4562,156 @@ aside .qr {
4124
4562
  }
4125
4563
  */
4126
4564
  }
4565
+ @media only screen and (max-width: 768px) {
4566
+ body.main-sidebar-page {
4567
+ --main-mobile-navbar-height: 46px;
4568
+ --main-mobile-navbar-total-height: calc(var(--main-mobile-navbar-height) + env(safe-area-inset-bottom));
4569
+ display: flex;
4570
+ flex-direction: column !important;
4571
+ align-items: stretch;
4572
+ min-height: 100vh;
4573
+ padding-bottom: var(--main-mobile-navbar-total-height);
4574
+ box-sizing: border-box;
4575
+ }
4576
+
4577
+ body.main-sidebar-page > header.navheader,
4578
+ body.main-sidebar-page > header.navheader:not(.minimized) {
4579
+ position: fixed !important;
4580
+ top: auto !important;
4581
+ right: 0 !important;
4582
+ bottom: 0 !important;
4583
+ left: 0 !important;
4584
+ width: 100% !important;
4585
+ min-width: 0 !important;
4586
+ max-width: none !important;
4587
+ height: var(--main-mobile-navbar-total-height);
4588
+ min-height: var(--main-mobile-navbar-total-height);
4589
+ max-height: var(--main-mobile-navbar-total-height);
4590
+ display: flex;
4591
+ flex-direction: row;
4592
+ align-items: center;
4593
+ align-self: auto;
4594
+ overflow: hidden;
4595
+ padding: 0 8px env(safe-area-inset-bottom);
4596
+ border-top: 1px solid var(--pinokio-sidebar-separator);
4597
+ border-bottom: 0;
4598
+ background: var(--pinokio-sidebar-tabbar-bg) !important;
4599
+ box-sizing: border-box;
4600
+ z-index: 10000040;
4601
+ }
4602
+
4603
+ body.main-sidebar-page > header.navheader h1,
4604
+ body.main-sidebar-page > header.navheader:not(.minimized) h1 {
4605
+ width: 100%;
4606
+ min-width: 0;
4607
+ height: var(--main-mobile-navbar-height);
4608
+ flex: 1 1 auto;
4609
+ display: flex;
4610
+ flex-direction: row;
4611
+ align-items: center;
4612
+ gap: 3px;
4613
+ overflow: hidden;
4614
+ flex-wrap: nowrap;
4615
+ }
4616
+
4617
+ body.main-sidebar-page > header.navheader .main-sidebar-header-toggle,
4618
+ body.main-sidebar-page > header.navheader #screenshot,
4619
+ body.main-sidebar-page > header.navheader #inspector,
4620
+ body.main-sidebar-page > header.navheader #mobile-link-button,
4621
+ body.main-sidebar-page > header.navheader .urlbar,
4622
+ body.main-sidebar-page > header.navheader #close-window,
4623
+ body.main-sidebar-page > header.navheader .runner,
4624
+ body.main-sidebar-page > header.navheader h1 > .path,
4625
+ body.main-sidebar-page > header.navheader h1 > .nav-button,
4626
+ body.main-sidebar-page .main-sidebar-mobile-toggle {
4627
+ display: none !important;
4628
+ }
4629
+
4630
+ body.main-sidebar-page > header.navheader .home,
4631
+ body.main-sidebar-page > header.navheader:not(.minimized) .home {
4632
+ order: 0;
4633
+ position: static;
4634
+ align-self: auto;
4635
+ flex: 0 0 38px;
4636
+ width: 38px;
4637
+ height: 38px;
4638
+ display: inline-flex;
4639
+ align-items: center;
4640
+ justify-content: center;
4641
+ padding: 0;
4642
+ border-radius: 8px;
4643
+ z-index: auto;
4644
+ }
4645
+
4646
+ body.main-sidebar-page > header.navheader .home .icon,
4647
+ body.main-sidebar-page > header.navheader:not(.minimized) .home .icon {
4648
+ width: 24px;
4649
+ height: 24px;
4650
+ display: block;
4651
+ }
4652
+
4653
+ body.main-sidebar-page > header.navheader h1 .btn2,
4654
+ body.main-sidebar-page > header.navheader:not(.minimized) h1 .btn2 {
4655
+ flex: 0 0 38px;
4656
+ width: 38px;
4657
+ height: 38px;
4658
+ min-width: 38px;
4659
+ min-height: 38px;
4660
+ display: inline-flex;
4661
+ align-items: center;
4662
+ justify-content: center;
4663
+ padding: 0;
4664
+ border-radius: 8px;
4665
+ box-sizing: border-box;
4666
+ }
4667
+
4668
+ body.main-sidebar-page > header.navheader h1 .btn2 > div {
4669
+ display: inline-flex;
4670
+ align-items: center;
4671
+ justify-content: center;
4672
+ }
4673
+
4674
+ body.main-sidebar-page > header.navheader #back {
4675
+ order: 1;
4676
+ }
4677
+
4678
+ body.main-sidebar-page > header.navheader #forward {
4679
+ order: 2;
4680
+ }
4681
+
4682
+ body.main-sidebar-page > header.navheader #refresh-page {
4683
+ order: 3;
4684
+ }
4685
+
4686
+ body.main-sidebar-page > header.navheader h1 > .flexible,
4687
+ body.main-sidebar-page > header.navheader h1 > .mobile-flexible {
4688
+ order: 10;
4689
+ display: block;
4690
+ flex: 1 1 auto;
4691
+ min-width: 8px;
4692
+ }
4693
+
4694
+ body.main-sidebar-page > header.navheader a[href="/columns"] {
4695
+ order: 20;
4696
+ }
4697
+
4698
+ body.main-sidebar-page > header.navheader a[href="/rows"] {
4699
+ order: 21;
4700
+ }
4701
+
4702
+ body.main-sidebar-page > header.navheader #new-window {
4703
+ order: 22;
4704
+ }
4705
+
4706
+ body.main-sidebar-page.main-sidebar-mobile-open .main-sidebar-mobile-backdrop {
4707
+ bottom: var(--main-mobile-navbar-total-height);
4708
+ }
4709
+ }
4710
+ header.navheader #screenshot,
4711
+ header.navheader #inspector,
4712
+ header.navheader #mobile-link-button {
4713
+ display: none !important;
4714
+ }
4127
4715
  /*
4128
4716
  body[data-agent='electron'] {
4129
4717
  padding-top: 26px;
@@ -4259,8 +4847,32 @@ header.navheader.transitioning {
4259
4847
  --logs-sidebar-width: 320px;
4260
4848
  --logs-sidebar-min-width: 220px;
4261
4849
  --logs-sidebar-max-width: 560px;
4850
+ --logs-bg: #ffffff;
4851
+ --logs-panel: #ffffff;
4852
+ --logs-soft: rgba(15, 23, 42, 0.035);
4853
+ --logs-soft-hover: rgba(15, 23, 42, 0.055);
4854
+ --logs-border: rgba(15, 23, 42, 0.1);
4855
+ --logs-border-strong: rgba(15, 23, 42, 0.16);
4856
+ --logs-text: #101828;
4857
+ --logs-muted: #667085;
4858
+ --logs-faint: rgba(102, 112, 133, 0.72);
4859
+ --logs-accent-bg: var(--pinokio-chrome-accent-bg-light, rgba(15, 23, 42, 0.84));
4860
+ --logs-accent-fg: var(--pinokio-chrome-accent-fg-light, #e1b261);
4262
4861
  position: relative;
4263
4862
  }
4863
+ body.dark #logs-root {
4864
+ --logs-bg: #1b1c1d;
4865
+ --logs-panel: #1b1c1d;
4866
+ --logs-soft: rgba(255, 255, 255, 0.04);
4867
+ --logs-soft-hover: rgba(255, 255, 255, 0.065);
4868
+ --logs-border: rgba(255, 255, 255, 0.08);
4869
+ --logs-border-strong: rgba(255, 255, 255, 0.14);
4870
+ --logs-text: #f5f7fb;
4871
+ --logs-muted: #9aa4b2;
4872
+ --logs-faint: rgba(154, 164, 178, 0.76);
4873
+ --logs-accent-bg: var(--pinokio-chrome-accent-bg-dark, rgba(255, 255, 255, 0.08));
4874
+ --logs-accent-fg: var(--pinokio-chrome-accent-fg-dark, #c2b28a);
4875
+ }
4264
4876
  .logs-page {
4265
4877
  display: flex;
4266
4878
  flex-direction: column;
@@ -4268,89 +4880,90 @@ header.navheader.transitioning {
4268
4880
  min-height: 0;
4269
4881
  height: var(--logs-pane-height, auto);
4270
4882
  overflow: hidden;
4883
+ background: var(--logs-bg);
4884
+ color: var(--logs-text);
4271
4885
  }
4272
4886
  .logs-page-header {
4273
4887
  flex: 0 0 auto;
4274
- display: flex;
4888
+ display: grid;
4889
+ grid-template-columns: minmax(0, 1fr) auto;
4275
4890
  align-items: center;
4276
4891
  justify-content: space-between;
4277
- gap: 10px;
4278
- min-height: 45px;
4279
- padding: 8px 10px;
4280
- border-bottom: 1px solid rgba(0,0,0,0.08);
4281
- background: rgba(255,255,255,0.65);
4282
- backdrop-filter: blur(6px);
4892
+ gap: 16px 24px;
4893
+ min-height: 0;
4894
+ padding: 12px 18px 14px;
4895
+ border-bottom: 1px solid var(--logs-border);
4896
+ background: transparent;
4897
+ backdrop-filter: none;
4283
4898
  }
4284
- body.dark .logs-page-header {
4285
- border-color: rgba(255,255,255,0.08);
4286
- background: rgba(15, 17, 21, 0.7);
4899
+ .logs-page-header-main {
4900
+ min-width: 0;
4901
+ max-width: 760px;
4902
+ }
4903
+ .logs-page-title {
4904
+ margin: 0;
4905
+ color: var(--logs-text);
4906
+ font-size: 22px;
4907
+ line-height: 1.12;
4908
+ letter-spacing: 0;
4909
+ font-weight: 760;
4910
+ }
4911
+ .logs-page-description {
4912
+ margin: 4px 0 0;
4913
+ max-width: 64ch;
4914
+ color: var(--logs-muted);
4915
+ font-size: 12px;
4916
+ line-height: 1.4;
4287
4917
  }
4288
4918
  .logs-page-switch {
4289
4919
  display: flex;
4290
4920
  align-items: center;
4291
4921
  min-width: 0;
4292
- }
4293
- .logs-raw-only-title {
4294
- display: inline-flex;
4295
- align-items: center;
4296
- gap: 8px;
4297
- color: rgba(15, 23, 42, 0.74);
4298
- font-size: 12px;
4299
- font-weight: 700;
4300
- }
4301
- body.dark .logs-raw-only-title {
4302
- color: rgba(248, 250, 252, 0.82);
4922
+ margin-top: 14px;
4303
4923
  }
4304
4924
  .logs-page-controls {
4305
4925
  display: flex;
4306
4926
  align-items: center;
4307
4927
  justify-content: flex-end;
4308
4928
  gap: 8px;
4309
- flex: 1 1 auto;
4310
4929
  min-width: 0;
4311
4930
  max-width: 100%;
4312
- margin-left: auto;
4931
+ margin-left: 0;
4932
+ padding-top: 0;
4313
4933
  }
4314
4934
  .logs-view-switch {
4315
4935
  display: inline-flex;
4316
4936
  align-items: center;
4317
- gap: 2px;
4318
- padding: 3px;
4319
- border: 1px solid rgba(15, 23, 42, 0.055);
4320
- border-radius: 7px;
4321
- background: rgba(15, 23, 42, 0.035);
4937
+ gap: 12px;
4938
+ padding: 0;
4939
+ border: 0;
4940
+ border-radius: 0;
4941
+ background: transparent;
4322
4942
  box-sizing: border-box;
4323
4943
  }
4324
- body.dark .logs-view-switch {
4325
- border-color: rgba(255, 255, 255, 0.075);
4326
- background: rgba(255, 255, 255, 0.045);
4327
- }
4328
4944
  .logs-view-tab {
4329
4945
  border: 0;
4330
- border-radius: 5px;
4331
- min-width: 78px;
4946
+ border-bottom: 1px solid transparent;
4947
+ border-radius: 0;
4948
+ min-width: 0;
4332
4949
  min-height: 26px;
4333
- padding: 0 10px;
4950
+ padding: 0 0 2px;
4334
4951
  background: transparent;
4335
- color: rgba(71, 85, 105, 0.85);
4952
+ color: var(--logs-muted);
4336
4953
  font-size: 12px;
4337
4954
  line-height: 1;
4338
- font-weight: 700;
4955
+ font-weight: 600;
4339
4956
  cursor: pointer;
4340
4957
  white-space: nowrap;
4341
4958
  }
4342
- .logs-view-tab.is-active {
4343
- background: rgba(255, 255, 255, 0.76);
4344
- color: #111827;
4345
- box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.055);
4346
- }
4347
- body.dark .logs-view-tab {
4348
- color: rgba(148, 163, 184, 0.8);
4959
+ .logs-view-tab:hover,
4960
+ .logs-view-tab:focus-visible {
4961
+ color: var(--logs-text);
4962
+ outline: none;
4349
4963
  }
4350
- body.dark .logs-view-tab.is-active {
4351
- background: rgba(255, 255, 255, 0.09);
4352
- color: rgba(248, 250, 252, 0.94);
4353
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
4964
+ .logs-view-tab.is-active {
4965
+ color: var(--logs-text);
4966
+ border-color: currentColor;
4354
4967
  }
4355
4968
  .logs-action-group {
4356
4969
  display: inline-flex;
@@ -4418,19 +5031,13 @@ body.dark .logs-icon-button:focus-visible {
4418
5031
  gap: 12px;
4419
5032
  padding: 14px 16px 16px;
4420
5033
  overflow: hidden;
4421
- background: rgba(248, 250, 252, 0.56);
4422
- }
4423
- body.dark .logs-latest-view {
4424
- background: rgba(0,0,0,0.18);
5034
+ background: transparent;
4425
5035
  }
4426
5036
  .logs-report-status {
4427
5037
  min-height: 18px;
4428
5038
  font-size: 12px;
4429
5039
  line-height: 1.4;
4430
- color: rgba(15, 23, 42, 0.64);
4431
- }
4432
- body.dark .logs-report-status {
4433
- color: rgba(248, 250, 252, 0.66);
5040
+ color: var(--logs-muted);
4434
5041
  }
4435
5042
  .logs-report-status.is-error {
4436
5043
  color: #c0392b;
@@ -4449,20 +5056,14 @@ body.dark .logs-report-status {
4449
5056
  display: grid;
4450
5057
  grid-template-columns: minmax(210px, 0.36fr) minmax(260px, 1fr) auto;
4451
5058
  align-items: center;
4452
- gap: 14px;
4453
- min-height: 70px;
4454
- padding: 12px 14px;
4455
- border: 1px solid rgba(186, 133, 28, 0.34);
4456
- border-top-color: rgba(186, 133, 28, 0.48);
4457
- border-radius: 8px;
4458
- background: #fff1c2;
4459
- box-shadow: 0 -1px 0 rgba(186, 133, 28, 0.16), 0 8px 24px rgba(89, 64, 16, 0.12);
4460
- }
4461
- body.dark .logs-community-footer {
4462
- border-color: rgba(245, 189, 75, 0.28);
4463
- border-top-color: rgba(245, 189, 75, 0.42);
4464
- background: rgba(54, 40, 18, 0.96);
4465
- box-shadow: 0 -1px 0 rgba(245, 189, 75, 0.12), 0 8px 24px rgba(0,0,0,0.28);
5059
+ gap: 12px;
5060
+ min-height: 56px;
5061
+ padding: 10px 0 0;
5062
+ border: 0;
5063
+ border-top: 1px solid var(--logs-border);
5064
+ border-radius: 0;
5065
+ background: transparent;
5066
+ box-shadow: none;
4466
5067
  }
4467
5068
  .logs-community-copy {
4468
5069
  min-width: 0;
@@ -4471,27 +5072,21 @@ body.dark .logs-community-footer {
4471
5072
  display: inline-flex;
4472
5073
  align-items: center;
4473
5074
  gap: 8px;
4474
- color: rgba(54, 39, 12, 0.96);
4475
- font-size: 14px;
5075
+ color: var(--logs-text);
5076
+ font-size: 13px;
4476
5077
  line-height: 1.2;
4477
- font-weight: 850;
5078
+ font-weight: 760;
4478
5079
  }
4479
5080
  .logs-community-heading i {
4480
5081
  color: inherit;
4481
5082
  font-size: 13px;
4482
5083
  }
4483
- body.dark .logs-community-heading {
4484
- color: rgba(248, 250, 252, 0.94);
4485
- }
4486
5084
  .logs-community-subtitle {
4487
5085
  margin-top: 4px;
4488
- color: rgba(75, 56, 19, 0.72);
5086
+ color: var(--logs-muted);
4489
5087
  font-size: 11px;
4490
5088
  line-height: 1.35;
4491
- font-weight: 650;
4492
- }
4493
- body.dark .logs-community-subtitle {
4494
- color: rgba(248, 250, 252, 0.58);
5089
+ font-weight: 560;
4495
5090
  }
4496
5091
  .logs-community-title-field {
4497
5092
  min-width: 0;
@@ -4502,53 +5097,41 @@ body.dark .logs-community-subtitle {
4502
5097
  }
4503
5098
  .logs-community-title-label {
4504
5099
  min-width: 0;
4505
- color: rgba(75, 56, 19, 0.68);
5100
+ color: var(--logs-muted);
4506
5101
  font-size: 10px;
4507
5102
  line-height: 1.2;
4508
5103
  font-weight: 800;
4509
5104
  text-transform: uppercase;
4510
5105
  white-space: nowrap;
4511
5106
  }
4512
- body.dark .logs-community-title-label {
4513
- color: rgba(248, 250, 252, 0.6);
4514
- }
4515
5107
  .logs-community-title-input {
4516
5108
  min-width: 0;
4517
5109
  width: 100%;
4518
5110
  height: 34px;
4519
- border: 1px solid rgba(121, 84, 19, 0.22);
5111
+ border: 1px solid var(--logs-border-strong);
4520
5112
  border-radius: 7px;
4521
5113
  padding: 0 11px;
4522
- background: rgba(255,255,255,0.78);
4523
- color: rgba(15, 23, 42, 0.92);
5114
+ background: transparent;
5115
+ color: var(--logs-text);
4524
5116
  font-size: 12px;
4525
5117
  font-weight: 700;
4526
5118
  line-height: 34px;
4527
5119
  outline: none;
4528
5120
  }
4529
5121
  .logs-community-title-input:focus {
4530
- border-color: rgba(154, 101, 8, 0.64);
4531
- box-shadow: 0 0 0 2px rgba(186, 133, 28, 0.2);
5122
+ border-color: var(--logs-border-strong);
5123
+ box-shadow: 0 0 0 2px var(--logs-soft-hover);
4532
5124
  }
4533
5125
  .logs-community-title-input:disabled {
4534
5126
  opacity: 0.62;
4535
5127
  cursor: not-allowed;
4536
5128
  }
4537
- body.dark .logs-community-title-input {
4538
- border-color: rgba(255,255,255,0.12);
4539
- background: rgba(255,255,255,0.08);
4540
- color: rgba(248, 250, 252, 0.92);
4541
- }
4542
- body.dark .logs-community-title-input:focus {
4543
- border-color: var(--pinokio-chrome-accent-bg-dark, rgba(255,255,255,0.36));
4544
- box-shadow: 0 0 0 2px rgba(255,255,255,0.09);
4545
- }
4546
5129
  .logs-community-title-note {
4547
5130
  display: none;
4548
5131
  max-width: 130px;
4549
5132
  overflow: hidden;
4550
5133
  text-overflow: ellipsis;
4551
- color: rgba(15, 23, 42, 0.52);
5134
+ color: var(--logs-muted);
4552
5135
  font-size: 11px;
4553
5136
  line-height: 1.2;
4554
5137
  font-weight: 700;
@@ -4557,9 +5140,6 @@ body.dark .logs-community-title-input:focus {
4557
5140
  .logs-community-title-note:not(:empty) {
4558
5141
  display: inline;
4559
5142
  }
4560
- body.dark .logs-community-title-note {
4561
- color: rgba(248, 250, 252, 0.54);
4562
- }
4563
5143
  .logs-community-submit {
4564
5144
  min-width: 154px;
4565
5145
  min-height: 38px;
@@ -4572,18 +5152,13 @@ body.dark .logs-community-title-note {
4572
5152
  .logs-redaction-pane {
4573
5153
  min-width: 0;
4574
5154
  min-height: 0;
4575
- border: 1px solid rgba(15, 23, 42, 0.1);
5155
+ border: 1px solid var(--logs-border);
4576
5156
  border-radius: 8px;
4577
- background: rgba(255,255,255,0.9);
5157
+ background: transparent;
4578
5158
  display: flex;
4579
5159
  flex-direction: column;
4580
5160
  overflow: hidden;
4581
5161
  }
4582
- body.dark .logs-report-pane,
4583
- body.dark .logs-redaction-pane {
4584
- border-color: rgba(255,255,255,0.1);
4585
- background: rgba(9, 11, 16, 0.94);
4586
- }
4587
5162
  .logs-latest-pane-header {
4588
5163
  flex: 0 0 auto;
4589
5164
  display: flex;
@@ -4592,35 +5167,25 @@ body.dark .logs-redaction-pane {
4592
5167
  gap: 10px;
4593
5168
  min-height: 42px;
4594
5169
  padding: 10px 12px;
4595
- border-bottom: 1px solid rgba(15, 23, 42, 0.08);
4596
- background: rgba(248, 250, 252, 0.74);
4597
- }
4598
- body.dark .logs-latest-pane-header {
4599
- border-bottom-color: rgba(255,255,255,0.08);
4600
- background: rgba(255,255,255,0.035);
5170
+ border-bottom: 1px solid var(--logs-border);
5171
+ background: transparent;
4601
5172
  }
4602
5173
  .logs-latest-pane-eyebrow {
4603
5174
  margin: 0;
4604
- color: rgba(15, 23, 42, 0.52);
5175
+ color: var(--logs-muted);
4605
5176
  font-size: 10px;
4606
5177
  line-height: 1.2;
4607
5178
  font-weight: 700;
4608
5179
  text-transform: uppercase;
4609
5180
  letter-spacing: 0;
4610
5181
  }
4611
- body.dark .logs-latest-pane-eyebrow {
4612
- color: rgba(248, 250, 252, 0.54);
4613
- }
4614
5182
  .logs-latest-pane-title {
4615
5183
  margin-top: 3px;
4616
- color: rgba(15, 23, 42, 0.92);
5184
+ color: var(--logs-text);
4617
5185
  font-size: 13px;
4618
5186
  line-height: 1.25;
4619
5187
  font-weight: 800;
4620
5188
  }
4621
- body.dark .logs-latest-pane-title {
4622
- color: rgba(248, 250, 252, 0.92);
4623
- }
4624
5189
  .logs-review-content {
4625
5190
  flex: 1 1 auto;
4626
5191
  min-height: 0;
@@ -4631,10 +5196,7 @@ body.dark .logs-latest-pane-title {
4631
5196
  .logs-review-section {
4632
5197
  flex: 0 0 auto;
4633
5198
  padding: 12px;
4634
- border-bottom: 1px solid rgba(15, 23, 42, 0.08);
4635
- }
4636
- body.dark .logs-review-section {
4637
- border-bottom-color: rgba(255,255,255,0.08);
5199
+ border-bottom: 1px solid var(--logs-border);
4638
5200
  }
4639
5201
  .logs-review-section--redactions {
4640
5202
  flex: 1 1 auto;
@@ -4652,33 +5214,25 @@ body.dark .logs-review-section {
4652
5214
  margin-bottom: 8px;
4653
5215
  }
4654
5216
  .logs-review-section-title {
4655
- color: rgba(15, 23, 42, 0.56);
5217
+ color: var(--logs-muted);
4656
5218
  font-size: 10px;
4657
5219
  line-height: 1.2;
4658
5220
  font-weight: 800;
4659
5221
  text-transform: uppercase;
4660
5222
  letter-spacing: 0;
4661
5223
  }
4662
- body.dark .logs-review-section-title {
4663
- color: rgba(248, 250, 252, 0.56);
4664
- }
4665
5224
  .logs-review-badge {
4666
5225
  flex: 0 0 auto;
4667
- border: 1px solid rgba(15, 23, 42, 0.1);
5226
+ border: 1px solid var(--logs-border);
4668
5227
  border-radius: 999px;
4669
5228
  padding: 3px 7px;
4670
- background: rgba(15, 23, 42, 0.04);
4671
- color: rgba(15, 23, 42, 0.72);
5229
+ background: var(--logs-soft);
5230
+ color: var(--logs-text);
4672
5231
  font-size: 11px;
4673
5232
  line-height: 1;
4674
5233
  font-weight: 800;
4675
5234
  white-space: nowrap;
4676
5235
  }
4677
- body.dark .logs-review-badge {
4678
- border-color: rgba(255,255,255,0.1);
4679
- background: rgba(255,255,255,0.06);
4680
- color: rgba(248, 250, 252, 0.76);
4681
- }
4682
5236
  .logs-review-filter-button {
4683
5237
  width: 100%;
4684
5238
  margin-top: 10px;
@@ -4900,10 +5454,10 @@ body.dark .logs-report-output {
4900
5454
  font-weight: 800;
4901
5455
  }
4902
5456
  .logs-mask-token.is-selected {
4903
- border-color: rgba(37, 99, 235, 0.72);
4904
- background: rgba(219, 234, 254, 0.9);
4905
- color: rgba(30, 64, 175, 0.98);
4906
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
5457
+ border-color: var(--logs-border-strong);
5458
+ background: var(--logs-soft-hover);
5459
+ color: var(--logs-text);
5460
+ box-shadow: 0 0 0 2px var(--logs-soft);
4907
5461
  }
4908
5462
  body.dark .logs-mask-token {
4909
5463
  border-color: rgba(251, 113, 133, 0.42);
@@ -4911,10 +5465,10 @@ body.dark .logs-mask-token {
4911
5465
  color: rgba(254, 205, 211, 0.96);
4912
5466
  }
4913
5467
  body.dark .logs-mask-token.is-selected {
4914
- border-color: rgba(147, 197, 253, 0.66);
4915
- background: rgba(30, 64, 175, 0.36);
4916
- color: rgba(219, 234, 254, 0.98);
4917
- box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.14);
5468
+ border-color: var(--logs-border-strong);
5469
+ background: var(--logs-soft-hover);
5470
+ color: var(--logs-text);
5471
+ box-shadow: 0 0 0 2px var(--logs-soft);
4918
5472
  }
4919
5473
  .logs-unmasked-token {
4920
5474
  border: 1px solid rgba(15, 23, 42, 0.14);
@@ -4924,18 +5478,18 @@ body.dark .logs-mask-token.is-selected {
4924
5478
  color: inherit;
4925
5479
  }
4926
5480
  .logs-unmasked-token.is-selected {
4927
- border-color: rgba(37, 99, 235, 0.62);
4928
- background: rgba(219, 234, 254, 0.68);
4929
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
5481
+ border-color: var(--logs-border-strong);
5482
+ background: var(--logs-soft-hover);
5483
+ box-shadow: 0 0 0 2px var(--logs-soft);
4930
5484
  }
4931
5485
  body.dark .logs-unmasked-token {
4932
5486
  border-color: rgba(255,255,255,0.14);
4933
5487
  background: rgba(255,255,255,0.06);
4934
5488
  }
4935
5489
  body.dark .logs-unmasked-token.is-selected {
4936
- border-color: rgba(147, 197, 253, 0.58);
4937
- background: rgba(30, 64, 175, 0.28);
4938
- box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.12);
5490
+ border-color: var(--logs-border-strong);
5491
+ background: var(--logs-soft-hover);
5492
+ box-shadow: 0 0 0 2px var(--logs-soft);
4939
5493
  }
4940
5494
  .logs-redaction-filters {
4941
5495
  flex: 0 0 auto;
@@ -4958,18 +5512,18 @@ body.dark .logs-unmasked-token.is-selected {
4958
5512
  white-space: nowrap;
4959
5513
  }
4960
5514
  .logs-redaction-filter.is-active {
4961
- border-color: rgba(37, 99, 235, 0.32);
4962
- background: rgba(37, 99, 235, 0.08);
4963
- color: rgba(30, 64, 175, 0.96);
5515
+ border-color: var(--logs-border-strong);
5516
+ background: var(--logs-soft);
5517
+ color: var(--logs-text);
4964
5518
  }
4965
5519
  body.dark .logs-redaction-filter {
4966
5520
  border-color: rgba(255,255,255,0.1);
4967
5521
  color: rgba(248, 250, 252, 0.68);
4968
5522
  }
4969
5523
  body.dark .logs-redaction-filter.is-active {
4970
- border-color: rgba(147, 197, 253, 0.28);
4971
- background: rgba(96, 165, 250, 0.14);
4972
- color: rgba(219, 234, 254, 0.96);
5524
+ border-color: var(--logs-border-strong);
5525
+ background: var(--logs-soft);
5526
+ color: var(--logs-text);
4973
5527
  }
4974
5528
  .logs-redaction-list {
4975
5529
  flex: 1 1 auto;
@@ -5013,8 +5567,8 @@ body.dark .logs-redaction-empty {
5013
5567
  outline: none;
5014
5568
  }
5015
5569
  .logs-redaction-row.is-selected {
5016
- border-color: rgba(37, 99, 235, 0.2);
5017
- background: rgba(37, 99, 235, 0.07);
5570
+ border-color: var(--logs-border-strong);
5571
+ background: var(--logs-soft-hover);
5018
5572
  }
5019
5573
  body.dark .logs-redaction-row:hover,
5020
5574
  body.dark .logs-redaction-row:focus-visible {
@@ -5022,8 +5576,8 @@ body.dark .logs-redaction-row:focus-visible {
5022
5576
  background: rgba(255,255,255,0.05);
5023
5577
  }
5024
5578
  body.dark .logs-redaction-row.is-selected {
5025
- border-color: rgba(147, 197, 253, 0.22);
5026
- background: rgba(96, 165, 250, 0.12);
5579
+ border-color: var(--logs-border-strong);
5580
+ background: var(--logs-soft-hover);
5027
5581
  }
5028
5582
  .logs-redaction-row-top {
5029
5583
  display: flex;
@@ -5102,22 +5656,22 @@ body.dark .logs-redaction-label {
5102
5656
  transition: transform 0.16s ease;
5103
5657
  }
5104
5658
  .logs-redaction-toggle input:checked + .logs-redaction-toggle-track {
5105
- border-color: rgba(37, 99, 235, 0.36);
5106
- background: rgba(37, 99, 235, 0.88);
5659
+ border-color: var(--logs-accent-bg);
5660
+ background: var(--logs-accent-bg);
5107
5661
  }
5108
5662
  .logs-redaction-toggle input:checked + .logs-redaction-toggle-track::after {
5109
5663
  transform: translateX(12px);
5110
5664
  }
5111
5665
  .logs-redaction-toggle input:focus-visible + .logs-redaction-toggle-track {
5112
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
5666
+ box-shadow: 0 0 0 2px var(--logs-soft-hover);
5113
5667
  }
5114
5668
  body.dark .logs-redaction-toggle-track {
5115
5669
  border-color: rgba(255,255,255,0.16);
5116
5670
  background: rgba(255,255,255,0.12);
5117
5671
  }
5118
5672
  body.dark .logs-redaction-toggle input:checked + .logs-redaction-toggle-track {
5119
- border-color: rgba(147, 197, 253, 0.34);
5120
- background: rgba(96, 165, 250, 0.72);
5673
+ border-color: var(--logs-accent-bg);
5674
+ background: var(--logs-accent-bg);
5121
5675
  }
5122
5676
  .logs-redaction-context {
5123
5677
  margin-top: 6px;
@@ -5157,15 +5711,16 @@ body.dark .logs-redaction-context {
5157
5711
  width: var(--logs-sidebar-width, 320px);
5158
5712
  min-width: var(--logs-sidebar-min-width, 220px);
5159
5713
  max-width: var(--logs-sidebar-max-width, 560px);
5160
- padding: 20px;
5714
+ padding: 16px 14px 14px;
5161
5715
  box-sizing: border-box;
5162
5716
  display: flex;
5163
5717
  flex-direction: column;
5164
- gap: 16px;
5165
- background: rgba(0,0,0,0.02);
5718
+ gap: 12px;
5719
+ border-right: 1px solid var(--logs-border);
5720
+ background: transparent;
5166
5721
  max-height: var(--logs-pane-height, none);
5167
5722
  min-height: 0;
5168
- overflow: auto;
5723
+ overflow: hidden;
5169
5724
  }
5170
5725
  #logs-root.logs-sidebar-collapsed .logs-sidebar {
5171
5726
  flex: 0 0 0;
@@ -5181,23 +5736,21 @@ body.dark .logs-redaction-context {
5181
5736
  #logs-root.logs-sidebar-collapsed .logs-tree-wrapper {
5182
5737
  border-width: 0;
5183
5738
  }
5184
- body.dark .logs-sidebar {
5185
- border-color: var(--dark-thin);
5186
- background: rgba(255,255,255,0.04);
5187
- }
5188
- .logs-sidebar-header h2 {
5189
- margin: 4px 0 0;
5190
- font-size: 22px;
5739
+ .logs-sidebar-header {
5740
+ flex: 0 0 auto;
5741
+ display: flex;
5742
+ align-items: flex-start;
5743
+ justify-content: space-between;
5744
+ gap: 12px;
5745
+ min-width: 0;
5191
5746
  }
5192
- .logs-sidebar-eyebrow {
5747
+ .logs-sidebar-header h2 {
5193
5748
  margin: 0;
5194
- text-transform: uppercase;
5195
- font-size: 12px;
5196
- letter-spacing: 0.08em;
5197
- color: rgba(0,0,0,0.5);
5198
- }
5199
- body.dark .logs-sidebar-eyebrow {
5200
- color: rgba(255,255,255,0.6);
5749
+ color: var(--logs-text);
5750
+ font-size: 15px;
5751
+ line-height: 1.2;
5752
+ letter-spacing: -0.01em;
5753
+ font-weight: 760;
5201
5754
  }
5202
5755
  .logs-zip-actions {
5203
5756
  display: flex;
@@ -5205,46 +5758,41 @@ body.dark .logs-sidebar-eyebrow {
5205
5758
  gap: 10px;
5206
5759
  }
5207
5760
  .logs-zip-status {
5208
- font-size: 13px;
5209
- color: rgba(0,0,0,0.6);
5761
+ flex: 0 1 auto;
5762
+ min-width: 0;
5763
+ color: var(--logs-muted);
5764
+ font-size: 11px;
5765
+ line-height: 1.3;
5766
+ text-align: right;
5210
5767
  }
5211
5768
  .logs-zip-status.is-error {
5212
5769
  color: #c0392b;
5213
5770
  }
5214
- body.dark .logs-zip-status {
5215
- color: rgba(255,255,255,0.6);
5216
- }
5217
5771
  body.dark .logs-zip-status.is-error {
5218
5772
  color: #ff8373;
5219
5773
  }
5220
- body.dark .logs-flat-button {
5221
- color: white;
5222
- }
5223
5774
  .logs-primary-button,
5224
5775
  .logs-secondary-button,
5225
5776
  .logs-flat-button {
5226
- border: none;
5777
+ border: 1px solid var(--logs-border-strong);
5227
5778
  border-radius: 7px;
5228
- padding: 4px 10px;
5229
- font-size: 12px;
5230
- font-weight: 700;
5779
+ padding: 0 9px;
5780
+ font-size: 10px;
5781
+ font-weight: 600;
5231
5782
  line-height: 1;
5232
- min-height: 28px;
5783
+ min-height: 26px;
5233
5784
  display: inline-flex;
5234
5785
  align-items: center;
5235
- gap: 6px;
5786
+ gap: 5px;
5236
5787
  cursor: pointer;
5237
5788
  justify-content: center;
5238
5789
  white-space: nowrap;
5239
- transition: background 0.2s ease, color 0.2s ease;
5790
+ transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
5240
5791
  }
5241
5792
  .logs-primary-button {
5242
- background: var(--pinokio-chrome-accent-bg-light, var(--light-link-color));
5243
- color: var(--pinokio-chrome-accent-fg-light, white);
5244
- }
5245
- body.dark .logs-primary-button {
5246
- background: var(--pinokio-chrome-accent-bg-dark, rgba(255,255,255,0.15));
5247
- color: var(--pinokio-chrome-accent-fg-dark, white);
5793
+ border-color: var(--logs-accent-bg);
5794
+ background: var(--logs-accent-bg);
5795
+ color: var(--logs-accent-fg);
5248
5796
  }
5249
5797
  .logs-primary-button:disabled,
5250
5798
  .logs-secondary-button:disabled,
@@ -5253,19 +5801,20 @@ body.dark .logs-primary-button {
5253
5801
  cursor: not-allowed;
5254
5802
  }
5255
5803
  .logs-secondary-button {
5256
- border: 1px solid var(--light-thin);
5257
5804
  background: transparent;
5258
- color: inherit;
5805
+ color: var(--logs-text);
5259
5806
  text-decoration: none;
5260
5807
  }
5261
- body.dark .logs-secondary-button {
5262
- border-color: var(--dark-thin);
5263
- }
5264
5808
  .logs-flat-button {
5265
- background: rgba(0,0,0,0.04);
5809
+ background: transparent;
5810
+ color: var(--logs-text);
5266
5811
  }
5267
- body.dark .logs-flat-button {
5268
- background: rgba(255,255,255,0.08);
5812
+ .logs-secondary-button:hover,
5813
+ .logs-secondary-button:focus-visible,
5814
+ .logs-flat-button:hover,
5815
+ .logs-flat-button:focus-visible {
5816
+ background: var(--logs-soft);
5817
+ outline: none;
5269
5818
  }
5270
5819
  .logs-primary-button.logs-community-submit {
5271
5820
  min-width: 154px;
@@ -5291,29 +5840,26 @@ body.dark .logs-flat-button {
5291
5840
  gap: 6px;
5292
5841
  }
5293
5842
  .logs-tree-hint {
5294
- margin: 0;
5843
+ margin-top: 3px;
5844
+ color: var(--logs-muted);
5295
5845
  font-size: 12px;
5296
- color: rgba(0,0,0,0.5);
5297
- }
5298
- body.dark .logs-tree-hint {
5299
- color: rgba(255,255,255,0.6);
5846
+ line-height: 1.35;
5300
5847
  }
5301
5848
  .logs-tree-wrapper {
5302
5849
  flex: 1;
5303
- border: 1px solid var(--light-thin);
5304
- border-radius: 14px;
5305
- padding: 10px;
5850
+ min-height: 0;
5851
+ border: 0;
5852
+ border-top: 1px solid var(--logs-border);
5853
+ border-radius: 0;
5854
+ padding: 10px 0 0;
5306
5855
  overflow: hidden;
5307
- background: white;
5308
- }
5309
- body.dark .logs-tree-wrapper {
5310
- border-color: var(--dark-thin);
5311
- background: rgba(255,255,255,0.02);
5856
+ background: transparent;
5312
5857
  }
5313
5858
  .logs-tree {
5314
5859
  max-height: 100%;
5315
5860
  overflow-y: auto;
5316
- font-size: 14px;
5861
+ padding-right: 2px;
5862
+ font-size: 13px;
5317
5863
  }
5318
5864
  .logs-branch {
5319
5865
  margin: 0;
@@ -5321,11 +5867,14 @@ body.dark .logs-tree-wrapper {
5321
5867
  .logs-branch-summary {
5322
5868
  display: flex;
5323
5869
  align-items: center;
5324
- gap: 8px;
5325
- padding: 4px 6px;
5870
+ gap: 7px;
5871
+ min-height: 28px;
5872
+ padding: 0 7px;
5326
5873
  cursor: pointer;
5327
- border-radius: 8px;
5874
+ border-radius: 6px;
5328
5875
  list-style: none;
5876
+ color: var(--logs-text);
5877
+ font-weight: 650;
5329
5878
  }
5330
5879
  .logs-branch-summary::-webkit-details-marker {
5331
5880
  display: none;
@@ -5336,86 +5885,80 @@ body.dark .logs-tree-wrapper {
5336
5885
  .logs-branch-chevron {
5337
5886
  width: 14px;
5338
5887
  text-align: center;
5339
- color: rgba(0,0,0,0.4);
5888
+ color: var(--logs-faint);
5340
5889
  transition: transform 0.2s ease;
5341
5890
  }
5342
- body.dark .logs-branch-chevron {
5343
- color: rgba(255,255,255,0.4);
5891
+ .logs-branch-summary:hover,
5892
+ .logs-branch-summary:focus-visible {
5893
+ background: var(--logs-soft);
5894
+ outline: none;
5344
5895
  }
5345
5896
  .logs-branch-icon {
5346
- color: royalblue;
5347
- }
5348
- body.dark .logs-branch-icon {
5349
- color: rgba(255,255,255,0.7);
5897
+ color: var(--logs-muted);
5350
5898
  }
5351
5899
  .logs-children {
5352
- margin-left: 18px;
5353
- padding-left: 12px;
5354
- border-left: 1px solid rgba(0,0,0,0.08);
5355
- }
5356
- body.dark .logs-children {
5357
- border-color: rgba(255,255,255,0.08);
5900
+ margin-left: 15px;
5901
+ padding-left: 10px;
5902
+ border-left: 1px solid var(--logs-border);
5358
5903
  }
5359
5904
  .logs-tree-message {
5905
+ color: var(--logs-muted);
5360
5906
  font-size: 12px;
5361
5907
  padding: 4px 0;
5362
- color: rgba(0,0,0,0.6);
5363
5908
  }
5364
5909
  .logs-tree-message.is-error {
5365
5910
  color: #c0392b;
5366
5911
  }
5367
- body.dark .logs-tree-message {
5368
- color: rgba(255,255,255,0.6);
5369
- }
5370
5912
  body.dark .logs-tree-message.is-error {
5371
5913
  color: #ff8373;
5372
5914
  }
5373
- body.dark .logs-file {
5374
- color: white;
5375
- }
5376
5915
  .logs-file {
5377
5916
  width: 100%;
5378
- border: none;
5379
- background: none;
5917
+ border: 1px solid transparent;
5918
+ background: transparent;
5919
+ color: var(--logs-text);
5380
5920
  text-align: left;
5381
- padding: 4px 6px;
5382
- border-radius: 8px;
5921
+ min-height: 28px;
5922
+ padding: 0 7px;
5923
+ border-radius: 6px;
5383
5924
  display: flex;
5384
5925
  align-items: center;
5385
- gap: 8px;
5926
+ gap: 7px;
5386
5927
  cursor: pointer;
5387
- font-size: 14px;
5928
+ font-size: 13px;
5929
+ font-weight: 560;
5930
+ }
5931
+ .logs-file:hover {
5932
+ background: var(--logs-soft);
5388
5933
  }
5389
- .logs-file:hover,
5390
5934
  .logs-file.is-active {
5391
- background: royalblue;
5935
+ border-color: var(--logs-border-strong);
5936
+ background: var(--logs-soft-hover);
5937
+ color: var(--logs-text);
5938
+ font-weight: 720;
5392
5939
  }
5393
- body.dark .logs-file:hover,
5394
- body.dark .logs-file.is-active {
5395
- background: royalblue;
5940
+ .logs-file:focus-visible {
5941
+ border-color: var(--logs-border-strong);
5942
+ outline: none;
5396
5943
  }
5397
5944
  .logs-file-icon {
5398
- color: rgba(0,0,0,0.5);
5399
- }
5400
- body.dark .logs-file-icon {
5401
- color: rgba(255,255,255,0.5);
5945
+ color: var(--logs-muted);
5402
5946
  }
5403
5947
  .logs-file-meta {
5404
5948
  margin-left: auto;
5405
- font-size: 12px;
5406
- color: rgba(0,0,0,0.5);
5407
- }
5408
- body.dark .logs-file-meta {
5409
- color: rgba(255,255,255,0.5);
5949
+ color: var(--logs-muted);
5950
+ font-size: 11px;
5951
+ font-weight: 520;
5410
5952
  }
5411
5953
  .logs-main {
5412
5954
  flex: 1;
5413
5955
  min-width: 0;
5414
5956
  min-height: 0;
5415
5957
  max-height: var(--logs-pane-height, none);
5416
- overflow: auto;
5958
+ overflow: hidden;
5417
5959
  display: flex;
5418
5960
  flex-direction: column;
5961
+ background: transparent;
5419
5962
  }
5420
5963
  #logs-root.logs-sidebar-collapsed .logs-main {
5421
5964
  max-height: var(--logs-pane-height, none);
@@ -5426,9 +5969,7 @@ body.dark .logs-file-meta {
5426
5969
  flex-direction: column;
5427
5970
  flex: 1;
5428
5971
  min-height: 0;
5429
- }
5430
- body.dark .logs-viewer-panel {
5431
- background: rgba(255,255,255,0.03);
5972
+ background: transparent;
5432
5973
  }
5433
5974
  .logs-page--error {
5434
5975
  align-items: center;
@@ -5463,128 +6004,129 @@ body.dark .logs-empty-icon {
5463
6004
  margin-top: 20px;
5464
6005
  }
5465
6006
  .logs-resizer {
5466
- flex: 0 0 12px;
5467
- margin: 0 6px;
6007
+ flex: 0 0 10px;
6008
+ margin: 0;
5468
6009
  cursor: col-resize;
5469
6010
  display: flex;
5470
6011
  align-items: center;
5471
6012
  justify-content: center;
5472
6013
  position: relative;
5473
6014
  touch-action: none;
6015
+ background: transparent;
5474
6016
  }
5475
6017
  .logs-resizer::before {
5476
6018
  content: '';
5477
- width: 4px;
5478
- border-radius: 999px;
5479
- background: rgba(0,0,0,0.15);
5480
- height: 60%;
5481
- }
5482
- body.dark .logs-resizer::before {
5483
- background: rgba(255,255,255,0.25);
6019
+ width: 1px;
6020
+ border-radius: 0;
6021
+ background: var(--logs-border);
6022
+ height: 100%;
5484
6023
  }
5485
6024
  #logs-root.logs-sidebar-collapsed .logs-resizer::before {
5486
6025
  display: none;
5487
6026
  }
5488
6027
  .logs-resizer-toggle {
5489
6028
  position: absolute;
5490
- top: 8px;
6029
+ top: 10px;
5491
6030
  left: 50%;
5492
6031
  transform: translate(-50%, 0);
5493
- width: 28px;
5494
- height: 28px;
5495
- border: none;
5496
- background: rgba(0,0,0,0.05);
5497
- color: rgba(0,0,0,0.6);
6032
+ width: 24px;
6033
+ height: 24px;
6034
+ border: 1px solid var(--logs-border);
6035
+ border-radius: 6px;
6036
+ background: var(--logs-bg);
6037
+ color: var(--logs-muted);
5498
6038
  display: inline-flex;
5499
6039
  align-items: center;
5500
6040
  justify-content: center;
5501
6041
  pointer-events: auto;
5502
6042
  cursor: pointer;
5503
- transition: background 0.2s ease, color 0.2s ease;
5504
- }
5505
- .logs-resizer:hover .logs-resizer-toggle {
5506
- background: royalblue;
5507
- color: #fff;
5508
- }
5509
- body.dark .logs-resizer-toggle {
5510
- background: rgba(255,255,255,0.08);
5511
- color: rgba(255,255,255,0.75);
6043
+ font-size: 11px;
6044
+ transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
5512
6045
  }
6046
+ .logs-resizer:hover .logs-resizer-toggle,
6047
+ .logs-resizer-toggle:focus-visible,
5513
6048
  body.dark .logs-resizer:hover .logs-resizer-toggle {
5514
- background: rgba(255,255,255,0.18);
5515
- color: rgba(255,255,255,0.95);
6049
+ border-color: var(--logs-border-strong);
6050
+ background: var(--logs-soft);
6051
+ color: var(--logs-text);
6052
+ outline: none;
5516
6053
  }
5517
6054
  #logs-root.logs-sidebar-collapsed .logs-resizer {
5518
- margin-left: 12px;
6055
+ margin-left: 0;
5519
6056
  }
5520
6057
  #logs-root.logs-sidebar-collapsed .logs-resizer-toggle i {
5521
6058
  transform: rotate(180deg);
5522
6059
  }
5523
6060
  .logs-viewer-header {
5524
- padding: 16px;
5525
- border-bottom: 1px solid var(--light-thin);
6061
+ flex: 0 0 auto;
6062
+ min-height: 52px;
6063
+ padding: 10px 16px;
6064
+ border-bottom: 1px solid var(--logs-border);
5526
6065
  display: flex;
6066
+ align-items: center;
5527
6067
  justify-content: space-between;
5528
- gap: 16px;
5529
- flex-wrap: wrap;
5530
- }
5531
- body.dark .logs-viewer-header {
5532
- border-color: var(--dark-thin);
6068
+ gap: 14px;
6069
+ flex-wrap: nowrap;
5533
6070
  }
5534
6071
  .logs-viewer-eyebrow {
5535
6072
  margin: 0;
5536
6073
  text-transform: uppercase;
5537
- font-size: 12px;
6074
+ color: var(--logs-muted);
6075
+ font-size: 10px;
6076
+ font-weight: 760;
5538
6077
  letter-spacing: 0.08em;
5539
- color: rgba(0,0,0,0.5);
5540
- }
5541
- body.dark .logs-viewer-eyebrow {
5542
- color: rgba(255,255,255,0.6);
6078
+ line-height: 1.2;
5543
6079
  }
5544
6080
  .logs-viewer-path {
6081
+ margin-top: 2px;
6082
+ color: var(--logs-text);
5545
6083
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
5546
- font-size: 13px;
6084
+ font-size: 12px;
6085
+ line-height: 1.35;
5547
6086
  word-break: break-all;
5548
6087
  }
5549
6088
  .logs-viewer-controls {
6089
+ flex: 0 0 auto;
5550
6090
  display: flex;
5551
6091
  align-items: center;
5552
- gap: 10px;
6092
+ gap: 8px;
5553
6093
  }
5554
6094
  .logs-autoscroll-toggle {
5555
6095
  display: inline-flex;
5556
6096
  align-items: center;
5557
- gap: 6px;
5558
- font-size: 13px;
6097
+ gap: 7px;
6098
+ color: var(--logs-text);
6099
+ font-size: 12px;
6100
+ font-weight: 560;
5559
6101
  cursor: pointer;
6102
+ white-space: nowrap;
5560
6103
  }
5561
6104
  .logs-autoscroll-toggle input {
5562
- accent-color: royalblue;
6105
+ accent-color: var(--logs-accent-bg);
5563
6106
  }
5564
6107
  .logs-viewer-status {
6108
+ flex: 0 0 auto;
6109
+ min-height: 33px;
5565
6110
  padding: 8px 16px;
5566
- font-size: 13px;
5567
- color: rgba(0,0,0,0.6);
5568
- border-bottom: 1px solid var(--light-thin);
5569
- }
5570
- body.dark .logs-viewer-status {
5571
- color: rgba(255,255,255,0.7);
5572
- border-color: var(--dark-thin);
6111
+ color: var(--logs-muted);
6112
+ font-size: 12px;
6113
+ line-height: 1.35;
6114
+ border-bottom: 1px solid var(--logs-border);
5573
6115
  }
5574
6116
  .logs-viewer-output {
5575
6117
  flex: 1;
6118
+ min-height: 0;
5576
6119
  margin: 0;
5577
6120
  padding: 16px;
5578
6121
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
5579
6122
  font-size: 13px;
6123
+ line-height: 1.45;
5580
6124
  white-space: pre-wrap;
5581
6125
  word-break: break-word;
5582
- overflow-y: auto;
5583
- background: rgba(0,0,0,0.02);
5584
- }
5585
- body.dark .logs-viewer-output {
5586
- background: rgba(0,0,0,0.3);
5587
- color: rgba(255,255,255,0.85);
6126
+ overflow: auto;
6127
+ border: 0;
6128
+ background: transparent;
6129
+ color: var(--logs-text);
5588
6130
  }
5589
6131
  #status-window {
5590
6132
  display: none !important;
@@ -5639,16 +6181,18 @@ body.dark .logs-viewer-output {
5639
6181
  }
5640
6182
  @media (max-width: 720px) {
5641
6183
  .logs-page-header {
5642
- align-items: flex-start;
5643
- flex-direction: column;
6184
+ grid-template-columns: 1fr;
6185
+ gap: 14px;
6186
+ padding: 4px 14px 16px;
5644
6187
  }
5645
6188
  .logs-page-switch {
5646
6189
  width: 100%;
5647
6190
  }
5648
6191
  .logs-page-controls {
5649
- justify-content: flex-end;
6192
+ justify-content: flex-start;
5650
6193
  flex-wrap: wrap;
5651
6194
  width: 100%;
6195
+ padding-top: 0;
5652
6196
  }
5653
6197
  .logs-view-switch {
5654
6198
  width: 100%;
@@ -5682,3 +6226,380 @@ body.dark .logs-viewer-output {
5682
6226
  justify-content: space-between;
5683
6227
  }
5684
6228
  }
6229
+
6230
+ /* Minimal SweetAlert normalization for generic QR/form modals. */
6231
+ .swal2-popup.min-popup,
6232
+ .swal2-popup.min-popup2 {
6233
+ width: min(360px, calc(100vw - 32px)) !important;
6234
+ padding: 20px !important;
6235
+ border: 1px solid rgba(24, 24, 27, 0.12) !important;
6236
+ border-radius: 8px !important;
6237
+ background: #ffffff !important;
6238
+ color: #18181b !important;
6239
+ box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
6240
+ }
6241
+
6242
+ body.dark .swal2-popup.min-popup,
6243
+ body.dark .swal2-popup.min-popup2 {
6244
+ border-color: rgba(255, 255, 255, 0.1) !important;
6245
+ background: #1b1c1d !important;
6246
+ color: rgba(250, 250, 250, 0.94) !important;
6247
+ box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
6248
+ }
6249
+
6250
+ .swal2-title.min-title {
6251
+ color: inherit !important;
6252
+ font-size: 16px !important;
6253
+ line-height: 1.25 !important;
6254
+ font-weight: 600 !important;
6255
+ margin: 0 0 12px !important;
6256
+ padding: 0 !important;
6257
+ }
6258
+
6259
+ .min-modal {
6260
+ color: #71717a !important;
6261
+ font-size: 13px !important;
6262
+ line-height: 1.45 !important;
6263
+ }
6264
+
6265
+ body.dark .min-modal {
6266
+ color: rgba(229, 231, 235, 0.62) !important;
6267
+ }
6268
+
6269
+ .swal2-popup.min-popup a,
6270
+ .swal2-popup.min-popup2 a {
6271
+ color: inherit !important;
6272
+ text-decoration-color: rgba(82, 82, 91, 0.35);
6273
+ }
6274
+
6275
+ .swal2-popup.min-popup img,
6276
+ .swal2-popup.min-popup2 img {
6277
+ max-width: 180px;
6278
+ border-radius: 6px;
6279
+ }
6280
+
6281
+ .swal2-popup.pinokio-input-modal {
6282
+ --pinokio-input-modal-surface: #ffffff;
6283
+ --pinokio-input-modal-surface-muted: rgba(24, 24, 27, 0.03);
6284
+ --pinokio-input-modal-border: rgba(24, 24, 27, 0.12);
6285
+ --pinokio-input-modal-border-strong: rgba(24, 24, 27, 0.16);
6286
+ --pinokio-input-modal-text: #18181b;
6287
+ --pinokio-input-modal-title: #18181b;
6288
+ --pinokio-input-modal-muted: #71717a;
6289
+ --pinokio-input-modal-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
6290
+ --pinokio-input-modal-focus-border: rgba(24, 24, 27, 0.42);
6291
+ --pinokio-input-modal-focus-ring: rgba(24, 24, 27, 0.12);
6292
+ border-radius: 8px !important;
6293
+ }
6294
+
6295
+ body.dark .swal2-popup.pinokio-input-modal {
6296
+ --pinokio-input-modal-surface: #1b1c1d;
6297
+ --pinokio-input-modal-surface-muted: rgba(255, 255, 255, 0.04);
6298
+ --pinokio-input-modal-border: rgba(255, 255, 255, 0.1);
6299
+ --pinokio-input-modal-border-strong: rgba(255, 255, 255, 0.14);
6300
+ --pinokio-input-modal-text: rgba(250, 250, 250, 0.94);
6301
+ --pinokio-input-modal-title: rgba(250, 250, 250, 0.94);
6302
+ --pinokio-input-modal-muted: rgba(229, 231, 235, 0.62);
6303
+ --pinokio-input-modal-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
6304
+ --pinokio-input-modal-focus-border: rgba(255, 255, 255, 0.38);
6305
+ --pinokio-input-modal-focus-ring: rgba(255, 255, 255, 0.14);
6306
+ }
6307
+
6308
+ .pinokio-input-modal-checkbox-input {
6309
+ accent-color: var(--pinokio-input-modal-title) !important;
6310
+ }
6311
+
6312
+ .swal2-popup.pinokio-input-modal .pinokio-input-modal-control {
6313
+ border-color: var(--pinokio-input-modal-border-strong) !important;
6314
+ background: var(--pinokio-input-modal-surface-muted) !important;
6315
+ color: var(--pinokio-input-modal-text) !important;
6316
+ }
6317
+
6318
+ .swal2-popup.pinokio-input-modal .pinokio-input-modal-control:focus {
6319
+ border-color: var(--pinokio-input-modal-focus-border) !important;
6320
+ background: var(--pinokio-input-modal-surface) !important;
6321
+ box-shadow: 0 0 0 3px var(--pinokio-input-modal-focus-ring) !important;
6322
+ }
6323
+
6324
+ .pinokio-input-modal-actions.swal2-actions .swal2-loader {
6325
+ border-color: var(--pinokio-input-modal-title) transparent var(--pinokio-input-modal-title) transparent !important;
6326
+ }
6327
+
6328
+ .pinokio-input-modal-confirm.swal2-confirm {
6329
+ border-color: var(--pinokio-input-modal-title) !important;
6330
+ background: var(--pinokio-input-modal-title) !important;
6331
+ color: var(--pinokio-input-modal-surface) !important;
6332
+ }
6333
+
6334
+ .pinokio-input-modal-confirm.swal2-confirm:hover,
6335
+ .pinokio-input-modal-confirm.swal2-confirm:focus-visible {
6336
+ border-color: var(--pinokio-input-modal-text) !important;
6337
+ background: var(--pinokio-input-modal-text) !important;
6338
+ color: var(--pinokio-input-modal-surface) !important;
6339
+ outline: none !important;
6340
+ }
6341
+
6342
+ .pinokio-modern-close.swal2-close {
6343
+ width: 28px !important;
6344
+ height: 28px !important;
6345
+ margin: 0 !important;
6346
+ border-radius: 6px !important;
6347
+ border: 1px solid transparent !important;
6348
+ background: transparent !important;
6349
+ color: #71717a !important;
6350
+ font-family: inherit !important;
6351
+ font-size: 18px !important;
6352
+ line-height: 1 !important;
6353
+ box-shadow: none !important;
6354
+ }
6355
+
6356
+ body.dark .pinokio-modern-close.swal2-close {
6357
+ color: rgba(229, 231, 235, 0.58) !important;
6358
+ }
6359
+
6360
+ .pinokio-modern-close.swal2-close:hover,
6361
+ .pinokio-modern-close.swal2-close:focus-visible {
6362
+ background: rgba(24, 24, 27, 0.06) !important;
6363
+ color: #18181b !important;
6364
+ outline: none !important;
6365
+ }
6366
+
6367
+ body.dark .pinokio-modern-close.swal2-close:hover,
6368
+ body.dark .pinokio-modern-close.swal2-close:focus-visible {
6369
+ background: rgba(255, 255, 255, 0.07) !important;
6370
+ color: rgba(250, 250, 250, 0.94) !important;
6371
+ }
6372
+
6373
+ /* Baseline for older SweetAlert dialogs that do not yet opt into a named modal class. */
6374
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) {
6375
+ width: min(520px, calc(100vw - 32px)) !important;
6376
+ padding: 20px !important;
6377
+ border: 1px solid rgba(24, 24, 27, 0.12) !important;
6378
+ border-radius: 8px !important;
6379
+ background: #ffffff !important;
6380
+ color: #18181b !important;
6381
+ box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
6382
+ }
6383
+
6384
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) {
6385
+ border-color: rgba(255, 255, 255, 0.1) !important;
6386
+ background: #1b1c1d !important;
6387
+ color: rgba(250, 250, 250, 0.94) !important;
6388
+ box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
6389
+ }
6390
+
6391
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-title {
6392
+ margin: 0 32px 12px 0 !important;
6393
+ padding: 0 !important;
6394
+ text-align: left !important;
6395
+ color: inherit !important;
6396
+ font-size: 16px !important;
6397
+ line-height: 1.25 !important;
6398
+ font-weight: 600 !important;
6399
+ letter-spacing: 0 !important;
6400
+ }
6401
+
6402
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-title > div {
6403
+ justify-content: flex-start !important;
6404
+ padding: 0 !important;
6405
+ }
6406
+
6407
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-html-container {
6408
+ margin: 0 !important;
6409
+ padding: 0 !important;
6410
+ text-align: left !important;
6411
+ color: #71717a !important;
6412
+ font-size: 13px !important;
6413
+ line-height: 1.45 !important;
6414
+ }
6415
+
6416
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-html-container {
6417
+ color: rgba(229, 231, 235, 0.62) !important;
6418
+ }
6419
+
6420
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close {
6421
+ width: 28px !important;
6422
+ height: 28px !important;
6423
+ margin: 0 !important;
6424
+ border-radius: 6px !important;
6425
+ border: 1px solid transparent !important;
6426
+ color: #71717a !important;
6427
+ font-family: inherit !important;
6428
+ font-size: 18px !important;
6429
+ line-height: 1 !important;
6430
+ }
6431
+
6432
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:hover,
6433
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:focus-visible {
6434
+ background: rgba(24, 24, 27, 0.06) !important;
6435
+ color: #18181b !important;
6436
+ box-shadow: none !important;
6437
+ }
6438
+
6439
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close {
6440
+ color: rgba(229, 231, 235, 0.58) !important;
6441
+ }
6442
+
6443
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:hover,
6444
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:focus-visible {
6445
+ background: rgba(255, 255, 255, 0.07) !important;
6446
+ color: rgba(250, 250, 250, 0.94) !important;
6447
+ }
6448
+
6449
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-actions {
6450
+ justify-content: flex-end !important;
6451
+ gap: 8px !important;
6452
+ margin: 16px 0 0 !important;
6453
+ padding: 0 !important;
6454
+ }
6455
+
6456
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-styled {
6457
+ min-height: 32px !important;
6458
+ margin: 0 !important;
6459
+ padding: 0 12px !important;
6460
+ border-radius: 6px !important;
6461
+ border: 1px solid rgba(24, 24, 27, 0.12) !important;
6462
+ box-shadow: none !important;
6463
+ font-size: 13px !important;
6464
+ font-weight: 600 !important;
6465
+ }
6466
+
6467
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-confirm.swal2-styled {
6468
+ border-color: #18181b !important;
6469
+ background: #18181b !important;
6470
+ color: #ffffff !important;
6471
+ }
6472
+
6473
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-confirm.swal2-styled {
6474
+ border-color: rgba(250, 250, 250, 0.94) !important;
6475
+ background: rgba(250, 250, 250, 0.94) !important;
6476
+ color: #1b1c1d !important;
6477
+ }
6478
+
6479
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-cancel.swal2-styled {
6480
+ border-color: rgba(24, 24, 27, 0.12) !important;
6481
+ background: transparent !important;
6482
+ color: #52525b !important;
6483
+ }
6484
+
6485
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-cancel.swal2-styled {
6486
+ border-color: rgba(255, 255, 255, 0.1) !important;
6487
+ color: rgba(229, 231, 235, 0.7) !important;
6488
+ }
6489
+
6490
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .folder-rows {
6491
+ display: grid;
6492
+ gap: 10px;
6493
+ min-width: 0;
6494
+ }
6495
+
6496
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .folder-row {
6497
+ display: grid;
6498
+ gap: 6px;
6499
+ }
6500
+
6501
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .folder-row label {
6502
+ padding: 0 !important;
6503
+ color: inherit !important;
6504
+ font-size: 12px !important;
6505
+ line-height: 1.35 !important;
6506
+ font-weight: 600 !important;
6507
+ }
6508
+
6509
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .field-row {
6510
+ display: flex;
6511
+ align-items: center;
6512
+ gap: 8px;
6513
+ }
6514
+
6515
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .field-row label {
6516
+ flex: 0 0 auto;
6517
+ color: #71717a !important;
6518
+ font-weight: 500 !important;
6519
+ }
6520
+
6521
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .field-row label {
6522
+ color: rgba(229, 231, 235, 0.62) !important;
6523
+ }
6524
+
6525
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input,
6526
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input,
6527
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea {
6528
+ width: 100% !important;
6529
+ margin: 0 !important;
6530
+ padding: 8px 10px !important;
6531
+ border: 1px solid rgba(24, 24, 27, 0.16) !important;
6532
+ border-radius: 6px !important;
6533
+ background: rgba(24, 24, 27, 0.03) !important;
6534
+ color: #18181b !important;
6535
+ box-shadow: none !important;
6536
+ font-size: 13px !important;
6537
+ line-height: 1.45 !important;
6538
+ }
6539
+
6540
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input {
6541
+ height: 36px !important;
6542
+ }
6543
+
6544
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input,
6545
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input,
6546
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea {
6547
+ border-color: rgba(255, 255, 255, 0.14) !important;
6548
+ background: rgba(255, 255, 255, 0.04) !important;
6549
+ color: rgba(250, 250, 250, 0.94) !important;
6550
+ }
6551
+
6552
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input:focus,
6553
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input:focus,
6554
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea:focus {
6555
+ border-color: rgba(24, 24, 27, 0.42) !important;
6556
+ background: #ffffff !important;
6557
+ box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12) !important;
6558
+ outline: none !important;
6559
+ }
6560
+
6561
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input:focus,
6562
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input:focus,
6563
+ body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea:focus {
6564
+ border-color: rgba(255, 255, 255, 0.38) !important;
6565
+ background: rgba(255, 255, 255, 0.05) !important;
6566
+ box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
6567
+ }
6568
+
6569
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .filepond-wrapper {
6570
+ display: grid;
6571
+ grid-template-columns: 112px minmax(0, 1fr);
6572
+ gap: 16px;
6573
+ align-items: start;
6574
+ }
6575
+
6576
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .avatar-field {
6577
+ width: 100% !important;
6578
+ height: auto !important;
6579
+ margin: 0 !important;
6580
+ min-width: 0;
6581
+ }
6582
+
6583
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .filepond--root {
6584
+ width: 100% !important;
6585
+ max-width: 100% !important;
6586
+ }
6587
+
6588
+ @media (max-width: 560px) {
6589
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) {
6590
+ padding: 16px !important;
6591
+ }
6592
+
6593
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .filepond-wrapper {
6594
+ grid-template-columns: minmax(0, 1fr);
6595
+ }
6596
+
6597
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-actions {
6598
+ flex-direction: column-reverse;
6599
+ align-items: stretch;
6600
+ }
6601
+
6602
+ .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-styled {
6603
+ width: 100%;
6604
+ }
6605
+ }