Add camera drawer for voice demo
This commit is contained in:
Xin Wang
@@ -62,6 +62,166 @@ body {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.camera-drawer {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateX(-12px);
|
||||
transition: opacity 180ms ease, transform 220ms ease;
|
||||
}
|
||||
|
||||
.camera-drawer.is-open {
|
||||
pointer-events: auto;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.camera-drawer__panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
min-width: 280px;
|
||||
padding: 18px;
|
||||
overflow-y: auto;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(26, 32, 48, 0.98), rgba(11, 13, 18, 0.98)),
|
||||
var(--bg-elevated);
|
||||
border: 1px solid rgba(106, 161, 255, 0.35);
|
||||
border-width: 0 1px 0 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.camera-drawer__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.camera-drawer__eyebrow {
|
||||
margin: 0 0 4px;
|
||||
color: var(--text-dim);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.camera-drawer__header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.camera-drawer__state {
|
||||
flex-shrink: 0;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid rgba(255, 184, 77, 0.34);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 184, 77, 0.12);
|
||||
color: #ffd18a;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.camera-drawer__preview {
|
||||
position: relative;
|
||||
min-height: 210px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(149, 160, 187, 0.28);
|
||||
border-radius: 14px;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
||||
radial-gradient(circle at center, rgba(79, 140, 255, 0.22), transparent 42%),
|
||||
#0f141f;
|
||||
background-size: 34px 34px, 34px 34px, auto, auto;
|
||||
}
|
||||
|
||||
.camera-drawer__lens {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border: 2px solid rgba(230, 233, 242, 0.38);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow:
|
||||
inset 0 0 0 14px rgba(79, 140, 255, 0.1),
|
||||
0 0 36px rgba(79, 140, 255, 0.18);
|
||||
}
|
||||
|
||||
.camera-drawer__scan {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--success), transparent);
|
||||
box-shadow: 0 0 12px rgba(45, 210, 139, 0.8);
|
||||
}
|
||||
|
||||
.camera-drawer__corner {
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.camera-drawer__corner--tl {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
|
||||
.camera-drawer__corner--tr {
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
|
||||
.camera-drawer__corner--bl {
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
|
||||
.camera-drawer__corner--br {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
border-right: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.camera-drawer__question {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.camera-drawer__button {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
min-height: 48px;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.camera-drawer__button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.app__body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 420px);
|
||||
@@ -80,6 +240,18 @@ body {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.conversation {
|
||||
display: grid;
|
||||
grid-template-columns: 0 minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: grid-template-columns 220ms ease;
|
||||
}
|
||||
|
||||
.conversation.has-camera {
|
||||
grid-template-columns: minmax(280px, min(34%, 430px)) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
/* Header ---------------------------------------------------------------- */
|
||||
|
||||
.app__header {
|
||||
@@ -190,6 +362,7 @@ body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -773,6 +946,10 @@ body {
|
||||
/* Responsive ------------------------------------------------------------ */
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.conversation.has-camera {
|
||||
grid-template-columns: minmax(260px, 46%) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.app__body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: minmax(0, 1fr) min(240px, 32vh);
|
||||
@@ -800,6 +977,23 @@ body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.conversation.has-camera {
|
||||
grid-template-columns: minmax(220px, 58%) minmax(120px, 1fr);
|
||||
}
|
||||
|
||||
.camera-drawer__panel {
|
||||
min-width: 220px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.camera-drawer__preview {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.camera-drawer__question {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.app__header {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user