style(responsive): finish responsive token migration
This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 24px;
|
||||
font-size: var(--responsive-icon-size-md, 24px);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -26,5 +26,5 @@
|
||||
color: #fff;
|
||||
white-space: pre-line;
|
||||
backdrop-filter: blur(10px);
|
||||
max-width: 200px;
|
||||
max-width: min(52vw, 200px);
|
||||
}
|
||||
|
||||
@@ -99,8 +99,8 @@
|
||||
|
||||
.typingDot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: var(--responsive-dot-size, 6px);
|
||||
height: var(--responsive-dot-size, 6px);
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
margin: 0 2px;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
width: 100%;
|
||||
min-height: var(--chat-send-button-size, 40px);
|
||||
max-height: min(30vh, 120px); /* 约 5 行 × 24px line-height */
|
||||
padding: 6px 0 0 0; /* 上 6px:让文字视觉下移,避开正中位置 */
|
||||
padding: clamp(5px, 1.111vw, 6px) 0 0 0; /* 让文字视觉下移,避开正中位置 */
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
gap: var(--responsive-inline-gap-xs, 5px);
|
||||
align-items: baseline;
|
||||
color: #241019;
|
||||
font-size: var(--responsive-caption, 13px);
|
||||
|
||||
@@ -10,20 +10,20 @@
|
||||
.bubble {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: var(--responsive-inline-gap-xs, 4px);
|
||||
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
||||
background: #fff;
|
||||
border-radius: var(--radius-xxl, 24px);
|
||||
border-top-left-radius: 0;
|
||||
min-width: 60px;
|
||||
min-height: 40px;
|
||||
min-width: var(--bubble-min-width, 60px);
|
||||
min-height: clamp(38px, 7.407vw, 40px);
|
||||
box-shadow: var(--shadow-input-box, 0 1px 2px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: var(--responsive-dot-size, 8px);
|
||||
height: var(--responsive-dot-size, 8px);
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-foreground, #000);
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
|
||||
@@ -77,13 +77,13 @@
|
||||
.wave {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: var(--responsive-inline-gap-xs, 4px);
|
||||
height: clamp(32px, 6.296vw, 34px);
|
||||
}
|
||||
|
||||
.wave span {
|
||||
display: block;
|
||||
width: 4px;
|
||||
width: clamp(3px, 0.741vw, 4px);
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
opacity: 0.72;
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 8px;
|
||||
margin: 0 0 clamp(7px, 1.481vw, 8px);
|
||||
color: var(--color-text-foreground, #171717);
|
||||
font-size: var(--responsive-page-title, var(--font-size-22, 22px));
|
||||
font-weight: 700;
|
||||
@@ -64,7 +64,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: var(--responsive-inline-gap-xs, 4px);
|
||||
padding:
|
||||
clamp(9px, 1.852vw, 10px)
|
||||
var(--responsive-card-padding, 16px);
|
||||
|
||||
Reference in New Issue
Block a user