/**
* PickleConnect Theme Override CSS
*
* When .pc-custom-theme is active on , these rules override
* the hardcoded lime colors with the CSS custom property values.
*
* TO UNDO: Remove the tag for this file from all pages.
* All styles revert to the original lime (#bef264) defaults.
*
* The theme engine JS sets --pc-theme and variations on :root,
* and adds .pc-custom-theme class to .
*/
:root {
/* Default values — these are only active when .pc-custom-theme is NOT set.
When .pc-custom-theme IS set, the JS overrides these with setProperty(). */
}
/* === Body Background Tinting === */
.pc-custom-theme body,
.pc-custom-theme .bg-dark-900 {
background-color: var(--pc-theme-bg-body) !important;
}
.pc-custom-theme .bg-dark-800,
.pc-custom-theme nav.bg-dark-900,
.pc-custom-theme .border-dark-800 {
background-color: var(--pc-theme-bg-card) !important;
}
.pc-custom-theme .border-dark {
border-color: var(--pc-theme-bg-border) !important;
}
/* === Text Colors === */
.pc-custom-theme .text-lime,
.pc-custom-theme a.text-lime,
.pc-custom-theme span.text-lime,
.pc-custom-theme p.text-lime,
.pc-custom-theme h1.text-lime,
.pc-custom-theme h2.text-lime,
.pc-custom-theme h3.text-lime,
.pc-custom-theme strong.text-lime {
color: var(--pc-theme) !important;
}
/* === Background Colors === */
.pc-custom-theme .bg-lime {
background-color: var(--pc-theme) !important;
}
.pc-custom-theme .bg-lime\/10 {
background-color: color-mix(in srgb, var(--pc-theme) 10%, transparent) !important;
}
.pc-custom-theme .bg-lime\/5 {
background-color: color-mix(in srgb, var(--pc-theme) 5%, transparent) !important;
}
.pc-custom-theme .bg-lime\/20 {
background-color: color-mix(in srgb, var(--pc-theme) 20%, transparent) !important;
}
/* === Border Colors === */
.pc-custom-theme .border-lime,
.pc-custom-theme button.border-lime {
border-color: var(--pc-theme) !important;
}
.pc-custom-theme .border-lime\/20,
.pc-custom-theme .border-lime\/30,
.pc-custom-theme .border-lime\/40,
.pc-custom-theme .border-lime\/50 {
border-color: color-mix(in srgb, var(--pc-theme) 40%, transparent) !important;
}
.pc-custom-theme .hover\:border-lime\/30:hover,
.pc-custom-theme .hover\:border-lime\/40:hover,
.pc-custom-theme .hover\:border-lime\/50:hover {
border-color: color-mix(in srgb, var(--pc-theme) 40%, transparent) !important;
}
/* === Focus/Ring Colors === */
.pc-custom-theme .focus\:border-lime:focus,
.pc-custom-theme .focus\:border-lime\/50:focus {
border-color: color-mix(in srgb, var(--pc-theme) 50%, transparent) !important;
}
.pc-custom-theme .focus\:ring-lime\/30:focus,
.pc-custom-theme .focus\:ring-lime:focus {
--tw-ring-color: color-mix(in srgb, var(--pc-theme) 30%, transparent) !important;
}
/* === Shadow Colors === */
.pc-custom-theme .shadow-lime\/5,
.pc-custom-theme .shadow-lime\/20 {
--tw-shadow-color: color-mix(in srgb, var(--pc-theme) 20%, transparent) !important;
}
/* === Hover States === */
.pc-custom-theme .hover\:bg-lime:hover,
.pc-custom-theme button.hover\:bg-lime:hover,
.pc-custom-theme a.hover\:bg-lime:hover {
background-color: var(--pc-theme) !important;
}
.pc-custom-theme .hover\:bg-lime\/10:hover {
background-color: color-mix(in srgb, var(--pc-theme) 10%, transparent) !important;
}
.pc-custom-theme .hover\:bg-lime\/20:hover {
background-color: color-mix(in srgb, var(--pc-theme) 20%, transparent) !important;
}
.pc-custom-theme .hover\:bg-lime\/90:hover {
background-color: color-mix(in srgb, var(--pc-theme) 90%, black) !important;
}
.pc-custom-theme .hover\:text-lime:hover,
.pc-custom-theme a.hover\:text-lime:hover {
color: var(--pc-theme) !important;
}
/* === Group Hover (buttons that go lime on hover) === */
.pc-custom-theme .group-hover\:bg-lime:hover .group-hover\:bg-lime,
.pc-custom-theme .group:hover .group-hover\:bg-lime {
background-color: var(--pc-theme) !important;
}
.pc-custom-theme .group:hover .group-hover\:text-lime {
color: var(--pc-theme) !important;
}
/* === Inline Styles (most common patterns) === */
/* These catch the inline style="" color references */
.pc-custom-theme [style*="color: #bef264"],
.pc-custom-theme [style*="color:#bef264"] {
color: var(--pc-theme) !important;
}
.pc-custom-theme [style*="background-color: #bef264"],
.pc-custom-theme [style*="background-color:#bef264"],
.pc-custom-theme [style*="background: #bef264"],
.pc-custom-theme [style*="background:#bef264"] {
background-color: var(--pc-theme) !important;
}
/* === Meta Theme-Color (handled by JS) === */
/* The JS updates directly */
/* === Checkbox/Radio Accent === */
.pc-custom-theme input[type="checkbox"].text-lime,
.pc-custom-theme input[type="radio"].text-lime {
accent-color: var(--pc-theme);
}
/* === Animation color overrides for paddle loading === */
/* The loading animation uses bg-lime which is covered above */
/* === Selection highlight === */
.pc-custom-theme .selection\:bg-lime\/30 ::selection {
background-color: color-mix(in srgb, var(--pc-theme) 30%, transparent);
}
/* === Special: .text-lime class in the inline