473 lines
13 KiB
CSS
473 lines
13 KiB
CSS
:root,
|
|
[data-bs-theme="light"] {
|
|
--bs-nav-link-font-size: 0.7375rem;
|
|
--bg-border-color :#f8f6f6
|
|
}
|
|
.offcanvas.offcanvas-wide {
|
|
width: 700px !important; /* adjust as needed */
|
|
}
|
|
.sticky-section {
|
|
position: sticky;
|
|
top: var(--sticky-top, 0px) !important;
|
|
z-index: 1025;
|
|
}
|
|
.form-control-md {
|
|
min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
|
|
padding: 0.18rem 0.60rem;
|
|
font-size: 0.875rem; /* ~14px */
|
|
border-radius: var(--bs-border-radius);
|
|
}
|
|
|
|
.form-control-md::file-selector-button {
|
|
padding: 0.32rem 0.75rem;
|
|
margin: -0.32rem -0.75rem;
|
|
margin-inline-end: 0.75rem;
|
|
}
|
|
|
|
|
|
/* ===========================% Background_Colors %========================================================== */
|
|
.bg-light-primary {
|
|
background-color: color-mix(in srgb, var(--bs-primary) 10.4%, transparent);
|
|
border:var(--bs-primary-border-subtle)
|
|
}
|
|
.bg-light-secondary {
|
|
background-color: color-mix(in srgb, var(--bs-secondary) 10.4%, transparent);
|
|
}
|
|
.bg-light-danger {
|
|
background-color: color-mix(in srgb, var(--bs-danger) 10.4%, transparent);
|
|
}
|
|
.bg-light-success {
|
|
background-color: color-mix(in srgb, var(--bs-success) 10.4%, transparent);
|
|
}
|
|
|
|
.bg-light-info {
|
|
background-color: color-mix(in srgb, var(--bs-info) 10.4%, transparent);
|
|
}
|
|
.bg-light-warning {
|
|
background-color: color-mix(in srgb, var(--bs-warning) 10.4%, transparent);
|
|
}
|
|
|
|
.card-header {
|
|
padding: 0.5rem var(--bs-card-cap-padding-x);
|
|
}
|
|
.table_header_border {
|
|
border-bottom:2px solid var(--bs-table-border-color) ;
|
|
}
|
|
.text-gary-80 {
|
|
color:var(--bs-gray-500)
|
|
}
|
|
|
|
.text-royalblue{
|
|
color: #1796e3;
|
|
}
|
|
|
|
.text-md {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.text-md-b {
|
|
font-weight: normal;
|
|
}
|
|
.stepper-container {
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-horizontal {
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.timeline-point {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #dee2e6;
|
|
color: #6c757d;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
z-index: 2;
|
|
position: relative;
|
|
padding: 3px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.timeline-point.completed {
|
|
background-color: var(--bs-success);
|
|
color: #fff;
|
|
box-shadow: 0 0 5px rgba(25, 135, 84, 0.5);
|
|
}
|
|
|
|
.timeline-point.failed {
|
|
background-color: var(--bs-danger);
|
|
color: #fff;
|
|
box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
|
|
}
|
|
|
|
.timeline-point.active {
|
|
background-color: var(--bs-info);
|
|
color: #fff;
|
|
transform: scale(1.15);
|
|
box-shadow: 0 0 6px rgba(13, 202, 240, 0.5);
|
|
}
|
|
|
|
.timeline-line-horizontal {
|
|
content: "";
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: #dee2e6;
|
|
z-index: 1;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* Make line green for completed sections */
|
|
.timeline-item.completed ~ .timeline-line-horizontal {
|
|
background-color: var(--bs-success);
|
|
}
|
|
|
|
/* Optional: subtle pulse for active step */
|
|
.timeline-point.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--bs-info);
|
|
animation: pulse 1.5s infinite;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
70% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.text-xxs { font-size: 0.55rem; } /* 8px */
|
|
.text-xs { font-size: 0.75rem; } /* 12px */
|
|
.text-sm { font-size: 0.875rem; } /* 14px */
|
|
.text-base { font-size: 1rem; } /* 16px */
|
|
.text-lg { font-size: 1.125rem; } /* 18px */
|
|
.text-xl { font-size: 1.25rem; } /* 20px */
|
|
.text-2xl { font-size: 1.5rem; } /* 24px */
|
|
.text-3xl { font-size: 1.875rem; } /* 30px */
|
|
.text-4xl { font-size: 2.25rem; } /* 36px */
|
|
.text-5xl { font-size: 3rem; } /* 48px */
|
|
.text-6xl { font-size: 3.75rem; } /* 60px */
|
|
.text-7xl { font-size: 4.5rem; } /* 72px */
|
|
.text-8xl { font-size: 6rem; } /* 96px */
|
|
.text-9xl { font-size: 8rem; } /* 128px */
|
|
|
|
|
|
/* */
|
|
|
|
.w-0 { width: 0px; }
|
|
.w-px { width: 1px; }
|
|
.w-1 { width: 0.25rem; } /* 4px */
|
|
.w-2 { width: 0.5rem; } /* 8px */
|
|
.w-3 { width: 0.75rem; } /* 12px */
|
|
.w-4 { width: 1rem; } /* 16px */
|
|
.w-5 { width: 1.25rem; } /* 20px */
|
|
.w-6 { width: 1.5rem; } /* 24px */
|
|
.w-8 { width: 2rem; } /* 32px */
|
|
.w-10 { width: 2.5rem; } /* 40px */
|
|
.w-12 { width: 3rem; } /* 48px */
|
|
.w-16 { width: 4rem; } /* 64px */
|
|
.w-20 { width: 5rem; } /* 80px */
|
|
.w-24 { width: 6rem; } /* 96px */
|
|
.w-32 { width: 8rem; } /* 128px */
|
|
.w-40 { width: 10rem; } /* 160px */
|
|
.w-48 { width: 12rem; } /* 192px */
|
|
.w-56 { width: 14rem; } /* 224px */
|
|
.w-64 { width: 16rem; } /* 256px */
|
|
.w-auto { width: auto; }
|
|
.w-full { width: 100%; }
|
|
.w-screen{ width: 100vw; }
|
|
.w-min { width: min-content; }
|
|
.w-max { width: max-content; }
|
|
|
|
|
|
|
|
.h-0 { height: 0px; }
|
|
.h-px { height: 1px; }
|
|
.h-1 { height: 0.25rem; } /* 4px */
|
|
.h-2 { height: 0.5rem; } /* 8px */
|
|
.h-3 { height: 0.75rem; } /* 12px */
|
|
.h-4 { height: 1rem; } /* 16px */
|
|
.h-5 { height: 1.25rem; } /* 20px */
|
|
.h-6 { height: 1.5rem; } /* 24px */
|
|
.h-8 { height: 2rem; } /* 32px */
|
|
.h-10 { height: 2.5rem; } /* 40px */
|
|
.h-12 { height: 3rem; } /* 48px */
|
|
.h-16 { height: 4rem; } /* 64px */
|
|
.h-20 { height: 5rem; } /* 80px */
|
|
.h-24 { height: 6rem; } /* 96px */
|
|
.h-32 { height: 8rem; } /* 128px */
|
|
.h-40 { height: 10rem; } /* 160px */
|
|
.h-48 { height: 12rem; } /* 192px */
|
|
.h-56 { height: 14rem; } /* 224px */
|
|
.h-64 { height: 16rem; } /* 256px */
|
|
.h-auto { height: auto; }
|
|
.h-full { height: 100%; }
|
|
.h-screen{ height: 100vh; }
|
|
.h-min { height: min-content; }
|
|
.h-max { height: max-content; }
|
|
|
|
.vh-50 {
|
|
height: 50vh !important;
|
|
}
|
|
|
|
|
|
|
|
/* ==========================
|
|
Base Font Sizes (mobile first)
|
|
========================== */
|
|
.text-xxs { font-size: 0.55rem; } /* 8px */
|
|
.text-xs { font-size: 0.75rem; } /* 12px */
|
|
.text-sm { font-size: 0.875rem; } /* 14px */
|
|
.text-base{ font-size: 1rem; } /* 16px */
|
|
.text-lg { font-size: 1.125rem; } /* 18px */
|
|
.text-xl { font-size: 1.25rem; } /* 20px */
|
|
.text-2xl { font-size: 1.5rem; } /* 24px */
|
|
.text-3xl { font-size: 1.875rem; } /* 30px */
|
|
.text-4xl { font-size: 2.25rem; } /* 36px */
|
|
.text-5xl { font-size: 3rem; } /* 48px */
|
|
.text-6xl { font-size: 3.75rem; } /* 60px */
|
|
.text-7xl { font-size: 4.5rem; } /* 72px */
|
|
.text-8xl { font-size: 6rem; } /* 96px */
|
|
.text-9xl { font-size: 8rem; } /* 128px */
|
|
|
|
/* ==========================
|
|
Base Heights
|
|
========================== */
|
|
.h-0 { height: 0; }
|
|
.h-px { height: 1px; }
|
|
.h-1 { height: 0.25rem; } /* 4px */
|
|
.h-2 { height: 0.5rem; } /* 8px */
|
|
.h-3 { height: 0.75rem; } /* 12px */
|
|
.h-4 { height: 1rem; } /* 16px */
|
|
.h-5 { height: 1.25rem; } /* 20px */
|
|
.h-6 { height: 1.5rem; } /* 24px */
|
|
.h-8 { height: 2rem; } /* 32px */
|
|
.h-10 { height: 2.5rem; } /* 40px */
|
|
.h-12 { height: 3rem; } /* 48px */
|
|
.h-16 { height: 4rem; } /* 64px */
|
|
.h-20 { height: 5rem; } /* 80px */
|
|
.h-24 { height: 6rem; } /* 96px */
|
|
.h-32 { height: 8rem; } /* 128px */
|
|
.h-40 { height: 10rem; } /* 160px */
|
|
.h-48 { height: 12rem; } /* 192px */
|
|
.h-56 { height: 14rem; } /* 224px */
|
|
.h-64 { height: 16rem; } /* 256px */
|
|
.h-70 { height: 20rem; } /* 256px */
|
|
.h-74 { max-height: 35rem; } /* 256px */
|
|
.h-full { height: 100%; }
|
|
|
|
.h-screen{ height: 100vh; }
|
|
|
|
/* ==========================
|
|
Base Widths
|
|
========================== */
|
|
.w-0 { width: 0; }
|
|
.w-px { width: 1px; }
|
|
.w-1 { width: 0.25rem; }
|
|
.w-2 { width: 0.5rem; }
|
|
.w-3 { width: 0.75rem; }
|
|
.w-4 { width: 1rem; }
|
|
.w-5 { width: 1.25rem; }
|
|
.w-6 { width: 1.5rem; }
|
|
.w-8 { width: 2rem; }
|
|
.w-10 { width: 2.5rem; }
|
|
.w-12 { width: 3rem; }
|
|
.w-16 { width: 4rem; }
|
|
.w-20 { width: 5rem; }
|
|
.w-24 { width: 6rem; }
|
|
.w-32 { width: 8rem; }
|
|
.w-40 { width: 10rem; }
|
|
.w-48 { width: 12rem; }
|
|
.w-56 { width: 14rem; }
|
|
.w-64 { width: 16rem; }
|
|
.w-full { width: 100%; }
|
|
.w-screen{ width: 100vw; }
|
|
|
|
/* ==========================
|
|
Responsive Variants
|
|
========================== */
|
|
@media (min-width: 576px) { /* sm */
|
|
/* Font */
|
|
.text-xxs-sm { font-size: 0.55rem; }
|
|
.text-xs-sm { font-size: 0.75rem; }
|
|
.text-sm-sm { font-size: 0.875rem; }
|
|
.text-base-sm{ font-size: 1rem; }
|
|
.text-lg-sm { font-size: 1.125rem; }
|
|
.text-xl-sm { font-size: 1.25rem; }
|
|
.text-2xl-sm{ font-size: 1.5rem; }
|
|
|
|
/* Height */
|
|
.h-1-sm{ height: 0.25rem; }
|
|
.h-2-sm{ height: 0.5rem; }
|
|
.h-3-sm{ height: 0.75rem; }
|
|
.h-4-sm{ height: 1rem; }
|
|
.h-5-sm{ height: 1.25rem; }
|
|
.h-6-sm{ height: 1.5rem; }
|
|
.h-8-sm{ height: 2rem; }
|
|
.h-10-sm{ height: 2.5rem; }
|
|
|
|
/* Width */
|
|
.w-1-sm{ width: 0.25rem; }
|
|
.w-2-sm{ width: 0.5rem; }
|
|
.w-3-sm{ width: 0.75rem; }
|
|
.w-4-sm{ width: 1rem; }
|
|
.w-5-sm{ width: 1.25rem; }
|
|
.w-6-sm{ width: 1.5rem; }
|
|
.w-8-sm{ width: 2rem; }
|
|
.w-10-sm{ width: 2.5rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) { /* md */
|
|
/* Font */
|
|
.text-xxs-md { font-size: 0.55rem; }
|
|
.text-xs-md { font-size: 0.75rem; }
|
|
.text-sm-md { font-size: 0.875rem; }
|
|
.text-base-md{ font-size: 1rem; }
|
|
.text-lg-md { font-size: 1.125rem; }
|
|
.text-xl-md { font-size: 1.25rem; }
|
|
.text-2xl-md{ font-size: 1.5rem; }
|
|
|
|
/* Height */
|
|
.h-1-md{ height: 0.25rem; }
|
|
.h-2-md{ height: 0.5rem; }
|
|
.h-3-md{ height: 0.75rem; }
|
|
.h-4-md{ height: 1rem; }
|
|
.h-5-md{ height: 1.25rem; }
|
|
.h-6-md{ height: 1.5rem; }
|
|
.h-8-md{ height: 2rem; }
|
|
.h-10-md{ height: 2.5rem; }
|
|
|
|
/* Width */
|
|
.w-1-md{ width: 0.25rem; }
|
|
.w-2-md{ width: 0.5rem; }
|
|
.w-3-md{ width: 0.75rem; }
|
|
.w-4-md{ width: 1rem; }
|
|
.w-5-md{ width: 1.25rem; }
|
|
.w-6-md{ width: 1.5rem; }
|
|
.w-8-md{ width: 2rem; }
|
|
.w-10-md{ width: 2.5rem; }
|
|
}
|
|
|
|
@media (min-width: 992px) { /* lg */
|
|
/* Font */
|
|
.text-xxs-lg { font-size: 0.55rem; }
|
|
.text-xs-lg { font-size: 0.75rem; }
|
|
.text-sm-lg { font-size: 0.875rem; }
|
|
.text-base-lg{ font-size: 1rem; }
|
|
.text-lg-lg { font-size: 1.125rem; }
|
|
.text-xl-lg { font-size: 1.25rem; }
|
|
.text-2xl-lg{ font-size: 1.5rem; }
|
|
|
|
/* Height */
|
|
.h-1-lg{ height: 0.25rem; }
|
|
.h-2-lg{ height: 0.5rem; }
|
|
.h-3-lg{ height: 0.75rem; }
|
|
.h-4-lg{ height: 1rem; }
|
|
.h-5-lg{ height: 1.25rem; }
|
|
.h-6-lg{ height: 1.5rem; }
|
|
.h-8-lg{ height: 2rem; }
|
|
.h-10-lg{ height: 2.5rem; }
|
|
|
|
/* Width */
|
|
.w-1-lg{ width: 0.25rem; }
|
|
.w-2-lg{ width: 0.5rem; }
|
|
.w-3-lg{ width: 0.75rem; }
|
|
.w-4-lg{ width: 1rem; }
|
|
.w-5-lg{ width: 1.25rem; }
|
|
.w-6-lg{ width: 1.5rem; }
|
|
.w-8-lg{ width: 2rem; }
|
|
.w-10-lg{ width: 2.5rem; }
|
|
}
|
|
|
|
@media (min-width: 1200px) { /* xl */
|
|
/* Font */
|
|
.text-xxs-xl { font-size: 0.55rem; }
|
|
.text-xs-xl { font-size: 0.75rem; }
|
|
.text-sm-xl { font-size: 0.875rem; }
|
|
.text-base-xl{ font-size: 1rem; }
|
|
.text-lg-xl { font-size: 1.125rem; }
|
|
.text-xl-xl { font-size: 1.25rem; }
|
|
.text-2xl-xl{ font-size: 1.5rem; }
|
|
|
|
/* Height */
|
|
.h-1-xl{ height: 0.25rem; }
|
|
.h-2-xl{ height: 0.5rem; }
|
|
.h-3-xl{ height: 0.75rem; }
|
|
.h-4-xl{ height: 1rem; }
|
|
.h-5-xl{ height: 1.25rem; }
|
|
.h-6-xl{ height: 1.5rem; }
|
|
.h-8-xl{ height: 2rem; }
|
|
.h-10-xl{ height: 2.5rem; }
|
|
|
|
/* Width */
|
|
.w-1-xl{ width: 0.25rem; }
|
|
.w-2-xl{ width: 0.5rem; }
|
|
.w-3-xl{ width: 0.75rem; }
|
|
.w-4-xl{ width: 1rem; }
|
|
.w-5-xl{ width: 1.25rem; }
|
|
.w-6-xl{ width: 1.5rem; }
|
|
.w-8-xl{ width: 2rem; }
|
|
.w-10-xl{ width: 2.5rem; }
|
|
}
|
|
|
|
|
|
/* ------------------------Text------------------------- */
|
|
@media (min-width: 576px) {
|
|
.fs-sm-1 { font-size: calc(1.3rem + 1.6vw) !important; }
|
|
.fs-sm-2 { font-size: calc(1.2rem + 1.2vw) !important; }
|
|
.fs-sm-3 { font-size: calc(1.1rem + 0.8vw) !important; }
|
|
.fs-sm-4 { font-size: calc(1rem + 0.5vw) !important; }
|
|
.fs-sm-5 { font-size: 1.05rem !important; }
|
|
.fs-sm-6 { font-size: 0.9rem !important; }
|
|
|
|
.fs-sm-tiny { font-size: 72% !important; }
|
|
.fs-sm-big { font-size: 115% !important; }
|
|
.fs-sm-large { font-size: 155% !important; }
|
|
.fs-sm-xlarge { font-size: 175% !important; }
|
|
.fs-sm-xxlarge { font-size: calc(1.6rem + 3.5vw) !important; }
|
|
}
|
|
|
|
/* 💻 Medium devices (≥768px) */
|
|
@media (min-width: 768px) {
|
|
.fs-md-1 { font-size: calc(1.4125rem + 1.95vw) !important; }
|
|
.fs-md-2 { font-size: calc(1.3625rem + 1.35vw) !important; }
|
|
.fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; }
|
|
.fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; }
|
|
.fs-md-5 { font-size: 1.125rem !important; }
|
|
.fs-md-6 { font-size: 0.9375rem !important; }
|
|
|
|
.fs-md-tiny { font-size: 70% !important; }
|
|
.fs-md-big { font-size: 112% !important; }
|
|
.fs-md-large { font-size: 150% !important; }
|
|
.fs-md-xlarge { font-size: 170% !important; }
|
|
.fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
|
|
}
|