179 lines
6.4 KiB
CSS
179 lines
6.4 KiB
CSS
/*
|
|
* =================================================================================================
|
|
* 💖 BUBBLEGUM PUNK THEME (LIGHT) 💖
|
|
*
|
|
* This isn't just a theme. It's a statement.
|
|
* Unapologetically loud, pink, and quirky.
|
|
* =================================================================================================
|
|
*/
|
|
:root,
|
|
[data-bs-theme=light] {
|
|
/* --- CORE VIBE --- */
|
|
--bs-pink: #FF007A; /* 💖 Hyper Pink (Our Queen) */
|
|
--bs-green: #CFFF50; /* 🧪 Toxic Slime */
|
|
--bs-purple: #A328D6; /* 👾 Graffiti Purple */
|
|
--bs-yellow: #F9F871; /* ⚡ Neon Lemon */
|
|
--bs-cyan: #00F5D4; /* 💎 Glitchy Teal */
|
|
--bs-blue: #00A9E0; /* 💦 Splash Zone */
|
|
|
|
/* Let's redefine ALL the core colors to match the new energy */
|
|
--bs-primary: var(--bs-pink);
|
|
--bs-secondary: var(--bs-green);
|
|
--bs-success: var(--bs-cyan);
|
|
--bs-info: var(--bs-blue);
|
|
--bs-warning: var(--bs-yellow);
|
|
--bs-danger: #FF3D3D; /* 🚨 Code Red Rave */
|
|
|
|
/* --- BACKGROUNDS & TEXT --- */
|
|
/* No more boring white! */
|
|
--bs-body-bg: #FFF5FD; /* A soft, dreamy pink canvas */
|
|
--bs-body-color: #4A003D; /* Dark Plum (instead of black) for text */
|
|
--bs-heading-color: var(--bs-purple); /* Make headings POP */
|
|
--bs-secondary-color: rgba(74, 0, 61, 0.75); /* Plum, but softer */
|
|
--bs-tertiary-color: rgba(74, 0, 61, 0.5);
|
|
|
|
/* Make cards and containers pure white to contrast the pink background */
|
|
--bs-tertiary-bg: #FFFFFF;
|
|
--bs-secondary-bg: #FEF9FE;
|
|
|
|
/* --- LINKS & CODE --- */
|
|
--bs-link-color: var(--bs-pink);
|
|
--bs-link-hover-color: var(--bs-purple);
|
|
--bs-code-color: var(--bs-purple);
|
|
|
|
/* --- BORDERS & SHADOWS: LET'S GET QUIRKY --- */
|
|
--bs-border-width: 2px; /* Chunky borders! */
|
|
--bs-border-color: #FFD6F5; /* Pink-tinted border color */
|
|
--bs-border-color-translucent: rgba(74, 0, 61, 0.2);
|
|
--bs-border-radius: 1rem; /* Super bubbly and round */
|
|
--bs-border-radius-sm: 0.5rem;
|
|
--bs-border-radius-lg: 1.5rem;
|
|
--bs-border-radius-pill: 50rem;
|
|
|
|
/* Say goodbye to black shadows, hello to colored glows! */
|
|
--bs-box-shadow: 0 4px 12px rgba(255, 0, 122, 0.2);
|
|
--bs-box-shadow-sm: 0 2px 4px rgba(255, 0, 122, 0.15);
|
|
--bs-box-shadow-lg: 0 8px 30px rgba(255, 0, 122, 0.25);
|
|
--bs-box-shadow-inset: inset 0 1px 4px rgba(74, 0, 61, 0.2);
|
|
|
|
/* --- THE GRADIENT: THE SOUL OF THE THEME --- */
|
|
--bs-gradient: linear-gradient(75deg, var(--bs-primary), var(--bs-secondary));
|
|
|
|
/* --- Don't forget the RGB values for Bootstrap components! --- */
|
|
--bs-primary-rgb: 255, 0, 122;
|
|
--bs-secondary-rgb: 207, 255, 80;
|
|
--bs-body-color-rgb: 74, 0, 61;
|
|
--bs-body-bg-rgb: 255, 245, 253;
|
|
}
|
|
|
|
|
|
/*
|
|
* =================================================================================================
|
|
* 🌙🦇 CYBER GOTH THEME (DARK) 🦇🌙
|
|
*
|
|
* The lights are out, the neon is ON.
|
|
* A dark, moody theme with vibrant, glowing accents.
|
|
* =================================================================================================
|
|
*/
|
|
[data-bs-theme=dark] {
|
|
color-scheme: dark;
|
|
|
|
/* --- BACKGROUNDS & TEXT --- */
|
|
--bs-body-bg: #1D001A; /* Deep, dark space purple */
|
|
--bs-body-color: #FFE9FA; /* Light pink text for high contrast */
|
|
--bs-heading-color: var(--bs-cyan); /* Glowing cyan headings */
|
|
|
|
--bs-tertiary-bg: #2E0028; /* A slightly lighter container background */
|
|
--bs-secondary-bg: #3A0033;
|
|
--bs-secondary-color: rgba(255, 233, 250, 0.75);
|
|
--bs-tertiary-color: rgba(255, 233, 250, 0.5);
|
|
|
|
/* --- LINKS & CODE --- */
|
|
/* Using the Toxic Slime for links gives it that cyber look */
|
|
--bs-link-color: var(--bs-green);
|
|
--bs-link-hover-color: var(--bs-cyan);
|
|
--bs-code-color: var(--bs-pink);
|
|
|
|
/* --- BORDERS & SHADOWS: NEON GLOWS --- */
|
|
--bs-border-color: #5C004F;
|
|
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
|
|
|
/* Redefine shadows to be neon glows */
|
|
--bs-box-shadow: 0 0 15px rgba(var(--bs-primary-rgb), 0.4);
|
|
--bs-box-shadow-lg: 0 0 30px rgba(var(--bs-primary-rgb), 0.5);
|
|
|
|
/* --- EMPHASIS & SUBTLE BACKGROUNDS --- */
|
|
/* These are for alerts, badges, etc. They'll be dark with glowing text. */
|
|
--bs-primary-text-emphasis: #FF8AD1;
|
|
--bs-secondary-text-emphasis: #E2FF8A;
|
|
--bs-success-text-emphasis: #8AFFEB;
|
|
--bs-info-text-emphasis: #7ADCF5;
|
|
--bs-warning-text-emphasis: #FAF8A8;
|
|
--bs-danger-text-emphasis: #FF8A8A;
|
|
|
|
--bs-primary-bg-subtle: #3D002B;
|
|
--bs-secondary-bg-subtle: #415215;
|
|
--bs-success-bg-subtle: #00332B;
|
|
--bs-info-bg-subtle: #00313D;
|
|
--bs-warning-bg-subtle: #3E3D1C;
|
|
--bs-danger-bg-subtle: #520E0E;
|
|
}
|
|
|
|
/* === EMOJI LEVELS === */
|
|
.emoji-normal .emoji-normal { display: inline; }
|
|
.emoji-normal .emoji-enhanced,
|
|
.emoji-normal .emoji-bonkers { display: none; }
|
|
|
|
.emoji-enhanced .emoji-enhanced { display: inline; }
|
|
.emoji-enhanced .emoji-normal,
|
|
.emoji-enhanced .emoji-bonkers { display: none; }
|
|
|
|
.emoji-bonkers .emoji-bonkers { display: inline; }
|
|
.emoji-bonkers .emoji-normal,
|
|
.emoji-bonkers .emoji-enhanced { display: none; }
|
|
/*
|
|
* =================================================================================================
|
|
* 🌈 RAINBOW PRIDE ELEMENTS 🌈
|
|
*
|
|
* Fabulous rainbow-themed elements to celebrate diversity and pride!
|
|
* =================================================================================================
|
|
*/
|
|
.bg-rainbow {
|
|
background: linear-gradient(
|
|
to right,
|
|
#FF5757, /* Red */
|
|
#FFBD59, /* Orange */
|
|
#F9F871, /* Yellow */
|
|
#CFFF50, /* Green */
|
|
#00F5D4, /* Teal */
|
|
#00A9E0, /* Blue */
|
|
#A328D6 /* Purple */
|
|
);
|
|
color: white;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
font-weight: bold;
|
|
border: none;
|
|
}
|
|
|
|
.fun-fact {
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Add a subtle rainbow border to the fun facts card */
|
|
.card:has(.fun-fact) {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-image: linear-gradient(
|
|
to right,
|
|
#FF5757, /* Red */
|
|
#FFBD59, /* Orange */
|
|
#F9F871, /* Yellow */
|
|
#CFFF50, /* Green */
|
|
#00F5D4, /* Teal */
|
|
#00A9E0, /* Blue */
|
|
#A328D6 /* Purple */
|
|
) 1;
|
|
box-shadow: 0 4px 15px rgba(163, 40, 214, 0.2);
|
|
}
|