mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-24 08:46:20 -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

115
client/styles.css
View file

@ -4,7 +4,8 @@
--icon-size: 24px; --icon-size: 24px;
--primary-color: #4285f4; --primary-color: #4285f4;
--peer-width: 120px; --peer-width: 120px;
color-scheme: light dark; /* both supported */ color-scheme: light dark;
/* both supported */
} }
@ -148,14 +149,14 @@ a {
[shadow="1"] { [shadow="1"] {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
0 3px 3px -2px rgba(0, 0, 0, 0.4); 0 3px 3px -2px rgba(0, 0, 0, 0.4);
} }
[shadow="2"] { [shadow="2"] {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4); 0 2px 4px -1px rgba(0, 0, 0, 0.4);
} }
@ -259,7 +260,8 @@ x-peer[transfer] x-icon {
transform: scale(1); transform: scale(1);
} }
.status, .device-name { .status,
.device-name {
height: 18px; height: 18px;
opacity: 0.7; opacity: 0.7;
} }
@ -269,7 +271,7 @@ x-peer[transfer] .status:before {
} }
x-peer:not([transfer]) .status, x-peer:not([transfer]) .status,
x-peer[transfer] .device-name{ x-peer[transfer] .device-name {
display: none; display: none;
} }
@ -281,6 +283,7 @@ x-peer x-icon {
0% { 0% {
transform: scale(0.7); transform: scale(0.7);
} }
40% { 40% {
transform: scale(1.2); transform: scale(1.2);
} }
@ -365,7 +368,7 @@ x-dialog a {
} }
/* Receive Dialog */ /* Receive Dialog */
#receiveDialog .row{ #receiveDialog .row {
margin-top: 24px; margin-top: 24px;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -392,7 +395,7 @@ x-dialog a {
text-decoration: underline; text-decoration: underline;
} }
#receiveTextDialog h3{ #receiveTextDialog h3 {
/* Select the received text when double-clicking the dialog */ /* Select the received text when double-clicking the dialog */
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
@ -535,7 +538,7 @@ textarea {
} }
/* Hack such that initial scale(0) isn't animated */ /* Hack such that initial scale(0) isn't animated */
#about x-background{ #about x-background {
will-change: transform; will-change: transform;
transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
} }
@ -665,6 +668,7 @@ screen and (min-width: 1100px) {
} }
@supports (-webkit-overflow-scrolling: touch) { @supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */ /* CSS specific to iOS devices */
html { html {
position: fixed; position: fixed;
@ -675,71 +679,52 @@ screen and (min-width: 1100px) {
} }
} }
/*
Color Themes
*/
/* Default colors */ /* Default colors */
body { :root {
--text-color: #333; --text-color: #333;
color: #333; --bg-color: #fff;
--input-bg-color: #f1f3f4;
}
--bkg-color: #fafafa; body {
background-color: #fafafa; 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 */ /* Dark theme colors */
body.dark-theme { 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; --text-color: #eee;
color: #eee; --bg-color: #121212;
--bkg-color: #121212; --input-bg-color: #333;
background-color: #121212;
} }
/* Styles for users who prefer dark mode at the OS level */ /* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
/* defaults to dark theme */
body { /* defaults to dark theme */
--text-color: #eee; body {
color: #eee; --text-color: #eee;
--bkg-color: #121212; --bg-color: #121212;
background-color: #121212; --input-bg-color: #333;
} }
x-dialog x-paper {
--bkg-color: #333; /* Override dark mode with light mode styles if the user decides to swap */
background-color: #333; body.light-theme {
} --text-color: #333;
textarea { --bg-color: #fafafa;
--text-color: #eee; --input-bg-color: #f1f3f4;
color: #eee; }
--bkg-color: #121212;
background-color: #121212;
}
/* 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;
}
} }