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

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

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

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

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