fix keyboard ui
This commit is contained in:
1 parent
83f4d7c728
commit
a26ae28189
5 files changed
+54
-8
No files matched your search
@@ -33,6 +33,7 @@ body:has(.ticket-workspace){overflow:hidden;overscroll-behavior:none}.customer-m
|
||||
.sms-delivery-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.sms-delivery-heading h3,.sms-delivery-heading small{display:block}.sms-delivery-heading small{margin-top:.2rem;color:rgba(8,55,107,.48);font-size:.6rem}.sms-delivery-heading>span{display:grid;width:1.75rem;height:1.75rem;flex:none;place-items:center;border-radius:999px;background:var(--color-mint);color:var(--color-sea);font-weight:900}.sms-delivery-list{display:grid;gap:.45rem;margin-top:.75rem}.sms-delivery-item{border:1px solid rgba(8,55,107,.09);border-radius:.75rem;background:var(--color-paper);overflow:hidden}.sms-delivery-item>summary{display:grid;grid-template-columns:minmax(0,1fr) auto 1.6rem;align-items:center;gap:.45rem;min-height:2.8rem;padding:.5rem .6rem;cursor:pointer;list-style:none}.sms-delivery-item>summary::-webkit-details-marker{display:none}.sms-delivery-event{min-width:0;overflow:hidden;color:rgba(8,55,107,.68);font-size:.65rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.sms-delivery-item>summary b{font-size:.64rem;color:var(--color-ink)}.sms-delivery-info{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1px solid rgba(6,147,227,.25);border-radius:999px;background:#eef8ff;color:var(--color-sea);font-size:.68rem;font-weight:900}.sms-delivery-item[open] .sms-delivery-info{background:var(--color-sea);color:#fff}.sms-delivery-timeline{display:grid;gap:.7rem;margin:0;padding:.7rem .75rem .75rem;list-style:none;border-top:1px solid rgba(8,55,107,.07);background:var(--color-cream)}.sms-delivery-timeline li{display:grid;grid-template-columns:.65rem minmax(0,1fr);gap:.55rem;align-items:start;color:rgba(8,55,107,.48)}.sms-delivery-timeline li>span{width:.55rem;height:.55rem;margin-top:.28rem;border:2px solid #aab9c6;border-radius:999px;background:#fff}.sms-delivery-timeline li.is-complete>span{border-color:var(--color-sea);background:var(--color-sea)}.sms-delivery-timeline b,.sms-delivery-timeline time,.sms-delivery-timeline small{display:block}.sms-delivery-timeline b{font-size:.62rem}.sms-delivery-timeline time,.sms-delivery-timeline small{margin-top:.12rem;font-size:.58rem;color:rgba(8,55,107,.58)}.sms-delivery-timeline li.is-complete b{color:var(--color-ink)}.sms-delivery-description,.sms-delivery-error,.sms-delivery-tracking{display:block;margin:0;padding:.55rem .75rem;border-top:1px solid rgba(8,55,107,.07);font-size:.58rem;line-height:1.75}.sms-delivery-description{color:#526b85}.sms-delivery-error{color:#8e2d2d;background:#fff2f2}.sms-delivery-tracking{overflow-wrap:anywhere;color:#647b91;text-align:left}
|
||||
@media(max-width:1023px){body:has(.ticket-workspace) .mobile-dock,body:has(.ticket-workspace) .staff-mobile-dock{display:none}.staff-conversation-grid,.customer-grid{grid-template-columns:minmax(0,1fr)}.workspace-side{position:fixed;top:calc(var(--visual-viewport-offset-top,0px) + 4.25rem);right:0;bottom:0;z-index:60;width:min(88vw,22rem);transform:translateX(105%);overflow-y:auto;overscroll-behavior:contain;border-left:1px solid rgba(8,55,107,.1);box-shadow:-20px 0 60px -35px rgba(8,55,107,.7);transition:transform .25s ease}.workspace-side.panel-open{transform:translateX(0)}.panel-close{@apply mb-3 grid size-10 place-items-center rounded-xl bg-ink text-white}.message-bubble{max-width:86%}}
|
||||
@media(max-width:1023px){.ticket-workspace .composer{min-width:0;max-height:min(45svh,max(7rem,calc(var(--visual-viewport-height,100svh) - 18rem)),28rem);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}
|
||||
@media(max-width:1023px){.customer-workspace .composer.is-keyboard-active{max-height:min(75svh,calc(var(--visual-viewport-height,100svh) - 9rem),32rem)}.staff-ticket-workspace .composer.is-keyboard-active{max-height:min(75svh,calc(var(--visual-viewport-height,100svh) - 11rem),32rem)}.ticket-workspace .composer.is-keyboard-active textarea{min-height:5rem;max-height:min(30svh,8rem)!important}}
|
||||
@media(max-width:639px){.site-header{display:none}.customer-main:has(.ticket-workspace){padding:0}.ticket-workspace{height:min(100svh,var(--visual-viewport-height,100svh))}.staff-ticket-workspace{height:min(calc(100svh - 4.5rem),calc(var(--visual-viewport-height,100svh) - 4.5rem))}.ticket-workspace-head{@apply min-h-16}.workspace-grid{height:auto}.ticket-title h1{@apply max-w-[48vw] text-sm}.ticket-head-actions .badge{@apply max-w-24 truncate}.conversation-toolbar{@apply min-h-10}.ticket-workspace .conversation{@apply px-2.5 py-3}.message-avatar{@apply size-7 rounded-lg}.message-bubble{max-width:88%;padding:.6rem .7rem}.message.note .message-bubble{width:96%}.ticket-workspace .composer{@apply px-2.5 pt-2}.composer-context small{max-width:70vw}.composer-hint{display:none}.send-button{@apply px-3}.new-message-jump{bottom:8.5rem}.ticket-head-actions form{display:none}.workspace-side{top:var(--visual-viewport-offset-top,0px)}}
|
||||
@media(prefers-reduced-motion:reduce){.ticket-workspace .conversation{scroll-behavior:auto}.workspace-side{transition:none}}
|
||||
.load-older{@apply mx-auto my-3 flex min-h-9 rounded-full border border-ink/10 bg-paper px-4 py-2 text-[10px] font-bold text-sea shadow-sm hover:bg-mint}.load-older.htmx-request{@apply pointer-events-none opacity-60}
|
||||
|
||||
Reference in new issue
Block a user