mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-24 00:36:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleanup color themes

Browse source
This commit is contained in:
RobinLinus 2020-12-21 00:20:38 +01:00
parent fde3d67549
commit 4bdead31ba
1 changed files with 51 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

81
client/styles.css
View file

@ -4,7 +4,8 @@
--icon-size: 24px;
--primary-color: #4285f4;
--peer-width: 120px;
color-scheme: light dark; /* both supported */
color-scheme: light dark;
/* both supported */
}
@ -259,7 +260,8 @@ x-peer[transfer] x-icon {
transform: scale(1);
}
.status, .device-name {
.status,
.device-name {
height: 18px;
opacity: 0.7;
}
@ -281,6 +283,7 @@ x-peer x-icon {
0% {
transform: scale(0.7);
}
40% {
transform: scale(1.2);
}
@ -665,6 +668,7 @@ screen and (min-width: 1100px) {
}
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
html {
position: fixed;
@ -675,71 +679,52 @@ screen and (min-width: 1100px) {
}
}
/*
Color Themes
*/
/* Default colors */
body {
:root {
--text-color: #333;
color: #333;
--bg-color: #fff;
--input-bg-color: #f1f3f4;
}
--bkg-color: #fafafa;
background-color: #fafafa;
body {
color: var(--text-color);
background-color: var(--bg-color);
}
x-dialog x-paper {
background-color: var(--bg-color);
}
textarea {
color: var(--text-color);
background-color: var(--input-bg-color);
}
/* Dark theme colors */
body.dark-theme {
--text-color: #eee;
color: #eee;
--bkg-color: #121212;
background-color: #121212;
}
body.dark-theme x-dialog x-paper {
--bkg-color: #333;
background-color: #333;
}
body.dark-theme textarea {
--text-color: #eee;
color: #eee;
--bkg-color: #121212;
background-color: #121212;
--bg-color: #121212;
--input-bg-color: #333;
}
/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
/* defaults to dark theme */
body {
--text-color: #eee;
color: #eee;
--bkg-color: #121212;
background-color: #121212;
}
x-dialog x-paper {
--bkg-color: #333;
background-color: #333;
}
textarea {
--text-color: #eee;
color: #eee;
--bkg-color: #121212;
background-color: #121212;
--bg-color: #121212;
--input-bg-color: #333;
}
/* Override dark mode with light mode styles if the user decides to swap */
body.light-theme {
--text-color: #333;
color: #333;
--bkg-color: #fafafa;
background-color: #fafafa;
}
body.light-theme x-dialog x-paper {
--bkg-color: #fff;
background-color: #fff;
}
body.light-theme textarea {
--text-color: #333;
color: #333;
--bkg-color: #f1f3f4;
background: #f1f3f4;
--bg-color: #fafafa;
--input-bg-color: #f1f3f4;
}
}