filoor
6940103255
Een nieuw centraal kleurensysteem is geïntroduceerd via colors.css, waardoor het eenvoudiger wordt om het kleurenschema van de Adhan-app te beheren en aan te passen. Dit verbetert de consistentie en onderhoudbaarheid van de stijlen in verschillende componenten van de app. Daarnaast is een functie toegevoegd voor automatische dhikr-wisseling in adzkaar.html, die elke 30 seconden naar de volgende dhikr schakelt. Hierdoor verbetert de gebruikerservaring door een soepele en intuïtieve navigatie tussen de dhikr-items mogelijk te maken.
86 lines
2.6 KiB
CSS
86 lines
2.6 KiB
CSS
/* Centraal Kleurenschema voor Adhan App */
|
|
:root {
|
|
/* Hoofdkleuren */
|
|
--primary-blue: #1e3c72;
|
|
--secondary-blue: #2a5298;
|
|
--accent-blue: #2563eb;
|
|
--gold: #d4af37;
|
|
--white: #ffffff;
|
|
--black: #000000;
|
|
--dark-gray: #111111;
|
|
--light-gray: #f7fafc;
|
|
|
|
/* Gradient achtergronden */
|
|
--primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
|
|
--gold-gradient: linear-gradient(135deg, var(--gold) 0%, #f4e17a 100%);
|
|
|
|
/* Transparante varianten */
|
|
--white-10: rgba(255, 255, 255, 0.1);
|
|
--white-15: rgba(255, 255, 255, 0.15);
|
|
--white-20: rgba(255, 255, 255, 0.2);
|
|
--white-30: rgba(255, 255, 255, 0.3);
|
|
--black-30: rgba(0, 0, 0, 0.3);
|
|
--black-50: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Tekst kleuren */
|
|
--text-primary-light: #222222;
|
|
--text-primary-dark: #ffffff;
|
|
--text-secondary-light: #666666;
|
|
--text-secondary-dark: #bbbbbb;
|
|
--text-muted-light: #c0c6d0;
|
|
--text-muted-dark: #e0e6ed;
|
|
|
|
/* Achtergrond kleuren */
|
|
--bg-light: var(--light-gray);
|
|
--bg-dark: var(--dark-gray);
|
|
--panel-bg-light: var(--white);
|
|
--panel-bg-dark: rgba(24, 24, 24, 0.8);
|
|
|
|
/* Border kleuren */
|
|
--border-light: #e0e6ed;
|
|
--border-dark: var(--white-20);
|
|
|
|
/* Accent kleuren voor verschillende states */
|
|
--active-bg-light: #fffbe6;
|
|
--active-bg-dark: rgba(234, 179, 8, 0.08);
|
|
--hover-bg-light: rgba(212, 175, 55, 0.1);
|
|
--hover-bg-dark: var(--white-10);
|
|
|
|
/* Schaduwen */
|
|
--shadow-light: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
|
|
--shadow-dark: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
|
--text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
|
|
--text-shadow-strong: 2px 2px 8px var(--black);
|
|
}
|
|
|
|
/* Light theme variabelen */
|
|
html.light {
|
|
--bg: var(--bg-light);
|
|
--text: var(--text-primary-light);
|
|
--text-secondary: var(--text-secondary-light);
|
|
--text-muted: var(--text-muted-light);
|
|
--panel-bg: var(--panel-bg-light);
|
|
--panel-text: var(--text-primary-light);
|
|
--accent: var(--accent-blue);
|
|
--accent-color: var(--gold);
|
|
--border-color: var(--border-light);
|
|
--active-bg: var(--active-bg-light);
|
|
--hover-bg: var(--hover-bg-light);
|
|
--shadow: var(--shadow-light);
|
|
}
|
|
|
|
/* Dark theme variabelen */
|
|
html.dark, body.dark {
|
|
--bg: var(--bg-dark);
|
|
--text: var(--text-primary-dark);
|
|
--text-secondary: var(--text-secondary-dark);
|
|
--text-muted: var(--text-muted-dark);
|
|
--panel-bg: var(--panel-bg-dark);
|
|
--panel-text: var(--text-primary-dark);
|
|
--accent: var(--white);
|
|
--accent-color: var(--gold);
|
|
--border-color: var(--border-dark);
|
|
--active-bg: var(--active-bg-dark);
|
|
--hover-bg: var(--hover-bg-dark);
|
|
--shadow: var(--shadow-dark);
|
|
} |