WebOrbiton
v1.0.0.9

Publisium

← Changes All versions
3,895 lines · 77.3 KB
  1. @font-face {
  2. font-family: "Space Grotesk";
  3. src: url("fonts/Space_Grotesk.ttf") format("truetype");
  4. font-display: swap;
  5. }
  6. ​
  7. @font-face {
  8. font-family: "Avatar Font";
  9. src: url("fonts/Noticia_Text.ttf") format("truetype");
  10. font-display: swap;
  11. }
  12. ​
  13. :root {
  14. --bg: #0a0a0c;
  15. --panel: #131316;
  16. --panel-alt: #1a1a1f;
  17. --panel-hover: #202027;
  18. --border: #26262d;
  19. --border-strong: #34343d;
  20. --text: #f2f2f4;
  21. --muted: #8f8f9a;
  22. --muted-dim: #6a6a74;
  23. --accent: #7c6df2;
  24. --accent-hover: #8f82f5;
  25. --accent-dim: rgba(124, 109, 242, 0.14);
  26. --danger: #f0546a;
  27. --danger-dim: rgba(240, 84, 106, 0.14);
  28. --success: #34c48c;
  29. --success-dim: rgba(52, 196, 140, 0.14);
  30. --warning: #eab23d;
  31. --warning-dim: rgba(234, 178, 61, 0.14);
  32. --info: #4fb2e8;
  33. --info-dim: rgba(79, 178, 232, 0.14);
  34. --radius: 12px;
  35. --radius-sm: 8px;
  36. --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  37. --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.28), 0 16px 40px rgba(0, 0, 0, 0.34);
  38. --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(0, 0, 0, 0.22);
  39. --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  40. }
  41. ​
  42. body[data-theme="light"] {
  43. --bg: #f7f7f9;
  44. --panel: #ffffff;
  45. --panel-alt: #f1f1f4;
  46. --panel-hover: #e9e9ee;
  47. --border: #e4e4ea;
  48. --border-strong: #d3d3dc;
  49. --text: #17171b;
  50. --muted: #6a6a76;
  51. --muted-dim: #9a9aa5;
  52. --accent: #6c5ce7;
  53. --accent-hover: #5c4bd6;
  54. --accent-dim: rgba(108, 92, 231, 0.1);
  55. --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05), 0 1px 1px rgba(20, 20, 30, 0.04);
  56. --shadow-md: 0 2px 6px rgba(20, 20, 30, 0.05), 0 16px 40px rgba(20, 20, 30, 0.08);
  57. --shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04), 0 6px 16px rgba(20, 20, 30, 0.05);
  58. --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  59. }
  60. ​
  61. * {
  62. box-sizing: border-box;
  63. }
  64. ​
  65. body {
  66. margin: 0;
  67. font-family: var(--dash-font-ui, "Space Grotesk"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  68. background: var(--bg);
  69. color: var(--text);
  70. font-size: 14px;
  71. line-height: 1.5;
  72. -webkit-font-smoothing: antialiased;
  73. scrollbar-width: thin;
  74. scrollbar-color: var(--border-strong) transparent;
  75. }
  76. ​
  77. ::-webkit-scrollbar {
  78. width: 10px;
  79. height: 10px;
  80. }
  81. ​
  82. ::-webkit-scrollbar-track {
  83. background: transparent;
  84. }
  85. ​
  86. ::-webkit-scrollbar-thumb {
  87. background: var(--border-strong);
  88. border-radius: 999px;
  89. border: 2px solid var(--bg);
  90. background-clip: padding-box;
  91. }
  92. ​
  93. ::-webkit-scrollbar-thumb:hover {
  94. background: var(--muted-dim);
  95. background-clip: padding-box;
  96. }
  97. ​
  98. a,
  99. button,
  100. input,
  101. select,
  102. textarea,
  103. [role="button"] {
  104. -webkit-tap-highlight-color: transparent;
  105. }
  106. ​
  107. button {
  108. margin: 0;
  109. line-height: normal;
  110. }
  111. ​
  112. button::-moz-focus-inner {
  113. border: 0;
  114. padding: 0;
  115. }
  116. ​
  117. .icon {
  118. width: 18px;
  119. height: 18px;
  120. flex-shrink: 0;
  121. }
  122. ​
  123. .icon-sm {
  124. width: 15px;
  125. height: 15px;
  126. }
  127. ​
  128. .icon-lg {
  129. width: 22px;
  130. height: 22px;
  131. }
  132. ​
  133. .nav-icon-picker-row {
  134. display: flex;
  135. gap: 10px;
  136. align-items: center;
  137. }
  138. ​
  139. .nav-icon-picker-preview {
  140. display: flex;
  141. align-items: center;
  142. justify-content: center;
  143. width: 34px;
  144. height: 34px;
  145. border-radius: 8px;
  146. border: 1px solid var(--border);
  147. background: var(--panel-raised);
  148. flex-shrink: 0;
  149. }
  150. ​
  151. .nav-icon-picker-row select {
  152. flex: 1;
  153. }
  154. ​
  155. .nav-item-icon {
  156. display: inline-flex;
  157. width: 15px;
  158. height: 15px;
  159. vertical-align: middle;
  160. }
  161. ​
  162. .nav-item-icon svg {
  163. width: 100%;
  164. height: 100%;
  165. display: block;
  166. }
  167. ​
  168. .dash-shell {
  169. display: flex;
  170. min-height: 100vh;
  171. gap: 14px;
  172. padding: 14px;
  173. box-sizing: border-box;
  174. }
  175. ​
  176. .dash-sidebar {
  177. width: 250px;
  178. background: var(--panel);
  179. border: 1px solid var(--border);
  180. border-radius: var(--radius);
  181. padding: 18px 14px;
  182. display: flex;
  183. flex-direction: column;
  184. position: sticky;
  185. top: 14px;
  186. height: calc(100vh - 28px);
  187. flex-shrink: 0;
  188. box-shadow: var(--shadow-card), var(--inset-hairline);
  189. }
  190. ​
  191. .dash-brand-row {
  192. display: flex;
  193. align-items: center;
  194. justify-content: space-between;
  195. padding: 6px 8px 18px;
  196. margin-bottom: 10px;
  197. border-bottom: 1px solid var(--border);
  198. }
  199. ​
  200. .dash-brand {
  201. font-weight: 700;
  202. font-size: 15px;
  203. letter-spacing: -0.01em;
  204. display: flex;
  205. align-items: center;
  206. gap: 8px;
  207. }
  208. ​
  209. .dash-brand-dot {
  210. width: 8px;
  211. height: 8px;
  212. border-radius: 50%;
  213. background: var(--accent);
  214. flex-shrink: 0;
  215. display: none;
  216. }
  217. ​
  218. .dash-theme-toggle {
  219. background: var(--panel-alt);
  220. border: 1px solid var(--border);
  221. border-radius: 999px;
  222. width: 30px;
  223. height: 30px;
  224. display: flex;
  225. align-items: center;
  226. justify-content: center;
  227. cursor: pointer;
  228. color: var(--muted);
  229. transition: background .12s, color .12s;
  230. }
  231. ​
  232. .dash-theme-toggle:hover {
  233. background: var(--panel-hover);
  234. color: var(--text);
  235. }
  236. ​
  237. body[data-theme="light"] .dash-theme-toggle .icon-moon {
  238. display: none;
  239. }
  240. ​
  241. body[data-theme="dark"] .dash-theme-toggle .icon-sun {
  242. display: none;
  243. }
  244. ​
  245. .dash-nav {
  246. display: flex;
  247. flex-direction: column;
  248. gap: 2px;
  249. flex: 1;
  250. }
  251. ​
  252. .dash-nav a {
  253. color: var(--muted);
  254. text-decoration: none;
  255. padding: 9px 12px;
  256. border-radius: var(--radius-sm);
  257. font-size: 13.5px;
  258. font-weight: 500;
  259. display: flex;
  260. align-items: center;
  261. gap: 10px;
  262. transition: background .15s ease, color .15s ease;
  263. }
  264. ​
  265. .dash-nav a:hover {
  266. background: var(--panel-alt);
  267. color: var(--text);
  268. }
  269. ​
  270. .dash-nav a.active {
  271. background: var(--accent-dim);
  272. color: var(--accent);
  273. font-weight: 600;
  274. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  275. }
  276. ​
  277. .dash-nav a.active .icon {
  278. color: var(--accent);
  279. }
  280. ​
  281. .dash-nav-divider {
  282. height: 1px;
  283. background: var(--border);
  284. margin: 10px 4px;
  285. }
  286. ​
  287. .dash-user {
  288. border-top: 1px solid var(--border);
  289. padding-top: 14px;
  290. margin-top: 10px;
  291. display: flex;
  292. align-items: center;
  293. gap: 10px;
  294. }
  295. ​
  296. .dash-user-avatar {
  297. width: 34px;
  298. height: 34px;
  299. border-radius: 50%;
  300. background: var(--accent-dim);
  301. color: var(--accent);
  302. display: flex;
  303. align-items: center;
  304. justify-content: center;
  305. font-weight: 700;
  306. font-size: 13px;
  307. flex-shrink: 0;
  308. font-family: "Avatar Font";
  309. }
  310. ​
  311. .dash-user-info {
  312. flex: 1;
  313. min-width: 0;
  314. }
  315. ​
  316. .dash-user-name {
  317. font-weight: 600;
  318. font-size: 13px;
  319. white-space: nowrap;
  320. overflow: hidden;
  321. text-overflow: ellipsis;
  322. }
  323. ​
  324. .dash-user-role {
  325. color: var(--muted-dim);
  326. font-size: 11.5px;
  327. }
  328. ​
  329. .dash-user-logout {
  330. color: var(--muted);
  331. display: flex;
  332. align-items: center;
  333. justify-content: center;
  334. width: 30px;
  335. height: 30px;
  336. border-radius: var(--radius-sm);
  337. flex-shrink: 0;
  338. transition: background .12s, color .12s;
  339. }
  340. ​
  341. .dash-user-logout:hover {
  342. background: var(--danger-dim);
  343. color: var(--danger);
  344. }
  345. ​
  346. .dash-main {
  347. flex: 1;
  348. padding: 30px 40px;
  349. max-width: 1240px;
  350. min-width: 0;
  351. margin: 0 auto;
  352. background: var(--panel);
  353. border: 1px solid var(--border);
  354. border-radius: var(--radius);
  355. box-shadow: var(--shadow-card), var(--inset-hairline);
  356. }
  357. ​
  358. .dash-title {
  359. display: flex;
  360. align-items: center;
  361. gap: 10px;
  362. font-size: 21px;
  363. font-weight: 700;
  364. margin: 0 0 6px;
  365. letter-spacing: -0.01em;
  366. }
  367. ​
  368. .dash-subtitle {
  369. display: flex;
  370. align-items: center;
  371. gap: 8px;
  372. font-size: 15px;
  373. font-weight: 600;
  374. margin: 30px 0 14px;
  375. color: var(--text);
  376. }
  377. ​
  378. .dash-header-row {
  379. display: flex;
  380. justify-content: space-between;
  381. align-items: center;
  382. margin-bottom: 22px;
  383. gap: 16px;
  384. }
  385. ​
  386. .dash-cards {
  387. display: flex;
  388. gap: 14px;
  389. margin-bottom: 28px;
  390. flex-wrap: wrap;
  391. }
  392. ​
  393. .dash-card {
  394. background: var(--panel);
  395. border: 1px solid var(--border);
  396. border-radius: var(--radius);
  397. padding: 18px 20px;
  398. min-width: 160px;
  399. flex: 1;
  400. box-shadow: var(--shadow-card), var(--inset-hairline);
  401. transition: border-color .16s, box-shadow .16s, transform .16s;
  402. }
  403. ​
  404. .dash-card:hover {
  405. border-color: var(--border-strong);
  406. transform: translateY(-1px);
  407. }
  408. ​
  409. .dash-card .icon {
  410. color: var(--accent);
  411. margin-bottom: 10px;
  412. }
  413. ​
  414. .dash-card-value {
  415. font-size: 26px;
  416. font-weight: 700;
  417. letter-spacing: -0.02em;
  418. }
  419. ​
  420. .dash-card-label {
  421. color: var(--muted);
  422. font-size: 12.5px;
  423. margin-top: 4px;
  424. }
  425. ​
  426. .dash-table {
  427. width: 100%;
  428. border-collapse: separate;
  429. border-spacing: 0;
  430. background: var(--panel);
  431. border: 1px solid var(--border);
  432. border-radius: var(--radius);
  433. overflow: hidden;
  434. box-shadow: var(--shadow-card);
  435. }
  436. ​
  437. .dash-table th,
  438. .dash-table td {
  439. padding: 12px 16px;
  440. text-align: left;
  441. font-size: 13px;
  442. border-bottom: 1px solid var(--border);
  443. }
  444. ​
  445. .dash-table tr:last-child td {
  446. border-bottom: none;
  447. }
  448. ​
  449. .dash-table th {
  450. color: var(--muted);
  451. font-weight: 600;
  452. background: var(--panel-alt);
  453. font-size: 11.5px;
  454. text-transform: uppercase;
  455. letter-spacing: 0.04em;
  456. }
  457. ​
  458. .dash-table th:has(.icon) {
  459. display: table-cell;
  460. }
  461. ​
  462. .dash-table th .icon {
  463. vertical-align: -3px;
  464. margin-right: 6px;
  465. }
  466. ​
  467. .dash-table tbody tr {
  468. transition: background .1s;
  469. }
  470. ​
  471. .dash-table tbody tr:hover {
  472. background: var(--panel-alt);
  473. }
  474. ​
  475. .dash-table a {
  476. color: var(--text);
  477. text-decoration: none;
  478. font-weight: 500;
  479. }
  480. ​
  481. .dash-table a:hover {
  482. color: var(--accent);
  483. }
  484. ​
  485. .dash-table-actions {
  486. display: flex;
  487. gap: 6px;
  488. align-items: center;
  489. }
  490. ​
  491. .status-pill {
  492. padding: 3px 10px;
  493. border-radius: 999px;
  494. font-size: 11px;
  495. font-weight: 600;
  496. text-transform: capitalize;
  497. display: inline-block;
  498. }
  499. ​
  500. .status-draft {
  501. background: var(--panel-alt);
  502. color: var(--muted);
  503. }
  504. ​
  505. .status-pending_review {
  506. background: var(--warning-dim);
  507. color: var(--warning);
  508. }
  509. ​
  510. .status-scheduled {
  511. background: var(--info-dim);
  512. color: var(--info);
  513. }
  514. ​
  515. .status-published {
  516. background: var(--success-dim);
  517. color: var(--success);
  518. }
  519. ​
  520. .status-rejected {
  521. background: var(--danger-dim);
  522. color: var(--danger);
  523. }
  524. ​
  525. .status-archived {
  526. background: var(--panel-alt);
  527. color: var(--muted-dim);
  528. }
  529. ​
  530. .dash-btn,
  531. .dash-btn-small {
  532. display: inline-flex;
  533. align-items: center;
  534. justify-content: center;
  535. gap: 6px;
  536. border: 1px solid var(--border);
  537. background: var(--panel-alt);
  538. color: var(--text);
  539. padding: 9px 16px;
  540. border-radius: var(--radius-sm);
  541. font-size: 13px;
  542. font-weight: 600;
  543. cursor: pointer;
  544. text-decoration: none;
  545. font-family: inherit;
  546. transition: background .12s, border-color .12s;
  547. }
  548. ​
  549. .dash-btn:hover,
  550. .dash-btn-small:hover {
  551. background: var(--panel-hover);
  552. border-color: var(--border-strong);
  553. }
  554. ​
  555. .dash-btn-small {
  556. padding: 6px 11px;
  557. font-size: 12px;
  558. }
  559. ​
  560. .dash-btn-primary {
  561. background: linear-gradient(155deg, var(--accent-hover), var(--accent));
  562. border-color: var(--accent);
  563. color: #fff;
  564. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), var(--inset-hairline);
  565. transition: background .12s, border-color .12s, box-shadow .16s, transform .16s;
  566. }
  567. ​
  568. .dash-btn-primary:hover {
  569. background: linear-gradient(155deg, var(--accent-hover), var(--accent-hover));
  570. border-color: var(--accent-hover);
  571. box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent), var(--inset-hairline);
  572. transform: translateY(-1px);
  573. }
  574. ​
  575. .dash-btn-success {
  576. background: var(--success);
  577. border-color: var(--success);
  578. color: #06231a;
  579. }
  580. ​
  581. .dash-btn-danger {
  582. background: transparent;
  583. border-color: var(--danger);
  584. color: var(--danger);
  585. }
  586. ​
  587. .dash-btn-danger:hover {
  588. background: var(--danger-dim);
  589. }
  590. ​
  591. .dash-flash {
  592. display: flex;
  593. align-items: center;
  594. gap: 8px;
  595. padding: 11px 16px;
  596. border-radius: var(--radius-sm);
  597. font-size: 13px;
  598. font-weight: 500;
  599. margin-bottom: 20px;
  600. }
  601. ​
  602. .dash-flash-success {
  603. background: var(--success-dim);
  604. color: var(--success);
  605. }
  606. ​
  607. .dash-flash-error {
  608. background: var(--danger-dim);
  609. color: var(--danger);
  610. }
  611. ​
  612. .article-form-grid {
  613. display: flex;
  614. gap: 24px;
  615. }
  616. ​
  617. .article-form-main {
  618. flex: 1;
  619. min-width: 0;
  620. }
  621. ​
  622. .article-form-sidebar {
  623. width: 300px;
  624. display: flex;
  625. flex-direction: column;
  626. gap: 14px;
  627. flex-shrink: 0;
  628. }
  629. ​
  630. .sidebar-box {
  631. background: var(--panel);
  632. border: 1px solid var(--border);
  633. border-radius: var(--radius);
  634. padding: 16px;
  635. box-shadow: var(--shadow-card), var(--inset-hairline);
  636. }
  637. ​
  638. label {
  639. display: block;
  640. font-size: 12.5px;
  641. font-weight: 600;
  642. color: var(--muted);
  643. margin: 14px 0 6px;
  644. }
  645. ​
  646. label:has(.icon) {
  647. display: flex;
  648. align-items: center;
  649. gap: 6px;
  650. }
  651. ​
  652. label:first-child {
  653. margin-top: 0;
  654. }
  655. ​
  656. input[type="text"],
  657. input[type="number"],
  658. input[type="datetime-local"],
  659. input[type="password"],
  660. input[type="email"],
  661. select,
  662. textarea {
  663. width: 100%;
  664. padding: 10px 12px;
  665. border-radius: var(--radius-sm);
  666. border: 1px solid var(--border);
  667. background: var(--bg);
  668. color: var(--text);
  669. font-size: 13.5px;
  670. font-family: inherit;
  671. transition: border-color .12s, box-shadow .12s;
  672. }
  673. ​
  674. input:focus,
  675. select:focus,
  676. textarea:focus {
  677. outline: none;
  678. border-color: var(--accent);
  679. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  680. }
  681. ​
  682. input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  683. cursor: pointer;
  684. border-radius: 4px;
  685. padding: 2px;
  686. filter: invert(1);
  687. opacity: .7;
  688. }
  689. ​
  690. input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  691. opacity: 1;
  692. }
  693. ​
  694. body[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  695. filter: none;
  696. }
  697. ​
  698. input[type="color"] {
  699. width: 100%;
  700. height: 42px;
  701. padding: 4px;
  702. border-radius: var(--radius-sm);
  703. border: 1px solid var(--border);
  704. background: var(--bg);
  705. cursor: pointer;
  706. transition: border-color .12s, box-shadow .12s;
  707. }
  708. ​
  709. input[type="color"]::-webkit-color-swatch-wrapper {
  710. padding: 0;
  711. }
  712. ​
  713. input[type="color"]::-webkit-color-swatch {
  714. border: none;
  715. border-radius: 6px;
  716. }
  717. ​
  718. input[type="color"]::-moz-color-swatch {
  719. border: none;
  720. border-radius: 6px;
  721. }
  722. ​
  723. input[type="color"]:focus {
  724. outline: none;
  725. border-color: var(--accent);
  726. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  727. }
  728. ​
  729. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]) {
  730. appearance: none;
  731. -webkit-appearance: none;
  732. width: 38px;
  733. height: 22px;
  734. border-radius: 999px;
  735. background: var(--panel-raised);
  736. border: 1px solid var(--border);
  737. position: relative;
  738. flex-shrink: 0;
  739. cursor: pointer;
  740. transition: background .15s, border-color .15s;
  741. vertical-align: middle;
  742. margin: 0;
  743. }
  744. ​
  745. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"])::before {
  746. content: "";
  747. position: absolute;
  748. top: 2px;
  749. left: 2px;
  750. width: 16px;
  751. height: 16px;
  752. border-radius: 50%;
  753. background: var(--muted);
  754. transition: transform .15s, background .15s;
  755. }
  756. ​
  757. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):checked {
  758. background: var(--accent);
  759. border-color: var(--accent);
  760. }
  761. ​
  762. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):checked::before {
  763. transform: translateX(16px);
  764. background: #fff;
  765. }
  766. ​
  767. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):focus-visible {
  768. outline: 2px solid var(--accent);
  769. outline-offset: 2px;
  770. }
  771. ​
  772. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):disabled {
  773. opacity: .5;
  774. cursor: not-allowed;
  775. }
  776. ​
  777. .dash-main label:has(> input[type="checkbox"]) {
  778. display: flex;
  779. align-items: center;
  780. gap: 10px;
  781. cursor: pointer;
  782. }
  783. ​
  784. .dash-input-inline {
  785. width: auto;
  786. display: inline-block;
  787. margin-right: 8px;
  788. }
  789. ​
  790. .publish-actions {
  791. display: flex;
  792. flex-wrap: wrap;
  793. gap: 8px;
  794. margin-top: 16px;
  795. }
  796. ​
  797. .two-col {
  798. display: flex;
  799. gap: 28px;
  800. }
  801. ​
  802. .two-col>div {
  803. flex: 1;
  804. }
  805. ​
  806. #block-editor-root {
  807. border: 1px solid var(--border);
  808. border-radius: var(--radius);
  809. padding: 10px;
  810. background: var(--bg);
  811. max-width: 100%;
  812. }
  813. ​
  814. #block-editor-root:not(.be-hide-block-icons) {
  815. padding-left: 32px;
  816. }
  817. ​
  818. .be-stats-bar {
  819. display: flex;
  820. justify-content: space-between;
  821. align-items: center;
  822. gap: 10px;
  823. margin-top: 8px;
  824. padding: 0 2px;
  825. font-size: 11.5px;
  826. color: var(--muted-dim);
  827. }
  828. ​
  829. .be-focus-toggle-btn {
  830. background: var(--panel-alt);
  831. border: 1px solid var(--border);
  832. color: var(--text);
  833. padding: 5px 10px;
  834. border-radius: var(--radius-sm);
  835. font-size: 11.5px;
  836. font-weight: 600;
  837. cursor: pointer;
  838. font-family: inherit;
  839. transition: background .12s, border-color .12s;
  840. }
  841. ​
  842. .be-focus-toggle-btn:hover {
  843. background: var(--panel-hover);
  844. border-color: var(--border-strong);
  845. }
  846. ​
  847. .be-draft-banner {
  848. display: flex;
  849. align-items: center;
  850. gap: 10px;
  851. padding: 10px 14px;
  852. margin-bottom: 10px;
  853. background: var(--warning-dim);
  854. border: 1px solid var(--warning);
  855. border-radius: var(--radius-sm);
  856. font-size: 13px;
  857. color: var(--text);
  858. }
  859. ​
  860. .be-draft-banner span {
  861. flex: 1;
  862. }
  863. ​
  864. .be-draft-banner button {
  865. background: var(--panel-alt);
  866. border: 1px solid var(--border);
  867. color: var(--text);
  868. padding: 6px 12px;
  869. border-radius: var(--radius-sm);
  870. font-size: 12.5px;
  871. font-weight: 600;
  872. cursor: pointer;
  873. font-family: inherit;
  874. transition: background .12s;
  875. }
  876. ​
  877. .be-draft-banner button:hover {
  878. background: var(--panel-hover);
  879. }
  880. ​
  881. body.be-focus-mode .dash-sidebar,
  882. body.be-focus-mode .dash-header-row,
  883. body.be-focus-mode .article-form-sidebar {
  884. display: none;
  885. }
  886. ​
  887. body.be-focus-mode .article-form-grid {
  888. justify-content: center;
  889. }
  890. ​
  891. body.be-focus-mode .article-form-main {
  892. max-width: 820px;
  893. width: 100%;
  894. }
  895. ​
  896. body.be-focus-mode .article-form-main input[type="text"],
  897. body.be-focus-mode .article-form-main textarea {
  898. font-size: 15.5px;
  899. }
  900. ​
  901. body.be-focus-mode .be-editable {
  902. font-size: 16.5px;
  903. line-height: 1.8;
  904. }
  905. ​
  906. body.be-focus-mode .be-heading {
  907. font-size: 22px;
  908. }
  909. ​
  910. .be-block {
  911. position: relative;
  912. padding: 10px 8px;
  913. border-radius: var(--radius-sm);
  914. margin-bottom: 4px;
  915. transition: background .12s;
  916. max-width: 100%;
  917. }
  918. ​
  919. .be-block:hover {
  920. background: var(--panel-alt);
  921. }
  922. ​
  923. .be-block-icon-badge {
  924. position: absolute;
  925. top: 10px;
  926. left: -22px;
  927. width: 18px;
  928. height: 18px;
  929. display: flex;
  930. align-items: center;
  931. justify-content: center;
  932. color: var(--muted-dim);
  933. }
  934. ​
  935. .be-block-icon-badge svg {
  936. width: 15px;
  937. height: 15px;
  938. }
  939. ​
  940. .be-hide-block-icons .be-block-icon-badge {
  941. display: none;
  942. }
  943. ​
  944. .be-block-toolbar {
  945. display: flex;
  946. gap: 2px;
  947. align-items: center;
  948. opacity: 0;
  949. transition: opacity .12s;
  950. position: absolute;
  951. top: -30px;
  952. right: 4px;
  953. background: var(--panel);
  954. border: 1px solid var(--border);
  955. border-radius: var(--radius-sm);
  956. padding: 2px;
  957. z-index: 5;
  958. box-shadow: var(--shadow-sm), var(--inset-hairline);
  959. }
  960. ​
  961. .be-block:hover .be-block-toolbar,
  962. .be-block:focus-within .be-block-toolbar {
  963. opacity: 1;
  964. }
  965. ​
  966. .be-block-toolbar button {
  967. background: none;
  968. border: none;
  969. color: var(--muted);
  970. cursor: pointer;
  971. padding: 5px;
  972. border-radius: 5px;
  973. display: flex;
  974. align-items: center;
  975. justify-content: center;
  976. transition: background .12s, color .12s;
  977. }
  978. ​
  979. .be-block-toolbar button:hover {
  980. background: var(--panel-hover);
  981. color: var(--text);
  982. }
  983. ​
  984. .be-block-type {
  985. font-size: 10px;
  986. color: var(--muted-dim);
  987. padding: 0 6px;
  988. text-transform: uppercase;
  989. font-weight: 600;
  990. letter-spacing: 0.03em;
  991. }
  992. ​
  993. .be-block-body {
  994. display: flex;
  995. flex-direction: column;
  996. gap: 8px;
  997. }
  998. ​
  999. .be-inline-toolbar {
  1000. position: absolute;
  1001. display: flex;
  1002. gap: 2px;
  1003. align-items: center;
  1004. background: var(--panel);
  1005. border: 1px solid var(--border);
  1006. border-radius: var(--radius-sm);
  1007. padding: 4px;
  1008. z-index: 200;
  1009. box-shadow: var(--shadow-md), var(--inset-hairline);
  1010. max-width: calc(100vw - 16px);
  1011. }
  1012. ​
  1013. .be-inline-toolbar button {
  1014. width: 26px;
  1015. height: 26px;
  1016. background: none;
  1017. border: none;
  1018. color: var(--text);
  1019. cursor: pointer;
  1020. border-radius: 5px;
  1021. font-size: 13px;
  1022. font-weight: 700;
  1023. display: flex;
  1024. align-items: center;
  1025. justify-content: center;
  1026. font-family: inherit;
  1027. transition: background .12s, color .12s;
  1028. flex-shrink: 0;
  1029. }
  1030. ​
  1031. .be-inline-toolbar button:hover {
  1032. background: var(--accent);
  1033. color: #fff;
  1034. }
  1035. ​
  1036. .be-inline-toolbar .be-clear-format-btn {
  1037. font-size: 11px;
  1038. margin-left: 2px;
  1039. }
  1040. ​
  1041. .be-color-trigger {
  1042. width: 26px;
  1043. height: 26px;
  1044. padding: 4px 0 6px;
  1045. border: none;
  1046. border-radius: 5px;
  1047. background: none;
  1048. color: var(--text);
  1049. cursor: pointer;
  1050. display: flex;
  1051. flex-direction: column;
  1052. align-items: center;
  1053. justify-content: center;
  1054. gap: 2px;
  1055. transition: background .12s;
  1056. }
  1057. ​
  1058. .be-color-trigger:hover {
  1059. background: var(--panel-hover);
  1060. }
  1061. ​
  1062. .be-color-trigger-letter {
  1063. font-size: 13px;
  1064. font-weight: 700;
  1065. line-height: 1;
  1066. }
  1067. ​
  1068. .be-color-trigger-bar {
  1069. width: 16px;
  1070. height: 3px;
  1071. border-radius: 2px;
  1072. flex-shrink: 0;
  1073. }
  1074. ​
  1075. .be-color-popover {
  1076. position: absolute;
  1077. display: flex;
  1078. flex-direction: column;
  1079. gap: 10px;
  1080. background: var(--panel);
  1081. border: 1px solid var(--border);
  1082. border-radius: var(--radius-sm);
  1083. padding: 12px;
  1084. z-index: 210;
  1085. box-shadow: var(--shadow-md), var(--inset-hairline);
  1086. width: 220px;
  1087. max-width: calc(100vw - 16px);
  1088. }
  1089. ​
  1090. .be-color-popover-row {
  1091. display: flex;
  1092. flex-direction: column;
  1093. gap: 6px;
  1094. }
  1095. ​
  1096. .be-color-popover-label {
  1097. font-size: 10.5px;
  1098. color: var(--muted-dim);
  1099. text-transform: uppercase;
  1100. font-weight: 600;
  1101. letter-spacing: 0.03em;
  1102. }
  1103. ​
  1104. .be-color-popover-swatches {
  1105. display: flex;
  1106. flex-wrap: wrap;
  1107. gap: 6px;
  1108. }
  1109. ​
  1110. .be-color-swatch {
  1111. width: 22px;
  1112. height: 22px;
  1113. border-radius: 6px;
  1114. border: 1px solid var(--border);
  1115. cursor: pointer;
  1116. padding: 0;
  1117. flex-shrink: 0;
  1118. transition: transform .1s, border-color .1s;
  1119. }
  1120. ​
  1121. .be-color-swatch:hover {
  1122. transform: scale(1.1);
  1123. border-color: var(--border-strong);
  1124. }
  1125. ​
  1126. .be-color-swatch-preview {
  1127. cursor: default;
  1128. width: 26px;
  1129. height: 26px;
  1130. }
  1131. ​
  1132. .be-color-swatch-preview:hover {
  1133. transform: none;
  1134. border-color: var(--border);
  1135. }
  1136. ​
  1137. .be-color-popover-hex-row {
  1138. display: flex;
  1139. align-items: center;
  1140. gap: 8px;
  1141. }
  1142. ​
  1143. input.be-color-hex-input {
  1144. flex: 1;
  1145. width: auto;
  1146. padding: 6px 8px;
  1147. font-size: 12.5px;
  1148. font-family: "SF Mono", Consolas, monospace;
  1149. text-transform: uppercase;
  1150. }
  1151. ​
  1152. .be-color-reset-btn {
  1153. background: var(--panel-alt);
  1154. border: 1px solid var(--border);
  1155. color: var(--text);
  1156. padding: 7px 10px;
  1157. border-radius: var(--radius-sm);
  1158. font-size: 12.5px;
  1159. font-weight: 600;
  1160. cursor: pointer;
  1161. font-family: inherit;
  1162. transition: background .12s, border-color .12s;
  1163. }
  1164. ​
  1165. .be-color-reset-btn:hover {
  1166. background: var(--panel-hover);
  1167. border-color: var(--border-strong);
  1168. }
  1169. ​
  1170. .be-color-swatch-custom {
  1171. background: conic-gradient(from 90deg, red, yellow, lime, cyan, blue, magenta, red);
  1172. }
  1173. ​
  1174. .be-color-custom-panel {
  1175. display: none;
  1176. flex-direction: column;
  1177. gap: 10px;
  1178. }
  1179. ​
  1180. .be-color-custom-panel.open {
  1181. display: flex;
  1182. }
  1183. ​
  1184. .be-color-sv-area {
  1185. position: relative;
  1186. width: 100%;
  1187. height: 130px;
  1188. border-radius: var(--radius-sm);
  1189. border: 1px solid var(--border);
  1190. cursor: crosshair;
  1191. touch-action: none;
  1192. }
  1193. ​
  1194. .be-color-sv-cursor {
  1195. position: absolute;
  1196. width: 14px;
  1197. height: 14px;
  1198. border-radius: 50%;
  1199. border: 2px solid #fff;
  1200. box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), var(--shadow-sm);
  1201. transform: translate(-50%, -50%);
  1202. pointer-events: none;
  1203. }
  1204. ​
  1205. .be-color-hue-slider {
  1206. position: relative;
  1207. width: 100%;
  1208. height: 12px;
  1209. border-radius: 999px;
  1210. border: 1px solid var(--border);
  1211. background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
  1212. cursor: pointer;
  1213. touch-action: none;
  1214. }
  1215. ​
  1216. .be-color-hue-handle {
  1217. position: absolute;
  1218. top: 50%;
  1219. width: 16px;
  1220. height: 16px;
  1221. border-radius: 50%;
  1222. border: 2px solid #fff;
  1223. box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), var(--shadow-sm);
  1224. transform: translate(-50%, -50%);
  1225. pointer-events: none;
  1226. background: var(--panel);
  1227. }
  1228. ​
  1229. .be-editable a {
  1230. color: var(--accent);
  1231. }
  1232. ​
  1233. .be-editable code {
  1234. background: var(--panel-alt);
  1235. padding: 1px 5px;
  1236. border-radius: 4px;
  1237. font-family: "SF Mono", Consolas, monospace;
  1238. font-size: 0.9em;
  1239. }
  1240. ​
  1241. .be-editable {
  1242. min-height: 1.4em;
  1243. outline: none;
  1244. font-size: 14.5px;
  1245. line-height: 1.65;
  1246. font-family: var(--dash-font-content, inherit);
  1247. overflow-wrap: break-word;
  1248. word-break: break-word;
  1249. }
  1250. ​
  1251. .be-heading {
  1252. font-size: 19px;
  1253. font-weight: 700;
  1254. }
  1255. ​
  1256. .be-block-menu {
  1257. position: absolute;
  1258. background: var(--panel);
  1259. border: 1px solid var(--border);
  1260. border-radius: var(--radius-sm);
  1261. padding: 4px;
  1262. display: flex;
  1263. flex-direction: column;
  1264. z-index: 100;
  1265. box-shadow: var(--shadow-md), var(--inset-hairline);
  1266. max-width: calc(100vw - 16px);
  1267. max-height: 60vh;
  1268. overflow-y: auto;
  1269. }
  1270. ​
  1271. .be-block-menu button {
  1272. background: none;
  1273. border: none;
  1274. color: var(--text);
  1275. text-align: left;
  1276. padding: 8px 12px;
  1277. cursor: pointer;
  1278. border-radius: 5px;
  1279. font-size: 13px;
  1280. font-family: inherit;
  1281. transition: background .12s, color .12s;
  1282. }
  1283. ​
  1284. .be-block-menu button:hover {
  1285. background: var(--accent);
  1286. color: #fff;
  1287. }
  1288. ​
  1289. .be-preview-image,
  1290. .be-preview-video {
  1291. max-width: 100%;
  1292. border-radius: var(--radius-sm);
  1293. margin-top: 8px;
  1294. }
  1295. ​
  1296. .be-upload-wrapper {
  1297. display: flex;
  1298. align-items: center;
  1299. gap: 10px;
  1300. margin-top: 6px;
  1301. }
  1302. ​
  1303. .be-upload-wrapper button {
  1304. background: var(--panel-alt);
  1305. border: 1px solid var(--border);
  1306. color: var(--text);
  1307. padding: 6px 12px;
  1308. border-radius: 6px;
  1309. font-size: 12px;
  1310. cursor: pointer;
  1311. font-family: inherit;
  1312. }
  1313. ​
  1314. .be-upload-status {
  1315. font-size: 12px;
  1316. color: var(--muted);
  1317. }
  1318. ​
  1319. .be-code {
  1320. width: 100%;
  1321. min-height: 100px;
  1322. font-family: "SF Mono", Consolas, monospace;
  1323. font-size: 13px;
  1324. background: var(--bg);
  1325. }
  1326. ​
  1327. .be-list-row,
  1328. .be-checklist-row {
  1329. display: flex;
  1330. gap: 8px;
  1331. margin-bottom: 6px;
  1332. align-items: center;
  1333. }
  1334. ​
  1335. .be-table-scroll {
  1336. max-width: 100%;
  1337. overflow-x: auto;
  1338. margin-top: 8px;
  1339. border-radius: var(--radius-sm);
  1340. }
  1341. ​
  1342. .be-table {
  1343. width: 100%;
  1344. border-collapse: collapse;
  1345. }
  1346. ​
  1347. .be-table td {
  1348. border: 1px solid var(--border);
  1349. padding: 4px;
  1350. }
  1351. ​
  1352. .be-table-controls {
  1353. display: flex;
  1354. gap: 8px;
  1355. margin-top: 8px;
  1356. }
  1357. ​
  1358. .settings-tabs {
  1359. display: flex;
  1360. gap: 4px;
  1361. border-bottom: 1px solid var(--border);
  1362. margin-bottom: 24px;
  1363. }
  1364. ​
  1365. .settings-tabs a {
  1366. display: inline-flex;
  1367. align-items: center;
  1368. gap: 7px;
  1369. padding: 10px 16px;
  1370. color: var(--muted);
  1371. text-decoration: none;
  1372. font-size: 13px;
  1373. font-weight: 600;
  1374. border-bottom: 2px solid transparent;
  1375. }
  1376. ​
  1377. .settings-tabs a.active {
  1378. color: var(--text);
  1379. border-bottom-color: var(--accent);
  1380. }
  1381. ​
  1382. .settings-section {
  1383. max-width: 640px;
  1384. }
  1385. ​
  1386. .settings-section-wide {
  1387. max-width: 980px;
  1388. }
  1389. ​
  1390. .nav-items-table th,
  1391. .nav-items-table td {
  1392. white-space: nowrap;
  1393. }
  1394. ​
  1395. .nav-items-table td:nth-child(2) {
  1396. white-space: normal;
  1397. min-width: 180px;
  1398. }
  1399. ​
  1400. .nav-item-name {
  1401. min-width: 0;
  1402. overflow-wrap: anywhere;
  1403. }
  1404. ​
  1405. .nav-item-url {
  1406. font-size: 12px;
  1407. color: var(--muted);
  1408. }
  1409. ​
  1410. .nav-items-table td:first-child {
  1411. width: 1%;
  1412. }
  1413. ​
  1414. .nav-items-table .dash-table-actions {
  1415. justify-content: flex-end;
  1416. }
  1417. ​
  1418. .nav-move-placeholder {
  1419. visibility: hidden;
  1420. pointer-events: none;
  1421. }
  1422. ​
  1423. @media (max-width: 860px) {
  1424. .nav-items-table th,
  1425. .nav-items-table td {
  1426. white-space: normal;
  1427. }
  1428. ​
  1429. .nav-items-table td:nth-child(2) {
  1430. min-width: 0;
  1431. }
  1432. ​
  1433. .nav-move-placeholder {
  1434. display: none;
  1435. }
  1436. }
  1437. ​
  1438. .settings-grid {
  1439. display: grid;
  1440. grid-template-columns: repeat(2, minmax(0, 1fr));
  1441. gap: 12px;
  1442. }
  1443. ​
  1444. .settings-grid > div {
  1445. min-width: 0;
  1446. }
  1447. ​
  1448. .share-settings-platform {
  1449. display: inline-flex !important;
  1450. align-items: center;
  1451. gap: 6px;
  1452. }
  1453. ​
  1454. .share-settings-platform-icon {
  1455. width: 16px;
  1456. height: 16px;
  1457. display: inline-flex;
  1458. }
  1459. ​
  1460. .share-settings-platform-icon svg {
  1461. width: 100%;
  1462. height: 100%;
  1463. fill: currentColor;
  1464. }
  1465. ​
  1466. .lang-row {
  1467. display: flex;
  1468. gap: 12px;
  1469. align-items: center;
  1470. margin-bottom: 8px;
  1471. }
  1472. ​
  1473. .lang-row-key {
  1474. width: 220px;
  1475. font-size: 12px;
  1476. color: var(--muted);
  1477. flex-shrink: 0;
  1478. }
  1479. ​
  1480. .dash-mobile-topbar {
  1481. display: none;
  1482. }
  1483. ​
  1484. .dash-nav-more-btn {
  1485. display: none;
  1486. }
  1487. ​
  1488. .dash-nav-sheet-backdrop {
  1489. display: none;
  1490. }
  1491. ​
  1492. @media (max-width: 860px) {
  1493. .dash-main {
  1494. padding: 20px 16px 84px;
  1495. max-width: 100%;
  1496. flex: 1 0 auto;
  1497. width: 100%;
  1498. box-sizing: border-box;
  1499. background: var(--panel);
  1500. border: none;
  1501. border-top: 1px solid var(--border);
  1502. border-radius: 24px 24px 0 0;
  1503. box-shadow: var(--inset-hairline);
  1504. }
  1505. ​
  1506. .dash-header-row {
  1507. flex-wrap: wrap;
  1508. }
  1509. ​
  1510. .dash-header-row .dash-btn,
  1511. .dash-header-row .dash-btn-primary {
  1512. flex: 1;
  1513. }
  1514. ​
  1515. .dash-title {
  1516. font-size: 18px;
  1517. }
  1518. ​
  1519. .dash-cards {
  1520. flex-wrap: nowrap;
  1521. overflow-x: auto;
  1522. -webkit-overflow-scrolling: touch;
  1523. scroll-snap-type: x mandatory;
  1524. margin: 0 -16px 24px;
  1525. padding: 0 16px 4px;
  1526. }
  1527. ​
  1528. .dash-card {
  1529. min-width: 150px;
  1530. scroll-snap-align: start;
  1531. }
  1532. ​
  1533. .dash-table,
  1534. .dash-table thead,
  1535. .dash-table tbody,
  1536. .dash-table th,
  1537. .dash-table td,
  1538. .dash-table tr {
  1539. display: block;
  1540. }
  1541. ​
  1542. .dash-table thead {
  1543. display: none;
  1544. }
  1545. ​
  1546. .dash-table tbody tr {
  1547. border-bottom: 1px solid var(--border);
  1548. padding: 12px 14px;
  1549. }
  1550. ​
  1551. .dash-table tbody tr:last-child {
  1552. border-bottom: none;
  1553. }
  1554. ​
  1555. .dash-table td {
  1556. border-bottom: none;
  1557. padding: 5px 0;
  1558. display: flex;
  1559. justify-content: space-between;
  1560. align-items: center;
  1561. gap: 10px;
  1562. text-align: right;
  1563. }
  1564. ​
  1565. .dash-table td::before {
  1566. content: attr(data-label);
  1567. color: var(--muted);
  1568. font-size: 11.5px;
  1569. font-weight: 600;
  1570. text-transform: uppercase;
  1571. letter-spacing: 0.03em;
  1572. text-align: left;
  1573. flex-shrink: 0;
  1574. }
  1575. ​
  1576. .dash-table td:empty {
  1577. display: none;
  1578. }
  1579. ​
  1580. .dash-table-actions {
  1581. justify-content: flex-end;
  1582. flex-wrap: wrap;
  1583. }
  1584. ​
  1585. .article-form-grid,
  1586. .two-col {
  1587. flex-direction: column;
  1588. gap: 16px;
  1589. }
  1590. ​
  1591. .article-form-sidebar {
  1592. width: 100%;
  1593. }
  1594. ​
  1595. .settings-tabs {
  1596. overflow-x: auto;
  1597. -webkit-overflow-scrolling: touch;
  1598. flex-wrap: nowrap;
  1599. white-space: nowrap;
  1600. }
  1601. ​
  1602. .lang-row {
  1603. flex-wrap: wrap;
  1604. }
  1605. ​
  1606. .lang-row-key {
  1607. width: 100%;
  1608. }
  1609. ​
  1610. .dash-shell {
  1611. flex-direction: column;
  1612. gap: 0;
  1613. padding: 0;
  1614. }
  1615. ​
  1616. .dash-mobile-topbar {
  1617. display: flex;
  1618. align-items: center;
  1619. justify-content: space-between;
  1620. position: sticky;
  1621. top: 0;
  1622. z-index: 50;
  1623. background: var(--bg);
  1624. border-bottom: none;
  1625. padding: 12px 16px;
  1626. }
  1627. ​
  1628. .dash-mobile-topbar::after {
  1629. content: '';
  1630. position: absolute;
  1631. left: 0;
  1632. right: 0;
  1633. top: 100%;
  1634. height: 24px;
  1635. pointer-events: none;
  1636. background:
  1637. radial-gradient(circle at 100% 100%, transparent 23.5px, var(--bg) 24.5px) left top / 24px 24px no-repeat,
  1638. radial-gradient(circle at 0 100%, transparent 23.5px, var(--bg) 24.5px) right top / 24px 24px no-repeat;
  1639. }
  1640. ​
  1641. .dash-mobile-topbar .dash-brand {
  1642. font-size: 14px;
  1643. }
  1644. ​
  1645. .dash-mobile-topbar-right {
  1646. display: flex;
  1647. align-items: center;
  1648. gap: 8px;
  1649. }
  1650. ​
  1651. .dash-mobile-topbar .dash-user-avatar {
  1652. width: 28px;
  1653. height: 28px;
  1654. font-size: 11px;
  1655. }
  1656. ​
  1657. .dash-sidebar {
  1658. position: fixed;
  1659. top: auto;
  1660. bottom: 0;
  1661. left: 0;
  1662. right: 0;
  1663. width: 100%;
  1664. height: auto;
  1665. flex-direction: row;
  1666. align-items: center;
  1667. padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  1668. border: none;
  1669. border-top: 1px solid var(--border-strong, var(--border));
  1670. border-radius: 24px 24px 0 0;
  1671. box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  1672. z-index: 60;
  1673. }
  1674. ​
  1675. .dash-brand-row,
  1676. .dash-user {
  1677. display: none;
  1678. }
  1679. ​
  1680. .dash-nav {
  1681. flex-direction: row;
  1682. align-items: center;
  1683. justify-content: space-around;
  1684. gap: 0;
  1685. width: 100%;
  1686. }
  1687. ​
  1688. .dash-nav-divider {
  1689. display: none;
  1690. }
  1691. ​
  1692. .dash-nav a {
  1693. flex-direction: column;
  1694. gap: 3px;
  1695. padding: 6px 4px;
  1696. font-size: 10px;
  1697. font-weight: 600;
  1698. border-radius: var(--radius-sm);
  1699. flex: 1;
  1700. text-align: center;
  1701. }
  1702. ​
  1703. .dash-nav a .icon {
  1704. width: 20px;
  1705. height: 20px;
  1706. }
  1707. ​
  1708. .dash-nav.has-overflow a.dash-nav-overflow-item {
  1709. display: none;
  1710. }
  1711. ​
  1712. .dash-nav-more-btn {
  1713. display: flex;
  1714. flex-direction: column;
  1715. align-items: center;
  1716. gap: 3px;
  1717. padding: 6px 4px;
  1718. background: none;
  1719. border: none;
  1720. color: var(--muted);
  1721. font-size: 10px;
  1722. font-weight: 600;
  1723. font-family: inherit;
  1724. cursor: pointer;
  1725. flex: 1;
  1726. border-radius: var(--radius-sm);
  1727. }
  1728. ​
  1729. .dash-nav-more-btn .icon {
  1730. width: 20px;
  1731. height: 20px;
  1732. }
  1733. ​
  1734. .dash-nav-more-btn.open {
  1735. color: var(--accent);
  1736. }
  1737. ​
  1738. .dash-nav-sheet-backdrop {
  1739. display: none;
  1740. position: fixed;
  1741. inset: 0;
  1742. background: rgba(0, 0, 0, 0.45);
  1743. z-index: 70;
  1744. }
  1745. ​
  1746. .dash-nav-sheet-backdrop.open {
  1747. display: block;
  1748. }
  1749. ​
  1750. .dash-nav-sheet {
  1751. display: none;
  1752. position: fixed;
  1753. left: 0;
  1754. right: 0;
  1755. bottom: 0;
  1756. background: var(--panel);
  1757. border-top: 1px solid var(--border);
  1758. border-radius: 16px 16px 0 0;
  1759. padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
  1760. z-index: 71;
  1761. box-shadow: var(--shadow-md);
  1762. max-height: 70vh;
  1763. overflow-y: auto;
  1764. }
  1765. ​
  1766. .dash-nav-sheet.open {
  1767. display: block;
  1768. animation: dashSheetIn .18s ease-out;
  1769. }
  1770. ​
  1771. @keyframes dashSheetIn {
  1772. from {
  1773. transform: translateY(12px);
  1774. opacity: 0;
  1775. }
  1776. ​
  1777. to {
  1778. transform: translateY(0);
  1779. opacity: 1;
  1780. }
  1781. }
  1782. ​
  1783. .dash-nav-sheet-handle {
  1784. width: 36px;
  1785. height: 4px;
  1786. border-radius: 999px;
  1787. background: var(--border-strong);
  1788. margin: 6px auto 12px;
  1789. }
  1790. ​
  1791. .dash-nav-sheet a {
  1792. display: flex;
  1793. align-items: center;
  1794. gap: 12px;
  1795. padding: 12px 10px;
  1796. color: var(--text);
  1797. text-decoration: none;
  1798. font-size: 14px;
  1799. font-weight: 500;
  1800. border-radius: var(--radius-sm);
  1801. }
  1802. ​
  1803. .dash-nav-sheet a:active {
  1804. background: var(--panel-alt);
  1805. }
  1806. ​
  1807. .dash-nav-sheet a.active {
  1808. color: var(--accent);
  1809. background: var(--accent-dim);
  1810. }
  1811. }
  1812. ​
  1813. @media (min-width: 861px) {
  1814. ​
  1815. .dash-nav-sheet,
  1816. .dash-nav-sheet-backdrop {
  1817. display: none !important;
  1818. }
  1819. }
  1820. ​
  1821. .updater-card {
  1822. display: flex;
  1823. align-items: center;
  1824. justify-content: space-between;
  1825. gap: 16px;
  1826. flex-wrap: wrap;
  1827. max-width: 640px;
  1828. margin-bottom: 24px;
  1829. }
  1830. ​
  1831. .updater-card-info {
  1832. display: flex;
  1833. align-items: center;
  1834. gap: 12px;
  1835. min-width: 0;
  1836. }
  1837. ​
  1838. .updater-card-info .icon {
  1839. color: var(--accent);
  1840. }
  1841. ​
  1842. .updater-card-title {
  1843. font-weight: 600;
  1844. font-size: 14px;
  1845. }
  1846. ​
  1847. .updater-card-version {
  1848. color: var(--muted);
  1849. font-size: 12.5px;
  1850. }
  1851. ​
  1852. .updater-note {
  1853. display: flex;
  1854. align-items: center;
  1855. gap: 8px;
  1856. color: var(--muted);
  1857. font-size: 12.5px;
  1858. margin: 14px 0 0;
  1859. }
  1860. ​
  1861. .contact-topics {
  1862. display: flex;
  1863. flex-direction: column;
  1864. gap: 8px;
  1865. margin-bottom: 8px;
  1866. }
  1867. ​
  1868. .contact-topic-row {
  1869. display: grid;
  1870. grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  1871. gap: 8px;
  1872. align-items: center;
  1873. }
  1874. ​
  1875. .contact-topic-row input {
  1876. margin: 0;
  1877. }
  1878. ​
  1879. @media (max-width: 640px) {
  1880. .contact-topic-row {
  1881. grid-template-columns: minmax(0, 1fr) auto;
  1882. }
  1883. ​
  1884. .contact-topic-row input[type="email"] {
  1885. grid-column: 1;
  1886. grid-row: 2;
  1887. }
  1888. }
  1889. ​
  1890. .updater-warning {
  1891. display: flex;
  1892. align-items: flex-start;
  1893. gap: 10px;
  1894. padding: 12px 14px;
  1895. margin: 0 0 14px;
  1896. background: var(--warning-dim);
  1897. border: 1px solid var(--warning);
  1898. border-radius: var(--radius-sm);
  1899. font-size: 13px;
  1900. line-height: 1.5;
  1901. color: var(--text);
  1902. }
  1903. ​
  1904. .updater-warning .icon {
  1905. flex: 0 0 auto;
  1906. margin-top: 2px;
  1907. color: var(--warning);
  1908. }
  1909. ​
  1910. .updater-auto-form {
  1911. display: flex;
  1912. flex-direction: column;
  1913. align-items: flex-start;
  1914. gap: 8px;
  1915. }
  1916. ​
  1917. .updater-cron {
  1918. margin: 8px 0 0;
  1919. padding: 10px 12px;
  1920. max-width: 100%;
  1921. overflow-x: auto;
  1922. border: 1px solid var(--border);
  1923. border-radius: var(--radius-sm);
  1924. font-size: 12.5px;
  1925. }
  1926. ​
  1927. .updater-changelog {
  1928. margin: 0;
  1929. padding-left: 20px;
  1930. font-size: 13.5px;
  1931. line-height: 1.7;
  1932. }
  1933. ​
  1934. .updater-file {
  1935. border: 1px solid var(--border);
  1936. border-radius: var(--radius-sm);
  1937. background: var(--panel);
  1938. margin-bottom: 8px;
  1939. overflow: hidden;
  1940. }
  1941. ​
  1942. .updater-file summary {
  1943. display: flex;
  1944. align-items: center;
  1945. gap: 10px;
  1946. padding: 10px 14px;
  1947. cursor: pointer;
  1948. font-size: 13px;
  1949. list-style: none;
  1950. }
  1951. ​
  1952. .updater-file summary::-webkit-details-marker {
  1953. display: none;
  1954. }
  1955. ​
  1956. .updater-file summary:hover {
  1957. background: var(--panel-alt);
  1958. }
  1959. ​
  1960. .updater-file-path {
  1961. flex: 1;
  1962. min-width: 0;
  1963. font-family: "SF Mono", Consolas, monospace;
  1964. overflow-wrap: anywhere;
  1965. }
  1966. ​
  1967. .updater-file-stats {
  1968. display: flex;
  1969. gap: 8px;
  1970. font-size: 12px;
  1971. font-weight: 600;
  1972. flex-shrink: 0;
  1973. }
  1974. ​
  1975. .updater-stat-add {
  1976. color: var(--success);
  1977. }
  1978. ​
  1979. .updater-stat-del {
  1980. color: var(--danger);
  1981. }
  1982. ​
  1983. .updater-stat-move {
  1984. color: var(--info);
  1985. }
  1986. ​
  1987. .updater-file .updater-note {
  1988. padding: 0 14px 12px;
  1989. margin: 0;
  1990. }
  1991. ​
  1992. .updater-diff {
  1993. border-top: 1px solid var(--border);
  1994. overflow-x: auto;
  1995. font-family: "SF Mono", Consolas, monospace;
  1996. font-size: 12px;
  1997. line-height: 1.55;
  1998. }
  1999. ​
  2000. .updater-line {
  2001. display: flex;
  2002. min-width: max-content;
  2003. width: 100%;
  2004. }
  2005. ​
  2006. .updater-ln {
  2007. width: 44px;
  2008. padding: 0 8px;
  2009. text-align: right;
  2010. color: var(--muted-dim);
  2011. flex-shrink: 0;
  2012. user-select: none;
  2013. }
  2014. ​
  2015. .updater-marker {
  2016. width: 20px;
  2017. text-align: center;
  2018. flex-shrink: 0;
  2019. user-select: none;
  2020. }
  2021. ​
  2022. .updater-code {
  2023. white-space: pre;
  2024. padding-right: 14px;
  2025. }
  2026. ​
  2027. .updater-line-add {
  2028. background: var(--success-dim);
  2029. }
  2030. ​
  2031. .updater-line-add .updater-marker {
  2032. color: var(--success);
  2033. }
  2034. ​
  2035. .updater-line-del {
  2036. background: var(--danger-dim);
  2037. }
  2038. ​
  2039. .updater-line-del .updater-marker {
  2040. color: var(--danger);
  2041. }
  2042. ​
  2043. .updater-line-move {
  2044. background: var(--info-dim);
  2045. color: var(--muted);
  2046. }
  2047. ​
  2048. .updater-line-move .updater-marker {
  2049. color: var(--info);
  2050. }
  2051. ​
  2052. .updater-gap {
  2053. padding: 2px 14px;
  2054. color: var(--muted-dim);
  2055. background: var(--panel-alt);
  2056. text-align: center;
  2057. }
  2058. ​
  2059. .ai-fab {
  2060. position: fixed;
  2061. right: 24px;
  2062. bottom: 24px;
  2063. z-index: 90;
  2064. display: inline-flex;
  2065. align-items: center;
  2066. gap: 8px;
  2067. padding: 12px 18px;
  2068. border: 1px solid var(--accent);
  2069. border-radius: 999px;
  2070. background: linear-gradient(155deg, var(--accent-hover), var(--accent));
  2071. color: #fff;
  2072. font: inherit;
  2073. font-size: 13px;
  2074. font-weight: 700;
  2075. cursor: pointer;
  2076. box-shadow: var(--shadow-md);
  2077. transition: transform .16s, box-shadow .16s;
  2078. }
  2079. ​
  2080. .ai-fab:hover {
  2081. transform: translateY(-2px);
  2082. }
  2083. ​
  2084. .ai-fab.is-hidden {
  2085. display: none;
  2086. }
  2087. ​
  2088. .ai-panel {
  2089. position: fixed;
  2090. right: 24px;
  2091. bottom: 24px;
  2092. z-index: 95;
  2093. display: none;
  2094. flex-direction: column;
  2095. width: 400px;
  2096. max-width: calc(100vw - 32px);
  2097. height: min(640px, calc(100vh - 48px));
  2098. background: var(--panel);
  2099. border: 1px solid var(--border-strong);
  2100. border-radius: var(--radius);
  2101. box-shadow: var(--shadow-md), var(--inset-hairline);
  2102. overflow: hidden;
  2103. }
  2104. ​
  2105. .ai-panel.is-open {
  2106. display: flex;
  2107. }
  2108. ​
  2109. .ai-header {
  2110. display: flex;
  2111. align-items: center;
  2112. justify-content: space-between;
  2113. gap: 10px;
  2114. padding: 12px 14px;
  2115. border-bottom: 1px solid var(--border);
  2116. background: var(--panel-alt);
  2117. }
  2118. ​
  2119. .ai-header-title {
  2120. display: flex;
  2121. align-items: center;
  2122. gap: 10px;
  2123. min-width: 0;
  2124. color: var(--accent);
  2125. }
  2126. ​
  2127. .ai-title {
  2128. font-size: 14px;
  2129. font-weight: 700;
  2130. color: var(--text);
  2131. }
  2132. ​
  2133. .ai-subtitle {
  2134. font-size: 11.5px;
  2135. color: var(--muted);
  2136. overflow: hidden;
  2137. text-overflow: ellipsis;
  2138. white-space: nowrap;
  2139. }
  2140. ​
  2141. .ai-header-actions {
  2142. display: flex;
  2143. align-items: center;
  2144. gap: 6px;
  2145. flex-shrink: 0;
  2146. }
  2147. ​
  2148. .ai-header-actions .dash-btn-small:disabled {
  2149. opacity: .45;
  2150. cursor: not-allowed;
  2151. }
  2152. ​
  2153. .ai-icon-button {
  2154. display: inline-flex;
  2155. align-items: center;
  2156. justify-content: center;
  2157. width: 28px;
  2158. height: 28px;
  2159. border: none;
  2160. border-radius: var(--radius-sm);
  2161. background: none;
  2162. color: var(--muted);
  2163. cursor: pointer;
  2164. }
  2165. ​
  2166. .ai-icon-button:hover {
  2167. background: var(--panel-hover);
  2168. color: var(--text);
  2169. }
  2170. ​
  2171. .ai-messages {
  2172. flex: 1;
  2173. min-height: 0;
  2174. overflow-y: auto;
  2175. padding: 14px;
  2176. display: flex;
  2177. flex-direction: column;
  2178. gap: 10px;
  2179. }
  2180. ​
  2181. .ai-messages > * {
  2182. flex-shrink: 0;
  2183. }
  2184. ​
  2185. .ai-msg {
  2186. max-width: 92%;
  2187. padding: 9px 12px;
  2188. border-radius: 12px;
  2189. font-size: 13px;
  2190. line-height: 1.5;
  2191. white-space: pre-wrap;
  2192. overflow-wrap: anywhere;
  2193. }
  2194. ​
  2195. .ai-msg-user {
  2196. align-self: flex-end;
  2197. background: var(--accent);
  2198. color: #fff;
  2199. border-bottom-right-radius: 4px;
  2200. }
  2201. ​
  2202. .ai-msg-assistant {
  2203. align-self: flex-start;
  2204. background: var(--panel-alt);
  2205. border: 1px solid var(--border);
  2206. border-bottom-left-radius: 4px;
  2207. }
  2208. ​
  2209. .ai-msg-note {
  2210. align-self: center;
  2211. max-width: 100%;
  2212. padding: 4px 8px;
  2213. color: var(--muted);
  2214. font-size: 12px;
  2215. text-align: center;
  2216. }
  2217. ​
  2218. .ai-msg-error {
  2219. align-self: stretch;
  2220. max-width: 100%;
  2221. background: var(--danger-dim);
  2222. color: var(--danger);
  2223. }
  2224. ​
  2225. .ai-proposal {
  2226. border: 1px solid var(--border-strong);
  2227. border-radius: var(--radius-sm);
  2228. background: var(--bg);
  2229. overflow: hidden;
  2230. }
  2231. ​
  2232. .ai-change {
  2233. border-bottom: 1px solid var(--border);
  2234. font-size: 12.5px;
  2235. }
  2236. ​
  2237. .ai-change:last-child {
  2238. border-bottom: none;
  2239. }
  2240. ​
  2241. .ai-change summary {
  2242. display: flex;
  2243. flex-direction: column;
  2244. gap: 2px;
  2245. padding: 8px 12px;
  2246. cursor: pointer;
  2247. list-style: none;
  2248. }
  2249. ​
  2250. .ai-change summary::-webkit-details-marker {
  2251. display: none;
  2252. }
  2253. ​
  2254. .ai-change summary:hover {
  2255. background: var(--panel-alt);
  2256. }
  2257. ​
  2258. .ai-change-title {
  2259. font-weight: 600;
  2260. }
  2261. ​
  2262. .ai-change-note {
  2263. color: var(--muted);
  2264. }
  2265. ​
  2266. .ai-diff-label {
  2267. padding: 4px 12px 0;
  2268. font-size: 10.5px;
  2269. font-weight: 600;
  2270. letter-spacing: 0.04em;
  2271. text-transform: uppercase;
  2272. color: var(--muted-dim);
  2273. }
  2274. ​
  2275. .ai-diff {
  2276. margin: 4px 12px 8px;
  2277. padding: 8px 10px;
  2278. border-radius: 6px;
  2279. font: inherit;
  2280. font-size: 12px;
  2281. line-height: 1.5;
  2282. white-space: pre-wrap;
  2283. overflow-wrap: anywhere;
  2284. max-height: 160px;
  2285. overflow-y: auto;
  2286. }
  2287. ​
  2288. .ai-diff-before {
  2289. background: var(--danger-dim);
  2290. }
  2291. ​
  2292. .ai-diff-after {
  2293. background: var(--success-dim);
  2294. }
  2295. ​
  2296. .ai-proposal-note {
  2297. padding: 8px 12px;
  2298. border-top: 1px solid var(--border);
  2299. font-size: 12px;
  2300. color: var(--warning);
  2301. }
  2302. ​
  2303. .ai-proposal-actions {
  2304. display: flex;
  2305. flex-wrap: wrap;
  2306. align-items: center;
  2307. gap: 6px;
  2308. padding: 10px 12px;
  2309. border-bottom: 1px solid var(--border);
  2310. background: var(--panel-alt);
  2311. }
  2312. ​
  2313. .ai-proposal {
  2314. flex-shrink: 0;
  2315. }
  2316. ​
  2317. .ai-proposal-status {
  2318. font-size: 12px;
  2319. font-weight: 600;
  2320. color: var(--muted);
  2321. }
  2322. ​
  2323. .ai-quick {
  2324. display: flex;
  2325. flex-wrap: wrap;
  2326. gap: 6px;
  2327. padding: 8px 14px 0;
  2328. }
  2329. ​
  2330. .ai-chip {
  2331. padding: 5px 11px;
  2332. border: 1px solid var(--border);
  2333. border-radius: 999px;
  2334. background: var(--panel-alt);
  2335. color: var(--text);
  2336. font: inherit;
  2337. font-size: 12px;
  2338. font-weight: 600;
  2339. cursor: pointer;
  2340. transition: background .12s, border-color .12s;
  2341. }
  2342. ​
  2343. .ai-chip:hover {
  2344. background: var(--panel-hover);
  2345. border-color: var(--border-strong);
  2346. }
  2347. ​
  2348. .ai-scope {
  2349. display: flex;
  2350. align-items: center;
  2351. gap: 8px;
  2352. padding: 8px 14px 0;
  2353. }
  2354. ​
  2355. .ai-scope label {
  2356. margin: 0;
  2357. font-size: 12px;
  2358. }
  2359. ​
  2360. .ai-scope select {
  2361. width: auto;
  2362. padding: 5px 8px;
  2363. font-size: 12px;
  2364. }
  2365. ​
  2366. .ai-composer {
  2367. display: flex;
  2368. align-items: stretch;
  2369. gap: 8px;
  2370. padding: 10px 14px 14px;
  2371. }
  2372. ​
  2373. .ai-composer textarea {
  2374. flex: 1;
  2375. resize: none;
  2376. margin: 0;
  2377. min-height: 42px;
  2378. max-height: 120px;
  2379. }
  2380. ​
  2381. .ai-send {
  2382. flex: 0 0 56px;
  2383. align-self: stretch;
  2384. height: auto;
  2385. margin: 0;
  2386. padding: 0;
  2387. justify-content: center;
  2388. }
  2389. ​
  2390. @media (max-width: 860px) {
  2391. .ai-fab {
  2392. right: 16px;
  2393. bottom: 84px;
  2394. }
  2395. ​
  2396. .ai-panel {
  2397. right: 8px;
  2398. left: 8px;
  2399. bottom: 76px;
  2400. width: auto;
  2401. max-width: none;
  2402. height: min(560px, calc(100vh - 96px));
  2403. }
  2404. }
  2405. ​
  2406. .dash-user-avatar.has-image {
  2407. overflow: hidden;
  2408. background: transparent;
  2409. }
  2410. ​
  2411. .dash-user-avatar.has-image img {
  2412. display: block;
  2413. width: 100%;
  2414. height: 100%;
  2415. object-fit: cover;
  2416. }
  2417. ​
  2418. .dash-avatar-inline {
  2419. display: inline-flex;
  2420. align-items: center;
  2421. gap: 10px;
  2422. }
  2423. ​
  2424. .dash-avatar-inline .dash-user-avatar {
  2425. width: 28px;
  2426. height: 28px;
  2427. font-size: 11px;
  2428. }
  2429. ​
  2430. .avatar-edit-preview {
  2431. display: flex;
  2432. align-items: center;
  2433. gap: 12px;
  2434. margin-bottom: 8px;
  2435. }
  2436. ​
  2437. .avatar-edit-preview .dash-user-avatar {
  2438. width: 56px;
  2439. height: 56px;
  2440. font-size: 20px;
  2441. }
  2442. ​
  2443. .settings-tabs {
  2444. overflow-x: auto;
  2445. overflow-y: hidden;
  2446. flex-wrap: nowrap;
  2447. white-space: nowrap;
  2448. -webkit-overflow-scrolling: touch;
  2449. scrollbar-width: thin;
  2450. scrollbar-color: var(--border-strong) transparent;
  2451. }
  2452. ​
  2453. .settings-tabs::-webkit-scrollbar {
  2454. height: 6px;
  2455. }
  2456. ​
  2457. .settings-tabs::-webkit-scrollbar-thumb {
  2458. background: var(--border-strong);
  2459. border-radius: 3px;
  2460. }
  2461. ​
  2462. .settings-tabs a {
  2463. flex: 0 0 auto;
  2464. }
  2465. ​
  2466. .dash-btn,
  2467. .dash-btn-small {
  2468. opacity: 1;
  2469. line-height: 1.2;
  2470. white-space: nowrap;
  2471. -webkit-appearance: none;
  2472. appearance: none;
  2473. }
  2474. ​
  2475. .dash-btn:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success),
  2476. .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success) {
  2477. background: var(--panel-alt);
  2478. color: var(--text);
  2479. border-color: var(--border-strong);
  2480. }
  2481. ​
  2482. .dash-btn:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success):hover,
  2483. .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success):hover {
  2484. background: var(--panel-hover);
  2485. color: var(--text);
  2486. }
  2487. ​
  2488. .dash-btn .icon,
  2489. .dash-btn-small .icon {
  2490. flex: 0 0 auto;
  2491. color: currentColor;
  2492. }
  2493. ​
  2494. .dash-btn:focus-visible,
  2495. .dash-btn-small:focus-visible {
  2496. outline: 2px solid var(--accent);
  2497. outline-offset: 2px;
  2498. }
  2499. ​
  2500. .dash-btn:disabled,
  2501. .dash-btn-small:disabled {
  2502. opacity: .5;
  2503. cursor: not-allowed;
  2504. }
  2505. ​
  2506. .dash-btn-success:hover,
  2507. .dash-btn-small.dash-btn-success:hover {
  2508. background: color-mix(in srgb, var(--success) 88%, #fff);
  2509. border-color: var(--success);
  2510. color: #06231a;
  2511. }
  2512. ​
  2513. .dash-btn-danger:hover,
  2514. .dash-btn-small.dash-btn-danger:hover {
  2515. background: var(--danger-dim);
  2516. border-color: var(--danger);
  2517. color: var(--danger);
  2518. }
  2519. ​
  2520. .dash-card {
  2521. position: relative;
  2522. background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff) 0%, var(--panel) 100%);
  2523. border: 1px solid var(--border);
  2524. border-radius: 14px;
  2525. padding: 20px 22px;
  2526. box-shadow: var(--inset-hairline), 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 28px -12px rgba(0, 0, 0, 0.35);
  2527. overflow: hidden;
  2528. }
  2529. ​
  2530. .dash-card::after {
  2531. content: "";
  2532. position: absolute;
  2533. inset: 0 0 auto 0;
  2534. height: 1px;
  2535. background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
  2536. opacity: 0;
  2537. transition: opacity .2s;
  2538. }
  2539. ​
  2540. .dash-card:hover {
  2541. transform: none;
  2542. border-color: var(--border-strong);
  2543. }
  2544. ​
  2545. .dash-card:hover::after {
  2546. opacity: 1;
  2547. }
  2548. ​
  2549. .dash-card-value {
  2550. font-size: 30px;
  2551. font-weight: 600;
  2552. letter-spacing: -0.03em;
  2553. line-height: 1.1;
  2554. font-variant-numeric: tabular-nums;
  2555. }
  2556. ​
  2557. .dash-card-label {
  2558. font-size: 12.5px;
  2559. margin-top: 6px;
  2560. }
  2561. ​
  2562. .dash-table {
  2563. background: var(--panel);
  2564. border: 1px solid var(--border);
  2565. border-radius: 14px;
  2566. box-shadow: var(--inset-hairline), 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 28px -14px rgba(0, 0, 0, 0.35);
  2567. }
  2568. ​
  2569. .dash-table th {
  2570. background: color-mix(in srgb, var(--panel-alt) 60%, var(--panel));
  2571. color: var(--muted-dim);
  2572. font-size: 11px;
  2573. font-weight: 600;
  2574. letter-spacing: .07em;
  2575. padding: 13px 18px;
  2576. border-bottom: 1px solid var(--border);
  2577. }
  2578. ​
  2579. .dash-table th .icon {
  2580. opacity: .7;
  2581. }
  2582. ​
  2583. .dash-table td {
  2584. padding: 15px 18px;
  2585. border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  2586. font-variant-numeric: tabular-nums;
  2587. }
  2588. ​
  2589. .dash-table tbody tr {
  2590. transition: background .15s, box-shadow .15s;
  2591. }
  2592. ​
  2593. .dash-table tbody tr:hover {
  2594. background: color-mix(in srgb, var(--panel-alt) 65%, transparent);
  2595. box-shadow: inset 2px 0 0 var(--accent);
  2596. }
  2597. ​
  2598. .dash-table td:first-child,
  2599. .dash-table td:first-child a {
  2600. font-weight: 600;
  2601. letter-spacing: -0.005em;
  2602. }
  2603. ​
  2604. .dash-table td:not(:first-child):not(:last-child) {
  2605. color: color-mix(in srgb, var(--text) 78%, var(--muted));
  2606. }
  2607. ​
  2608. .status-pill {
  2609. display: inline-flex;
  2610. align-items: center;
  2611. gap: 6px;
  2612. padding: 3px 10px 3px 8px;
  2613. border-radius: 999px;
  2614. font-size: 11.5px;
  2615. font-weight: 600;
  2616. box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  2617. }
  2618. ​
  2619. .status-pill::before {
  2620. content: "";
  2621. width: 6px;
  2622. height: 6px;
  2623. border-radius: 50%;
  2624. background: currentColor;
  2625. flex: 0 0 auto;
  2626. }
  2627. ​
  2628. .dash-table-actions .dash-btn-small {
  2629. border-color: transparent;
  2630. background: transparent;
  2631. color: var(--muted);
  2632. box-shadow: none;
  2633. }
  2634. ​
  2635. .dash-table-actions .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success) {
  2636. background: transparent;
  2637. border-color: transparent;
  2638. color: var(--muted);
  2639. }
  2640. ​
  2641. .dash-table tbody tr:hover .dash-table-actions .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success),
  2642. .dash-table-actions .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success):hover {
  2643. background: var(--panel-alt);
  2644. border-color: var(--border-strong);
  2645. color: var(--text);
  2646. }
  2647. ​
  2648. .dash-table-actions .dash-btn-danger {
  2649. background: transparent;
  2650. border-color: transparent;
  2651. color: var(--muted);
  2652. }
  2653. ​
  2654. .dash-table tbody tr:hover .dash-table-actions .dash-btn-danger {
  2655. color: var(--danger);
  2656. border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  2657. }
  2658. ​
  2659. .dash-table-actions .dash-btn-danger:hover {
  2660. background: var(--danger-dim);
  2661. border-color: var(--danger);
  2662. color: var(--danger);
  2663. }
  2664. ​
  2665. @media (max-width: 860px) {
  2666. .dash-table td {
  2667. padding: 5px 0;
  2668. }
  2669. ​
  2670. .dash-table tbody tr:hover {
  2671. box-shadow: none;
  2672. }
  2673. }
  2674. ​
  2675. :root {
  2676. --ease-out: cubic-bezier(.22, 1, .36, 1);
  2677. --ease-soft: cubic-bezier(.4, 0, .2, 1);
  2678. --dur-fast: .16s;
  2679. --dur: .28s;
  2680. }
  2681. ​
  2682. .dash-btn,
  2683. .dash-btn-small,
  2684. .dash-btn-primary,
  2685. .dash-nav a,
  2686. .dash-theme-toggle,
  2687. .dash-user-logout,
  2688. .settings-tabs a,
  2689. .ai-chip,
  2690. .ai-icon-button,
  2691. .be-block,
  2692. .be-block-toolbar button,
  2693. .updater-file summary {
  2694. transition:
  2695. background-color var(--dur) var(--ease-soft),
  2696. border-color var(--dur) var(--ease-soft),
  2697. color var(--dur) var(--ease-soft),
  2698. box-shadow var(--dur) var(--ease-soft),
  2699. transform var(--dur) var(--ease-out),
  2700. opacity var(--dur) var(--ease-soft);
  2701. }
  2702. ​
  2703. .dash-btn:active,
  2704. .dash-btn-small:active {
  2705. transform: scale(.97);
  2706. transition-duration: .08s;
  2707. }
  2708. ​
  2709. .dash-btn-primary:hover {
  2710. transform: translateY(-1px);
  2711. }
  2712. ​
  2713. .dash-btn-primary:active {
  2714. transform: translateY(0) scale(.98);
  2715. }
  2716. ​
  2717. .dash-nav a:hover {
  2718. transform: translateX(2px);
  2719. }
  2720. ​
  2721. .dash-nav a.active:hover {
  2722. transform: none;
  2723. }
  2724. ​
  2725. .settings-tabs a {
  2726. position: relative;
  2727. border-bottom-color: transparent;
  2728. }
  2729. ​
  2730. .settings-tabs a::after {
  2731. content: "";
  2732. position: absolute;
  2733. left: 16px;
  2734. right: 16px;
  2735. bottom: -1px;
  2736. height: 2px;
  2737. border-radius: 2px;
  2738. background: var(--accent);
  2739. transform: scaleX(0);
  2740. transform-origin: center;
  2741. transition: transform var(--dur) var(--ease-out);
  2742. }
  2743. ​
  2744. .settings-tabs a:hover {
  2745. color: var(--text);
  2746. }
  2747. ​
  2748. .settings-tabs a.active {
  2749. border-bottom-color: transparent;
  2750. }
  2751. ​
  2752. .settings-tabs a.active::after {
  2753. transform: scaleX(1);
  2754. }
  2755. ​
  2756. .dash-card {
  2757. transition:
  2758. border-color var(--dur) var(--ease-soft),
  2759. box-shadow var(--dur) var(--ease-soft),
  2760. transform var(--dur) var(--ease-out);
  2761. }
  2762. ​
  2763. .dash-card:hover {
  2764. transform: translateY(-2px);
  2765. }
  2766. ​
  2767. .dash-table tbody tr {
  2768. transition:
  2769. background-color var(--dur) var(--ease-soft),
  2770. box-shadow var(--dur) var(--ease-soft);
  2771. }
  2772. ​
  2773. .dash-table a,
  2774. .status-pill {
  2775. transition: color var(--dur) var(--ease-soft), background-color var(--dur) var(--ease-soft);
  2776. }
  2777. ​
  2778. .dash-main input:not([type="checkbox"]),
  2779. .dash-main select,
  2780. .dash-main textarea {
  2781. transition:
  2782. border-color var(--dur) var(--ease-soft),
  2783. box-shadow var(--dur) var(--ease-soft),
  2784. background-color var(--dur) var(--ease-soft);
  2785. }
  2786. ​
  2787. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]) {
  2788. transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
  2789. }
  2790. ​
  2791. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"])::before {
  2792. transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-soft);
  2793. }
  2794. ​
  2795. ​
  2796. ​
  2797. .ai-panel.is-open {
  2798. animation: dashPop .32s var(--ease-out) backwards;
  2799. transform-origin: bottom right;
  2800. }
  2801. ​
  2802. .ai-fab {
  2803. transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-soft);
  2804. }
  2805. ​
  2806. .ai-msg {
  2807. animation: dashRise .3s var(--ease-out) backwards;
  2808. }
  2809. ​
  2810. .dash-nav-sheet.open {
  2811. animation: dashSheetUp .38s var(--ease-out) backwards;
  2812. }
  2813. ​
  2814. .dash-nav-sheet-backdrop.open {
  2815. animation: dashFade .3s var(--ease-soft) backwards;
  2816. }
  2817. ​
  2818. .be-block-toolbar {
  2819. transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-out);
  2820. transform: translateY(4px);
  2821. }
  2822. ​
  2823. .be-block:hover .be-block-toolbar,
  2824. .be-block:focus-within .be-block-toolbar {
  2825. transform: translateY(0);
  2826. }
  2827. ​
  2828. .be-inline-toolbar,
  2829. .be-color-popover,
  2830. .be-block-menu {
  2831. animation: dashPop .18s var(--ease-out) backwards;
  2832. transform-origin: top left;
  2833. }
  2834. ​
  2835. @keyframes dashRise {
  2836. from { opacity: 0; transform: translateY(10px); }
  2837. to { opacity: 1; transform: translateY(0); }
  2838. }
  2839. ​
  2840. @keyframes dashPop {
  2841. from { opacity: 0; transform: translateY(8px) scale(.97); }
  2842. to { opacity: 1; transform: translateY(0) scale(1); }
  2843. }
  2844. ​
  2845. @keyframes dashFade {
  2846. from { opacity: 0; }
  2847. to { opacity: 1; }
  2848. }
  2849. ​
  2850. @keyframes dashSheetUp {
  2851. from { opacity: 0; transform: translateY(24px); }
  2852. to { opacity: 1; transform: translateY(0); }
  2853. }
  2854. ​
  2855. @media (prefers-reduced-motion: reduce) {
  2856. *,
  2857. *::before,
  2858. *::after {
  2859. animation-duration: .01ms !important;
  2860. animation-delay: 0s !important;
  2861. animation-iteration-count: 1 !important;
  2862. transition-duration: .01ms !important;
  2863. scroll-behavior: auto !important;
  2864. }
  2865. }
  2866. ​
  2867. .dash-nav a,
  2868. .dash-nav a:hover,
  2869. .dash-nav a:active,
  2870. .dash-nav a.active,
  2871. .dash-nav-sheet a,
  2872. .dash-nav-more-btn {
  2873. transform: none;
  2874. transition: none;
  2875. }
  2876. ​
  2877. @media (max-width: 860px) {
  2878. .dash-sidebar {
  2879. left: 8px;
  2880. right: 8px;
  2881. bottom: calc(8px + env(safe-area-inset-bottom));
  2882. width: auto;
  2883. padding: 6px;
  2884. border: 1px solid var(--border-strong);
  2885. border-radius: 24px;
  2886. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), var(--inset-hairline);
  2887. }
  2888. ​
  2889. .dash-nav a,
  2890. .dash-nav-more-btn {
  2891. border-radius: 18px;
  2892. }
  2893. ​
  2894. .dash-main {
  2895. padding-bottom: 104px;
  2896. border-radius: 24px 24px 0 0;
  2897. }
  2898. ​
  2899. .dash-nav-sheet {
  2900. left: 8px;
  2901. right: 8px;
  2902. bottom: calc(8px + env(safe-area-inset-bottom));
  2903. border: 1px solid var(--border-strong);
  2904. border-radius: 24px;
  2905. }
  2906. ​
  2907. .ai-fab {
  2908. bottom: calc(92px + env(safe-area-inset-bottom));
  2909. }
  2910. ​
  2911. .ai-panel {
  2912. bottom: calc(92px + env(safe-area-inset-bottom));
  2913. border-radius: 20px;
  2914. }
  2915. }
  2916. ​
  2917. input:not([type]),
  2918. input[type="url"],
  2919. input[type="search"],
  2920. input[type="tel"],
  2921. input[type="date"],
  2922. input[type="time"],
  2923. input[type="month"],
  2924. input[type="week"] {
  2925. width: 100%;
  2926. padding: 10px 12px;
  2927. border-radius: var(--radius-sm);
  2928. border: 1px solid var(--border);
  2929. background: var(--bg);
  2930. color: var(--text);
  2931. font-size: 13.5px;
  2932. font-family: inherit;
  2933. transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
  2934. }
  2935. ​
  2936. input[type="url"]::placeholder,
  2937. input[type="search"]::placeholder,
  2938. input[type="tel"]::placeholder,
  2939. input:not([type])::placeholder,
  2940. input[type="text"]::placeholder,
  2941. input[type="email"]::placeholder,
  2942. input[type="password"]::placeholder,
  2943. input[type="number"]::placeholder,
  2944. textarea::placeholder {
  2945. color: var(--muted-dim);
  2946. opacity: 1;
  2947. }
  2948. ​
  2949. input[type="date"]::-webkit-calendar-picker-indicator,
  2950. input[type="time"]::-webkit-calendar-picker-indicator {
  2951. cursor: pointer;
  2952. filter: invert(1);
  2953. opacity: .7;
  2954. }
  2955. ​
  2956. body[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
  2957. body[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  2958. filter: none;
  2959. }
  2960. ​
  2961. input[type="file"] {
  2962. width: 100%;
  2963. padding: 8px;
  2964. border-radius: var(--radius-sm);
  2965. border: 1px dashed var(--border-strong);
  2966. background: var(--bg);
  2967. color: var(--muted);
  2968. font-size: 12.5px;
  2969. font-family: inherit;
  2970. cursor: pointer;
  2971. }
  2972. ​
  2973. input[type="file"]::file-selector-button {
  2974. margin-right: 12px;
  2975. padding: 6px 12px;
  2976. border-radius: 6px;
  2977. border: 1px solid var(--border-strong);
  2978. background: var(--panel-alt);
  2979. color: var(--text);
  2980. font-family: inherit;
  2981. font-size: 12px;
  2982. font-weight: 600;
  2983. cursor: pointer;
  2984. }
  2985. ​
  2986. input[type="file"]::file-selector-button:hover {
  2987. background: var(--panel-hover);
  2988. }
  2989. ​
  2990. @media (max-width: 860px) {
  2991. .dash-mobile-topbar {
  2992. padding-top: calc(12px + env(safe-area-inset-top));
  2993. padding-left: calc(16px + env(safe-area-inset-left));
  2994. padding-right: calc(16px + env(safe-area-inset-right));
  2995. }
  2996. ​
  2997. .dash-main {
  2998. padding-left: calc(16px + env(safe-area-inset-left));
  2999. padding-right: calc(16px + env(safe-area-inset-right));
  3000. overflow-x: clip;
  3001. }
  3002. ​
  3003. .dash-cards {
  3004. margin-left: calc(-16px - env(safe-area-inset-left));
  3005. margin-right: calc(-16px - env(safe-area-inset-right));
  3006. padding-left: calc(16px + env(safe-area-inset-left));
  3007. padding-right: calc(16px + env(safe-area-inset-right));
  3008. scroll-padding-left: calc(16px + env(safe-area-inset-left));
  3009. scroll-padding-right: calc(16px + env(safe-area-inset-right));
  3010. padding-top: 2px;
  3011. padding-bottom: 6px;
  3012. }
  3013. ​
  3014. .dash-card {
  3015. flex: 0 0 auto;
  3016. width: min(220px, 72vw);
  3017. }
  3018. ​
  3019. .dash-sidebar {
  3020. left: calc(8px + env(safe-area-inset-left));
  3021. right: calc(8px + env(safe-area-inset-right));
  3022. }
  3023. ​
  3024. .dash-nav-sheet {
  3025. left: calc(8px + env(safe-area-inset-left));
  3026. right: calc(8px + env(safe-area-inset-right));
  3027. }
  3028. ​
  3029. .ai-fab {
  3030. right: calc(16px + env(safe-area-inset-right));
  3031. }
  3032. ​
  3033. .ai-panel {
  3034. left: calc(8px + env(safe-area-inset-left));
  3035. right: calc(8px + env(safe-area-inset-right));
  3036. }
  3037. }
  3038. ​
  3039. @media (max-width: 860px) {
  3040. .dash-cards {
  3041. padding-top: 12px;
  3042. padding-bottom: 22px;
  3043. margin-top: -12px;
  3044. margin-bottom: 2px;
  3045. }
  3046. ​
  3047. .dash-card,
  3048. .dash-card:hover {
  3049. transform: none;
  3050. overflow: hidden;
  3051. border-radius: 16px;
  3052. }
  3053. ​
  3054. .dash-mobile-topbar::after {
  3055. display: none;
  3056. }
  3057. }
  3058. ​
  3059. .dash-btn-primary,
  3060. .ai-fab {
  3061. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 11%, transparent));
  3062. border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  3063. color: var(--accent-hover);
  3064. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), var(--inset-hairline);
  3065. -webkit-backdrop-filter: blur(6px);
  3066. backdrop-filter: blur(6px);
  3067. }
  3068. ​
  3069. body[data-theme="light"] .dash-btn-primary,
  3070. body[data-theme="light"] .ai-fab {
  3071. color: var(--accent);
  3072. }
  3073. ​
  3074. .dash-btn-primary:hover,
  3075. .ai-fab:hover {
  3076. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  3077. border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  3078. color: var(--accent-hover);
  3079. box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), var(--inset-hairline);
  3080. }
  3081. ​
  3082. body[data-theme="light"] .dash-btn-primary:hover,
  3083. body[data-theme="light"] .ai-fab:hover {
  3084. color: var(--accent);
  3085. }
  3086. ​
  3087. .dash-btn-success,
  3088. .dash-btn-small.dash-btn-success {
  3089. background: linear-gradient(180deg, color-mix(in srgb, var(--success) 22%, transparent), color-mix(in srgb, var(--success) 10%, transparent));
  3090. border-color: color-mix(in srgb, var(--success) 34%, transparent);
  3091. color: var(--success);
  3092. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 10%, transparent), var(--inset-hairline);
  3093. }
  3094. ​
  3095. .dash-btn-success:hover,
  3096. .dash-btn-small.dash-btn-success:hover {
  3097. background: linear-gradient(180deg, color-mix(in srgb, var(--success) 32%, transparent), color-mix(in srgb, var(--success) 18%, transparent));
  3098. border-color: color-mix(in srgb, var(--success) 55%, transparent);
  3099. color: var(--success);
  3100. }
  3101. ​
  3102. .dash-btn-danger,
  3103. .dash-btn-small.dash-btn-danger {
  3104. background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 14%, transparent), color-mix(in srgb, var(--danger) 6%, transparent));
  3105. border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  3106. color: var(--danger);
  3107. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 8%, transparent);
  3108. }
  3109. ​
  3110. .dash-btn-danger:hover,
  3111. .dash-btn-small.dash-btn-danger:hover {
  3112. background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 26%, transparent), color-mix(in srgb, var(--danger) 14%, transparent));
  3113. border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  3114. color: var(--danger);
  3115. }
  3116. ​
  3117. .dash-btn:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success),
  3118. .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success) {
  3119. background: linear-gradient(180deg, color-mix(in srgb, var(--panel-alt) 100%, #fff 3%), var(--panel-alt));
  3120. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent), var(--inset-hairline);
  3121. }
  3122. ​
  3123. .dash-btn:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success):hover,
  3124. .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success):hover {
  3125. border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  3126. }
  3127. ​
  3128. .ai-msg-user {
  3129. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--panel)), color-mix(in srgb, var(--accent) 16%, var(--panel)));
  3130. border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  3131. color: var(--text);
  3132. }
  3133. ​
  3134. .be-inline-toolbar button:hover {
  3135. background: color-mix(in srgb, var(--accent) 22%, transparent);
  3136. color: var(--accent-hover);
  3137. }
  3138. ​
  3139. .be-block-menu {
  3140. padding: 6px;
  3141. gap: 2px;
  3142. }
  3143. ​
  3144. .be-block-menu button {
  3145. position: relative;
  3146. overflow: hidden;
  3147. border-radius: 9px;
  3148. padding: 9px 12px 9px 14px;
  3149. border: 1px solid transparent;
  3150. transition:
  3151. background-color var(--dur) var(--ease-soft),
  3152. border-color var(--dur) var(--ease-soft),
  3153. color var(--dur) var(--ease-soft),
  3154. padding-left var(--dur) var(--ease-out);
  3155. animation: dashMenuItem .34s var(--ease-out) backwards;
  3156. }
  3157. ​
  3158. .be-block-menu button::before {
  3159. content: "";
  3160. position: absolute;
  3161. left: 0;
  3162. top: 22%;
  3163. bottom: 22%;
  3164. width: 3px;
  3165. border-radius: 0 3px 3px 0;
  3166. background: var(--accent);
  3167. transform: scaleY(0);
  3168. transition: transform var(--dur) var(--ease-out);
  3169. }
  3170. ​
  3171. .be-block-menu button:hover,
  3172. .be-block-menu button:focus-visible,
  3173. .be-block-menu button.active,
  3174. .be-block-menu button.is-active,
  3175. .be-block-menu button[aria-selected="true"] {
  3176. background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 9%, transparent));
  3177. border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  3178. color: var(--accent-hover);
  3179. padding-left: 18px;
  3180. outline: none;
  3181. }
  3182. ​
  3183. body[data-theme="light"] .be-block-menu button:hover,
  3184. body[data-theme="light"] .be-block-menu button.active {
  3185. color: var(--accent);
  3186. }
  3187. ​
  3188. .be-block-menu button:hover::before,
  3189. .be-block-menu button:focus-visible::before,
  3190. .be-block-menu button.active::before,
  3191. .be-block-menu button.is-active::before,
  3192. .be-block-menu button[aria-selected="true"]::before {
  3193. transform: scaleY(1);
  3194. }
  3195. ​
  3196. .be-block-menu button:nth-child(1) { animation-delay: .00s; }
  3197. .be-block-menu button:nth-child(2) { animation-delay: .02s; }
  3198. .be-block-menu button:nth-child(3) { animation-delay: .04s; }
  3199. .be-block-menu button:nth-child(4) { animation-delay: .06s; }
  3200. .be-block-menu button:nth-child(5) { animation-delay: .08s; }
  3201. .be-block-menu button:nth-child(6) { animation-delay: .10s; }
  3202. .be-block-menu button:nth-child(7) { animation-delay: .12s; }
  3203. .be-block-menu button:nth-child(8) { animation-delay: .14s; }
  3204. .be-block-menu button:nth-child(9) { animation-delay: .16s; }
  3205. .be-block-menu button:nth-child(n+10) { animation-delay: .18s; }
  3206. ​
  3207. @keyframes dashMenuItem {
  3208. from { opacity: 0; transform: translateX(-6px); }
  3209. to { opacity: 1; transform: translateX(0); }
  3210. }
  3211. ​
  3212. .dash-table tbody tr:hover {
  3213. box-shadow: none;
  3214. }
  3215. ​
  3216. .dash-card::after {
  3217. display: none;
  3218. }
  3219. ​
  3220. .be-block-menu button::before {
  3221. display: none;
  3222. }
  3223. ​
  3224. .be-block-menu button,
  3225. .be-block-menu button:hover,
  3226. .be-block-menu button:focus-visible {
  3227. padding: 9px 12px;
  3228. animation: none;
  3229. }
  3230. ​
  3231. .settings-tabs a::after {
  3232. display: none;
  3233. }
  3234. ​
  3235. .settings-tabs a.active {
  3236. border-bottom-color: var(--accent);
  3237. }
  3238. ​
  3239. @media (max-width: 860px) {
  3240. .dash-mobile-topbar::after {
  3241. display: block;
  3242. content: '';
  3243. position: absolute;
  3244. left: 0;
  3245. right: 0;
  3246. top: calc(100% - 1px);
  3247. height: 24px;
  3248. pointer-events: none;
  3249. z-index: 1;
  3250. background:
  3251. radial-gradient(circle at 100% 100%, transparent 23.5px, var(--bg) 24.5px) left top / 24px 24px no-repeat,
  3252. radial-gradient(circle at 0 100%, transparent 23.5px, var(--bg) 24.5px) right top / 24px 24px no-repeat;
  3253. }
  3254. }
  3255. ​
  3256. input[type="text"],
  3257. input[type="number"],
  3258. input[type="datetime-local"],
  3259. input[type="password"],
  3260. input[type="email"],
  3261. input:not([type]),
  3262. input[type="url"],
  3263. input[type="search"],
  3264. input[type="tel"],
  3265. input[type="date"],
  3266. input[type="time"],
  3267. input[type="month"],
  3268. input[type="week"],
  3269. select,
  3270. textarea {
  3271. background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 100%, #fff 2.5%), var(--bg));
  3272. border-color: color-mix(in srgb, var(--border-strong) 80%, transparent);
  3273. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px color-mix(in srgb, var(--text) 2.5%, transparent);
  3274. }
  3275. ​
  3276. input[type="text"]:hover,
  3277. input[type="number"]:hover,
  3278. input[type="datetime-local"]:hover,
  3279. input[type="password"]:hover,
  3280. input[type="email"]:hover,
  3281. input:not([type]):hover,
  3282. input[type="url"]:hover,
  3283. input[type="search"]:hover,
  3284. input[type="tel"]:hover,
  3285. input[type="date"]:hover,
  3286. input[type="time"]:hover,
  3287. select:hover,
  3288. textarea:hover {
  3289. border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  3290. }
  3291. ​
  3292. input[type="text"]:focus,
  3293. input[type="number"]:focus,
  3294. input[type="datetime-local"]:focus,
  3295. input[type="password"]:focus,
  3296. input[type="email"]:focus,
  3297. input:not([type]):focus,
  3298. input[type="url"]:focus,
  3299. input[type="search"]:focus,
  3300. input[type="tel"]:focus,
  3301. input[type="date"]:focus,
  3302. input[type="time"]:focus,
  3303. select:focus,
  3304. textarea:focus {
  3305. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg)), color-mix(in srgb, var(--accent) 3%, var(--bg)));
  3306. border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  3307. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  3308. }
  3309. ​
  3310. select {
  3311. cursor: pointer;
  3312. }
  3313. ​
  3314. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]) {
  3315. background: linear-gradient(180deg, color-mix(in srgb, var(--panel-alt) 100%, #fff 3%), var(--panel-alt));
  3316. border-color: color-mix(in srgb, var(--border-strong) 90%, transparent);
  3317. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent);
  3318. }
  3319. ​
  3320. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"])::before {
  3321. background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 100%, #fff 12%), var(--muted));
  3322. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  3323. }
  3324. ​
  3325. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):hover {
  3326. border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  3327. }
  3328. ​
  3329. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):checked {
  3330. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  3331. border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  3332. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
  3333. }
  3334. ​
  3335. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):checked::before {
  3336. background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent-hover) 30%, #fff));
  3337. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  3338. }
  3339. ​
  3340. .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):focus-visible {
  3341. outline: none;
  3342. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  3343. }
  3344. ​
  3345. body[data-theme="light"] input[type="text"],
  3346. body[data-theme="light"] input[type="number"],
  3347. body[data-theme="light"] input[type="password"],
  3348. body[data-theme="light"] input[type="email"],
  3349. body[data-theme="light"] input[type="url"],
  3350. body[data-theme="light"] select,
  3351. body[data-theme="light"] textarea {
  3352. box-shadow: inset 0 1px 2px rgba(20, 20, 30, 0.06);
  3353. }
  3354. ​
  3355. .dash-flash {
  3356. animation: dashRise .4s var(--ease-out) backwards;
  3357. }
  3358. ​
  3359. .dash-cards .dash-card {
  3360. animation: dashRise .5s var(--ease-out) backwards;
  3361. }
  3362. ​
  3363. .dash-cards .dash-card:nth-child(2) { animation-delay: .05s; }
  3364. .dash-cards .dash-card:nth-child(3) { animation-delay: .1s; }
  3365. .dash-cards .dash-card:nth-child(4) { animation-delay: .15s; }
  3366. ​
  3367. .dash-table tbody tr {
  3368. animation: dashRise .45s var(--ease-out) backwards;
  3369. }
  3370. ​
  3371. .dash-table tbody tr:nth-child(2) { animation-delay: .03s; }
  3372. .dash-table tbody tr:nth-child(3) { animation-delay: .06s; }
  3373. .dash-table tbody tr:nth-child(4) { animation-delay: .09s; }
  3374. .dash-table tbody tr:nth-child(5) { animation-delay: .12s; }
  3375. .dash-table tbody tr:nth-child(6) { animation-delay: .15s; }
  3376. .dash-table tbody tr:nth-child(n+7) { animation-delay: .18s; }
  3377. ​
  3378. @media (max-width: 860px) {
  3379. .dash-cards .dash-card {
  3380. animation: dashFade .4s var(--ease-soft) backwards;
  3381. }
  3382. }
  3383. ​
  3384. .dash-main {
  3385. animation: none !important;
  3386. transform: none !important;
  3387. }
  3388. ​
  3389. @media (max-width: 860px) {
  3390. .dash-cards {
  3391. display: grid;
  3392. grid-template-columns: repeat(2, minmax(0, 1fr));
  3393. gap: 12px;
  3394. overflow: visible;
  3395. scroll-snap-type: none;
  3396. margin: 0 0 24px;
  3397. padding: 0;
  3398. }
  3399. ​
  3400. .dash-cards .dash-card {
  3401. width: auto;
  3402. min-width: 0;
  3403. flex: none;
  3404. padding: 16px 16px;
  3405. scroll-snap-align: none;
  3406. }
  3407. ​
  3408. .dash-card-value {
  3409. font-size: 26px;
  3410. }
  3411. ​
  3412. .dash-card-label {
  3413. overflow-wrap: anywhere;
  3414. }
  3415. }
  3416. ​
  3417. body[data-theme="dark"] {
  3418. color-scheme: dark;
  3419. }
  3420. ​
  3421. body[data-theme="light"] {
  3422. color-scheme: light;
  3423. }
  3424. ​
  3425. select option,
  3426. select optgroup {
  3427. background: var(--panel);
  3428. color: var(--text);
  3429. }
  3430. ​
  3431. select option:checked,
  3432. select option:hover {
  3433. background: var(--accent);
  3434. color: #fff;
  3435. }
  3436. ​
  3437. .image-upload-row {
  3438. display: flex;
  3439. align-items: stretch;
  3440. gap: 8px;
  3441. }
  3442. ​
  3443. .image-upload-row > input[type="text"] {
  3444. flex: 1 1 auto;
  3445. min-width: 0;
  3446. }
  3447. ​
  3448. .image-upload-button {
  3449. flex: 0 0 auto;
  3450. white-space: nowrap;
  3451. }
  3452. ​
  3453. .image-upload-status {
  3454. min-height: 0;
  3455. margin-top: 6px;
  3456. font-size: 12px;
  3457. color: var(--muted);
  3458. }
  3459. ​
  3460. .image-upload-status:empty {
  3461. display: none;
  3462. }
  3463. ​
  3464. @media (max-width: 480px) {
  3465. .image-upload-row {
  3466. flex-direction: column;
  3467. }
  3468. }
  3469. ​
  3470. [hidden] {
  3471. display: none !important;
  3472. }
  3473. ​
  3474. body.media-modal-open {
  3475. overflow: hidden;
  3476. }
  3477. ​
  3478. .media-modal-overlay {
  3479. position: fixed;
  3480. inset: 0;
  3481. z-index: 300;
  3482. display: flex;
  3483. align-items: center;
  3484. justify-content: center;
  3485. padding: 24px;
  3486. background: rgba(0, 0, 0, 0.6);
  3487. -webkit-backdrop-filter: blur(4px);
  3488. backdrop-filter: blur(4px);
  3489. }
  3490. ​
  3491. .media-modal {
  3492. display: flex;
  3493. flex-direction: column;
  3494. width: min(880px, 100%);
  3495. height: min(640px, 100%);
  3496. background: var(--panel);
  3497. border: 1px solid var(--border-strong);
  3498. border-radius: 16px;
  3499. box-shadow: var(--shadow-md), var(--inset-hairline);
  3500. overflow: hidden;
  3501. }
  3502. ​
  3503. .media-modal-header {
  3504. display: flex;
  3505. align-items: center;
  3506. justify-content: space-between;
  3507. gap: 12px;
  3508. padding: 10px 12px 10px 16px;
  3509. border-bottom: 1px solid var(--border);
  3510. background: var(--panel-alt);
  3511. }
  3512. ​
  3513. .media-modal-tabs {
  3514. display: flex;
  3515. gap: 4px;
  3516. padding: 4px;
  3517. border-radius: 10px;
  3518. background: var(--bg);
  3519. border: 1px solid var(--border);
  3520. }
  3521. ​
  3522. .media-modal-tab {
  3523. padding: 7px 16px;
  3524. border: 1px solid transparent;
  3525. border-radius: 8px;
  3526. background: transparent;
  3527. color: var(--muted);
  3528. font: inherit;
  3529. font-size: 13px;
  3530. font-weight: 600;
  3531. cursor: pointer;
  3532. transition: background-color .2s, color .2s, border-color .2s;
  3533. }
  3534. ​
  3535. .media-modal-tab:hover {
  3536. color: var(--text);
  3537. }
  3538. ​
  3539. .media-modal-tab.is-active {
  3540. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 11%, transparent));
  3541. border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  3542. color: var(--accent);
  3543. }
  3544. ​
  3545. .media-modal-close {
  3546. width: 32px;
  3547. height: 32px;
  3548. border: none;
  3549. border-radius: 8px;
  3550. background: transparent;
  3551. color: var(--muted);
  3552. font-size: 22px;
  3553. line-height: 1;
  3554. cursor: pointer;
  3555. transition: background-color .2s, color .2s;
  3556. }
  3557. ​
  3558. .media-modal-close:hover {
  3559. background: var(--panel-hover);
  3560. color: var(--text);
  3561. }
  3562. ​
  3563. .media-modal-body {
  3564. flex: 1 1 auto;
  3565. min-height: 0;
  3566. overflow-y: auto;
  3567. padding: 18px;
  3568. }
  3569. ​
  3570. .media-modal-pane {
  3571. min-height: 100%;
  3572. }
  3573. ​
  3574. .media-drop {
  3575. display: flex;
  3576. flex-direction: column;
  3577. align-items: center;
  3578. justify-content: center;
  3579. gap: 6px;
  3580. min-height: 260px;
  3581. margin: 0;
  3582. padding: 24px;
  3583. border: 1.5px dashed var(--border-strong);
  3584. border-radius: 14px;
  3585. background: var(--bg);
  3586. text-align: center;
  3587. cursor: pointer;
  3588. transition: border-color .2s, background-color .2s;
  3589. }
  3590. ​
  3591. .media-drop:hover,
  3592. .media-drop.is-over {
  3593. border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  3594. background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  3595. }
  3596. ​
  3597. .media-drop.is-busy {
  3598. opacity: .6;
  3599. pointer-events: none;
  3600. }
  3601. ​
  3602. .media-drop-title {
  3603. font-size: 15px;
  3604. font-weight: 600;
  3605. color: var(--text);
  3606. }
  3607. ​
  3608. .media-drop-hint {
  3609. font-size: 12.5px;
  3610. font-weight: 500;
  3611. color: var(--muted);
  3612. }
  3613. ​
  3614. .media-status {
  3615. margin-top: 12px;
  3616. font-size: 12.5px;
  3617. color: var(--muted);
  3618. }
  3619. ​
  3620. .media-status:empty {
  3621. display: none;
  3622. }
  3623. ​
  3624. .media-grid {
  3625. display: grid;
  3626. grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  3627. gap: 10px;
  3628. margin-top: 12px;
  3629. }
  3630. ​
  3631. .media-tile {
  3632. position: relative;
  3633. padding: 0;
  3634. aspect-ratio: 1;
  3635. border: 1px solid var(--border);
  3636. border-radius: 10px;
  3637. background: var(--bg);
  3638. overflow: hidden;
  3639. cursor: pointer;
  3640. transition: border-color .2s, transform .15s;
  3641. }
  3642. ​
  3643. .media-tile:hover,
  3644. .media-tile:focus-visible {
  3645. border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  3646. outline: none;
  3647. transform: translateY(-2px);
  3648. }
  3649. ​
  3650. .media-tile img,
  3651. .media-tile video {
  3652. display: block;
  3653. width: 100%;
  3654. height: 100%;
  3655. object-fit: cover;
  3656. }
  3657. ​
  3658. @media (max-width: 600px) {
  3659. .media-modal-overlay {
  3660. padding: 0;
  3661. align-items: flex-end;
  3662. }
  3663. ​
  3664. .media-modal {
  3665. width: 100%;
  3666. height: 88vh;
  3667. border-radius: 16px 16px 0 0;
  3668. }
  3669. ​
  3670. .media-grid {
  3671. grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  3672. }
  3673. }
  3674. ​
  3675. .be-add-row {
  3676. margin-top: 8px;
  3677. padding-left: 0;
  3678. }
  3679. ​
  3680. .be-add-button {
  3681. display: inline-flex;
  3682. align-items: center;
  3683. gap: 6px;
  3684. }
  3685. ​
  3686. body.dash-no-glass {
  3687. --inset-hairline: none;
  3688. }
  3689. ​
  3690. body.dash-no-glass .dash-btn-primary,
  3691. body.dash-no-glass .ai-fab {
  3692. background: var(--accent);
  3693. border-color: var(--accent);
  3694. color: #fff;
  3695. box-shadow: none;
  3696. -webkit-backdrop-filter: none;
  3697. backdrop-filter: none;
  3698. }
  3699. ​
  3700. body.dash-no-glass .dash-btn-primary:hover,
  3701. body.dash-no-glass .ai-fab:hover {
  3702. background: var(--accent-hover);
  3703. border-color: var(--accent-hover);
  3704. color: #fff;
  3705. box-shadow: none;
  3706. }
  3707. ​
  3708. body.dash-no-glass[data-theme="light"] .dash-btn-primary,
  3709. body.dash-no-glass[data-theme="light"] .ai-fab,
  3710. body.dash-no-glass[data-theme="light"] .dash-btn-primary:hover,
  3711. body.dash-no-glass[data-theme="light"] .ai-fab:hover {
  3712. color: #fff;
  3713. }
  3714. ​
  3715. body.dash-no-glass .dash-btn-success,
  3716. body.dash-no-glass .dash-btn-small.dash-btn-success {
  3717. background: var(--success);
  3718. border-color: var(--success);
  3719. color: #06231a;
  3720. box-shadow: none;
  3721. }
  3722. ​
  3723. body.dash-no-glass .dash-btn-success:hover,
  3724. body.dash-no-glass .dash-btn-small.dash-btn-success:hover {
  3725. background: color-mix(in srgb, var(--success) 88%, #fff);
  3726. border-color: var(--success);
  3727. color: #06231a;
  3728. }
  3729. ​
  3730. body.dash-no-glass .dash-btn-danger,
  3731. body.dash-no-glass .dash-btn-small.dash-btn-danger {
  3732. background: transparent;
  3733. border-color: var(--danger);
  3734. color: var(--danger);
  3735. box-shadow: none;
  3736. }
  3737. ​
  3738. body.dash-no-glass .dash-btn-danger:hover,
  3739. body.dash-no-glass .dash-btn-small.dash-btn-danger:hover {
  3740. background: var(--danger-dim);
  3741. border-color: var(--danger);
  3742. color: var(--danger);
  3743. }
  3744. ​
  3745. body.dash-no-glass .dash-btn:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success),
  3746. body.dash-no-glass .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success) {
  3747. background: var(--panel-alt);
  3748. box-shadow: none;
  3749. }
  3750. ​
  3751. body.dash-no-glass .dash-btn:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success):hover,
  3752. body.dash-no-glass .dash-btn-small:not(.dash-btn-primary):not(.dash-btn-danger):not(.dash-btn-success):hover {
  3753. background: var(--panel-hover);
  3754. }
  3755. ​
  3756. body.dash-no-glass .dash-card {
  3757. background: var(--panel);
  3758. }
  3759. ​
  3760. body.dash-no-glass .ai-msg-user {
  3761. background: var(--accent);
  3762. border-color: var(--accent);
  3763. color: #fff;
  3764. }
  3765. ​
  3766. body.dash-no-glass .be-inline-toolbar button:hover {
  3767. background: var(--accent);
  3768. color: #fff;
  3769. }
  3770. ​
  3771. body.dash-no-glass .be-block-menu button:hover,
  3772. body.dash-no-glass .be-block-menu button:focus-visible,
  3773. body.dash-no-glass .be-block-menu button.active,
  3774. body.dash-no-glass .be-block-menu button.is-active,
  3775. body.dash-no-glass .be-block-menu button[aria-selected="true"] {
  3776. background: var(--accent-dim);
  3777. border-color: transparent;
  3778. }
  3779. ​
  3780. body.dash-no-glass .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):checked {
  3781. background: var(--accent);
  3782. border-color: var(--accent);
  3783. box-shadow: none;
  3784. }
  3785. ​
  3786. body.dash-no-glass .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]):checked::before {
  3787. background: #fff;
  3788. }
  3789. ​
  3790. body.dash-no-glass .media-modal-tab.is-active {
  3791. background: var(--accent-dim);
  3792. border-color: transparent;
  3793. }
  3794. ​
  3795. body.dash-no-glass .media-modal-overlay {
  3796. -webkit-backdrop-filter: none;
  3797. backdrop-filter: none;
  3798. }
  3799. ​
  3800. body.dash-no-glass .dash-sidebar,
  3801. body.dash-no-glass .dash-mobile-topbar,
  3802. body.dash-no-glass .be-inline-toolbar,
  3803. body.dash-no-glass .be-color-popover,
  3804. body.dash-no-glass .be-block-menu,
  3805. body.dash-no-glass .ai-panel,
  3806. body.dash-no-glass .media-modal {
  3807. -webkit-backdrop-filter: none;
  3808. backdrop-filter: none;
  3809. }
  3810. ​
  3811. body.dash-minimal {
  3812. --shadow-sm: none;
  3813. --shadow-card: none;
  3814. }
  3815. ​
  3816. body.dash-minimal *,
  3817. body.dash-minimal *::before,
  3818. body.dash-minimal *::after {
  3819. transition: none !important;
  3820. animation: none !important;
  3821. }
  3822. ​
  3823. body.dash-minimal .dash-card,
  3824. body.dash-minimal .dash-table,
  3825. body.dash-minimal .dash-sidebar,
  3826. body.dash-minimal .dash-main,
  3827. body.dash-minimal .sidebar-box {
  3828. box-shadow: none;
  3829. }
  3830. ​
  3831. body.dash-minimal input[type="text"],
  3832. body.dash-minimal input[type="number"],
  3833. body.dash-minimal input[type="datetime-local"],
  3834. body.dash-minimal input[type="password"],
  3835. body.dash-minimal input[type="email"],
  3836. body.dash-minimal input:not([type]),
  3837. body.dash-minimal input[type="url"],
  3838. body.dash-minimal input[type="search"],
  3839. body.dash-minimal input[type="tel"],
  3840. body.dash-minimal input[type="date"],
  3841. body.dash-minimal input[type="time"],
  3842. body.dash-minimal select,
  3843. body.dash-minimal textarea {
  3844. background: var(--bg);
  3845. }
  3846. ​
  3847. body.dash-minimal .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"]) {
  3848. background: var(--panel-alt);
  3849. box-shadow: none;
  3850. }
  3851. ​
  3852. body.dash-minimal .dash-main input[type="checkbox"]:not(.be-block input[type="checkbox"])::before {
  3853. background: var(--muted);
  3854. box-shadow: none;
  3855. }
  3856. ​
  3857. .ad-exclusions {
  3858. margin-bottom: 14px;
  3859. }
  3860. ​
  3861. .ad-exclusion-heading {
  3862. margin: 12px 0 6px;
  3863. font-size: 12px;
  3864. font-weight: 600;
  3865. letter-spacing: 0.04em;
  3866. text-transform: uppercase;
  3867. color: var(--muted);
  3868. }
  3869. ​
  3870. .ad-exclusion-list {
  3871. max-height: 220px;
  3872. overflow-y: auto;
  3873. padding: 6px 10px;
  3874. border: 1px solid var(--border);
  3875. border-radius: 10px;
  3876. }
  3877. ​
  3878. #ad_exclusion_filter {
  3879. margin-bottom: 8px;
  3880. }
  3881. ​
  3882. .dash-main label.ad-exclusion-item {
  3883. display: flex;
  3884. align-items: center;
  3885. gap: 8px;
  3886. margin: 4px 0;
  3887. font-weight: 400;
  3888. }
  3889. ​
  3890. .ad-exclusion-status {
  3891. margin-left: auto;
  3892. font-size: 11.5px;
  3893. color: var(--muted);
  3894. }
  3895. ​