forked from sagnik/Velocity-OS
Initial commit: Velocity-OS migration
This commit is contained in:
22
webos/src/pillars/studio/ReimaginePanel.module.css
Normal file
22
webos/src/pillars/studio/ReimaginePanel.module.css
Normal file
@@ -0,0 +1,22 @@
|
||||
/* ReimaginePanel */
|
||||
.root { display: flex; flex-direction: column; gap: var(--space-5); }
|
||||
.reimagineBtn { align-self: flex-start; }
|
||||
.presetsSection { display: flex; flex-direction: column; gap: var(--space-4); }
|
||||
.presetGrid { display: flex; gap: var(--space-3); }
|
||||
.presetTile { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-3); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); width: 120px; flex-shrink: 0; }
|
||||
.presetTile:hover { background: var(--glass-bg-hover); }
|
||||
.selected { border-color: var(--color-violet) !important; }
|
||||
.previewImg { width: 100%; height: 72px; border-radius: var(--radius-md); overflow: hidden; background: var(--glass-bg); }
|
||||
.previewImg img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.presetLabel { font-size: 10px; font-weight: var(--font-medium); color: var(--color-text-secondary); text-align: center; }
|
||||
.selectionRing { position: absolute; inset: -2px; border-radius: var(--radius-lg); border: 2px solid var(--color-violet); pointer-events: none; box-shadow: var(--glass-shadow-violet); }
|
||||
.generateBtn { align-self: flex-start; }
|
||||
/* Generating */
|
||||
.generatingState { display: flex; flex-direction: column; gap: var(--space-4); }
|
||||
.imageFrame { height: 200px; border-radius: var(--radius-xl); }
|
||||
.generatingText { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
|
||||
/* Result */
|
||||
.resultState { display: flex; flex-direction: column; gap: var(--space-4); }
|
||||
.resultImage { border-radius: var(--radius-xl); overflow: hidden; }
|
||||
.resultImage img { width: 100%; height: 200px; object-fit: cover; }
|
||||
.resultActions { display: flex; gap: var(--space-3); }
|
||||
Reference in New Issue
Block a user