Auto merge dev → main (#1258)
* meow * updated it * meow * add avg TTL footer to /comp + extend freshness window to 90m when servers slow --------- Co-authored-by: Clippii <clippii@protonmail.com>
This commit is contained in:
NotSoToothless
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,325 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom Fonts */
|
||||
@font-face {
|
||||
font-family: 'skyquakesymbols';
|
||||
src: url('/Fonts/symbols_skyquake.ttf');
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply m-0 p-0 box-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans leading-relaxed text-white overflow-x-hidden min-h-screen antialiased;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/toothless_face.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* ========================================
|
||||
COLOR SCHEME:
|
||||
- Background: Dark earth green (#1C1E1D) to graphite (#0A0B0A)
|
||||
- Accent/Primary text: Cream (#F5F5DC)
|
||||
- Secondary/Muted text: Mint green (#90EE90)
|
||||
======================================== */
|
||||
|
||||
/* Vehicle, Squadron, and Player names use custom font */
|
||||
.vehicle-name,
|
||||
.squadron-name,
|
||||
.squadron-tag,
|
||||
.player-name,
|
||||
.player-nick {
|
||||
@apply font-skyquake;
|
||||
}
|
||||
|
||||
/* Primary Button - Cream gradient */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 font-bold rounded-lg
|
||||
transition-all duration-300 relative overflow-hidden;
|
||||
background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
|
||||
color: #1E1E1E;
|
||||
box-shadow: 0 4px 20px rgba(245, 245, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 8px 25px rgba(245, 245, 220, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Navigation callouts */
|
||||
.nav-premium {
|
||||
color: #f4d35e;
|
||||
}
|
||||
|
||||
.nav-premium:hover {
|
||||
color: #ffe08a;
|
||||
}
|
||||
|
||||
.nav-rainbow {
|
||||
color: #ff9b8a;
|
||||
}
|
||||
|
||||
.nav-rainbow:hover {
|
||||
color: #ffc0b4;
|
||||
}
|
||||
|
||||
.nav-donate {
|
||||
background: linear-gradient(90deg, #ff7a7a 0%, #ffd166 25%, #90ee90 50%, #8fd3ff 75%, #c79bff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.nav-donate:hover {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
.nav-donate i {
|
||||
-webkit-text-fill-color: initial;
|
||||
color: #ffd166;
|
||||
}
|
||||
|
||||
/* Secondary Button */
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3
|
||||
bg-white/10 text-white font-semibold rounded-lg border-2 border-primary-400/50
|
||||
transition-all duration-300 backdrop-blur-sm
|
||||
hover:-translate-y-0.5 hover:bg-primary-400/20 hover:border-primary-400
|
||||
active:translate-y-0;
|
||||
}
|
||||
|
||||
/* Feature Card - used on homepage */
|
||||
.feature-card {
|
||||
background: linear-gradient(135deg, rgba(62, 78, 62, 0.2) 0%, rgba(44, 44, 44, 0.2) 100%);
|
||||
border: 1px solid rgba(245, 245, 220, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-3px);
|
||||
background: linear-gradient(135deg, rgba(62, 78, 62, 0.3) 0%, rgba(44, 44, 44, 0.3) 100%);
|
||||
border-color: rgba(144, 238, 144, 0.3);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card-hover:hover i {
|
||||
color: #F5F5DC;
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Search Input - Glass effect */
|
||||
.search-input-glass {
|
||||
background: rgba(30, 30, 30, 0.6);
|
||||
border: 1px solid rgba(245, 245, 220, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.search-input-glass:focus {
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
border-color: rgba(144, 238, 144, 0.4);
|
||||
box-shadow: 0 0 0 2px rgba(144, 238, 144, 0.1), inset 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Card Component */
|
||||
.card {
|
||||
@apply bg-dark-100/80 backdrop-blur-md rounded-2xl border border-primary-400/20
|
||||
p-6 transition-all duration-300
|
||||
hover:border-primary-400/40 hover:shadow-lg hover:shadow-primary-400/10;
|
||||
}
|
||||
|
||||
/* Glass Card (more transparent) */
|
||||
.glass-card {
|
||||
@apply bg-dark-100/60 backdrop-blur-xl rounded-2xl border border-primary-400/20
|
||||
p-6 transition-all duration-300;
|
||||
}
|
||||
|
||||
/* Stat Card */
|
||||
.stat-card {
|
||||
@apply card text-center relative overflow-hidden
|
||||
hover:-translate-y-1 hover:border-primary-400;
|
||||
}
|
||||
|
||||
/* Input Field */
|
||||
.input-field {
|
||||
@apply w-full px-4 py-3 bg-dark-200/80 border-2 border-primary-400/30
|
||||
rounded-lg text-white placeholder-white/50
|
||||
transition-all duration-300 backdrop-blur-sm
|
||||
focus:outline-none focus:border-primary-400 focus:shadow-lg focus:shadow-primary-400/20;
|
||||
}
|
||||
|
||||
/* Select Dropdown */
|
||||
.select-field {
|
||||
@apply input-field cursor-pointer appearance-none pr-10;
|
||||
background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2339ff14%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3c/polyline%3e%3c/svg%3e');
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 1.25rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
.data-table {
|
||||
@apply w-full border-collapse bg-dark-200/80 rounded-xl overflow-hidden
|
||||
shadow-xl border border-primary-400/10;
|
||||
}
|
||||
|
||||
.data-table thead {
|
||||
@apply bg-gradient-to-r from-primary-400/20 to-primary-500/20;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
@apply px-4 py-3 text-white font-semibold text-center border-b-2 border-primary-400/30;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
@apply px-4 py-3 text-center text-white/90 border-b border-primary-400/10;
|
||||
}
|
||||
|
||||
.data-table tbody tr {
|
||||
@apply transition-all duration-300 hover:bg-gradient-to-r hover:from-primary-400/10
|
||||
hover:to-primary-500/10 hover:scale-[1.01];
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.spinner {
|
||||
@apply border-4 border-primary-400/30 border-t-primary-400 rounded-full
|
||||
w-10 h-10 animate-spin mx-auto;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold
|
||||
bg-primary-400/10 text-primary-400 border border-primary-400/30;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
@apply fixed top-0 w-full bg-dark-300/95 backdrop-blur-md z-50
|
||||
border-b border-primary-400/20 transition-all duration-300;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container-custom {
|
||||
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* Section Title */
|
||||
.section-title {
|
||||
@apply text-4xl font-bold text-center mb-4 bg-gradient-to-r from-primary-400 via-primary-500 to-primary-400
|
||||
bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient-shift;
|
||||
}
|
||||
|
||||
/* Link Hover Effect */
|
||||
.link-hover {
|
||||
@apply relative text-white transition-colors duration-300
|
||||
hover:text-primary-400
|
||||
after:content-[''] after:absolute after:bottom-0 after:left-0
|
||||
after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-primary-400 after:to-primary-500
|
||||
after:transition-all after:duration-300
|
||||
hover:after:w-full;
|
||||
}
|
||||
|
||||
/* Date Filter Styles */
|
||||
.date-filter-container {
|
||||
@apply glass-card space-y-4;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
@apply px-4 py-2 rounded-lg border border-primary-400/30 bg-dark-100/50
|
||||
text-white font-medium transition-all duration-300
|
||||
hover:border-primary-400 hover:bg-primary-400/10
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-400/50;
|
||||
}
|
||||
|
||||
.filter-button-active {
|
||||
@apply filter-button border-primary-400 bg-primary-400/20 text-primary-400 shadow-lg shadow-primary-400/20;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Text Gradient */
|
||||
.text-gradient {
|
||||
@apply bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600
|
||||
bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Glass Effect */
|
||||
.glass {
|
||||
@apply bg-white/5 backdrop-blur-md;
|
||||
}
|
||||
|
||||
/* Glow Effect */
|
||||
.glow {
|
||||
@apply shadow-lg shadow-primary-400/30;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
@apply bg-dark-200 rounded;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
@apply bg-primary-400/30 rounded hover:bg-primary-400/50;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional custom animations */
|
||||
@keyframes gradientShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
@keyframes scrollRight {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* Row link overlay - makes entire table row clickable with native right-click support */
|
||||
tr.row-link {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
tr.row-link a.row-link-overlay::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
tr.row-link td a:not(.row-link-overlay),
|
||||
tr.row-link td button,
|
||||
tr.row-link td [tabindex],
|
||||
tr.row-link td input,
|
||||
tr.row-link td select,
|
||||
tr.row-link td textarea {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user