83 lines
11 KiB
CSS
83 lines
11 KiB
CSS
|
/* Internal messages: a quiet inbox, a readable conversation, one composer. */
|
||
|
|
.global-bottom-bar .bb-messages-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:0;border:1px solid var(--border-color,#dce4e9);border-radius:14px;background:var(--bg-card,#fff);height:100%;min-height:0;overflow:hidden}
|
||
|
|
.global-bottom-bar .bb-message-threads{display:flex;flex-direction:column;gap:3px;overflow:auto;border-right:1px solid var(--border-color,#e2e8ed);padding:0 8px 10px;background:color-mix(in srgb,var(--bg-card,#fff) 97%,#59798c);scrollbar-width:thin}
|
||
|
|
.msg-inbox-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 8px 12px;font-size:.72rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary,#718293)}
|
||
|
|
.msg-inbox-heading button,.msg-header-action{border:0;background:transparent;color:var(--text-secondary,#657b8b);border-radius:8px;padding:7px;cursor:pointer}
|
||
|
|
.msg-inbox-heading button:hover,.msg-header-action:hover{background:var(--accent-light,#eaf1f4)}
|
||
|
|
.global-bottom-bar .bb-message-thread{width:100%;border:0;border-radius:10px;padding:12px 9px;gap:10px;white-space:normal;box-shadow:none;text-align:left;background:transparent;flex-shrink:0;min-height:66px}
|
||
|
|
.global-bottom-bar .bb-message-thread:hover{background:var(--bg-hover,#edf2f5)}
|
||
|
|
.global-bottom-bar .bb-message-thread.is-active{background:color-mix(in srgb,var(--bg-card,#fff) 90%,#278e87);color:var(--text-primary,#233f50);box-shadow:none;border:0}
|
||
|
|
.msg-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex-shrink:0;background:color-mix(in srgb,var(--bg-card,#fff) 84%,#607a8e);font-size:.7rem;letter-spacing:.03em;color:var(--text-primary,#3d5868)}
|
||
|
|
.msg-avatar.is-group{background:color-mix(in srgb,var(--bg-card,#fff) 88%,#319387);color:var(--text-primary,#347369)}
|
||
|
|
.msg-thread-copy{min-width:0;flex:1;display:block}
|
||
|
|
.msg-thread-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
||
|
|
.msg-thread-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.79rem}
|
||
|
|
.msg-thread-top time{font-size:.62rem;flex-shrink:0;color:var(--text-secondary,#7d8d99);font-weight:400}
|
||
|
|
.msg-thread-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary,#7d8d99);font-weight:400;font-size:.71rem;margin-top:4px}
|
||
|
|
.global-bottom-bar .bb-message-thread-count,.global-bottom-bar .bb-message-thread.is-active .bb-message-thread-count{background:#267f79;color:white;font-size:.63rem;min-width:17px;height:17px;padding:0 4px}
|
||
|
|
.msg-conversation{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
|
||
|
|
.msg-conversation-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:14px 20px;border-bottom:1px solid var(--border-color,#e6ebef)}
|
||
|
|
.msg-conversation-header strong{font-size:.87rem;font-weight:650;color:var(--text-primary,#233f50)}
|
||
|
|
.msg-conversation-header small{display:block;font-size:.68rem;color:var(--text-secondary,#7a8c99);margin-top:3px}
|
||
|
|
.msg-header-action{display:flex;gap:7px;align-items:center;font-size:.7rem;white-space:nowrap}
|
||
|
|
.global-bottom-bar .bb-messages-list{display:flex;flex-direction:column;gap:17px;flex:1;min-height:0;overflow-y:auto;padding:20px!important;margin:0;background:color-mix(in srgb,var(--bg-card,#fff) 98%,#678190)}
|
||
|
|
.global-bottom-bar .bb-messages-list>li{display:block!important;flex-shrink:0;margin:0;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;list-style:none}
|
||
|
|
.msg-message{max-width:84%;width:fit-content;min-width:130px}
|
||
|
|
.msg-message.is-own{margin-left:auto}
|
||
|
|
.msg-byline{display:flex;align-items:center;gap:9px;padding:0 3px 5px;font-size:.64rem;color:var(--text-secondary,#7a8a97)}
|
||
|
|
.msg-byline>span:first-child{font-weight:600;color:var(--text-primary,#466072)}
|
||
|
|
.msg-message.is-own .msg-byline{justify-content:flex-end}
|
||
|
|
.msg-new-dot{width:5px;height:5px;border-radius:50%;background:#2c9589}
|
||
|
|
.msg-bubble{padding:12px 15px;border:1px solid var(--border-color,#e0e7ec);border-radius:3px 13px 13px;background:var(--bg-card,#fff);color:var(--text-primary,#304b5d)}
|
||
|
|
.msg-message.is-own .msg-bubble{background:color-mix(in srgb,var(--bg-card,#fff) 92%,#349b90);border-color:color-mix(in srgb,var(--border-color,#e0e7ec) 65%,#349b90);border-radius:13px 3px 13px 13px}
|
||
|
|
.msg-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem;line-height:1.65}
|
||
|
|
.msg-message-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:5px;padding:0 3px;min-height:18px;color:var(--text-secondary,#81909c);font-size:.61rem}
|
||
|
|
.is-own .msg-message-actions{justify-content:flex-end}
|
||
|
|
.msg-message-actions button{font-size:.64rem;background:transparent;border:0;padding:1px 0;color:var(--text-secondary,#6b8291)}
|
||
|
|
.msg-message-actions .msg-ack{color:var(--text-primary,#266e65);font-weight:600}
|
||
|
|
.msg-reply:hover,.msg-ack:hover{text-decoration:underline}
|
||
|
|
.msg-contact{display:inline-flex;gap:5px;margin-top:9px;text-decoration:none;font-size:.68rem;color:var(--text-primary,#397480)}
|
||
|
|
.msg-call{display:flex;gap:10px;align-items:center;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--border-color,#dce5e8)}
|
||
|
|
.msg-call-icon{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg-card,#fff) 83%,#cda65e);color:var(--text-primary,#80662f);flex-shrink:0}
|
||
|
|
.msg-call>div{min-width:0;flex:1}
|
||
|
|
.msg-call small{display:block;font-size:.54rem;letter-spacing:.08em;color:var(--text-secondary,#88919a);margin-bottom:3px}
|
||
|
|
.msg-call strong{display:block;font-weight:600;font-size:.8rem;overflow-wrap:anywhere}
|
||
|
|
.msg-call>div>span{display:block;font-size:.71rem;color:var(--text-secondary,#7a8c99);margin-top:3px}
|
||
|
|
.msg-call-action{display:flex;align-items:center;gap:5px;flex-shrink:0;text-decoration:none;color:var(--text-primary,#286e65);font-size:.66rem;padding:6px 8px;border:1px solid var(--border-color,#d4e0e4);border-radius:7px}
|
||
|
|
.global-bottom-bar .bb-messages-composer{margin:0;padding:12px 18px 10px;flex-shrink:0;border:0;border-top:1px solid var(--border-color,#e5ebee);background:var(--bg-card,#fff);border-radius:0}
|
||
|
|
.msg-compose-field{display:flex;align-items:flex-end;border:1px solid var(--border-color,#dbe4ea);border-radius:11px;background:var(--bg-card,#fff);padding:8px;gap:9px}
|
||
|
|
.msg-compose-field:focus-within{border-color:#639f99;box-shadow:0 0 0 2px #349b9012}
|
||
|
|
.msg-compose-field textarea{width:100%;min-width:0;resize:vertical;max-height:110px;min-height:43px;border:0;background:transparent;outline:none;padding:3px 5px;color:var(--text-primary,#304b5d);font-size:.82rem;line-height:1.6}
|
||
|
|
.msg-send{height:33px;width:33px;border:0;border-radius:9px;background:#267b74;color:white;flex-shrink:0}
|
||
|
|
.msg-send:disabled{opacity:.5}
|
||
|
|
.msg-compose-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:7px;font-size:.63rem;color:var(--text-secondary,#84919c)}
|
||
|
|
.msg-compose-footer label{display:flex;gap:6px;align-items:center;cursor:pointer}
|
||
|
|
.msg-compose-footer input{accent-color:#267b74}
|
||
|
|
.msg-empty{display:grid;place-items:center;text-align:center;color:var(--text-secondary,#81919e);padding:24px 10px}
|
||
|
|
.msg-empty>span{width:46px;height:46px;border-radius:15px;background:var(--accent-light,#edf4f4);display:grid;place-items:center;margin-bottom:13px;font-size:1.25rem}
|
||
|
|
.msg-empty strong{font-size:.84rem;color:var(--text-primary,#3d5667)}
|
||
|
|
.msg-empty p{font-size:.73rem;max-width:260px;margin:7px 0}
|
||
|
|
/* Compose dialog shares the inbox palette and places the message first. */
|
||
|
|
#internalMessageModal .modal-dialog{max-width:640px}
|
||
|
|
#internalMessageModal .modal-content{border:1px solid var(--border-color,#dce4e9)!important;border-radius:18px!important;background:var(--bg-card,#fff);overflow:hidden}
|
||
|
|
#internalMessageModal .modal-header{padding:24px 28px 20px!important;align-items:flex-start}
|
||
|
|
#internalMessageModal .modal-header h4{font-size:1.3rem;letter-spacing:-.03em;font-weight:650;color:var(--text-primary,#233f50)}
|
||
|
|
#internalMessageModal .modal-header .text-uppercase{font-size:.6rem!important;letter-spacing:.12em;display:block;margin-bottom:7px}
|
||
|
|
#internalMessageModal .modal-body{padding:0 28px 8px!important}
|
||
|
|
#internalMessageModal .form-label{font-size:.76rem;font-weight:550;color:var(--text-primary,#445f71);margin-bottom:7px}
|
||
|
|
#internalMessageModal .form-control,#internalMessageModal .form-select{font-size:.83rem;border:1px solid var(--border-color,#dce4e9);border-radius:9px;background:var(--bg-card,#fff);color:var(--text-primary,#304b5d);padding:10px 12px}
|
||
|
|
#internalMessageModal .form-control:focus,#internalMessageModal .form-select:focus{border-color:#639f99;box-shadow:0 0 0 3px #349b9012}
|
||
|
|
#internalMessageModal #im-text{min-height:145px;line-height:1.7;resize:vertical}
|
||
|
|
#internalMessageModal [role=group]{display:flex;gap:4px!important;background:var(--bg-hover,#f1f5f6);padding:4px;border-radius:10px;margin-bottom:22px!important}
|
||
|
|
#internalMessageModal [data-internal-kind]{flex:1;border:0!important;background:transparent;color:var(--text-secondary,#7c8b96);border-radius:7px;font-size:.78rem;padding:10px}
|
||
|
|
#internalMessageModal [data-internal-kind][aria-pressed=true]{background:var(--bg-card,#fff);color:var(--text-primary,#2d635d);box-shadow:0 1px 5px #163b4912}
|
||
|
|
#internalMessageModal #im-phone-fields{padding:14px 4px;background:var(--bg-hover,#f5f7f8);border-radius:10px;margin:0 0 17px}
|
||
|
|
#internalMessageModal .modal-footer{padding:16px 28px 22px!important;background:var(--bg-hover,#f7f9fa);gap:8px}
|
||
|
|
#internalMessageModal .modal-footer .btn{border-radius:9px;font-size:.8rem;padding:10px 19px}
|
||
|
|
#internalMessageModal #im-send{background:#267b74;border-color:#267b74}
|
||
|
|
#internalMessageModal .form-check-label,#internalMessageModal p.small{font-size:.7rem!important;color:var(--text-secondary,#7c8c98)}
|
||
|
|
#internalMessageModal #im-contact .btn{font-size:.7rem;border-radius:7px;border-color:var(--border-color,#d6e4e5);color:var(--text-primary,#397480)}
|
||
|
|
#internalMessageModal .form-check-input{accent-color:#267b74}
|
||
|
|
@media(max-width:820px){.global-bottom-bar .bb-messages-layout{grid-template-columns:195px minmax(0,1fr)}.msg-avatar{display:none}.msg-conversation-header{padding:11px 13px}.global-bottom-bar .bb-messages-list{padding:14px!important}.msg-message{max-width:94%}.msg-compose-footer>small{display:none}.msg-call{flex-wrap:wrap}.msg-call-action{margin-left:43px}}
|
||
|
|
@media(max-width:600px){.global-bottom-bar .bb-messages-layout{display:flex;flex-direction:column}.global-bottom-bar .bb-message-threads{flex-direction:row;flex-shrink:0;overflow-x:auto;max-height:66px;border-right:0;border-bottom:1px solid var(--border-color,#e2e8ed);padding:5px;gap:4px}.msg-inbox-heading{padding:0 5px}.msg-inbox-heading>span{display:none}.global-bottom-bar .bb-message-thread{min-height:50px;width:160px;padding:7px 9px}.msg-thread-top time{display:none}.msg-conversation{flex:1}.msg-header-action span{display:none}.global-bottom-bar .bb-messages-composer{padding:8px 10px}.msg-compose-field textarea{min-height:32px}.msg-message-actions{gap:6px}.msg-ack-hint{display:none}#internalMessageModal .modal-body{padding:0 20px 8px!important}#internalMessageModal .modal-header{padding:22px 20px 18px!important}}
|