fa10a67811
* Implement Profile Viewer Fixes #111 * Make user avatar in chat clickable * design progress * Refactored code * progress * Updated chip comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refactored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added msg functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added Ignore functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Fixed Ignore btn bug Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refectored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> Co-authored-by: Ajay Bura <ajbura@gmail.com>
402 lines
No EOL
7.5 KiB
SCSS
402 lines
No EOL
7.5 KiB
SCSS
@use '../../atoms/scroll/scrollbar';
|
|
|
|
.message,
|
|
.ph-msg {
|
|
padding: var(--sp-ultra-tight) var(--sp-normal);
|
|
padding-right: var(--sp-extra-tight);
|
|
display: flex;
|
|
|
|
&:hover {
|
|
background-color: var(--bg-surface-hover);
|
|
& .message__options {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
[dir=rtl] & {
|
|
padding: {
|
|
left: var(--sp-extra-tight);
|
|
right: var(--sp-normal);
|
|
}
|
|
}
|
|
|
|
&__avatar-container {
|
|
padding-top: 6px;
|
|
margin-right: var(--sp-tight);
|
|
|
|
& button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[dir=rtl] & {
|
|
margin: {
|
|
left: var(--sp-tight);
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__main-container {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.message {
|
|
&--full + &--full,
|
|
&--content-only + &--full,
|
|
& + .timeline-change,
|
|
.timeline-change + & {
|
|
margin-top: var(--sp-normal);
|
|
}
|
|
&__avatar-container {
|
|
width: var(--av-small);
|
|
}
|
|
}
|
|
|
|
.ph-msg {
|
|
&__avatar {
|
|
width: var(--av-small);
|
|
height: var(--av-small);
|
|
background-color: var(--bg-surface-hover);
|
|
border-radius: var(--bo-radius);
|
|
}
|
|
|
|
&__header,
|
|
&__content > div {
|
|
margin: var(--sp-ultra-tight) 0;
|
|
margin-right: var(--sp-extra-tight);
|
|
height: var(--fs-b1);
|
|
width: 100%;
|
|
max-width: 100px;
|
|
background-color: var(--bg-surface-hover);
|
|
border-radius: calc(var(--bo-radius) / 2);
|
|
|
|
[dir=rtl] & {
|
|
margin: {
|
|
right: 0;
|
|
left: var(--sp-extra-tight);
|
|
}
|
|
}
|
|
}
|
|
&__content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
&__content > div:nth-child(1n) {
|
|
max-width: 10%;
|
|
}
|
|
&__content > div:nth-child(2n) {
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
.message__reply,
|
|
.message__content,
|
|
.message__edit,
|
|
.message__reactions {
|
|
max-width: 640px;
|
|
min-width: 0;
|
|
}
|
|
|
|
|
|
.message__header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
& .message__profile {
|
|
min-width: 0;
|
|
color: var(--tc-surface-high);
|
|
margin-right: var(--sp-tight);
|
|
|
|
[dir=rtl] & {
|
|
margin-left: var(--sp-tight);
|
|
margin-right: 0;
|
|
}
|
|
|
|
& > .text {
|
|
color: inherit;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
& > .text:last-child { display: none; }
|
|
&:hover {
|
|
& > .text:first-child { display: none; }
|
|
& > .text:last-child { display: block; }
|
|
}
|
|
}
|
|
|
|
& .message__time {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
& > .text {
|
|
white-space: nowrap;
|
|
color: var(--tc-surface-low);
|
|
}
|
|
}
|
|
}
|
|
.message__reply {
|
|
.text {
|
|
color: var(--tc-surface-low);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.ic-raw {
|
|
width: 16px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
.message__content {
|
|
word-break: break-word;
|
|
|
|
& > .text > * {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
& a {
|
|
word-break: break-all;
|
|
}
|
|
&-edited {
|
|
color: var(--tc-surface-low);
|
|
}
|
|
}
|
|
.message__edit {
|
|
padding: var(--sp-extra-tight) 0;
|
|
&-btns button {
|
|
margin: var(--sp-tight) var(--sp-tight) 0 0;
|
|
[dir=rtl] & {
|
|
margin: var(--sp-tight) 0 0 var(--sp-tight);
|
|
}
|
|
}
|
|
}
|
|
.message__reactions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
& .ic-btn-surface {
|
|
display: none;
|
|
padding: var(--sp-ultra-tight);
|
|
margin-top: var(--sp-extra-tight);
|
|
}
|
|
&:hover .ic-btn-surface {
|
|
display: block;
|
|
}
|
|
}
|
|
.msg__reaction {
|
|
margin: var(--sp-extra-tight) var(--sp-extra-tight) 0 0;
|
|
padding: 0 var(--sp-ultra-tight);
|
|
min-height: 26px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--tc-surface-normal);
|
|
background-color: var(--bg-surface-low);
|
|
border: 1px solid var(--bg-surface-border);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
|
|
& .emoji {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin: 2px;
|
|
}
|
|
&-count {
|
|
margin: 0 var(--sp-ultra-tight);
|
|
color: var(--tc-surface-normal)
|
|
}
|
|
&-tooltip .emoji {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin: 0 var(--sp-ultra-tight);
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
[dir=rtl] & {
|
|
margin: {
|
|
right: 0;
|
|
left: var(--sp-extra-tight);
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background-color: var(--bg-surface-hover);
|
|
}
|
|
}
|
|
&:active {
|
|
background-color: var(--bg-surface-active)
|
|
}
|
|
|
|
&--active {
|
|
background-color: var(--bg-caution-active);
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background-color: var(--bg-caution-hover);
|
|
}
|
|
}
|
|
&:active {
|
|
background-color: var(--bg-caution-active)
|
|
}
|
|
}
|
|
}
|
|
.message__options {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 60px;
|
|
z-index: 999;
|
|
transform: translateY(-50%);
|
|
|
|
border-radius: var(--bo-radius);
|
|
box-shadow: var(--bs-surface-border);
|
|
background-color: var(--bg-surface-low);
|
|
display: none;
|
|
|
|
[dir=rtl] & {
|
|
left: 60px;
|
|
right: unset;
|
|
}
|
|
}
|
|
|
|
// markdown formating
|
|
.message__content {
|
|
& h1,
|
|
& h2 {
|
|
color: var(--tc-surface-high);
|
|
margin: var(--sp-extra-loose) 0 var(--sp-normal);
|
|
line-height: var(--lh-h1);
|
|
}
|
|
& h3,
|
|
& h4 {
|
|
color: var(--tc-surface-high);
|
|
margin: var(--sp-loose) 0 var(--sp-tight);
|
|
line-height: var(--lh-h2);
|
|
}
|
|
& h5,
|
|
& h6 {
|
|
color: var(--tc-surface-high);
|
|
margin: var(--sp-normal) 0 var(--sp-extra-tight);
|
|
line-height: var(--lh-s1);
|
|
}
|
|
& hr {
|
|
border-color: var(--bg-surface-border);
|
|
}
|
|
|
|
.text img {
|
|
margin: var(--sp-ultra-tight) 0;
|
|
max-width: 296px;
|
|
border-radius: calc(var(--bo-radius) / 2);
|
|
}
|
|
|
|
& p,
|
|
& pre,
|
|
& blockquote {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
& pre,
|
|
& blockquote {
|
|
margin: var(--sp-ultra-tight) 0;
|
|
padding: var(--sp-extra-tight);
|
|
background-color: var(--bg-surface-hover) !important;
|
|
border-radius: calc(var(--bo-radius) / 2);
|
|
}
|
|
& pre {
|
|
div {
|
|
background: none !important;
|
|
margin: 0 !important;
|
|
}
|
|
span {
|
|
background: none !important;
|
|
}
|
|
.linenumber {
|
|
min-width: 2.25em !important;
|
|
}
|
|
}
|
|
& code {
|
|
padding: 0 !important;
|
|
color: var(--tc-code) !important;
|
|
white-space: pre-wrap;
|
|
@include scrollbar.scroll;
|
|
@include scrollbar.scroll__h;
|
|
@include scrollbar.scroll--auto-hide;
|
|
}
|
|
& pre code {
|
|
color: var(--tc-surface-normal) !important;
|
|
}
|
|
& blockquote {
|
|
padding-left: var(--sp-extra-tight);
|
|
border-left: 4px solid var(--bg-surface-active);
|
|
white-space: initial !important;
|
|
|
|
& > * {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
[dir=rtl] & {
|
|
padding: {
|
|
left: 0;
|
|
right: var(--sp-extra-tight);
|
|
}
|
|
border: {
|
|
left: none;
|
|
right: 4px solid var(--bg-surface-active);
|
|
}
|
|
}
|
|
}
|
|
& ul,
|
|
& ol {
|
|
margin: var(--sp-ultra-tight) 0;
|
|
padding-left: 24px;
|
|
white-space: initial !important;
|
|
|
|
& > * {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
[dir=rtl] & {
|
|
padding: {
|
|
left: 0;
|
|
right: 24px;
|
|
}
|
|
}
|
|
}
|
|
& ul.contains-task-list {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
& table {
|
|
background-color: var(--bg-surface-hover);
|
|
border-radius: calc(var(--bo-radius) / 2);
|
|
border-spacing: 0;
|
|
border: 1px solid var(--bg-surface-border);
|
|
|
|
& td, & th {
|
|
padding: var(--sp-extra-tight);
|
|
border: 1px solid var(--bg-surface-border);
|
|
border-width: 0 1px 1px 0;
|
|
&:last-child {
|
|
border-width: 0;
|
|
border-bottom-width: 1px;
|
|
[dir=rtl] & {
|
|
border-width: 0 1px 1px 0;
|
|
}
|
|
}
|
|
[dir=rtl] &:first-child {
|
|
border-width: 0;
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
& tbody tr:nth-child(2n + 1) {
|
|
background-color: var(--bg-surface-hover);
|
|
}
|
|
& tr:last-child td {
|
|
border-bottom-width: 0px !important;
|
|
}
|
|
}
|
|
} |