Files
frontend/app/assets/css/style.css
T

379 lines
7.0 KiB
CSS

:root {
--visione-primary: #06c;
--visione-primary-dark: #17324d;
--visione-text-muted: #455b71;
--visione-text-body: #17324d;
--visione-text-soft: #455b71;
--visione-success: #008758;
--visione-warning: #a66300;
--visione-danger: #d9364f;
--visione-info: #2f80ed;
--visione-light-bg: #f0f6fc;
--visione-home-hero-bg: var(--visione-light-bg);
--visione-font-sans: "Titillium Web", Arial, sans-serif;
--visione-font-mono: "Roboto Mono", monospace;
}
html,
body {
color: var(--visione-text-body);
font-family: var(--visione-font-sans);
font-size: 1rem;
line-height: 1.5;
}
button,
input,
select,
textarea {
font-family: var(--visione-font-sans);
}
select,
.form-select {
background-color: #f7f9fc !important;
border-color: #c5d0db !important;
color: var(--visione-text-body) !important;
}
.form-select:focus,
select:focus {
background-color: #fff !important;
border-color: var(--visione-primary) !important;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15) !important;
}
code,
kbd,
pre,
samp {
font-family: var(--visione-font-mono);
}
a {
text-decoration: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.callout-title {
color: var(--visione-primary-dark);
font-family: var(--visione-font-sans);
line-height: 1.2;
}
p,
li,
td,
th,
label,
small,
.card-text,
.card .card-body .card-text,
.callout p,
.form-text {
color: inherit;
font-family: var(--visione-font-sans) !important;
}
.lead {
color: var(--visione-text-soft);
font-size: 1.125rem;
line-height: 1.55;
}
.text-muted,
.text-secondary {
color: var(--visione-text-soft) !important;
}
.text-dark {
color: var(--visione-text-body) !important;
}
.text-primary,
.category.text-primary {
color: var(--visione-primary) !important;
}
.text-success,
.category.text-success {
color: var(--visione-success) !important;
}
.text-warning {
color: var(--visione-warning) !important;
}
.text-danger {
color: var(--visione-danger) !important;
}
.text-info {
color: var(--visione-info) !important;
}
.display-1 {
font-size: clamp(3rem, 5vw, 4.75rem);
line-height: 1;
}
.display-3 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
line-height: 1;
}
.display-6 {
font-size: clamp(1.75rem, 2.4vw, 2.25rem);
line-height: 1.1;
}
.bg-light {
background-color: var(--visione-home-hero-bg) !important;
}
html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-focus-mouse="true"], .navbar .navbar-collapsable .navbar-nav li.nav-item button.nav-link[data-focus-mouse="true"] {
border-color: inherit !important
}
.it-hero-wrapper.it-primary,
.it-hero-wrapper.it-primary-bg {
background: var(--visione-primary) !important;
color: #fff;
}
.it-hero-wrapper.it-primary h1,
.it-hero-wrapper.it-primary p,
.it-hero-wrapper.it-primary-bg h1,
.it-hero-wrapper.it-primary-bg p {
color: #fff !important;
}
.it-hero-wrapper .container {
min-height: 240px;
display: flex;
align-items: center;
}
.it-hero-wrapper.hero-compact .container {
min-height: 132px;
}
.it-hero-wrapper .container > .row {
width: 100%;
justify-content: center;
}
.it-hero-wrapper .it-hero-text-wrapper {
max-width: 820px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.it-hero-wrapper .it-hero-text-wrapper h1,
.it-hero-wrapper .it-hero-text-wrapper p {
width: 100%;
}
.it-hero-wrapper.bg-light .it-hero-text-wrapper p {
font-size: 1.3rem;
}
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6 {
color: var(--visione-primary-dark) !important;
}
.bg-light p,
.bg-light .lead,
.bg-light .text-muted,
.bg-light .text-secondary {
color: var(--visione-text-soft) !important;
}
.icon {
color: currentColor;
fill: currentColor;
flex-shrink: 0;
}
.icon-primary {
color: var(--visione-primary) !important;
fill: var(--visione-primary) !important;
}
.icon-success {
color: var(--visione-success) !important;
fill: var(--visione-success) !important;
}
.icon-warning {
color: var(--visione-warning) !important;
fill: var(--visione-warning) !important;
}
.icon-danger {
color: var(--visione-danger) !important;
fill: var(--visione-danger) !important;
}
.icon-info {
color: var(--visione-info) !important;
fill: var(--visione-info) !important;
}
.btn-primary .icon:not([class*="icon-"]),
.badge[class*="bg-"] .icon:not([class*="icon-"]),
.rounded-circle[class*="bg-"] .icon:not([class*="icon-"]) {
color: #fff;
fill: #fff;
}
.btn-xs {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.55rem;
--bs-btn-font-size: 0.875rem;
line-height: 1.2;
}
.btn-icon.btn-xs {
align-items: center;
display: inline-flex;
height: 2rem;
justify-content: center;
padding: 0;
width: 2rem;
}
.report-table-wrapper {
border: 1px solid #dfe4ea;
border-radius: 4px;
}
.report-table thead th {
background: #f7f9fa;
color: var(--visione-text-soft);
font-size: 0.8125rem;
font-weight: 700;
padding: 0.65rem 0.75rem;
text-transform: uppercase;
}
.report-table tbody td {
font-size: 0.9375rem;
padding: 0.75rem;
vertical-align: middle;
}
.report-table-id {
color: var(--visione-primary-dark);
font-weight: 700;
white-space: nowrap;
}
.report-address {
color: var(--visione-text-soft);
display: inline-block;
max-width: min(36vw, 26rem);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
.dashboard-stat {
border-left: 4px solid var(--visione-primary);
}
.dashboard-stat .stat-value {
color: var(--visione-primary-dark);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
}
.page-shell {
padding-block: 3rem;
}
.page-shell-header {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
margin-bottom: 2rem;
}
.page-shell-title {
margin-bottom: 0.25rem;
}
.page-shell-subtitle {
color: var(--visione-text-soft);
margin-bottom: 0;
max-width: 48rem;
}
.surface-card {
background: #fff;
border: 1px solid #dfe4ea;
border-radius: 4px;
}
.it-header-wrapper .header-slim-right-zone .btn .rounded-icon,
.it-header-wrapper .header-slim-right-zone .btn .rounded-icon .icon {
}
.it-footer,
.it-footer a,
.it-footer h2,
.it-footer h3,
.it-footer h4,
.it-footer .it-brand-text,
.it-footer .it-brand-text h2,
.it-footer .it-brand-text h3,
.it-footer .member-name,
.it-footer .icon {
color: #fff !important;
fill: #fff !important;
}
@media (max-width: 767.98px) {
.page-shell {
padding-block: 2rem;
}
.it-hero-wrapper .container {
min-height: 220px;
}
.it-hero-wrapper .it-hero-text-wrapper {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.report-address {
max-width: 14rem;
}
}