:root { --chat-mobile-avatar-size: 38px; } .chat-message { // 1px to account for .is-online box-shadow padding: 0.1em 1px; } .chat-message:not(.user-info-hidden) { padding-top: 0.75em; } body.has-full-page-chat { .footer-nav { display: none !important; } #main-outlet { padding: 0; } } .chat-channel-settings-modal .modal-inner-container { max-width: 90vw; .chat-channel-settings-row { max-width: 100%; .chat-channel-preview { display: none; } .chat-channel-title { max-width: 80%; } .controls.save-container { justify-content: end; } } } .full-page-chat { grid-template-columns: 100%; overflow-x: hidden; width: 100%; .chat-live-pane { border-radius: 0; padding: 0; } .chat-drawer { width: 100%; } .chat-full-page-header { background-color: var(--secondary); padding: 0.5em 10px; } .chat-messages-scroll { padding: 0 10px; } } .channels-list .chat-channel-row { .category-chat-private .d-icon { background-color: var(--secondary); } .chat-channel-unread-indicator { width: 6px; height: 6px; left: 5px; top: calc(50% - 3px); } } .sidebar-container .channels-list .chat-channel-divider { padding-left: 1em; } .sidebar-container .channels-list .chat-channel-row { padding: 0.5em; } .create-channel-modal { .modal-inner-container { width: 95%; } } .chat-browse { .chat-channel-settings-row { font-size: var(--font-down-1); .chat-channel-title { grid-template-columns: 15px 1fr; } } } .chat-full-page-header { .chat-channel-header-details { .chat-channel-retry-archive { flex-direction: column; .chat-channel-archive-failed-retry { margin-top: 0.5em; } } } } html.has-full-page-chat body { #main-outlet-wrapper { // restricts the height of the page grid-template-rows: calc(var(--chat-vh, 1vh) * 100 - var(--header-offset)); } } .chat-message-separator { margin-left: 0; } .header-dropdown-toggle.open-chat { .icon { &.active { border: 1px solid var(--primary-low); background: var(--primary-very-low); .d-icon { color: var(--primary-medium); } } } }