MirrorMirror
/
PairDrop
mirror of https://github.com/schlagmichdoch/PairDrop.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Always show x-toast in light mode colors if any dialog is shown; Remove redundant color specification

This commit is contained in:
schlagmichdoch 2023-11-29 18:36:38 +01:00
parent ae0cbec86e
commit 2346c97118
2 changed files with 75 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -531,7 +531,7 @@
<!-- Toast -->
<div class="toast-container full center">
<x-toast id="toast" shadow="1">
<span class="center"></span>
<span class="center text-center"></span>
<div class="icon-button" data-i18n-key="dialogs.close-toast" data-i18n-attrs="title">
<svg class="icon">
<use xlink:href="#close-icon"></use>

116
public/styles/styles-main.css
View File

@ -724,8 +724,7 @@ x-toast {
position: absolute;
min-height: 48px;
top: 50px;
width: 100%;
max-width: 344px;
max-width: 400px;
background-color: rgb(var(--text-color));
color: var(--dialog-bg-color);
align-items: center;
@ -750,6 +749,12 @@ x-toast:not([show]) {
x-toast span {
flex-grow: 1;
margin: auto 4px auto 10px
}
x-dialog[show] ~ div x-toast {
background-color: var(--lt-dialog-bg-color);
color: rgb(var(--lt-text-color));
}
/* Instructions */
@ -840,39 +845,66 @@ body {
--accent-color: var(--primary-color);
--ws-peer-color: #ff6b6b;
--btn-disabled-color: #5B5B66;
/* shadows */
--shadow-color-rgb: var(--text-color);
--shadow-color-cover-rgb: var(--bg-color);
/* Light theme colors */
--lt-text-color: 51,51,51;
--lt-dialog-bg-color: #fff;
--lt-bg-color: 255,255,255;
--lt-bg-color-secondary: #f2f2f2;
--lt-border-color: #a9a9a9;
--lt-badge-color: #a5a5a5;
--lt-shadow-color-secondary-rgb: 0,0,0;
--lt-shadow-color-secondary-cover-rgb: 242,242,242;
--lt-shadow-color-dialog-rgb: 0,0,0;
--lt-shadow-color-dialog-cover-rgb: 242,242,242;
/* Dark theme colors */
--dt-text-color: 238,238,238;
--dt-dialog-bg-color: #141414;
--dt-bg-color: 0,0,0;
--dt-bg-color-secondary: #262628;
--dt-border-color: #919191;
--dt-badge-color: #717171;
--dt-shadow-color-secondary-rgb: 255,255,255;
--dt-shadow-color-secondary-cover-rgb: 38,38,38;
--dt-shadow-color-dialog-rgb: 255,255,255;
--dt-shadow-color-dialog-cover-rgb: 38,38,38;
}
/* Light theme colors */
body {
--text-color: 51,51,51;
--dialog-bg-color: #fff;
--bg-color: 255,255,255;
--bg-color-secondary: #f2f2f2;
--border-color: rgb(169, 169, 169);
--badge-color: #a5a5a5;
--text-color: var(--lt-text-color);
--dialog-bg-color: var(--lt-dialog-bg-color);
--bg-color: var(--lt-bg-color);
--bg-color-secondary: var(--lt-bg-color-secondary);
--border-color: var(--lt-border-color);
--badge-color: var(--lt-badge-color);
--shadow-color-secondary-rgb: 0,0,0;
--shadow-color-secondary-cover-rgb: 242,242,242;
--shadow-color-dialog-rgb: 0,0,0;
--shadow-color-dialog-cover-rgb: 242,242,242;
--shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb);
--shadow-color-dialog-rgb: var(--lt-shadow-color-dialog-rgb);
--shadow-color-dialog-cover-rgb: var(--lt-shadow-color-dialog-cover-rgb);
}
/* Dark theme colors */
body.dark-theme {
--text-color: 238,238,238;
--dialog-bg-color: #141414;
--bg-color: 0,0,0;
--bg-color-secondary: #262628;
--border-color: rgb(91, 91, 91);
--badge-color: #717171;
--text-color: var(--dt-text-color);
--dialog-bg-color: var(--dt-dialog-bg-color);
--bg-color: var(--dt-bg-color);
--bg-color-secondary: var(--dt-bg-color-secondary);
--border-color: var(--dt-border-color);
--badge-color: var(--dt-badge-color);
--shadow-color-secondary-rgb: 255,255,255;
--shadow-color-secondary-cover-rgb: 38,38,38;
--shadow-color-dialog-rgb: 255,255,255;
--shadow-color-dialog-cover-rgb: 38,38,38;
--shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb);
--shadow-color-dialog-rgb: var(--dt-shadow-color-dialog-rgb);
--shadow-color-dialog-cover-rgb: var(--dt-shadow-color-dialog-cover-rgb);
}
/* Styles for users who prefer dark mode at the OS level */
@ -880,33 +912,33 @@ body.dark-theme {
/* defaults to dark theme */
body {
--text-color: 238,238,238;
--dialog-bg-color: #141414;
--bg-color-secondary: #262628;
--bg-color: 0,0,0;
--border-color: rgb(91, 91, 91);
--badge-color: #717171;
--text-color: var(--dt-text-color);
--dialog-bg-color: var(--dt-dialog-bg-color);
--bg-color: var(--dt-bg-color);
--bg-color-secondary: var(--dt-bg-color-secondary);
--border-color: var(--dt-border-color);
--badge-color: var(--dt-badge-color);
--shadow-color-secondary-rgb: 255,255,255;
--shadow-color-secondary-cover-rgb: 38,38,38;
--shadow-color-dialog-rgb: 255,255,255;
--shadow-color-dialog-cover-rgb: 38,38,38;
--shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb);
--shadow-color-dialog-rgb: var(--dt-shadow-color-dialog-rgb);
--shadow-color-dialog-cover-rgb: var(--dt-shadow-color-dialog-cover-rgb);
}
/* Override dark mode with light mode styles if the user decides to swap */
body.light-theme {
--text-color: 51,51,51;
--dialog-bg-color: #fff;
--bg-color: 255,255,255;
--bg-color-secondary: #f2f2f2;
--border-color: rgb(169, 169, 169);
--badge-color: #a5a5a5;
--text-color: var(--lt-text-color);
--dialog-bg-color: var(--lt-dialog-bg-color);
--bg-color: var(--lt-bg-color);
--bg-color-secondary: var(--lt-bg-color-secondary);
--border-color: var(--lt-border-color);
--badge-color: var(--lt-badge-color);
--shadow-color-secondary-rgb: 0,0,0;
--shadow-color-secondary-cover-rgb: 255,255,255;
--shadow-color-dialog-rgb: 0,0,0;
--shadow-color-dialog-cover-rgb: 242,242,242;
--shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb);
--shadow-color-dialog-rgb: var(--lt-shadow-color-dialog-rgb);
--shadow-color-dialog-cover-rgb: var(--lt-shadow-color-dialog-cover-rgb);
}
}