mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-06-30 09:32:25 +00:00
color scheme
This commit is contained in:
Evgeny @ SimpleX Chat
@@ -129,6 +129,7 @@ struct ChannelWebAccessView: View {
|
||||
data-channel-id="\(pg.publicGroupId)"
|
||||
data-relay-domains="\(relayDomains.joined(separator: ","))"
|
||||
data-app-download-buttons="on"
|
||||
data-color-scheme="light"
|
||||
></div>
|
||||
<script src="https://simplex.chat/js/channel-preview.js"></script>
|
||||
"""
|
||||
|
||||
+1
@@ -180,6 +180,7 @@ private fun embedCode(groupRelays: List<GroupRelay>, groupInfo: GroupInfo): Stri
|
||||
data-channel-id="${pg.publicGroupId}"
|
||||
data-relay-domains="$domains"
|
||||
data-app-download-buttons="on"
|
||||
data-color-scheme="light"
|
||||
></div>
|
||||
<script src="https://simplex.chat/js/channel-preview.js"></script>"""
|
||||
}
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
data-channel-id="YOUR_CHANNEL_ID"
|
||||
data-relay-domains="relay1.example.com"
|
||||
data-app-download-buttons="on"
|
||||
<!-- data-color-scheme="light" -->
|
||||
<!-- data-dark-background="#000832" -->
|
||||
<!-- data-light-background="#ffffff" -->
|
||||
<!-- data-relay-scheme="https" -->
|
||||
></div>
|
||||
<script src="https://simplex.chat/js/channel-preview.js"></script>
|
||||
|
||||
@@ -6,11 +6,28 @@
|
||||
|
||||
const STYLE = `
|
||||
.simplex-preview-container {
|
||||
--sp-bg: var(--sp-light-bg, #fff);
|
||||
--sp-text: #000;
|
||||
--sp-text-secondary: #8b8786;
|
||||
--sp-text-muted: #333;
|
||||
--sp-text-small: #888;
|
||||
--sp-bubble: #f5f5f6;
|
||||
--sp-quote: #ececee;
|
||||
--sp-border: #e5e5e5;
|
||||
--sp-link: #0088ff;
|
||||
--sp-link-hover: #0077e0;
|
||||
--sp-btn: #0053D0;
|
||||
--sp-btn-hover: #0047b3;
|
||||
--sp-color-blue: #0053d0;
|
||||
--sp-color-black: #000;
|
||||
--sp-color-white: #000;
|
||||
--sp-qr-fg: #062D56;
|
||||
--sp-qr-bg: #ffffff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
color: var(--sp-text);
|
||||
background: var(--sp-bg);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
@@ -19,12 +36,34 @@ const STYLE = `
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.simplex-preview-container.simplex-scheme-dark,
|
||||
.dark .simplex-preview-container.simplex-scheme-site {
|
||||
--sp-bg: var(--sp-dark-bg, #000832);
|
||||
--sp-text: #FFFBFA;
|
||||
--sp-text-secondary: #B3AFAE;
|
||||
--sp-text-muted: #B3AFAE;
|
||||
--sp-text-small: #aaa;
|
||||
--sp-bubble: #262627;
|
||||
--sp-quote: #373739;
|
||||
--sp-border: #3A3A3C;
|
||||
--sp-link: #70F0F9;
|
||||
--sp-link-hover: #66D9E2;
|
||||
--sp-btn: #70F0F9;
|
||||
--sp-btn-hover: #66D9E2;
|
||||
--sp-btn-text: #000;
|
||||
--sp-color-blue: #70F0F9;
|
||||
--sp-color-black: #fff;
|
||||
--sp-color-white: #fff;
|
||||
--sp-qr-fg: #FFFBFA;
|
||||
--sp-qr-bg: transparent;
|
||||
}
|
||||
|
||||
.simplex-preview-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: var(--sp-bg);
|
||||
border-bottom: 1px solid var(--sp-border);
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -55,7 +94,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-header-description {
|
||||
font-size: 13px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
margin: 2px 0 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -64,8 +103,8 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-join-btn {
|
||||
flex-shrink: 0;
|
||||
background: #0088ff;
|
||||
color: #fff;
|
||||
background: var(--sp-link);
|
||||
color: var(--sp-btn-text, #fff);
|
||||
border: none;
|
||||
border-radius: 34px;
|
||||
padding: 6px 16px;
|
||||
@@ -78,7 +117,7 @@ const STYLE = `
|
||||
}
|
||||
|
||||
.simplex-preview-join-btn:hover {
|
||||
background: #0077e0;
|
||||
background: var(--sp-link-hover);
|
||||
}
|
||||
|
||||
.simplex-preview-messages {
|
||||
@@ -89,7 +128,7 @@ const STYLE = `
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -99,7 +138,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-msg-name {
|
||||
font-size: 13.5px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
padding: 0 0 2px 0;
|
||||
margin-left: 39px;
|
||||
white-space: nowrap;
|
||||
@@ -137,7 +176,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-bubble {
|
||||
position: relative;
|
||||
background: #f5f5f6;
|
||||
background: var(--sp-bubble);
|
||||
border-radius: 18px;
|
||||
min-width: 80px;
|
||||
overflow: visible;
|
||||
@@ -163,6 +202,7 @@ const STYLE = `
|
||||
left: -9px;
|
||||
width: 9px;
|
||||
height: 16px;
|
||||
color: var(--sp-bubble);
|
||||
}
|
||||
|
||||
.simplex-preview-bubble.media-only {
|
||||
@@ -184,18 +224,18 @@ const STYLE = `
|
||||
}
|
||||
|
||||
.simplex-preview-forwarded-header {
|
||||
background: #ececee;
|
||||
background: var(--sp-quote);
|
||||
padding: 6px 12px 6px 8px;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.simplex-preview-quote {
|
||||
background: #ececee;
|
||||
background: var(--sp-quote);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -208,7 +248,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-quote-sender {
|
||||
font-size: 13.5px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@@ -230,7 +270,7 @@ const STYLE = `
|
||||
.simplex-preview-quote-file-icon {
|
||||
padding: 6px 4px 0 0;
|
||||
flex-shrink: 0;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
}
|
||||
|
||||
.simplex-preview-text {
|
||||
@@ -240,7 +280,7 @@ const STYLE = `
|
||||
}
|
||||
|
||||
.simplex-preview-text a {
|
||||
color: #0088ff;
|
||||
color: var(--sp-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -288,7 +328,7 @@ const STYLE = `
|
||||
.simplex-preview-link-card-description {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
color: var(--sp-text-muted);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 12;
|
||||
@@ -297,7 +337,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-link-card-uri {
|
||||
font-size: 12px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -308,7 +348,7 @@ const STYLE = `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
}
|
||||
|
||||
.simplex-preview-file-icon {
|
||||
@@ -319,12 +359,12 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-file-name {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
color: var(--sp-text);
|
||||
}
|
||||
|
||||
.simplex-preview-file-size {
|
||||
font-size: 12px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
}
|
||||
|
||||
.simplex-preview-voice {
|
||||
@@ -332,14 +372,14 @@ const STYLE = `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.simplex-preview-meta {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
padding: 0 2px 0 12px;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
@@ -367,18 +407,18 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-reaction-count {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.simplex-preview-empty {
|
||||
text-align: center;
|
||||
padding: 48px 16px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
}
|
||||
|
||||
.simplex-preview-text .secret {
|
||||
background: #8b8786;
|
||||
background: var(--sp-text-secondary);
|
||||
color: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
@@ -393,17 +433,17 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-text .small-text {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
color: var(--sp-text-small);
|
||||
}
|
||||
|
||||
.simplex-preview-text .red { color: #DD0000; }
|
||||
.simplex-preview-text .green { color: #20BD3D; }
|
||||
.simplex-preview-text .blue { color: #0053d0; }
|
||||
.simplex-preview-text .blue { color: var(--sp-color-blue); }
|
||||
.simplex-preview-text .yellow { color: #DEBD00; }
|
||||
.simplex-preview-text .cyan { color: #0AC4D1; }
|
||||
.simplex-preview-text .magenta { color: magenta; }
|
||||
.simplex-preview-text .black { color: #000; }
|
||||
.simplex-preview-text .white { color: #000; }
|
||||
.simplex-preview-text .black { color: var(--sp-color-black); }
|
||||
.simplex-preview-text .white { color: var(--sp-color-white); }
|
||||
|
||||
.simplex-preview-main {
|
||||
flex: 1;
|
||||
@@ -415,7 +455,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-info {
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
background: var(--sp-bg);
|
||||
}
|
||||
|
||||
.simplex-preview-info-close {
|
||||
@@ -440,7 +480,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-info-descr {
|
||||
font-size: 14px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
text-align: center;
|
||||
margin: 8px 0;
|
||||
word-wrap: break-word;
|
||||
@@ -449,7 +489,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-info-subscribers {
|
||||
font-size: 14px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
text-align: center;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
@@ -463,7 +503,7 @@ const STYLE = `
|
||||
}
|
||||
|
||||
.simplex-preview-info-section a {
|
||||
color: #0088ff;
|
||||
color: var(--sp-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -472,7 +512,7 @@ const STYLE = `
|
||||
}
|
||||
|
||||
.simplex-preview-info-section .secret {
|
||||
background: #8b8786;
|
||||
background: var(--sp-text-secondary);
|
||||
color: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
@@ -487,7 +527,7 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-read-more {
|
||||
font-size: 13px;
|
||||
color: #0088ff;
|
||||
color: var(--sp-link);
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
user-select: none;
|
||||
@@ -510,7 +550,7 @@ const STYLE = `
|
||||
.simplex-preview-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #e5e5e5;
|
||||
background: var(--sp-border);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@@ -519,12 +559,11 @@ const STYLE = `
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin: 0 0 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.simplex-preview-qr-toggle {
|
||||
font-size: 14px;
|
||||
color: #0088ff;
|
||||
color: var(--sp-link);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -545,7 +584,6 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-qr-caption {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -571,12 +609,11 @@ const STYLE = `
|
||||
|
||||
.simplex-preview-copy-action {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.simplex-preview-copy-action a {
|
||||
color: #0088ff;
|
||||
color: var(--sp-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -589,14 +626,13 @@ const STYLE = `
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 0 0 -8px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.simplex-preview-open-btn {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background: #0053D0;
|
||||
color: #fff;
|
||||
background: var(--sp-btn);
|
||||
color: var(--sp-btn-text, #fff);
|
||||
border: none;
|
||||
border-radius: 34px;
|
||||
padding: 12px 32px;
|
||||
@@ -611,14 +647,14 @@ const STYLE = `
|
||||
}
|
||||
|
||||
.simplex-preview-open-btn:hover {
|
||||
background: #0047b3;
|
||||
background: var(--sp-btn-hover);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.simplex-preview-info {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid #e5e5e5;
|
||||
border-left: 1px solid var(--sp-border);
|
||||
padding: 24px;
|
||||
}
|
||||
.simplex-preview-header .simplex-preview-join-btn {
|
||||
@@ -651,7 +687,7 @@ const STYLE = `
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #8b8786;
|
||||
color: var(--sp-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
line-height: 1;
|
||||
@@ -667,10 +703,8 @@ const STYLE = `
|
||||
|
||||
const DEFAULT_AVATAR = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.8 25.46"><circle cx="12.9" cy="12.73" r="12.72" fill="#eee"/><path d="M25.44 12.73c0 7.01-5.71 12.73-12.73 12.73C5.71 25.46 0 19.75 0 12.73 0 5.73 5.71.02 12.71.02c7.01 0 12.73 5.71 12.73 12.72zM4.22 17.11c0 .58.31.87 1.05.87h4.88c-.14-.26-.19-.55-.19-.82 0-1.03.59-2.19 1.63-3.1-.79-.5-1.75-.79-2.74-.79-2.37 0-4.63 1.68-4.63 3.84zm6.6.05c0 .56.36.82 1.27.82h8.1c.93 0 1.26-.26 1.26-.82 0-1.62-2.02-3.87-5.28-3.87-3.29 0-5.34 2.25-5.34 3.87zM6.66 9.87c0 1.37 1.01 2.42 2.19 2.42 1.2 0 2.2-1.05 2.2-2.43 0-1.33-1.02-2.36-2.2-2.36-1.16 0-2.19 1.05-2.19 2.37zm6.98-.5c0 1.56 1.13 2.78 2.52 2.78 1.36 0 2.5-1.22 2.5-2.79 0-1.53-1.15-2.71-2.5-2.71-1.38 0-2.52 1.21-2.52 2.73z" fill="#ccc" fill-opacity=".85"/></svg>');
|
||||
|
||||
const TAIL_SVG_COLOR = '#f5f5f6';
|
||||
|
||||
function tailSvg(color) {
|
||||
return `<svg width="9" height="16" viewBox="0 0 9 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 0 L9 16 L0 16 Q9 11 9 0 Z" fill="${color}"/></svg>`;
|
||||
function tailSvg() {
|
||||
return '<svg width="9" height="16" viewBox="0 0 9 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 0 L9 16 L0 16 Q9 11 9 0 Z" fill="currentColor"/></svg>';
|
||||
}
|
||||
|
||||
const FILE_ICON_SVG = `<svg class="simplex-preview-file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>`;
|
||||
@@ -687,6 +721,7 @@ function initChannelPreview(container) {
|
||||
const channelId = container.dataset.channelId || '';
|
||||
const channelLink = container.dataset.channelLink || '';
|
||||
const showAppBadges = container.dataset.appDownloadButtons !== 'off';
|
||||
const colorScheme = container.dataset.colorScheme || 'light';
|
||||
|
||||
if (!relayDomains.length || !channelId) {
|
||||
container.innerHTML = '<p class="simplex-preview-empty">Missing configuration: data-relay-domains and data-channel-id required.</p>';
|
||||
@@ -694,7 +729,13 @@ function initChannelPreview(container) {
|
||||
}
|
||||
|
||||
injectStyles();
|
||||
container.classList.add('simplex-preview-container');
|
||||
container.classList.add('simplex-preview-container', 'simplex-scheme-' + colorScheme);
|
||||
if (container.dataset.lightBackground) {
|
||||
container.style.setProperty('--sp-light-bg', container.dataset.lightBackground);
|
||||
}
|
||||
if (container.dataset.darkBackground) {
|
||||
container.style.setProperty('--sp-dark-bg', container.dataset.darkBackground);
|
||||
}
|
||||
container.innerHTML = '<p class="simplex-preview-empty">Loading channel...</p>';
|
||||
|
||||
fetchPreview(relayScheme, relayDomains, channelLink, channelId).then(data => {
|
||||
@@ -952,9 +993,13 @@ function renderDesktopConversion(container, channelLink, showAppBadges) {
|
||||
if (!canvas._rendered) {
|
||||
canvas._rendered = true;
|
||||
try {
|
||||
var cs = getComputedStyle(container);
|
||||
QRCode.toCanvas(canvas, channelLink, {
|
||||
errorCorrectionLevel: 'M',
|
||||
color: { dark: '#062D56' },
|
||||
color: {
|
||||
dark: cs.getPropertyValue('--sp-qr-fg').trim() || '#062D56',
|
||||
light: cs.getPropertyValue('--sp-qr-bg').trim() || '#ffffff'
|
||||
},
|
||||
width: 400,
|
||||
margin: 1
|
||||
}).then(function() {
|
||||
@@ -1136,7 +1181,7 @@ function renderBubble(msg, member, showTail) {
|
||||
if (hasTail) {
|
||||
const tail = document.createElement('div');
|
||||
tail.className = 'simplex-preview-bubble-tail';
|
||||
tail.innerHTML = tailSvg(TAIL_SVG_COLOR);
|
||||
tail.innerHTML = tailSvg();
|
||||
bubble.appendChild(tail);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user