.conversation-stack, .new-conversation, .inbox, .gutter { height: 100%; overflow: hidden; position: relative; } .expired { .conversation-stack, .gutter { height: calc(100% - 48px); } } .scrollable { height: 100%; overflow: auto; } .gutter { @include light-theme { background-color: $color-gray-02; ::-webkit-scrollbar-track { background: $color-gray-02; } ::-webkit-scrollbar-thumb { border: 2px solid $color-gray-02; } } @include dark-theme { background-color: $color-gray-80; ::-webkit-scrollbar-track { background: $color-gray-80; } ::-webkit-scrollbar-thumb { border: 2px solid $color-gray-80; } } float: left; width: $left-pane-width; user-select: none; .content { overflow-y: scroll; max-height: calc(100% - 88px); } } .network-status-container { .network-status { background: url('../images/error_red.svg') no-repeat left 10px center; background-size: 25px 25px; background-color: $color-accent-yellow; padding: 10px; padding-left: 48px; display: none; .network-status-message { h3 { padding: 0px; margin: 0px; margin-bottom: 2px; font-size: 14px; } span { display: inline-block; font-size: 12px; padding: 0.5em 0; } @include dark-theme { color: $color-gray-90; } } .action { button { border-radius: 5px; border: solid 1px $color-gray-25; cursor: pointer; font-family: inherit; color: $color-white; background: $color-signal-blue; } } } } .left-pane-placeholder { height: 100%; } .left-pane-wrapper { height: 100%; } .conversation.placeholder { text-align: center; user-select: none; .container { position: absolute; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .content { display: inline-block; } h3 { font-size: large; } }