implement styling refactor + fixes
This commit is contained in:
+73
-27
@@ -579,6 +579,35 @@ body::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.logo-placeholder {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.logo-placeholder::before,
|
||||
.logo-placeholder::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 248, 240, 0.94);
|
||||
}
|
||||
|
||||
.logo-placeholder::before {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
box-shadow: 16px 0 0 rgba(255, 248, 240, 0.94);
|
||||
}
|
||||
|
||||
.logo-placeholder::after {
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
left: 15px;
|
||||
bottom: 15px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
font-size: 0.73rem;
|
||||
@@ -614,6 +643,11 @@ h2 {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.composer-hint {
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
@@ -1095,7 +1129,7 @@ select:focus {
|
||||
}
|
||||
|
||||
.chat-main-focus {
|
||||
grid-template-rows: auto minmax(0, 1fr) auto auto;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -1708,35 +1742,40 @@ select:focus {
|
||||
|
||||
.input-shell {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.input-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 56px;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
grid-template-columns: minmax(0, 1fr) 48px;
|
||||
gap: 10px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
#msgInput {
|
||||
min-height: 56px;
|
||||
max-height: 180px;
|
||||
height: 46px;
|
||||
min-height: 46px;
|
||||
max-height: 96px;
|
||||
padding: 11px 12px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
#send {
|
||||
width: 56px;
|
||||
height: auto;
|
||||
min-height: 56px;
|
||||
width: 48px;
|
||||
height: 46px;
|
||||
min-height: 46px;
|
||||
padding: 0;
|
||||
border-radius: 18px;
|
||||
border-radius: 16px;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
#send::after {
|
||||
@@ -2979,7 +3018,7 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
}
|
||||
|
||||
.chat-main-focus {
|
||||
grid-template-rows: auto minmax(300px, 1fr) auto auto;
|
||||
grid-template-rows: auto minmax(300px, 1fr) auto;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
@@ -3439,7 +3478,7 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
|
||||
.input-shell,
|
||||
.input-shell-focus {
|
||||
padding: 16px 18px 18px;
|
||||
padding: 10px 14px 12px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: var(--composer-bg);
|
||||
@@ -3450,7 +3489,7 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
}
|
||||
|
||||
#msgInput {
|
||||
min-height: 72px;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
@@ -3888,7 +3927,7 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
.chat-main,
|
||||
.chat-main-focus {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
min-height: 0;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -3929,7 +3968,7 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
.messages-panel,
|
||||
.messages-panel-focus {
|
||||
min-height: 0;
|
||||
padding: 10px 4px 0;
|
||||
padding: 10px 4px 18px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@@ -3955,12 +3994,12 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
.input-shell-focus {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: 14px 16px 16px;
|
||||
margin-top: -4px;
|
||||
align-self: end;
|
||||
padding: 10px 14px 12px;
|
||||
margin-top: -2px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--composer-bg) 18%);
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10;
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
@@ -3974,13 +4013,18 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
.input-meta {
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
margin: 0 auto 8px;
|
||||
margin: 0 auto 4px;
|
||||
}
|
||||
|
||||
.messages-panel-focus + .input-shell-focus {
|
||||
min-height: fit-content;
|
||||
}
|
||||
|
||||
#msgInput {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 144px;
|
||||
height: 46px;
|
||||
min-height: 46px;
|
||||
}
|
||||
|
||||
.chat-drawer {
|
||||
@@ -4192,7 +4236,8 @@ body.sidebar-open {
|
||||
}
|
||||
|
||||
#msgInput {
|
||||
min-height: 132px;
|
||||
min-height: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
@@ -4262,11 +4307,12 @@ body.sidebar-open {
|
||||
|
||||
.input-shell,
|
||||
.input-shell-focus {
|
||||
padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
|
||||
padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
#msgInput {
|
||||
min-height: 120px;
|
||||
min-height: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.chat-drawer,
|
||||
|
||||
Reference in New Issue
Block a user