@@ -1,33 +1,41 @@
/* ============================================================
CamTalk — Web 端应用样式
双栏布局：左侧视频面板 + 右侧聊天面板
设计方向： ，
字体：
颜色：冷灰体系，单一蓝色强调色
============================================================ */
: root {
--color-primary : #2563eb ;
--color-primary-hover : #1d4ed8 ;
--color-bg : #0b0f1a ;
--color-surface : #151b2b ;
--color-surface-2 : #1c2438 ;
--color-text : #e2e8f0 ;
--color-text-muted : #64748b ;
--color-border : #1e293b ;
--color-success : #22c55e ;
--color-warning : #f59e0b ;
--color-error : #ef444 4 ;
--radius : 10 px ;
--radius-sm : 6 px ;
--color-primary : #3b82f6 ;
--color-primary-hover : #2563eb ;
--color-bg : #0a0a0f ;
--color-surface : #111118 ;
--color-surface-2 : #1a1a24 ;
--color-surface-3 : #22222e ;
--color-text : #d4d4dc ;
--color-text-muted : #5a5a6e ;
--color-border : #1f1f2a ;
--color-success : #34d399 ;
--color-warning : #fbbf2 4 ;
--color-error : #f87171 ;
--radius : 12 px ;
--radius-sm : 8 px ;
--transition-fast : 0.2 s cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ;
--transition-smooth : 0.4 s cubic-bezier ( 0.16 , 1 , 0.3 , 1 ) ;
}
[ data-theme = "light" ] {
--color-primary : #2563eb ;
--color-primary-hover : #1d4ed8 ;
--color-bg : #f1f5f9 ;
--color-bg : #f4f4f8 ;
--color-surface : #ffffff ;
--color-surface-2 : #f8fafc ;
--color-text : #0f172a ;
--color-text-muted : #64748b ;
--color-border : #e2e8f 0 ;
--color-surface-2 : #f0f0f5 ;
--color-surface-3 : #e8e8ee ;
--color-text : #111118 ;
--color-text-muted : #6b6b8 0 ;
--color-border : #dddde5 ;
--color-success : #16a34a ;
--color-warning : #d97706 ;
--color-error : #dc2626 ;
@@ -44,9 +52,12 @@ html, body, #root {
}
body {
font-family : - apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Helvetica Neue" , sans-serif ;
font-family : "Inter" , - apple-system , BlinkMacSystemFont , "Segoe UI" , system-ui , sans-serif ;
font-variant-numeric : tabular-nums ;
background : var ( - - color - bg ) ;
color : var ( - - color - text ) ;
-webkit- font-smoothing : antialiased ;
-moz- osx-font-smoothing : grayscale ;
}
/* ---- App Shell ---- */
@@ -64,11 +75,14 @@ body {
display : flex ;
align-items : center ;
justify-content : space-between ;
padding : 0 20 px ;
height : 48 px ;
padding : 0 24 px ;
height : 56 px ;
background : var ( - - color - surface ) ;
border-bottom : 1 px solid var ( - - color - border ) ;
box-shadow : 0 1 px 8 px rgba ( 10 , 10 , 15 , 0.3 ) ;
flex-shrink : 0 ;
position : relative ;
z-index : 10 ;
}
. header__left {
@@ -78,14 +92,17 @@ body {
}
. header__title {
font-size : 1.2 rem ;
font-weight : 7 00;
font-size : 1.15 rem ;
font-weight : 6 00;
letter-spacing : -0.02 em ;
color : var ( - - color - text ) ;
}
. header__subtitle {
font-size : 0.8 rem ;
font-size : 0.7 8 rem ;
font-weight : 400 ;
color : var ( - - color - text - muted ) ;
letter-spacing : 0.01 em ;
}
. header__right {
@@ -95,30 +112,34 @@ body {
}
. header__stats {
font-size : 0.75 rem ;
font-size : 0.72 rem ;
color : var ( - - color - text - muted ) ;
padding : 4 px 10 px ;
padding : 4 px 12 px ;
background : var ( - - color - surface -2 ) ;
border-radius : 1 2px ;
border-radius : 20 px ;
font-weight : 500 ;
letter-spacing : 0.01 em ;
}
. badge {
font-size : 0.75 rem ;
padding : 3 px 10 px ;
border-radius : 1 2px ;
font-size : 0.72 rem ;
padding : 4 px 12 px ;
border-radius : 20 px ;
font-weight : 500 ;
letter-spacing : 0.01 em ;
transition : all var ( - - transition - fast ) ;
}
. badge--connected {
color : var ( - - color - success ) ;
background : rgba ( 34 , 197 , 94 , 0.1 ) ;
border : 1 px solid rgba ( 34 , 197 , 94 , 0.3 ) ;
background : rgba ( 52 , 211 , 153 , 0.08 ) ;
border : 1 px solid rgba ( 52 , 211 , 153 , 0.2 ) ;
}
. badge--connecting {
color : var ( - - color - warning ) ;
background : rgba ( 24 5 , 158 , 11 , 0.1 ) ;
border : 1 px solid rgba ( 24 5 , 158 , 11 , 0.3 ) ;
background : rgba ( 251 , 191 , 36 , 0.08 ) ;
border : 1 px solid rgba ( 251 , 191 , 36 , 0.2 ) ;
}
. badge--disconnected {
@@ -132,10 +153,13 @@ body {
border : none ;
font-size : 1.1 rem ;
cursor : pointer ;
padding : 6 px ;
padding : 8 px ;
border-radius : var ( - - radius - sm ) ;
transition : background 0.15 s ;
transition : all var ( - - transition - fast ) ;
color : var ( - - color - text - muted ) ;
display : inline-flex ;
align-items : center ;
justify-content : center ;
}
. btn-icon : hover {
@@ -143,6 +167,10 @@ body {
color : var ( - - color - text ) ;
}
. btn-icon : active {
transform : scale ( 0.92 ) ;
}
. lang-group {
display : flex ;
gap : 2 px ;
@@ -158,9 +186,9 @@ body {
font-size : 0.72 rem ;
font-weight : 600 ;
padding : 4 px 10 px ;
border-radius : 4 px ;
border-radius : 6 px ;
cursor : pointer ;
transition : all 0.15 s ;
transition : all var ( - - transition - fast ) ;
}
. lang-btn : hover {
@@ -187,8 +215,8 @@ body {
flex-shrink : 0 ;
display : flex ;
flex-direction : column ;
padding : 16 px ;
gap : 12 px ;
padding : 20 px ;
gap : 14 px ;
}
. video-container {
@@ -198,6 +226,11 @@ body {
border-radius : var ( - - radius ) ;
overflow : hidden ;
border : 1 px solid var ( - - color - border ) ;
transition : border-color var ( - - transition - fast ) ;
}
. video-container : hover {
border-color : var ( - - color - surface -3 ) ;
}
. video-container . video-preview {
@@ -210,7 +243,7 @@ body {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
background : #1a1a2e ;
background : #12121a ;
}
. video-placeholder {
@@ -220,14 +253,15 @@ body {
flex-direction : column ;
align-items : center ;
justify-content : center ;
gap : 8 px ;
gap : 10 px ;
color : var ( - - color - text - muted ) ;
font-size : 0.82 rem ;
font-weight : 400 ;
}
. video-placeholder__icon {
font-size : 2.4 rem ;
opacity : 0.2 ;
font-size : 2.2 rem ;
opacity : 0.15 ;
margin-bottom : 4 px ;
}
@@ -235,14 +269,15 @@ body {
position : absolute ;
bottom : 16 px ;
left : 16 px ;
background : rgba ( 0 , 0 , 0 , 0.75 ) ;
backdrop-filter : blur ( 8 px ) ;
background : rgba ( 1 0, 1 0, 15 , 0.8 ) ;
backdrop-filter : blur ( 12 px ) ;
-webkit- backdrop-filter : blur ( 12 px ) ;
color : var ( - - color - success ) ;
padding : 6 px 14 px ;
border-radius : var ( - - radius - sm ) ;
font-size : 0.8 rem ;
font-size : 0.7 8 rem ;
font-weight : 500 ;
animation : pulse 1.5 s ease-in-out infinite ;
animation : pulse 1.5 s cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) infinite ;
}
. live-badge {
@@ -252,22 +287,23 @@ body {
display : flex ;
align-items : center ;
gap : 6 px ;
background : rgba ( 0 , 0 , 0 , 0.75 ) ;
backdrop-filter : blur ( 8 px ) ;
background : rgba ( 1 0, 1 0, 15 , 0.8 ) ;
backdrop-filter : blur ( 12 px ) ;
-webkit- backdrop-filter : blur ( 12 px ) ;
color : white ;
padding : 4 px 12 px ;
padding : 5 px 12 px ;
border-radius : var ( - - radius - sm ) ;
font-size : 0.75 rem ;
font-size : 0.72 rem ;
font-weight : 600 ;
letter-spacing : 0.5 px ;
letter-spacing : 0.04 em ;
}
. live-badge__dot {
width : 8 px ;
height : 8 px ;
width : 7 px ;
height : 7 px ;
border-radius : 50 % ;
background : var ( - - color - success ) ;
animation : pulse 1.5 s ease-in-out infinite ;
animation : pulse 1.5 s cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) infinite ;
}
. video-indicator--loading { color : var ( - - color - warning ) ; }
@@ -278,45 +314,49 @@ body {
position : absolute ;
top : 12 px ;
right : 12 px ;
background : rgba ( 37 , 99 , 235 , 0.85 ) ;
backdrop-filter : blur ( 8 px ) ;
background : rgba ( 59 , 130 , 246 , 0.85 ) ;
backdrop-filter : blur ( 12 px ) ;
-webkit- backdrop-filter : blur ( 12 px ) ;
color : white ;
padding : 3 px 10 px ;
border-radius : var ( - - radius - sm ) ;
font-size : 0.7 rem ;
font-size : 0.68 rem ;
font-weight : 700 ;
letter-spacing : 0.5 px ;
letter-spacing : 0.06 em ;
}
. observation-badge {
position : absolute ;
top : 12 px ;
left : 12 px ;
background : rgba ( 34 , 197 , 94 , 0.85 ) ;
backdrop-filter : blur ( 8 px ) ;
background : rgba ( 52 , 211 , 153 , 0.85 ) ;
backdrop-filter : blur ( 12 px ) ;
-webkit- backdrop-filter : blur ( 12 px ) ;
color : white ;
padding : 3 px 10 px ;
border-radius : var ( - - radius - sm ) ;
font-size : 0.7 rem ;
font-size : 0.68 rem ;
font-weight : 700 ;
animation : pulse 2 s ease-in-out infinite ;
letter-spacing : 0.04 em ;
animation : pulse 2 s cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) infinite ;
}
. video-overlay {
position : absolute ;
inset : 0 ;
background : rgba ( 0 , 0 , 0 , 0.35 ) ;
background : rgba ( 1 0, 1 0, 15 , 0.4 ) ;
display : flex ;
align-items : center ;
justify-content : center ;
backdrop-filter : blur ( 2 px ) ;
backdrop-filter : blur ( 3 px ) ;
-webkit- backdrop-filter : blur ( 3 px ) ;
}
. video-overlay__spinner {
width : 36 px ;
height : 36 px ;
border : 3 px solid rgba ( 255 , 255 , 255 , 0.2 ) ;
border-top-color : white ;
border : 2.5 px solid rgba ( 255 , 255 , 255 , 0.15 ) ;
border-top-color : rgba ( 255 , 255 , 255 , 0.8 ) ;
border-radius : 50 % ;
animation : spin 0.8 s linear infinite ;
}
@@ -327,53 +367,66 @@ body {
flex-shrink : 0 ;
display : flex ;
justify-content : center ;
padding : 4 px 0 ;
padding : 6 px 0 ;
}
. video-controls__row {
display : flex ;
gap : 6 px ;
gap : 8 px ;
flex-wrap : wrap ;
justify-content : center ;
}
. btn--ctrl {
padding : 6 px 12 px ;
padding : 7 px 14 px ;
font-size : 0.78 rem ;
border-radius : var ( - - radius - sm ) ;
border : 1 px solid var ( - - color - border ) ;
background : var ( - - color - surface -2 ) ;
color : var ( - - color - text - muted ) ;
cursor : pointer ;
transition : all 0.15 s ;
transition : all var ( - - transition - fast ) ;
white-space : nowrap ;
}
. btn--ctrl : hover {
background : var ( - - color - border ) ;
background : var ( - - color - surface -3 ) ;
color : var ( - - color - text ) ;
border-color : var ( - - color - surface -3 ) ;
}
. btn--ctrl : active {
transform : translateY ( 1 px ) ;
}
. btn--ctrl-on {
background : rgba ( 34 , 197 , 94 , 0.15 ) ;
background : rgba ( 52 , 211 , 153 , 0.1 ) ;
color : var ( - - color - success ) ;
border-color : rgba ( 34 , 197 , 94 , 0.3 ) ;
border-color : rgba ( 52 , 211 , 153 , 0.25 ) ;
}
. btn--ctrl-on : hover {
background : rgba ( 52 , 211 , 153 , 0.18 ) ;
}
. btn--ctrl-off {
background : rgba ( 239 , 68 , 68 , 0.1 ) ;
background : rgba ( 248 , 113 , 113 , 0.08 ) ;
color : var ( - - color - error ) ;
border-color : rgba ( 239 , 68 , 68 , 0.2 ) ;
border-color : rgba ( 248 , 113 , 113 , 0.18 ) ;
}
. btn--ctrl-off : hover {
background : rgba ( 248 , 113 , 113 , 0.15 ) ;
}
. btn--speaking {
animation : micPulse 0.8 s ease-in-out infinite ;
box-shadow : 0 0 12 px rgba ( 34 , 197 , 94 , 0.5 ) ;
animation : micPulse 0.8 s cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) infinite ;
box-shadow : 0 0 12 px rgba ( 52 , 211 , 153 , 0.4 ) ;
}
@ keyframes micPulse {
0 % , 100 % { box-shadow : 0 0 8 px rgba ( 34 , 197 , 94 , 0.4 ) ; transform : scale ( 1 ) ; }
50 % { box-shadow : 0 0 16 px rgba ( 34 , 197 , 94 , 0.8 ) ; transform : scale ( 1.05 ) ; }
0 % , 100 % { box-shadow : 0 0 8 px rgba ( 52 , 211 , 153 , 0.3 ) ; transform : scale ( 1 ) ; }
50 % { box-shadow : 0 0 18 px rgba ( 52 , 211 , 153 , 0.7 ) ; transform : scale ( 1.04 ) ; }
}
/* ---- 右侧聊天面板 ---- */
@@ -391,21 +444,23 @@ body {
display : flex ;
align-items : center ;
justify-content : space-between ;
padding : 12 px 16 px ;
padding : 14 px 24 px ;
font-weight : 600 ;
font-size : 0.85 rem ;
font-size : 0.82 rem ;
border-bottom : 1 px solid var ( - - color - border ) ;
flex-shrink : 0 ;
color : var ( - - color - text - muted ) ;
letter-spacing : -0.01 em ;
}
. chat-panel-header__mode {
font-size : 0.7 rem ;
font-size : 0.68 rem ;
font-weight : 500 ;
color : var ( - - color - success ) ;
background : rgba ( 34 , 197 , 94 , 0.1 ) ;
padding : 2 px 8 px ;
border-radius : 10 px ;
background : rgba ( 52 , 211 , 153 , 0.08 ) ;
padding : 3 px 10 px ;
border-radius : 12 px ;
letter-spacing : 0.02 em ;
}
. chat-panel-body {
@@ -420,32 +475,57 @@ body {
. chat-panel {
flex : 1 ;
overflow-y : auto ;
padding : 12 px 16 px ;
padding : 16 px 24 px ;
display : flex ;
flex-direction : column ;
gap : 10 px ;
gap : 12 px ;
}
. chat-panel--empty {
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
flex : 1 ;
gap : 12 px ;
color : var ( - - color - text - muted ) ;
font-size : 0.85 rem ;
}
. chat-panel--empty-icon {
font-size : 2.4 rem ;
opacity : 0.12 ;
margin-bottom : 4 px ;
}
. chat-panel--empty-hint {
font-size : 0.75 rem ;
opacity : 0.6 ;
max-width : 240 px ;
text-align : center ;
line-height : 1.5 ;
}
. chat-message {
padding : 10 px 14 px ;
padding : 12 px 16 px ;
border-radius : var ( - - radius - sm ) ;
background : var ( - - color - surface -2 ) ;
max-width : 92 % ;
max-width : min ( 92 % , 65 ch ) ;
transition : background var ( - - transition - fast ) ;
}
. chat-message : hover {
background : var ( - - color - surface -3 ) ;
}
. chat-message--user {
border-left : 2 px solid var ( - - color - primary ) ;
align-self : flex-end ;
background : rgba ( 37 , 99 , 235 , 0.08 ) ;
background : rgba ( 59 , 130 , 246 , 0.06 ) ;
}
. chat-message--user : hover {
background : rgba ( 59 , 130 , 246 , 0.1 ) ;
}
. chat-message--assistant {
@@ -457,24 +537,27 @@ body {
}
. chat-message__role {
font-size : 0.65 rem ;
font-size : 0.62 rem ;
font-weight : 600 ;
text-transform : uppercase ;
letter-spacing : 0.5 px ;
letter-spacing : 0.08 em ;
color : var ( - - color - text - muted ) ;
margin-bottom : 3 px ;
margin-bottom : 4 px ;
}
. chat-message__content {
font-size : 0.82 rem ;
line-height : 1.5 5 ;
line-height : 1.6 5 ;
white-space : pre-wrap ;
max-width : 65 ch ;
}
. chat-message__meta {
margin-top : 6 px ;
font-size : 0.65 rem ;
margin-top : 8 px ;
font-size : 0.62 rem ;
color : var ( - - color - text - muted ) ;
font-weight : 400 ;
letter-spacing : 0.01 em ;
}
/* ---- Streaming Cursor ---- */
@@ -483,22 +566,24 @@ body {
display : inline ;
animation : blink 0.8 s step-end infinite ;
color : var ( - - color - success ) ;
font-weight : 300 ;
}
/* ---- System Message ---- */
. system-message {
text-align : center ;
padding : 8 px 16 px ;
margin : 0 20 px ;
padding : 10 px 16 px ;
margin : 0 24 px ;
border-radius : var ( - - radius - sm ) ;
font-size : 0.8 rem ;
font-size : 0.7 8 rem ;
font-weight : 500 ;
}
. system-message--warning {
background : rgba ( 24 5 , 158 , 11 , 0.1 ) ;
background : rgba ( 251 , 191 , 36 , 0.08 ) ;
color : var ( - - color - warning ) ;
border : 1 px solid rgba ( 24 5 , 158 , 11 , 0.2 ) ;
border : 1 px solid rgba ( 251 , 191 , 36 , 0.15 ) ;
}
/* ---- Drawer (Config Panel) ---- */
@@ -507,9 +592,10 @@ body {
position : fixed ;
inset : 0 ;
z-index : 100 ;
background : rgba ( 0 , 0 , 0 , 0.4 ) ;
backdrop-filter : blur ( 2 px ) ;
animation : fadeIn 0.2 s ease ;
background : rgba ( 1 0, 1 0, 15 , 0.5 ) ;
backdrop-filter : blur ( 4 px ) ;
-webkit- backdrop-filter : blur ( 4 px ) ;
animation : fadeIn 0.25 s var ( - - transition - smooth ) ;
}
. drawer {
@@ -522,22 +608,23 @@ body {
border-left : 1 px solid var ( - - color - border ) ;
display : flex ;
flex-direction : column ;
animation : slideInRight 0.2 5 s ease ;
box-shadow : -8 px 0 2 4px rgba ( 0 , 0 , 0 , 0.3 ) ;
animation : slideInRight 0.3 5 s var ( - - transition - smooth ) ;
box-shadow : -8 px 0 40 px rgba ( 1 0, 1 0, 15 , 0.5 ) ;
}
. drawer__header {
display : flex ;
align-items : center ;
justify-content : space-between ;
padding : 14 px 16 px ;
padding : 16 px 20 px ;
border-bottom : 1 px solid var ( - - color - border ) ;
flex-shrink : 0 ;
}
. drawer__title {
font-weight : 600 ;
font-size : 0.9 rem ;
font-size : 0.88 rem ;
letter-spacing : -0.01 em ;
}
. drawer__close {
@@ -546,9 +633,12 @@ body {
color : var ( - - color - text - muted ) ;
cursor : pointer ;
font-size : 1 rem ;
padding : 4 px 8 px ;
padding : 6 px 8 px ;
border-radius : var ( - - radius - sm ) ;
transition : all 0.15 s ;
transition : all var ( - - transition - fast ) ;
display : inline-flex ;
align-items : center ;
justify-content : center ;
}
. drawer__close : hover {
@@ -556,26 +646,30 @@ body {
color : var ( - - color - text ) ;
}
. drawer__close : active {
transform : scale ( 0.92 ) ;
}
. drawer__body {
flex : 1 ;
overflow-y : auto ;
padding : 16 px ;
padding : 20 px ;
}
/* ---- Config Group ---- */
. config-group {
margin-bottom : 20 px ;
margin-bottom : 24 px ;
}
. config-group__title {
font-size : 0.7 rem ;
font-size : 0.68 rem ;
font-weight : 600 ;
text-transform : uppercase ;
letter-spacing : 0.8 px ;
letter-spacing : 0.1 em ;
color : var ( - - color - text - muted ) ;
margin-bottom : 12 px ;
padding-bottom : 8 px ;
margin-bottom : 14 px ;
padding-bottom : 10 px ;
border-bottom : 1 px solid var ( - - color - border ) ;
}
@@ -583,16 +677,23 @@ body {
display : flex ;
align-items : center ;
justify-content : space-between ;
padding : 10 px 0 ;
padding : 10 px 8 px ;
margin : 0 -8 px ;
font-size : 0.82 rem ;
color : var ( - - color - text ) ;
cursor : pointer ;
border-radius : var ( - - radius - sm ) ;
transition : background var ( - - transition - fast ) ;
}
. config-row : hover {
background : var ( - - color - surface -2 ) ;
}
. config-row__info {
display : flex ;
flex-direction : column ;
gap : 2 px ;
gap : 3 px ;
}
. config-row__label {
@@ -601,8 +702,9 @@ body {
}
. config-row__desc {
font-size : 0.72 rem ;
font-size : 0.7 rem ;
color : var ( - - color - text - muted ) ;
line-height : 1.4 ;
}
. config-row select ,
@@ -611,23 +713,36 @@ body {
color : var ( - - color - text ) ;
border : 1 px solid var ( - - color - border ) ;
border-radius : var ( - - radius - sm ) ;
padding : 5 px 10 px ;
font-size : 0.8 rem ;
padding : 6 px 10 px ;
font-size : 0.7 8 rem ;
cursor : pointer ;
transition : all var ( - - transition - fast ) ;
}
. config-row select : hover ,
. config-row input [ type = "checkbox" ] : hover {
border-color : var ( - - color - surface -3 ) ;
}
. config-row select : focus ,
. config-row input [ type = "checkbox" ] : focus {
outline : 2 px solid rgba ( 59 , 130 , 246 , 0.4 ) ;
outline-offset : 1 px ;
}
. config-row input [ type = "checkbox" ] {
width : 18 px ;
height : 18 px ;
cursor : pointer ;
accent-color : var ( - - color - primary ) ;
}
/* ---- Toast ---- */
. toast-container {
position : fixed ;
top : 68 px ;
right : 20 px ;
top : 72 px ;
right : 24 px ;
z-index : 1000 ;
display : flex ;
flex-direction : column ;
@@ -637,16 +752,30 @@ body {
. toast {
padding : 10 px 16 px ;
border-radius : var ( - - radius - sm ) ;
font-size : 0.82 rem ;
font-size : 0.8 rem ;
font-weight : 500 ;
cursor : pointer ;
animation : slideIn 0.3 s ease-out ;
animation : slideIn 0.35 s var ( - - transition - smooth ) ;
max-width : 320 px ;
backdrop-filter : blur ( 8 px ) ;
backdrop-filter : blur ( 12 px ) ;
-webkit- backdrop-filter : blur ( 12 px ) ;
box-shadow : 0 8 px 32 px rgba ( 10 , 10 , 15 , 0.4 ) ;
}
. toast--error { background : rgba ( 239 , 68 , 68 , 0.9 ) ; color : white ; }
. toast--warning { background : rgba ( 245 , 158 , 11 , 0.9 ) ; color : #000 ; }
. toast--info { background : rgba ( 37 , 99 , 235 , 0.9 ) ; color : white ; }
. toast--error {
background : rgba ( 248 , 113 , 113 , 0.92 ) ;
color : white ;
}
. toast--warning {
background : rgba ( 251 , 191 , 36 , 0.92 ) ;
color : #111 ;
}
. toast--info {
background : rgba ( 59 , 130 , 246 , 0.92 ) ;
color : white ;
}
/* ---- Buttons ---- */
@@ -654,18 +783,23 @@ body {
padding : 8 px 20 px ;
border : none ;
border-radius : var ( - - radius - sm ) ;
font-size : 0.85 rem ;
font-size : 0.82 rem ;
font-weight : 600 ;
cursor : pointer ;
transition : all 0.15 s ;
transition : all var ( - - transition - fast ) ;
display : inline-flex ;
align-items : center ;
gap : 6 px ;
letter-spacing : 0.01 em ;
}
. btn : active {
transform : translateY ( 1 px ) ;
}
. btn--lg {
padding : 12 px 32 px ;
font-size : 0.95 rem ;
font-size : 0.92 rem ;
border-radius : var ( - - radius ) ;
}
@@ -685,43 +819,46 @@ body {
}
. btn--secondary : hover {
background : var ( - - color - border ) ;
background : var ( - - color - surface -3 ) ;
border-color : var ( - - color - surface -3 ) ;
}
. btn--warning {
background : var ( - - color - warning ) ;
color : #000 ;
color : #111 ;
}
. btn--warning : hover { opacity : 0.9 ; }
. btn--warning : hover {
opacity : 0.9 ;
}
. btn--danger {
background : rgba ( 239 , 68 , 68 , 0.15 ) ;
background : rgba ( 248 , 113 , 113 , 0.1 ) ;
color : var ( - - color - error ) ;
border : 1 px solid rgba ( 239 , 68 , 68 , 0.3 ) ;
border : 1 px solid rgba ( 248 , 113 , 113 , 0.2 ) ;
}
. btn--danger : hover {
background : rgba ( 239 , 68 , 68 , 0.25 ) ;
background : rgba ( 248 , 113 , 113 , 0.18 ) ;
}
. btn--active {
background : var ( - - color - primary ) ;
color : white ;
box-shadow : 0 0 12 px rgba ( 37 , 99 , 235 , 0.4 ) ;
animation : pulseBtn 2 s ease-in-out infinite ;
box-shadow : 0 0 12 px rgba ( 59 , 130 , 246 , 0.35 ) ;
animation : pulseBtn 2 s cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) infinite ;
}
/* ---- Animations ---- */
@ keyframes pulse {
0 % , 100 % { opacity : 1 ; }
50 % { opacity : 0.6 ; }
50 % { opacity : 0.55 ; }
}
@ keyframes pulseBtn {
0 % , 100 % { box-shadow : 0 0 12 px rgba ( 37 , 99 , 235 , 0.4 ) ; }
50 % { box-shadow : 0 0 20 px rgba ( 37 , 99 , 235 , 0.7 ) ; }
0 % , 100 % { box-shadow : 0 0 12 px rgba ( 59 , 130 , 246 , 0.35 ) ; }
50 % { box-shadow : 0 0 22 px rgba ( 59 , 130 , 246 , 0.6 ) ; }
}
@ keyframes blink {
@@ -734,7 +871,7 @@ body {
}
@ keyframes slideIn {
from { opacity : 0 ; transform : translateX ( 20 px ) ; }
from { opacity : 0 ; transform : translateX ( 16 px ) ; }
to { opacity : 1 ; transform : translateX ( 0 ) ; }
}
@@ -751,7 +888,7 @@ body {
/* ---- Scrollbar ---- */
:: -webkit-scrollbar {
width : 6 px ;
width : 4 px ;
}
:: -webkit-scrollbar-track {
@@ -760,7 +897,7 @@ body {
:: -webkit-scrollbar-thumb {
background : var ( - - color - border ) ;
border-radius : 3 px ;
border-radius : 2 px ;
}
:: -webkit-scrollbar-thumb : hover {
