134 lines
2.9 KiB
CSS
134 lines
2.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--forge-yellow: #FFC407;
|
|
--forge-black: #000000;
|
|
--forge-dark: #111111;
|
|
--forge-gray: #1a1a1a;
|
|
--forge-gray-light: #2a2a2a;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
font-family: 'Montserrat', sans-serif;
|
|
background-color: var(--forge-black);
|
|
color: #ffffff;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--forge-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--forge-gray-light);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--forge-yellow);
|
|
}
|
|
|
|
/* Custom button styles */
|
|
.btn-primary {
|
|
@apply bg-forge-yellow text-black font-semibold px-6 py-3 rounded-lg hover:bg-yellow-400 transition-all duration-200;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-forge-gray-light text-white font-medium px-6 py-3 rounded-lg hover:bg-forge-gray transition-all duration-200 border border-gray-700;
|
|
}
|
|
|
|
/* Module card styling */
|
|
.module-card {
|
|
@apply bg-forge-gray rounded-xl p-6 border border-gray-800 hover:border-forge-yellow transition-all duration-300 cursor-pointer;
|
|
}
|
|
|
|
.module-card:hover {
|
|
box-shadow: 0 0 20px rgba(255, 196, 7, 0.15);
|
|
}
|
|
|
|
/* Input styling */
|
|
.input-field {
|
|
@apply w-full bg-forge-dark border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-forge-yellow transition-colors;
|
|
}
|
|
|
|
/* Dropdown styling */
|
|
.select-field {
|
|
@apply w-full bg-forge-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-forge-yellow transition-colors cursor-pointer;
|
|
}
|
|
|
|
/* File upload zone */
|
|
.upload-zone {
|
|
@apply border-2 border-dashed border-gray-600 rounded-xl p-8 text-center hover:border-forge-yellow transition-colors cursor-pointer;
|
|
}
|
|
|
|
.upload-zone.active {
|
|
@apply border-forge-yellow bg-forge-yellow/5;
|
|
}
|
|
|
|
/* Progress bar */
|
|
.progress-bar {
|
|
@apply h-2 bg-forge-dark rounded-full overflow-hidden;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
@apply h-full bg-forge-yellow transition-all duration-300;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.spinner {
|
|
@apply animate-spin rounded-full border-2 border-gray-600 border-t-forge-yellow;
|
|
}
|
|
|
|
/* Status badges */
|
|
.badge {
|
|
@apply px-3 py-1 rounded-full text-sm font-medium;
|
|
}
|
|
|
|
.badge-pending {
|
|
@apply bg-gray-700 text-gray-300;
|
|
}
|
|
|
|
.badge-processing {
|
|
@apply bg-blue-900/50 text-blue-400;
|
|
}
|
|
|
|
.badge-completed {
|
|
@apply bg-green-900/50 text-green-400;
|
|
}
|
|
|
|
.badge-failed {
|
|
@apply bg-red-900/50 text-red-400;
|
|
}
|
|
|
|
/* Drag-and-drop from carousel */
|
|
[data-file-drop-zone].drag-over {
|
|
@apply border-forge-yellow bg-forge-yellow/10 scale-105;
|
|
box-shadow: 0 0 30px rgba(255, 196, 7, 0.3);
|
|
}
|
|
|
|
[data-file-drop-zone] {
|
|
@apply transition-all duration-200;
|
|
}
|