jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opacity change

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-13 15:07:14 +05:30
parent 1353dfc69d
commit 937a98c58d
4 changed files with 200 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/App.css
View File

@@ -94,7 +94,7 @@
display: flex;
flex-direction: column;
gap: 1.75rem;
background: #fff;
background: var(--color-surface);
border-radius: 24px;
border-top: 4px solid #22c55e;
padding: 2rem 1.75rem;
@@ -434,7 +434,7 @@
}
.journal-card {
background: #fff;
background: var(--color-surface);
border-radius: 20px;
padding: 1.625rem 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
@@ -824,7 +824,7 @@
.bottom-nav {
flex-shrink: 0;
position: relative; /* NOT fixed — lives in the flex column */
background: rgba(255, 255, 255, 0.96);
background: var(--color-surface);
border-top: 1px solid rgba(0, 0, 0, 0.07);
padding: 8px 12px 12px;
display: flex;
@@ -947,7 +947,7 @@
display: flex;
align-items: center;
justify-content: center;
background: #fff;
background: var(--color-surface);
border: 1px solid #e5e7eb;
border-radius: 50%;
cursor: pointer;
@@ -974,7 +974,7 @@
/* Calendar */
.calendar-card {
background: #fff;
background: var(--color-surface);
border-radius: 18px;
padding: 1.125rem 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
@@ -1106,7 +1106,7 @@
}
.entry-card {
background: #fff;
background: var(--color-surface);
padding: 1rem 1rem 1rem 0.875rem;
border-radius: 14px;
border-left: 4px solid #22c55e;
@@ -1234,7 +1234,7 @@
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
background: #fff;
background: var(--color-surface);
border-radius: 18px;
padding: 1rem 1.125rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
@@ -1415,7 +1415,7 @@
}
.settings-card {
background: #fff;
background: var(--color-surface);
border-radius: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
overflow: hidden;
@@ -1617,7 +1617,7 @@
font-size: 0.9375rem;
font-weight: 600;
color: #dc2626;
background: #fff;
background: var(--color-surface);
border: none;
border-radius: 14px;
cursor: pointer;
@@ -1637,7 +1637,7 @@
font-size: 0.9375rem;
font-weight: 600;
color: #6b7280;
background: #fff;
background: var(--color-surface);
border: none;
border-radius: 14px;
cursor: pointer;
@@ -1706,7 +1706,7 @@
/* Modal panel – bottom sheet on mobile, centred card on desktop */
.entry-modal {
background: #fff;
background: var(--color-surface);
border-radius: 20px 20px 0 0;
width: 100%;
max-height: 85vh;
@@ -1961,7 +1961,7 @@
}
.confirm-modal {
background: #fff;
background: var(--color-surface);
border-radius: 20px;
padding: 1.75rem;
max-width: 380px;
@@ -2223,7 +2223,7 @@
/* Desktop dark theme adjustments */
@media (min-width: 860px) {
[data-theme="dark"] .bottom-nav {
background: #141414;
background: var(--color-surface);
border-right-color: rgba(74, 222, 128, 0.1);
}
@@ -2301,7 +2301,7 @@
[data-theme="dark"] .settings-card,
[data-theme="dark"] .settings-profile,
[data-theme="dark"] .entry-card {
background: #1a1a1a;
background: var(--color-surface);
border-color: rgba(74, 222, 128, 0.12);
box-shadow:
0 2px 16px rgba(0, 0, 0, 0.4),
@@ -2408,7 +2408,7 @@
/* -- Bottom nav -- */
[data-theme="dark"] .bottom-nav {
background: rgba(20, 20, 20, 0.97);
background: var(--color-surface);
border-top-color: rgba(74, 222, 128, 0.1);
}
@@ -2516,7 +2516,7 @@
/* -- Settings buttons -- */
[data-theme="dark"] .settings-tutorial-btn {
background: #1a1a1a;
background: var(--color-surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@@ -2525,7 +2525,7 @@
}
[data-theme="dark"] .settings-clear-btn {
background: #1a1a1a;
background: var(--color-surface);
color: #f87171;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@@ -2535,7 +2535,7 @@
}
[data-theme="dark"] .settings-signout-btn {
background: #1a1a1a;
background: var(--color-surface);
color: #9ca3af;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@@ -2600,7 +2600,7 @@
/* -- History search button -- */
[data-theme="dark"] .history-search-btn {
background: #1a1a1a;
background: var(--color-surface);
border-color: #2a2a2a;
color: #7a8a7a;
}
@@ -2634,7 +2634,7 @@
/* -- Entry modal -- */
[data-theme="dark"] .entry-modal {
background: #1a1a1a;
background: var(--color-surface);
border-top-color: #4ade80;
box-shadow:
0 -4px 32px rgba(0, 0, 0, 0.5),
@@ -2688,7 +2688,7 @@
}
[data-theme="dark"] .delete-confirm-modal {
background: #1a1a1a;
background: var(--color-surface);
}
[data-theme="dark"] .delete-confirm-title {
color: #e8f5e8;
@@ -2714,7 +2714,7 @@
}
[data-theme="dark"] .confirm-modal {
background: #1a1a1a;
background: var(--color-surface);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
@@ -3120,67 +3120,62 @@ body.gj-has-bg .settings-page {
border-radius: 20px;
padding: 1.5rem;
width: min(440px, calc(100vw - 2rem));
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}
.bg-gallery {
display: flex;
gap: 0.6rem;
overflow-x: auto;
padding: 0.25rem 0 0.75rem;
scrollbar-width: none;
-ms-overflow-style: none;
/* 4-column fixed grid — no scroll */
.bg-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.bg-gallery::-webkit-scrollbar { display: none; }
/* Shared thumb/swatch styles */
.bg-gallery-swatch,
.bg-gallery-thumb,
.bg-gallery-add {
flex-shrink: 0;
width: 84px;
height: 58px;
/* Base tile — aspect-ratio set via inline style to match screen */
.bg-grid-tile {
border-radius: 10px;
border: 2.5px solid transparent;
overflow: visible;
overflow: hidden;
cursor: pointer;
position: relative;
padding: 0;
width: 100%;
transition: border-color 0.15s, transform 0.12s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: none;
}
.bg-gallery-swatch,
.bg-gallery-thumb {
overflow: hidden;
}
.bg-gallery-swatch:hover,
.bg-gallery-thumb:hover,
.bg-gallery-add:hover {
.bg-grid-tile:hover:not(:disabled) {
transform: scale(1.04);
}
.bg-gallery-item--active {
.bg-grid-tile--active {
border-color: var(--color-primary, #22c55e) !important;
}
/* Default color swatch */
.bg-gallery-swatch-fill {
width: 100%;
height: 100%;
background: #eef6ee;
border-radius: 7px;
/* "+" upload tile */
.bg-grid-add {
border: 2px dashed var(--color-border, #d4e8d4);
background: var(--color-accent-light, #dcfce7);
color: var(--color-text-muted, #6b7280);
}
/* Thumbnail image */
.bg-grid-add:hover:not(:disabled) {
border-color: var(--color-primary, #22c55e);
color: var(--color-primary, #22c55e);
}
/* Empty placeholder tile */
.bg-grid-empty {
background: var(--color-accent-light, #dcfce7);
border: 2px dashed var(--color-border, #d4e8d4);
opacity: 0.4;
cursor: default;
}
/* Thumbnail image fills the tile */
.bg-gallery-thumb-img {
width: 100%;
height: 100%;
@@ -3202,37 +3197,67 @@ body.gj-has-bg .settings-page {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* Label below swatch/add button */
.bg-gallery-label {
/* Wrapper holds tile + delete button as siblings */
.bg-grid-wrapper {
position: relative;
}
.bg-grid-wrapper .bg-grid-tile {
width: 100%;
}
/* Delete (×) button — top-right corner of the image */
.bg-tile-delete {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 0.65rem;
color: var(--color-text-muted, #6b7280);
white-space: nowrap;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ef4444;
color: #fff;
border: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* "+" add button */
.bg-gallery-add {
border: 2px dashed var(--color-border, #d4e8d4);
background: var(--color-accent-light, #dcfce7);
color: var(--color-text-muted, #6b7280);
gap: 0.1rem;
/* Revert to default button */
.bg-default-btn {
width: 100%;
padding: 0.6rem 1rem;
border-radius: 10px;
border: 1.5px solid var(--color-border, #d4e8d4);
background: transparent;
color: var(--color-text-muted, #6b7280);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin-bottom: 0.5rem;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bg-gallery-add:hover {
.bg-default-btn:hover:not(:disabled) {
background: var(--color-accent-light, #dcfce7);
border-color: var(--color-primary, #22c55e);
color: var(--color-primary, #22c55e);
color: var(--color-primary-hover, #16a34a);
}
/* Close button */
.bg-close-btn {
width: 100%;
margin-top: 1.5rem;
margin-top: 0.25rem;
padding: 0.7rem;
border-radius: 12px;
border: 1.5px solid var(--color-border, #d4e8d4);
@@ -3388,17 +3413,29 @@ body.gj-has-bg .settings-page {
background: #1a1a1a;
}
[data-theme="dark"] .bg-gallery-swatch-fill {
background: #0f0f0f;
}
[data-theme="dark"] .bg-gallery-add {
[data-theme="dark"] .bg-grid-add {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
color: #9ca3af;
}
[data-theme="dark"] .bg-gallery-add:hover {
[data-theme="dark"] .bg-grid-add:hover:not(:disabled) {
border-color: #4ade80;
color: #4ade80;
}
[data-theme="dark"] .bg-grid-empty {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .bg-default-btn {
border-color: rgba(255, 255, 255, 0.12);
color: #9ca3af;
}
[data-theme="dark"] .bg-default-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.06);
border-color: #4ade80;
color: #4ade80;
}