391 lines
8.5 KiB
CSS
391 lines
8.5 KiB
CSS
/**
|
|
* NetGescon Design System
|
|
* Brand Identity e Stili Personalizzati
|
|
* Versione: 2.1.0
|
|
*/
|
|
|
|
/* ===============================================
|
|
COLORI BRAND NETGESCON
|
|
=============================================== */
|
|
:root {
|
|
/* Colori Primari */
|
|
--netgescon-primary: #2563eb;
|
|
/* Blu professionale */
|
|
--netgescon-primary-dark: #1d4ed8;
|
|
--netgescon-primary-light: #3b82f6;
|
|
|
|
/* Colori Secondari */
|
|
--netgescon-secondary: #10b981;
|
|
/* Verde */
|
|
--netgescon-secondary-dark: #059669;
|
|
--netgescon-secondary-light: #34d399;
|
|
|
|
/* Colori Accento */
|
|
--netgescon-accent: #f59e0b;
|
|
/* Arancione */
|
|
--netgescon-accent-dark: #d97706;
|
|
--netgescon-accent-light: #fbbf24;
|
|
|
|
/* Colori Status */
|
|
--netgescon-success: #10b981;
|
|
/* Verde */
|
|
--netgescon-warning: #f59e0b;
|
|
/* Arancione */
|
|
--netgescon-danger: #ef4444;
|
|
/* Rosso */
|
|
--netgescon-info: #06b6d4;
|
|
/* Ciano */
|
|
|
|
/* Colori Neutri */
|
|
--netgescon-gray-50: #f8fafc;
|
|
--netgescon-gray-100: #f1f5f9;
|
|
--netgescon-gray-200: #e2e8f0;
|
|
--netgescon-gray-300: #cbd5e1;
|
|
--netgescon-gray-400: #94a3b8;
|
|
--netgescon-gray-500: #64748b;
|
|
--netgescon-gray-600: #475569;
|
|
--netgescon-gray-700: #334155;
|
|
--netgescon-gray-800: #1e293b;
|
|
--netgescon-gray-900: #0f172a;
|
|
|
|
/* Typography */
|
|
--netgescon-font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--netgescon-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
|
|
/* Shadows */
|
|
--netgescon-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--netgescon-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--netgescon-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--netgescon-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
|
/* Border Radius */
|
|
--netgescon-radius-sm: 0.125rem;
|
|
--netgescon-radius: 0.375rem;
|
|
--netgescon-radius-md: 0.5rem;
|
|
--netgescon-radius-lg: 0.75rem;
|
|
--netgescon-radius-xl: 1rem;
|
|
}
|
|
|
|
/* ===============================================
|
|
TYPOGRAPHY NETGESCON
|
|
=============================================== */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
body {
|
|
font-family: var(--netgescon-font-family);
|
|
background-color: var(--netgescon-gray-50);
|
|
color: var(--netgescon-gray-700);
|
|
}
|
|
|
|
.netgescon-title {
|
|
font-size: 2.25rem;
|
|
font-weight: 800;
|
|
color: var(--netgescon-primary);
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.netgescon-subtitle {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--netgescon-gray-800);
|
|
}
|
|
|
|
.netgescon-text {
|
|
color: var(--netgescon-gray-600);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===============================================
|
|
LAYOUT NETGESCON
|
|
=============================================== */
|
|
.netgescon-layout {
|
|
min-height: 100vh;
|
|
background-color: var(--netgescon-gray-50);
|
|
}
|
|
|
|
.netgescon-header {
|
|
background: linear-gradient(135deg, var(--netgescon-primary) 0%, var(--netgescon-primary-dark) 100%);
|
|
color: white;
|
|
padding: 1rem 1.5rem;
|
|
box-shadow: var(--netgescon-shadow-lg);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
.netgescon-sidebar {
|
|
background-color: var(--netgescon-gray-800);
|
|
width: 280px;
|
|
box-shadow: var(--netgescon-shadow-lg);
|
|
position: fixed;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
z-index: 30;
|
|
}
|
|
|
|
.netgescon-main {
|
|
margin-left: 280px;
|
|
padding: 2rem;
|
|
min-height: calc(100vh - 80px);
|
|
}
|
|
|
|
/* ===============================================
|
|
COMPONENTI NETGESCON
|
|
=============================================== */
|
|
|
|
/* Cards */
|
|
.netgescon-card {
|
|
background: white;
|
|
border-radius: var(--netgescon-radius-lg);
|
|
box-shadow: var(--netgescon-shadow);
|
|
padding: 1.5rem;
|
|
transition: all 0.2s ease-in-out;
|
|
border: 1px solid var(--netgescon-gray-200);
|
|
}
|
|
|
|
.netgescon-card:hover {
|
|
box-shadow: var(--netgescon-shadow-lg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.netgescon-card-header {
|
|
border-bottom: 1px solid var(--netgescon-gray-200);
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Dashboard Stats Cards */
|
|
.netgescon-stat-card {
|
|
background: white;
|
|
border-radius: var(--netgescon-radius-lg);
|
|
padding: 1.5rem;
|
|
box-shadow: var(--netgescon-shadow);
|
|
transition: all 0.2s ease-in-out;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.netgescon-stat-card:hover {
|
|
box-shadow: var(--netgescon-shadow-lg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.netgescon-stat-card.blue {
|
|
border-left-color: var(--netgescon-primary);
|
|
}
|
|
|
|
.netgescon-stat-card.green {
|
|
border-left-color: var(--netgescon-secondary);
|
|
}
|
|
|
|
.netgescon-stat-card.orange {
|
|
border-left-color: var(--netgescon-accent);
|
|
}
|
|
|
|
.netgescon-stat-card.red {
|
|
border-left-color: var(--netgescon-danger);
|
|
}
|
|
|
|
.netgescon-stat-card.cyan {
|
|
border-left-color: var(--netgescon-info);
|
|
}
|
|
|
|
/* Buttons */
|
|
.netgescon-btn {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: var(--netgescon-radius);
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s ease-in-out;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.netgescon-btn-primary {
|
|
background-color: var(--netgescon-primary);
|
|
color: white;
|
|
}
|
|
|
|
.netgescon-btn-primary:hover {
|
|
background-color: var(--netgescon-primary-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--netgescon-shadow-md);
|
|
}
|
|
|
|
.netgescon-btn-secondary {
|
|
background-color: var(--netgescon-secondary);
|
|
color: white;
|
|
}
|
|
|
|
.netgescon-btn-secondary:hover {
|
|
background-color: var(--netgescon-secondary-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--netgescon-shadow-md);
|
|
}
|
|
|
|
/* Menu Sidebar */
|
|
.netgescon-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
margin: 0.25rem;
|
|
border-radius: var(--netgescon-radius);
|
|
color: var(--netgescon-gray-300);
|
|
text-decoration: none;
|
|
transition: all 0.2s ease-in-out;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.netgescon-menu-item:hover {
|
|
background-color: var(--netgescon-gray-700);
|
|
color: white;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.netgescon-menu-item.active {
|
|
background-color: var(--netgescon-primary);
|
|
color: white;
|
|
}
|
|
|
|
.netgescon-menu-item i {
|
|
width: 20px;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
/* Logo */
|
|
.netgescon-logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.netgescon-logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(135deg, var(--netgescon-accent) 0%, var(--netgescon-secondary) 100%);
|
|
border-radius: var(--netgescon-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.netgescon-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--netgescon-gray-400);
|
|
font-size: 0.875rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.netgescon-breadcrumb a {
|
|
color: var(--netgescon-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.netgescon-breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.netgescon-sidebar {
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.netgescon-sidebar.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.netgescon-main {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* ===============================================
|
|
ANIMATIONS
|
|
=============================================== */
|
|
@keyframes netgescon-fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.netgescon-fade-in {
|
|
animation: netgescon-fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
/* ===============================================
|
|
UTILITIES
|
|
=============================================== */
|
|
.netgescon-text-primary {
|
|
color: var(--netgescon-primary) !important;
|
|
}
|
|
|
|
.netgescon-text-secondary {
|
|
color: var(--netgescon-secondary) !important;
|
|
}
|
|
|
|
.netgescon-text-accent {
|
|
color: var(--netgescon-accent) !important;
|
|
}
|
|
|
|
.netgescon-text-success {
|
|
color: var(--netgescon-success) !important;
|
|
}
|
|
|
|
.netgescon-text-warning {
|
|
color: var(--netgescon-warning) !important;
|
|
}
|
|
|
|
.netgescon-text-danger {
|
|
color: var(--netgescon-danger) !important;
|
|
}
|
|
|
|
.netgescon-text-info {
|
|
color: var(--netgescon-info) !important;
|
|
}
|
|
|
|
.netgescon-bg-primary {
|
|
background-color: var(--netgescon-primary) !important;
|
|
}
|
|
|
|
.netgescon-bg-secondary {
|
|
background-color: var(--netgescon-secondary) !important;
|
|
}
|
|
|
|
.netgescon-bg-accent {
|
|
background-color: var(--netgescon-accent) !important;
|
|
}
|
|
|
|
.netgescon-bg-success {
|
|
background-color: var(--netgescon-success) !important;
|
|
}
|
|
|
|
.netgescon-bg-warning {
|
|
background-color: var(--netgescon-warning) !important;
|
|
}
|
|
|
|
.netgescon-bg-danger {
|
|
background-color: var(--netgescon-danger) !important;
|
|
}
|
|
|
|
.netgescon-bg-info {
|
|
background-color: var(--netgescon-info) !important;
|
|
} |