mirror of
https://github.com/danog/telegram-tt.git
synced 2024-11-30 04:39:00 +01:00
Better Dark theme
This commit is contained in:
Alexander Zinchuk
parent
9fa042fdf9
commit
e8b9adedc1
@ -16,7 +16,7 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #F2EBCE;
|
||||
background-color: #A2AF8E;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -25,7 +25,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.disable-animations #root & {
|
||||
body:not(.animation-level-0) #root & {
|
||||
transition: opacity .2s !important;
|
||||
}
|
||||
|
||||
|
||||
@ -157,21 +157,16 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
|
||||
.svg-appendix {
|
||||
position: absolute;
|
||||
bottom: -.1875rem;
|
||||
right: -.5625rem;
|
||||
width: .5625rem;
|
||||
height: 1.25rem;
|
||||
// background-image: url('../../../../assets/chat-bubble-white.svg');
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItNTAlIiB5PSItMTQuNyUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjE0MS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuMDYyMTk2MjQ4MiAwIDAgMCAwIDAuMTM4NTc0MTQ0IDAgMCAwIDAgMC4xODUwMzczNjQgMCAwIDAgMC4xNSAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0zIDE3aDZWMGMtLjE5MyAyLjg0LS44NzYgNS43NjctMi4wNSA4Ljc4Mi0uOTA0IDIuMzI1LTIuNDQ2IDQuNDg1LTQuNjI1IDYuNDhBMSAxIDAgMDAzIDE3eiIgaWQ9ImIiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjwvc3ZnPg==);
|
||||
background-position: bottom left;
|
||||
transform: scaleX(-1);
|
||||
|
||||
.theme-dark & {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjIwMCI+PGZlT2Zmc2V0IHJlc3VsdD0ib2ZmT3V0IiBpbj0iU291cmNlQWxwaGEiIGR5PSIxIi8+PGZlQ29sb3JNYXRyaXggcmVzdWx0PSJtYXRyaXhPdXQiIGluPSJvZmZPdXQiIHZhbHVlcz0iMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC42IDAiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJibHVyT3V0IiBpbj0ibWF0cml4T3V0IiBzdGREZXZpYXRpb249IjEiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJibHVyT3V0Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTMgMTdoNlYwYy0uMTkzIDIuODQtLjg3NiA1Ljc2Ny0yLjA1IDguNzgyLS45MDQgMi4zMjUtMi40NDYgNC40ODUtNC42MjUgNi40OEExIDEgMCAwMDMgMTd6IiBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiLz48cGF0aCBkPSJNMyAxN2g2VjBjLS4xOTMgMi44NC0uODc2IDUuNzY3LTIuMDUgOC43ODItLjkwNCAyLjMyNS0yLjQ0NiA0LjQ4NS00LjYyNSA2LjQ4QTEgMSAwIDAwMyAxN3oiIGZpbGw9IiMyMTIxMjEiLz48L2c+PC9zdmc+);
|
||||
|
||||
.corner {
|
||||
fill: var(--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -138,6 +138,8 @@ const MOBILE_KEYBOARD_HIDE_DELAY_MS = 100;
|
||||
const SELECT_MODE_TRANSITION_MS = 200;
|
||||
const CAPTION_MAX_LENGTH = 1024;
|
||||
const SENDING_ANIMATION_DURATION = 350;
|
||||
// eslint-disable-next-line max-len
|
||||
const APPENDIX = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#a)"/><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#FFF" class="corner"/></g></svg>';
|
||||
|
||||
const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
dropAreaState,
|
||||
@ -184,6 +186,8 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
openChat,
|
||||
clearReceipt,
|
||||
}) => {
|
||||
// eslint-disable-next-line no-null/no-null
|
||||
const appendixRef = useRef<HTMLDivElement>(null);
|
||||
const [html, setHtml] = useState<string>('');
|
||||
const lastMessageSendTimeSeconds = useRef<number>();
|
||||
const prevDropAreaState = usePrevious(dropAreaState);
|
||||
@ -208,6 +212,14 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
}
|
||||
}, [chatId, loadScheduledHistory, lastSyncTime, threadId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!appendixRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
appendixRef.current.innerHTML = APPENDIX;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (contentToBeScheduled) {
|
||||
setScheduledMessageArgs(contentToBeScheduled);
|
||||
@ -686,6 +698,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
usersById={usersById}
|
||||
/>
|
||||
<div id="message-compose">
|
||||
<div className="svg-appendix" ref={appendixRef} />
|
||||
<ComposerEmbeddedMessage />
|
||||
{allowedAttachmentOptions.canAttachEmbedLinks && (
|
||||
<WebPagePreview chatId={chatId} messageText={!attachments.length ? html : ''} />
|
||||
|
||||
@ -3,6 +3,7 @@ import React, {
|
||||
FC,
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from '../../../lib/teact/teact';
|
||||
@ -148,6 +149,10 @@ type DispatchProps = Pick<GlobalActions, (
|
||||
|
||||
const NBSP = '\u00A0';
|
||||
const GROUP_MESSAGE_HOVER_ATTRIBUTE = 'data-is-document-group-hover';
|
||||
// eslint-disable-next-line max-len
|
||||
const APPENDIX_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#a)"/><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#EEFFDE" class="corner"/></g></svg>';
|
||||
// eslint-disable-next-line max-len
|
||||
const APPENDIX_NOT_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" fill="#000" filter="url(#a)"/><path d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" fill="#FFF" class="corner"/></g></svg>';
|
||||
|
||||
const Message: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
message,
|
||||
@ -208,6 +213,8 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
// eslint-disable-next-line no-null/no-null
|
||||
const bottomMarkerRef = useRef<HTMLDivElement>(null);
|
||||
// eslint-disable-next-line no-null/no-null
|
||||
const appendixRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useOnIntersect(bottomMarkerRef, observeIntersectionForBottom);
|
||||
|
||||
@ -275,6 +282,13 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
|
||||
useEnsureMessage(chatId, hasReply ? message.replyToMessageId : undefined, replyMessage, message.id);
|
||||
useFocusMessage(ref, chatId, isFocused, focusDirection, noFocusHighlight);
|
||||
useEffect(() => {
|
||||
if (!appendixRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
appendixRef.current.innerHTML = isOwn ? APPENDIX_OWN : APPENDIX_NOT_OWN;
|
||||
}, [isOwn]);
|
||||
|
||||
const handleGroupDocumentMessagesSelect = useCallback((e: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
|
||||
e.stopPropagation();
|
||||
@ -696,6 +710,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
|
||||
// @ts-ignore
|
||||
style={style}
|
||||
>
|
||||
{contentClassName.includes('has-appendix') && (<div className="svg-appendix" ref={appendixRef} />)}
|
||||
{asForwarded && !customShape && (!isInDocumentGroup || isFirstInDocumentGroup) && (
|
||||
<div className="message-title">{lang('ForwardedMessage')}</div>
|
||||
)}
|
||||
|
||||
@ -49,6 +49,8 @@
|
||||
.media:not(.text) &,
|
||||
.Message .custom-shape & {
|
||||
background: rgba(0,0,0, 0.2);
|
||||
--color-accent-own: white;
|
||||
--color-accent: white;
|
||||
color: white !important;
|
||||
opacity: 1;
|
||||
bottom: .25rem;
|
||||
|
||||
@ -116,95 +116,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.has-appendix {
|
||||
.Message.own & {
|
||||
&::before {
|
||||
right: -.5625rem;
|
||||
background-position: bottom right;
|
||||
background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23EEFFDE" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
.theme-dark &:not([data-has-custom-appendix])::before {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciBpZD0iYSIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwNSIgaGVpZ2h0PSIyMDAiPjxmZU9mZnNldCByZXN1bHQ9Im9mZk91dCIgaW49IlNvdXJjZUFscGhhIiBkeD0iLTEiIGR5PSIxIi8+PGZlQ29sb3JNYXRyaXggcmVzdWx0PSJtYXRyaXhPdXQiIGluPSJvZmZPdXQiIHZhbHVlcz0iMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC42IDAiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJibHVyT3V0IiBpbj0ibWF0cml4T3V0IiBzdGREZXZpYXRpb249IjEiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJibHVyT3V0Ii8+PC9maWx0ZXI+PHBhdGggZD0iTTYgMTdIMFYwYy4xOTMgMi44NC44NzYgNS43NjcgMi4wNSA4Ljc4Mi45MDQgMi4zMjUgMi40NDYgNC40ODUgNC42MjUgNi40OEExIDEgMCAwMTYgMTd6IiBpZD0iYiIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI2EpIiB4bGluazpocmVmPSIjYiIvPjx1c2UgZmlsbD0iIzlBNUYzRiIgeGxpbms6aHJlZj0iI2IiLz48L2c+PC9zdmc+);
|
||||
}
|
||||
}
|
||||
|
||||
.Message:not(.own) & {
|
||||
&::before {
|
||||
left: -.5625rem;
|
||||
background-position: bottom left;
|
||||
background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23FFF" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
.theme-dark &:not([data-has-custom-appendix])::before {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjA1IiBoZWlnaHQ9IjIwMCI+PGZlT2Zmc2V0IHJlc3VsdD0ib2ZmT3V0IiBpbj0iU291cmNlQWxwaGEiIGR5PSIxIi8+PGZlQ29sb3JNYXRyaXggcmVzdWx0PSJtYXRyaXhPdXQiIGluPSJvZmZPdXQiIHZhbHVlcz0iMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC4xMyAwIDAgMCAwIDAgMC42IDAiLz48ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJibHVyT3V0IiBpbj0ibWF0cml4T3V0IiBzdGREZXZpYXRpb249IjEiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJibHVyT3V0Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTMgMTdoNlYwYy0uMTkzIDIuODQtLjg3NiA1Ljc2Ny0yLjA1IDguNzgyLS45MDQgMi4zMjUtMi40NDYgNC40ODUtNC42MjUgNi40OEExIDEgMCAwMDMgMTd6IiBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiLz48cGF0aCBkPSJNMyAxN2g2VjBjLS4xOTMgMi44NC0uODc2IDUuNzY3LTIuMDUgOC43ODItLjkwNCAyLjMyNS0yLjQ0NiA0LjQ4NS00LjYyNSA2LjQ4QTEgMSAwIDAwMyAxN3oiIGZpbGw9IiMyMTIxMjEiLz48L2c+PC9zdmc+);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-solid-background) {
|
||||
.Message.is-in-selection-mode.is-album:not(.own) & {
|
||||
&::before {
|
||||
bottom: -.125rem !important;
|
||||
left: -.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.Message.is-in-selection-mode.is-album.own & {
|
||||
&::before {
|
||||
bottom: -.125rem !important;
|
||||
right: -.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -.1875rem;
|
||||
width: .5625rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
&:not(.has-appendix) .svg-appendix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.has-appendix-thumb {
|
||||
.svg-appendix {
|
||||
position: absolute;
|
||||
bottom: -.1875rem;
|
||||
width: .5625rem;
|
||||
height: 1.25rem;
|
||||
|
||||
.corner {
|
||||
fill: var(--background-color);
|
||||
}
|
||||
.Message.own & {
|
||||
&::after {
|
||||
right: -.5625rem;
|
||||
background-position: bottom right;
|
||||
background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23CCCCCC" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
right: -.5625rem;
|
||||
}
|
||||
|
||||
.Message:not(.own) & {
|
||||
&::after {
|
||||
left: -.5625rem;
|
||||
background-position: bottom left;
|
||||
background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23CCCCCC" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -.1875rem;
|
||||
width: .5625rem;
|
||||
height: 1.25rem;
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease;
|
||||
left: -.5625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-has-custom-appendix] {
|
||||
&::before {
|
||||
background-image: var(--appendix-bg) !important;
|
||||
.svg-appendix .corner {
|
||||
fill: var(--appendix-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
&.has-appendix-thumb {
|
||||
.Message & {
|
||||
.svg-appendix {
|
||||
--background-color: #ccc;
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,7 @@
|
||||
// eslint-disable-next-line max-len
|
||||
const SAMPLE_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" id="b"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
|
||||
// eslint-disable-next-line max-len
|
||||
const SAMPLE_NOT_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
|
||||
// eslint-disable-next-line max-len
|
||||
const SAMPLE_OWN_SELECTED = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M6 17.5H0V0c .193 3.84.876 5.767 2.05 9.782.904 2.325 2.446 4.485 4.925 6.95A1 1 0 017 17.5z" id="b" stroke="white" stroke-width="1" stroke-dasharray="36 15" stroke-dashoffset="30"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
|
||||
// eslint-disable-next-line max-len
|
||||
const SAMPLE_NOT_OWN_SELECTED = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M3 17.5h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17.5z" id="b" stroke="white" stroke-width="1" stroke-dasharray="36 15" stroke-dashoffset="30"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="{FILL}" xlink:href="#b"/></g></svg>';
|
||||
|
||||
const SELECTED_APPENDIX_BACKGROUND = 'rgba(255,255,255,1)';
|
||||
|
||||
export default async (src: string, isOwn: boolean, inSelectMode?: boolean, isSelected?: boolean) => {
|
||||
const color = isSelected ? SELECTED_APPENDIX_BACKGROUND : await getAppendixColorFromImage(src, isOwn);
|
||||
let svg;
|
||||
if (inSelectMode) {
|
||||
svg = (isOwn ? SAMPLE_OWN_SELECTED : SAMPLE_NOT_OWN_SELECTED);
|
||||
} else {
|
||||
svg = (isOwn ? SAMPLE_OWN : SAMPLE_NOT_OWN);
|
||||
}
|
||||
svg = svg.replace('{FILL}', color);
|
||||
return `url('data:image/svg+xml,${encodeURIComponent(svg)}')`;
|
||||
return isSelected ? SELECTED_APPENDIX_BACKGROUND : getAppendixColorFromImage(src, isOwn);
|
||||
};
|
||||
|
||||
async function getAppendixColorFromImage(src: string, isOwn: boolean) {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
"--color-borders-input": ["#DADCE0", "#5B5B5A"],
|
||||
"--color-links": ["#52A1EF", "#868DF6"],
|
||||
"--color-gray": ["#C4C9CC", "#808080"],
|
||||
"--color-default-shadow": ["#72727240", "#00000099"],
|
||||
"--color-default-shadow": ["#72727240", "#21212140"],
|
||||
"--color-light-shadow": ["#7272722B", "#00000040"],
|
||||
"--color-green": ["#4DCD5E", "#868DF5"],
|
||||
"--color-text-meta-colored": ["#4DCD5E", "#868DF5"],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user