/* ============================================================ * アスクリウォレット共通デザイントークン (theme.css) * オプトイン設計: body.uw-bg と .uw-* クラスのみ。 * 既存ページのBootstrap/独自CSSは上書きしない。 * ============================================================ */ :root { --uw-bg: #0f172a; --uw-panel: #1e293b; --uw-card: rgba(30, 41, 59, .75); --uw-border: rgba(255, 255, 255, .12); --uw-primary: #6366f1; --uw-primary-hover: #4f46e5; --uw-text: #f8fafc; --uw-dim: #cbd5e1; --uw-muted: #94a3b8; --uw-green: #22c55e; --uw-red: #ef4444; --uw-yellow: #f0b90b; --uw-radius: 16px; } /* オプトイン背景 (ページ側でを付けた時のみ適用) */ body.uw-bg { background: var(--uw-bg); color: var(--uw-text); } /* ガラス調カード */ .uw-card { background: var(--uw-card); border: 1px solid var(--uw-border); border-radius: var(--uw-radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ボタン共通 */ .uw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: 12px; border: 1px solid transparent; background: var(--uw-panel); color: var(--uw-text); font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .15s ease; } .uw-btn:hover { transform: translateY(-1px); } .uw-btn-primary { background: var(--uw-primary); color: #fff; } .uw-btn-primary:hover { background: var(--uw-primary-hover); } .uw-btn-outline { background: transparent; border-color: var(--uw-border); color: var(--uw-dim); } .uw-btn-outline:hover { border-color: var(--uw-primary); color: var(--uw-text); } /* ダークテーブル */ .uw-table { width: 100%; border-collapse: collapse; color: var(--uw-text); font-size: 14px; } .uw-table thead th { color: var(--uw-muted); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--uw-border); white-space: nowrap; } .uw-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--uw-dim); } .uw-table tbody tr { transition: background .15s ease; } .uw-table tbody tr:hover { background: rgba(255, 255, 255, .04); } /* 小型バッジ */ .uw-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; background: rgba(99, 102, 241, .15); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, .3); } .uw-badge-green { background: rgba(34, 197, 94, .15); color: #4ade80; border-color: rgba(34, 197, 94, .3); } .uw-badge-red { background: rgba(239, 68, 68, .15); color: #f87171; border-color: rgba(239, 68, 68, .3); } .uw-badge-yellow { background: rgba(240, 185, 11, .15); color: var(--uw-yellow); border-color: rgba(240, 185, 11, .3); } /* 共通スクロールバー (スクロールバーのみのグローバル指定は許可) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #474d57; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #5e6673; } /* Firefox用 (スクロールバーのみ) */ html { scrollbar-width: thin; scrollbar-color: #474d57 transparent; }