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

203
css/stylesheet.css
View file

@ -11,9 +11,15 @@ html {
}
body {
background: url(/img/background.svg);
background:
linear-gradient(
to right,
rgba(140, 140, 140, 0.5),
rgba(130, 130, 130, 0.5)
),
url(/img/background.svg);
background-repeat: repeat;
/*height: 100vh;*/
/* height: 100vh; */
/*
background: linear-gradient(-45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(2, 115, 127)
*/
@ -49,6 +55,7 @@ div:has(#bar) {
}
#logo {
content: url(/img/logo-wordmark-horizontal.svg);
height: 3em;
}
@ -58,8 +65,21 @@ div:has(#bar) {
input,
input[type="submit" i],
input:not([type="email" i], [type="number" i], [type="password" i], [type="search" i], [type="tel" i], [type="text" i], [type="url" i]),
input:not([type="file" i], [type="image" i], [type="checkbox" i], [type="radio" i]) {
input:not(
[type="email" i],
[type="number" i],
[type="password" i],
[type="search" i],
[type="tel" i],
[type="text" i],
[type="url" i]
),
input:not(
[type="file" i],
[type="image" i],
[type="checkbox" i],
[type="radio" i]
) {
all: unset;
}
@ -142,6 +162,7 @@ label,
}
#logo-bottom {
content: url(/img/logo-wordmark-vertical.svg);
margin: auto;
margin-top: 4em;
/* padding-bottom: 2.5em; */
@ -160,9 +181,19 @@ h1 {
}
*/
#graphics {
background: #f2f2f2;
border: 1px solid #c0c0c0;
border-radius: 50px;
margin: auto;
max-width: 80%;
padding: 15px;
width: 40em;
}
#photo,
#qrcode {
border: 1px solid #c0c0c0;
/* border: 1px solid #c0c0c0; */
/* width: 40%; */
/* margin-bottom: 2.5em; */
/* NOTE Reason for dimensions 276x276: To be in accord with generated QR Code. */
@ -178,32 +209,7 @@ h1 {
}
#photo {
background: #fff;
border-right: none;
/* border-radius: 100px; 500px */
border-bottom-left-radius: 50px;
border-top-left-radius: 50px;
margin-right: -3px;
object-fit: scale-down;
}
/*
NOTE
Use border to equalize element #phoro with #qrcode.
Perhaps also contain it within a span, in order to fill the background.
border: 1em solid #fff;
height: 240px;
width: 240px;
*/
#qrcode {
border-left: none;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
margin-left: -3px;
/* object-fit: scale-down; */
}
h3, h4, h5 {
@ -267,7 +273,7 @@ h3, h4, h5 {
}
#note {
color: #fff;
display: none;
font-weight: bold;
padding-bottom: 1em;
text-align: center;
@ -276,7 +282,6 @@ h3, h4, h5 {
#message {
background: #000;
color: white;
font-weight: bold;
opacity: 10%;
padding: 1em;
@ -287,10 +292,86 @@ h3, h4, h5 {
right: 0;
}
#message {
color: #fff;
}
#message:hover {
opacity: unset;
}
@media (prefers-color-scheme: dark) {
h1, h2 ,h3, h4, h5,
label[for="jid"],
#count > a,
#jid,
#xmpp-uri {
color: #fbfbfe;
}
#count > a {
color: #a7a7a7; /* a7a7bb */
}
body {
background:
linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(/img/background.svg);
}
#bar {
background: #2b2a33;
}
#logo {
content: url(/img/logo-wordmark-horizontal-dark.svg);
}
#graphics {
background: #232323;
border: 1px solid #434a53; /* #6f7b8c */
}
#qrcode {
filter: invert(0.9);
}
#profile {
background: #2b2a33;
filter: drop-shadow(2px 4px 6px grey); /* TODO Reverse color */
}
#message {
background: #fbfbfe;
}
#message,
#note {
color: #2b2a33;
}
#count > a:hover,
#preview:hover {
color: #fbfbfe;
}
#note {
background: #2b2a33;
color: #f5f5f5;
text-shadow: 1px 1px #fbfbfe;
}
#logo-bottom {
content: url(/img/logo-wordmark-vertical-dark.svg);
}
}
/* NOTE This rule useful, for larger images (800x800), to switch from
background-size: 100vw;
*/
@ -305,6 +386,32 @@ h3, h4, h5 {
}
*/
@media (max-width: 870px) {
h1 {
margin-bottom: 1em;
}
#graphics {
background: unset;
border: unset;
border-radius: unset;
margin: unset;
max-width: unset;
padding: unset;
width: unset;
}
#photo,
#qrcode {
display: block;
border-radius: 50px;
margin: auto;
margin-bottom: 2.5em;
}
}
@media (max-width: 725px) {
body {
@ -342,9 +449,7 @@ h3, h4, h5 {
}
#note {
background: #f5f5f5;
color: #000;
/* display: none; */
display: block;
font-weight: unset;
padding-bottom: 1em;
text-shadow: unset;
@ -352,11 +457,8 @@ h3, h4, h5 {
#photo,
#qrcode {
border: unset;
border-radius: 50px;
/* height: unset; */
height: 360px;
margin-bottom: 2.5em;
max-width: 70%;
min-width: 360px;
/* width: 360px; */
@ -364,21 +466,14 @@ h3, h4, h5 {
#photo {
background: unset;
/*
border-bottom-left-radius: unset;
border-top-left-radius: unset;
*/
margin-right: unset;
/* object-fit: unset; */
}
#qrcode {
/*
border-bottom-right-radius: unset;
border-top-right-radius: unset;
*/
margin-left: unset;
}
}
@media (max-width: 725px) and (prefers-color-scheme: dark) {
body {
background: #2b2a33;
}
}