WebOrbiton
v1.3.0

AtheraStudio SyncDrop

← Changes All versions
812 lines · 14.5 KB
  1. @font-face {
  2. font-family: "SUSE";
  3. src: url("fonts/SUSE.ttf") format("truetype");
  4. font-weight: 100 900;
  5. font-style: normal;
  6. font-display: swap;
  7. }
  8. ​
  9. @font-face {
  10. font-family: "Kode Mono";
  11. src: url("fonts/KodeMono.ttf") format("truetype");
  12. font-weight: 400 700;
  13. font-stretch: 75% 125%;
  14. font-style: normal;
  15. font-display: swap;
  16. }
  17. ​
  18. @font-face {
  19. font-family: "Tektur";
  20. src: url("fonts/Tektur.ttf") format("truetype");
  21. font-weight: 400 900;
  22. font-stretch: 75% 100%;
  23. font-style: normal;
  24. font-display: swap;
  25. }
  26. ​
  27. :root {
  28. --orb-font-sans: "SUSE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  29. --orb-font-mono: "Kode Mono", ui-monospace, "SF Mono", Consolas, monospace;
  30. --sd-font-display: "Tektur", "SUSE", -apple-system, "Segoe UI", sans-serif;
  31. }
  32. ​
  33. h1,
  34. .sd-brand-text,
  35. .sd-brand-small,
  36. .sd-brand-big {
  37. font-family: var(--sd-font-display);
  38. }
  39. ​
  40. .orb-mono,
  41. code,
  42. kbd,
  43. pre,
  44. .sd-code {
  45. font-variant-ligatures: none;
  46. font-feature-settings: "liga" 0, "calt" 0;
  47. }
  48. ​
  49. h1 {
  50. font-weight: 700;
  51. letter-spacing: 0;
  52. }
  53. ​
  54. .sd-brand-big,
  55. .sd-brand-text {
  56. font-weight: 800;
  57. letter-spacing: 0;
  58. }
  59. ​
  60. html,
  61. body {
  62. min-height: 100%;
  63. }
  64. ​
  65. body {
  66. background:
  67. radial-gradient(ellipse 60% 420px at 85% -10%, color-mix(in srgb, var(--orb-primary) 16%, transparent), transparent 70%),
  68. radial-gradient(ellipse 50% 380px at 0% 100%, color-mix(in srgb, var(--orb-primary) 9%, transparent), transparent 70%),
  69. var(--orb-bg);
  70. background-attachment: fixed;
  71. }
  72. ​
  73. .sd-noscript {
  74. padding: 12px 16px;
  75. text-align: center;
  76. font-weight: 600;
  77. color: #fff;
  78. background: var(--orb-danger);
  79. }
  80. ​
  81. .sd-hp {
  82. position: absolute;
  83. left: -10000px;
  84. width: 1px;
  85. height: 1px;
  86. overflow: hidden;
  87. }
  88. ​
  89. .sd-auth-wrap {
  90. min-height: 100vh;
  91. min-height: 100dvh;
  92. display: flex;
  93. flex-direction: column;
  94. align-items: center;
  95. justify-content: center;
  96. gap: var(--orb-space-5);
  97. padding: var(--orb-space-8) var(--orb-space-4);
  98. }
  99. ​
  100. .sd-auth-top {
  101. position: fixed;
  102. top: var(--orb-space-4);
  103. right: var(--orb-space-4);
  104. display: flex;
  105. align-items: center;
  106. gap: var(--orb-space-2);
  107. }
  108. ​
  109. .sd-lang {
  110. display: inline-flex;
  111. gap: 2px;
  112. padding: 3px;
  113. border-radius: var(--orb-radius-full);
  114. background: var(--orb-surface-alt);
  115. border: 1px solid var(--orb-border);
  116. }
  117. ​
  118. .sd-lang .orb-btn {
  119. min-height: 26px;
  120. border-radius: var(--orb-radius-full);
  121. }
  122. ​
  123. .sd-lang .is-current {
  124. color: var(--orb-primary-ink);
  125. background: var(--orb-primary);
  126. }
  127. ​
  128. .sd-auth-brand {
  129. display: flex;
  130. align-items: center;
  131. gap: var(--orb-space-3);
  132. }
  133. ​
  134. .orb-brand-mark .sd-logo {
  135. stroke: none;
  136. fill: var(--orb-primary-ink);
  137. }
  138. ​
  139. .sd-brand-lg {
  140. width: 46px;
  141. height: 46px;
  142. border-radius: 14px;
  143. }
  144. ​
  145. .sd-brand-small {
  146. font-size: 0.75rem;
  147. font-weight: 700;
  148. letter-spacing: 0.08em;
  149. text-transform: uppercase;
  150. color: var(--orb-primary-text);
  151. }
  152. ​
  153. .sd-brand-big {
  154. font-size: 1.5rem;
  155. font-weight: 800;
  156. letter-spacing: -0.02em;
  157. line-height: 1.1;
  158. }
  159. ​
  160. .sd-auth-card {
  161. width: 100%;
  162. max-width: 470px;
  163. }
  164. ​
  165. .sd-auth-card .orb-card-body {
  166. padding: var(--orb-space-8);
  167. }
  168. ​
  169. .sd-auth-foot {
  170. text-align: center;
  171. }
  172. ​
  173. .sd-alert + .sd-alert,
  174. .sd-alert {
  175. margin-bottom: var(--orb-space-4);
  176. }
  177. ​
  178. .sd-brand-text {
  179. display: flex;
  180. flex-direction: column;
  181. line-height: 1.15;
  182. }
  183. ​
  184. .sd-brand-text small {
  185. font-size: 0.625rem;
  186. font-weight: 700;
  187. letter-spacing: 0.08em;
  188. text-transform: uppercase;
  189. color: var(--orb-primary-text);
  190. }
  191. ​
  192. .sd-nav-form {
  193. margin-top: auto;
  194. }
  195. ​
  196. .sd-nav-button {
  197. width: 100%;
  198. background: none;
  199. cursor: pointer;
  200. font-family: inherit;
  201. line-height: inherit;
  202. text-align: left;
  203. }
  204. ​
  205. .sd-sidebar-foot {
  206. padding: var(--orb-space-3) var(--orb-space-3) 0;
  207. }
  208. ​
  209. .sd-nav-dot {
  210. width: 8px;
  211. height: 8px;
  212. margin-left: auto;
  213. flex-shrink: 0;
  214. border-radius: 999px;
  215. background: var(--orb-primary);
  216. box-shadow: 0 0 0 3px color-mix(in srgb, var(--orb-primary) 22%, transparent);
  217. }
  218. ​
  219. .sd-update-head {
  220. display: flex;
  221. flex-wrap: wrap;
  222. align-items: center;
  223. gap: var(--orb-space-2) var(--orb-space-3);
  224. }
  225. ​
  226. .sd-update-version {
  227. font-family: var(--sd-font-display);
  228. font-size: 1.25rem;
  229. font-weight: 600;
  230. }
  231. ​
  232. .sd-changelog {
  233. margin: var(--orb-space-2) 0 0;
  234. padding-left: 1.2em;
  235. display: grid;
  236. gap: 4px;
  237. font-size: 0.9rem;
  238. color: var(--orb-text-muted);
  239. }
  240. ​
  241. .sd-update-note {
  242. padding-bottom: 0;
  243. }
  244. ​
  245. .sd-update-actions {
  246. display: flex;
  247. flex-wrap: wrap;
  248. justify-content: flex-end;
  249. gap: var(--orb-space-2);
  250. }
  251. ​
  252. .orb-main {
  253. padding: var(--orb-space-2) var(--orb-space-2) var(--orb-space-8);
  254. }
  255. ​
  256. .sd-topbar {
  257. display: flex;
  258. align-items: center;
  259. justify-content: space-between;
  260. gap: var(--orb-space-4);
  261. margin-bottom: var(--orb-space-6);
  262. padding-top: var(--orb-space-2);
  263. }
  264. ​
  265. .sd-topbar-actions {
  266. display: flex;
  267. align-items: center;
  268. gap: var(--orb-space-2);
  269. }
  270. ​
  271. .sd-narrow {
  272. max-width: 560px;
  273. }
  274. ​
  275. .sd-steps {
  276. padding-left: 1.25rem;
  277. margin-bottom: var(--orb-space-5);
  278. color: var(--orb-text-muted);
  279. font-size: 0.875rem;
  280. line-height: 1.6;
  281. }
  282. ​
  283. .sd-steps li + li {
  284. margin-top: 4px;
  285. }
  286. ​
  287. .sd-qr {
  288. width: 220px;
  289. max-width: 100%;
  290. margin: 0 auto;
  291. padding: 10px;
  292. border-radius: var(--orb-radius-md);
  293. background: #fff;
  294. border: 1px solid var(--orb-border);
  295. }
  296. ​
  297. .sd-qr svg {
  298. display: block;
  299. width: 100%;
  300. height: auto;
  301. }
  302. ​
  303. .sd-secret {
  304. display: flex;
  305. align-items: center;
  306. justify-content: space-between;
  307. gap: var(--orb-space-2);
  308. padding: 10px 12px;
  309. border-radius: var(--orb-radius-sm);
  310. background: var(--orb-surface-alt);
  311. border: 1px solid var(--orb-border);
  312. font-size: 0.875rem;
  313. word-break: break-all;
  314. }
  315. ​
  316. .sd-code-input {
  317. font-size: 1.25rem;
  318. letter-spacing: 0.18em;
  319. text-align: center;
  320. }
  321. ​
  322. .sd-codes {
  323. display: grid;
  324. grid-template-columns: repeat(2, minmax(0, 1fr));
  325. gap: 8px 24px;
  326. padding: var(--orb-space-4) var(--orb-space-5) var(--orb-space-4) 2.2rem;
  327. border-radius: var(--orb-radius-md);
  328. background: var(--orb-surface-alt);
  329. border: 1px dashed var(--orb-border-strong);
  330. font-size: 0.95rem;
  331. }
  332. ​
  333. .sd-sync-grid {
  334. grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  335. }
  336. ​
  337. .sd-drop {
  338. display: flex;
  339. flex-direction: column;
  340. align-items: center;
  341. gap: 6px;
  342. padding: var(--orb-space-8) var(--orb-space-5);
  343. text-align: center;
  344. border: 2px dashed color-mix(in srgb, var(--orb-primary) 40%, var(--orb-border));
  345. border-radius: var(--orb-radius-lg);
  346. background: color-mix(in srgb, var(--orb-primary) 5%, var(--orb-surface));
  347. transition: border-color var(--orb-dur) var(--orb-ease), background-color var(--orb-dur) var(--orb-ease);
  348. outline: none;
  349. }
  350. ​
  351. .sd-drop:focus-visible,
  352. .sd-drop.is-over {
  353. border-color: var(--orb-primary);
  354. background: color-mix(in srgb, var(--orb-primary) 12%, var(--orb-surface));
  355. }
  356. ​
  357. .sd-drop.is-busy {
  358. opacity: 0.6;
  359. pointer-events: none;
  360. }
  361. ​
  362. .sd-drop-icon {
  363. width: 56px;
  364. height: 56px;
  365. display: grid;
  366. place-items: center;
  367. border-radius: 16px;
  368. color: var(--orb-primary-text);
  369. background: var(--orb-primary-dim);
  370. margin-bottom: 4px;
  371. }
  372. ​
  373. .sd-status-card {
  374. display: flex;
  375. flex-direction: column;
  376. height: 100%;
  377. }
  378. ​
  379. .sd-stats {
  380. display: grid;
  381. grid-template-columns: repeat(4, minmax(0, 1fr));
  382. gap: var(--orb-space-2);
  383. }
  384. ​
  385. .sd-stat {
  386. display: flex;
  387. flex-direction: column;
  388. align-items: center;
  389. gap: 2px;
  390. padding: var(--orb-space-3) var(--orb-space-2);
  391. border-radius: var(--orb-radius-md);
  392. background: var(--orb-surface-alt);
  393. border: 1px solid var(--orb-border);
  394. }
  395. ​
  396. .sd-stat-n {
  397. font-size: 1.5rem;
  398. font-weight: 800;
  399. line-height: 1.1;
  400. color: var(--orb-primary-text);
  401. }
  402. ​
  403. .sd-stat-l {
  404. font-size: 0.6875rem;
  405. font-weight: 600;
  406. text-transform: uppercase;
  407. letter-spacing: 0.05em;
  408. color: var(--orb-text-muted);
  409. text-align: center;
  410. }
  411. ​
  412. .sd-status-card [data-send] {
  413. margin-top: auto;
  414. }
  415. ​
  416. .sd-status-card .orb-form-hint svg {
  417. vertical-align: -2px;
  418. }
  419. ​
  420. .sd-list-wrap {
  421. max-height: 460px;
  422. overflow: auto;
  423. border-radius: 0;
  424. }
  425. ​
  426. .sd-list-wrap .orb-table {
  427. border: 0;
  428. border-radius: 0;
  429. }
  430. ​
  431. .sd-path {
  432. word-break: break-all;
  433. }
  434. ​
  435. .sd-ua {
  436. max-width: 320px;
  437. overflow: hidden;
  438. text-overflow: ellipsis;
  439. white-space: nowrap;
  440. color: var(--orb-text-muted);
  441. }
  442. ​
  443. .sd-settings .orb-card-title {
  444. display: flex;
  445. align-items: center;
  446. gap: 8px;
  447. }
  448. ​
  449. .sd-target {
  450. padding: var(--orb-space-5);
  451. border: 1px solid var(--orb-border);
  452. border-radius: var(--orb-radius-md);
  453. background: var(--orb-surface-alt);
  454. }
  455. ​
  456. .sd-target + .sd-target {
  457. margin-top: var(--orb-space-4);
  458. }
  459. ​
  460. .sd-target-new {
  461. background: transparent;
  462. border-style: dashed;
  463. }
  464. ​
  465. .sd-target-new .orb-h3 {
  466. display: flex;
  467. align-items: center;
  468. gap: 8px;
  469. }
  470. ​
  471. .orb-label svg {
  472. vertical-align: -2px;
  473. }
  474. ​
  475. .sd-shield-lead {
  476. max-width: 80ch;
  477. font-size: 0.9375rem;
  478. }
  479. ​
  480. .sd-shield-stats .sd-stat {
  481. text-align: center;
  482. }
  483. ​
  484. .sd-shield-ip {
  485. font-size: 1.05rem;
  486. word-break: break-all;
  487. padding-top: 0.3rem;
  488. }
  489. ​
  490. .sd-shield-stats .orb-pill {
  491. text-transform: none;
  492. letter-spacing: 0;
  493. }
  494. ​
  495. .sd-reason {
  496. display: flex;
  497. flex-direction: column;
  498. align-items: flex-start;
  499. gap: 4px;
  500. }
  501. ​
  502. .sd-allow {
  503. list-style: none;
  504. margin: 0;
  505. padding: 0;
  506. display: flex;
  507. flex-direction: column;
  508. gap: var(--orb-space-2);
  509. }
  510. ​
  511. .sd-allow li {
  512. display: flex;
  513. align-items: center;
  514. justify-content: space-between;
  515. gap: var(--orb-space-3);
  516. padding: var(--orb-space-2) var(--orb-space-3);
  517. border-radius: var(--orb-radius-md);
  518. background: var(--orb-surface-alt);
  519. border: 1px solid var(--orb-border);
  520. word-break: break-all;
  521. }
  522. ​
  523. .sd-meter {
  524. display: block;
  525. width: 100%;
  526. max-width: 160px;
  527. height: 6px;
  528. margin-bottom: 4px;
  529. border: 0;
  530. border-radius: 999px;
  531. background: var(--orb-surface-alt);
  532. overflow: hidden;
  533. appearance: none;
  534. -webkit-appearance: none;
  535. }
  536. ​
  537. .sd-meter::-webkit-progress-bar {
  538. background: var(--orb-surface-alt);
  539. border-radius: 999px;
  540. }
  541. ​
  542. .sd-meter::-webkit-progress-value {
  543. background: var(--orb-danger);
  544. border-radius: 999px;
  545. }
  546. ​
  547. .sd-meter::-moz-progress-bar {
  548. background: var(--orb-danger);
  549. border-radius: 999px;
  550. }
  551. ​
  552. .sd-sr {
  553. position: absolute;
  554. width: 1px;
  555. height: 1px;
  556. overflow: hidden;
  557. clip: rect(0 0 0 0);
  558. white-space: nowrap;
  559. }
  560. ​
  561. .sd-viewer [hidden] {
  562. display: none !important;
  563. }
  564. ​
  565. .sd-view-cell {
  566. width: 1%;
  567. text-align: right;
  568. white-space: nowrap;
  569. }
  570. ​
  571. .sd-viewer {
  572. max-width: min(1180px, 100%);
  573. height: 88vh;
  574. height: 88dvh;
  575. max-height: none;
  576. }
  577. ​
  578. .sd-viewer-head {
  579. display: flex;
  580. flex-direction: column;
  581. gap: 2px;
  582. min-width: 0;
  583. }
  584. ​
  585. .sd-viewer-head .orb-modal-title {
  586. font-family: var(--orb-font-mono);
  587. font-size: 0.875rem;
  588. overflow-wrap: anywhere;
  589. }
  590. ​
  591. .sd-viewer-bar {
  592. display: flex;
  593. align-items: center;
  594. justify-content: space-between;
  595. flex-wrap: wrap;
  596. gap: var(--orb-space-2) var(--orb-space-4);
  597. padding: var(--orb-space-3) var(--orb-space-6);
  598. border-bottom: 1px solid var(--orb-border);
  599. flex-shrink: 0;
  600. }
  601. ​
  602. .sd-viewer-bar .orb-checkbox {
  603. margin: 0;
  604. }
  605. ​
  606. .sd-viewer-tools {
  607. display: flex;
  608. align-items: center;
  609. gap: var(--orb-space-3);
  610. margin-left: auto;
  611. }
  612. ​
  613. .sd-viewer-body {
  614. flex: 1;
  615. min-height: 0;
  616. overflow: auto;
  617. overscroll-behavior: contain;
  618. background: var(--orb-surface-alt);
  619. }
  620. ​
  621. .sd-viewer-note {
  622. padding: var(--orb-space-6);
  623. color: var(--orb-text-muted);
  624. }
  625. ​
  626. .sd-code {
  627. min-width: max-content;
  628. padding: var(--orb-space-2) 0;
  629. font-family: var(--orb-font-mono);
  630. font-size: 0.8125rem;
  631. line-height: 1.65;
  632. tab-size: 4;
  633. white-space: pre;
  634. color: var(--orb-text);
  635. }
  636. ​
  637. .sd-viewer-body.is-wrap .sd-code {
  638. min-width: 0;
  639. white-space: pre-wrap;
  640. overflow-wrap: anywhere;
  641. }
  642. ​
  643. .sd-row {
  644. display: flex;
  645. min-height: 1.65em;
  646. }
  647. ​
  648. .sd-ln {
  649. flex: 0 0 auto;
  650. width: 4.5ch;
  651. padding-right: 1ch;
  652. text-align: right;
  653. color: var(--orb-text-subtle);
  654. user-select: none;
  655. -webkit-user-select: none;
  656. position: sticky;
  657. left: 0;
  658. background: var(--orb-surface-alt);
  659. }
  660. ​
  661. .sd-ln + .sd-ln {
  662. left: 4.5ch;
  663. }
  664. ​
  665. .sd-ln::before {
  666. content: attr(data-l);
  667. }
  668. ​
  669. .sd-mk {
  670. flex: 0 0 2ch;
  671. text-align: center;
  672. user-select: none;
  673. -webkit-user-select: none;
  674. color: var(--orb-text-subtle);
  675. }
  676. ​
  677. .sd-lc {
  678. flex: 1 1 auto;
  679. padding-right: var(--orb-space-6);
  680. }
  681. ​
  682. .sd-code-plain .sd-lc {
  683. padding-left: 1.5ch;
  684. }
  685. ​
  686. .sd-add {
  687. background: color-mix(in srgb, var(--orb-success) 14%, transparent);
  688. }
  689. ​
  690. .sd-add .sd-ln,
  691. .sd-add .sd-mk {
  692. background: color-mix(in srgb, var(--orb-success) 22%, var(--orb-surface-alt));
  693. color: var(--orb-success);
  694. }
  695. ​
  696. .sd-del {
  697. background: color-mix(in srgb, var(--orb-danger) 13%, transparent);
  698. }
  699. ​
  700. .sd-del .sd-ln,
  701. .sd-del .sd-mk {
  702. background: color-mix(in srgb, var(--orb-danger) 20%, var(--orb-surface-alt));
  703. color: var(--orb-danger);
  704. }
  705. ​
  706. .sd-gap {
  707. padding: 2px 0 2px 11ch;
  708. margin: 2px 0;
  709. font-family: var(--orb-font-sans);
  710. font-size: 0.75rem;
  711. color: var(--orb-text-muted);
  712. background: color-mix(in srgb, var(--orb-primary) 7%, transparent);
  713. border-top: 1px dashed var(--orb-border);
  714. border-bottom: 1px dashed var(--orb-border);
  715. }
  716. ​
  717. .sd-diff-stat {
  718. font-family: var(--orb-font-mono);
  719. font-size: 0.75rem;
  720. }
  721. ​
  722. .sd-diff-stat .sd-plus {
  723. color: var(--orb-success);
  724. }
  725. ​
  726. .sd-diff-stat .sd-minus {
  727. color: var(--orb-danger);
  728. }
  729. ​
  730. .tk-c { color: #6b7280; font-style: italic; }
  731. .tk-s { color: #0f766e; }
  732. .tk-k { color: #a21caf; font-weight: 600; }
  733. .tk-n { color: #b45309; }
  734. .tk-f { color: #1d4ed8; }
  735. .tk-v { color: #be123c; }
  736. .tk-t { color: #7e22ce; }
  737. .tk-a { color: #0369a1; }
  738. .tk-p { color: #0e7490; }
  739. ​
  740. html.orb-dark .tk-c { color: #8b93a7; }
  741. html.orb-dark .tk-s { color: #5eead4; }
  742. html.orb-dark .tk-k { color: #f0abfc; }
  743. html.orb-dark .tk-n { color: #fdba74; }
  744. html.orb-dark .tk-f { color: #93c5fd; }
  745. html.orb-dark .tk-v { color: #fda4af; }
  746. html.orb-dark .tk-t { color: #d8b4fe; }
  747. html.orb-dark .tk-a { color: #7dd3fc; }
  748. html.orb-dark .tk-p { color: #67e8f9; }
  749. ​
  750. @media (max-width: 560px) {
  751. .sd-viewer {
  752. height: 92dvh;
  753. }
  754. ​
  755. .sd-viewer-bar {
  756. padding: var(--orb-space-3) var(--orb-space-5);
  757. }
  758. ​
  759. .sd-code {
  760. font-size: 0.75rem;
  761. }
  762. }
  763. ​
  764. @media (max-width: 960px) {
  765. .sd-sync-grid {
  766. grid-template-columns: minmax(0, 1fr);
  767. }
  768. }
  769. ​
  770. @media (max-width: 768px) {
  771. .orb-main {
  772. padding: var(--orb-space-4) var(--orb-space-4) calc(96px + env(safe-area-inset-bottom, 0px));
  773. }
  774. ​
  775. .sd-nav-form {
  776. margin-top: 0;
  777. flex: 1;
  778. min-width: 0;
  779. display: flex;
  780. }
  781. ​
  782. .sd-nav-button {
  783. text-align: center;
  784. }
  785. ​
  786. .sd-sidebar-foot {
  787. display: none;
  788. }
  789. ​
  790. .sd-auth-card .orb-card-body {
  791. padding: var(--orb-space-6) var(--orb-space-5);
  792. }
  793. ​
  794. .sd-auth-top {
  795. position: static;
  796. align-self: flex-end;
  797. }
  798. ​
  799. .sd-auth-wrap {
  800. justify-content: flex-start;
  801. padding-top: var(--orb-space-4);
  802. }
  803. ​
  804. .sd-stats {
  805. grid-template-columns: repeat(2, minmax(0, 1fr));
  806. }
  807. ​
  808. .sd-codes {
  809. grid-template-columns: minmax(0, 1fr);
  810. }
  811. }
  812. ​