diff --git a/src/App.css b/src/App.css index 695da14..81c7304 100644 --- a/src/App.css +++ b/src/App.css @@ -137,7 +137,7 @@ .lp__tagline { margin: 0; - color: #6b7280; + color: #4b505a; font-size: 0.9375rem; text-align: center; line-height: 1.65; @@ -154,7 +154,7 @@ .lp__privacy { margin: 0; font-size: 0.8rem; - color: #9ca3af; + color: #6d727a; text-align: center; } @@ -496,7 +496,7 @@ } .journal-title-input::placeholder { - color: #c4bfb5; + color: #8a8480; } .journal-title-input:focus { border-bottom-color: #22c55e; @@ -519,7 +519,7 @@ } .journal-entry-textarea::placeholder { - color: #c4bfb5; + color: #8a8480; font-style: italic; } @@ -672,12 +672,12 @@ border: none; border-radius: 12px; cursor: pointer; - color: #9ca3af; + color: #6d727a; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .journal-icon-btn:hover { - color: #6b7280; + color: #4b505a; background: rgba(0, 0, 0, 0.05); } @@ -860,7 +860,7 @@ border: none; border-radius: 100px; cursor: pointer; - color: #9ca3af; + color: #6d727a; transition: all 0.18s ease; min-height: 44px; font-family: "Sniglet", system-ui; @@ -905,7 +905,7 @@ } .bottom-nav-btn:hover { - color: #6b7280; + color: #4b505a; } .bottom-nav-btn-active { @@ -952,7 +952,7 @@ .history-subtitle { margin: 0; font-size: 0.875rem; - color: #6b7280; + color: #4b505a; font-family: "Sniglet", system-ui; } @@ -967,7 +967,7 @@ border: 1px solid #e5e7eb; border-radius: 50%; cursor: pointer; - color: #6b7280; + color: #4b505a; transition: all 0.2s ease; } .history-search-btn:hover { @@ -1027,7 +1027,7 @@ border: none; border-radius: 8px; cursor: pointer; - color: #9ca3af; + color: #6d727a; transition: all 0.15s ease; } .calendar-nav-btn:hover { @@ -1044,7 +1044,7 @@ .calendar-weekday { font-size: 0.6875rem; font-weight: 500; - color: #9ca3af; + color: #6d727a; text-align: center; padding: 4px 0; font-family: "Sniglet", system-ui; @@ -1110,7 +1110,7 @@ font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; - color: #9ca3af; + color: #6d727a; text-transform: uppercase; font-family: "Sniglet", system-ui; } @@ -1195,14 +1195,14 @@ font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; - color: #6b7280; + color: #4b505a; text-transform: uppercase; font-family: "Sniglet", system-ui; } .entry-time { font-size: 0.6875rem; - color: #9ca3af; + color: #6d727a; font-family: "Sniglet", system-ui; } @@ -1219,7 +1219,7 @@ margin: 0; font-size: 0.8125rem; line-height: 1.5; - color: #6b7280; + color: #4b505a; font-family: "Sniglet", system-ui; display: -webkit-box; -webkit-line-clamp: 2; @@ -1247,7 +1247,7 @@ .settings-subtitle { margin: 0; font-size: 0.875rem; - color: #6b7280; + color: #4b505a; font-family: "Sniglet", system-ui; } @@ -1445,7 +1445,7 @@ font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; - color: #9ca3af; + color: #6d727a; text-transform: uppercase; font-family: "Sniglet", system-ui; } @@ -1492,7 +1492,7 @@ } .settings-item-icon-gray { background: rgba(107, 114, 128, 0.1); - color: #6b7280; + color: #4b505a; } .settings-item-icon-orange { background: rgba(251, 146, 60, 0.12); @@ -1523,7 +1523,7 @@ .settings-item-subtitle { margin: 0; font-size: 0.75rem; - color: #9ca3af; + color: #6d727a; font-family: "Sniglet", system-ui; } @@ -1678,7 +1678,7 @@ margin-bottom: 1rem; font-size: 0.9375rem; font-weight: 600; - color: #6b7280; + color: #4b505a; background: var(--color-surface); border: none; border-radius: 14px; @@ -1777,14 +1777,14 @@ font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; - color: #6b7280; + color: #4b505a; text-transform: uppercase; font-family: "Sniglet", system-ui; } .entry-modal-time { font-size: 0.6875rem; - color: #9ca3af; + color: #6d727a; font-family: "Sniglet", system-ui; } @@ -1798,7 +1798,7 @@ border: none; border-radius: 50%; background: #f3f4f6; - color: #6b7280; + color: #4b505a; cursor: pointer; transition: background 0.2s, @@ -1837,7 +1837,7 @@ } .entry-modal-empty { - color: #9ca3af; + color: #6d727a; font-style: italic; } @@ -1896,7 +1896,7 @@ } .delete-confirm-body { - color: #6b7280; + color: #4b505a; font-size: 0.9rem; font-family: "Sniglet", system-ui; margin: 0 0 1.5rem; @@ -2136,7 +2136,7 @@ .confirm-modal-desc { font-size: 0.85rem; - color: #6b7280; + color: #4b505a; margin: 0 0 1rem; line-height: 1.5; } @@ -2231,7 +2231,7 @@ .ios-install-subtitle { font-size: 0.85rem; - color: #6b7280; + color: #4b505a; margin: 0 0 1rem; text-align: center; } @@ -2492,7 +2492,7 @@ /* -- Placeholder text -- */ [data-theme="dark"] .journal-title-input::placeholder, [data-theme="dark"] .journal-entry-textarea::placeholder { - color: #4a5a4a; + color: #8a9e8a; } /* -- Muted text -- */ @@ -2506,7 +2506,7 @@ [data-theme="dark"] .settings-section-title, [data-theme="dark"] .recent-entries-title, [data-theme="dark"] .calendar-weekday { - color: #7a8a7a; + color: #a2ada2; } /* -- Green accent text brighter in dark -- */ @@ -2518,7 +2518,7 @@ /* -- Calendar -- */ [data-theme="dark"] .calendar-day { - color: #b0b8b0; + color: #c8cdc8; } [data-theme="dark"] .calendar-day:not(.calendar-day-empty):hover { @@ -2638,7 +2638,7 @@ [data-theme="dark"] .settings-item-icon-gray { background: rgba(156, 163, 175, 0.1); - color: #9ca3af; + color: #babfc7; } [data-theme="dark"] .settings-item-icon-orange { @@ -2691,7 +2691,7 @@ [data-theme="dark"] .settings-signout-btn { background: var(--color-surface); - color: #9ca3af; + color: #babfc7; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } @@ -2757,7 +2757,7 @@ [data-theme="dark"] .history-search-btn { background: var(--color-surface); border-color: #2a2a2a; - color: #7a8a7a; + color: #a2ada2; } [data-theme="dark"] .history-search-btn:hover { @@ -2798,11 +2798,11 @@ } [data-theme="dark"] .entry-modal-content { - color: #b0b8b0; + color: #c8cdc8; } [data-theme="dark"] .entry-modal-date { - color: #7a8a7a; + color: #a2ada2; } [data-theme="dark"] .entry-modal-time { @@ -2811,7 +2811,7 @@ [data-theme="dark"] .entry-modal-close { background: #252525; - color: #7a8a7a; + color: #a2ada2; } [data-theme="dark"] .entry-modal-close:hover { @@ -2877,11 +2877,11 @@ color: #e8f5e8; } [data-theme="dark"] .delete-confirm-body { - color: #7a8a7a; + color: #a2ada2; } [data-theme="dark"] .delete-confirm-cancel { background: #252525; - color: #b0b8b0; + color: #c8cdc8; } [data-theme="dark"] .delete-confirm-cancel:hover:not(:disabled) { background: #303030; @@ -2906,11 +2906,11 @@ } [data-theme="dark"] .confirm-modal-desc { - color: #7a8a7a; + color: #a2ada2; } [data-theme="dark"] .confirm-modal-label { - color: #b0b8b0; + color: #c8cdc8; } [data-theme="dark"] .confirm-modal-input { @@ -2926,7 +2926,7 @@ [data-theme="dark"] .confirm-modal-cancel { background: #252525; - color: #9ca3af; + color: #babfc7; } [data-theme="dark"] .confirm-modal-cancel:hover:not(:disabled) { @@ -3023,7 +3023,7 @@ font-size: 0.7rem; font-weight: 700; font-family: inherit; - color: var(--color-text-muted, #6b7280); + color: var(--color-text-muted, #4b505a); padding: 0.25rem 0.5rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; @@ -3081,7 +3081,7 @@ } .clock-picker__tick { - stroke: var(--color-text-muted, #9ca3af); + stroke: var(--color-text-muted, #6d727a); stroke-width: 1.5; opacity: 0.4; } @@ -3098,7 +3098,7 @@ font-size: 0.7rem; font-weight: 600; font-family: inherit; - color: var(--color-text-muted, #6b7280); + color: var(--color-text-muted, #4b505a); padding: 0.25rem 0.75rem; cursor: pointer; transition: all 0.15s; @@ -3127,7 +3127,7 @@ [data-theme="dark"] .clock-picker__ampm-btn { background: #2a2a2a; - color: #9ca3af; + color: #babfc7; } [data-theme="dark"] .clock-picker__ampm-btn--active { @@ -3170,7 +3170,7 @@ [data-theme="dark"] .clock-picker__mode-btn { border-color: #333; - color: #9ca3af; + color: #babfc7; } /* ============================ @@ -3251,7 +3251,7 @@ [data-theme="liquid-glass"] .journal-title-input::placeholder, [data-theme="liquid-glass"] .journal-entry-textarea::placeholder { - color: rgba(30, 41, 59, 0.45); + color: rgba(30, 41, 59, 0.65); } [data-theme="liquid-glass"] .journal-title-input { @@ -3339,7 +3339,7 @@ color: #334155; } [data-theme="liquid-glass"] .settings-enc { - color: rgba(15, 23, 42, 0.45); + color: rgba(15, 23, 42, 0.65); } [data-theme="liquid-glass"] .settings-edit-btn { background: rgba(34, 197, 94, 0.2); @@ -3546,7 +3546,7 @@ font-family: "Sniglet", system-ui; font-size: 0.9rem; line-height: 1.6; - color: var(--color-text-muted, #6b7280); + color: var(--color-text-muted, #4b505a); margin: 0 0 1.75rem; } @@ -3578,7 +3578,7 @@ .welcome-modal-skip { font-family: "Sniglet", system-ui; font-size: 0.8125rem; - color: var(--color-text-muted, #6b7280); + color: var(--color-text-muted, #4b505a); background: none; border: none; cursor: pointer; @@ -3611,13 +3611,13 @@ font-family: "Sniglet", system-ui !important; font-size: 0.85rem !important; line-height: 1.55 !important; - color: var(--color-text-muted, #6b7280) !important; + color: var(--color-text-muted, #4b505a) !important; } .gj-tour-popover .driver-popover-progress-text { font-family: "Sniglet", system-ui !important; font-size: 0.75rem !important; - color: var(--color-text-muted, #6b7280) !important; + color: var(--color-text-muted, #4b505a) !important; } .gj-tour-popover .driver-popover-navigation-btns button { @@ -3642,13 +3642,13 @@ } .gj-tour-popover .driver-popover-prev-btn { - color: var(--color-text-muted, #6b7280) !important; + color: var(--color-text-muted, #4b505a) !important; border: 1px solid var(--color-border, #d4e8d4) !important; background: transparent !important; } .gj-tour-popover .driver-popover-close-btn { - color: var(--color-text-muted, #6b7280) !important; + color: var(--color-text-muted, #4b505a) !important; outline: none !important; box-shadow: none !important; border: none !important; @@ -3679,16 +3679,16 @@ } [data-theme="dark"] .gj-tour-popover .driver-popover-description { - color: #7a8a7a !important; + color: #a2ada2 !important; } [data-theme="dark"] .gj-tour-popover .driver-popover-prev-btn { border-color: rgba(74, 222, 128, 0.15) !important; - color: #7a8a7a !important; + color: #a2ada2 !important; } [data-theme="dark"] .gj-tour-popover .driver-popover-close-btn { - color: #7a8a7a !important; + color: #a2ada2 !important; outline: none !important; box-shadow: none !important; border: none !important; @@ -3773,7 +3773,7 @@ .static-page__updated { font-size: 0.875rem; - color: #6b7280; + color: #4b505a; margin-bottom: 1.75rem !important; } @@ -3804,7 +3804,7 @@ } .static-page__footer span { - color: #9ca3af; + color: #6d727a; } /* ============================ @@ -3870,7 +3870,7 @@ body.gj-has-bg .settings-page { .bg-grid-add { border: 2px dashed var(--color-border, #d4e8d4); background: var(--color-accent-light, #dcfce7); - color: var(--color-text-muted, #6b7280); + color: var(--color-text-muted, #4b505a); } .bg-grid-add:hover:not(:disabled) { @@ -3947,7 +3947,7 @@ body.gj-has-bg .settings-page { border-radius: 10px; border: 1.5px solid var(--color-border, #d4e8d4); background: transparent; - color: var(--color-text-muted, #6b7280); + color: var(--color-text-muted, #4b505a); font-size: 0.85rem; font-weight: 500; cursor: pointer; @@ -4019,7 +4019,7 @@ body.gj-has-bg .settings-page { .cropper-cancel-btn { background: none; border: none; - color: #9ca3af; + color: #6d727a; font-size: 0.9rem; cursor: pointer; padding: 0.3rem 0.5rem; @@ -4127,7 +4127,7 @@ body.gj-has-bg .settings-page { [data-theme="dark"] .bg-grid-add { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); - color: #9ca3af; + color: #babfc7; } [data-theme="dark"] .bg-grid-add:hover:not(:disabled) { @@ -4142,7 +4142,7 @@ body.gj-has-bg .settings-page { [data-theme="dark"] .bg-default-btn { border-color: rgba(255, 255, 255, 0.12); - color: #9ca3af; + color: #babfc7; } [data-theme="dark"] .bg-default-btn:hover:not(:disabled) { diff --git a/src/index.css b/src/index.css index 9a25f2a..6198d6d 100644 --- a/src/index.css +++ b/src/index.css @@ -28,7 +28,7 @@ input, textarea { --color-surface: rgb(255 255 255 / var(--card-bg-opacity)); --color-accent-light: #dcfce7; --color-text: #1a1a1a; - --color-text-muted: #6b7280; + --color-text-muted: #4b505a; --color-border: #d4e8d4; color: var(--color-text); @@ -85,7 +85,7 @@ button:focus-visible { --color-surface: rgb(26 26 26 / var(--card-bg-opacity)); --color-accent-light: rgba(74, 222, 128, 0.12); --color-text: #e8f5e8; - --color-text-muted: #7a8a7a; + --color-text-muted: #a2ada2; --color-border: rgba(74, 222, 128, 0.12); color: var(--color-text);