This commit is contained in:
Dwi Swandhana
2026-08-04 05:55:29 +07:00
parent 2bf4cac343
commit d369d3754b
15 changed files with 936 additions and 354 deletions
Regular → Executable
+87 -104
View File
@@ -158,7 +158,7 @@ File: Main Css File
}
#topnav .navbar-custom {
background-color: #FEF0E1;
background-color: #02c0ce;
}
#topnav .navbar-toggle {
@@ -174,7 +174,7 @@ File: Main Css File
}
#topnav .navbar-toggle:hover span {
background-color: #FEF0E1;
background-color: #313a46;
}
#topnav .navbar-toggle:focus {
@@ -182,7 +182,7 @@ File: Main Css File
}
#topnav .navbar-toggle:focus span {
background-color: #FEF0E1;
background-color: #313a46;
}
#topnav .navbar-toggle .lines {
@@ -240,72 +240,40 @@ File: Main Css File
}
#topnav .navigation-menu > li > a {
display: flex; /* Menggunakan Flexbox untuk alignment */
align-items: center; /* Membuat item (ikon + teks) rata tengah secara vertikal */
justify-content: center; /* Membuat item (ikon + teks) rata tengah secara horizontal */
color: #2F2F2F;
display: block;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
font-size: 16px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: all .5s ease;
transition: all .5s ease;
line-height: 20px;
padding: 20px 25px;
border-radius: 10px;
min-width: 130px; /* Atur lebar minimum untuk semua menu */
padding-left: 25px;
padding-right: 25px;
}
#topnav .navigation-menu > li > a:hover {
color: #ffffff;
}
#topnav .navigation-menu > li > a:focus {
color: #ffffff;
}
#topnav .navigation-menu > li > a:active {
color: #ffffff;
}
#topnav .navigation-menu > li > a i {
margin-right: 8px; /* Memberi jarak antara ikon dan teks */
}
#topnav .navigation-menu > li > a:hover,
#topnav .navigation-menu > li.active > a {
background-color: #FFA14F; /* Warna menu di sorot dan aktif */
color: #2F2F2F; /* Warna font menu di sorot dan aktif */
}
/* =========== Submenu =============*/
#topnav .navigation-menu > li .submenu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
border: 1px solid #e7e7e7;
padding: 15px 0;
list-style: none;
min-width: 200px;
visibility: hidden;
opacity: 0;
margin-top: 10px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
background-color: #FEF0E1; /* Background submenu */
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
text-align: left;
}
#topnav .navigation-menu > li:hover > .submenu {
visibility: visible;
opacity: 1;
margin-top: 0;
}
#topnav .navigation-menu .submenu li a {
display: block;
padding: 8px 25px;
clear: both;
font-weight: normal;
white-space: nowrap;
font-size: 15px;
color: #2F2F2F;
-webkit-transition: all .35s ease;
transition: all .35s ease;
margin-right: 8px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
/* ATURAN HOVER YANG DIPERBAIKI */
#topnav .navigation-menu .submenu li a:hover,
#topnav .navigation-menu .submenu li a:focus,
#topnav .navigation-menu .submenu li a:active {
background-color: #FFA14F; /* Warna hover submenu */
color: #2F2F2F;
#topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li > a:focus {
background-color: transparent;
}
/*
Responsive Menu
*/
@@ -328,16 +296,33 @@ File: Main Css File
margin-right: 10px;
}
#topnav .navigation-menu > li:hover a {
color: #2F2F2F !important;
color: #ffffff;
}
#topnav .navigation-menu > li:hover a i {
color: #2F2F2F !important;
color: #ffffff;
}
#topnav .navigation-menu > li > ul > li.has-submenu:active > a,
#topnav .navigation-menu > li > ul > li.has-submenu:hover > a {
color: #2F2F2F !important;
color: #02c0ce;
}
#topnav .navigation-menu > li .submenu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
border: 1px solid #e7e7e7;
padding: 15px 0;
list-style: none;
min-width: 200px;
text-align: left;
visibility: hidden;
opacity: 0;
margin-top: 10px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
background-color: #ffffff;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
}
#topnav .navigation-menu > li .submenu.megamenu {
white-space: nowrap;
width: auto;
@@ -393,7 +378,7 @@ File: Main Css File
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
background-color: #FEF0E1; /* Background submenu */
color: #313a46;
}
#topnav .navbar-toggle {
display: none;
@@ -413,11 +398,10 @@ File: Main Css File
#topnav .navigation-menu {
float: none;
max-height: 400px;
text-align: center;
text-align: left;
}
#topnav .navigation-menu > li {
display: block;
text-align: center;
}
#topnav .navigation-menu > li > a {
color: #313a46;
@@ -446,8 +430,7 @@ File: Main Css File
color: #313a46;
}
#topnav .navigation-menu > li .submenu li a:hover {
background-color: #FFA14F;
color: #313a46;
color: #02c0ce;
}
#topnav .navigation-menu > li .submenu li.has-submenu > a:after {
content: "\F140";
@@ -502,10 +485,10 @@ File: Main Css File
overflow-y: auto;
}
#topnav .has-submenu.active a {
color: #FFA14F;
color: #02c0ce;
}
#topnav .has-submenu.active a:active, #topnav .has-submenu.active a:focus, #topnav .has-submenu.active a i {
color: #FFA14F;
color: #02c0ce;
}
}
@@ -1131,11 +1114,11 @@ code {
}
.bg-primary {
background-color: #FFA14F !important;
background-color: #2d7bf4 !important;
}
.bg-success {
background-color: #77C470 !important;
background-color: #0acf97 !important;
}
.bg-info {
@@ -1143,11 +1126,11 @@ code {
}
.bg-warning {
background-color: #FAA645 !important;
background-color: #f9bc0b !important;
}
.bg-danger {
background-color: #E8563C !important;
background-color: #f1556c !important;
}
.bg-muted {
@@ -1196,7 +1179,7 @@ code {
}
.text-warning {
color: #FAA645 !important;
color: #f9bc0b !important;
}
.text-success {
@@ -1233,7 +1216,7 @@ code {
}
.border-warning {
border-color: #FAA645 !important;
border-color: #f9bc0b !important;
}
.border-danger {
@@ -1265,12 +1248,12 @@ code {
}
.badge-custom {
background: #FFA14F;
background: #02c0ce;
color: #ffffff;
}
.badge-primary {
background-color: #FFA14F;
background-color: #2d7bf4;
}
.badge-secondary {
@@ -1286,7 +1269,7 @@ code {
}
.badge-warning {
background-color: #FAA645;
background-color: #f9bc0b;
color: #ffffff;
}
@@ -1679,15 +1662,15 @@ code {
}
.btn-warning {
background-color: #FAA645;
border: 1px solid #FAA645;
background-color: #f9bc0b;
border: 1px solid #f9bc0b;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.focus, .btn-warning:active,
.btn-warning:focus, .btn-warning:hover, .open > .dropdown-toggle.btn-warning, .btn-warning:not([disabled]):not(.disabled).active,
.btn-warning:not([disabled]):not(.disabled):active, .show > .btn-warning.dropdown-toggle {
background-color: #FAA645;
border-color: #FAA645;
background-color: #e5ac06;
border-color: #e5ac06;
}
.btn-warning.focus, .btn-warning:focus, .btn-outline-warning.focus, .btn-outline-warning:focus,
@@ -1802,13 +1785,13 @@ code {
}
.btn-outline-warning {
color: #FAA645;
border-color: #FAA645;
color: #f9bc0b;
border-color: #f9bc0b;
}
.btn-outline-warning:hover {
background-color: #FAA645;
border-color: #FAA645;
background-color: #f9bc0b;
border-color: #f9bc0b;
}
.btn-outline-danger {
@@ -2000,7 +1983,7 @@ code {
}
.ribbon-box .ribbon-warning {
background: #FAA645;
background: #f9bc0b;
}
.ribbon-box .ribbon-warning:before {
@@ -2143,7 +2126,7 @@ code {
}
.ribbon-box .ribbon-two-warning span {
background: #FAA645;
background: #f9bc0b;
}
.ribbon-box .ribbon-two-warning span:before {
@@ -2426,8 +2409,8 @@ code {
}
.checkbox-warning input[type="checkbox"]:checked + label::before {
background-color: #FAA645;
border-color: #FAA645;
background-color: #f9bc0b;
border-color: #f9bc0b;
}
.checkbox-warning input[type="checkbox"]:checked + label::after {
@@ -2601,15 +2584,15 @@ code {
}
.radio-warning input[type="radio"] + label::after {
background-color: #FAA645;
background-color: #f9bc0b;
}
.radio-warning input[type="radio"]:checked + label::before {
border-color: #FAA645;
border-color: #f9bc0b;
}
.radio-warning input[type="radio"]:checked + label::after {
background-color: #FAA645;
background-color: #f9bc0b;
}
.radio-success input[type="radio"] + label::after {
@@ -2682,7 +2665,7 @@ code {
}
.alert-warning {
color: #FAA645;
color: #f9bc0b;
background-color: #fffaeb;
border-color: #fbd76f;
}
@@ -2741,9 +2724,9 @@ code {
}
.jq-icon-warning {
background-color: #FAA645;
background-color: #f9bc0b;
color: #ffffff;
border-color: #FAA645;
border-color: #f9bc0b;
}
.jq-icon-error {
@@ -3146,7 +3129,7 @@ code {
}
.progress-bar-warning {
background-color: #FAA645;
background-color: #f9bc0b;
}
.progress-bar-danger {
@@ -3280,8 +3263,8 @@ code {
}
.swal2-icon.swal2-warning {
color: #FAA645;
border-color: #FAA645;
color: #f9bc0b;
border-color: #f9bc0b;
}
.swal2-icon.swal2-error {
@@ -3397,7 +3380,7 @@ code {
}
.ct-chart .ct-series.ct-series-g .ct-bar, .ct-chart .ct-series.ct-series-g .ct-line, .ct-chart .ct-series.ct-series-g .ct-point, .ct-chart .ct-series.ct-series-g .ct-slice-donut {
stroke: #FAA645;
stroke: #f9bc0b;
}
.ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
@@ -3590,7 +3573,7 @@ code {
}
.message-list li.orange-dot .col-mail-1 .dot {
border-color: #FAA645;
border-color: #f9bc0b;
}
.message-list li.green-dot .col-mail-1 .dot {