/*
================================================================================
SOMMARIO
================================================================================
1. VARIABILI CSS
- Variabili tema principale
- Variabili light mode
- Variabili dark mode (media query)
- Variabili dark mode (data-attribute)
2. CARD STYLES
- Stili base card
- Card variants
- List group in cards
- Card image overlay
3. TIPOGRAFIA
- Font-face declarations
- Dimensioni font responsive
- Stili base html/body
- Headings
4. COMPONENTI UI
- Buttons
- Form signin
- Navbar
- Tables (responsive)
5. UTILITIES
- Altezze custom
- Toast container
- Spinner/Loading
- Hoverable rows
- Classi background
6. ICONE
- Icon Getrix Plus
- Icon Getrix Business
- Varianti dark mode
7. RESPONSIVE
- Desktop (min-width: 769px)
- Mobile (max-width: 768px)
================================================================================
*/
/* ============================================================================
1. VARIABILI CSS
========================================================================= */
/* --- Variabili tema principale e light mode --- */
:root {
/* Colori brand */
--brand: #dc3545;
--white: #fff;
/* Colori secondari */
--secondary-light: #f9f9f9;
--secondary: #efefef;
--secondary-dark: #e6e6e6;
--secondary-darker: #d3d3d3;
--secondary-darkest: #b0b0b0;
/* Colori primari */
--primary: #007a91;
--primary-dark: #0a9ad7;
--primary-darker: #0e82b3;
--primary-darkest: #125a79;
/* Dimensioni layout */
--width-sidebar: 16rem;
--width-sidebar-closed: 3.2rem;
/* Light mode colors */
--bg-body: #f9f9f9;
--bg-surface: #fff;
--bg-card: #ffffff;
--text-primary: #212529;
--text-secondary: #6c757d;
--border-color: #dee2e6;
--shadow-color: rgba(0, 0, 0, 0.3);
--hover-bg: #f8f9fa;
/* Card specific */
--card-bg: #ffffff;
--card-border: #dee2e6;
--card-header-bg: #f8f9fa;
--card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* --- Dark mode automatico (system preference) --- */
@media (prefers-color-scheme: dark) {
:root {
--bg-body: #1a1a1a;
--bg-surface: #2d2d2d;
--bg-card: #2d2d2d;
--text-primary: #e9ecef;
--text-secondary: #adb5bd;
--border-color: #495057;
--shadow-color: rgba(0, 0, 0, 0.6);
--hover-bg: #3a3a3a;
/* Card specific dark mode */
--card-bg: #2d2d2d;
--card-border: #495057;
--card-header-bg: #3a3a3a;
--card-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
--card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
/* Adjust colors */
--primary: #0a9ad7;
--primary-dark: #4db8e8;
--secondary-light: #2d2d2d;
--secondary: #3a3a3a;
--secondary-dark: #495057;
}
}
/* --- Dark mode manuale (data-bs-theme attribute) --- */
[data-bs-theme="dark"] {
--bg-body: #1a1a1a;
--bg-surface: #2d2d2d;
--bg-card: #2d2d2d;
--text-primary: #e9ecef;
--text-secondary: #adb5bd;
--border-color: #495057;
--shadow-color: rgba(0, 0, 0, 0.6);
--hover-bg: #3a3a3a;
--card-bg: #2d2d2d;
--card-border: #495057;
--card-header-bg: #3a3a3a;
--card-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
--card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
--primary: #0a9ad7;
--primary-dark: #4db8e8;
--secondary-light: #2d2d2d;
--secondary: #3a3a3a;
--secondary-dark: #495057;
}
/* ============================================================================
2. CARD STYLES
========================================================================= */
/* --- Alternare colori per div diretti --- */
.bg-odd > div:nth-child(odd) {
background-color: var(--card-header-bg);
}
/* ============================================================================
3. TIPOGRAFIA
========================================================================= */
/* --- Font-face declarations --- */
@font-face {
font-family: UniCredit;
src: url(/fonts/UniCredit-Regular.eot);
src: url(/fonts/UniCredit-Regular.eot?#iefix) format("embedded-opentype"),
url(/fonts/UniCredit-Regular.woff) format("woff"),
url(/fonts/UniCredit-Regular.otf) format("opentype"),
url(/fonts/UniCredit-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: UniCredit-Bold;
src: url(/fonts/UniCredit-Bold.eot);
src: url(/fonts/UniCredit-Bold.eot?#iefix) format("embedded-opentype"),
url(/fonts/UniCredit-Bold.woff) format("woff"),
url(/fonts/UniCredit-Bold.otf) format("opentype"),
url(/fonts/UniCredit-Bold.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
/* --- Dimensioni font responsive --- */
html.font-size-small {
font-size: 14px;
}
html.font-size-normal {
font-size: 16px;
}
html.font-size-large {
font-size: 18px;
}
/* Responsive - mantieni le proporzioni su schermi piccoli */
@media (max-width: 768px) {
html.font-size-small {
font-size: 13px;
}
html.font-size-normal {
font-size: 15px;
}
html.font-size-large {
font-size: 17px;
}
}
/* --- Stili base html/body --- */
html,
body {
height: 100%;
background-color: var(--bg-body);
color: var(--text-primary);
}
/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
font-family: 'UniCredit-Bold';
color: var(--text-primary);
}
/* ============================================================================
4. COMPONENTI UI
========================================================================= */
/* --- Buttons --- */
.btn {
font-family: 'UniCredit-Bold', 'Arial Narrow', Arial, sans-serif;
min-width: 33.75px;
}
.btn-primary {
background-color: var(--primary);
border-color: var(--primary-darker);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--primary-dark);
border-color: var(--primary-darker);
}
/* --- Form signin --- */
.form-signin {
width: 100%;
max-width: 32rem;
margin: auto;
}
/* --- Brand utility --- */
.brand {
color: var(--brand);
}
/* --- Navbar --- */
.nav-link.active {
border-bottom: 1px solid var(--primary);
}
/* --- Tables (hover effect desktop) --- */
@media (min-width: 769px) {
tbody tr:hover {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
box-shadow: 0px 0px 5px var(--shadow-color);
-webkit-box-shadow: 0px 0px 5px var(--shadow-color);
-moz-box-shadow: 0px 0px 5px var(--shadow-color);
}
}
/* ============================================================================
5. UTILITIES
========================================================================= */
/* --- Altezze custom --- */
.boH-5 {
height: 5rem;
}
.boH-20 {
height: 20rem;
}
.boVH-100 {
height: calc(100vh - 220px);
}
/* --- Toast container --- */
.toast-container-bottom-end {
position: fixed;
bottom: 0;
right: 0;
padding: 1rem;
z-index: 9999;
}
/* --- Spinner/Loading overlay --- */
#spinner {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(26, 26, 26, 0.75);
z-index: 3040;
}
@media (prefers-color-scheme: dark) {
#spinner {
background: rgba(0, 0, 0, 0.85);
}
}
[data-bs-theme="dark"] #spinner {
background: rgba(0, 0, 0, 0.85);
}
/* --- Hoverable rows --- */
.hoverable-row:hover {
background-color: var(--hover-bg);
transition: background-color 0.2s ease-in-out;
cursor: pointer;
}
/* ============================================================================
6. ICONE
========================================================================= */
/* --- Icon Getrix Plus (light mode) --- */
.icon-getrix-plus {
width: 36px;
height: 36px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
/* Icon Getrix Plus (dark mode - system preference) */
@media (prefers-color-scheme: dark) {
.icon-getrix-plus {
background-image: url('data:image/svg+xml,');
}
}
/* Icon Getrix Plus (dark mode - data attribute) */
[data-bs-theme="dark"] .icon-getrix-plus {
background-image: url('data:image/svg+xml,');
}
/* --- Icon Getrix Business (light mode) --- */
.icon-getrix-business {
width: 36px;
height: 36px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
/* Icon Getrix Business (dark mode - system preference) */
@media (prefers-color-scheme: dark) {
.icon-getrix-business {
background-image: url('data:image/svg+xml,');
}
}
/* Icon Getrix Business (dark mode - data attribute) */
[data-bs-theme="dark"] .icon-getrix-business {
background-image: url('data:image/svg+xml,');
}
/* ============================================================================
7. RESPONSIVE
========================================================================= */
/* --- Desktop: Tables responsive behavior --- */
@media (min-width: 769px) {
tbody tr:hover {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
box-shadow: 0px 0px 5px var(--shadow-color);
-webkit-box-shadow: 0px 0px 5px var(--shadow-color);
-moz-box-shadow: 0px 0px 5px var(--shadow-color);
}
}
/* --- Mobile: Tables card-style layout --- */
@media (max-width: 768px) {
.table-responsive table,
.table-responsive thead,
.table-responsive tbody,
.table-responsive th,
.table-responsive td,
.table-responsive tr {
display: block;
width: 100%;
}
.table-responsive thead {
display: none;
}
.table-responsive tr {
margin-bottom: 1rem;
border-bottom: 2px solid var(--border-color);
}
.table-responsive td {
position: relative;
padding-left: 50%;
text-align: left;
border: none;
border-bottom: 1px solid var(--border-color);
}
.table-responsive td::before {
content: attr(data-label);
position: absolute;
left: 0;
width: 45%;
padding-left: 1rem;
font-weight: bold;
white-space: nowrap;
}
.table-responsive td:last-child {
padding-bottom: 1.5rem;
padding-top: 20px;
padding-left: 20px;
}
}
/* --- Breakpoint SM: ≥576px (Small devices - landscape phones) --- */
@media (min-width: 576px) {
.w-sm-0 { width: 0 !important; }
.w-sm-25 { width: 25% !important; }
.w-sm-50 { width: 50% !important; }
.w-sm-75 { width: 75% !important; }
.w-sm-100 { width: 100% !important; }
.w-sm-auto { width: auto !important; }
.w-sm-10 { width: 10% !important; }
.w-sm-20 { width: 20% !important; }
.w-sm-30 { width: 30% !important; }
.w-sm-33 { width: 33.333333% !important; }
.w-sm-40 { width: 40% !important; }
.w-sm-60 { width: 60% !important; }
.w-sm-66 { width: 66.666667% !important; }
.w-sm-70 { width: 70% !important; }
.w-sm-80 { width: 80% !important; }
.w-sm-90 { width: 90% !important; }
}
/* --- Breakpoint MD: ≥768px (Medium devices - tablets) --- */
@media (min-width: 768px) {
.w-md-0 { width: 0 !important; }
.w-md-25 { width: 25% !important; }
.w-md-50 { width: 50% !important; }
.w-md-75 { width: 75% !important; }
.w-md-100 { width: 100% !important; }
.w-md-auto { width: auto !important; }
.w-md-10 { width: 10% !important; }
.w-md-20 { width: 20% !important; }
.w-md-30 { width: 30% !important; }
.w-md-33 { width: 33.333333% !important; }
.w-md-40 { width: 40% !important; }
.w-md-60 { width: 60% !important; }
.w-md-66 { width: 66.666667% !important; }
.w-md-70 { width: 70% !important; }
.w-md-80 { width: 80% !important; }
.w-md-90 { width: 90% !important; }
}
/* --- Breakpoint LG: ≥992px (Large devices - desktops) --- */
@media (min-width: 992px) {
.w-lg-0 { width: 0 !important; }
.w-lg-25 { width: 25% !important; }
.w-lg-50 { width: 50% !important; }
.w-lg-75 { width: 75% !important; }
.w-lg-100 { width: 100% !important; }
.w-lg-auto { width: auto !important; }
.w-lg-10 { width: 10% !important; }
.w-lg-20 { width: 20% !important; }
.w-lg-30 { width: 30% !important; }
.w-lg-33 { width: 33.333333% !important; }
.w-lg-40 { width: 40% !important; }
.w-lg-60 { width: 60% !important; }
.w-lg-66 { width: 66.666667% !important; }
.w-lg-70 { width: 70% !important; }
.w-lg-80 { width: 80% !important; }
.w-lg-90 { width: 90% !important; }
}
/* --- Breakpoint XL: ≥1200px (Extra large devices - large desktops) --- */
@media (min-width: 1200px) {
.w-xl-0 { width: 0 !important; }
.w-xl-25 { width: 25% !important; }
.w-xl-50 { width: 50% !important; }
.w-xl-75 { width: 75% !important; }
.w-xl-100 { width: 100% !important; }
.w-xl-auto { width: auto !important; }
.w-xl-10 { width: 10% !important; }
.w-xl-20 { width: 20% !important; }
.w-xl-30 { width: 30% !important; }
.w-xl-33 { width: 33.333333% !important; }
.w-xl-40 { width: 40% !important; }
.w-xl-60 { width: 60% !important; }
.w-xl-66 { width: 66.666667% !important; }
.w-xl-70 { width: 70% !important; }
.w-xl-80 { width: 80% !important; }
.w-xl-90 { width: 90% !important; }
}
/* --- Breakpoint XXL: ≥1400px (Extra extra large devices) --- */
@media (min-width: 1400px) {
.w-xxl-0 { width: 0 !important; }
.w-xxl-25 { width: 25% !important; }
.w-xxl-50 { width: 50% !important; }
.w-xxl-75 { width: 75% !important; }
.w-xxl-100 { width: 100% !important; }
.w-xxl-auto { width: auto !important; }
.w-xxl-10 { width: 10% !important; }
.w-xxl-20 { width: 20% !important; }
.w-xxl-30 { width: 30% !important; }
.w-xxl-33 { width: 33.333333% !important; }
.w-xxl-40 { width: 40% !important; }
.w-xxl-60 { width: 60% !important; }
.w-xxl-66 { width: 66.666667% !important; }
.w-xxl-70 { width: 70% !important; }
.w-xxl-80 { width: 80% !important; }
.w-xxl-90 { width: 90% !important; }
}
/* --- Larghezze minime responsive --- */
.min-w-0 { min-width: 0 !important; }
.min-w-100 { min-width: 100% !important; }
@media (min-width: 576px) {
.min-w-sm-0 { min-width: 0 !important; }
.min-w-sm-100 { min-width: 100% !important; }
}
@media (min-width: 768px) {
.min-w-md-0 { min-width: 0 !important; }
.min-w-md-100 { min-width: 100% !important; }
}
@media (min-width: 992px) {
.min-w-lg-0 { min-width: 0 !important; }
.min-w-lg-100 { min-width: 100% !important; }
}
@media (min-width: 1200px) {
.min-w-xl-0 { min-width: 0 !important; }
.min-w-xl-100 { min-width: 100% !important; }
}
@media (min-width: 1400px) {
.min-w-xxl-0 { min-width: 0 !important; }
.min-w-xxl-100 { min-width: 100% !important; }
}
/* --- Larghezze massime responsive --- */
.max-w-100 { max-width: 100% !important; }
@media (min-width: 576px) {
.max-w-sm-100 { max-width: 100% !important; }
}
@media (min-width: 768px) {
.max-w-md-100 { max-width: 100% !important; }
}
@media (min-width: 992px) {
.max-w-lg-100 { max-width: 100% !important; }
}
@media (min-width: 1200px) {
.max-w-xl-100 { max-width: 100% !important; }
}
@media (min-width: 1400px) {
.max-w-xxl-100 { max-width: 100% !important; }
}
/* --- Larghezze viewport (vw) --- */
.vw-25 { width: 25vw !important; }
.vw-50 { width: 50vw !important; }
.vw-75 { width: 75vw !important; }
.vw-100 { width: 100vw !important; }
/* --- Larghezze fisse comuni --- */
.w-px-100 { width: 100px !important; }
.w-px-150 { width: 150px !important; }
.w-px-200 { width: 200px !important; }
.w-px-250 { width: 250px !important; }
.w-px-300 { width: 300px !important; }
.w-px-400 { width: 400px !important; }
.w-px-500 { width: 500px !important; }
/* Larghezze fisse responsive */
@media (min-width: 768px) {
.w-md-px-100 { width: 100px !important; }
.w-md-px-150 { width: 150px !important; }
.w-md-px-200 { width: 200px !important; }
.w-md-px-250 { width: 250px !important; }
.w-md-px-300 { width: 300px !important; }
.w-md-px-400 { width: 400px !important; }
.w-md-px-500 { width: 500px !important; }
}
/* ── Contenitori scrollabili ──────────────────── */
.scroll-container-sm {
max-height: 220px;
overflow-y: auto;
}
.scroll-container-md {
max-height: 340px;
overflow-y: auto;
}
.scroll-container-lg {
max-height: 360px;
overflow-y: auto;
}
/* ── Intestazioni tabella sticky ─────────────── */
.th-sticky {
position: sticky;
top: 0;
z-index: 2;
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
/* ── Layout tabella ───────────────────────────── */
.table-separate {
border-collapse: separate;
border-spacing: 0;
}
/* ── Badge testo piccolo ──────────────────────── */
.badge-xs {
font-size: .6rem;
}
.icon-xs {
font-size: .55rem;
line-height: 1;
}
/* ── Varie ────────────────────────────────────── */
.text-nowrap-cell {
white-space: nowrap;
}
/* Autorizzazioni partial */
.scroll-container-md {
max-height: 340px;
overflow-y: auto;
}
.th-sticky {
position: sticky;
top: 0;
z-index: 2;
background: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
.table-separate {
border-collapse: separate;
border-spacing: 0;
}
.badge-xs {
font-size: .6rem;
}
.icon-xs {
font-size: .55rem;
line-height: 1;
}
.text-nowrap-cell {
white-space: nowrap;
}