feat(ux): Command Platform Oberfläche ergänzen
This commit is contained in:
@@ -0,0 +1 @@
|
||||
.ux-command-platform-chrome{display:flex;align-items:center;gap:10px;min-height:42px;padding:7px 18px;border-bottom:1px solid var(--vd-color-border,rgba(127,127,127,.2));background:var(--vd-color-surface,#fff);position:relative;z-index:20}.ux-command-breadcrumb{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.ux-command-crumb,.ux-command-favorite-toggle,.ux-command-drawer-toggle,.ux-command-drawer-item{font:inherit;color:inherit;border:1px solid var(--vd-color-border,rgba(127,127,127,.25));background:var(--vd-color-surface-raised,var(--vd-color-surface,#fff));border-radius:var(--vd-radius-sm,8px)}.ux-command-crumb{border:0;background:transparent;padding:4px 0;font-weight:650}.ux-command-crumb-separator{opacity:.5}.ux-command-crumb-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--vd-color-text-muted,#666);font-size:.9rem}.ux-command-favorite-toggle{width:34px;height:30px;padding:0;font-size:1rem}.ux-command-drawer-toggle{padding:6px 10px;font-size:.84rem}.ux-command-drawer{position:absolute;right:18px;top:48px;width:min(360px,calc(100vw - 28px));max-height:min(520px,70vh);overflow:auto;padding:12px;border:1px solid var(--vd-color-border,rgba(127,127,127,.25));border-radius:var(--vd-radius-lg,14px);background:var(--vd-color-surface-raised,var(--vd-color-surface,#fff));box-shadow:var(--vd-shadow-lg,0 18px 48px rgba(0,0,0,.18));display:grid;gap:14px}.ux-command-drawer.hidden{display:none}.ux-command-drawer-section{display:grid;gap:7px}.ux-command-drawer-section>strong{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--vd-color-text-muted,#666)}.ux-command-drawer-item{text-align:left;padding:9px 10px;cursor:pointer}.ux-command-drawer-empty{padding:8px 2px;color:var(--vd-color-text-muted,#777);font-size:.85rem}.ux-command-crumb:hover,.ux-command-favorite-toggle:hover,.ux-command-drawer-toggle:hover,.ux-command-drawer-item:hover{background:var(--vd-color-surface-hover,rgba(127,127,127,.09))}.ux-command-crumb:focus-visible,.ux-command-favorite-toggle:focus-visible,.ux-command-drawer-toggle:focus-visible,.ux-command-drawer-item:focus-visible{outline:2px solid var(--vd-color-focus,#4f7cff);outline-offset:2px}@media(max-width:780px){.ux-command-platform-chrome{padding-inline:12px}.ux-command-drawer-toggle{font-size:0;width:34px;height:30px;padding:0}.ux-command-drawer-toggle::before{content:'★';font-size:1rem}.ux-command-crumb-current{font-size:.82rem}}@media(max-width:520px){.ux-command-platform-chrome{gap:6px}.ux-command-crumb-separator{display:none}.ux-command-crumb-current{max-width:48vw}.ux-command-drawer{right:8px;top:46px;width:calc(100vw - 16px)}}@media(prefers-reduced-motion:reduce){.ux-command-platform-chrome *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
||||
Reference in New Issue
Block a user