488 lines
11 KiB
CSS
488 lines
11 KiB
CSS
/* Pride-themed Bootstrap color overrides */
|
|
:root {
|
|
/* Pride flag colors with RGB values */
|
|
--pride-red: #e40303;
|
|
--pride-red-rgb: 228, 3, 3;
|
|
|
|
--pride-orange: #ff8c00;
|
|
--pride-orange-rgb: 255, 140, 0;
|
|
|
|
--pride-yellow: #ffed00;
|
|
--pride-yellow-rgb: 255, 237, 0;
|
|
|
|
--pride-green: #008026;
|
|
--pride-green-rgb: 0, 128, 38;
|
|
|
|
--pride-blue: #004dff;
|
|
--pride-blue-rgb: 0, 77, 255;
|
|
|
|
--pride-purple: #750787;
|
|
--pride-purple-rgb: 117, 7, 135;
|
|
|
|
/* Additional pride colors */
|
|
--pride-pink: #ff69b4;
|
|
--pride-pink-rgb: 255, 105, 180;
|
|
|
|
--pride-cyan: #00ffff;
|
|
--pride-cyan-rgb: 0, 255, 255;
|
|
|
|
--pride-lavender: #b57edc;
|
|
--pride-lavender-rgb: 181, 126, 220;
|
|
|
|
/* Override Bootstrap's default colors with pride colors */
|
|
--bs-primary: var(--pride-blue);
|
|
--bs-primary-rgb: 0, 77, 255;
|
|
|
|
--bs-secondary: var(--pride-purple);
|
|
--bs-secondary-rgb: 117, 7, 135;
|
|
|
|
--bs-success: var(--pride-green);
|
|
--bs-success-rgb: 0, 128, 38;
|
|
|
|
--bs-info: #3ECDF3; /* Light blue from trans flag */
|
|
--bs-info-rgb: 62, 205, 243;
|
|
|
|
--bs-warning: var(--pride-orange);
|
|
--bs-warning-rgb: 255, 140, 0;
|
|
|
|
--bs-danger: var(--pride-red);
|
|
--bs-danger-rgb: 228, 3, 3;
|
|
|
|
/* Replace light and dark with more colorful alternatives */
|
|
--bs-light: #f0e6ff; /* Light lavender */
|
|
--bs-light-rgb: 240, 230, 255;
|
|
|
|
--bs-dark: #330066; /* Deep purple */
|
|
--bs-dark-rgb: 51, 0, 102;
|
|
|
|
/* Link colors */
|
|
--bs-link-color: var(--pride-blue);
|
|
--bs-link-hover-color: var(--pride-purple);
|
|
|
|
/* Button hover effects */
|
|
--bs-btn-hover-bg-shade-amount: 15%;
|
|
--bs-btn-hover-bg-tint-amount: 15%;
|
|
|
|
/* Card and border colors */
|
|
--bs-border-color: rgba(var(--bs-primary-rgb), 0.2);
|
|
--bs-card-cap-bg: rgba(var(--bs-primary-rgb), 0.1);
|
|
|
|
/* Navbar colors */
|
|
--bs-navbar-active-color: var(--pride-yellow);
|
|
--bs-navbar-brand-color: var(--pride-yellow);
|
|
--bs-navbar-brand-hover-color: var(--pride-orange);
|
|
--bs-navbar-hover-color: var(--pride-orange);
|
|
}
|
|
|
|
/* Custom background classes for pride colors */
|
|
.bg-pride-red { background-color: var(--pride-red) !important; color: white !important; }
|
|
.bg-pride-orange { background-color: var(--pride-orange) !important; color: black !important; }
|
|
.bg-pride-yellow { background-color: var(--pride-yellow) !important; color: black !important; }
|
|
.bg-pride-green { background-color: var(--pride-green) !important; color: white !important; }
|
|
.bg-pride-blue { background-color: var(--pride-blue) !important; color: white !important; }
|
|
.bg-pride-purple { background-color: var(--pride-purple) !important; color: white !important; }
|
|
.bg-pride-pink { background-color: var(--pride-pink) !important; color: white !important; }
|
|
.bg-pride-cyan { background-color: var(--pride-cyan) !important; color: black !important; }
|
|
.bg-pride-lavender { background-color: var(--pride-lavender) !important; color: black !important; }
|
|
|
|
/* Body styling with subtle gradient background */
|
|
body {
|
|
background: linear-gradient(135deg, var(--bs-light) 0%, white 50%, var(--bs-light) 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Rainbow gradient backgrounds */
|
|
.bg-rainbow {
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--pride-red),
|
|
var(--pride-orange),
|
|
var(--pride-yellow),
|
|
var(--pride-green),
|
|
var(--pride-blue),
|
|
var(--pride-purple)
|
|
) !important;
|
|
color: white !important;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.bg-rainbow-vertical {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
var(--pride-red),
|
|
var(--pride-orange),
|
|
var(--pride-yellow),
|
|
var(--pride-green),
|
|
var(--pride-blue),
|
|
var(--pride-purple)
|
|
) !important;
|
|
color: white !important;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* Override specific Bootstrap components */
|
|
.navbar-dark {
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--pride-red),
|
|
var(--pride-orange),
|
|
var(--pride-yellow),
|
|
var(--pride-green),
|
|
var(--pride-blue),
|
|
var(--pride-purple)
|
|
) !important;
|
|
}
|
|
|
|
.navbar-dark .navbar-brand,
|
|
.navbar-dark .nav-link {
|
|
color: white !important;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.navbar-dark .nav-link:hover {
|
|
color: var(--bs-light) !important;
|
|
text-shadow: 0 0 5px white;
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(var(--pride-lavender-rgb), 0.3);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border: none;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-20px);
|
|
box-shadow: 0 15px 30px rgba(var(--pride-pink-rgb), 0.4);
|
|
}
|
|
|
|
.card-header {
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(var(--pride-blue-rgb), 0.7),
|
|
rgba(var(--pride-purple-rgb), 0.7)
|
|
);
|
|
color: white;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
|
border-bottom: none;
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
.card-body {
|
|
border-top: 3px solid rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* Add rainbow border to cards */
|
|
.card {
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
position: relative;
|
|
}
|
|
|
|
.card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
z-index: -1;
|
|
border-radius: 12px;
|
|
background: linear-gradient(
|
|
45deg,
|
|
var(--pride-red),
|
|
var(--pride-orange),
|
|
var(--pride-yellow),
|
|
var(--pride-green),
|
|
var(--pride-blue),
|
|
var(--pride-purple),
|
|
var(--pride-pink)
|
|
);
|
|
}
|
|
|
|
/* Button styling */
|
|
.btn {
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: scale(1.2);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Footer styling */
|
|
footer {
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--pride-purple),
|
|
var(--pride-blue),
|
|
var(--pride-green),
|
|
var(--pride-yellow),
|
|
var(--pride-orange),
|
|
var(--pride-red)
|
|
) !important;
|
|
color: white !important;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
|
padding: 1.5rem 0;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* Table styling */
|
|
.table {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.1);
|
|
}
|
|
|
|
.table thead {
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(var(--pride-pink-rgb), 0.7),
|
|
rgba(var(--bs-primary-rgb), 0.7)
|
|
);
|
|
color: white;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.table-striped > tbody > tr:nth-of-type(odd) {
|
|
background-color: rgba(var(--pride-lavender-rgb), 0.15);
|
|
}
|
|
|
|
.table-striped > tbody > tr:nth-of-type(even) {
|
|
background-color: rgba(var(--pride-cyan-rgb), 0.1);
|
|
}
|
|
|
|
.table-hover > tbody > tr:hover {
|
|
background-color: rgba(var(--bs-warning-rgb), 0.2);
|
|
transform: scale(1.01);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Badge styling */
|
|
.badge {
|
|
border-radius: 12px;
|
|
padding: 0.5em 0.8em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Progress bar styling */
|
|
.progress {
|
|
height: 1.2rem;
|
|
border-radius: 0.6rem;
|
|
background-color: rgba(var(--bs-primary-rgb), 0.1);
|
|
}
|
|
|
|
.progress-bar {
|
|
border-radius: 0.6rem;
|
|
}
|
|
|
|
/* Alert styling */
|
|
.alert {
|
|
border-radius: 10px;
|
|
border: none;
|
|
padding: 1rem 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: #000;
|
|
font-weight: 500;
|
|
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.alert::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 5px;
|
|
height: 100%;
|
|
}
|
|
|
|
.alert-primary {
|
|
background-color: rgba(var(--pride-blue-rgb), 0.2);
|
|
}
|
|
|
|
.alert-primary::before {
|
|
background-color: var(--pride-blue);
|
|
}
|
|
|
|
.alert-secondary {
|
|
background-color: rgba(var(--pride-purple-rgb), 0.2);
|
|
}
|
|
|
|
.alert-secondary::before {
|
|
background-color: var(--pride-purple);
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: rgba(var(--pride-green-rgb), 0.2);
|
|
}
|
|
|
|
.alert-success::before {
|
|
background-color: var(--pride-green);
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: rgba(var(--pride-red-rgb), 0.2);
|
|
}
|
|
|
|
.alert-danger::before {
|
|
background-color: var(--pride-red);
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: rgba(var(--pride-orange-rgb), 0.2);
|
|
}
|
|
|
|
.alert-warning::before {
|
|
background-color: var(--pride-orange);
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: rgba(var(--bs-info-rgb), 0.2);
|
|
}
|
|
|
|
.alert-info::before {
|
|
background-color: var(--bs-info);
|
|
}
|
|
|
|
/* Form control styling */
|
|
.form-control {
|
|
border-radius: 10px;
|
|
border: 2px solid rgba(var(--pride-lavender-rgb), 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--pride-blue);
|
|
box-shadow: 0 0 0 0.25rem rgba(var(--pride-blue-rgb), 0.25);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: bold;
|
|
color: var(--pride-purple);
|
|
}
|
|
|
|
.form-select {
|
|
border-radius: 10px;
|
|
border: 2px solid rgba(var(--pride-lavender-rgb), 0.3);
|
|
background-image: linear-gradient(45deg, var(--pride-purple) 0%, var(--pride-blue) 100%);
|
|
background-size: 20px 20px;
|
|
color: var(--bs-dark);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: var(--pride-blue);
|
|
box-shadow: 0 0 0 0.25rem rgba(var(--pride-blue-rgb), 0.25);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* Rainbow text for special elements */
|
|
.rainbow-text {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
var(--pride-red),
|
|
var(--pride-orange),
|
|
var(--pride-yellow),
|
|
var(--pride-green),
|
|
var(--pride-blue),
|
|
var(--pride-purple),
|
|
var(--pride-pink)
|
|
);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: bold;
|
|
animation: rainbow-shift 5s linear infinite;
|
|
}
|
|
|
|
/* Apply rainbow text to headings */
|
|
h1, h2, h3 {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
var(--pride-red),
|
|
var(--pride-orange),
|
|
var(--pride-yellow),
|
|
var(--pride-green),
|
|
var(--pride-blue),
|
|
var(--pride-purple),
|
|
var(--pride-pink)
|
|
);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Flash messages styling */
|
|
.flash-messages {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.flash-message {
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
animation: flash-pulse 2s infinite;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.flash-success {
|
|
background: linear-gradient(to right, var(--pride-green), var(--pride-cyan));
|
|
color: white;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.flash-error {
|
|
background: linear-gradient(to right, var(--pride-red), var(--pride-pink));
|
|
color: white;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.flash-warning {
|
|
background: linear-gradient(to right, var(--pride-yellow), var(--pride-orange));
|
|
color: black;
|
|
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.flash-info {
|
|
background: linear-gradient(to right, var(--pride-blue), var(--pride-lavender));
|
|
color: white;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes rainbow-shift {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes flash-pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|