/* Uang Saya — tampilan. Dirancang HP-dulu: menu di bawah supaya terjangkau ibu jari, tombol catat selalu terlihat. Di layar lebar menunya pindah ke atas dan isinya melebar. */ /* Tiga keadaan tema, dan ketiganya harus ditulis lengkap: - tanpa atribut -> ikut HP (prefers-color-scheme) - data-tema="terang" -> putih, walau HP sedang mode gelap - data-tema="gelap" -> hitam, walau HP sedang mode terang Kuncinya `:root:not([data-tema="terang"])` di dalam media query: tanpa itu, pilihan "Terang" akan dikalahkan lagi oleh mode gelap HP. Atributnya dipasang tema.js di supaya tidak ada kedipan warna saat halaman dibuka. */ :root { color-scheme: light; --bg: #fbfbfc; --kartu: #ffffff; --kartu2: #f4f5f7; --teks: #101114; --teks2: #4b5158; --redup: #8b9098; --garis: #e5e6ea; --utama: #6366f1; --utama-lembut: #eef0ff; --masuk: #16a34a; --keluar: #dc2626; --hati: #d97706; --bayang: 0 1px 2px rgba(16,17,20,.05), 0 8px 24px rgba(16,17,20,.05); --r: 16px; } @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { color-scheme: dark; --bg: #000000; --kartu: #121316; --kartu2: #08090b; --teks: #f3f4f6; --teks2: #a5abb5; --redup: #71767f; --garis: #26282e; --utama: #818cf8; --utama-lembut: #1b1c2b; --masuk: #4ade80; --keluar: #f87171; --hati: #fbbf24; --bayang: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45); } } :root[data-tema="gelap"] { color-scheme: dark; --bg: #000000; --kartu: #121316; --kartu2: #08090b; --teks: #f3f4f6; --teks2: #a5abb5; --redup: #71767f; --garis: #26282e; --utama: #818cf8; --utama-lembut: #1b1c2b; --masuk: #4ade80; --keluar: #f87171; --hati: #fbbf24; --bayang: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45); } :root[data-tema="terang"] { color-scheme: light; --bg: #fbfbfc; --kartu: #ffffff; --kartu2: #f4f5f7; --teks: #101114; --teks2: #4b5158; --redup: #8b9098; --garis: #e5e6ea; --utama: #6366f1; --utama-lembut: #eef0ff; --masuk: #16a34a; --keluar: #dc2626; --hati: #d97706; --bayang: 0 1px 2px rgba(16,17,20,.05), 0 8px 24px rgba(16,17,20,.05); } * { box-sizing: border-box; } /* WAJIB: atribut `hidden` kalah dari aturan kelas yang memasang `display`. Tanpa baris ini, .tirai { display:flex } membuat modal SELALU tampil walau sudah diberi hidden — dan itu persis yang terjadi pada percobaan pertama. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--teks); font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; } .redup { color: var(--redup); } .num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* ── tombol ── */ .tbl { border: 1px solid var(--garis); background: var(--kartu); border-radius: 11px; padding: 9px 14px; cursor: pointer; font-weight: 550; transition: .12s; } .tbl:hover { border-color: var(--utama); } .tbl.utama { background: var(--utama); border-color: var(--utama); color: #fff; } .tbl.utama:hover { filter: brightness(1.07); } .tbl.polos { border-color: transparent; background: transparent; padding: 7px 10px; } .tbl.polos:hover { background: var(--kartu2); border-color: var(--garis); } .tbl.lebar { width: 100%; padding: 13px; } .tbl.bulat { width: 34px; height: 34px; padding: 0; border-radius: 50%; } .tbl.bahaya { color: var(--keluar); } .tbl.kecil { padding: 6px 11px; font-size: 13.5px; border-radius: 9px; } /* ── masuk ── */ .layar-masuk { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .kartu-masuk { width: 100%; max-width: 370px; background: var(--kartu); padding: 30px 26px; border-radius: 20px; box-shadow: var(--bayang); border: 1px solid var(--garis); } .kartu-masuk h1 { font-size: 22px; margin-top: 14px; } .kartu-masuk p { margin: 3px 0 20px; font-size: 14px; } /* Lambang = logo guzelapps.id. Latar ungu lama dibuang: logonya sudah punya latar sendiri. Sudutnya dibulatkan tipis saja (12px, bukan 15px) supaya bingkai hitam di dalam gambar tidak ikut terpotong. */ .lambang { width: 50px; height: 50px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; flex: none; background: #fff; border: 1px solid var(--garis); } .lambang img { width: 100%; height: 100%; object-fit: cover; display: block; } .lambang.kecil { width: 30px; height: 30px; border-radius: 8px; } label { display: block; margin-bottom: 13px; font-size: 13px; color: var(--teks2); font-weight: 550; } input, select, textarea { width: 100%; margin-top: 5px; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--garis); background: var(--kartu2); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--utama); } .galat { margin-top: 12px; padding: 10px 12px; border-radius: 11px; background: #fee2e2; color: #991b1b; font-size: 13.5px; } @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .galat { background: #3f1d1d; color: #fca5a5; } } :root[data-tema="gelap"] .galat { background: #3f1d1d; color: #fca5a5; } /* ── kerangka ── */ .atas { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--kartu); border-bottom: 1px solid var(--garis); } /* Nama aplikasi. 17px - sedikit lebih besar dari teks biasa (15px) supaya terbaca sebagai judul, tapi masih muat berdampingan dengan logo dan tombol Keluar di layar 375 px. */ .nama-app { font-size: 17px; font-weight: 650; letter-spacing: -.01em; min-width: 0; } .nav-atas { margin-left: 8px; } /* Di HP, menu ada di bawah sehingga bagian tengah bilah atas kosong — judulnya ditaruh betul-betul di tengah. Kolom 1fr di kiri dan kanan membuat kolom tengah tetap di poros layar walau tombol Keluar hanya ada di satu sisi. Di layar lebar aturan ini tidak berlaku karena bagian tengah sudah dipakai menu. */ @media (max-width: 767px) { .atas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; } .lambang.kecil { grid-column: 1; justify-self: start; } .nama-app { grid-column: 2; justify-self: center; } .atas-kanan { grid-column: 3; justify-self: end; margin-left: 0; } } .atas-kanan { margin-left: auto; display: flex; align-items: center; gap: 4px; } .panah { color: var(--redup); font-size: 11px; } .nav-atas { display: none; gap: 3px; } .nav-atas button { border: 0; background: transparent; padding: 8px 13px; border-radius: 10px; cursor: pointer; color: var(--teks2); font-weight: 550; } .nav-atas button.aktif { background: var(--utama-lembut); color: var(--utama); } main { padding: 16px; padding-bottom: 96px; max-width: 640px; margin: 0 auto; } .nav-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); /* 4 menu */ background: var(--kartu); border-top: 1px solid var(--garis); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .nav-bawah button { border: 0; background: transparent; cursor: pointer; color: var(--redup); display: grid; justify-items: center; gap: 3px; padding: 6px 2px; font-size: 11px; font-weight: 550; } .nav-bawah button.aktif { color: var(--utama); } .nav-bawah svg { width: 21px; height: 21px; } .fab { position: fixed; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 31; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--utama); color: #fff; font-size: 30px; line-height: 1; box-shadow: 0 8px 24px rgba(99,102,241,.45); } .fab:hover { filter: brightness(1.08); } /* ── kartu & daftar ── */ .kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 16px; margin-bottom: 14px; box-shadow: var(--bayang); } .kartu-judul { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 650; } .kartu-judul .tbl { margin: -4px 0; } .saldo-besar { font-size: 30px; font-weight: 700; margin: 2px 0 2px; } .saldo-label { font-size: 13px; color: var(--redup); } .dua { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mini { background: var(--kartu2); border: 1px solid var(--garis); border-radius: 13px; padding: 12px 13px; } .mini .l { font-size: 12px; color: var(--redup); } .mini .v { font-size: 18px; font-weight: 650; margin-top: 2px; } .baris { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--garis); } .baris:last-child { border-bottom: 0; } .baris-teks { min-width: 0; flex: 1; } .baris-judul { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .baris-sub { font-size: 12.5px; color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .baris-nilai { font-weight: 650; white-space: nowrap; } .masuk { color: var(--masuk); } .keluar { color: var(--keluar); } /* Kotak ikon kini berisi emoji (huruf), bukan svg. Ukurannya diatur lewat font-size. Aturan svg dibiarkan karena masih dipakai di tempat lain. */ .ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 21px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; } .ikon svg { width: 28px; height: 28px; } .ikon.kecil { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; } .ikon.kecil svg { width: 23px; height: 23px; } .bar { height: 7px; border-radius: 99px; background: var(--garis); overflow: hidden; margin-top: 7px; } .bar > i { display: block; height: 100%; border-radius: 99px; } .kosong { text-align: center; color: var(--redup); padding: 26px 10px; font-size: 14px; } .kosong .gambar { font-size: 34px; margin-bottom: 6px; } .hari-judul { font-size: 12px; color: var(--redup); font-weight: 600; margin: 16px 0 2px; text-transform: capitalize; } /* petak kategori */ .petak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .petak button { border: 1px solid var(--garis); background: var(--kartu2); border-radius: 13px; padding: 10px 4px; cursor: pointer; display: grid; justify-items: center; gap: 5px; font-size: 11px; color: var(--teks2); font-weight: 550; } .petak button.aktif { border-color: var(--utama); background: var(--utama-lembut); color: var(--utama); } .petak span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* pilihan (jenis transaksi) */ .pilihan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--kartu2); border: 1px solid var(--garis); border-radius: 13px; padding: 4px; margin-bottom: 16px; } .pilihan button { border: 0; background: transparent; padding: 9px; border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--teks2); } .pilihan button.aktif { background: var(--kartu); box-shadow: var(--bayang); color: var(--teks); } /* nominal besar */ .nominal { text-align: center; margin: 4px 0 18px; } .nominal input { border: 0; background: transparent; text-align: center; font-size: 34px; font-weight: 700; padding: 4px 0; margin: 0; letter-spacing: -.02em; } .nominal input:focus { border: 0; } .nominal .l { font-size: 12px; color: var(--redup); } /* geser bulan / tanggal */ .bulan-geser { display: flex; align-items: center; justify-content: space-between; background: var(--kartu); border: 1px solid var(--garis); border-radius: 13px; padding: 4px 6px; margin-bottom: 14px; box-shadow: var(--bayang); } .bulan-geser button { font-size: 15px; } .bulan-geser button:first-child, .bulan-geser button:last-child { font-size: 20px; line-height: 1; padding: 4px 12px; } /* saldo awal / akhir */ .saldo-dua { display: flex; justify-content: space-between; gap: 12px; } .saldo-dua .l { font-size: 12px; color: var(--redup); } .saldo-dua .v { font-size: 19px; font-weight: 650; margin-top: 2px; } .saldo-dua .kanan { text-align: right; } /* kepala kelompok hari */ .hari-atas { display: flex; align-items: center; gap: 11px; padding: 6px 0 9px; border-bottom: 1px solid var(--garis); } .hari-tgl { font-size: 25px; font-weight: 300; color: var(--teks2); min-width: 30px; } .hari-nama { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; } .hari-nama .baris-sub { font-weight: 400; } .tambah-op { width: 100%; padding: 14px; margin-top: 4px; font-size: 15px; } /* petak kategori 2 lajur dengan nominal */ .petak2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .petak2 button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--garis); background: var(--kartu2); border-radius: 13px; padding: 10px 11px; cursor: pointer; } .petak2 button:hover { border-color: var(--utama); } .petak2 .baris-judul { font-size: 13.5px; } /* papan angka */ .dua-chip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .chip-besar { display: block; border: 1.5px solid var(--garis); border-radius: 13px; padding: 9px 11px; background: var(--kartu2); margin: 0; } .chip-besar .l { font-size: 11px; color: var(--redup); } .chip-besar .v { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-weight: 600; font-size: 14px; } .chip-besar .v span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .papan-nilai { text-align: center; font-size: 30px; font-weight: 700; padding: 10px 0 14px; } .papan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; } .papan button { border: 1px solid var(--garis); background: var(--kartu); border-radius: 13px; padding: 15px 0; font-size: 19px; font-weight: 600; cursor: pointer; } .papan button:hover { border-color: var(--utama); } .papan button.op { background: var(--kartu2); color: var(--utama); } /* lembar/modal */ .tirai { position: fixed; inset: 0; z-index: 50; background: rgba(2,6,23,.55); display: flex; align-items: flex-end; justify-content: center; } .lembar { width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--bg); border-radius: 22px 22px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); } .lembar-atas { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .lembar-atas strong { font-size: 17px; } .baris-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: var(--kartu2); border: 1px solid var(--garis); font-size: 12px; color: var(--teks2); } .toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 90; background: var(--teks); color: var(--bg); padding: 11px 17px; border-radius: 12px; font-size: 14px; font-weight: 550; box-shadow: var(--bayang); max-width: 90vw; } .toast.buruk { background: var(--keluar); color: #fff; } canvas { max-width: 100%; } /* ── layar lebar ── */ @media (min-width: 780px) { .nav-atas { display: flex; } .nav-bawah { display: none; } main { padding: 22px; padding-bottom: 40px; max-width: 1100px; } .fab { right: 28px; bottom: 28px; } .tirai { align-items: center; } .lembar { border-radius: 20px; max-height: 88vh; } .dua { grid-template-columns: repeat(4, 1fr); } .petak { grid-template-columns: repeat(6, 1fr); } .lajur { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } } @media (min-width: 1200px) { main { max-width: 1280px; } } /* ── pemilih tema (menu Setting) ── */ .pilih-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pilih-tema button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px; border-radius: 13px; cursor: pointer; border: 1.5px solid var(--garis); background: var(--kartu2); transition: .12s; } .pilih-tema button:hover { border-color: var(--utama); } .pilih-tema button.aktif { border-color: var(--utama); background: var(--utama-lembut); } .pilih-tema b { font-size: 13.5px; font-weight: 600; } .pilih-tema small { color: var(--redup); font-size: 11.5px; } .pilih-tema .contoh { width: 38px; height: 25px; border-radius: 8px; border: 1px solid var(--garis); } .pilih-tema .contoh.terang { background: #ffffff; } .pilih-tema .contoh.gelap { background: #000000; } .pilih-tema .contoh.otomatis { background: linear-gradient(100deg, #ffffff 50%, #000000 50%); } /* ── pemilih bulan, sekarang di dalam kartu ── */ .baris-bulan { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pilih-bulan { padding: 5px 11px; font-size: 13px; border-radius: 9px; white-space: nowrap; color: var(--teks2); margin-top: -2px; } .pilih-bulan b { color: var(--teks); font-weight: 600; } /* ── dialog "Interval waktu" ── */ .petak-periode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .petak-periode button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 15px 8px; border-radius: 14px; cursor: pointer; text-align: center; border: 1.5px solid var(--garis); background: var(--kartu2); color: var(--teks); transition: .12s; } .petak-periode button.lebar { grid-column: 1 / -1; } .petak-periode button:hover { border-color: var(--utama); } .petak-periode button.aktif { border-color: var(--utama); background: var(--utama-lembut); color: var(--utama); } .petak-periode b { font-size: 13.5px; font-weight: 600; } .petak-periode small { color: var(--redup); font-size: 11.5px; line-height: 1.3; } .petak-periode .kal { width: 28px; height: 28px; } /* Petak 12 bulan: nama penuh di tiga kolom, jadi jaraknya dirapatkan sedikit supaya "September" tetap muat di layar 320 px tanpa terpotong. */ .petak span { font-variant-numeric: tabular-nums; }