session-desktop/stylesheets/_session_left_pane.scss

173 lines
3.6 KiB
SCSS

$session-compose-margin: 20px;
.module-conversation {
// default conversation list item text color
&__user__profile {
&-number,
&-name {
font-weight: bold;
font-size: var(--font-size-md);
}
}
&-list-item {
background: var(--conversation-tab-background-color);
&:hover {
background: var(--conversation-tab-background-hover-color);
}
&--is-selected {
background: var(--conversation-tab-background-selected-color);
.module-conversation__user__profile-number,
.module-conversation__user__profile-name,
.module-conversation-list-item__message__text {
color: var(--conversation-tab-text-selected-color);
}
}
&--has-unread {
background: var(--conversation-tab-background-unread-color);
border-left: 4px solid var(--conversation-tab-color-strip-color);
}
&__unread-count {
background: var(--unread-messages-alert-background-color);
color: var(--unread-messages-alert-text-color);
position: static !important;
font-weight: 700 !important;
box-shadow: none !important;
margin: 0 !important;
flex-shrink: 0;
}
&__header__date,
&__header__date--has-unread {
flex-grow: 1 !important;
text-align: end !important;
}
&__message__text {
color: var(--conversation-tab-text-color);
&--has-unread {
color: var(--conversation-tab-text-unread-color);
}
}
&__header__name {
flex-grow: 0;
padding-inline-end: 5px;
}
&__header__name--with-unread .module-conversation__user__profile-number,
&__header__name--with-unread .module-conversation__user__profile-name {
color: var(--conversation-tab-text-unread-color);
}
}
}
.module-left-pane {
position: relative;
height: 100%;
flex-shrink: 0;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
&-session {
display: flex;
height: 100%;
}
&__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: var(--main-view-header-height);
padding-inline-end: 7px;
transition: var(--default-duration);
}
&__title {
padding-inline-end: var(--margins-sm);
padding-inline-start: var(--margins-sm);
transition: var(--default-duration);
flex-grow: 1;
}
&-overlay {
background: var(--background-primary-color);
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
overflow-y: auto;
overflow-x: hidden;
.session-icon .exit {
padding: 13px;
}
.exit {
margin-top: 10px;
margin-inline-start: 13px;
align-self: flex-start;
}
.session-id-editable {
width: 90%;
textarea::-webkit-inner-spin-button {
margin: 0px 20px;
width: -webkit-fill-available;
flex-shrink: 0;
}
}
.session-id-editable-disabled {
border: none;
}
.session-button {
min-width: 160px;
width: fit-content;
margin-top: 1rem;
margin-bottom: 3rem;
flex-shrink: 0;
}
}
}
.conversation.placeholder {
margin: auto;
height: 100%;
.container {
display: flex;
height: 100%;
}
}
.session-full-logo {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
.session-brand-logo {
height: 180px;
filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
brightness(106%) contrast(103%);
}
.session-text-logo {
margin-top: 10px;
width: 250px;
transition: 0s;
filter: var(--session-logo-text-current-filter);
}
}