mep
This commit is contained in:
parent
e958163a4a
commit
b8a5a1ff58
SSH key fingerprint:
SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
79 changed files with 15113 additions and 0 deletions
488
public/assets/css/styles.css
Normal file
488
public/assets/css/styles.css
Normal file
|
|
@ -0,0 +1,488 @@
|
|||
/* 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);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue