restructure user side css to improve scalability
This commit is contained in:
parent
c506b7517d
commit
48d2e61d7c
|
|
@ -172,21 +172,13 @@ [data-bs-theme=light] {
|
|||
--bs-body-font-family: 'Poppins', sans-serif;
|
||||
--bs-font-sans-serif: 'Poppins', sans-serif;
|
||||
|
||||
/* B. FONT SIZES (Ukuran) */
|
||||
--fs-display: 2.5rem;
|
||||
/* Judul Besar (Dashboard Number) */
|
||||
--fs-h1: 2rem;
|
||||
/* Judul Halaman */
|
||||
--fs-h2: 1.5rem;
|
||||
/* Sub-judul / Card Title */
|
||||
--fs-h3: 1.25rem;
|
||||
/* Section Title */
|
||||
--fs-body: 1rem;
|
||||
/* Teks Normal (16px) */
|
||||
--fs-small: 0.875rem;
|
||||
/* Teks Kecil / Placeholder (14px) */
|
||||
--fs-tiny: 0.75rem;
|
||||
/* Caption sangat kecil (12px) */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
|
||||
/* C. FONT WEIGHTS (Ketebalan) */
|
||||
--fw-light: 300;
|
||||
|
|
@ -6455,9 +6447,9 @@ .tooltip {
|
|||
--bs-tooltip-zindex: 1080;
|
||||
--bs-tooltip-max-width: 200px;
|
||||
--bs-tooltip-padding-x: .5rem;
|
||||
--bs-tooltip-padding-y: .25rem;
|
||||
--bs-tooltip-padding-y: .2rem;
|
||||
--bs-tooltip-margin: 0;
|
||||
--bs-tooltip-font-size: .875rem;
|
||||
--bs-tooltip-font-size: .725rem;
|
||||
--bs-tooltip-color: #fff;
|
||||
--bs-tooltip-bg: #000;
|
||||
--bs-tooltip-border-radius: .25rem;
|
||||
|
|
@ -6467,10 +6459,11 @@ .tooltip {
|
|||
z-index: var(--bs-tooltip-zindex);
|
||||
display: block;
|
||||
margin: var(--bs-tooltip-margin);
|
||||
font-family: Nunito;
|
||||
font-family: var(--bs-font-sans-serif);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
/* font-size: xx-small; */
|
||||
/* line-height: 1.5; */
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
|
|
@ -22232,8 +22225,8 @@ .card .card-header {
|
|||
|
||||
.card .card-header h4,
|
||||
.card .card-header .h4 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -22248,12 +22241,12 @@ .card .card-content {
|
|||
|
||||
.card .card-body {
|
||||
margin-top: 0;
|
||||
padding: 1.5rem
|
||||
padding: 1rem
|
||||
}
|
||||
|
||||
.card .card-heading {
|
||||
color: #555;
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.card .card-img-overlay {
|
||||
|
|
@ -22823,7 +22816,7 @@ .modal.modal-borderless .modal-footer {
|
|||
}
|
||||
|
||||
#sidebar .sidebar-wrapper {
|
||||
left: -260px
|
||||
left: -270px
|
||||
}
|
||||
|
||||
#sidebar~#main {
|
||||
|
|
@ -22853,7 +22846,7 @@ #sidebar.active .sidebar-wrapper {
|
|||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
width: 260px;
|
||||
width: 270px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -22865,7 +22858,7 @@ .sidebar-wrapper {
|
|||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-header {
|
||||
padding: 2rem 2rem 1rem;
|
||||
padding: 2rem 2rem 0rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 700
|
||||
}
|
||||
|
|
@ -22886,23 +22879,25 @@ .sidebar-wrapper .menu {
|
|||
|
||||
.sidebar-wrapper .menu .sidebar-title {
|
||||
padding: 0 1rem;
|
||||
margin: 1.5rem 0 1rem;
|
||||
margin: 0.5rem 0 .5rem;
|
||||
font-size: 1rem;
|
||||
list-style: none;
|
||||
font-weight: 600;
|
||||
color: black
|
||||
font-weight: 500;
|
||||
color: black;
|
||||
border-bottom: 1px solid var(--bs-gray-200);
|
||||
}
|
||||
|
||||
.sidebar-wrapper .menu .sidebar-link {
|
||||
display: block;
|
||||
padding: .7rem 1rem;
|
||||
padding: .65rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
transition: all .5s;
|
||||
text-decoration: none;
|
||||
color: black
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-wrapper .menu .sidebar-link svg,
|
||||
|
|
@ -22915,7 +22910,7 @@ .sidebar-wrapper .menu .sidebar-link i:before {
|
|||
}
|
||||
|
||||
.sidebar-wrapper .menu .sidebar-link span {
|
||||
margin-left: 1rem
|
||||
margin-left: 0.7rem;
|
||||
}
|
||||
|
||||
.sidebar-wrapper .menu .sidebar-link:hover {
|
||||
|
|
@ -23527,10 +23522,18 @@ .page-item:last-child {
|
|||
}
|
||||
|
||||
.table td,
|
||||
.dataTable-table td,
|
||||
.dataTable-table td {
|
||||
vertical-align: middle !important;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--fw-regular);
|
||||
}
|
||||
|
||||
|
||||
.table thead th,
|
||||
.dataTable-table thead th {
|
||||
vertical-align: middle !important
|
||||
vertical-align: middle !important;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
|
||||
.table:not(.table-borderless) thead th,
|
||||
|
|
@ -23553,7 +23556,7 @@ .table.table-lg tr td,
|
|||
.table-lg.dataTable-table tr td,
|
||||
.table.table-lg tr th,
|
||||
.table-lg.dataTable-table tr th {
|
||||
padding: 1.3rem
|
||||
padding: .6rem
|
||||
}
|
||||
|
||||
.table th {
|
||||
|
|
@ -23584,6 +23587,108 @@ .dataTables_length {
|
|||
margin-bottom: .5rem
|
||||
}
|
||||
|
||||
/* 1. Header (Judul & Titik Tiga) */
|
||||
.stat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stat-header .bi {
|
||||
line-height: 1;
|
||||
/* Samakan line-height dengan teks */
|
||||
display: flex;
|
||||
/* Pastikan ikon behave sebagai kotak flex */
|
||||
align-items: center;
|
||||
/* Tengahkan isi ikon */
|
||||
}
|
||||
|
||||
/* 2. Label Judul (Abu-abu kecil) */
|
||||
.stat-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: black;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 3. Body (Wadah Icon & Angka) */
|
||||
.stat-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* 4. Kotak Icon (Teal Default) */
|
||||
.stat-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-color: #3f8c86;
|
||||
/* Teal */
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
margin-right: .6rem;
|
||||
|
||||
/* Flexbox Parent */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* --- INI BAGIAN YANG AKU KEMBALIKAN (BIAR LURUS) --- */
|
||||
.stat-icon i,
|
||||
.stat-icon .bi {
|
||||
font-size: 16px;
|
||||
|
||||
/* Properti wajib biar icon ga miring/turun */
|
||||
line-height: 1 !important;
|
||||
vertical-align: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
/* Balik lagi */
|
||||
justify-content: center !important;
|
||||
/* Balik lagi */
|
||||
margin: 0 !important;
|
||||
/* Balik lagi */
|
||||
padding: 0 !important;
|
||||
/* Balik lagi */
|
||||
}
|
||||
|
||||
/* 5. Angka Utama */
|
||||
.stat-count {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: black;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 6. Subtext Bawah */
|
||||
.stat-subtext {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--bs-gray-700);
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
|
||||
/* Utilitas */
|
||||
.menu-dots {
|
||||
cursor: pointer;
|
||||
color: var(--bs-gray-600);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.stat-percent {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.stat-month {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--bs-gray-700);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.progress.progress-primary {
|
||||
overflow: visible
|
||||
}
|
||||
|
|
@ -23762,9 +23867,10 @@ #main-content {
|
|||
}
|
||||
|
||||
|
||||
.page-heading h3,
|
||||
.page-heading .page-title,
|
||||
.page-heading .h3 {
|
||||
font-weight: 700
|
||||
font-weight: var(--fw-medium);
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.page-title-headings {
|
||||
|
|
|
|||
Loading…
Reference in New Issue