diff --git a/index.html b/index.html index 4fc4940..48347e8 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,46 @@ - - - MNotes + + + MNotes + + + + + + + +
+
+ +

MNotes

+
+
+ + + +
+
+ +
+ + +
+
+ + + + +
+ +
+ 0 words + Not saved yet +
+
+
+ + + + + + + + +>>>>>>> c32bf888e7b226dce8ed1e85ec205b9386d99cf6 \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 6bbf4c5..0000000 --- a/style.css +++ /dev/null @@ -1,180 +0,0 @@ -/* Global variables for theming */ -:root { - /* Light Theme (Default) */ - --app-bg-color: #FEF7FF; /* Material 3 Surface */ - --app-text-color: #1D1B20; /* Material 3 On Surface */ - --app-surface-color: #FDFCFB; /* Material 3 Surface Container Low */ - --app-primary-color: #6750A4; /* Material 3 Primary */ - --app-on-primary-color: #FFFFFF; - --app-secondary-color: #625B71; /* Material 3 Secondary */ - --app-outline-color: #79747E; /* Material 3 Outline */ - --app-note-card-bg: #EADDFF; /* Material 3 Primary Container */ - --app-note-card-text: #21005D; /* Material 3 On Primary Container */ - --app-note-card-header: var(--app-primary-color); /* Or #1D192B for On Surface */ - - /* MWC Theme Token Mapping */ - --md-sys-color-background: var(--app-bg-color); - --md-sys-color-on-background: var(--app-text-color); - --md-sys-color-surface: var(--app-surface-color); - --md-sys-color-surface-dim: #DED8E1; /* Example, add more as needed */ - --md-sys-color-surface-bright: #FEF7FF; - --md-sys-color-surface-container-lowest: #FFFFFF; - --md-sys-color-surface-container-low: #F7F2FA; - --md-sys-color-surface-container: #F3EDF7; - --md-sys-color-surface-container-high: #ECE6F0; - --md-sys-color-surface-container-highest: #E6E0E9; /* Was used for note cards */ - --md-sys-color-surface-variant: #E7E0EC; - --md-sys-color-on-surface: var(--app-text-color); - --md-sys-color-on-surface-variant: #49454F; - --md-sys-color-primary: var(--app-primary-color); - --md-sys-color-on-primary: var(--app-on-primary-color); - --md-sys-color-secondary: var(--app-secondary-color); - --md-sys-color-on-secondary: #FFFFFF; - --md-sys-color-tertiary: #7D5260; - --md-sys-color-on-tertiary: #FFFFFF; - --md-sys-color-error: #B3261E; - --md-sys-color-on-error: #FFFFFF; - --md-sys-color-outline: var(--app-outline-color); - --md-sys-color-shadow: #000000; - --md-sys-color-surface-tint-color: var(--app-primary-color); /* Alias for primary */ - - - /* Expressive shape tokens */ - --md-sys-shape-corner-extra-small: 4px; - --md-sys-shape-corner-small: 8px; - --md-sys-shape-corner-medium: 12px; - --md-sys-shape-corner-large: 16px; /* Used for cards */ - --md-sys-shape-corner-extra-large: 28px; /* Used for dialogs */ - --md-sys-shape-corner-full: 9999px; /* For fully rounded elements like FAB */ -} - -body.dark-theme { - /* Dark Theme Overrides */ - --app-bg-color: #141218; - --app-text-color: #E6E0E9; - --app-surface-color: #1C1B1F; /* Material 3 Surface Container Low (Dark) */ - --app-primary-color: #D0BCFF; - --app-on-primary-color: #381E72; - --app-secondary-color: #CCC2DC; - --app-outline-color: #938F99; - --app-note-card-bg: #4A4458; /* Material 3 Primary Container (Dark) - example, adjust to preference */ - --app-note-card-text: #E8DEF8; /* Material 3 On Primary Container (Dark) */ - --app-note-card-header: var(--app-primary-color); - - /* MWC Dark Theme Token Mapping (subset, repeat for all relevant tokens) */ - --md-sys-color-surface-dim: #141218; - --md-sys-color-surface-bright: #3B383E; - --md-sys-color-surface-container-lowest: #0F0D13; - --md-sys-color-surface-container-low: #1D1B20; - --md-sys-color-surface-container: #211F26; - --md-sys-color-surface-container-high: #2B2930; - --md-sys-color-surface-container-highest: #36343B; - --md-sys-color-on-secondary: #332D41; - --md-sys-color-on-tertiary: #492532; - --md-sys-color-on-error: #601410; - --md-sys-color-surface-tint-color: var(--app-primary-color); -} - -/* Apply MWC tokens for body styles */ -body { - font-family: 'Roboto', sans-serif; /* Already set in head style */ - margin: 0; - background-color: var(--md-sys-color-background); - color: var(--md-sys-color-on-background); - transition: background-color 0.3s, color 0.3s; -} - -.container { - max-width: 800px; - margin: 0 auto; - padding: 16px; -} - -header { - display: flex; - align-items: center; - justify-content: space-between; - padding-bottom: 16px; - margin-bottom: 20px; -} -header h1 { - margin: 0; - color: var(--md-sys-color-primary); - font-size: 2em; /* More prominent title */ -} -#themeToggleBtn md-icon { - color: var(--md-sys-color-secondary); /* Themed icon color */ -} - -/* Note Card Styling */ -.note-card { - margin-bottom: 16px; - padding: 16px; - border-radius: var(--md-sys-shape-corner-large); /* Expressive rounding via token */ - background-color: var(--app-note-card-bg); - color: var(--app-note-card-text); - position: relative; - /* box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.1); MWC Elevation handles this */ - overflow: hidden; -} -.note-card md-elevation { /* This applies the standard MWC shadow */ - --md-elevation-level: 1; -} - -.note-card h3 { - margin-top: 0; - margin-bottom: 8px; - color: var(--app-note-card-header); - font-size: 1.25em; - font-weight: 500; -} - -.note-card p { - margin-bottom: 8px; - white-space: pre-wrap; - font-size: 0.95em; - line-height: 1.5; -} - -.note-card-actions { - position: absolute; - top: 8px; - right: 8px; - display: flex; -} -.note-card-actions md-icon-button { - --md-icon-button-icon-color: var(--app-note-card-text); -} -.note-card-actions md-icon-button:hover { - --md-icon-button-icon-color: var(--app-primary-color); -} - -/* FAB Styling (MWC theming should mostly handle this) */ -md-fab { - position: fixed; - bottom: 24px; - right: 24px; - /* --md-fab-container-shape: var(--md-sys-shape-corner-large); /* Example of shape override if not default */ -} - -/* Dialog Styling */ -md-dialog { - /* MWC sets its own width, can be overridden with --md-dialog-container-min-width etc. */ - /* border-radius: var(--md-sys-shape-corner-extra-large); /* MWC default or use --md-dialog-container-shape */ - --md-dialog-container-color: var(--md-sys-color-surface-container-high); /* Themed dialog bg */ - --md-dialog-headline-color: var(--md-sys-color-on-surface-variant); - --md-dialog-supporting-text-color: var(--md-sys-color-on-surface-variant); -} -md-dialog [slot="headline"] { - font-size: 1.5em; - font-weight: 500; - /* color: var(--md-sys-color-primary); /* Already set by --md-dialog-headline-color or inherited */ -} - -/* Placeholder text for empty notes list */ -#notesList > p { - text-align: center; - color: var(--md-sys-color-outline); - padding: 20px 0; - font-size: 1.1em; -}