/** * Paletes de color. Requereix `data-theme-palette="1".."5"` a `` (PHP + theme_palette_head.php). * Sobreescriu variables de styles.css i tokens del tema Playtomic (styles-feed-playtomic.css). */ /* --- 1: Blanc i negre = mode fosc global (grisos neutres) --- */ html[data-theme-palette="1"] { color-scheme: dark; --bg-app: #0f1115; --bg-app-2: #161a22; --surface: rgba(28, 32, 40, 0.94); --surface-solid: #1e232b; --surface-soft: #252b36; --surface-hover: #323946; --border: #3d4655; --border-strong: #4b5563; --text-main: #f3f4f6; --text-soft: #d1d5db; --text-muted: #9ca3af; --text-faint: #6b7280; /* Botons «accent»: clar sobre fosc */ --primary: #e5e7eb; --primary-dark: #f9fafb; --accent: #a1a1aa; --danger: #f87171; --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.62); /* styles-messenger.css (:root propi) */ --brand: #d1d5db; --brand-strong: #f3f4f6; --brand-soft: rgba(243, 244, 246, 0.1); --success-soft: rgba(52, 211, 153, 0.12); --danger-soft: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.32); --danger-text: #fca5a5; /* styles-shop.css */ --shop-bg: #13161c; --shop-surface: #1c212b; --shop-surface-soft: #252b36; --shop-border: #3d4655; --shop-text: #f3f4f6; --shop-muted: #9ca3af; --shop-primary: #f9fafb; --shop-accent: #d1d5db; --shop-accent-hover: #f3f4f6; --shop-success: #86efac; --shop-danger: #f87171; --shop-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4); --shop-shadow-md: 0 18px 44px rgba(0, 0, 0, 0.5); --playtomic-shell-bg: #111318; --playtomic-nav-gradient-start: #3f4654; --playtomic-nav-gradient-end: #0b0d10; --playtomic-nav-title: #f9fafb; --playtomic-bottom-chrome-bg: #161a22; --playtomic-bottom-border-top: #2f3540; --playtomic-muted: #9ca3af; --playtomic-link: #e5e7eb; --playtomic-link-bg: rgba(255, 255, 255, 0.1); --playtomic-header-dropdown-border: rgba(75, 85, 99, 0.85); --playtomic-header-dropdown-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); --playtomic-card-border: #2f3540; --playtomic-card-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); } /* --- 2: Pastel taronja (per defecte Bicial) --- */ html[data-theme-palette="2"] { --bg-app: #ffffff; --bg-app-2: #ffffff; --surface: transparent; --surface-solid: transparent; --surface-soft: transparent; --surface-hover: transparent; --border: #fde0c4; --border-strong: #f5c9a0; --text-main: #4a3428; --text-soft: #7a5c48; --text-muted: #9a7358; --primary: #f4a261; --primary-dark: #e76f51; --accent: #f9c784; --danger: #e07a7a; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 8px; --radius-pill: 6px; --playtomic-shell-bg: #ffffff; --playtomic-nav-gradient-start: #fcd9b8; --playtomic-nav-gradient-end: #f4a261; --playtomic-nav-title: #fffaf5; --playtomic-bottom-chrome-bg: #ffffff; --playtomic-bottom-border-top: #fde0c4; --playtomic-muted: #9a7358; --playtomic-link: #e76f51; --playtomic-link-bg: transparent; --playtomic-header-dropdown-border: #f5c9a0; --playtomic-header-dropdown-shadow: none; --playtomic-card-border: #fde0c4; --playtomic-card-shadow: none; } /* --- 3: Verds --- */ html[data-theme-palette="3"] { --bg-app: #ecfdf3; --bg-app-2: #e2f4ea; --surface: rgba(255, 255, 255, 0.9); --surface-solid: #ffffff; --surface-soft: #f0fdf4; --surface-hover: #dcfce7; --border: #bbf7d0; --border-strong: #86efac; --text-main: #052e16; --text-soft: #166534; --text-muted: #15803d; --primary: #22c55e; --primary-dark: #15803d; --accent: #0d9488; --danger: #b91c1c; --shadow-sm: 0 4px 12px rgba(21, 128, 61, 0.08); --shadow-md: 0 10px 28px rgba(21, 128, 61, 0.12); --shadow-lg: 0 18px 40px rgba(21, 128, 61, 0.14); --playtomic-shell-bg: #ecfdf3; --playtomic-nav-gradient-start: #22c55e; --playtomic-nav-gradient-end: #14532d; --playtomic-nav-title: #f0fdf4; --playtomic-bottom-chrome-bg: #dcfce7; --playtomic-bottom-border-top: #86efac; --playtomic-muted: #15803d; --playtomic-link: #15803d; --playtomic-link-bg: rgba(21, 128, 61, 0.12); --playtomic-header-dropdown-border: rgba(134, 239, 172, 0.95); --playtomic-header-dropdown-shadow: 0 16px 34px rgba(5, 46, 22, 0.14); --playtomic-card-border: #bbf7d0; --playtomic-card-shadow: 0 2px 10px rgba(5, 46, 22, 0.06); } /* --- 4: Taronjes --- */ html[data-theme-palette="4"] { --bg-app: #fff7ed; --bg-app-2: #ffedd5; --surface: rgba(255, 255, 255, 0.92); --surface-solid: #ffffff; --surface-soft: #fffbeb; --surface-hover: #ffedd5; --border: #fed7aa; --border-strong: #fdba74; --text-main: #431407; --text-soft: #9a3412; --text-muted: #c2410c; --primary: #ea580c; --primary-dark: #c2410c; --accent: #d97706; --danger: #b91c1c; --shadow-sm: 0 4px 12px rgba(194, 65, 12, 0.1); --shadow-md: 0 10px 28px rgba(194, 65, 12, 0.14); --shadow-lg: 0 18px 40px rgba(194, 65, 12, 0.16); --playtomic-shell-bg: #fff7ed; --playtomic-nav-gradient-start: #fb923c; --playtomic-nav-gradient-end: #9a3412; --playtomic-nav-title: #fffbeb; --playtomic-bottom-chrome-bg: #ffedd5; --playtomic-bottom-border-top: #fdba74; --playtomic-muted: #c2410c; --playtomic-link: #ea580c; --playtomic-link-bg: rgba(234, 88, 12, 0.14); --playtomic-header-dropdown-border: rgba(253, 186, 116, 0.95); --playtomic-header-dropdown-shadow: 0 16px 34px rgba(67, 20, 7, 0.14); --playtomic-card-border: #fed7aa; --playtomic-card-shadow: 0 2px 10px rgba(124, 45, 18, 0.06); } /* --- 5: Vermells --- */ html[data-theme-palette="5"] { --bg-app: #fef2f2; --bg-app-2: #fee2e2; --surface: rgba(255, 255, 255, 0.92); --surface-solid: #ffffff; --surface-soft: #fff1f2; --surface-hover: #fecdd3; --border: #fecaca; --border-strong: #fca5a5; --text-main: #450a0a; --text-soft: #991b1b; --text-muted: #b91c1c; --primary: #ef4444; --primary-dark: #b91c1c; --accent: #f97316; --danger: #7f1d1d; --shadow-sm: 0 4px 12px rgba(185, 28, 28, 0.1); --shadow-md: 0 10px 28px rgba(185, 28, 28, 0.14); --shadow-lg: 0 18px 40px rgba(185, 28, 28, 0.16); --playtomic-shell-bg: #fef2f2; --playtomic-nav-gradient-start: #f87171; --playtomic-nav-gradient-end: #7f1d1d; --playtomic-nav-title: #fef2f2; --playtomic-bottom-chrome-bg: #fee2e2; --playtomic-bottom-border-top: #fca5a5; --playtomic-muted: #b91c1c; --playtomic-link: #dc2626; --playtomic-link-bg: rgba(220, 38, 38, 0.14); --playtomic-header-dropdown-border: rgba(252, 165, 165, 0.95); --playtomic-header-dropdown-shadow: 0 16px 34px rgba(69, 10, 10, 0.16); --playtomic-card-border: #fecaca; --playtomic-card-shadow: 0 2px 10px rgba(127, 29, 29, 0.06); } /* ============================================================================= Paleta 4 (taronja) — capçalera, icones, resalts i subratllats taronja ============================================================================= */ html[data-theme-palette="4"] { --palette-orange-strong: #c2410c; --palette-orange-mid: #ea580c; --palette-orange-soft: #fb923c; --palette-on-orange-text: #fffbeb; } /* Header superior: navbar per defecte (blur blanc) → gradient taronja */ html[data-theme-palette="4"] .navbar { background: linear-gradient( 180deg, var(--palette-orange-soft) 0%, var(--palette-orange-mid) 48%, var(--palette-orange-strong) 100% ); border-bottom: 1px solid rgba(154, 52, 18, 0.5); color: var(--palette-on-orange-text); } html[data-theme-palette="4"] .navbar .navbar-brand-link strong, html[data-theme-palette="4"] .navbar .menu-item span, html[data-theme-palette="4"] .navbar .menu-item { color: var(--palette-on-orange-text); } html[data-theme-palette="4"] .navbar .search-bar { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 251, 235, 0.35); } html[data-theme-palette="4"] .navbar .search-bar input { color: var(--palette-on-orange-text); } html[data-theme-palette="4"] .navbar .search-bar i { color: rgba(255, 251, 235, 0.92); } /* Icones dins la navbar: contrast sobre taronja (no taronja sobre taronja) */ html[data-theme-palette="4"] .navbar i[class*="fa-"], html[data-theme-palette="4"] .navbar .btn-circle, html[data-theme-palette="4"] .navbar .svg-inline--fa { color: var(--palette-on-orange-text); } html[data-theme-palette="4"] .navbar .btn-circle:hover { background: rgba(255, 255, 255, 0.18); } /* Tema Playtomic: reforç del gradient taronja al header */ html[data-theme-palette="4"] body.page-feed.feed-theme-playtomic .navbar { background: linear-gradient( 180deg, var(--palette-orange-soft) 0%, var(--palette-orange-mid) 42%, var(--palette-orange-strong) 100% ); } html[data-theme-palette="4"] body.page-feed.feed-theme-playtomic .navbar .btn-circle { color: var(--palette-on-orange-text); } html[data-theme-palette="4"] body.page-feed.feed-theme-playtomic .navbar .menu-item.navbar-brand-link strong { color: var(--palette-on-orange-text); } /* Icones Font Awesome fora de la navbar */ html[data-theme-palette="4"] .main-container i[class*="fa-"], html[data-theme-palette="4"] .bottom-nav-bar i[class*="fa-"], html[data-theme-palette="4"] .header-more-dropdown i[class*="fa-"], html[data-theme-palette="4"] .bottom-dropdown i[class*="fa-"], html[data-theme-palette="4"] .modal-content i[class*="fa-"], html[data-theme-palette="4"] .new-post-content i[class*="fa-"] { color: var(--palette-orange-mid); } html[data-theme-palette="4"] .bottom-nav-icon, html[data-theme-palette="4"] .bottom-nav-plus-btn { color: var(--palette-orange-mid); } html[data-theme-palette="4"] .bottom-nav-icon.active, html[data-theme-palette="4"] .bottom-nav-icon.active > i { color: var(--palette-orange-strong); } html[data-theme-palette="4"] .left-sidebar i[class*="fa-"], html[data-theme-palette="4"] .right-sidebar i[class*="fa-"] { color: var(--palette-orange-mid); } html[data-theme-palette="4"] .sidebar-icon-community, html[data-theme-palette="4"] .sidebar-icon-bookmark { color: var(--palette-orange-mid); } /* Actiu a sidebars / desplegables (no a la navbar taronja) */ html[data-theme-palette="4"] .left-sidebar .menu-item.is-active, html[data-theme-palette="4"] .right-sidebar .menu-item.is-active, html[data-theme-palette="4"] .header-more-dropdown .dropdown-item.is-active, html[data-theme-palette="4"] .bottom-dropdown .dropdown-item.is-active { color: var(--palette-orange-strong); } html[data-theme-palette="4"] .left-sidebar .menu-item.is-active i[class*="fa-"], html[data-theme-palette="4"] .right-sidebar .menu-item.is-active i[class*="fa-"], html[data-theme-palette="4"] .header-more-dropdown .dropdown-item.is-active i[class*="fa-"], html[data-theme-palette="4"] .bottom-dropdown .dropdown-item.is-active i[class*="fa-"] { color: var(--palette-orange-strong); } /* Textos resaltats */ html[data-theme-palette="4"] .center-column strong, html[data-theme-palette="4"] .center-column b, html[data-theme-palette="4"] .config-shell strong, html[data-theme-palette="4"] .config-shell b, html[data-theme-palette="4"] .feed-container strong, html[data-theme-palette="4"] .feed-container b { color: var(--palette-orange-strong); } html[data-theme-palette="4"] .config-title, html[data-theme-palette="4"] .config-section-title, html[data-theme-palette="4"] .config-subsection-title { color: var(--palette-orange-strong); } html[data-theme-palette="4"] mark { background: rgba(251, 146, 60, 0.35); color: var(--palette-orange-strong); } /* Enllaços com a text resaltat + color de subratllat */ html[data-theme-palette="4"] .main-container a[href]:where(:not(.btn-primary):not(.btn-send):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="4"] .config-shell a[href]:where(:not(.btn-primary):not(.config-pending-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)) { color: var(--palette-orange-strong); text-decoration-color: var(--palette-orange-mid); } html[data-theme-palette="4"] .main-container a[href]:where(:not(.btn-primary):not(.btn-send):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)):hover, html[data-theme-palette="4"] .config-shell a[href]:where(:not(.btn-primary):not(.config-pending-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)):hover { color: var(--palette-orange-mid); text-decoration-color: var(--palette-orange-soft); } html[data-theme-palette="4"] .navbar a[href] { color: var(--palette-on-orange-text); text-decoration-color: rgba(255, 251, 235, 0.75); } html[data-theme-palette="4"] .navbar a[href]:hover { color: #ffffff; text-decoration-color: #ffffff; } html[data-theme-palette="4"] u { text-decoration-color: var(--palette-orange-mid); } html[data-theme-palette="4"] .feed-discover-btn { text-decoration-color: transparent; } /* ============================================================================= Paleta 1 — sobreescriptures per colors fixos (mode fosc coherent arreu) ============================================================================= */ html[data-theme-palette="1"] .navbar { background: rgba(22, 26, 32, 0.92); border-bottom-color: rgba(75, 85, 99, 0.65); } html[data-theme-palette="1"] .left-sidebar, html[data-theme-palette="1"] .right-sidebar { border-color: rgba(75, 85, 99, 0.75); } html[data-theme-palette="1"] .divider { background: rgba(156, 163, 175, 0.28); } html[data-theme-palette="1"] .menu-item.is-active, html[data-theme-palette="1"] .dropdown-item.is-active { background: rgba(255, 255, 255, 0.1); color: var(--text-main); } html[data-theme-palette="1"] .sidebar-icon-community, html[data-theme-palette="1"] .sidebar-icon-bookmark { color: #c4c9d4; } html[data-theme-palette="1"] .online-dot { border-color: var(--surface-solid); } html[data-theme-palette="1"] .contact-friendship-tag.is-friend { color: #86efac; background: rgba(34, 197, 94, 0.12); border-color: rgba(74, 222, 128, 0.35); } html[data-theme-palette="1"] .contact-friendship-tag.is-non-friend { color: var(--text-muted); background: var(--surface-soft); border-color: var(--border); } html[data-theme-palette="1"] .contacts-filter-btn { border-color: var(--border); background: var(--surface-solid); color: var(--text-soft); } html[data-theme-palette="1"] .contacts-filter-btn.is-active { background: rgba(255, 255, 255, 0.12); color: var(--text-main); border-color: var(--border-strong); } html[data-theme-palette="1"] .ad-card { background: rgba(30, 35, 44, 0.88); border-color: rgba(75, 85, 99, 0.65); } html[data-theme-palette="1"] .btn-circle:hover { background: var(--surface-hover); border-color: var(--border-strong); } html[data-theme-palette="1"] .btn-send { color: #0b0d10; } html[data-theme-palette="1"] .bottom-nav-bar { background: var(--surface-solid); border-top-color: rgba(75, 85, 99, 0.75); box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45); } html[data-theme-palette="1"] .bottom-nav-icon.active { background: rgba(255, 255, 255, 0.1); color: var(--text-main); } html[data-theme-palette="1"] .bottom-dropdown { background: rgba(30, 35, 44, 0.98); border: 1px solid rgba(75, 85, 99, 0.85); } html[data-theme-palette="1"] .dropdown-divider { background: rgba(156, 163, 175, 0.25); } html[data-theme-palette="1"] .modal-content, html[data-theme-palette="1"] .new-post-content { background: rgba(30, 35, 44, 0.98); border: 1px solid rgba(75, 85, 99, 0.85); color: var(--text-main); } html[data-theme-palette="1"] .header-more-dropdown { background: rgba(30, 35, 44, 0.98); color: var(--text-main); border: 1px solid rgba(75, 85, 99, 0.85); } html[data-theme-palette="1"] .feed-discover-btn { color: #0b0d10; } html[data-theme-palette="1"] .shop-page { background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 26%), linear-gradient(180deg, #1a1f28 0%, var(--shop-bg) 100%); } html[data-theme-palette="1"] .shop-hero { border-color: rgba(255, 255, 255, 0.08); } /* Enllaços de text a configuració (no botons) */ html[data-theme-palette="1"] .page-configuracio a:not(.btn-primary):not(.club-portada-membres-btn):not(.club-portada-subnav__btn) { color: var(--text-soft); } html[data-theme-palette="1"] .page-configuracio a:not(.btn-primary):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):hover { color: var(--text-main); } /* Configuració / admin: botons i enllaços blaus fixos → neutre fosc */ html[data-theme-palette="1"] .config-actions .btn-primary, html[data-theme-palette="1"] .admin-form-actions .btn-primary { background: linear-gradient(135deg, #e5e7eb 0%, #f9fafb 100%); color: #111827; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); } html[data-theme-palette="1"] .config-actions .btn-primary:hover, html[data-theme-palette="1"] .admin-form-actions .btn-primary:hover { background: #f9fafb; } html[data-theme-palette="1"] .config-pending-btn--ok { background: linear-gradient(135deg, #d1d5db 0%, #f3f4f6 100%); color: #111827; border-color: #9ca3af; } html[data-theme-palette="1"] .config-pending-btn--ok:hover { background: #f3f4f6; } html[data-theme-palette="1"] .config-pending-club { color: var(--text-soft); } html[data-theme-palette="1"] .config-pending-meta { color: var(--text-muted); } html[data-theme-palette="1"] .config-pending-btn--no { border-color: var(--border); } html[data-theme-palette="1"] .config-section--club-admin { border-color: rgba(255, 255, 255, 0.12); } html[data-theme-palette="1"] .admin-usuaris-nav a { color: var(--text-soft); } html[data-theme-palette="1"] .admin-user-avatar { background: var(--surface-soft); } html[data-theme-palette="1"] .club-portada-membres-btn { background: linear-gradient(135deg, #d1d5db 0%, #f3f4f6 100%); color: #111827; border-color: #6b7280; } html[data-theme-palette="1"] .club-portada-membres-btn:hover { background: #f9fafb; color: #111827; } html[data-theme-palette="1"] .club-portada-membres-btn:focus-visible { outline-color: #d1d5db; } html[data-theme-palette="1"] .club-portada-header .config-lead code { background: var(--surface-soft); color: var(--text-soft); } html[data-theme-palette="1"] .config-palette-card--active { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); } html[data-theme-palette="1"] .config-palette-card:focus-within { outline-color: var(--text-muted); } html[data-theme-palette="1"] .page-configuracio .config-flash--ok { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(74, 222, 128, 0.35); } html[data-theme-palette="1"] .page-configuracio .config-flash--error { background: rgba(248, 113, 113, 0.12); color: #fecaca; border-color: rgba(248, 113, 113, 0.35); } /* Formularis genèrics dins l’app (evita camps blancs sobre fosc) */ html[data-theme-palette="1"] textarea, html[data-theme-palette="1"] select, html[data-theme-palette="1"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]) { background: var(--surface-soft); color: var(--text-main); border-color: var(--border); } html[data-theme-palette="1"] ::placeholder { color: var(--text-muted); opacity: 0.95; }