added base dashboard

This commit is contained in:
Bojan Kucera 2025-06-02 20:12:20 -04:00
parent 94e3c96ef6
commit 114c280734
29 changed files with 1022 additions and 950 deletions

View file

@ -1,280 +0,0 @@
/* You can add global styles to this file, and also import other style files */
@use '@angular/material' as mat;
@import "tailwindcss";
// Define a custom theme
$primary-palette: mat.m2-define-palette(mat.$m2-blue-palette);
$accent-palette: mat.m2-define-palette(mat.$m2-green-palette);
$warn-palette: mat.m2-define-palette(mat.$m2-red-palette);
$theme: mat.m2-define-light-theme((
color: (
primary: $primary-palette,
accent: $accent-palette,
warn: $warn-palette,
),
typography: mat.m2-define-typography-config(),
density: 0
));
@include mat.all-component-themes($theme);
/* Custom global styles for trading dashboard */
html, body {
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: #f5f5f5;
}
/* Layout utilities */
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.space-x-4 > * + * {
margin-left: 1rem;
}
.space-y-6 > * + * {
margin-top: 1.5rem;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.gap-6 {
gap: 1.5rem;
}
.p-6 {
padding: 1.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-4 {
margin-right: 1rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.w-64 {
width: 16rem;
}
.w-full {
width: 100%;
}
.min-h-screen {
min-height: 100vh;
}
.h-96 {
height: 24rem;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
/* Color utilities */
.text-blue-600 {
color: #2563eb;
}
.text-green-600 {
color: #16a34a;
}
.text-red-600 {
color: #dc2626;
}
.text-purple-600 {
color: #9333ea;
}
.text-gray-900 {
color: #111827;
}
.text-gray-600 {
color: #4b5563;
}
.text-gray-500 {
color: #6b7280;
}
.bg-gray-50 {
background-color: #f9fafb;
}
.bg-white {
background-color: #ffffff;
}
.bg-green-100 {
background-color: #dcfce7;
}
.text-green-800 {
color: #166534;
}
.bg-blue-100 {
background-color: #dbeafe;
}
.text-blue-800 {
color: #1e40af;
}
.bg-blue-50 {
background-color: #eff6ff;
}
.text-blue-700 {
color: #1d4ed8;
}
/* Border utilities */
.border-b {
border-bottom: 1px solid #e5e7eb;
}
.border-r {
border-right: 1px solid #e5e7eb;
}
.border-gray-200 {
border-color: #e5e7eb;
}
.border-gray-100 {
border-color: #f3f4f6;
}
/* Shadow utilities */
.shadow-sm {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
/* Hover utilities */
.hover\:bg-gray-100:hover {
background-color: #f3f4f6;
}
/* Responsive grid */
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Table styles */
.overflow-x-auto {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
table th,
table td {
padding: 0.75rem 1rem;
text-align: left;
}
table th {
font-weight: 500;
border-bottom: 1px solid #e5e7eb;
}
table td {
border-bottom: 1px solid #f3f4f6;
}
table tr:hover {
background-color: #f9fafb;
}