fitur fitur darkmode dan foto foto
This commit is contained in:
@@ -39,3 +39,461 @@ body {
|
||||
.btn-WA {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-xl bg-green-500 px-5 py-3 text-sm font-semibold text-white transition hover:bg-green-600;
|
||||
}
|
||||
|
||||
/* SecondTech dark mode */
|
||||
html.dark body {
|
||||
background: #121212;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
html.dark header {
|
||||
background: rgba(18, 18, 18, 0.94);
|
||||
border-color: rgba(37, 99, 235, 0.34);
|
||||
}
|
||||
|
||||
html.dark main,
|
||||
html.dark section {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
html.dark .card {
|
||||
background: #181818;
|
||||
border-color: rgba(37, 99, 235, 0.30);
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.20);
|
||||
}
|
||||
|
||||
html.dark .input {
|
||||
background: #181818;
|
||||
border-color: rgba(37, 99, 235, 0.34);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
html.dark .input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
html.dark .btn-secondary {
|
||||
background: #181818;
|
||||
border-color: rgba(37, 99, 235, 0.38);
|
||||
color: #f8fafc;
|
||||
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
html.dark .btn-primary {
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
|
||||
}
|
||||
|
||||
html.dark .bg-white,
|
||||
html.dark .bg-slate-50,
|
||||
html.dark .bg-slate-100 {
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
html.dark .text-slate-950,
|
||||
html.dark .text-slate-900,
|
||||
html.dark .text-slate-800,
|
||||
html.dark .text-slate-700 {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
html.dark .text-slate-600,
|
||||
html.dark .text-slate-500 {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
html.dark .border-slate-200 {
|
||||
border-color: rgba(37, 99, 235, 0.30);
|
||||
}
|
||||
|
||||
/* SecondTech stronger dark mode repair */
|
||||
html.dark,
|
||||
html.dark body {
|
||||
background: #121212 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark header,
|
||||
html.dark footer,
|
||||
html.dark main,
|
||||
html.dark section {
|
||||
background-color: #121212 !important;
|
||||
}
|
||||
|
||||
html.dark header {
|
||||
border-color: rgba(37, 99, 235, 0.35) !important;
|
||||
}
|
||||
|
||||
html.dark .card {
|
||||
background: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.34) !important;
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
|
||||
}
|
||||
|
||||
html.dark .input,
|
||||
html.dark input,
|
||||
html.dark select,
|
||||
html.dark textarea {
|
||||
background-color: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.38) !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark .input::placeholder,
|
||||
html.dark input::placeholder,
|
||||
html.dark textarea::placeholder {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
|
||||
html.dark .btn-secondary {
|
||||
background: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.42) !important;
|
||||
color: #f8fafc !important;
|
||||
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
|
||||
}
|
||||
|
||||
html.dark .btn-primary {
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white,
|
||||
html.dark .bg-slate-50,
|
||||
html.dark .bg-slate-100,
|
||||
html.dark .bg-brand-50 {
|
||||
background-color: #181818 !important;
|
||||
}
|
||||
|
||||
html.dark .text-slate-950,
|
||||
html.dark .text-slate-900,
|
||||
html.dark .text-slate-800,
|
||||
html.dark .text-slate-700,
|
||||
html.dark .text-brand-900,
|
||||
html.dark .text-brand-800,
|
||||
html.dark .text-brand-700 {
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark .text-slate-600,
|
||||
html.dark .text-slate-500,
|
||||
html.dark .text-slate-400 {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
html.dark .nav-link,
|
||||
html.dark .mobile-link,
|
||||
html.dark a:not(.btn-primary) {
|
||||
color: #dbeafe !important;
|
||||
}
|
||||
|
||||
html.dark .nav-link:hover,
|
||||
html.dark .mobile-link:hover,
|
||||
html.dark a:not(.btn-primary):hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .border-slate-200,
|
||||
html.dark .border-brand-600 {
|
||||
border-color: rgba(37, 99, 235, 0.42) !important;
|
||||
}
|
||||
|
||||
html.dark .shadow-sm {
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
|
||||
}
|
||||
|
||||
/* SecondTech final dark mode repair */
|
||||
html.dark,
|
||||
html.dark body {
|
||||
background: #121212 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark header,
|
||||
html.dark footer,
|
||||
html.dark main,
|
||||
html.dark section {
|
||||
background-color: #121212 !important;
|
||||
}
|
||||
|
||||
html.dark header {
|
||||
border-color: rgba(37, 99, 235, 0.35) !important;
|
||||
}
|
||||
|
||||
html.dark .card {
|
||||
background: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.34) !important;
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
|
||||
}
|
||||
|
||||
html.dark .input,
|
||||
html.dark input,
|
||||
html.dark select,
|
||||
html.dark textarea {
|
||||
background-color: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.38) !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark .input::placeholder,
|
||||
html.dark input::placeholder,
|
||||
html.dark textarea::placeholder {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
|
||||
html.dark .btn-secondary {
|
||||
background: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.42) !important;
|
||||
color: #f8fafc !important;
|
||||
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
|
||||
}
|
||||
|
||||
html.dark .btn-primary {
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white,
|
||||
html.dark .bg-slate-50,
|
||||
html.dark .bg-slate-100,
|
||||
html.dark .bg-brand-50,
|
||||
html.dark .bg-emerald-50,
|
||||
html.dark .bg-red-50 {
|
||||
background-color: #181818 !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-950,
|
||||
html.dark .text-zinc-900,
|
||||
html.dark .text-zinc-800,
|
||||
html.dark .text-slate-950,
|
||||
html.dark .text-slate-900,
|
||||
html.dark .text-slate-800,
|
||||
html.dark .text-slate-700,
|
||||
html.dark .text-brand-900,
|
||||
html.dark .text-brand-800,
|
||||
html.dark .text-brand-700,
|
||||
html.dark .text-emerald-700,
|
||||
html.dark .text-red-700 {
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark .text-slate-600,
|
||||
html.dark .text-slate-500,
|
||||
html.dark .text-slate-400,
|
||||
html.dark .text-zinc-600,
|
||||
html.dark .text-zinc-500,
|
||||
html.dark .text-zinc-400 {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
html.dark .nav-link,
|
||||
html.dark .mobile-link,
|
||||
html.dark a:not(.btn-primary) {
|
||||
color: #dbeafe !important;
|
||||
}
|
||||
|
||||
html.dark .nav-link:hover,
|
||||
html.dark .mobile-link:hover,
|
||||
html.dark a:not(.btn-primary):hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .border-slate-200,
|
||||
html.dark .border-brand-600 {
|
||||
border-color: rgba(37, 99, 235, 0.42) !important;
|
||||
}
|
||||
|
||||
html.dark .shadow-sm {
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
|
||||
}
|
||||
|
||||
/* SecondTech final dark mode override */
|
||||
:root {
|
||||
--hero-title-color: #0f1729;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--hero-title-color: #f8fafc;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html.dark,
|
||||
html.dark body {
|
||||
background: #121212 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark header,
|
||||
html.dark footer,
|
||||
html.dark main,
|
||||
html.dark section {
|
||||
background-color: #121212 !important;
|
||||
}
|
||||
|
||||
html.dark header {
|
||||
border-color: rgba(37, 99, 235, 0.36) !important;
|
||||
}
|
||||
|
||||
html.dark .card {
|
||||
background: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.34) !important;
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
|
||||
}
|
||||
|
||||
html.dark .input,
|
||||
html.dark input,
|
||||
html.dark select,
|
||||
html.dark textarea {
|
||||
background-color: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.38) !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark .input::placeholder,
|
||||
html.dark input::placeholder,
|
||||
html.dark textarea::placeholder {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
|
||||
html.dark .btn-secondary {
|
||||
background: #181818 !important;
|
||||
border-color: rgba(37, 99, 235, 0.42) !important;
|
||||
color: #f8fafc !important;
|
||||
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
|
||||
}
|
||||
|
||||
html.dark .btn-primary {
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white,
|
||||
html.dark .bg-slate-50,
|
||||
html.dark .bg-slate-100,
|
||||
html.dark .bg-brand-50,
|
||||
html.dark .bg-emerald-50,
|
||||
html.dark .bg-red-50 {
|
||||
background-color: #181818 !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white\/90 {
|
||||
background-color: rgba(24, 24, 24, 0.9) !important;
|
||||
color: #f8fafc !important;
|
||||
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-950,
|
||||
html.dark .text-zinc-900,
|
||||
html.dark .text-zinc-800,
|
||||
html.dark .text-slate-950,
|
||||
html.dark .text-slate-900,
|
||||
html.dark .text-slate-800,
|
||||
html.dark .text-slate-700,
|
||||
html.dark .text-brand-950,
|
||||
html.dark .text-brand-900,
|
||||
html.dark .text-brand-800,
|
||||
html.dark .text-brand-700,
|
||||
html.dark .text-emerald-700,
|
||||
html.dark .text-red-700 {
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark .text-slate-600,
|
||||
html.dark .text-slate-500,
|
||||
html.dark .text-slate-400,
|
||||
html.dark .text-zinc-600,
|
||||
html.dark .text-zinc-500,
|
||||
html.dark .text-zinc-400 {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
html.dark .label,
|
||||
html.dark label,
|
||||
html.dark h1,
|
||||
html.dark h2,
|
||||
html.dark h3,
|
||||
html.dark h4,
|
||||
html.dark p,
|
||||
html.dark span {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
html.dark .nav-link,
|
||||
html.dark .mobile-link,
|
||||
html.dark a:not(.btn-primary) {
|
||||
color: #dbeafe !important;
|
||||
}
|
||||
|
||||
html.dark .nav-link:hover,
|
||||
html.dark .mobile-link:hover,
|
||||
html.dark a:not(.btn-primary):hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .border-slate-200,
|
||||
html.dark .border-brand-600 {
|
||||
border-color: rgba(37, 99, 235, 0.42) !important;
|
||||
}
|
||||
|
||||
html.dark .shadow-sm {
|
||||
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
|
||||
}
|
||||
|
||||
/* Sidebar active links are generated by scoped component CSS, so override directly. */
|
||||
html.dark .side-link {
|
||||
color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
html.dark .side-link.router-link-active {
|
||||
background: rgba(37, 99, 235, 0.18) !important;
|
||||
border: 1px solid rgba(37, 99, 235, 0.40) !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
|
||||
}
|
||||
|
||||
html.dark .side-link.router-link-active svg,
|
||||
html.dark .side-link svg {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
html.dark .side-link.admin-link,
|
||||
html.dark .side-link.admin-link.router-link-active {
|
||||
background: rgba(37, 99, 235, 0.18) !important;
|
||||
border: 1px solid rgba(37, 99, 235, 0.40) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Product cards: category badge and save button use bg-white/90. */
|
||||
html.dark button.bg-white\/90,
|
||||
html.dark span.bg-white\/90 {
|
||||
background-color: rgba(24, 24, 24, 0.90) !important;
|
||||
color: #f8fafc !important;
|
||||
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
||||
}
|
||||
|
||||
html.dark button.bg-white\/90:hover {
|
||||
background-color: #2563eb !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .rounded-full.bg-brand-50,
|
||||
html.dark .rounded-full.bg-emerald-50,
|
||||
html.dark .rounded-full.bg-red-50 {
|
||||
background-color: rgba(37, 99, 235, 0.16) !important;
|
||||
color: #f8fafc !important;
|
||||
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
||||
}
|
||||
|
||||
/* Dark mode sidebar hover fix */
|
||||
html.dark .side-link:hover {
|
||||
background: rgba(37, 99, 235, 0.16) !important;
|
||||
border-color: rgba(37, 99, 235, 0.38) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .side-link:hover svg {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .side-link.router-link-active,
|
||||
html.dark .side-link.router-link-active:hover {
|
||||
background: rgba(37, 99, 235, 0.22) !important;
|
||||
border: 1px solid rgba(37, 99, 235, 0.45) !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user