@charset "UTF-8"; /* ============================================================ jin-ui.css —— jin5588 /action/ 獨立樣式表 完全不依賴 style.css / member.css / marquee.css / about.css / fixmenu.css / variables.css,那六支一支都不載。 保留的外部相依只有 Bootstrap 5(grid、utilities,以及 modal/tab/ collapse 這些 JS 元件需要的 CSS)與 AOS / Swiper / Flickity。 定位:登入後的操作介面(天條 53),不是行銷頁。 資訊設計走金融儀表板那一套,視覺識別沿用 WordPress 前台的黑金 (天條 54:視覺共用、版面各走各的)。 還原:把 head 的引用換回原本那幾行即可,原始檔案完全沒動。 ============================================================ */ /* ============================================================ 1. TOKEN ============================================================ */ :root{ /* 表面:同一頁的卡片只用 --sf-2,不做一半深底一半白底(天條 55) */ --sf-0:#0a0906; /* 頁面底 */ --sf-1:#120f09; /* 次層、輸入框 */ --sf-2:#171208; /* 卡片、面板 */ --sf-3:#1e1810; /* 卡片內的次級塊、hover */ --sf-head:linear-gradient(180deg,rgba(28,17,3,.97),rgba(16,10,2,.95)); --line:#3a3122; --line-gold:rgba(201,151,46,.22); --line-strong:rgba(201,151,46,.45); /* 金 —— 與前台同值 */ --gold-1:#f6e2a8; --gold-2:#c9972e; --gold-3:#8a6a1f; --gold-hi:#e9b950; --on-gold:#2a1c04; /* 字 */ --ink:#efe7d6; --ink-2:#b7ab8d; --ink-3:#8b8270; /* 語意色:與品牌金分開,只用在狀態 */ --ok:#5fae72; --ok-bg:rgba(95,174,114,.14); --warn:#d9a441; --warn-bg:rgba(217,164,65,.14); --danger:#e2705e; --danger-bg:rgba(226,112,94,.12); /* 漸層 */ --g-gold:linear-gradient(180deg,#ffe7bd 0%,#f7b675 44%,#f39f4b 100%); --g-reg:linear-gradient(180deg,#cf3625 0%,#b8241a 46%,#830c04 100%); --g-card:linear-gradient(180deg,var(--sf-2),var(--sf-1)); /* 間距(操作介面,比行銷頁緊) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --sec:48px; /* 區塊上間距,只設上方(天條 38) */ --gut:24px; --wrap:1200px; /* 形狀 */ --r-card:16px; --r-btn:10px; --r-in:10px; --r-pill:99px; --shadow-1:0 12px 30px -18px rgba(0,0,0,.85); --shadow-2:0 22px 54px -28px rgba(0,0,0,.92); --sans:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif; --serif:"Noto Serif TC","Songti TC",serif; --head-h:70px; --mq-h:44px; --ftnav-h:64px; --t-fast:.16s; --t:.22s; } @media(max-width:1024px){ :root{ --sec:40px; --gut:20px; } } @media(max-width:767px){ :root{ --sec:32px; --gut:16px; --head-h:60px; } } /* ============================================================ 2. RESET 與基礎 ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--sf-0); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; height:auto; border:0; } a{ color:var(--gold-1); text-decoration:none; transition:color var(--t-fast); cursor:pointer; } a:hover{ color:var(--gold-hi); } button,[role=button],.btn,label[for],summary{ cursor:pointer; } :focus-visible{ outline:2px solid var(--gold-1); outline-offset:2px; border-radius:4px; } hr{ border:0; border-top:1px solid var(--line); margin:var(--s5) 0; } ul,ol{ margin:0; padding:0; } li{ list-style:none; } ::selection{ background:rgba(201,151,46,.35); color:#fff; } h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--sans); color:var(--ink); line-height:1.35; } h1{ font-size:26px; font-weight:800; } h2{ font-size:22px; font-weight:700; } h3{ font-size:19px; font-weight:700; } h4{ font-size:17px; font-weight:700; } h5{ font-size:16px; font-weight:700; } h6{ font-size:15px; font-weight:700; } p{ margin:0 0 var(--s3); color:var(--ink-2); } small,.small{ font-size:13.5px; color:var(--ink-3); } b,strong{ font-weight:700; color:var(--ink); } /* 容器:電腦版限寬置中,寬螢幕也不留大片空白(天條 55) */ .container{ width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); } .container-fluid{ width:100%; padding-left:var(--gut); padding-right:var(--gut); } main,#main{ display:block; } ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-track{ background:var(--sf-1); } ::-webkit-scrollbar-thumb{ background:#3d3524; border-radius:6px; } ::-webkit-scrollbar-thumb:hover{ background:var(--gold-3); } /* ============================================================ 3. 頁首 ============================================================ */ #header{ position:sticky; top:0; z-index:1000; background:var(--sf-head); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-strong); box-shadow:0 4px 18px -6px rgba(0,0,0,.7); } #header .navbar-bg{ width:100%; } #header .navbar-bg>.container{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:var(--head-h); } #header .logo{ flex:0 0 auto; } #header .logo a{ display:flex; align-items:center; min-height:48px; } #header .logo img{ height:42px; width:auto; max-width:200px; object-fit:contain; display:block; } #navbar{ flex:1; display:flex; align-items:center; justify-content:flex-end; } #navbar>ul{ display:flex; align-items:center; gap:2px; } #navbar>ul>li{ display:flex; align-items:center; } #navbar .nav-link{ display:flex; align-items:center; height:var(--head-h); padding:0 14px; font-size:15px; font-weight:700; color:#ffe9b8; letter-spacing:.02em; border-bottom:2px solid transparent; transition:color var(--t),border-color var(--t); } #navbar .nav-link:hover{ color:var(--gold-hi); border-bottom-color:var(--gold-2); } #navbar .nav-link.active{ color:var(--gold-hi); border-bottom-color:var(--gold-hi); } .mobile-nav-toggle{ display:none; font-size:26px; color:var(--gold-hi); } /* 登入 / 註冊 —— 與前台同一組漸層 */ .btn-login,.btn-register{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; padding:0 20px; border:0; border-radius:var(--r-pill); font-family:var(--sans); font-size:15px; font-weight:800; white-space:nowrap; transition:transform var(--t-fast),filter var(--t-fast); } .btn-login{ background:var(--g-gold); color:var(--on-gold); } .btn-register{ background:var(--g-reg); color:#fff; } .btn-login:hover{ transform:translateY(-1px); filter:brightness(1.06); color:var(--on-gold); } .btn-register:hover{ transform:translateY(-1px); filter:brightness(1.06); color:#fff; } .btn-login .btn-icon,.btn-register .btn-icon{ width:18px; height:18px; object-fit:contain; } .btn-login.btn-sm,.btn-register.btn-sm{ height:44px; padding:0 16px; font-size:14px; } /* 登入後:帳號 + 餘額 + 快捷 */ .u-login{ display:flex; align-items:center; gap:var(--s3); } .u-login .u-info{ display:flex; flex-direction:column; gap:2px; padding:7px 14px; border-radius:12px; background:var(--sf-2); border:1px solid var(--line); } .u-login .uuid,.u-login .uucash{ display:flex; align-items:center; gap:6px; font-size:13.5px; line-height:1.3; } .u-login .uuid{ color:var(--ink-2); } .u-login .uucash{ color:var(--gold-1); font-weight:800; font-variant-numeric:tabular-nums; } .u-login .uuid img,.u-login .uucash img{ width:16px; height:16px; object-fit:contain; } .u-login .link{ display:flex; gap:var(--s2); } .u-login .Wbtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:56px; height:44px; padding:4px 8px; border-radius:12px; background:var(--sf-2); border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--gold-1); transition:background var(--t),border-color var(--t); } .u-login .Wbtn img{ width:18px; height:18px; object-fit:contain; } .u-login .Wbtn:hover{ background:var(--sf-3); border-color:var(--gold-2); color:var(--gold-1); } #header .d-block.d-lg-none{ display:flex; align-items:center; gap:var(--s2); } /* ============================================================ 4. 跑馬燈 ============================================================ */ .mq-section{ background:linear-gradient(90deg,#3a2704,#5a3f08,#3a2704); border-bottom:1px solid var(--line-strong); } .mq-section .top-bar{ display:flex; align-items:center; min-height:var(--mq-h); } .marquee-wrapper{ flex:1; overflow:hidden; } /* 秒數照線上實際公告量抓:兩份內容共 4616px,走一半 2308px。 42 秒(每秒 55px)Owner 說「看起來不會動」,26 秒(89px/s)又嫌快 —— 32 秒約每秒 72px,在「看得出在動」與「讀得完」之間。 公告增減時速度會跟著變,本機的假公告比較短所以在預覽裡顯得慢,以線上為準。 */ .marquee-content{ display:flex; white-space:nowrap; animation:jinmq 32s linear infinite; } .marquee-content:hover{ animation-play-state:paused; } .marquee-content li.con{ flex:0 0 auto; } .marquee-content li.con a{ display:inline-flex; align-items:center; gap:8px; min-height:var(--mq-h); padding:0 26px; font-size:14px; font-weight:600; color:#ffe9b8; } .marquee-content li.con a::before{ content:"\25C6"; font-size:8px; color:rgba(255,233,184,.55); } .marquee-content li.con a:hover{ color:#fff; } @keyframes jinmq{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ============================================================ 5. 主視覺輪播 ============================================================ */ #testimonials,.testimonials{ padding:var(--s4) 0 0; } .testimonials-slider{ overflow:hidden; border-radius:var(--r-card); } .swiper-wrapper{ display:flex; } .testimonial-item{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:var(--sf-2); box-shadow:var(--shadow-2); } .testimonial-img{ width:100%; height:auto; display:block; } .testimonial-item.is-placeholder{ background:linear-gradient(120deg,#241a08,#0f0c06 62%); min-height:180px; } .swiper-pagination-bullet{ background:rgba(255,255,255,.25); opacity:1; } .swiper-pagination-bullet-active{ background:var(--gold-2); width:20px; border-radius:3px; } /* ============================================================ 6. 手機錢包卡(登入後) ============================================================ */ .Wbody{ padding-top:var(--s4); } .Wbody_box{ background:var(--g-card); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); box-shadow:var(--shadow-1); } .Wbody .usname{ display:flex; align-items:center; gap:8px; font-size:15px; color:var(--ink-2); } .Wbody .usname img{ width:20px; height:20px; object-fit:contain; } .Wbody .userwallet{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; } .Wbody .u-cone{ display:flex; align-items:center; gap:8px; font-size:26px; font-weight:800; color:var(--gold-1); font-variant-numeric:tabular-nums; line-height:1.2; } .Wbody .u-cone img{ width:24px; height:24px; object-fit:contain; } .Wbody .u-conWbtn{ display:flex; gap:var(--s2); } .Wbody .Wbtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:76px; min-height:56px; padding:6px 10px; border-radius:12px; background:var(--sf-3); border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--gold-1); transition:filter var(--t-fast),border-color var(--t); } .Wbody .Wbtn img{ width:22px; height:22px; object-fit:contain; } .Wbody .Wbtn:hover{ border-color:var(--gold-2); } .Wbody .btn-dpst{ background:var(--g-gold); border-color:transparent; color:var(--on-gold); } .Wbody .btn-dpst:hover{ filter:brightness(1.06); color:var(--on-gold); } /* ============================================================ 7. 大堂分類軌 ============================================================ */ .GameNav{ margin-top:var(--sec); } .nav-pills2{ display:flex; gap:var(--s2); background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s2); } .nav-pills2>.nav-item,.nav-pills2>li{ flex:1 1 0; min-width:0; display:block; } .nav-pills2 .nav-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; min-height:76px; padding:10px 6px; border-radius:12px; font-size:14px; font-weight:700; color:var(--ink-2); background:transparent; border:1px solid transparent; transition:background var(--t),color var(--t),border-color var(--t); } .nav-pills2 .nav-link .img{ width:34px; height:34px; } .nav-pills2 .nav-link .img img{ width:100%; height:100%; object-fit:contain; } /* 每個分類站上都有兩張圖:一般版是藍色系(舊淺色主題留下的)、active 版是白色。 藍色放在黑金底上很突兀,所以兩個狀態都改用白色那版, 靠底色與透明度分辨選中與否 —— 不必重做圖,也不會有色系打架。 */ /* 站上的 main.js 會直接在這兩個 div 上寫 inline style 切換顯示, 所以這裡必須用 !important 才蓋得過去。JS 照跑,只是視覺統一成白色那版。 */ .nav-pills2 .nav-link .img-action{ display:none !important; } .nav-pills2 .nav-link .img-active{ display:block !important; opacity:.7; transition:opacity var(--t); } .nav-pills2 .nav-link:hover{ color:var(--gold-1); background:var(--sf-3); } .nav-pills2 .nav-link:hover .img-active{ opacity:.9; } /* 選中態不用實心金底 —— 白圖示壓在亮金上會糊。改成深金底 + 金框 + 金字。 */ .nav-pills2 .nav-link.active{ color:var(--gold-1); background:linear-gradient(180deg,rgba(233,185,80,.20),rgba(201,151,46,.07)); border-color:var(--gold-2); box-shadow:inset 0 1px 0 rgba(246,226,168,.22),0 6px 18px -10px rgba(233,185,80,.5); } .nav-pills2 .nav-link.active .img-active{ opacity:1; } /* ============================================================ 8. 分類區塊 ============================================================ */ .BrandGame,.slotGames{ padding-top:var(--sec); } .BrandGame>.container{ display:flex; gap:var(--s5); align-items:flex-start; } .md_games{ flex:1; min-width:0; } .md_img{ flex:0 0 300px; } .md_img_img img{ border-radius:var(--r-card); border:1px solid var(--line); display:block; width:100%; } .section-title{ margin-bottom:var(--s2); } .section-title h2.title,.info-body h2.title{ font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.06em; color:var(--gold-1); margin:0; } .info-body .leading-loose{ font-size:15px; color:var(--ink-3); margin-bottom:var(--s4); max-width:62ch; } /* ============================================================ 9. 遊戲卡 —— 站上有三套結構,底色與圓角統一(天條 55) ============================================================ */ /* 9a. 廠商卡(真人/電子/體育/彩票) */ .games{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); } .gamesBox{ background:var(--g-card); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; transition:transform var(--t),border-color var(--t),box-shadow var(--t); } .gamesBox:hover{ transform:translateY(-4px); border-color:var(--gold-3); box-shadow:var(--shadow-1); } .gamesBox>a{ display:flex; flex-direction:column; align-items:center; gap:var(--s2); height:100%; padding:var(--s4) var(--s3) var(--s3); color:inherit; } .gamesBox--logo{ display:flex; align-items:center; justify-content:center; height:64px; width:100%; } .gamesBox--logo img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); } .gamesBox--image{ width:100%; border-radius:12px; overflow:hidden; } .gamesBox--image img{ width:100%; display:block; } .gamesBox .BrandName{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:auto; } .gamesBox .game-name{ font-size:15px; font-weight:700; color:var(--ink); text-align:center; } .gamesBox--button{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--gold-1); background:rgba(201,151,46,.14); border:1px solid var(--line-gold); border-radius:var(--r-pill); padding:3px 11px; } .gamesBox--button-none{ display:none; } /* 9b. 單機卡(捕魚) */ .hotG-list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); } .h-link{ display:grid; gap:var(--s3); } .h-link>a{ display:block; position:relative; overflow:hidden; border-radius:var(--r-card); background:var(--sf-2); border:1px solid var(--line); transition:transform var(--t),border-color var(--t); } .h-link>a:hover{ transform:translateY(-4px); border-color:var(--gold-3); } .h-image img{ width:100%; display:block; } .brandtxt{ position:absolute; left:8px; top:8px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--on-gold); background:var(--g-gold); border-radius:6px; padding:2px 8px; } /* 9c. 介紹頁卡(fish / ge / qt …) */ .slot-game{ display:flex; flex-direction:column; gap:var(--s2); height:100%; background:var(--g-card); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s2) var(--s2) var(--s3); transition:transform var(--t),border-color var(--t); } .slot-game:hover{ transform:translateY(-4px); border-color:var(--gold-3); } .slot-game .media-02819{ border-radius:12px; overflow:hidden; background:var(--sf-1); } .slot-game .media-02819 img{ width:100%; display:block; } .slot-game .img-link{ display:block; border-radius:12px; overflow:hidden; } .slot-game h3{ font-size:15px; font-weight:700; color:var(--ink); margin:0; line-height:1.4; text-align:center; } .slot-game .btn-1{ width:100%; margin-top:auto; } /* 9d. 真人桌台區(seo_live) */ .live-game{ background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s4); margin-bottom:var(--s3); } .live-btn{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; } .live-title{ font-size:18px; font-weight:700; color:var(--gold-1); margin-bottom:var(--s2); } /* ============================================================ 10. 按鈕 ============================================================ */ .btn,.btn-1,.mbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 20px; border:1px solid transparent; border-radius:var(--r-btn); font-family:var(--sans); font-size:16px; font-weight:700; line-height:1; transition:filter var(--t-fast),background var(--t),border-color var(--t),transform var(--t-fast); } .btn-primary,.btn-1,.btn-warning,.btn-start,.submit-btn,.mbtn{ background:var(--g-gold); color:var(--on-gold); border-color:transparent; } .btn-primary:hover,.btn-1:hover,.btn-warning:hover,.btn-start:hover,.submit-btn:hover,.mbtn:hover{ filter:brightness(1.06); color:var(--on-gold); transform:translateY(-1px); } .btn-secondary,.btn-outline-primary,.btn-default{ background:transparent; color:var(--gold-1); border-color:var(--line-gold); } .btn-secondary:hover,.btn-outline-primary:hover,.btn-default:hover{ background:rgba(201,151,46,.12); border-color:var(--gold-2); color:var(--gold-1); } .btn-danger{ background:var(--g-reg); color:#fff; } .btn-danger:hover{ filter:brightness(1.06); color:#fff; } .btn-sm{ min-height:36px; padding:0 14px; font-size:14px; } .btn-lg{ min-height:52px; padding:0 26px; font-size:17px; } .btn-block,.btn.w-100{ width:100%; } .btn:disabled,.btn.disabled{ opacity:.5; cursor:not-allowed; transform:none; } /* ============================================================ 11. 表單 ============================================================ */ label,.control-label{ display:inline-block; margin-bottom:6px; font-size:15px; font-weight:600; color:var(--ink-2); } .form-control,.form-select,select,textarea, input[type=text],input[type=password],input[type=email], input[type=number],input[type=tel],input[type=date],input[type=search]{ display:block; width:100%; min-height:46px; padding:9px 14px; background:var(--sf-1); border:1px solid var(--line); border-radius:var(--r-in); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; transition:border-color var(--t),box-shadow var(--t); } textarea{ min-height:110px; resize:vertical; } .form-control::placeholder,input::placeholder,textarea::placeholder{ color:var(--ink-3); opacity:1; } .form-control:focus,select:focus,textarea:focus,input:focus{ border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(201,151,46,.18); outline:0; } select{ appearance:none; -webkit-appearance:none; padding-right:38px; background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%), linear-gradient(135deg,var(--gold-2) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } select option{ background:var(--sf-2); color:var(--ink); } input[type=checkbox],input[type=radio]{ width:18px; height:18px; accent-color:var(--gold-2); cursor:pointer; } .form-group{ margin-bottom:var(--s4); } .form-check{ display:flex; align-items:center; gap:8px; } .form-check-label{ margin:0; } .form-check-label a{ display:inline-block; padding:6px 0; } .input-group{ display:flex; gap:var(--s2); align-items:stretch; } .input-group .form-control{ flex:1; min-width:0; } .input-group-text,.input-group-btn .btn{ display:inline-flex; align-items:center; padding:0 14px; background:var(--sf-3); border:1px solid var(--line); border-radius:var(--r-in); color:var(--gold-1); font-size:15px; white-space:nowrap; } /* 錯誤訊息貼著欄位,不只出現在最上面 */ .invalid-feedback,.error,.help-block{ display:block; margin-top:6px; font-size:14px; color:var(--danger); } .form-control.is-invalid{ border-color:var(--danger); } .alert{ padding:var(--s3) var(--s4); border-radius:var(--r-btn); background:var(--sf-2); border:1px solid var(--line); color:var(--ink-2); font-size:15px; margin-bottom:var(--s4); } .alert-danger{ background:var(--danger-bg); border-color:rgba(226,112,94,.4); color:#f0a99c; } .alert-success{ background:var(--ok-bg); border-color:rgba(95,174,114,.4); color:#8fc79c; } .alert-warning{ background:var(--warn-bg); border-color:rgba(217,164,65,.4); color:#e5c07b; } .submit-input{ margin-top:var(--s4); } .submit-input a,.submit-input button{ display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:var(--r-btn); background:var(--g-gold); color:var(--on-gold); font-weight:800; font-size:16px; } /* ============================================================ 12. 表格 ============================================================ */ .table-responsive,.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; } .table{ width:100%; border-collapse:collapse; margin:0; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; } .table th,.table td{ padding:12px 14px; text-align:left; vertical-align:middle; border-bottom:1px solid rgba(58,49,34,.7); } .table thead th,.tr-1st,.tr-1st td,.tr-1st th{ background:var(--sf-3); color:var(--gold-1); font-size:13.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap; border-bottom:1px solid var(--line); } .table tbody tr:last-child td{ border-bottom:0; } .table tbody tr:hover{ background:rgba(201,151,46,.06); } .table-striped tbody tr:nth-child(odd){ background:rgba(255,255,255,.025); } .table-bordered,.table-bordered th,.table-bordered td{ border:1px solid var(--line); } .table-dark{ background:var(--sf-2); } table .btn{ min-height:36px; padding:0 12px; font-size:14px; } /* 狀態徽章:不只靠顏色,形狀也帶訊息 */ .st,.status{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; white-space:nowrap; } .st-done,.status-done{ background:var(--ok-bg); color:#8fc79c; } .st-wait,.status-wait{ background:var(--warn-bg); color:#e5c07b; } .st-fail,.status-fail{ background:var(--danger-bg); color:#f0a99c; } .pager,.pagination{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:var(--s4); } .pager a,.pagination a,.page-link{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 10px; border-radius:var(--r-btn); background:var(--sf-2); border:1px solid var(--line); color:var(--ink-2); font-size:15px; } .pager a:hover,.pagination a:hover,.page-link:hover{ border-color:var(--gold-2); color:var(--gold-1); } .pager .active a,.pagination .active a,.page-item.active .page-link{ background:var(--g-gold); border-color:transparent; color:var(--on-gold); font-weight:700; } /* ============================================================ 13. 卡片與面板 —— 同一頁只有一種卡片底色 ============================================================ */ .box,.box-1,.box-2,.block,.block-info,.card,.gamebox,.product-item, .panel,.member-top,.info-box,.amount-card,.deposit-container{ background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-card); color:var(--ink); } .box,.box-1,.box-2,.block-info,.card,.panel,.member-top,.info-box,.amount-card{ padding:var(--s5); } /* 注意:.payicon 是加在整張付款卡上,不是圖示容器 —— 當成圖示給它 44×44 會把整張卡壓扁,卡內文字變成直排疊在一起。圖示容器是 .icon-box / .icon-wrapper。 */ .icon-box,.brand-icon,.icon-wrapper{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 auto; border-radius:10px; background:var(--sf-3); border:1px solid var(--line); font-size:13px; font-weight:800; color:var(--gold-1); } .icon-box img,.brand-icon img,.icon-wrapper img,.payicon img{ max-width:28px; max-height:28px; object-fit:contain; } .icon-box svg,.icon-wrapper svg{ width:22px; height:22px; stroke:var(--gold-1); fill:none; } /* ============================================================ 14. 會員中心 ============================================================ */ .member-page,.member,.page-wrapper{ padding-top:var(--sec); padding-bottom:var(--s7); } .member-top{ background:var(--g-card); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-bottom:var(--s4); } .member-top .user-info{ display:flex; flex-wrap:wrap; gap:var(--s5); font-size:15px; color:var(--ink-2); } .member-top .user-info b,.member-top .user-info strong{ color:var(--gold-1); font-weight:800; } .user-info{ font-size:15px; } .member-menu_web{ background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s2); overflow:hidden; } .member-menu_web ul{ display:flex; flex-direction:column; gap:2px; } .member-menu_web a{ display:flex; align-items:center; gap:10px; min-height:46px; padding:0 14px; border-radius:10px; font-size:15px; font-weight:600; color:var(--ink-2); transition:background var(--t),color var(--t); } .member-menu_web a:hover{ background:rgba(201,151,46,.10); color:var(--gold-1); } .member-menu_web a.active,.member-menu_web li.active a{ background:rgba(201,151,46,.16); color:var(--gold-1); } .member-menu_web img{ width:22px; height:22px; object-fit:contain; } #settingBTN,#bankBTN,a[rel=bottom]{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; } /* ============================================================ 15. 金流 ============================================================ */ .payment,.payment-list{ display:grid; gap:var(--s2); } .payment-item,.sub-payment-item,.payment-card{ display:flex; align-items:center; gap:var(--s3); min-height:64px; padding:var(--s4); border-radius:var(--r-card); background:var(--sf-2); border:1px solid var(--line); transition:background var(--t),border-color var(--t); } .payment-item:hover,.sub-payment-item:hover,.payment-card:hover{ background:var(--sf-3); border-color:var(--gold-3); } .payment-item.active,.sub-payment-item.active,.payment-card.active, .payment-item.selected,.payment-card.selected{ border-color:var(--gold-2); background:rgba(201,151,46,.10); box-shadow:inset 0 0 0 1px rgba(201,151,46,.35); } .item-info{ flex:1; min-width:0; } .item-name{ font-size:16px; font-weight:700; color:var(--ink); } /* 選中的付款卡是金色底,--ink-3 壓在上面只有 4.26:1,提一階 */ .item-desc{ font-size:13.5px; color:var(--ink-2); } .select-indicator{ position:relative; width:20px; height:20px; flex:0 0 auto; border:2px solid var(--line); border-radius:50%; } .payment-item.active .select-indicator,.payment-card.active .select-indicator{ border-color:var(--gold-2); } .payment-item.active .select-indicator::after,.payment-card.active .select-indicator::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold-2); } .quick-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 14px; border-radius:var(--r-btn); background:var(--sf-3); border:1px solid var(--line); color:var(--ink); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; transition:background var(--t),border-color var(--t),color var(--t); } .quick-btn:hover,.quick-btn.active{ background:rgba(201,151,46,.14); border-color:var(--gold-2); color:var(--gold-1); } .sub-payment-group{ display:grid; gap:var(--s2); margin-top:var(--s2); padding-left:var(--s5); } .bg-multi,.bg-atm,.bg-card{ background:var(--sf-3); } .info-box{ font-size:14.5px; color:var(--ink-2); line-height:1.8; } .info-box b,.info-box strong{ color:var(--gold-1); } /* ============================================================ 16. 內容頁 ============================================================ */ .site-section{ padding-top:var(--sec); } .page-seo-title{ font-size:24px; font-weight:800; color:var(--ink); margin-bottom:var(--s3); } .content,.page-content{ font-size:16px; line-height:1.85; color:var(--ink-2); } .content h2,.content h3,.page-content h2,.page-content h3{ color:var(--gold-1); margin:var(--s5) 0 var(--s2); } .content p,.page-content p{ margin-bottom:var(--s3); } .content a,.page-content a{ text-decoration:underline; text-underline-offset:2px; } .content img{ border-radius:12px; } .content ul,.content ol{ padding-left:1.3em; margin-bottom:var(--s3); } .content li{ list-style:disc; margin-bottom:6px; } .topbanner img{ border-radius:var(--r-card); width:100%; display:block; } .breadcramb,.breadcrumbs{ font-size:13.5px; color:var(--ink-3); padding-top:var(--s3); } .nav-tabs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin-bottom:var(--s4); } .nav-tabs .nav-link,.about-nav .nav-link{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:10px 10px 0 0; color:var(--ink-2); background:transparent; border:1px solid transparent; } .nav-tabs .nav-link:hover,.about-nav .nav-link:hover{ color:var(--gold-1); background:var(--sf-2); } .nav-pills .nav-link{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:var(--r-btn); color:var(--ink-2); } .nav-tabs .nav-link.active,.about-nav .nav-link.active,.nav-pills .nav-link.active{ background:var(--g-gold); color:var(--on-gold); border-color:transparent; font-weight:700; } /* ============================================================ 17. 彈窗 ============================================================ */ .modal-content{ background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-card); color:var(--ink); box-shadow:0 30px 80px -30px rgba(0,0,0,.92); } .modal-header,.modal-footer{ padding:var(--s4) var(--s5); border-color:var(--line); display:flex; align-items:center; gap:var(--s3); } .modal-header{ border-bottom:1px solid var(--line); justify-content:space-between; } .modal-footer{ border-top:1px solid var(--line); justify-content:flex-end; } .modal-title{ font-size:18px; font-weight:700; color:var(--gold-1); } .modal-body{ padding:var(--s5); color:var(--ink-2); font-size:15px; } .modal-header .close,.btn-close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:transparent; color:var(--ink-2); font-size:24px; line-height:1; opacity:.85; } .modal-header .close:hover,.btn-close:hover{ color:var(--gold-1); opacity:1; } .modal-backdrop.show{ opacity:.78; } /* ============================================================ 18. 頁尾 —— 單行,不做多欄(天條 40) ============================================================ */ footer,#footer,.footer{ margin-top:var(--sec); background:linear-gradient(180deg,#160f07,#0b0805); border-top:3px solid var(--gold-hi); color:var(--ink-2); padding:var(--s6) 0 var(--s5); } footer .container,#footer .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s2) var(--s5); text-align:center; } footer a,#footer a,.footer a{ display:inline-block; padding:6px 0; font-size:14px; color:var(--ink-2); line-height:1.45; } footer a:hover,#footer a:hover{ color:var(--gold-1); } footer img,#footer img{ opacity:.92; } .footer-logo img{ height:38px; width:auto; object-fit:contain; } footer .copyright,#footer .copyright{ width:100%; font-size:12.5px; color:var(--ink-3); } /* ============================================================ 19. 底部固定導覽 + 抽屜(手機) ============================================================ */ .ft-navbar{ position:fixed; left:0; right:0; bottom:0; z-index:1030; display:none; background:rgba(18,11,2,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line-strong); padding-bottom:env(safe-area-inset-bottom); } .ft-nav{ display:flex; } .ft-nav>li{ flex:1; } .ft-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:var(--ftnav-h); padding:6px 2px; font-size:11.5px; font-weight:600; color:#f3e6c6; } .ft-link img{ width:22px; height:22px; object-fit:contain; } .ft-link:active,.ft-link:hover{ color:var(--gold-hi); } .ft-link.auth-btn{ color:var(--gold-hi); } #mobNav.overlay{ position:fixed; inset:0; z-index:1090; background:rgba(10,7,2,.97); width:0; overflow:hidden; transition:width .3s; } #mobNav .overlay-content{ display:flex; flex-direction:column; gap:10px; padding:var(--s6) var(--s5); max-width:420px; margin:0 auto; } #mobNav .mobNav_home img{ height:40px; width:auto; object-fit:contain; } #mobNav .overlay-btn{ display:flex; align-items:center; gap:12px; min-height:52px; padding:0 18px; border-radius:12px; background:linear-gradient(90deg,rgba(233,185,80,.14),rgba(233,185,80,.05)),var(--sf-2); border:1px solid var(--line-gold); font-size:16px; font-weight:700; color:#f3e6c6; } #mobNav .overlay-btn img{ width:22px; height:22px; object-fit:contain; } #mobNav .overlay-btn:hover{ background:rgba(233,185,80,.22); color:var(--gold-hi); } /* ============================================================ 20. Bootstrap 覆寫(只動顏色,版面照 Bootstrap 走) ============================================================ */ .text-white{ color:var(--ink) !important; } .text-muted{ color:var(--ink-3) !important; } .bg-white,.bg-light{ background:var(--sf-2) !important; } .text-dark{ color:var(--ink) !important; } .border{ border-color:var(--line) !important; } .font-size-18{ font-size:16px; } .tab-content{ width:100%; } /* ============================================================ 21. 斷點 —— 375 / 768 / 1024 / 1440 都檢過 ============================================================ */ @media(max-width:1199px){ .md_img{ flex-basis:240px; } } @media(max-width:1024px){ /* 平板改 2 欄不是 3 欄:各分類家數是 4/6/8/2,3 欄會讓最後一列落單一張 (天條 55 的「網格不要留落單尾巴」)。平板的卡片還會多一張人物圖, 2 欄的比例也比較好看。 */ .games,.hotG-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } .BrandGame>.container{ flex-direction:column; } .md_img{ flex-basis:auto; width:100%; } } @media(max-width:991px){ #navbar>ul{ display:none; } .mobile-nav-toggle{ display:inline-flex; } .ft-navbar{ display:block; } body{ padding-bottom:calc(var(--ftnav-h) + env(safe-area-inset-bottom)); } } @media(max-width:767px){ h1{ font-size:22px; } h2{ font-size:19px; } h3{ font-size:17px; } #header .logo img{ height:34px; } .games,.hotG-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); } .nav-pills2{ padding:6px; gap:4px; } .nav-pills2 .nav-link{ min-height:66px; font-size:12.5px; padding:8px 2px; } .nav-pills2 .nav-link .img{ width:28px; height:28px; } .gamesBox>a{ padding:var(--s3) var(--s2) var(--s2); } .gamesBox--logo{ height:48px; } .gamesBox .game-name{ font-size:14px; } .member-top,.box,.box-1,.box-2,.card,.panel{ padding:var(--s4); } .table th,.table td{ padding:10px 12px; font-size:14px; } .page-seo-title{ font-size:20px; } .modal-body,.modal-header,.modal-footer{ padding:var(--s4); } .sub-payment-group{ padding-left:var(--s3); } } @media(max-width:400px){ .nav-pills2 .nav-link{ font-size:11.5px; } .Wbody .u-cone{ font-size:22px; } } /* ============================================================ 22. 收尾 ============================================================ */ .row{ margin-left:0; margin-right:0; } main{ overflow-x:clip; } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } @media print{ #header,.ft-navbar,.mq-section,footer{ display:none; } body{ background:#fff; color:#000; } } /* ============================================================ 23. 稽核後補正(量出來才發現的,不是預設值) ============================================================ */ /* 沒寫 type 的 input 預設就是 text,列舉 type 會漏掉它們 —— 改用排除法 */ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=image]){ background:var(--sf-1); border:1px solid var(--line); border-radius:var(--r-in); color:var(--ink); font-family:var(--sans); font-size:16px; min-height:46px; padding:9px 14px; } input[type=file]{ padding:9px 12px; } input[type=file]::file-selector-button{ margin-right:12px; padding:8px 14px; border:1px solid var(--line-gold); border-radius:8px; background:var(--sf-3); color:var(--gold-1); font-family:var(--sans); font-weight:700; cursor:pointer; } input[type=submit],input[type=button]{ min-height:44px; padding:0 20px; border:0; border-radius:var(--r-btn); background:var(--g-gold); color:var(--on-gold); font-family:var(--sans); font-size:16px; font-weight:700; cursor:pointer; } /* 登入/註冊頁的 logo 連結 */ .log-img{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; } .log-img img{ max-height:44px; width:auto; object-fit:contain; } /* 表單區與帳號頁的操作型連結:一律 44 可點區。 內文段落裡的連結不套(撐高會把段落撕開) */ .form-group a, .else-btn, .member-page a:not(.btn):not(.nav-link):not(.content a), .member a:not(.btn):not(.nav-link):not(.content a), .line-btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 6px; } .form-group.text-center a{ justify-content:center; } .else-btn{ padding:0 16px; border-radius:var(--r-btn); border:1px solid var(--line-gold); color:var(--gold-1); } .else-btn:hover{ background:rgba(201,151,46,.12); border-color:var(--gold-2); } .else-btn.line{ gap:8px; } /* 內文連結不撐高(撐了會把段落撕開),但按鈕即使寫在內文區也還是按鈕 */ .content a:not(.btn):not(.else-btn):not(.btn-1), .page-content a:not(.btn):not(.else-btn):not(.btn-1){ display:inline; min-height:0; padding:0; } /* .submit-btn / .btn-start / .quick-btn 不帶 .btn class,拿不到上面那組基礎尺寸, 在這裡補齊 —— 否則它們會塌成 33px 高 */ .submit-btn,.btn-start,.else-btn,.btn-txt{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:0 22px; border:1px solid transparent; border-radius:var(--r-btn); font-family:var(--sans); font-size:16px; font-weight:800; line-height:1; cursor:pointer; } .submit-btn{ width:100%; } /* 表格內的操作鈕:比主要按鈕小一階但仍要點得到 */ table .btn,td .btn,.table .btn{ min-height:38px; padding:0 14px; font-size:14px; } /* 任何 .btn 不論被誰包著都不低於 38 */ a.btn,button.btn,.btn{ min-height:38px; } .btn:not(.btn-sm):not(table .btn){ min-height:44px; } /* ============================================================ 24. 溢出防線 ============================================================ */ /* Bootstrap 的 .row 是 flex,子項預設 min-width:auto —— 寬表格會從裡面把頁面撐開。 seo_live 手機版就是這樣多出 294px 橫向捲動的。 */ .row>*{ min-width:0; } .table-responsive,.table-wrap{ max-width:100%; min-width:0; } /* 寬內容自己包一層水平捲動,頁面本體永遠不橫捲(天條 34) */ .tab-pane,.tab-content,.live-game,.col,[class*="col-"]{ min-width:0; } /* 破圖時仍要有可點區:遊戲介紹頁有一批圖在主機上是 404, 圖掛掉時連結會塌成 27px,點不到 */ .img-link{ display:block; min-height:44px; } .slot-game .img-link{ min-height:44px; } /* 新聞/公告列表的標題連結 */ .news-list a,.newsList a,.blog-list a,td>a{ display:inline-flex; align-items:center; min-height:38px; } /* 有些樣板的表格沒有被包進 .table-responsive(seo_live 就有一個), 在手機上會直接把頁面撐開。讓表格本身當捲動容器, 內部 thead/tbody 用 display:table 還原欄寬計算,版面不會跑掉。 */ .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table>thead,.table>tbody,.table>tfoot{ display:table; width:100%; min-width:max-content; } .table-responsive>.table{ min-width:0; } /* 清單、表格、摺疊面板標題裡的連結都是操作型,可點區 44 (內文段落裡的連結不套 —— 撐高會把段落撕開) */ li>a:not(.btn):not(.nav-link):not(.ft-link):not(.overlay-btn), td>a:not(.btn), h1>a,h2>a,h3>a,h4>a,h5>a, .panel-title>a,.accordion-button{ display:inline-flex; align-items:center; min-height:44px; } /* ---------- 頁尾社群圖示 ---------- 站上這幾支是純黑的 brands SVG,而且沒有內建尺寸: 不給寬高會算成 0×0(等於消失),不轉色在深底上也看不見。 不動原始檔,只用 CSS 給尺寸與顏色。 */ .social-links{ display:flex; gap:10px; margin-top:14px; } .social-links a{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:50%; background:var(--sf-3); border:1px solid var(--line); transition:background var(--t),border-color var(--t); } .social-links a:hover{ background:rgba(201,151,46,.14); border-color:var(--gold-2); } .social-links img{ width:18px; height:18px; object-fit:contain; filter:invert(89%) sepia(24%) saturate(628%) hue-rotate(332deg) brightness(101%) contrast(96%); opacity:.88; transition:opacity var(--t); } .social-links a:hover img{ opacity:1; } /* ---------- 打磨:截圖後回頭修的 ---------- */ /* 跑馬燈原本在右緣硬切一半的字,加遮罩讓它自然淡出 */ .marquee-wrapper{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 44px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 44px),transparent 100%); } /* 手機錢包卡:第二列的餘額欄是空的,隱藏它,讓「紅利提領」跟上一列的按鈕對齊, 不要自己佔一行還在左邊留一塊空白 */ .Wbody .userwallet + .userwallet{ margin-top:-6px; justify-content:flex-end; } .Wbody .userwallet + .userwallet .u-cone:empty{ display:none; } .Wbody .u-conWbtn{ flex-wrap:wrap; justify-content:flex-end; } /* 頁尾在手機上每個連結各佔一行、間距過大,收緊一點 */ @media(max-width:767px){ footer .container,#footer .container{ gap:var(--s2) var(--s4); } footer ul,#footer ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px var(--s4); } footer a,#footer a{ padding:5px 0; } footer h5,#footer h5{ width:100%; margin-top:var(--s3); } } /* ============================================================ 25. 會員中心 —— 兩欄佈局 結構是 .member > .container > (.member-menu_web + .member-page), 舊版靠 float 排,新版改 flex。側選單跟著捲動固定,長表單才好操作。 ============================================================ */ .member>.container{ display:flex; align-items:flex-start; gap:var(--s5); } .member-menu_web{ flex:0 0 236px; align-self:flex-start; /* 不要跟著內容拉長 */ position:sticky; top:calc(var(--head-h) + 12px); } .member-page{ flex:1; min-width:0; padding-top:0; } .member-menu_web .nav-item{ display:block; } /* 選單項要撐滿選單寬度,不然點擊區只有文字那一小段 */ .member-menu_web a,.member-menu_web .nav-link{ width:100%; } .member-menu_web .nav-link{ display:flex; align-items:center; gap:10px; min-height:46px; padding:0 14px; border-radius:10px; font-size:15px; font-weight:600; color:var(--ink-2); } .member-menu_web .nav-link:hover{ background:rgba(201,151,46,.10); color:var(--gold-1); } .member-menu_web .nav-link.active{ background:rgba(201,151,46,.16); color:var(--gold-1); } .member-menu_web .img-fluid{ width:22px; height:22px; object-fit:contain; flex:0 0 auto; } .member-menu_web .user-text{ font-size:13px; color:var(--ink-3); margin:0 0 var(--s2); padding:0 14px; } .member-menu_web>ul,.member-menu_web ul{ display:flex; flex-direction:column; gap:2px; } .member-menu_web hr{ margin:var(--s2) 0; } /* 內容卡片:標題帶一條金線,跟大堂的區塊標題同一套 */ .member-page .member-top{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); } .member-page .member-top .col-8,.member-page .member-top [class*="col-"]{ flex:1; min-width:0; padding:0; } .member-page .user-info{ font-size:16px; color:var(--ink); } /* 表單:欄位不要拉滿整個內容區,長輸入框在寬螢幕上很難讀 */ .member-page .box .form-group{ margin-bottom:var(--s4); } .member-page .box .form-group>.content{ max-width:560px; } .member-page .box input:not([type=checkbox]):not([type=radio]):not([type=file]), .member-page .box select, .member-page .box textarea{ max-width:560px; } .member-page .box .btn, .member-page .box button:not(.close):not(.btn-close), .member-page .box .submit-btn{ width:auto; min-width:150px; } /* Bootstrap 的 w-100 會讓按鈕橫跨整個內容區(842px), 在會員頁裡跟表單欄位對齊比較好讀 */ .member-page .box .btn-block, .member-page .box .btn.w-100, .member-page .box .w-100.btn{ width:100%; max-width:560px; } /* 綁定第三方帳號那組圖示原本沒有尺寸,會用原圖大小塞爆版面 */ .login-else img,.login-else .content img{ width:40px; height:40px; object-fit:contain; flex:0 0 auto; } .login-else{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5); } .login-else .content{ display:flex; align-items:center; gap:10px; font-size:15px; } @media(max-width:991px){ .member>.container{ display:block; } .member-menu_web{ position:static; margin-bottom:var(--s4); } .member-page .box .form-group>.content, .member-page .box input,.member-page .box select,.member-page .box textarea{ max-width:none; } } /* 限寬後的按鈕要跟表單欄位切齊左緣,不要被父層推到中間 */ .member-page .box .btn-block, .member-page .box .btn.w-100{ margin-right:auto; margin-left:0; } /* 會員側選單的圖示原本是為淺底做的,在深底上偏暗 —— 提亮到跟文字同一階 */ .member-menu_web .img-fluid{ filter:brightness(1.9) saturate(.35); opacity:.85; } .member-menu_web .nav-link:hover .img-fluid, .member-menu_web .nav-link.active .img-fluid{ opacity:1; } /* ============================================================ 26. APP 版型 —— /action/ 是登入後的應用程式介面 行銷型頁尾(廠商 logo 牆、網站地圖、四欄連結)在這裡沒有作用, 整段收起來;只留一行法遵資訊(天條 53:文字只留「操作需要的」與「法遵必須留的」)。 HTML 完全沒動,拿掉這一段就整個回來。 ============================================================ */ footer .brand-logo,#footer .brand-logo, footer .footer-top,#footer .footer-top{ display:none; } footer,#footer,.footer{ margin-top:var(--sec); background:transparent; border-top:1px solid var(--line); padding:var(--s4) 0 var(--s5); } footer .container,#footer .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px var(--s4); text-align:center; } footer .copyright,#footer .copyright{ width:100%; font-size:12px; color:var(--ink-3); letter-spacing:.02em; } /* 頁面本身不長時,把頁尾壓到視窗底部,不要浮在半空 */ body{ display:flex; flex-direction:column; min-height:100vh; } #main,main{ flex:1 0 auto; } footer,#footer{ flex:0 0 auto; } /* ============================================================ 27. 底部導覽 —— App 的主要導航,不是附屬品 ============================================================ */ .ft-navbar{ position:fixed; left:0; right:0; bottom:0; z-index:1030; display:none; background:linear-gradient(180deg,rgba(26,16,3,.97),rgba(14,9,2,.99)); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-top:1px solid var(--line-strong); box-shadow:0 -8px 28px -14px rgba(0,0,0,.9); padding-bottom:env(safe-area-inset-bottom); } .ft-nav{ display:flex; align-items:stretch; } .ft-nav>li{ flex:1; min-width:0; } .ft-link{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:var(--ftnav-h); padding:8px 2px 6px; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); transition:color var(--t),transform var(--t-fast); } /* 圖示裝進一個容器,選中時整個亮起來 */ .ft-link img{ width:23px; height:23px; object-fit:contain; filter:brightness(1.55) saturate(.4); opacity:.78; transition:filter var(--t),opacity var(--t),transform var(--t); } .ft-link>div{ line-height:1.2; } /* 選中態:金字 + 金圖示 + 頂緣一條短指示條(天條與 UX 規範都要求「目前位置」看得出來) */ .ft-link::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%) scaleX(0); width:26px; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--gold-2),var(--gold-1),var(--gold-2)); transition:transform var(--t); } .ft-link.is-current,.ft-link.active{ color:var(--gold-1); } .ft-link.is-current::before,.ft-link.active::before{ transform:translateX(-50%) scaleX(1); } .ft-link.is-current img,.ft-link.active img{ filter:brightness(1.9) saturate(.25); opacity:1; transform:translateY(-1px); } /* 按下要有回饋,不然在手機上按了像沒反應 */ .ft-link:active{ transform:scale(.94); } .ft-link:active img{ opacity:1; } /* 登入/註冊這兩顆是行動呼籲,用金色點出來 */ .ft-link.auth-btn{ color:var(--gold-hi); } .ft-link.auth-btn img{ filter:brightness(2) saturate(.3); opacity:.95; } @media(max-width:991px){ .ft-navbar{ display:block; } body{ padding-bottom:calc(var(--ftnav-h) + env(safe-area-inset-bottom)); } /* App 版型:手機上頁尾只留版權一行,再多就是雜訊 */ footer,#footer{ margin-top:var(--s5); padding:var(--s3) 0 var(--s4); } } /* ============================================================ 28. 會員中心 —— 資料列對齊 卡片裡是「label + .content」的資料列,舊版沒有對齊規則, 欄位長短不一就會看起來很亂。改成固定欄寬的兩欄網格。 ============================================================ */ .member-page .box{ padding:0; overflow:hidden; } .member-page .box>h4,.member-page .box>form>h4{ display:flex; align-items:center; gap:10px; margin:0; padding:var(--s4) var(--s5); font-size:16px; font-weight:700; color:var(--gold-1); background:var(--sf-3); border-bottom:1px solid var(--line); } .member-page .box>h4::before{ content:""; width:3px; height:15px; border-radius:2px; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); } .member-page .box>form,.member-page .box>.form-group{ padding:var(--s2) var(--s5) var(--s4); } .member-page .box .form-group{ display:grid; grid-template-columns:168px minmax(0,1fr); align-items:center; gap:var(--s2) var(--s4); margin:0; padding:var(--s3) 0; border-bottom:1px solid rgba(58,49,34,.55); } .member-page .box .form-group:last-child{ border-bottom:0; } .member-page .box .form-group>label, .member-page .box .form-group>.control-label{ margin:0; font-size:14.5px; font-weight:600; color:var(--ink-2); line-height:1.4; } /* 欄位名稱後面那段英文是輔助,不要跟中文搶 */ .member-page .box .form-group>label span{ display:block; font-size:11px; font-weight:500; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; } .member-page .box .form-group>.content{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); font-size:16px; color:var(--ink); min-width:0; } .member-page .box .form-group>.content>span{ font-variant-numeric:tabular-nums; } .member-page .box .form-group>.content input, .member-page .box .form-group>.content select, .member-page .box .form-group>.content textarea{ max-width:none; } /* 只有輸入框的那一列不要被 align-items:center 壓住說明文字 */ .member-page .box .form-group:has(input,select,textarea){ align-items:start; } .member-page .box .form-group:has(input,select,textarea)>label{ padding-top:12px; } /* 綁定第三方帳號那塊獨立成一列,不要卡在資料列中間 */ .member-page .login-else{ display:flex; flex-wrap:wrap; gap:var(--s3); padding:var(--s3) 0; margin:0; border-bottom:1px solid rgba(58,49,34,.55); } .member-page .login-else .else-btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:var(--r-btn); background:var(--sf-3); border:1px solid var(--line); font-size:14.5px; font-weight:600; color:var(--ink-2); } .member-page .login-else .else-btn:hover{ border-color:var(--gold-2); color:var(--gold-1); } .member-page .login-else .else-btn img{ width:22px; height:22px; object-fit:contain; } .member-page .login-else .else-btn>div{ display:flex; align-items:center; } /* 頁面標題列 */ .member-page .member-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s3) var(--s5); margin-bottom:var(--s4); font-size:16px; font-weight:700; color:var(--ink); background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-card); } .member-page .member-top .m-taggle-bar{ flex:0 0 auto; } .member-page .member-top .m-taggle-bar a{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border-radius:var(--r-btn); background:var(--sf-3); border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink-2); } .member-page .member-top .m-taggle-bar img{ width:16px; height:16px; object-fit:contain; } .member-page>.user-info>p{ margin:0 0 var(--s3); font-size:14.5px; color:var(--ink-3); } .member-page .box+.box{ margin-top:var(--s4); } @media(max-width:767px){ .member-page .box>h4{ padding:var(--s3) var(--s4); } .member-page .box>form,.member-page .box>.form-group{ padding:var(--s1) var(--s4) var(--s3); } /* 手機改成上下排:固定欄寬在窄螢幕會把值擠到剩幾個字 */ .member-page .box .form-group{ grid-template-columns:1fr; gap:6px; } .member-page .box .form-group>label span{ display:inline; margin-left:6px; } .member-page .box .form-group:has(input,select,textarea)>label{ padding-top:0; } .member-page .member-top{ padding:var(--s3) var(--s4); font-size:15px; } } /* ---------- 會員中心:卡片標題與非制式區塊 ---------- 標題有三種擺法:.box>h4、.box>.inline-block>h4、.box>form>h4, 一起接手才不會有的卡片有標題列、有的沒有。 */ .member-page .box>.inline-block, .member-page .box>form>h4{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px var(--s3); margin:0; padding:var(--s4) var(--s5); background:var(--sf-3); border-bottom:1px solid var(--line); } .member-page .box>.inline-block>h4{ display:flex; align-items:center; gap:10px; margin:0; font-size:16px; font-weight:700; color:var(--gold-1); } .member-page .box>.inline-block>h4::before{ content:""; width:3px; height:15px; border-radius:2px; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); } /* 標題旁的紅字提醒改用警示色,不要用純紅硬碰深底 */ .member-page .box>.inline-block>span{ font-size:13px; color:var(--warn) !important; font-weight:600; } .member-page .box>.inline-block+form, .member-page .box>form{ padding:var(--s2) var(--s5) var(--s4); } /* 超商儲值那組沒有 .form-group,是 .label + 欄位的鬆散結構 —— 給它一致的垂直節奏與欄位寬度,至少左緣要對齊 */ .member-page .box-2 form>.label{ margin:var(--s3) 0 6px; } .member-page .box-2 form>.label label, .member-page .box-2 form label{ margin:0; font-size:14.5px; font-weight:600; color:var(--ink-2); } .member-page .box-2 form>input, .member-page .box-2 form>select, .member-page .box-2 form .content>input, .member-page .box-2 form .content>select{ max-width:440px; margin-bottom:var(--s2); } .member-page .box-2 form>div:not(.label):not(.form-group):not(.content){ font-size:14.5px; color:var(--ink-2); margin:var(--s3) 0 6px; } /* 按鈕不要因為落在網格第二欄就被拉滿 */ .member-page .box .form-group>.btn, .member-page .box .form-group>button{ justify-self:start; width:auto; } /* 實名認證那組:說明文字三行,靠上對齊才不會跟檔案選擇器錯開 */ .member-page .box-2 .form-group{ align-items:start; } .member-page .box-2 .form-group>label{ padding-top:10px; } .member-page .box-2 .form-group>label b, .member-page .box-2 .form-group>label a{ display:inline-block; margin-top:2px; } /* USDT 那張卡的標題是「只有文字、沒有 label 也沒有 .content」的 form-group, 不是 h4 —— 用結構判斷把它接成標題列,卡片才會跟其他張一致 */ .member-page .box form .form-group:not(:has(label)):not(:has(.content)):not(:has(input)):first-child{ display:flex; align-items:center; gap:10px; margin:calc(var(--s2) * -1) calc(var(--s5) * -1) var(--s2); padding:var(--s4) var(--s5); font-size:16px; font-weight:700; color:var(--gold-1); background:var(--sf-3); border-bottom:1px solid var(--line); } .member-page .box form .form-group:not(:has(label)):not(:has(.content)):not(:has(input)):first-child::before{ content:""; width:3px; height:15px; border-radius:2px; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); } /* 會員頁裡的 .table-responsive 只是包裝容器,不該再長一個外框。 但 overflow 不能跟著一起關掉 —— 手機上紀錄表格比容器寬(實測 452 vs 356), 關掉之後右邊那幾欄是被裁掉、不是可以捲,使用者永遠看不到。 只拿掉外框,水平捲動留著(天條 34:寬內容自己包一層水平捲動容器)。 */ .member-page .table-responsive, .member-page .table-responsive-md{ border:0; border-radius:0; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; } /* 超商店名查詢那排連結排成一列,不要各佔一行 */ .member-page .text-block{ display:inline-block; margin-right:var(--s2); color:var(--ink-2); font-size:14.5px; } .member-page .text-block ~ a{ display:inline-flex; align-items:center; min-height:36px; padding:0 12px; margin:0 4px 4px 0; border-radius:8px; background:var(--sf-3); border:1px solid var(--line); color:var(--gold-1) !important; font-size:14px; font-weight:600; text-decoration:none !important; } .member-page .text-block ~ a:hover{ border-color:var(--gold-2); color:var(--gold-hi) !important; } /* ---------- 底部導覽:目前位置 ---------- 樣板沒有在導覽項上標 active,而手機版的漢堡選單整個是隱藏的 (`#navbar` 帶 d-none d-lg-block),所以這五格是手機唯一的導覽 —— 「我在哪一頁」一定要看得出來。 用頁面本身的特徵判斷,不必改樣板、也不必加 JS。 */ body:has(.GameNav) .ft-nav a[href$="/action/"], body:has(.member-page) .ft-nav a[href*="Manger/account"], body:has(#page-deposit) .ft-nav a[href*="deposit"], body:has(.prestige-deposit-scope) .ft-nav a[href*="deposit"], body:has(.withdrawalForm) .ft-nav a[href*="withdrawal"], body:has(.activepage) .ft-nav a[href*="Active"]{ color:var(--gold-1); } body:has(.GameNav) .ft-nav a[href$="/action/"]::before, body:has(.member-page) .ft-nav a[href*="Manger/account"]::before, body:has(#page-deposit) .ft-nav a[href*="deposit"]::before, body:has(.prestige-deposit-scope) .ft-nav a[href*="deposit"]::before, body:has(.withdrawalForm) .ft-nav a[href*="withdrawal"]::before, body:has(.activepage) .ft-nav a[href*="Active"]::before{ transform:translateX(-50%) scaleX(1); } body:has(.GameNav) .ft-nav a[href$="/action/"] img, body:has(.member-page) .ft-nav a[href*="Manger/account"] img, body:has(#page-deposit) .ft-nav a[href*="deposit"] img, body:has(.prestige-deposit-scope) .ft-nav a[href*="deposit"] img, body:has(.withdrawalForm) .ft-nav a[href*="withdrawal"] img, body:has(.activepage) .ft-nav a[href*="Active"] img{ filter:brightness(1.95) saturate(.25); opacity:1; transform:translateY(-1px); } /* 圖示大小不一(有的圖自帶留白),裝進固定容器讓五格的視覺重量一致 */ .ft-link{ min-height:68px; padding:9px 2px 7px; } .ft-link img{ width:26px; height:26px; padding:1px; } :root{ --ftnav-h:68px; } /* 選中格加一層很淡的金光,指示條 + 亮字 + 光暈三層一起才夠明確 */ .ft-nav a::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 70% at 50% 0%,rgba(233,185,80,.16),transparent 70%); opacity:0; transition:opacity var(--t); } body:has(.GameNav) .ft-nav a[href$="/action/"]::after, body:has(.member-page) .ft-nav a[href*="Manger/account"]::after, body:has(#page-deposit) .ft-nav a[href*="deposit"]::after, body:has(.prestige-deposit-scope) .ft-nav a[href*="deposit"]::after, body:has(.withdrawalForm) .ft-nav a[href*="withdrawal"]::after, body:has(.activepage) .ft-nav a[href*="Active"]::after{ opacity:1; } /* ============================================================ 29. 錢包儀表 —— 三種裝置各自對齊 ============================================================ */ /* 電腦:帳號/餘額那塊跟旁邊兩顆快捷鍵要等高、基線對齊 */ #navbar .u-login{ align-items:stretch; gap:var(--s2); } #navbar .u-login .u-info{ min-height:52px; justify-content:center; padding:6px 14px; } #navbar .u-login .link{ gap:var(--s2); } #navbar .u-login .Wbtn{ height:52px; min-width:58px; } /* 平板與手機:原本是兩組 .userwallet 上下疊,餘額在左、按鈕擠到最右, 中間拉出一大段空白,而且第二組只有一顆按鈕 → 排出 L 型。 用 display:contents 把兩層容器攤平,直接在 .Wbody_box 上排網格: 第一列 帳號 + 餘額,第二列 三顆等寬按鈕。 */ .Wbody_box{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3) var(--s2); align-items:center; } .Wbody .usname{ grid-column:1 / 3; } .Wbody .userwallet{ display:contents; } .Wbody .u-cone{ grid-column:3; justify-self:end; text-align:right; font-size:24px; line-height:1.2; } .Wbody .u-cone:empty{ display:none; } .Wbody .u-conWbtn{ display:contents; } .Wbody .Wbtn{ width:100%; min-width:0; min-height:58px; padding:6px 4px; font-size:12.5px; text-align:center; } .Wbody .Wbtn>div{ line-height:1.25; } @media(max-width:400px){ .Wbody .u-cone{ font-size:21px; } .Wbody .Wbtn{ font-size:11.5px; min-height:54px; } } /* ============================================================ 30. 會員側選單 —— 空白列與圖示 ============================================================ */ /* 每個項目其實有兩個 :一個放圖示,一個放手機才顯示的說明文字。 桌機上第二個的內容被 d-md-none 藏掉,但 空殼還在 —— 就是那些留白列。 */ @media(min-width:768px){ .member-menu_web li>a:has(>.info.d-md-none){ display:none; } } .member-menu_web li:empty{ display:none; } /* 這批圖示是為淺底畫的深色圖,直接轉成白稿再依狀態調亮度, 不管原圖什麼顏色都能跟深底拉開對比 */ .member-menu_web .img-fluid, .member-menu_web img{ filter:brightness(0) invert(.86); opacity:1; transition:filter var(--t); } .member-menu_web li:hover img, .member-menu_web li.active img, .member-menu_web .nav-link:hover img{ filter:brightness(0) invert(.92) sepia(.55) saturate(4) hue-rotate(348deg); } /* ============================================================ 31. 會員中心 —— 按鈕列與間距 ============================================================ */ /* Google / LINE 綁定排成一列 */ .member-page .login-else{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); } .member-page .login-else .else-btn{ flex:0 0 auto; width:auto; min-width:200px; justify-content:flex-start; } .member-page .login-else .else-btn>div{ display:flex; align-items:center; gap:8px; } /* 卡片裡的說明文字原本貼著左邊框線,補上跟欄位一致的內距 */ .member-page .box>form>p, .member-page .box>form>div:not(.form-group):not(.label):not(.content):not(.login-else), .member-page .box>p{ padding-left:2px; padding-right:2px; font-size:14px; line-height:1.85; color:var(--ink-2); } /* 儲值區域那組下拉沒有間隔,各欄位之間補開 */ .member-page .box-2 form select, .member-page .box-2 form>input, .member-page .box-2 form .content>input, .member-page .box-2 form .content>select{ margin-bottom:var(--s3); } .member-page .box-2 form>.label{ margin-top:var(--s4); } .member-page .box-2 form>.label:first-of-type{ margin-top:var(--s2); } /* 超商店號查詢:標題自己一行,四個連結排成一列藥丸 */ .member-page .text-block{ display:block; width:100%; margin:var(--s3) 0 var(--s2); color:var(--ink-2); font-size:14.5px; font-weight:600; } /* 檔案上傳欄位在手機上會超出卡片 —— 鎖住寬度 */ .member-page input[type=file], .member-page .file-input, .member-page .input-group{ max-width:100%; } .member-page .input-group{ flex-wrap:wrap; } .member-page input[type=file]{ width:100%; } .member-page .form-group>.content{ max-width:100%; } /* ============================================================ 32. 儲值頁 —— 標題與間距 ============================================================ */ /* 這頁的區塊標題原本是頁內樣式的 .section-label,跟會員中心的卡片標題長得不一樣。 統一成同一套:深色標題列 + 金色短線。 */ .deposit-container{ background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; padding:0; margin-bottom:var(--s4); } .deposit-container>.section-label, .section-label{ display:flex; align-items:center; gap:10px; margin:0; padding:var(--s4) var(--s5); background:var(--sf-3); border-bottom:1px solid var(--line); font-size:16px; font-weight:700; color:var(--gold-1); letter-spacing:.01em; } .section-label::before{ content:""; width:3px; height:15px; border-radius:2px; flex:0 0 auto; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); } /* 標題底下的內容區給一致的內距,原本各欄位是黏在一起的 */ .payment-list, .deposit-container>.amount-card, .deposit-container>form, .deposit-container>div:not(.section-label){ padding:var(--s4) var(--s5) var(--s5); border:0; } .payment-list{ display:grid; gap:var(--s2); } /* 金額快選按鈕之間要有縫,不然像一整條 */ /* .amount-card 裝的是「金額輸入框」加「快捷金額」兩塊,是上下關係; 之前跟另外兩個元件共用橫排規則,結果把下面那組壓成 96px 的一條。 */ .amount-card{ display:flex; flex-direction:column; gap:var(--s3); } .quick-amounts,.amount-list{ display:flex; flex-wrap:wrap; gap:var(--s2); } .quick-amounts>.quick-btn,.amount-list>.quick-btn{ flex:0 0 auto; min-width:96px; } /* 主要 CTA 跟上方內容拉開距離 */ .submit-btn{ margin-top:var(--s4); } .prestige-deposit-scope .submit-btn, form>.submit-btn{ margin-top:var(--s4); margin-bottom:var(--s2); } /* ---------- 會員中心:三個收尾 ---------- */ /* 超商查詢那排本身帶著 .form-group,被兩欄網格拆成「標題在左、連結在右」。 它不是資料列,改回單欄橫排。 */ .member-page .box .form-group.row, .member-page .box .form-group:has(.text-block){ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); border-bottom:0; padding-top:var(--s3); } .member-page .box .form-group:has(.text-block) .text-block{ width:auto; margin:0 var(--s2) 0 0; } /* 注意事項是