/* Theme Variables */ [color-scheme=dark] { /* Default Variables */ /* Hover Variables */ /* Pressed Variables */ --d-primary: var(--accent-red-5); --h-primary: var(--accent-red-3); --p-primary: var(--accent-red-7); --d-on-primary: var(--primary-9); --h-on-primary: var(--primary-9); --p-on-primary: var(--primary-9); --d-primary-container: var(--accent-red-7); --h-primary-container: var(--accent-red-7); --p-primary-container: var(--accent-red-7); --d-on-primary-container: var(--accent-red-1); --h-on-primary-container: var(--accent-red-1); --p-on-primary-container: var(--accent-red-1); --d-secondary: var(--accent-brown-1); --h-secondary: var(--accent-brown-3); --p-secondary: var(--accent-brown-5); --d-on-secondary: var(--neutral-1); --h-on-secondary: var(--neutral-1); --p-on-secondary: var(--neutral-3); --d-secondary-container: var(--accent-brown-7); --h-secondary-container: var(--accent-brown-7); --p-secondary-container: var(--accent-brown-7); --d-on-secondary-container: var(--accent-brown-1); --h-on-secondary-container: var(--accent-brown-1); --p-on-secondary-container: var(--accent-brown-1); --d-error: var(--error-5); --h-error: var(--error-3); --p-error: var(--error-7); --d-on-error: var(--neutral-1); --h-on-error: var(--neutral-1); --p-on-error: var(--neutral-3); --d-error-container: var(--error-7); --h-error-container: var(--error-7); --p-error-container: var(--error-7); --d-on-error-container: var(--error-3); --h-on-error-container: var(--error-3); --p-on-error-container: var(--error-3); --d-surface: var(--primary-6); --h-surface: var(--primary-4); --p-surface: var(--primary-8); --d-on-surface: var(--neutral-1); --h-on-surface: var(--neutral-3); --p-on-surface: var(--neutral-5); --d-surface-variant: var(--primary-8); --h-surface-variant: var(--primary-6); --p-surface-variant: var(--primary-9); --d-on-surface-variant: var(--neutral-1); --h-on-surface-variant: var(--neutral-5); --p-on-surface-variant: var(--neutral-5); --d-surface-container-highest: var(--primary-0); --h-surface-container-highest: var(--primary-0); --p-surface-container-highest: var(--primary-0); --d-surface-container-high: var(--primary-2); --h-surface-container-high: var(--primary-2); --p-surface-container-high: var(--primary-2); --d-surface-container: var(--primary-4); --h-surface-container: var(--primary-4); --p-surface-container: var(--primary-4); --d-surface-container-low: var(--primary-6); --h-surface-container-low: var(--primary-6); --p-surface-container-low: var(--primary-6); --d-surface-container-lowest: var(--primary-9); --h-surface-container-lowest: var(--primary-8); --p-surface-container-lowest: var(--primary-8); --d-outline: var(--primary-1); --h-outline: var(--primary-2); --p-outline: var(--primary-0); --d-outline-variant: var(--accent-red-5); --h-outline-variant: var(--accent-red-3); --p-outline-variant: var(--accent-red-7); } [color-scheme=light] { /* Default Variables */ /* Hover Variables */ /* Pressed Variables */ --d-primary: var(--accent-red-5); --h-primary: var(--accent-red-3); --p-primary: var(--accent-red-7); --d-on-primary: var(--neutral-1); --h-on-primary: var(--neutral-1); --p-on-primary: var(--neutral-3); --d-primary-container: var(--accent-red-1); --h-primary-container: var(--accent-red-1); --p-primary-container: var(--accent-red-1); --d-on-primary-container: var(--accent-red-7); --h-on-primary-container: var(--accent-red-7); --p-on-primary-container: var(--accent-red-7); --d-secondary: var(--accent-brown-5); --h-secondary: var(--accent-brown-3); --p-secondary: var(--accent-brown-7); --d-on-secondary: var(--neutral-1); --h-on-secondary: var(--neutral-1); --p-on-secondary: var(--neutral-3); --d-secondary-container: var(--accent-brown-1); --h-secondary-container: var(--accent-brown-1); --p-secondary-container: var(--accent-brown-1); --d-on-secondary-container: var(--accent-brown-7); --h-on-secondary-container: var(--accent-brown-7); --p-on-secondary-container: var(--accent-brown-7); --d-error: var(--error-5); --h-error: var(--error-3); --p-error: var(--error-7); --d-on-error: var(--neutral-1); --h-on-error: var(--neutral-1); --p-on-error: var(--neutral-3); --d-error-container: var(--error-3); --h-error-container: var(--error-3); --p-error-container: var(--error-3); --d-on-error-container: var(--error-7); --h-on-error-container: var(--error-7); --p-on-error-container: var(--error-7); --d-surface: var(--neutral-1); --h-surface: var(--neutral-1); --p-surface: var(--neutral-1); --d-surface-75: #F5F5F5BF; --h-surface-75: #F5F5F5BF; --p-surface-75: #F5F5F5BF; --d-on-surface: var(--primary-9); --h-on-surface: var(--primary-7); --p-on-surface: var(--primary-5); --d-surface-variant: var(--neutral-3); --h-surface-variant: var(--neutral-3); --p-surface-variant: var(--neutral-5); --d-on-surface-variant: var(--primary-9); --h-on-surface-variant: var(--primary-7); --p-on-surface-variant: var(--primary-5); --d-surface-container-highest: var(--neutral-9); --h-surface-container-highest: var(--neutral-9); --p-surface-container-highest: var(--neutral-9); --d-surface-container-high: var(--neutral-7); --h-surface-container-high: var(--neutral-7); --p-surface-container-high: var(--neutral-7); --d-surface-container: var(--neutral-5); --h-surface-container: var(--neutral-5); --p-surface-container: var(--neutral-5); --d-surface-container-low: var(--neutral-3); --h-surface-container-low: var(--neutral-3); --p-surface-container-low: var(--neutral-3); --d-surface-container-lowest: var(--neutral-1); --h-surface-container-lowest: var(--neutral-1); --p-surface-container-lowest: var(--neutral-1); --d-outline: var(--primary-8); --h-outline: var(--primary-7); --p-outline: var(--primary-9); --d-outline-variant: var(--accent-red-5); --h-outline-variant: var(--accent-red-3); --p-outline-variant: var(--accent-red-7); } /* */ /* Default Theme Classes */ .d-gradient-bg { background: linear-gradient(180deg, rgba(37, 46, 53, 0.2) 0%, rgba(37, 46, 53, 0.75) 100%); background-blend-mode: overlay; } .d-primary-bg { background-color: var(--d-primary); transition: background 0.3s ease; } .d-primary-cl { color: var(--d-primary); transition: color 0.3s ease; } .d-on-primary-bg { background-color: var(--d-on-primary); transition: background 0.3s ease; } .d-on-primary-cl { color: var(--d-on-primary); transition: color 0.3s ease; } .d-primary-container-bg { background-color: var(--d-primary-container); transition: background 0.3s ease; } .d-primary-container-cl { color: var(--d-primary-container); transition: color 0.3s ease; } .d-on-primary-container-bg { color: var(--d-on-primary-container); transition: background 0.3s ease; } .d-on-primary-container-cl { background-color: var(--d-on-primary-container); transition: color 0.3s ease; } .d-secondary-bg { background-color: var(--d-secondary); transition: background 0.3s ease; } .d-secondary-cl { color: var(--d-secondary); transition: color 0.3s ease; } .d-on-secondary-bg { background-color: var(--d-on-secondary); transition: background 0.3s ease; } .d-on-secondary-cl { color: var(--d-on-secondary); transition: color 0.3s ease; } .d-secondary-container-bg { background-color: var(--d-secondary-container); transition: background 0.3s ease; } .d-secondary-container-cl { color: var(--d-secondary-container); transition: color 0.3s ease; } .d-on-secondary-container-bg { background-color: var(--d-on-secondary-container); transition: background 0.3s ease; } .d-on-secondary-container-cl { color: var(--d-on-secondary-container); transition: color 0.3s ease; } .d-error-bg { background-color: var(--d-error); transition: background 0.3s ease; } .d-error-cl { color: var(--d-error); transition: color 0.3s ease; } .d-on-error-bg { background-color: var(--d-on-error); transition: background 0.3s ease; } .d-on-error-cl { color: var(--d-on-error); transition: color 0.3s ease; } .d-error-container-bg { background-color: var(--d-error-container); transition: background 0.3s ease; } .d-error-container-cl { color: var(--d-error-container); transition: color 0.3s ease; } .d-on-error-container-bg { background-color: var(--d-on-error-container); transition: background 0.3s ease; } .d-on-error-container-cl { color: var(--d-on-error-container); transition: color 0.3s ease; } .d-surface-bg { background-color: var(--d-surface); transition: background 0.3s ease; } .d-surface-cl { color: var(--d-surface); transition: color 0.3s ease; } .d-on-surface-bg { background-color: var(--d-on-surface); transition: background 0.3s ease; } .d-on-surface-cl { color: var(--d-on-surface); transition: color 0.3s ease; } .d-surface-variant-bg { background-color: var(--d-surface-variant); transition: background 0.3s ease; } .d-surface-variant-cl { color: var(--d-surface-variant); transition: color 0.3s ease; } .d-on-surface-variant-bg { background-color: var(--d-on-surface-variant); transition: background 0.3s ease; } .d-on-surface-variant-cl { color: var(--d-on-surface-variant); transition: color 0.3s ease; } .d-surface-container-highest-bg { background-color: var(--d-surface-container-highest); transition: background 0.3s ease; } .d-surface-container-highest-cl { color: var(--d-surface-container-highest); transition: color 0.3s ease; } .d-surface-container-high-bg { background-color: var(--d-surface-container-high); transition: background 0.3s ease; } .d-surface-container-high-cl { color: var(--d-surface-container-high); transition: color 0.3s ease; } .d-surface-container-bg { background-color: var(--d-surface-container); transition: background 0.3s ease; } .d-surface-container-cl { color: var(--d-surface-container); transition: color 0.3s ease; } .d-surface-container-low-bg { background-color: var(--d-surface-container-low); transition: background 0.3s ease; } .d-surface-container-low-cl { color: var(--d-surface-container-low); transition: color 0.3s ease; } .d-surface-container-lowest-bg { background-color: var(--d-surface-container-lowest); transition: background 0.3s ease; } .d-surface-container-lowest-cl { color: var(--d-surface-container-lowest); transition: color 0.3s ease; } .d-outline-bc { border-color: var(--d-outline); transition: border-color 0.3s ease; } .d-outline-variant-bc { border-color: var(--d-outline-variant); transition: border-color 0.3s ease; } /* */ /* Hover Theme Classes */ .h-primary-bg { background-color: var(--h-primary); transition: background 0.3s ease; } .h-primary-cl { color: var(--h-primary); transition: color 0.3s ease; } .h-on-primary-bg { background-color: var(--h-on-primary); transition: background 0.3s ease; } .h-on-primary-cl { color: var(--h-on-primary); transition: color 0.3s ease; } .h-primary-container-bg { background-color: var(--h-primary-container); transition: background 0.3s ease; } .h-primary-container-cl { color: var(--h-primary-container); transition: color 0.3s ease; } .h-on-primary-container-bg { color: var(--h-on-primary-container); transition: background 0.3s ease; } .h-on-primary-container-cl { background-color: var(--h-on-primary-container); transition: color 0.3s ease; } .h-secondary-bg { background-color: var(--h-secondary); transition: background 0.3s ease; } .h-secondary-cl { color: var(--h-secondary); transition: color 0.3s ease; } .h-on-secondary-bg { background-color: var(--h-on-secondary); transition: background 0.3s ease; } .h-on-secondary-cl { color: var(--h-on-secondary); transition: color 0.3s ease; } .h-secondary-container-bg { background-color: var(--h-secondary-container); transition: background 0.3s ease; } .h-secondary-container-cl { color: var(--h-secondary-container); transition: color 0.3s ease; } .h-on-secondary-container-bg { background-color: var(--h-on-secondary-container); transition: background 0.3s ease; } .h-on-secondary-container-cl { color: var(--h-on-secondary-container); transition: color 0.3s ease; } .h-error-bg { background-color: var(--h-error); transition: background 0.3s ease; } .h-error-cl { color: var(--h-error); transition: color 0.3s ease; } .h-on-error-bg { background-color: var(--h-on-error); transition: background 0.3s ease; } .h-on-error-cl { color: var(--h-on-error); transition: color 0.3s ease; } .h-error-container-bg { background-color: var(--h-error-container); transition: background 0.3s ease; } .h-error-container-cl { color: var(--h-error-container); transition: color 0.3s ease; } .h-on-error-container-bg { background-color: var(--h-on-error-container); transition: background 0.3s ease; } .h-on-error-container-cl { color: var(--h-on-error-container); transition: color 0.3s ease; } .h-surface-bg { background-color: var(--h-surface); transition: background 0.3s ease; } .h-surface-cl { color: var(--h-surface); transition: color 0.3s ease; } .h-on-surface-bg { background-color: var(--h-on-surface); transition: background 0.3s ease; } .h-on-surface-cl { color: var(--h-on-surface); transition: color 0.3s ease; } .h-surface-variant-bg { background-color: var(--h-surface-variant); transition: background 0.3s ease; } .h-surface-variant-cl { color: var(--h-surface-variant); transition: color 0.3s ease; } .h-on-surface-variant-bg { background-color: var(--h-on-surface-variant); transition: background 0.3s ease; } .h-on-surface-variant-cl { color: var(--h-on-surface-variant); transition: color 0.3s ease; } .h-surface-container-highest-bg { background-color: var(--h-surface-container-highest); transition: background 0.3s ease; } .h-surface-container-highest-cl { color: var(--h-surface-container-highest); transition: color 0.3s ease; } .h-surface-container-high-bg { background-color: var(--h-surface-container-high); transition: background 0.3s ease; } .h-surface-container-high-cl { color: var(--h-surface-container-high); transition: color 0.3s ease; } .h-surface-container-bg { background-color: var(--h-surface-container); transition: background 0.3s ease; } .h-surface-container-cl { color: var(--h-surface-container); transition: color 0.3s ease; } .h-surface-container-low-bg { background-color: var(--h-surface-container-low); transition: background 0.3s ease; } .h-surface-container-low-cl { color: var(--h-surface-container-low); transition: color 0.3s ease; } .h-surface-container-lowest-bg { background-color: var(--h-surface-container-lowest); transition: background 0.3s ease; } .h-surface-container-lowest-cl { color: var(--h-surface-container-lowest); transition: color 0.3s ease; } .h-outline-bc { border-color: var(--h-outline); transition: border-color 0.3s ease; } .h-outline-variant-bc { border-color: var(--h-outline-variant); transition: border-color 0.3s ease; } /* */ /* Pressed Theme Classes */ .p-primary-bg { background-color: var(--p-primary); transition: background 0.3s ease; } .p-primary-cl { color: var(--p-primary); transition: color 0.3s ease; } .p-on-primary-bg { background-color: var(--p-on-primary); transition: background 0.3s ease; } .p-on-primary-cl { color: var(--p-on-primary); transition: color 0.3s ease; } .p-primary-container-bg { background-color: var(--p-primary-container); transition: background 0.3s ease; } .p-primary-container-cl { color: var(--p-primary-container); transition: color 0.3s ease; } .p-on-primary-container-bg { color: var(--p-on-primary-container); transition: background 0.3s ease; } .p-on-primary-container-cl { background-color: var(--p-on-primary-container); transition: color 0.3s ease; } .p-secondary-bg { background-color: var(--p-secondary); transition: background 0.3s ease; } .p-secondary-cl { color: var(--p-secondary); transition: color 0.3s ease; } .p-on-secondary-bg { background-color: var(--p-on-secondary); transition: background 0.3s ease; } .p-on-secondary-cl { color: var(--p-on-secondary); transition: color 0.3s ease; } .p-secondary-container-bg { background-color: var(--p-secondary-container); transition: background 0.3s ease; } .p-secondary-container-cl { color: var(--p-secondary-container); transition: color 0.3s ease; } .p-on-secondary-container-bg { background-color: var(--p-on-secondary-container); transition: background 0.3s ease; } .p-on-secondary-container-cl { color: var(--p-on-secondary-container); transition: color 0.3s ease; } .p-error-bg { background-color: var(--p-error); transition: background 0.3s ease; } .p-error-cl { color: var(--p-error); transition: color 0.3s ease; } .p-on-error-bg { background-color: var(--p-on-error); transition: background 0.3s ease; } .p-on-error-cl { color: var(--p-on-error); transition: color 0.3s ease; } .p-error-container-bg { background-color: var(--p-error-container); transition: background 0.3s ease; } .p-error-container-cl { color: var(--p-error-container); transition: color 0.3s ease; } .p-on-error-container-bg { background-color: var(--p-on-error-container); transition: background 0.3s ease; } .p-on-error-container-cl { color: var(--p-on-error-container); transition: color 0.3s ease; } .p-surface-bg { background-color: var(--p-surface); transition: background 0.3s ease; } .p-surface-cl { color: var(--p-surface); transition: color 0.3s ease; } .p-on-surface-bg { background-color: var(--p-on-surface); transition: background 0.3s ease; } .p-on-surface-cl { color: var(--p-on-surface); transition: color 0.3s ease; } .p-surface-variant-bg { background-color: var(--p-surface-variant); transition: background 0.3s ease; } .p-surface-variant-cl { color: var(--p-surface-variant); transition: color 0.3s ease; } .p-on-surface-variant-bg { background-color: var(--p-on-surface-variant); transition: background 0.3s ease; } .p-on-surface-variant-cl { color: var(--p-on-surface-variant); transition: color 0.3s ease; } .p-surface-container-highest-bg { background-color: var(--p-surface-container-highest); transition: background 0.3s ease; } .p-surface-container-highest-cl { color: var(--p-surface-container-highest); transition: color 0.3s ease; } .p-surface-container-high-bg { background-color: var(--p-surface-container-high); transition: background 0.3s ease; } .p-surface-container-high-cl { color: var(--p-surface-container-high); transition: color 0.3s ease; } .p-surface-container-bg { background-color: var(--p-surface-container); transition: background 0.3s ease; } .p-surface-container-cl { color: var(--p-surface-container); transition: color 0.3s ease; } .p-surface-container-low-bg { background-color: var(--p-surface-container-low); transition: background 0.3s ease; } .p-surface-container-low-cl { color: var(--p-surface-container-low); transition: color 0.3s ease; } .p-surface-container-lowest-bg { background-color: var(--p-surface-container-lowest); transition: background 0.3s ease; } .p-surface-container-lowest-cl { color: var(--p-surface-container-lowest); transition: color 0.3s ease; } .p-outline-bc { border-color: var(--p-outline); transition: border-color 0.3s ease; } .p-outline-variant-bc { border-color: var(--p-outline-variant); transition: border-color 0.3s ease; } /* Border Colors */ .d-surface-container-lowest-bd { border: 1px solid var(--d-surface-container-lowest); } .d-surface-container-lowest-bd-top { border-top: 1px solid var(--d-surface-container-lowest); } .d-surface-container-lowest-bd-bottom { border-bottom: 1px solid var(--d-surface-container-lowest); } .d-surface-container-lowest-bd-left { border-left: 1px solid var(--d-surface-container-lowest); } .d-surface-container-lowest-bd-right { border-right: 1px solid var(--d-surface-container-lowest); } .d-surface-bd { border: 1px solid var(--d-surface); } .d-surface-bd-top { border-top: 1px solid var(--d-surface); } .d-surface-bd-bottom { border-bottom: 1px solid var(--d-surface); } .d-surface-bd-left { border-left: 1px solid var(--d-surface); } .d-surface-bd-right { border-right: 1px solid var(--d-surface); } .d-surface-variant-bd { border: 1px solid var(--d-surface-variant); } .d-surface-variant-bd-top { border-top: 1px solid var(--d-surface-variant); } .d-surface-variant-bd-bottom { border-bottom: 1px solid var(--d-surface-variant); } .d-surface-variant-bd-left { border-left: 1px solid var(--d-surface-variant); } .d-surface-variant-bd-right { border-right: 1px solid var(--d-surface-variant); } .d-on-surface-bd { border: 1px solid var(--d-on-surface); } .d-on-surface-bd-top { border-top: 1px solid var(--d-on-surface); } .d-on-surface-bd-bottom { border-bottom: 1px solid var(--d-on-surface); } .d-on-surface-bd-left { border-left: 1px solid var(--d-on-surface); } .d-on-surface-bd-right { border-right: 1px solid var(--d-on-surface); } /* */