/* ========================================================================= SITE OVERRIDES ------------------------------------------------------------------------- Stylesheet kecil yang dimuat SETELAH stylesheet utama, di kedua mode: - mode default : setelah build app.css - mode template : setelah public/css/costum/.css Dua kegunaan: 1. PARITY — aturan yang ada di build default tapi tidak ikut ter-generate ke file tema. File tema menggantikan app.css sepenuhnya, jadi tanpa ini aturan tersebut hilang untuk semua tema selain "default". 2. HOTFIX — koreksi yang sumbernya sudah diperbaiki di resources/css/, tapi belum ikut ter-build ulang (dan tidak akan pernah masuk ke file tema yang sudah ter-generate). Aman dibiarkan walau nanti di-rebuild: nilainya sama dengan sumbernya. 3. KOMPONEN BARU — komponen yang belum ada di app.css maupun di file tema mana pun, jadi tidak ada versi tema yang bisa "kalah". Warnanya diekspos sebagai CSS variable supaya tema bisa menimpanya kalau perlu. Untuk bagian 1 dan 2 jangan taruh warna — warna adalah wewenang tema. Publish ke public/ lewat: php artisan template:publish ========================================================================= */ /* ---------- 1. PARITY ---------- */ /* Tombol nominal cepat di form deposit/withdraw */ .preset-amounts .app-button { width: 100%; margin-bottom: 1rem; } /* Nav kategori di beranda desktop (Beranda / Eksklusif / Sports+ / Casino / ...) */ nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d { justify-content: center; } /* ---------- 2. HOTFIX ---------- */ /* Beranda desktop: kedua blok Arcade dulu di-pin ke grid-row 6/7 dan 7/8, sehingga terlempar ke atas SNS card dan Top Tables walaupun urutan DOM-nya sudah di bawah Top Tables. Dikembalikan ke auto-placement supaya urutan visual mengikuti urutan DOM. Sumber sudah dibetulkan di resources/css/desktop.css. */ .home--d .card.card--arcade-carousel { grid-row: auto; } .home--d .arcade-showcase { grid-row: auto; } /* Halaman Lotto: jumlah kolom grid. Build kita hanya punya 2 kolom (base) dan 4 kolom di >=1024px, tanpa breakpoint 640px sama sekali. Referensi memakai 2 / 3 / 5. Angka 5 itu yang membentuk tata letaknya: widget dan kartu rumah memakai grid-column:span 2, jadi satu baris memuat dua elemen lebar plus satu kartu biasa, lalu grid-auto-flow:dense menutup sisanya. Dengan 4 kolom dua elemen lebar sudah menghabiskan satu baris penuh. Selector .lotto-content .lotto-grid dipakai (bukan .lotto-grid polos) supaya spesifisitasnya imbang dengan .lotto-grid[data-v-1f2cc254] di build; karena file ini dimuat terakhir, yang imbang akan menang. */ @media (min-width: 640px) { .lotto-content .lotto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lotto-content .lotto-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---------- 3. KOMPONEN BARU ---------- */ /* Featured games (kolom "Featured" di dalam .games-grid halaman provider slot). Blok ini tidak ada di app.css maupun di file tema mana pun. Scoped [data-v-455b314a] mengikuti markup di resources/views/desktop/partials/slots/slotsgames.blade.php. Warna latar bisa ditimpa per tema lewat --featured-bg. */ .slot-content[data-v-455b314a]{--featured-bg:#ff6467;position:relative;min-height:15rem} .slot-content__featured[data-v-455b314a]{grid-column:1/-1;position:relative;display:grid;padding:.5rem;grid-gap:.5rem;margin-top:-.5rem;width:calc(100% + 1rem);transform:translateX(-.5rem);background-color:var(--featured-bg);grid-template-columns:auto repeat(4,minmax(0,1fr))} .slot-content__featured>div[data-v-455b314a]{display:flex;flex-direction:column;align-items:center;justify-content:center;grid-gap:.25rem;gap:.25rem} .slot-content__featured>div span[data-v-455b314a]{font-weight:700;font-size:.625rem;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;transform:rotate(180deg)} .slot-content__featured.featured--d[data-v-455b314a]{grid-row:span 5;grid-column:unset;margin:0;width:100%;height:100%;transform:unset;align-items:center;border-radius:10px;grid-template-columns:unset;grid-template-rows:auto repeat(4,minmax(0,1fr))} .slot-content__featured.featured--d>div[data-v-455b314a]{flex-direction:row;align-self:end} .slot-content__featured.featured--d>div span[data-v-455b314a]{-ms-writing-mode:unset;writing-mode:unset;transform:unset;font-size:.875rem} .slot-content .games-grid[data-v-455b314a],.slot-content .slot-loading[data-v-455b314a]{display:grid;grid-gap:.75rem;align-items:start;align-content:start;grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(3,minmax(0,1fr))} @media(min-width:1024px){.slot-content .games-grid[data-v-455b314a],.slot-content .slot-loading[data-v-455b314a]{grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}} .slot-content .no-results[data-v-455b314a]{width:100%;padding:.75rem 2rem;text-align:center;font-size:.875rem;background-color:#1d2b43} .slot-loading[data-v-455b314a]{position:absolute;width:100%} .slot-loading--rtp[data-v-455b314a]{grid-template-columns:repeat(2,minmax(0,1fr))} /* Tile di dalam blok Featured. Aturan [data-v-31b60a9e] aslinya belum ada di stylesheet mana pun, jadi ini versi minimal supaya tile tidak jebol keluar kolom (tanpa ini tampil di ukuran natural 600x600 dan menimpa games-grid). Ganti dengan CSS asli kalau nanti tersedia. */ .featured-game[data-v-31b60a9e]{min-width:0;min-height:0} .featured-game[data-v-31b60a9e]>a{display:block;width:100%;height:100%} .featured-game__container[data-v-31b60a9e]{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:10px} .featured-game__img[data-v-31b60a9e]{position:relative;flex:1 1 auto;min-height:0;overflow:hidden} .featured-game__img[data-v-31b60a9e] img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover} /* Nama game disembunyikan — mengikuti konvensi .promo-card__title dan .casino-game__name yang juga display:none. Markup tetap dipertahankan supaya identik dengan referensi dan tetap terbaca screen reader lewat alt gambar. */ .featured-game__name[data-v-31b60a9e]{display:none}