in Editoren. */ > main { display: flex; flex-direction: column; position: relative; z-index: 1; height: 100%; min-width: 0; margin-left: 250px; background: var(--bg-subtle); overflow: auto; transition: margin-left 0.25s ease; } &.collapsed > main { margin-left: 0; } } /* ---------- PaneStack (list + detail inside an editor) ---------- Unknown tags are inline by default; the split itself (columns, sizing) is the consuming editor's business. */ PaneStack { display: flex; min-width: 0; min-height: 0; } /* ---------- Editorhead (shared editor chrome) ---------- */ Editorhead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; box-sizing: border-box; height: 40px; padding: 0 10px 0 6px; border-bottom: 1px solid var(--sidenav-border, #e6e6e6); flex: 0 0 40px; background: #fff; z-index: 3; min-width: 0; user-select: none; .eh-left, .eh-center, .eh-right, .eh-tools { display: flex; align-items: center; min-width: 0; } .eh-left { grid-column: 1; gap: 8px; justify-self: start; } .eh-left-extra { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: 4px; } .eh-center { grid-column: 2; gap: 8px; justify-self: center; } .eh-right { grid-column: 3; gap: 8px; justify-content: flex-end; justify-self: end; } .eh-sidenav { flex: none; width: 28px; height: 28px; img { width: 18px; height: 18px; display: block; } } .eh-type-icon { flex: none; width: 16px; height: 16px; display: block; } .eh-filepath { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink, #1f2328); } .eh-pathdir { font-weight: 400; color: var(--ink-2, #4a4f55); } .eh-filename { font-weight: 700; color: var(--ink, #1f2328); } .eh-dirty { flex: none; color: var(--action, #2563eb); font-size: 18px; line-height: 1; } .eh-tools { gap: 4px; } .eh-zoom { flex: none; font-variant-numeric: tabular-nums; } /* Slot-Hülle bleibt ein reiner Flex-Container für den Beitrag. */ .eh-info { flex: none; display: flex; align-items: center; } .eh-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: transparent; cursor: pointer; color: var(--ink-2, #605e5c); img { width: 16px; height: 16px; display: block; opacity: 0.7; } &:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink, #1f2328); img { opacity: 1; } } } } /* ---------- Sidenav footer ---------- */ SidenavFooter { display: flex; align-items: center; justify-content: space-between; gap: 6px; box-sizing: border-box; height: 36px; padding: 0 8px; background: var(--sidenav-bg); border-top: 1px solid var(--sidenav-border); font-size: 12px; color: var(--ink-3); user-select: none; .user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 4px; border: none; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; &:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); } } .avatar { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; } .avatar::after { content: none; } .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .role { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } .caret { flex: none; width: 12px; height: 12px; opacity: 0.55; } .actions { flex: none; display: inline-flex; align-items: center; gap: 2px; } .ws-status { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px; background: transparent; cursor: pointer; img { width: 16px; height: 16px; display: block; /* hellgrau wenn getrennt */ opacity: 0.45; filter: grayscale(1) brightness(1.35); } &:hover { background: rgba(0, 0, 0, 0.05); } &.connected { cursor: default; img { opacity: 1; /* grün wenn verbunden */ filter: invert(48%) sepia(72%) saturate(480%) hue-rotate(95deg) brightness(95%) contrast(92%); } &:hover { background: transparent; } } } .cog { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px; background: transparent; cursor: pointer; img { width: 16px; height: 16px; display: block; opacity: 0.55; } &:hover, &.active { background: rgba(0, 0, 0, 0.05); img { opacity: 0.9; } } } } .user-menu { position: fixed; z-index: 1000; min-width: 180px; background: var(--bg); border: 1px solid var(--sidenav-border); border-radius: 6px; box-shadow: var(--menu-shadow); padding: 4px 0; font-size: 13px; } .user-menu-empty { padding: 8px 12px; color: var(--ink-3); } .user-menu-item { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 12px; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .user-menu-item:hover { background: var(--bg-subtle, rgba(0, 0, 0, 0.05)); } /* Login gate */ .login-boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-size: 14px; color: var(--ink-3); background: var(--bg); } LoginPage { display: block; min-height: 100vh; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent), var(--bg); } .login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 24px; border: 1px solid var(--border, var(--sidenav-border)); border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-card, 0 8px 28px rgb(0 0 0 / 0.08)); } .login-brand { display: flex; justify-content: center; } /* Das Logo bringt rundum einen durchsichtigen Rand mit (gut ein Sechstel der Kantenlänge). Die negativen Ränder holen ihn zurück, damit der Abstand zum Kartenrand und zum Text so groß wirkt wie überall sonst. */ .login-logo { width: 200px; height: auto; margin: -18px 0 -14px; user-select: none; } .login-lead { margin: -4px 0 4px; font-size: 13px; line-height: 1.45; color: var(--ink-3); text-align: center; } .login-field { display: flex; flex-direction: column; gap: 6px; } .login-label { font-size: 12px; font-weight: 600; color: var(--ink-3); } .login-input { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong, var(--border, var(--sidenav-border))); border-radius: 8px; background: var(--sidenav-bg, var(--bg-subtle, var(--bg))); color: var(--ink); font: inherit; font-size: 14px; outline: none; } .login-input:focus { border-color: var(--accent, var(--action)); box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)); } .login-error { margin: 0; font-size: 13px; color: var(--loss, #b42318); } .login-submit { margin-top: 4px; padding: 11px 16px; border: none; border-radius: 8px; background: var(--accent, var(--action)); color: var(--accent-fg, var(--action-fg, #fff)); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .login-submit:hover:not(:disabled) { filter: brightness(1.05); } .login-submit:disabled { opacity: 0.65; cursor: wait; } .app { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); } /* Fixed chrome — the main nav and the app's sub-tab row never scroll away. */ .nav, .tabs-links { flex: none; } /* brand mark in the nav bar */ .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 23px; letter-spacing: -.01em; } .brand-mark { width: 26px; height: 28px; } .brand-a { font-weight: 700; color: var(--action-hover); } .brand-b { font-weight: 500; color: var(--ink); } .avatar { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 210deg, #1763cf, #19b3c4, #1763cf); display: inline-flex; align-items: center; justify-content: center; } .avatar::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #1763cf; } .bell-wrap { position: relative; display: inline-flex; } .bell-wrap .badge { position: absolute; top: -4px; right: -5px; } /* ---------- Securily header: search + trade CTA ---------- */ .pp-navsearch { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-subtle); color: var(--ink-3); transition: border-color 120ms ease, background 120ms ease; } .pp-navsearch:focus-within { border-color: var(--action); background: #fff; } .pp-navsearch-input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink); width: 200px; } .pp-navsearch-input::placeholder { color: var(--ink-4); } .pp-trade-cta { text-decoration: none; } @media (max-width: 900px) { .pp-navsearch-input { width: 110px; } } /* link-mode tab row (router navigation under main nav or in-page) */ .tabs-links { display: flex; align-items: center; padding: 0 32px; border-bottom: 1px solid var(--line); background: #fff; } .tabs-links .tabs-list { display: flex; align-items: center; gap: 28px; border-bottom: none; background: transparent; border-radius: 0; padding: 0; } .tabs-links .tab { position: relative; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--ink-3); padding: 14px 0; display: inline-flex; align-items: center; gap: 8px; transition: color 120ms ease; text-decoration: none; box-shadow: none; } .tabs-links .tab:hover { color: var(--ink-2); } .tabs-links .tab-active { color: var(--ink); font-weight: 500; background: transparent; box-shadow: none; } .tabs-links .tab-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--action); border-radius: 2px; } /* main view area */ .app-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 32px 64px; min-width: 0; } .app-main-bare { padding: 0; } .app-view-transition { opacity: 1; transition: opacity 140ms ease; will-change: opacity; } .app-view-leaving, .app-view-entering { opacity: 0; } @media (prefers-reduced-motion: reduce) { .app-view-transition { transition: none; } } .empty-state { padding: 64px 32px; text-align: center; color: var(--ink-3); font-size: 15px; } /* ---------- generic list view ---------- */ .portfolio-list { padding-top: 4px; } .portfolio-list-head { margin-bottom: 12px; } .portfolio-list-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .portfolio-list-search { min-width: 260px; height: 36px; } .portfolio-list-pagination { margin-left: 2px; } .portfolio-list-table-wrap { margin-top: 12px; } .portfolio-list-table .th:first-child, .portfolio-list-table .td:first-child { padding-left: 6px; } .portfolio-row-checkbox { height: 18px; } .portfolio-list .cell-symbol { min-width: 150px; } .view-list .toolbar, .view-form .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .toolbar-title { font-size: 24px; font-weight: 600; } .toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pagination { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; } .pagination-input { width: 52px; height: 32px; text-align: right; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; color: var(--ink); padding: 0 8px; font-variant-numeric: tabular-nums; } .pagination-input:focus { outline: none; border-color: var(--action); } .pagination-sep { color: var(--ink-4); } .pagination-total { font-variant-numeric: tabular-nums; white-space: nowrap; } .th-checkbox { width: 36px; padding-right: 0 !important; } .td .empty, td.empty { padding: 40px 16px; text-align: center; color: var(--ink-3); } .banner { padding: 10px 16px; border-radius: var(--radius-sm); background: var(--bg-info); color: var(--ink-2); margin-bottom: 12px; } .banner-error { background: var(--loss-bg); color: var(--loss); } /* ---------- generic form view ---------- */ .form-body { display: flex; flex-direction: column; gap: 28px; max-width: 880px; } .form-group-title { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .form-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px 28px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .form-label .required { color: var(--loss); } .form-input.readonly { opacity: .65; pointer-events: none; } .btn-group { display: inline-flex; gap: 0; } .btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; } /* ---------- datafields ---------- */ .df-input { width: 100%; height: 40px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 120ms ease, box-shadow 120ms ease; } .df-input::placeholder { color: var(--ink-4); } .df-input:hover { border-color: var(--border-strong); } .df-input:focus { outline: none; border-color: var(--action); box-shadow: var(--focus-ring); } .df-textarea { height: auto; padding: 10px 12px; resize: vertical; } .df-num { font-variant-numeric: tabular-nums; } .df-link { color: var(--link); text-decoration: none; } .df-link:hover { color: var(--link-hover); text-decoration: underline; } .df-truncate { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .df-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--bg-subtle); color: var(--ink-2); } .df-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 600; } /* tone helpers for money / percent cells */ .tone-gain { color: var(--gain); font-variant-numeric: tabular-nums; } .tone-loss { color: var(--loss); font-variant-numeric: tabular-nums; } /* ===================================================================== ModelView — reusable model editor (header + swappable List/Form/Kanban) Adapted from atom.gui.css to the Securily design tokens so the component matches the rest of the app. Layout-only; reuses table / card / btn etc. The few standard primitives styles.css did not yet cover (segmented switcher, dropdown menu, textarea) are styled here scoped under .mv so the rest of the app is unaffected. ===================================================================== */ .mv { display: flex; flex-direction: column; gap: 20px; color: var(--ink); } /* ---------- constant header ---------- */ .mv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .mv-title { justify-self: start; min-width: 0; font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } /* search — pill, centered in header */ .mv-search { position: relative; width: min(340px, 100%); justify-self: center; } .mv-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--ink-4); pointer-events: none; } .mv-search-input { width: 100%; height: 38px; padding: 0 16px 0 38px; font-family: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .mv-search-input::placeholder { color: var(--ink-4); } .mv-search-input:hover { border-color: var(--border-strong); } .mv-search-input:focus { border-color: var(--action); box-shadow: var(--focus-ring-soft); } .mv-actions { display: flex; align-items: center; gap: 12px; justify-self: end; } .mv-range { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; } .mv-pager { display: inline-flex; gap: 4px; } /* icon buttons — borderless, matching .icon-btn-ghost (md) */ .mv-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--ink-2); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .mv-icon-btn:hover { background: var(--bg-subtle); color: var(--ink); } /* view switcher — scoped restyle of atom.gui SegmentedButton inside ModelView */ .mv SegmentedButton { display: inline-flex; align-items: center; gap: 4px; } .mv SegmentedButton .item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid transparent; background: transparent; color: var(--ink-3); font-family: inherit; font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .mv SegmentedButton .item:hover:not(.active) { background: var(--bg-subtle); color: var(--ink); } .mv SegmentedButton .item.active { background: var(--bg-selected); border-color: transparent; color: var(--link); } /* settings dropdown — scoped restyle of atom.gui DropdownMenu inside ModelView */ .mv DropdownMenu { position: relative; display: inline-block; } .mv DropdownMenu .content { position: absolute; z-index: 50; top: calc(100% + 6px); min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 6px; } .mv DropdownMenu .content.align-end { left: auto; right: 0; } .mv DropdownMenu .content.align-start { left: 0; right: auto; } .mv DropdownMenu .item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; font-family: inherit; font-size: 14px; color: var(--ink); background: none; border: none; text-align: left; cursor: pointer; border-radius: var(--radius-sm); transition: background 120ms ease; } .mv DropdownMenu .item:hover, .mv DropdownMenu .item:focus { background: var(--bg-subtle); outline: none; } .mv DropdownMenu .item.destructive { color: var(--loss); } .mv DropdownMenu .item.destructive:hover { background: var(--loss-bg); } .mv DropdownMenu .separator { height: 1px; background: var(--line); margin: 4px 0; } /* ---------- body / views ---------- */ .mv-body { min-height: 180px; } .mv-empty, .mv-form-loading { padding: 48px 24px; text-align: center; color: var(--ink-3); font-size: 14px; } .mv-cell-empty { color: var(--ink-4); } /* identity cell — primary value + muted subtitle (mirrors .cell-symbol) */ .mv-cell-identity { display: flex; flex-direction: column; gap: 2px; min-width: 150px; } .mv-id-main { font-size: 15px; font-weight: 600; color: var(--ink); } .mv-id-sub { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; } /* list view — pointer on clickable data rows (excludes loading/empty placeholder) */ .mv-table tbody .tr:has(.td) { cursor: pointer; } /* ---------- form view ---------- */ .mv-form { display: flex; flex-direction: column; gap: 20px; } .mv-form-bar { display: flex; align-items: center; gap: 16px; } .mv-form-heading { font-size: 16px; font-weight: 600; color: var(--ink); } .mv-form-bar > :last-child { margin-left: auto; } .mv-form-error { padding: 12px 16px; font-size: 14px; color: var(--loss); background: var(--loss-bg); border: 1px solid color-mix(in srgb, var(--loss) 25%, transparent); border-radius: var(--radius-sm); } /* grouped layout (app.json layout: groups) — mirrors .form-body / .form-group-title */ .mv-form-groups { display: flex; flex-direction: column; gap: 28px; max-width: 880px; opacity: 1; transition: opacity 120ms ease; } /* Paging to another record while the current one is still on screen: dim instead of unmounting, so prev/next never flashes the loading fallback. */ .mv-form-groups-switching { opacity: .45; pointer-events: none; } .mv-form-group { display: flex; flex-direction: column; } .mv-form-group-title { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .mv-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px 28px; } .mv-field { display: flex; align-items: center; min-height: 44px; } .mv-form .textarea { width: 100%; min-height: 88px; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); resize: vertical; transition: border-color 120ms ease, box-shadow 120ms ease; } .mv-form .textarea::placeholder { color: var(--ink-4); } .mv-form .textarea:hover { border-color: var(--border-strong); } .mv-form .textarea:focus { outline: none; border-color: var(--action); box-shadow: var(--focus-ring); } /* ---------- kanban view ---------- */ .mv-kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .mv-kanban-card { cursor: pointer; } .mv-kanban-card .card { height: 100%; box-shadow: var(--shadow-card); transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease; } .mv-kanban-card:hover .card { box-shadow: var(--shadow-pop); border-color: var(--border-strong); transform: translateY(-2px); } .mv-kanban-fields { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; } .mv-kanban-fields dt { color: var(--ink-3); } .mv-kanban-fields dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } /* ---------- Datatable (schema-driven) ---------- */ Datatable { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 0 4px 8px; .dt-loading, .dt-empty { display: flex; align-items: center; gap: 8px; padding: 16px; font-size: 13px; color: var(--ink-3); } .dt-table { display: table; width: 100%; max-width: 100%; table-layout: fixed; box-sizing: border-box; } .dt-table TableHead, .dt-table TableCell { box-sizing: border-box; } .dt-table TableBody TableRow { border-bottom: 1px solid var(--line, var(--border)); } .dt-table TableBody TableRow:last-child { border-bottom: none; } .dt-table TableBody TableCell { border-bottom: none; } .dt-col-primary .dt-input, .dt-col-primary .dt-colorlabel-text { font-weight: 600; color: var(--ink); } .dt-input { display: block; width: 100%; min-width: 0; height: 28px; padding: 4px 8px; font: inherit; font-size: 13px; color: var(--ink); border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; outline: none; &::placeholder { color: var(--ink-3); } &:hover { border-color: var(--line, #e6e6e6); } &:focus { border-color: var(--action); background: var(--bg); box-shadow: var(--focus-ring, 0 0 0 2px color-mix(in srgb, var(--action) 18%, transparent)); } } .dt-input-number { font-variant-numeric: tabular-nums; text-align: right; } .dt-input-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .dt-imagefield { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; } .dt-imagefield-preview { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--border-strong, #c8c8c8); background: var(--bg-subtle, #f4f4f5); cursor: pointer; overflow: hidden; flex: 0 0 auto; } .dt-imagefield-preview.has-image { border-style: solid; border-color: var(--border, #e6e6e6); background: #fff; } .dt-imagefield-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .dt-imagefield-placeholder { font-size: 16px; line-height: 1; color: var(--ink-3); font-weight: 500; } .dt-imagefield-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .dt-imagefield-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 14px; line-height: 1; cursor: pointer; } .dt-imagefield-clear:hover { color: var(--ink); background: var(--bg-subtle, #f0f0f0); } .dt-cell-text, .dt-cell-string { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Width tiers (table-layout: fixed): narrow < text < wide */ .dt-col-narrow { width: 5%; max-width: 5.5rem; white-space: nowrap; overflow: visible; } .dt-col-text { width: 12%; } .dt-col-wide { width: 22%; } .dt-col-control { text-align: right; } .dt-col-actions { width: 3%; max-width: 2.5rem; padding-left: 2px; padding-right: 4px; text-align: center; white-space: nowrap; vertical-align: middle; overflow: visible; } .dt-add, .dt-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: transparent; cursor: pointer; color: var(--ink-3); img { width: 16px; height: 16px; display: block; opacity: 0.7; } &:hover:not(:disabled) { background: var(--bg-subtle); img { opacity: 1; } } &:disabled { opacity: 0.35; cursor: default; } } .dt-add img { filter: none; } /* Trash only visible on row hover */ .dt-remove { opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .dt-table TableBody TableRow:hover .dt-remove:not(:disabled) { opacity: 1; pointer-events: auto; } .dt-remove img { /* tint icon red via CSS filter where SVG is monochrome */ filter: invert(27%) sepia(86%) saturate(2840%) hue-rotate(346deg) brightness(90%) contrast(95%); opacity: 0.9; } .dt-remove:hover:not(:disabled) { background: color-mix(in srgb, var(--loss, #b42318) 12%, transparent); } .dt-empty-cell { color: var(--ink-3); font-size: 13px; padding: 16px; } /* Half-size toggles in cells (global Switch is 52×28). */ Switch.dt-toggle .thumb { width: 26px; height: 14px; } Switch.dt-toggle .thumb::after { top: 1.5px; left: 1.5px; width: 11px; height: 11px; } Switch.dt-toggle.checked .thumb::after { transform: translateX(12px); } /* Colorfield */ .dt-colorfield { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; cursor: pointer; position: relative; } .dt-colorfield-input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 50%; background: transparent; cursor: pointer; overflow: hidden; &::-webkit-color-swatch-wrapper { padding: 0; } &::-webkit-color-swatch { border: none; border-radius: 50%; } &::-moz-color-swatch { border: none; border-radius: 50%; } } .dt-colorlabel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; width: 100%; } .dt-colorlabel-text { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); } /* Multiselect / tags pills */ .dt-col-pills { overflow: visible; } .dt-multiselect, .dt-tags { position: relative; display: block; min-width: 0; width: 100%; } .dt-multiselect-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: text; &:focus-within, &.open { border-color: var(--action); background: var(--bg); box-shadow: var(--focus-ring, 0 0 0 2px color-mix(in srgb, var(--action) 18%, transparent)); } } .dt-pill { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; &.focused { outline: 2px solid var(--pill-color, var(--action)); outline-offset: 1px; } } .dt-pill-option { pointer-events: none; } .dt-pill-neutral { background: var(--bg-subtle, #f0f0f0); color: var(--ink-2); border-color: var(--border-strong, color-mix(in srgb, var(--ink) 28%, var(--border))); } .dt-multiselect-input, .dt-tags-input { flex: 1 1 4rem; min-width: 4rem; height: 22px; margin: 0; padding: 0 2px; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 13px; outline: none; } .dt-multiselect-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; min-width: 140px; max-height: 220px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,.12)); } .dt-multiselect-empty { padding: 8px 10px; font-size: 12px; color: var(--ink-3); } .dt-multiselect-option { display: flex; align-items: center; width: 100%; padding: 4px 6px; border: none; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; &:hover, &.active { background: var(--bg-subtle); } } .dt-tags-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: text; &:focus-within, &.open { border-color: var(--action); background: var(--bg); box-shadow: var(--focus-ring, 0 0 0 2px color-mix(in srgb, var(--action) 18%, transparent)); } } Select.dt-select, .dt-select { max-width: 100%; height: auto; min-height: 28px; padding: 4px 1.75rem 4px 8px; font-size: 13px; border: 1px solid transparent; background-color: transparent; box-shadow: none; &:focus { border-color: var(--action); background-color: var(--bg); box-shadow: var(--focus-ring, 0 0 0 2px color-mix(in srgb, var(--action) 18%, transparent)); } } .dt-cell-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-3); } .dt-password { width: 100%; min-width: 0; height: 28px; padding: 4px 8px; font-size: 13px; color: var(--ink); border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; outline: none; &::placeholder { color: var(--ink-3); } &:focus { border-color: var(--action); background: var(--bg); box-shadow: var(--focus-ring, 0 0 0 2px color-mix(in srgb, var(--action) 18%, transparent)); } } }