/* * Wire * Copyright (C) 2018 Wire Swiss GmbH * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see http://www.gnu.org/licenses/. * */ #show-participants { min-width: 0; //needed for the truncation of long titles to work properly in flex-boxes } .conversation-title-bar { .flex-center; position: relative; width: 100%; height: var(--content-title-bar-height); padding: 0 8px; border-bottom: 1px solid var(--border-color); margin: 0; background-color: var(--app-bg); list-style-type: none; } .conversation-title-bar-name { .ellipsis-nowrap; .flex-center; display: flex; height: 100%; flex-grow: 1; user-select: none; &--verified { margin-right: 16px; } } .conversation-title-bar-legal-hold { margin-right: 6px; } body.theme-dark { .conversation-title-bar-indication-badge { background-color: var(--accent-color-600); color: var(--black) !important; } } .conversation-title-bar-indication-badge { .text-white; position: absolute; z-index: @z-index-badge; top: 56px; padding: 5px 16px; border-radius: 6px; background-color: var(--accent-color); box-shadow: 0 2px 16px 0 fade(#000, 8%); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); strong { font-weight: var(--font-weight-bold); } } .conversation-title-bar-icons, .conversation-title-bar-library { display: flex; min-width: 128px; height: 100%; align-items: center; @media (min-width: 640px) and (max-width: 768px) { min-width: 0; } } .conversation-title-bar-icons { justify-content: flex-end; .buttons-group { margin-right: 8px; button, [role='button'] { border-radius: 0; &:first-of-type { border-radius: 12px 0 0 12px; } &:last-of-type { border-radius: 0 12px 12px 0; } } } } .conversation-title-bar-icon { .button-icon-primary; * > { display: flex; } } .conversation-title-bar-name-label { .heading-h3; overflow: hidden; margin: 0.15em; cursor: pointer; text-overflow: ellipsis; &--wrapper { .flex-center; display: flex; } + .conversation-badges { margin-left: 4px; } } .conversation-title-bar-name--subtitle { .font-size-xs; color: var(--background-fade-40); } .modal-description { font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); line-height: var(--line-height-lg); text-align: center; }