MNotes

dark_mode
add
Add/Edit Note
Cancel Save
Confirm Delete
Are you sure you want to delete this note?
Cancel Delete
======= .theme-dark { /* Material 3 (You/Expressive) Colors - Dark Theme */ --primary-color: #4CDADA; --on-primary-color: #003737; --primary-container-color: #004F4F; --on-primary-container-color: #6FF7F7; --secondary-color: #B0CCCC; --on-secondary-color: #1B3534; --secondary-container-color: #324B4B; --on-secondary-container-color: #CCE8E7; --tertiary-color: #B4C8E9; --on-tertiary-color: #1C314B; --tertiary-container-color: #334863; --on-tertiary-container-color: #D3E4FF; --error-color: #FFB4AB; --on-error-color: #690005; --error-container-color: #93000A; --on-error-container-color: #FFDAD6; --surface-color: #191C1C; --on-surface-color: #E0E3E2; --surface-variant-color: #3F4948; --on-surface-variant-color: #BEC9C7; --outline-color: #899392; --background-color: #191C1C; --on-background-color: #E0E3E2; --elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.35); --elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.35); --elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.35); --surface-tint-color: #4CDADA; } .theme-sepia { /* Material 3 (You/Expressive) Colors - Sepia Theme */ --primary-color: #8B5000; --on-primary-color: #FFFFFF; --primary-container-color: #FFDDB7; --on-primary-container-color: #2C1700; --secondary-color: #735A41; --on-secondary-color: #FFFFFF; --secondary-container-color: #FFDDBD; --on-secondary-container-color: #291805; --tertiary-color: #5B6237; --on-tertiary-color: #FFFFFF; --tertiary-container-color: #DFE8B2; --on-tertiary-container-color: #181E00; --error-color: #BA1A1A; --on-error-color: #FFFFFF; --error-container-color: #FFDAD6; --on-error-container-color: #410002; --surface-color: #FFFBFF; --on-surface-color: #201B16; --surface-variant-color: #F0E0CF; --on-surface-variant-color: #4E4539; --outline-color: #7F7667; --background-color: #FFF8F3; --on-background-color: #201B16; --elevation-level-1: 0px 1px 3px 1px rgba(139, 80, 0, 0.15); --elevation-level-2: 0px 2px 6px 2px rgba(139, 80, 0, 0.15); --elevation-level-3: 0px 4px 8px 3px rgba(139, 80, 0, 0.15); --surface-tint-color: #8B5000; } body { font-family: 'Google Sans', 'Roboto', sans-serif; margin: 0; padding: 0; background-color: var(--background-color); color: var(--on-background-color); transition: all 0.3s ease; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .header { background-color: var(--primary-color); color: var(--on-primary-color); padding: 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--elevation-level-2); z-index: 10; } .app-title { font-size: 1.5rem; font-weight: 500; margin: 0; font-family: 'Google Sans', sans-serif; } .main-container { display: flex; flex: 1; overflow: hidden; } .sidebar { width: 280px; background-color: var(--surface-color); border-right: 1px solid var(--outline-color); display: flex; flex-direction: column; overflow-y: auto; box-shadow: var(--elevation-level-1); } .sidebar-header { padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--outline-color); background-color: var(--surface-variant-color); color: var(--on-surface-variant-color); } .note-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; } .note-item { padding: 16px; cursor: pointer; border-bottom: 1px solid var(--outline-color); transition: background-color 0.2s, transform 0.1s; border-radius: 12px; margin: 8px; } .note-item:hover { background-color: var(--surface-variant-color); transform: translateY(-2px); } .note-item.active { background-color: var(--primary-container-color); color: var(--on-primary-container-color); box-shadow: var(--elevation-level-1); } .note-item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .note-item-preview { font-size: 0.85rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .editor-container { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; } .toolbar { background-color: var(--surface-color); border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding: 8px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .editor { flex: 1; padding: 16px; overflow-y: auto; outline: none; font-size: 1rem; line-height: 1.6; border: none; background-color: var(--surface-color); color: var(--on-surface-color); resize: none; } .button { background-color: var(--primary-container-color); color: var(--on-primary-container-color); border: none; border-radius: 20px; padding: 10px 16px; font-family: 'Google Sans', sans-serif; font-size: 0.875rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: var(--elevation-level-1); } .button:hover { background-color: var(--primary-container-color); opacity: 0.9; box-shadow: var(--elevation-level-2); } .button-icon { font-size: 1.25rem; } .theme-selector { margin-left: auto; display: flex; align-items: center; gap: 12px; padding: 8px; background-color: var(--surface-variant-color); border-radius: 24px; } .theme-button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s, border-color 0.2s; } .theme-button.active { border-color: var(--primary-color); transform: scale(1.2); } .theme-light { background-color: #FFFBFE; } .theme-dark { background-color: #1C1B1F; } .theme-sepia { background-color: #F5F5DC; } .status-bar { padding: 8px 16px; font-size: 0.75rem; background-color: var(--surface-color); border-top: 1px solid rgba(0, 0, 0, 0.12); display: flex; justify-content: space-between; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: var(--surface-color); padding: 32px; border-radius: 28px; width: 100%; max-width: 400px; box-shadow: var(--elevation-level-3); } .modal-title { font-size: 1.5rem; font-weight: 500; margin-top: 0; margin-bottom: 24px; color: var(--on-surface-color); font-family: 'Google Sans', sans-serif; } .form-field { margin-bottom: 24px; } .input-field { width: 100%; padding: 16px; font-family: 'Google Sans', 'Roboto', sans-serif; font-size: 1rem; border: 2px solid var(--outline-color); border-radius: 16px; background-color: var(--surface-color); color: var(--on-surface-color); transition: border-color 0.2s; } .input-field:focus { border-color: var(--primary-color); outline: none; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .info-message { background-color: var(--container-color); color: var(--on-container-color); padding: 8px 16px; margin: 8px 0; border-radius: 4px; display: none; } @media (max-width: 768px) { .sidebar { position: absolute; left: -250px; height: 100%; transition: left 0.3s ease; z-index: 100; } .sidebar.open { left: 0; } .toggle-sidebar { display: block; } } .hidden { display: none; } .material-symbols-outlined { font-size: 24px; }

MNotes

0 words Not saved yet
>>>>>>> c32bf888e7b226dce8ed1e85ec205b9386d99cf6