doesnm/JabberCard
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

General : Add dark mode.

Browse source 
CSS     : Add dark mode;
Python  : Custom QR code colors;
SVG     : Add graphics for dark mode;
SVG     : Optimize vector code;
XHTML   : Modify for dark mode.
This commit is contained in:
Schimon Jehudah, Adv. 2024-10-09 16:40:51 +03:00
parent 16338fabb2
commit 19e8910a4e
16 changed files with 205 additions and 502 deletions
Download patch file Download diff file Expand all files Collapse all files

12
xhtml/disco.xhtml
View file

@ -25,7 +25,7 @@
<div id="overlay">
<div id="bar">
<a href="https://xmpp.org">
<img id="logo" src="/img/xmpp-logo-wordmark-horizontal.svg" />
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
</a>
<a id="download" href="https://xmpp.org/software/">
Download
@ -38,7 +38,7 @@
<div id="profile">
<div>
<a id="download-narrow" href="https://xmpp.org/software/">
<img id="logo-narrow" src="/img/xmpp-logo.svg" />
<img id="logo-narrow" src="/img/logo.svg" />
Download
</a>
</div>
@ -124,14 +124,14 @@
</div -->
<!-- div>
<a href="https://xmpp.org">
<img id="logo-bottom" src="/img/xmpp-logo-wordmark-vertical.svg" />
<img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
</a>
</div -->
<!-- div id="note">
The Universal Messaging Standard
</div -->
</div>
</div>
<!-- div id="note">
The Universal Messaging Standard
</div -->
{% if message %}
<div id="message">{{message}}</div>
{% endif %}

39
xhtml/jid.xhtml
View file

@ -22,13 +22,26 @@
<link rel="stylesheet" href="/css/stylesheet.css" media="screen" type="text/css" />
{% if selection %}
<style>
html {
background-repeat: no-repeat;
background: linear-gradient(
to right,
RGB({{selection[0][2]}}, {{selection[0][1]}}, {{selection[0][0]}}),
RGB({{selection[1][2]}}, {{selection[1][1]}}, {{selection[1][0]}})
);
body {
/* background-repeat: no-repeat; */
background:
url(/img/background.svg),
linear-gradient(
to right,
rgba({{selection[0][2]}}, {{selection[0][1]}}, {{selection[0][0]}}, 0.7),
rgba({{selection[1][2]}}, {{selection[1][1]}}, {{selection[1][0]}}, 0.7)
);
}
@media (prefers-color-scheme: dark) {
body {
background:
url(/img/background.svg),
linear-gradient(
to right,
rgba({{selection[0][2]-50}}, {{selection[0][1]-50}}, {{selection[0][0]-50}}, 0.7),
rgba({{selection[1][2]-50}}, {{selection[1][1]-50}}, {{selection[1][0]-50}}, 0.7)
);
}
}
</style>
{% endif %}
@ -37,7 +50,7 @@
<div id="overlay">
<div id="bar">
<a href="https://xmpp.org">
<img id="logo" src="/img/xmpp-logo-wordmark-horizontal.svg" />
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
</a>
<a id="download" href="https://xmpp.org/software/">
Download
@ -47,7 +60,7 @@
<div id="profile">
<div>
<a id="download-narrow" href="https://xmpp.org/software/">
<img id="logo-narrow" src="/img/xmpp-logo.svg" />
<img id="logo-narrow" src="/img/logo.svg" />
Download
</a>
</div>
@ -93,14 +106,14 @@
{% endif %}
<!-- div>
<a href="https://xmpp.org">
<img id="logo-bottom" src="/img/xmpp-logo-wordmark-vertical.svg" />
<img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
</a>
</div -->
<!-- div id="note">
The Universal Messaging Standard
</div -->
</div>
</div>
<!-- div id="note">
The Universal Messaging Standard
</div -->
{% if message %}
<div id="message">{{message}}</div>
{% endif %}

14
xhtml/main.xhtml
View file

@ -12,7 +12,7 @@
<meta name="uri" content="{{xmpp_uri}}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:description" content="FASI : Welcome" />
<meta property="og:image" content="/img/xmpp-logo-wordmark-vertical.svg" />
<meta property="og:image" content="/img/logo-wordmark-vertical.svg" />
<meta property="og:site_name" content="XMPP" />
<meta property="og:title" content="FASI : Welcome" />
<meta property="og:type" content="website" />
@ -25,7 +25,7 @@
<div id="overlay">
<div id="bar">
<a href="https://xmpp.org">
<img id="logo" src="/img/xmpp-logo-wordmark-horizontal.svg" />
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
</a>
<a id="download" href="https://xmpp.org/software/">
Download
@ -35,7 +35,7 @@
<div id="profile">
<div>
<a id="download-narrow" href="https://xmpp.org/software/">
<img id="logo-narrow" src="/img/xmpp-logo.svg" />
<img id="logo-narrow" src="/img/logo.svg" />
Download
</a>
</div>
@ -56,14 +56,14 @@
</div>
<div>
<a href="https://xmpp.org">
<img id="logo-bottom" src="/img/xmpp-logo-wordmark-vertical.svg" />
<img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
</a>
</div>
<div id="note">
The Universal Messaging Standard
</div>
</div>
</div>
<div id="note">
The Universal Messaging Standard
</div>
</div>
</body>
</html>

12
xhtml/node.xhtml
View file

@ -25,7 +25,7 @@
<div id="overlay">
<div id="bar">
<a href="https://xmpp.org">
<img id="logo" src="/img/xmpp-logo-wordmark-horizontal.svg" />
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
</a>
<a id="download" href="https://xmpp.org/software/">
Download
@ -38,7 +38,7 @@
<div id="profile">
<div>
<a id="download-narrow" href="https://xmpp.org/software/">
<img id="logo-narrow" src="/img/xmpp-logo.svg" />
<img id="logo-narrow" src="/img/logo.svg" />
Download
</a>
</div>
@ -93,14 +93,14 @@
</div -->
<!-- div>
<a href="https://xmpp.org">
<img id="logo-bottom" src="/img/xmpp-logo-wordmark-vertical.svg" />
<img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
</a>
</div -->
<!-- div id="note">
The Universal Messaging Standard
</div -->
</div>
</div>
<!-- div id="note">
The Universal Messaging Standard
</div -->
{% if message %}
<div id="message">{{message}}</div>
{% endif %}