mirror of
https://github.com/discourse/discourse.git
synced 2025-03-29 19:45:41 +08:00
UX: chat index refactor (#19264)
* Refactor: split out chat index files * Refactor: is-online offset
This commit is contained in:
chapoi
GitHub
parent
630bde1ba2
commit
b83d9fa802
@ -8,18 +8,6 @@
|
||||
align-items: center;
|
||||
@include ellipsis;
|
||||
|
||||
.category-chat-private .d-icon {
|
||||
background-color: var(--secondary);
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
padding: 2px 2px 3px;
|
||||
color: var(--primary-high);
|
||||
height: 0.5em;
|
||||
width: 0.5em;
|
||||
left: calc(0.6125em + 3px);
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.user-status-message {
|
||||
display: none; // we only show when in channels list
|
||||
}
|
||||
|
||||
@ -35,18 +35,6 @@ body.composer-open .chat-drawer-outlet-container {
|
||||
padding-bottom: var(--composer-height, 0);
|
||||
transition: all 100ms ease-in;
|
||||
transition-property: bottom, padding-bottom;
|
||||
|
||||
.channels-list {
|
||||
.chat-channel-row {
|
||||
height: 3.6em;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0 0 0 0.5rem;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer {
|
||||
@ -146,9 +134,7 @@ body.composer-open .chat-drawer-outlet-container {
|
||||
height: 1.25em;
|
||||
}
|
||||
}
|
||||
.category-chat-private .d-icon {
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
.badge-wrapper.bullet {
|
||||
margin-right: 0px;
|
||||
}
|
||||
@ -211,9 +197,4 @@ body.composer-open .chat-drawer-outlet-container {
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
padding-bottom: 0.25em;
|
||||
|
||||
.channels-list .chat-channel-divider {
|
||||
padding: 1.5rem 0.5rem 1rem 1rem;
|
||||
color: var(--quaternary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,208 @@
|
||||
.channels-list {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
position: relative;
|
||||
@include chat-scrollbar(var(--secondary));
|
||||
|
||||
@include breakpoint(mobile-large) {
|
||||
@include chat-scrollbar();
|
||||
}
|
||||
|
||||
.open-browse-page-btn,
|
||||
.open-draft-channel-page-btn,
|
||||
.chat-channel-leave-btn {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-0-rem);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-channel-empty-message {
|
||||
margin: 0 0.5em 0.5em 0.5em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.chat-channel-divider {
|
||||
padding: 2.5rem 1.5rem 0.5rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-family: var(--heading-font-family);
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--quaternary);
|
||||
|
||||
.channel-title {
|
||||
line-height: var(--line-height-medium);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-title {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.chat-channel-row {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: var(--primary-high);
|
||||
transition: opacity 50ms ease-in;
|
||||
opacity: 1;
|
||||
|
||||
.chat-channel-title {
|
||||
&__avatar {
|
||||
padding: 1px 0; //for green active box-shadow effect;
|
||||
@media (hover: hover) {
|
||||
&.can-leave:hover {
|
||||
.toggle-channel-membership-button.-leave {
|
||||
display: block;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-metadata {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch &:hover,
|
||||
&.active {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-channel-title {
|
||||
&,
|
||||
.category-chat-name,
|
||||
.dm-usernames {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.d-icon-lock {
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
&.muted {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.chat-channel-title {
|
||||
&__users-count {
|
||||
width: var(--channel-list-avatar-size);
|
||||
height: var(--channel-list-avatar-size);
|
||||
padding: 0;
|
||||
font-size: var(--font-up-1);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
.chat-user-avatar {
|
||||
img {
|
||||
width: calc(var(--channel-list-avatar-size) - 2px);
|
||||
height: calc(var(--channel-list-avatar-size) - 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__user-info {
|
||||
@include ellipsis;
|
||||
}
|
||||
&__usernames {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
.user-status-message {
|
||||
display: inline-block;
|
||||
font-size: var(--font-down-2);
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&-description {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-metadata {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
margin-left: 0.5em;
|
||||
|
||||
&__date {
|
||||
color: var(--primary-high);
|
||||
font-size: var(--font-down-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
min-width: 14px;
|
||||
padding: 2px;
|
||||
font-size: var(--font-down-3);
|
||||
border-radius: 1em;
|
||||
background: var(--tertiary-med-or-tertiary);
|
||||
|
||||
&.urgent {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.number {
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.unfollowing {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toggle-channel-membership-button.-leave {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
.badge-wrapper {
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,92 +127,6 @@ $float-height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
position: relative;
|
||||
@include chat-scrollbar(var(--secondary));
|
||||
|
||||
@include breakpoint(mobile-large) {
|
||||
@include chat-scrollbar();
|
||||
}
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.open-browse-page-btn,
|
||||
.open-draft-channel-page-btn,
|
||||
.chat-channel-leave-btn {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-0-rem);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-channel-empty-message {
|
||||
margin: 0 0.5em 0.5em 0.5em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.chat-channel-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
padding: 0.25rem 0.5rem 0.25rem 2rem;
|
||||
font-family: var(--heading-font-family);
|
||||
font-size: var(--font-0);
|
||||
|
||||
.channel-title {
|
||||
line-height: var(--line-height-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.edit-channels-dropdown {
|
||||
.select-kit-header {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: var(--font-0-rem);
|
||||
padding: 0.5rem;
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary-medium);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:focus .d-icon,
|
||||
&:hover .d-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.open-browse-page-btn {
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-messages-container {
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
@ -278,9 +192,10 @@ $float-height: 530px;
|
||||
|
||||
.chat-user-avatar-container {
|
||||
position: relative;
|
||||
padding: 1px; //for is-online boxshadow effect, preventing cutoff
|
||||
|
||||
.avatar {
|
||||
padding: 1px;
|
||||
padding: 1px; ////for is-online boxshadow effect, preventing shift
|
||||
}
|
||||
|
||||
.chat-user-presence-flair {
|
||||
@ -425,149 +340,6 @@ $float-height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-row {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: var(--primary-high);
|
||||
transition: opacity 50ms ease-in;
|
||||
opacity: 1;
|
||||
|
||||
.chat-channel-title {
|
||||
&__user-info {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
&__usernames {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.user-status-message {
|
||||
display: inline-block;
|
||||
font-size: var(--font-down-2);
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&-description {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-metadata {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
|
||||
&__date {
|
||||
color: var(--primary-high);
|
||||
font-size: var(--font-down-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.25rem;
|
||||
width: auto;
|
||||
min-width: 14px;
|
||||
padding: 2px;
|
||||
font-size: var(--font-down-3);
|
||||
border-radius: 1em;
|
||||
|
||||
.number {
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-user-avatar {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.unfollowing {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toggle-channel-membership-button.-leave {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&.can-leave:hover {
|
||||
.toggle-channel-membership-button.-leave {
|
||||
display: block;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-metadata {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch &:hover,
|
||||
&.active {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
border-color: var(--primary-low);
|
||||
}
|
||||
|
||||
.chat-channel-title {
|
||||
&,
|
||||
.category-chat-name,
|
||||
.dm-usernames {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.d-icon-lock {
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
&.muted {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.badge-wrapper {
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
background: var(--tertiary-med-or-tertiary);
|
||||
|
||||
&.urgent {
|
||||
background: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-settings-row {
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
@ -617,12 +389,6 @@ $float-height: 530px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-container {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-settings-row {
|
||||
.channel-name-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -637,6 +403,9 @@ $float-height: 530px;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
.btn-container {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
||||
@ -659,36 +428,6 @@ body.has-full-page-chat {
|
||||
display: grid;
|
||||
grid-template-columns: var(--full-page-sidebar-width) 1fr;
|
||||
|
||||
.channels-list {
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--primary-low);
|
||||
|
||||
.chat-channel-row {
|
||||
padding: 0 0 0 0.5rem;
|
||||
margin: 0 0.5rem 0.125rem 0.5rem;
|
||||
border-radius: 0.25em;
|
||||
|
||||
.category-chat-private .d-icon {
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--primary-low);
|
||||
.chat-channel-title {
|
||||
.category-chat-name,
|
||||
.chat-name,
|
||||
.dm-usernames {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
.category-chat-private .d-icon {
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-full-page-header {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
@ -793,33 +532,6 @@ body.has-full-page-chat {
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list {
|
||||
.category-chat-badge {
|
||||
color: var(--primary-low-mid);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.d-icon {
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-chat-private .d-icon {
|
||||
background-color: var(--secondary);
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
padding: 3px 2px;
|
||||
color: var(--primary-high);
|
||||
height: 0.5em;
|
||||
width: 0.5em;
|
||||
left: calc(0.6125em + 6px);
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-archive-modal-inner {
|
||||
.chat-to-topic-selector {
|
||||
width: 500px;
|
||||
@ -1020,22 +732,3 @@ html.has-full-page-chat {
|
||||
[data-popper-reference-hidden] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.channels-list {
|
||||
.chat-user-avatar {
|
||||
img {
|
||||
width: calc(var(--channel-list-avatar-size) - 2px);
|
||||
height: calc(var(--channel-list-avatar-size) - 2px);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-title {
|
||||
&__users-count {
|
||||
width: var(--channel-list-avatar-size);
|
||||
height: var(--channel-list-avatar-size);
|
||||
padding: 0;
|
||||
font-size: var(--font-up-1);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,16 +6,3 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list {
|
||||
.chat-channel-title {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-channel-row:hover {
|
||||
.chat-channel-title {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
.chat-drawer-container .channels-list {
|
||||
.chat-channel-divider {
|
||||
padding: 1.5rem 0.5rem 0.5rem 1rem;
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
.chat-channel-row {
|
||||
height: 3.6em;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0 0 0 0.5rem;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.chat-channel-metadata {
|
||||
.chat-channel-unread-indicator {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-channel-membership-button.-leave {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
.has-full-page-chat:not(.discourse-sidebar) {
|
||||
.full-page-chat {
|
||||
.channels-list {
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--primary-low);
|
||||
background: var(--primary-very-low);
|
||||
|
||||
.chat-channel-divider {
|
||||
padding: 2rem 1rem 0.5rem 1rem;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.chat-channel-row {
|
||||
height: 2.5em;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0 0.5rem 0.125rem 0.5rem;
|
||||
border-radius: 0.25em;
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--primary-low);
|
||||
.chat-channel-title {
|
||||
.category-chat-name,
|
||||
.chat-name,
|
||||
.dm-usernames {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-metadata {
|
||||
&__date {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -73,36 +73,6 @@
|
||||
border-right: 1px solid var(--primary-low);
|
||||
border-left: 1px solid var(--primary-low);
|
||||
|
||||
.channels-list {
|
||||
background: var(--primary-very-low);
|
||||
|
||||
.chat-channel-divider {
|
||||
padding: 2rem 0.5rem 0.5rem 1rem;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-channel-row {
|
||||
height: 2.5em;
|
||||
padding-right: 0.5rem;
|
||||
|
||||
.chat-channel-metadata {
|
||||
&__date {
|
||||
display: none;
|
||||
}
|
||||
.chat-channel-unread-indicator {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-live-pane {
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import "common/foundation/mixins";
|
||||
.full-page-chat {
|
||||
overflow: hidden; //prevents double scroll
|
||||
|
||||
.channels-list {
|
||||
overflow-y: overlay;
|
||||
padding-bottom: 6rem;
|
||||
@ -16,6 +17,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list-container {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.chat-channel-row {
|
||||
height: 4em;
|
||||
margin: 0 1.5rem;
|
||||
@ -24,6 +29,10 @@
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
.chat-channel-metadata {
|
||||
.chat-channel-unread-indicator {
|
||||
font-size: var(--font-down-2);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
&__date {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
@ -31,8 +40,6 @@
|
||||
}
|
||||
|
||||
.chat-channel-divider {
|
||||
background-color: var(--secondary);
|
||||
padding: 2.5rem 1.5rem 0.75rem 1.5rem;
|
||||
font-size: var(--font-up-1);
|
||||
|
||||
&:first-of-type {
|
||||
@ -45,14 +52,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list-container {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.chat-user-avatar-container {
|
||||
padding-left: 1px; //for is-online boxshadow effect
|
||||
}
|
||||
|
||||
.chat-user-avatar {
|
||||
+ .chat-channel-title__usernames {
|
||||
margin-left: 1rem;
|
||||
|
||||
@ -2,11 +2,6 @@
|
||||
--channel-list-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;
|
||||
}
|
||||
@ -73,20 +68,6 @@ body.has-full-page-chat {
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list {
|
||||
.chat-channel-row {
|
||||
.category-chat-private .d-icon {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.chat-channel-metadata {
|
||||
.chat-channel-unread-indicator {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-container .channels-list .chat-channel-divider {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
@ -19,6 +19,8 @@ register_asset "stylesheets/common/chat-browse.scss"
|
||||
register_asset "stylesheets/common/chat-drawer.scss"
|
||||
register_asset "stylesheets/common/chat-index.scss"
|
||||
register_asset "stylesheets/mobile/chat-index.scss", :mobile
|
||||
register_asset "stylesheets/desktop/chat-index-full-page.scss", :desktop
|
||||
register_asset "stylesheets/desktop/chat-index-drawer.scss", :desktop
|
||||
register_asset "stylesheets/common/chat-channel-preview-card.scss"
|
||||
register_asset "stylesheets/common/chat-channel-info.scss"
|
||||
register_asset "stylesheets/common/chat-draft-channel.scss"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user