NotSoToothless
326 lines
9.6 KiB
CSS
326 lines
9.6 KiB
CSS
@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;
|
|
}
|