Skip to content

Commit 652e110

Browse files
ChrispyBacon-devChrispyBacon-dev
committed
webmail - css for light and darkmode - fixes for mobile
1 parent 0fad7c5 commit 652e110

27 files changed

Lines changed: 1527 additions & 978 deletions

‎webmail/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
1212
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
1313
<link rel="shortcut icon" href="/favicon/favicon.ico">
14+
<link rel="preconnect" href="https://fonts.googleapis.com">
15+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@700;800&display=swap" rel="stylesheet">
1416
</head>
1517
<body>
1618
<div id="app"></div>

‎webmail/src/assets/styles/main.css‎

Lines changed: 102 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -6,55 +6,102 @@
66
.pb-safe {
77
padding-bottom: env(safe-area-inset-bottom, 0px);
88
}
9+
.pt-safe {
10+
padding-top: env(safe-area-inset-top, 0px);
11+
}
912
.h-\[100dvh\] {
1013
height: 100dvh;
1114
}
15+
.df-folder-active {
16+
background: rgba(25, 68, 102, 0.88);
17+
color: white;
18+
box-shadow: 0 2px 10px rgba(25,68,102,0.25);
19+
}
20+
.dark .df-folder-active {
21+
background: rgba(94, 177, 229, 0.85);
22+
color: #061526;
23+
}
1224
}
1325

1426
@layer base {
1527
:root {
16-
--background: 0 0% 100%;
17-
--foreground: 222.2 84% 4.9%;
18-
--card: 0 0% 100%;
19-
--card-foreground: 222.2 84% 4.9%;
20-
--popover: 0 0% 100%;
21-
--popover-foreground: 222.2 84% 4.9%;
22-
--primary: 222.2 47.4% 11.2%;
23-
--primary-foreground: 210 40% 98%;
24-
--secondary: 210 40% 96.1%;
25-
--secondary-foreground: 222.2 47.4% 11.2%;
26-
--muted: 210 40% 96.1%;
27-
--muted-foreground: 215.4 16.3% 46.9%;
28-
--accent: 210 40% 96.1%;
29-
--accent-foreground: 222.2 47.4% 11.2%;
30-
--destructive: 0 84.2% 60.2%;
31-
--destructive-foreground: 210 40% 98%;
32-
--border: 214.3 31.8% 91.4%;
33-
--input: 214.3 31.8% 91.4%;
34-
--ring: 222.2 84% 4.9%;
35-
--radius: 0.5rem;
28+
--background: 214 35% 97%;
29+
--foreground: 214 60% 12%;
30+
--card: 0 0% 100%;
31+
--card-foreground: 214 60% 12%;
32+
--popover: 0 0% 100%;
33+
--popover-foreground: 214 60% 12%;
34+
35+
--primary: 214 60% 23%;
36+
--primary-foreground: 0 0% 100%;
37+
38+
--secondary: 214 25% 93%;
39+
--secondary-foreground: 214 60% 23%;
40+
--muted: 214 20% 93%;
41+
--muted-foreground: 214 18% 46%;
42+
--accent: 214 20% 93%;
43+
--accent-foreground: 214 60% 23%;
44+
45+
--destructive: 0 72% 51%;
46+
--destructive-foreground: 0 0% 100%;
47+
48+
--border: 214 22% 88%;
49+
--input: 214 22% 88%;
50+
--ring: 214 60% 23%;
51+
--radius: 0.5rem;
52+
53+
--df-accent: 38 97% 52%;
54+
--df-accent-hover: 35 97% 48%;
55+
--df-blue: 204 73% 63%;
56+
57+
--df-sidebar-bg: rgba(232, 241, 255, 0.62);
58+
--df-sidebar-blur: blur(24px) saturate(1.6);
59+
--df-list-bg: rgba(245, 249, 255, 0.74);
60+
--df-list-blur: blur(18px) saturate(1.4);
61+
--df-pane-bg: rgba(255, 255, 255, 0.88);
62+
--df-pane-blur: blur(12px);
63+
64+
--df-shadow-xs: 0 1px 4px rgba(0,0,0,0.06);
65+
--df-shadow-sm: 0 2px 10px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
66+
--df-shadow-md: 0 6px 24px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
67+
--df-shadow-lg: 0 20px 52px rgba(0,0,0,0.13), 0 6px 18px rgba(0,0,0,0.07);
68+
--df-shadow-float: 0 4px 18px rgba(0,0,0,0.10), 0 1px 5px rgba(0,0,0,0.06);
3669
}
3770

3871
.dark {
39-
--background: 222.2 84% 4.9%;
40-
--foreground: 210 40% 98%;
41-
--card: 222.2 84% 4.9%;
42-
--card-foreground: 210 40% 98%;
43-
--popover: 222.2 84% 4.9%;
44-
--popover-foreground: 210 40% 98%;
45-
--primary: 210 40% 98%;
46-
--primary-foreground: 222.2 47.4% 11.2%;
47-
--secondary: 217.2 32.6% 17.5%;
48-
--secondary-foreground: 210 40% 98%;
49-
--muted: 217.2 32.6% 17.5%;
50-
--muted-foreground: 215 20.2% 65.1%;
51-
--accent: 217.2 32.6% 17.5%;
52-
--accent-foreground: 210 40% 98%;
53-
--destructive: 0 62.8% 30.6%;
54-
--destructive-foreground: 210 40% 98%;
55-
--border: 217.2 32.6% 17.5%;
56-
--input: 217.2 32.6% 17.5%;
57-
--ring: 212.7 26.8% 83.9%;
72+
--background: 222 38% 7%;
73+
--foreground: 210 40% 95%;
74+
--card: 222 32% 11%;
75+
--card-foreground: 210 40% 95%;
76+
--popover: 222 32% 11%;
77+
--popover-foreground: 210 40% 95%;
78+
79+
--primary: 204 73% 63%;
80+
--primary-foreground: 220 60% 6%;
81+
82+
--secondary: 222 28% 17%;
83+
--secondary-foreground: 210 40% 95%;
84+
--muted: 222 28% 17%;
85+
--muted-foreground: 215 18% 58%;
86+
--accent: 222 28% 17%;
87+
--accent-foreground: 210 40% 95%;
88+
89+
--destructive: 0 55% 42%;
90+
--destructive-foreground: 0 0% 100%;
91+
92+
--border: 222 26% 22%;
93+
--input: 222 26% 22%;
94+
--ring: 204 73% 63%;
95+
96+
--df-sidebar-bg: rgba(6, 14, 32, 0.65);
97+
--df-list-bg: rgba(10, 20, 44, 0.72);
98+
--df-pane-bg: rgba(14, 26, 54, 0.86);
99+
100+
--df-shadow-xs: 0 1px 4px rgba(0,0,0,0.22);
101+
--df-shadow-sm: 0 2px 10px rgba(0,0,0,0.30);
102+
--df-shadow-md: 0 6px 24px rgba(0,0,0,0.38);
103+
--df-shadow-lg: 0 20px 52px rgba(0,0,0,0.52);
104+
--df-shadow-float: 0 4px 18px rgba(0,0,0,0.34);
58105
}
59106
}
60107

@@ -63,7 +110,19 @@
63110
@apply border-border;
64111
}
65112
body {
66-
@apply bg-background text-foreground;
113+
@apply text-foreground;
114+
font-family: 'DM Sans', -apple-system, sans-serif;
115+
background: linear-gradient(148deg,
116+
oklch(0.89 0.028 255) 0%,
117+
oklch(0.94 0.014 215) 42%,
118+
oklch(0.90 0.022 280) 100%);
119+
min-height: 100vh;
120+
}
121+
.dark body {
122+
background: linear-gradient(148deg,
123+
oklch(0.085 0.032 258) 0%,
124+
oklch(0.11 0.026 238) 42%,
125+
oklch(0.078 0.030 274) 100%);
67126
}
68127
}
69128

@@ -85,7 +144,7 @@
85144
.print-hide, .print-hide * {
86145
display: none !important;
87146
}
88-
#print-message-area .flex-1 {
89-
overflow: visible !important;
147+
#print-message-area .flex-1 {
148+
overflow: visible !important;
90149
}
91-
}
150+
}

‎webmail/src/components/mail/ComposeDialog.vue‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -403,9 +403,9 @@ onUnmounted(() => document.removeEventListener('mousedown', onEmojiClickOutside)
403403
<div
404404
v-if="store.isComposeOpen && (effectivePanelMode || !store.isComposeFullView)"
405405
:class="effectivePanelMode
406-
? 'flex flex-col h-full w-full bg-background'
407-
: 'fixed bottom-0 right-6 z-50 flex flex-col rounded-t-xl shadow-2xl border border-border bg-background'"
408-
:style="!effectivePanelMode ? (minimized ? 'width:320px' : 'width:620px') : ''"
406+
? 'flex flex-col h-full w-full'
407+
: 'df-compose-popup fixed bottom-4 right-6 z-50 flex flex-col'"
408+
:style="!effectivePanelMode ? (minimized ? 'width:320px' : 'width:620px') : 'background: var(--df-pane-bg);'"
409409
>
410410
<!-- Panel mode title bar -->
411411
<div v-if="effectivePanelMode" class="h-[52px] flex items-center gap-2 px-4 border-b border-border flex-shrink-0">
@@ -419,15 +419,15 @@ onUnmounted(() => document.removeEventListener('mousedown', onEmojiClickOutside)
419419
</div>
420420

421421
<!-- Popup mode title bar -->
422-
<div v-else-if="!effectivePanelMode" class="flex items-center gap-2 rounded-t-xl bg-primary px-4 py-2.5 cursor-pointer select-none" @click="toggleMinimize">
423-
<span class="flex-1 text-sm font-semibold text-primary-foreground truncate">{{ subject || 'New Message' }}</span>
424-
<button type="button" class="rounded p-0.5 text-primary-foreground/70 hover:text-primary-foreground hover:bg-white/10 transition-colors" title="Full view" @click.stop="toggleFullView">
422+
<div v-else-if="!effectivePanelMode" class="flex items-center gap-2 px-4 py-3 cursor-pointer select-none flex-shrink-0" style="border-bottom: 1px solid rgba(128,128,128,0.1);" @click="toggleMinimize">
423+
<span class="flex-1 text-sm font-semibold text-foreground truncate">{{ subject || 'New Message' }}</span>
424+
<button type="button" class="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors" title="Full view" @click.stop="toggleFullView">
425425
<Maximize2 class="size-4" />
426426
</button>
427-
<button type="button" class="rounded p-0.5 text-primary-foreground/70 hover:text-primary-foreground hover:bg-white/10 transition-colors" title="Minimize" @click.stop="toggleMinimize">
427+
<button type="button" class="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors" title="Minimize" @click.stop="toggleMinimize">
428428
<Minus class="size-4" />
429429
</button>
430-
<button type="button" class="rounded p-0.5 text-primary-foreground/70 hover:text-primary-foreground hover:bg-white/10 transition-colors" title="Close" @click.stop="close">
430+
<button type="button" class="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors" title="Close" @click.stop="close">
431431
<X class="size-4" />
432432
</button>
433433
</div>
@@ -454,7 +454,8 @@ onUnmounted(() => document.removeEventListener('mousedown', onEmojiClickOutside)
454454
<input
455455
v-model="toInput"
456456
placeholder="Add recipient…"
457-
class="flex-1 min-w-[120px] bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none py-0.5"
457+
class="flex-1 min-w-[120px] bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none py-0.5"
458+
style="font-size: 16px;"
458459
@keydown="toHandlers.onKeydown"
459460
@blur="toHandlers.onBlur"
460461
@paste="toHandlers.onPaste"
@@ -513,14 +514,14 @@ onUnmounted(() => document.removeEventListener('mousedown', onEmojiClickOutside)
513514
<!-- From row (aliases) -->
514515
<div v-if="aliases.length" class="flex items-center border-b border-border">
515516
<span class="px-4 py-2 text-sm text-muted-foreground shrink-0">From</span>
516-
<select v-model="fromAddress" class="flex-1 px-2 py-2 text-sm bg-background text-foreground focus:outline-none">
517+
<select v-model="fromAddress" class="flex-1 px-2 py-2 bg-transparent text-foreground focus:outline-none" style="font-size: 16px;">
517518
<option :value="store.currentMailbox">{{ store.currentMailbox }}</option>
518519
<option v-for="alias in aliases" :key="alias" :value="alias">{{ alias }} (alias)</option>
519520
</select>
520521
</div>
521522

522523
<!-- Subject -->
523-
<input v-model="subject" placeholder="Subject" class="w-full px-4 py-2 text-sm bg-background text-foreground placeholder:text-muted-foreground focus:outline-none" />
524+
<input v-model="subject" placeholder="Subject" class="w-full px-4 py-2 bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none" style="font-size: 16px;" />
524525
</div>
525526

526527
<!-- Editor -->
@@ -573,9 +574,9 @@ onUnmounted(() => document.removeEventListener('mousedown', onEmojiClickOutside)
573574
</div>
574575

575576
<!-- Bottom Action Bar -->
576-
<div class="flex items-center justify-between gap-2 border-t border-border px-4 py-2.5 flex-shrink-0 bg-background">
577+
<div class="flex items-center justify-between gap-2 border-t border-border px-4 py-2.5 flex-shrink-0">
577578
<div class="flex items-center gap-1">
578-
<Button as="button" type="button" size="sm" class="rounded-full px-5 font-semibold tracking-wide" @click.prevent="send" :disabled="sending || (!toTags.length && !toInput)">
579+
<Button as="button" type="button" size="sm" class="rounded-full px-5 font-semibold tracking-wide" style="background: #FBA612; color: white; box-shadow: 0 2px 10px rgba(251,166,18,0.32); border: none;" @click.prevent="send" :disabled="sending || (!toTags.length && !toInput)">
579580
{{ sending ? 'Sending…' : 'Send' }}
580581
</Button>
581582
<button type="button" class="ml-1 rounded p-1.5 transition-colors" :class="savedDraft ? 'text-green-500' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'" :disabled="savingDraft" title="Save draft" @click="saveDraft">
@@ -666,6 +667,22 @@ onUnmounted(() => document.removeEventListener('mousedown', onEmojiClickOutside)
666667
cursor: pointer;
667668
}
668669
670+
.df-compose-popup {
671+
background: rgba(252, 254, 255, 0.90);
672+
backdrop-filter: blur(32px) saturate(1.8);
673+
border: 1px solid rgba(255, 255, 255, 0.38);
674+
border-radius: 22px;
675+
box-shadow: 0 20px 52px rgba(0,0,0,0.13), 0 6px 18px rgba(0,0,0,0.07);
676+
}
677+
.dark .df-compose-popup {
678+
background: rgba(12, 24, 52, 0.92);
679+
border-color: rgba(255,255,255,0.10);
680+
}
681+
.dark .df-compose-popup select option {
682+
background: #0f1e3a;
683+
color: #e8edf5;
684+
}
685+
669686
.compose-pop-enter-active { transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease; }
670687
.compose-pop-leave-active { transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.14s ease; }
671688
.compose-pop-enter-from { transform: translateY(24px) scale(0.95); opacity: 0; }

0 commit comments

Comments
 (0)