Delete style.css

This commit is contained in:
Jakub Růžička 2025-05-20 20:54:45 +02:00 committed by GitHub
parent 95c0ffd6e8
commit c32bf888e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

124
style.css
View file

@ -1,124 +0,0 @@
/* Global variables for theming (from previous version, ensure they are complete) */
:root {
/* Light Theme (Default) */
--app-bg-color: #FEF7FF;
--app-text-color: #1D1B20;
--app-surface-color: #FDFCFB;
--app-primary-color: #6750A4;
--app-on-primary-color: #FFFFFF;
--app-secondary-color: #625B71;
--app-outline-color: #79747E;
--app-note-card-bg: #EADDFF; /* Primary Container */
--app-note-card-text: #21005D; /* On Primary Container */
--app-note-card-header: var(--app-primary-color);
/* 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;
--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;
--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);
/* 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, FABs */
--md-sys-shape-corner-extra-large: 28px; /* Used for dialogs */
--md-sys-shape-corner-full: 9999px; /* For fully rounded "pill" shapes */
}
body.dark-theme {
/* Dark Theme Overrides */
--app-bg-color: #141218;
--app-text-color: #E6E0E9;
--app-surface-color: #1C1B1F;
--app-primary-color: #D0BCFF;
--app-on-primary-color: #381E72;
--app-secondary-color: #CCC2DC;
--app-outline-color: #938F99;
--app-note-card-bg: #36343B; /* Surface Container Highest (Dark) */
--app-note-card-text: #CAC4D0; /* On Surface Variant (Dark) */
--app-note-card-header: var(--app-primary-color);
/* MWC Dark Theme Token Mapping (subset) */
--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);
}
body {
font-family: 'Roboto', sans-serif;
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; }
#themeToggleBtn md-icon { color: var(--md-sys-color-secondary); }
.note-card {
margin-bottom: 16px;
padding: 16px;
border-radius: var(--md-sys-shape-corner-large); /* 16px */
background-color: var(--app-note-card-bg);
color: var(--app-note-card-text);
position: relative;
overflow: hidden;
}
.note-card md-elevation { --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); } /* MWC default can be used */
.note-card-actions md-icon-button:hover { /* MWC handles hover states well */ }
md-fab {
position: fixed;
bottom: 24px;
right: 24px;
/* MWC FABs use --md-fab-container-shape, which defaults to --md-sys-shape-corner-large (16px for a standard FAB) */
/* If you want it perfectly circular and it's a regular (non-extended) FAB: */
/* --md-fab-container-shape: var(--md-sys-shape-corner-full); */
/* However, the default is usually quite rounded already. Primary variant is good. */
}
md-dialog {
/* --md-dialog-container-shape default is --md-sys-shape-corner-extra-large (28px) */
--md-dialog-container-color: var(--md-sys-color-surface-container-high);
--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; }
#notesList > p { text-align: center; color: var(--md-sys-color-outline); padding: 20px 0; font-size: 1.1em; }