Brooklyn Nicholson
07e0bb8aae
Solid foreground-on-background send/voice-conversation circle (black-on-white in light, white-on-black in dark) anchors the right edge as the primary CTA instead of the orange theme primary. Bumps the primary control to 2.125rem so it visually outranks the ghost mic/plus controls. Opens up the surface padding (0.625rem x / 0.5rem y) so the input row breathes around its controls, and nudges the corner radius from 20 to 24px for a slightly pill-ier silhouette. LiquidGlass distortion is preserved.
80 lines
2.0 KiB
CSS
80 lines
2.0 KiB
CSS
/* liquid-glass-react emits helper nodes that ignore local utility classes. Keep
|
|
these overrides scoped by class so the rest of app styling stays utility-first. */
|
|
.composer-liquid-shell-wrap > div:not(.composer-liquid-shell) {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
transform: none !important;
|
|
margin: 0 !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.composer-liquid-shell-wrap:not([data-show-library-rims='true']) > span {
|
|
display: none !important;
|
|
}
|
|
|
|
.composer-liquid-shell-wrap[data-show-library-rims='true'] > span {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
transform: none !important;
|
|
margin: 0 !important;
|
|
box-sizing: border-box;
|
|
display: block !important;
|
|
}
|
|
|
|
.composer-liquid-shell {
|
|
z-index: 1;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.composer-liquid-shell > svg {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.composer-liquid-shell > .glass,
|
|
.composer-liquid-shell > :not(svg):not(.glass) {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.composer-liquid-shell > .glass {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
padding: 0 !important;
|
|
border-radius: var(--composer-glass-radius, 24px) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.composer-liquid-shell > .glass > .glass__warp {
|
|
border-radius: var(--composer-glass-radius, 24px) !important;
|
|
}
|
|
|
|
.composer-liquid-shell > .glass > div {
|
|
width: 100%;
|
|
height: 100%;
|
|
font: inherit !important;
|
|
text-shadow: none !important;
|
|
color: inherit !important;
|
|
}
|