mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
feat: huge refactor of the quote styling for theming
This commit is contained in:
parent
8b06ea88f9
commit
dd58d29450
|
@ -10,116 +10,40 @@
|
||||||
border-left-width: 4px;
|
border-left-width: 4px;
|
||||||
border-left-style: solid;
|
border-left-style: solid;
|
||||||
|
|
||||||
&__primary__type-label {
|
/* Primary */
|
||||||
border-color: var(--text-primary-color);
|
&__primary {
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is related to the quote logic inside messages
|
|
||||||
.module-quote {
|
|
||||||
&--outgoing {
|
|
||||||
.module-quote__primary__author {
|
|
||||||
color: var(--message-bubbles-sent-text-color);
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
.module-contact-name {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.module-quote__primary__text {
|
|
||||||
color: var(--message-bubbles-sent-text-color);
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--message-bubbles-sent-text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--incoming {
|
|
||||||
.module-quote__primary__author {
|
|
||||||
color: var(--message-bubbles-sent-text-color);
|
|
||||||
font-weight: bold;
|
|
||||||
.module-contact-name {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.module-quote__primary__text {
|
|
||||||
color: var(--message-bubbles-sent-text-color);
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--message-bubbles-sent-text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__icon-container__icon--file {
|
|
||||||
@include color-svg('../images/file.svg', var(--primary-color));
|
|
||||||
}
|
|
||||||
.module-quote__icon-container__icon--image {
|
|
||||||
@include color-svg('../images/image.svg', var(--primary-color));
|
|
||||||
}
|
|
||||||
.module-quote__icon-container__icon--microphone {
|
|
||||||
@include color-svg('../images/microphone.svg', var(--primary-color));
|
|
||||||
}
|
|
||||||
.module-quote__icon-container__icon--play {
|
|
||||||
@include color-svg('../images/play.svg', var(--primary-color));
|
|
||||||
}
|
|
||||||
.module-quote__icon-container__icon--movie {
|
|
||||||
@include color-svg('../images/movie.svg', var(--primary-color));
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__generic-file__text {
|
|
||||||
color: var(--color-lighter-gray-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__reference-warning {
|
|
||||||
background-color: var(--color-darkest-black-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__reference-warning__icon {
|
|
||||||
@include color-svg('../images/broken-link.svg', var(--color-light-gray-color));
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__reference-warning__text {
|
|
||||||
color: var(--color-lighter-gray-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote-container {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote--no-click {
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__primary {
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding-inline-start: 8px;
|
padding-inline-start: 8px;
|
||||||
padding-inline-end: 8px;
|
padding-inline-end: 8px;
|
||||||
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
&__primary__profile-name {
|
||||||
.module-quote__primary__author {
|
font-style: italic;
|
||||||
|
}
|
||||||
|
&__primary__type-label {
|
||||||
|
font-style: italic;
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
font-weight: 300;
|
|
||||||
color: var(--color-darkest-gray-color);
|
color: var(--message-bubbles-received-text-color);
|
||||||
|
border-color: var(--message-bubbles-received-text-color);
|
||||||
|
}
|
||||||
|
&__primary__author {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 18px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
color: var(--message-bubbles-received-text-color);
|
||||||
|
|
||||||
.module-quote__primary__profile-name {
|
.module-contact-name {
|
||||||
font-style: italic;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.module-quote__primary__text {
|
&__primary__text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
|
@ -133,38 +57,19 @@
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 1;
|
-webkit-line-clamp: 1;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__primary__type-label {
|
color: var(--message-bubbles-received-text-color);
|
||||||
font-style: italic;
|
|
||||||
color: var(--color-darkest-gray-color);
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__primary__filename-label {
|
a {
|
||||||
|
color: var(--message-bubbles-received-text-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__primary__filename-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.module-quote__close-container {
|
/* Icons */
|
||||||
position: absolute;
|
&__icon-container {
|
||||||
top: 4px;
|
|
||||||
right: 4px;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
|
|
||||||
background-color: rgba(255, 255, 255, 0.75);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__close-button {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
@include color-svg('../images/x.svg', var(--color-gray-color));
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__icon-container {
|
|
||||||
flex: initial;
|
flex: initial;
|
||||||
min-width: 54px;
|
min-width: 54px;
|
||||||
width: 54px;
|
width: 54px;
|
||||||
|
@ -189,9 +94,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
&__circle-background {
|
||||||
|
|
||||||
.module-quote__icon-container__circle-background {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -199,31 +102,36 @@
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--color-white-color);
|
background-color: var(--chat-buttons-background-color);
|
||||||
}
|
|
||||||
|
|
||||||
.module-quote__icon-container__icon {
|
&:hover {
|
||||||
|
background-color: var(--chat-buttons-background-hover-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__icon {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
|
||||||
&--file {
|
&--file {
|
||||||
@include color-svg('../images/file.svg', var(--primary-color));
|
@include color-svg('../images/file.svg', var(--button-icon-stroke-color));
|
||||||
}
|
}
|
||||||
&--image {
|
&--image {
|
||||||
@include color-svg('../images/image.svg', var(--primary-color));
|
@include color-svg('../images/image.svg', var(--button-icon-stroke-color));
|
||||||
}
|
}
|
||||||
&--microphone {
|
&--microphone {
|
||||||
@include color-svg('../images/microphone.svg', var(--primary-color));
|
@include color-svg('../images/microphone.svg', var(--button-icon-stroke-color));
|
||||||
}
|
}
|
||||||
&--play {
|
&--play {
|
||||||
@include color-svg('../images/play.svg', var(--primary-color));
|
@include color-svg('../images/play.svg', var(--chat-buttons-icon-color));
|
||||||
}
|
}
|
||||||
&--movie {
|
&--movie {
|
||||||
@include color-svg('../images/movie.svg', var(--primary-color));
|
@include color-svg('../images/movie.svg', var(--button-icon-stroke-color));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.module-quote__generic {
|
/* Generic Files */
|
||||||
|
&__generic {
|
||||||
&-file {
|
&-file {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -242,7 +150,7 @@
|
||||||
&-file__text {
|
&-file__text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: var(--color-darkest-gray-color);
|
color: var(--message-bubbles-received-text-color);
|
||||||
|
|
||||||
max-width: calc(100% - 26px);
|
max-width: calc(100% - 26px);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
@ -251,14 +159,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.module-quote__reference {
|
/* Reference Warning */
|
||||||
|
&__reference {
|
||||||
&-warning {
|
&-warning {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
background-color: var(--color-darkest-white-color);
|
background-color: var(--message-link-preview-background-color);
|
||||||
padding-inline-start: 8px;
|
padding-inline-start: 8px;
|
||||||
padding-inline-end: 8px;
|
padding-inline-end: 8px;
|
||||||
margin-inline-end: 8px;
|
margin-inline-end: 8px;
|
||||||
|
@ -267,18 +176,67 @@
|
||||||
&-warning__icon {
|
&-warning__icon {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
@include color-svg('../images/broken-link.svg', var(--color-gray-color));
|
@include color-svg('../images/broken-link.svg', var(--message-bubbles-received-text-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
&-warning__text {
|
&-warning__text {
|
||||||
margin-inline-start: 6px;
|
margin-inline-start: 6px;
|
||||||
color: var(--color-darkest-gray-color);
|
color: var(--message-bubbles-received-text-color);
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color);
|
/* Misc */
|
||||||
|
&--no-click {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Outgoing messages */
|
||||||
|
.module-quote--outgoing {
|
||||||
|
color: var(--message-bubbles-sent-text-color);
|
||||||
|
.module-quote {
|
||||||
|
&__primary__type-label {
|
||||||
|
color: var(--message-bubbles-sent-text-color);
|
||||||
|
border-color: var(--message-bubbles-sent-text-color);
|
||||||
|
}
|
||||||
|
&__primary__author {
|
||||||
|
color: var(--message-bubbles-sent-text-color);
|
||||||
|
}
|
||||||
|
&__primary__text {
|
||||||
|
color: var(--message-bubbles-sent-text-color);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--message-bubbles-sent-text-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__generic {
|
||||||
|
&-file__text {
|
||||||
|
color: var(--message-bubbles-sent-text-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.module-quote-container {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
/* This is not within the module-quote class so we handle it separately */
|
||||||
|
.module-quote__reference-warning--outgoing {
|
||||||
|
.module-quote__reference-warning__text {
|
||||||
|
color: var(--message-bubbles-sent-text-color);
|
||||||
|
}
|
||||||
|
.module-quote__reference-warning__icon {
|
||||||
|
@include color-svg('../images/broken-link.svg', var(--message-bubbles-sent-text-color));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$session-highlight-message-shadow: 0px 0px 10px 1px var(--button-icon-stroke-color);
|
||||||
|
|
||||||
@keyframes remove-box-shadow {
|
@keyframes remove-box-shadow {
|
||||||
0% {
|
0% {
|
||||||
|
|
|
@ -316,7 +316,9 @@ export const QuoteReferenceWarning = (
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'module-quote__reference-warning',
|
'module-quote__reference-warning',
|
||||||
isIncoming ? 'module-quote__reference-warning--incoming' : null
|
isIncoming
|
||||||
|
? 'module-quote__reference-warning--incoming'
|
||||||
|
: 'module-quote__reference-warning--outgoing'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -650,6 +650,7 @@ export const SessionGlobalStyles = createGlobalStyle`
|
||||||
/* Also used for the Media Grid Items */
|
/* Also used for the Media Grid Items */
|
||||||
/* Also used for Staged Generic Attachments */
|
/* Also used for Staged Generic Attachments */
|
||||||
/* Also used for FileDropZone */
|
/* Also used for FileDropZone */
|
||||||
|
/* Used for Quote References Not Found */
|
||||||
/* Same for all Themes */
|
/* Same for all Themes */
|
||||||
--message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);
|
--message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue