feat: add navbar component to the application (CAS-32) #18
@ -2,15 +2,15 @@
|
|||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
--color-primary-900: rgb(26, 44, 56);
|
--color-primary-900: rgb(26, 44, 56);
|
||||||
--color-primary-800: #1a1a1a;
|
--color-primary-800: rgb(30, 48, 60);
|
||||||
--color-primary-600: #2d2d2d;
|
--color-primary-600: rgb(34, 52, 64);
|
||||||
|
|
||||||
--color-accent-blue: #3b82f6;
|
--color-accent-blue: #3b82f6;
|
||||||
--color-accent-green: #22c55e;
|
--color-accent-green: #22c55e;
|
||||||
|
|
||||||
--color-gold: #ffd700;
|
--color-gold: #ffd700;
|
||||||
--color-gold-light: #ffe44d;
|
--color-gold-light: #ffe44d;
|
||||||
|
|
||||||
--color-gray-100: #f3f4f6;
|
--color-gray-100: #f3f4f6;
|
||||||
--color-gray-200: #e5e7eb;
|
--color-gray-200: #e5e7eb;
|
||||||
--color-gray-300: #d1d5db;
|
--color-gray-300: #d1d5db;
|
||||||
@ -18,53 +18,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-primary-900 text-gray-100;
|
@apply bg-primary-800 text-gray-100;
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
@apply px-4 py-2 rounded font-medium transition-all duration-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-primary {
|
|
||||||
@apply bg-accent-blue text-gray-100 hover:bg-blue-600 active:bg-blue-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-secondary {
|
|
||||||
@apply bg-gray-400 text-gray-100 hover:bg-gray-300 active:bg-gray-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-success {
|
|
||||||
@apply bg-accent-green text-primary-900 hover:opacity-90 active:opacity-80;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-disabled {
|
|
||||||
@apply bg-gray-200 text-gray-400 cursor-not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
@apply text-gray-100 hover:text-gold-light transition-colors duration-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link-active {
|
|
||||||
@apply text-gold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
@apply bg-primary-800 rounded-lg shadow-lg p-6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-primary {
|
|
||||||
@apply bg-gradient-to-r from-primary-800 to-primary-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover {
|
|
||||||
@apply shadow-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:active {
|
|
||||||
@apply scale-95;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:focus {
|
|
||||||
@apply outline-none ring-2 ring-offset-2 ring-accent-blue;
|
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user