/* ========================================= 黃暘網站 lite 版 共用樣式 所有頁面都 想改顏色、字型，改這裡就全站一起變 ========================================= */ /* ========================================= 預設顏色（每個人都可以用招牌上的「配色」自己挑，存在自己的瀏覽器） 想改「預設」顏色：改下面色碼 ========================================= */ :root { --page: #CC0000; --text: #99FF99; --link: #FFFF66; /* 頁面：紅底淺綠字 */ --marq-bg: #000000; --marq-text: #FF2200; /* 跑馬燈 */ --sign-bg: #CC0000; --sign-border: #FFCC00; /* 招牌 */ --sign-title: #FFFFFF; --sign-text: #99FF99; --nav-bg: #CCFFCC; --nav-border: #006600; /* 選單 */ --nav-text: #0000EE; --nav-big: #CC0000; --h2-bg: #000080; --h2-text: #FFFFFF; /* 標題 */ --foot-bg: #FFCC00; --foot-text: #000000; /* 頁尾 */ } /* ---- 字型：內文楷體，缺字用 Noto Sans ---- */ body { font-family: 'Kaiti TC', 'Kaiti SC', 'Kaiti', '標楷體', 'DFKai-SB', 'Noto Sans CJK TC', 'Noto Sans TC', sans-serif; background: url(images/photo_1.jpg); /* 背景 tile */ background-size: 120px 120px; margin: 8px; } /* Logo 一律襯線體 */ .logo { font-family: 'Noto Serif CJK TC', 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif; } /* ---- 中英切換（不用動）---- */ .en .zh, html:not(.en) .en { display: none; } /* ---- 整頁外框 ---- */ .page { max-width: 980px; margin: 0 auto; background: var(--page); color: var(--text); } a { color: var(--link); } img { max-width: 100%; height: auto; display: block; } /* ---- 跑馬燈 ---- */ marquee { background: var(--marq-bg); color: var(--marq-text); font-size: 20px; padding: 4px 0; } /* ---- 招牌 ---- */ header { background: var(--sign-bg); border: 6px solid var(--sign-border); padding: 8px; color: var(--sign-text); } header h1 { margin: 0; color: var(--sign-title); font-size: 56px; } header h1 small { font-size: 28px; } header .buttons { float: right; text-align: right; } /* ---- 配色小視窗（招牌右上「配色」）---- */ .colors summary { cursor: pointer; display: inline; } .colors label { display: block; color: var(--sign-text); font-size: 15px; } .colors input { vertical-align: middle; width: 36px; height: 22px; padding: 0; border: 1px solid #000; } /* ---- 計數器、友站按鈕（入口頁）---- */ .counter, .friends { text-align: center; margin: 12px auto; font-size: 14px; } .counter img { display: inline-block; image-rendering: pixelated; } .friends { border: 2px groove var(--text); padding: 8px; max-width: 360px; } .friends img { display: inline-block; height: 31px; image-rendering: pixelated; border: 1px solid #AAA; } /* ---- 選單：招牌下方一整排不規則格子（內容在 menu.html）---- */ nav { background: var(--nav-bg); border-bottom: 3px solid var(--nav-border); padding: 6px; } nav summary { display: none; } /* 寬螢幕不顯示「選單」按鈕 */ #menu { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; } #menu a { border: 2px solid var(--nav-border); padding: 2px 8px; text-decoration: none; background: var(--nav-bg); color: var(--nav-text); flex-grow: 1; text-align: center; } #menu a:nth-child(4n+1) { color: var(--nav-big); } #menu a:nth-child(3n) { background: var(--page); color: var(--link); } /* 交錯底色，看起來更亂 */ #menu .s1 { font-size: 30px; font-weight: bold; flex-grow: 3; } #menu .s2 { font-size: 20px; font-weight: bold; flex-grow: 2; } #menu .s3 { font-size: 15px; } #menu a.here { outline: 3px dashed var(--nav-big); outline-offset: -6px; } /* 目前所在頁 */ main { padding: 6px 12px 16px; } /* ---- 不規則格子（作品頁）：w2 = 兩格寬，h2 = 兩格高 ---- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 6px; } .box { border: 3px solid var(--text); padding: 4px; display: flex; flex-direction: column; text-decoration: none; color: var(--text); overflow: hidden; } .box img { flex: 1; min-height: 0; width: 100%; object-fit: cover; } .box b { font-size: 15px; line-height: 1.3; padding-top: 3px; } .box small { font-size: 12px; } .w2 { grid-column: span 2; } .h2 { grid-row: span 2; } .box.w2 b, .box.h2 b { font-size: 20px; } /* ---- 作品詳細頁 ---- */ .detail h2 { background: var(--h2-bg); color: var(--h2-text); font-size: 26px; padding: 4px 10px; margin: 10px 0 4px; } .detail .meta { font-size: 14px; margin: 0 0 10px; } .detail .desc { font-size: 17px; line-height: 1.8; max-width: 720px; } .detail .pics img { margin: 0 0 10px; border: 2px solid var(--text); max-width: 760px; } .detail .video { aspect-ratio: 16 / 9; width: 100%; max-width: 760px; border: 2px solid var(--text); } /* ---- 部落格 ---- */ .post { border-bottom: 2px dashed var(--text); padding: 6px 0 12px; } .post h3 { font-size: 22px; margin: 0 0 6px; } /* ---- 留言板 ---- */ .guestbook { width: 100%; height: 720px; border: 3px solid var(--text); background: #FFF; } /* ---- IG：方格，點了放大 ---- */ .ig { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; } .ig img { aspect-ratio: 1; object-fit: cover; width: 100%; border: 2px solid var(--text); } dialog.lightbox { padding: 0; border: 4px solid var(--sign-border); background: #000; max-width: 92vw; } dialog.lightbox img { max-width: 90vw; max-height: 86vh; } dialog.lightbox::backdrop { background: rgba(0, 0, 0, .8); } /* ---- Reels：直式影片排一排 ---- */ .reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .reels figure { margin: 0; border: 3px solid var(--text); padding: 4px; } .reels video { width: 100%; aspect-ratio: 9 / 16; background: #000; display: block; } .reels figcaption { font-size: 16px; font-weight: bold; padding-top: 4px; } /* ---- 遊戲天堂：純文字格子 ---- */ .games .box { justify-content: center; text-align: center; } .games .box b { font-size: 24px; } .games .box.w2 b, .games .box.h2 b { font-size: 34px; } /* ---- 遊戲：畫面框 + 開始/結束蓋板 + 排行榜 ---- */ .stage { position: relative; border: 4px solid var(--text); background: #000; max-width: 760px; } .stage canvas { display: block; width: 100%; height: 340px; cursor: crosshair; touch-action: manipulation; } .cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: var(--sign-bg); color: var(--sign-text); padding: 16px; } .cover[hidden] { display: none; } .cover h3 { margin: 0; font-size: 32px; color: var(--sign-title); } .cover .big { font-size: 64px; font-weight: bold; color: var(--sign-title); line-height: 1; } .cover button, .cover input { font-size: 18px; font-family: inherit; } .board { max-width: 760px; border: 3px solid var(--text); margin: 12px 0 0; padding: 0; } .board h3 { background: var(--h2-bg); color: var(--h2-text); margin: 0; padding: 2px 8px; font-size: 18px; } .board ol { margin: 0; padding: 6px 10px 8px 34px; } .board li span { display: inline-block; min-width: 60%; } .board li:nth-child(-n+3) { font-weight: bold; font-size: 18px; } /* ---- 點擊喵喵 ---- */ .meow { text-align: center; max-width: 760px; border: 3px solid var(--text); padding: 8px; } .meow-scores { display: flex; justify-content: space-around; font-size: 18px; } .meow-scores b { font-size: 30px; display: block; } .meow-cat { background: none; border: 0; padding: 0; cursor: pointer; } .meow-cat img { width: 160px; height: 160px; object-fit: contain; image-rendering: pixelated; transform-origin: bottom center; } .meow-cat:disabled { opacity: .35; } .meow-cat.bop img { animation: bop .28s cubic-bezier(.36,.07,.19,.97); } @keyframes bop { 18% { transform: scaleY(.72) scaleX(1.14) rotate(-5deg) translateY(8px); } 55% { transform: scaleY(1.22) scaleX(.92) rotate(4deg) translateY(-6px); } 80% { transform: scaleY(.96) rotate(-2deg); } } .meow-plus { position: fixed; pointer-events: none; z-index: 99; font-weight: bold; color: #FFFF66; text-shadow: 1px 1px 0 #000; animation: up .7s linear forwards; } @keyframes up { to { transform: translateY(-65px); opacity: 0; } } dialog.gate { border: 4px solid var(--sign-border); background: var(--sign-bg); color: var(--sign-text); text-align: center; font-family: inherit; } dialog.gate input, dialog.gate button { font-size: 18px; font-family: inherit; display: block; margin: 8px auto; } dialog.gate::backdrop { background: rgba(0, 0, 0, .6); } /* ---- 撐十秒 ---- */ .nopress { background: var(--page); text-align: center; padding: 16px; min-height: 360px; } .np-num { font-size: 96px; font-weight: bold; line-height: 1; } .nopress progress { width: 80%; height: 18px; accent-color: var(--sign-bg); } .np-btn { display: block; margin: 18px auto 8px; width: 170px; height: 170px; border-radius: 50%; border: 6px solid #000; background: #FF0000; color: #FFF; font-size: 30px; font-weight: bold; font-family: inherit; cursor: pointer; } .np-btn small { font-size: 15px; } .np-btn:disabled { opacity: .4; cursor: default; } .np-btn.danger { animation: pulse .5s infinite alternate; } @keyframes pulse { to { transform: scale(1.08); background: #FFCC00; color: #000; } } .np-hint { font-size: 22px; font-weight: bold; } .cover.boom { background: #000; color: #FF2200; } .cover.boom h3 { color: #FF2200; font-size: 40px; animation: pulse .15s 6 alternate; } .cover.win h3 { font-size: 40px; } /* ---- 像素塗鴉牆 ---- */ .pixel-tools { max-width: 520px; } .pixel-tools i { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--text); vertical-align: middle; } #palette { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; margin: 6px 0; } #palette button { aspect-ratio: 1; border: 1px solid #000; padding: 0; cursor: pointer; } #palette button.on { outline: 3px solid var(--link); outline-offset: 1px; } .pixel-board { max-width: 500px; border: 3px solid var(--text); line-height: 0; } .pixel-board canvas { width: 100%; height: auto; image-rendering: pixelated; cursor: crosshair; touch-action: none; } /* ---- 拍貼機：相機、拍好的照片、框疊在同一格 ---- */ .booth { position: relative; max-width: 500px; aspect-ratio: 4 / 3; background: #000; border: 4px solid var(--text); } .booth video, .booth canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .booth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .booth-ctl select, .booth-ctl button { font-size: 18px; font-family: inherit; } /* ---- 限時聊天室 ---- */ .chat-box { max-width: 640px; border: 3px solid var(--text); padding: 8px; } .chat-box textarea { width: 100%; box-sizing: border-box; font-size: 17px; font-family: inherit; } .chat-box input, .chat-box button { font-size: 17px; font-family: inherit; } .chat-count { font-size: 18px; margin: 14px 0 6px; } .chat { max-width: 640px; border: 2px solid var(--text); padding: 6px 8px; margin: 0 0 6px; position: relative; } .chat p { margin: 4px 0 6px; font-size: 17px; overflow-wrap: anywhere; } .chat .t { float: right; } .chat .bar { display: block; height: 4px; background: var(--link); } .chat.urgent .t { color: #FF6666; font-weight: bold; } .chat.dying { animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .4; } } /* ---- 燒照片 ---- */ .fire-wrap { position: relative; max-width: 480px; border: 4px solid var(--text); background: #000; cursor: pointer; line-height: 0; } .fire-wrap.dragover { outline: 4px dashed #FFDC32; } #fireCanvas { width: 100%; height: auto; image-rendering: pixelated; } .drop-hint-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .3s; } .drop-hint { color: #FFD250; font-size: 20px; text-align: center; line-height: 1.6; text-shadow: 0 0 8px #000; } .photo-anim { position: absolute; width: 90px; height: 90px; left: 50%; top: 50%; margin: -45px 0 0 -45px; background-size: cover; background-position: center; border: 2px solid #FFC850; opacity: 0; pointer-events: none; } .photo-anim.falling { animation: photoFall .65s cubic-bezier(.4, 0, .6, 1) forwards; } @keyframes photoFall { 0% { opacity: 0; transform: translateY(-140px) scale(1.1) rotate(-4deg); } 15% { opacity: .92; transform: translateY(-25px) scale(1) rotate(0); } 55% { opacity: .7; transform: translateY(22px) scale(.82) rotate(3deg); } 85% { opacity: .25; transform: translateY(55px) scale(.45) rotate(-1deg); } 100% { opacity: 0; transform: translateY(75px) scale(.15) rotate(4deg); } } .result-wrap { display: none; max-width: 480px; border: 4px solid var(--text); background: #000; padding: 6px; text-align: center; color: #FFF; } .result-wrap.show { display: block; } .result-wrap h3 { margin: 0 0 6px; } #resultCanvas { max-width: 100%; image-rendering: pixelated; } .result-wrap button { font-size: 17px; font-family: inherit; } /* ---- 校花校草票選 ---- */ .vote-tabs button { font-size: 20px; font-family: inherit; font-weight: bold; padding: 4px 14px; } .vote-tabs button.on { background: var(--h2-bg); color: var(--h2-text); } .cand { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .cand figure { margin: 0; width: 200px; border: 3px solid var(--text); padding: 4px; text-align: center; min-height: 120px; } .cand ul { list-style: none; padding: 0; margin: 0; font-size: 17px; } .vote button, .vote input { font-size: 18px; font-family: inherit; } .vote progress { width: 100%; max-width: 480px; height: 18px; accent-color: var(--h2-bg); } .vote .odo { background: #000; color: #FF2200; font-size: 22px; padding: 0 6px; letter-spacing: 3px; } .vote .ok { color: var(--link); } .vote .err { color: #FFAAAA; } /* ---- 結婚申請書 ---- */ .marry fieldset { max-width: 720px; border: 3px solid var(--text); margin: 0 0 12px; padding: 6px 12px 12px; } .marry legend { background: var(--h2-bg); color: var(--h2-text); font-weight: bold; padding: 0 8px; font-size: 18px; } .marry input, .marry textarea, .marry button { font-size: 17px; font-family: inherit; } .marry textarea { width: 100%; box-sizing: border-box; } .marry .err { color: #FFAAAA; font-weight: bold; } .marry .hp { position: absolute; left: -9999px; } /* 防機器人欄位，人看不到 */ .marry .upload.dragover { outline: 3px dashed var(--link); } .marry .preview { display: none; } .marry .preview.show { display: block; } .marry .preview img { max-width: 240px; border: 2px solid var(--text); } .marry .declare { max-width: 720px; border: 2px dashed var(--text); padding: 8px; } .marry .submit { font-size: 22px; font-weight: bold; padding: 6px 24px; } #marry-success { display: none; max-width: 720px; border: 3px solid var(--text); padding: 12px; text-align: center; } .marry .stamp { display: inline-block; border: 5px double #FF4444; color: #FF4444; font-size: 34px; font-weight: bold; padding: 6px 14px; transform: rotate(-8deg); } .pager { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; margin: 16px 0; } /* 小貼紙：熱騰騰 */ mark { background: #FFFF00; color: #CC0000; font-weight: bold; font-size: 14px; padding: 0 4px; } /* ---- 關於 / 履歷：每區一個

，底下