diff --git a/web-v2/src/pages/AssetEditorPage.css b/web-v2/src/pages/AssetEditorPage.css new file mode 100644 index 0000000..dfd58c2 --- /dev/null +++ b/web-v2/src/pages/AssetEditorPage.css @@ -0,0 +1,215 @@ +.asset-compact-form { + gap: 0; + padding: 0; + overflow: hidden; +} + +.asset-compact-section { + display: grid; + gap: 14px; + padding: 20px 22px; + border-bottom: 1px solid var(--line); +} + +.asset-compact-section-heading { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; +} + +.asset-compact-section-heading h2 { + margin: 0; + font-size: 17px; +} + +.asset-compact-primary-grid { + gap: 12px; +} + +.asset-compact-meta { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.asset-compact-meta > span { + min-width: 0; + display: inline-flex; + align-items: center; + gap: 7px; + padding: 7px 10px; + border: 1px solid #e0e5ed; + border-radius: 8px; + background: #f8fafc; +} + +.asset-compact-meta small { + color: var(--muted); + font-size: 9px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .05em; +} + +.asset-compact-meta strong { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + color: var(--ink); + font-size: 11px; + white-space: nowrap; +} + +.asset-compact-context-button { + min-height: 34px; + padding: 7px 11px; + white-space: nowrap; +} + +.asset-compact-context-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.asset-compact-context-item { + min-width: 0; + display: grid; + gap: 3px; + padding: 12px 13px; + border: 1px solid #e1e6ee; + border-radius: 10px; + background: #f8fafc; +} + +.asset-compact-context-item small { + color: var(--muted); + font-size: 9px; + font-weight: 750; + text-transform: uppercase; + letter-spacing: .05em; +} + +.asset-compact-context-item strong { + overflow: hidden; + color: var(--ink); + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.asset-compact-context-item span { + overflow: hidden; + color: var(--muted); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 9px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.asset-compact-details { + border-bottom: 1px solid var(--line); + background: #fff; +} + +.asset-compact-details > summary { + min-height: 54px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 14px; + padding: 13px 22px; + cursor: pointer; + list-style: none; + user-select: none; +} + +.asset-compact-details > summary::-webkit-details-marker { + display: none; +} + +.asset-compact-details > summary:hover { + background: #f8fafc; +} + +.asset-compact-details > summary > span:first-child { + min-width: 0; + display: grid; + gap: 2px; +} + +.asset-compact-details > summary strong { + color: var(--ink); + font-size: 12px; +} + +.asset-compact-details > summary small { + overflow: hidden; + color: var(--muted); + font-size: 10px; + font-weight: 500; + text-overflow: ellipsis; + white-space: nowrap; +} + +.asset-compact-details > summary > span:last-child { + color: #7b8496; + font-size: 16px; + transition: transform .18s ease; +} + +.asset-compact-details[open] > summary > span:last-child { + transform: rotate(180deg); +} + +.asset-compact-details-body { + display: grid; + gap: 16px; + padding: 2px 22px 20px; +} + +.asset-compact-technical { + display: grid; + gap: 12px; + padding-top: 2px; +} + +.asset-compact-technical h3 { + margin: 0; +} + +.asset-compact-form > .form-actions { + padding: 16px 22px 18px; + background: #fafbfc; +} + +@media (max-width: 720px) { + .asset-compact-section { + padding: 17px; + } + + .asset-compact-section-heading { + display: grid; + } + + .asset-compact-context-button { + width: 100%; + } + + .asset-compact-context-grid { + grid-template-columns: 1fr; + } + + .asset-compact-details > summary { + padding: 13px 17px; + } + + .asset-compact-details-body { + padding: 2px 17px 18px; + } + + .asset-compact-form > .form-actions { + padding: 14px 17px 17px; + } +}