/* =================================================================== * DVTV-000 パインズ Liquid Glass Design System v1.0 * 株式会社松尾電設 — 全パインズプラグイン共通デザインベースライン * =================================================================== */ /* --- デザイントークン --- */ :root { --glass-alpha-top: 0.40; --glass-alpha-mid: 0.18; --glass-alpha-bot: 0.28; --glass-blur: 30px; --glass-saturate: 180%; --glass-brightness: 1.06; --glass-border: rgba(255,255,255,0.55); --glass-halo: rgba(255,255,255,0.38); --glass-dome: rgba(255,255,255,0.75); --pine-text: #0f172a; --pine-text-2: #334155; --pine-text-3: #475569; --pine-text-4: #64748b; --pine-bg: #f0f4f8; --pine-shadow-rgba: rgba(15,23,42,0.22); --pine-text-shadow: 0 1px 1px rgba(255,255,255,0.6); --pine-text-shadow-soft: 0 1px 0 rgba(255,255,255,0.5); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --ease-accel: cubic-bezier(0.33, 0, 0.3, 1); --brand-1: #60a5fa; --brand-2: #6366f1; --brand-3: #a855f7; --brand-4: #ec4899; } /* --- ダークモード トークン --- */ .pine-dark, [data-theme="dark"].pine-root, .pine-root[data-theme="dark"] { --glass-alpha-top: 0.16; --glass-alpha-mid: 0.08; --glass-alpha-bot: 0.12; --glass-border: rgba(255,255,255,0.18); --glass-halo: rgba(147,197,253,0.15); --glass-dome: rgba(255,255,255,0.18); --pine-text: #f1f5f9; --pine-text-2: #cbd5e1; --pine-text-3: #94a3b8; --pine-text-4: #64748b; --pine-bg: #0b1020; --pine-shadow-rgba: rgba(0,0,0,0.5); --pine-text-shadow: 0 1px 1px rgba(0,0,0,0.4); --pine-text-shadow-soft: 0 1px 0 rgba(0,0,0,0.3); } /* --- ルート --- */ .pine-root, .dvtv-dash-wrap { font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; font-feature-settings: "palt"; color: var(--pine-text); font-size: 14px; line-height: 1.5; position: relative; background: var(--pine-bg); isolation: isolate; } /* --- カラーブロブ背景 --- */ .pine-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .pine-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.9; } .pine-b1 { width: 520px; height: 520px; top: -140px; left: -80px; background: radial-gradient(circle, #60a5fa 0%, #2563eb 45%, transparent 70%); } .pine-b2 { width: 460px; height: 460px; top: -100px; right: -120px; background: radial-gradient(circle, #c084fc 0%, #7c3aed 45%, transparent 70%); } .pine-b3 { width: 480px; height: 480px; bottom: -140px; left: 20%; background: radial-gradient(circle, #fde047 0%, #ca8a04 45%, transparent 70%); } .pine-b4 { width: 420px; height: 420px; top: 40%; right: -80px; background: radial-gradient(circle, #22d3ee 0%, #0891b2 45%, transparent 70%); } .pine-b5 { width: 400px; height: 400px; top: 55%; left: -60px; background: radial-gradient(circle, #34d399 0%, #059669 45%, transparent 70%); } .pine-b6 { width: 360px; height: 360px; bottom: -60px; right: 15%; background: radial-gradient(circle, #fcd34d 0%, #d97706 45%, transparent 70%); } .pine-b7 { width: 340px; height: 340px; top: 30%; left: 35%; opacity: 0.55; background: radial-gradient(circle, #a78bfa 0%, #6366f1 45%, transparent 70%); } /* ダークモード時のブロブ: 深い彩度 */ .pine-dark .pine-b1, [data-theme="dark"] .pine-b1 { background: radial-gradient(circle, #3b82f6 0%, #1e3a8a 45%, transparent 70%); opacity: 0.5; } .pine-dark .pine-b2, [data-theme="dark"] .pine-b2 { background: radial-gradient(circle, #7c3aed 0%, #4c1d95 45%, transparent 70%); opacity: 0.55; } .pine-dark .pine-b3, [data-theme="dark"] .pine-b3 { background: radial-gradient(circle, #f97316 0%, #9a3412 45%, transparent 70%); opacity: 0.35; } .pine-dark .pine-b4, [data-theme="dark"] .pine-b4 { background: radial-gradient(circle, #06b6d4 0%, #0e7490 45%, transparent 70%); opacity: 0.4; } .pine-dark .pine-b5, [data-theme="dark"] .pine-b5 { background: radial-gradient(circle, #10b981 0%, #065f46 45%, transparent 70%); opacity: 0.35; } .pine-dark .pine-b6, [data-theme="dark"] .pine-b6 { background: radial-gradient(circle, #f59e0b 0%, #78350f 45%, transparent 70%); opacity: 0.3; } .pine-dark .pine-b7, [data-theme="dark"] .pine-b7 { background: radial-gradient(circle, #6366f1 0%, #3730a3 45%, transparent 70%); opacity: 0.35; } .pine-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.25; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .pine-inner { position: relative; z-index: 2; } /* --- ガラス基本クラス --- */ .glass { position: relative; background: linear-gradient(135deg, rgba(255,255,255,var(--glass-alpha-top)) 0%, rgba(255,255,255,var(--glass-alpha-mid)) 50%, rgba(255,255,255,var(--glass-alpha-bot)) 100%); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.9), inset 0 -1px 0 0 rgba(255,255,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.25), 0 1px 2px rgba(15,23,42,0.06), 0 12px 32px -8px var(--pine-shadow-rgba), 0 0 32px var(--glass-halo); } .glass::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: radial-gradient(ellipse 120% 60% at 50% -15%, var(--glass-dome), transparent 55%); pointer-events: none; z-index: 0; } .glass > * { position: relative; z-index: 1; } .pine-dark .glass, [data-theme="dark"] .glass { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -8px var(--pine-shadow-rgba), 0 0 32px var(--glass-halo); } /* --- ヘッダー専用 --- */ .glass-header { background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.3) 100%); backdrop-filter: blur(36px) saturate(180%); -webkit-backdrop-filter: blur(36px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 20px rgba(15,23,42,0.05); } .pine-dark .glass-header, [data-theme="dark"] .glass-header { background: linear-gradient(135deg, rgba(30,41,59,0.5) 0%, rgba(15,23,42,0.3) 100%); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 20px rgba(0,0,0,0.2); } /* --- アイコン --- */ .pine-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; flex-shrink: 0; } .pine-icon-lg { width: 22px; height: 22px; fill: none; stroke: currentColor; } .pine-icon-xl { width: 26px; height: 26px; fill: none; stroke: currentColor; } .pine-icon-sm { width: 14px; height: 14px; fill: none; stroke: currentColor; } .pine-icon-xs { width: 12px; height: 12px; fill: none; stroke: currentColor; } .pine-icon, .pine-icon-lg, .pine-icon-xl, .pine-icon-sm, .pine-icon-xs { vertical-align: middle; } /* --- 3Dカラービーズ (アイコン容器) --- */ .bead { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,0.45); position: relative; overflow: hidden; transition: transform 0.4s var(--ease-smooth); flex-shrink: 0; } .bead::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 50%); pointer-events: none; } .bead-sm { width: 32px; height: 32px; border-radius: 10px; } .bead-xs { width: 28px; height: 28px; border-radius: 8px; } .bead-lg { width: 50px; height: 50px; border-radius: 14px; } .bead-blue { background: linear-gradient(135deg,#7dd3fc 0%,#2563eb 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(59,130,246,0.35), 0 8px 18px rgba(59,130,246,0.3); } .bead-violet { background: linear-gradient(135deg,#c4b5fd 0%,#6d28d9 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(139,92,246,0.35), 0 8px 18px rgba(139,92,246,0.3); } .bead-emerald { background: linear-gradient(135deg,#6ee7b7 0%,#047857 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(16,185,129,0.35), 0 8px 18px rgba(16,185,129,0.3); } .bead-rose { background: linear-gradient(135deg,#fda4af 0%,#be123c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(244,63,94,0.35), 0 8px 18px rgba(244,63,94,0.3); } .bead-amber { background: linear-gradient(135deg,#fcd34d 0%,#b45309 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(245,158,11,0.35), 0 8px 18px rgba(245,158,11,0.3); } .bead-sky { background: linear-gradient(135deg,#7dd3fc 0%,#0369a1 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(14,165,233,0.35), 0 8px 18px rgba(14,165,233,0.3); } .bead-pink { background: linear-gradient(135deg,#f9a8d4 0%,#be185d 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(236,72,153,0.35), 0 8px 18px rgba(236,72,153,0.3); } .bead-teal { background: linear-gradient(135deg,#5eead4 0%,#0f766e 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(20,184,166,0.35), 0 8px 18px rgba(20,184,166,0.3); } .bead-slate { background: linear-gradient(135deg,#cbd5e1 0%,#334155 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(100,116,139,0.35), 0 8px 18px rgba(100,116,139,0.3); } .bead-indigo { background: linear-gradient(135deg,#a5b4fc 0%,#4338ca 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 4px rgba(99,102,241,0.35), 0 8px 18px rgba(99,102,241,0.3); } /* --- ガラスチップ (バッジ) --- */ .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 10px; border-radius: 999px; position: relative; backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); letter-spacing: 0.02em; line-height: 1.3; } .chip::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,0.6), transparent 60%); pointer-events: none; } .chip-blue { background: linear-gradient(180deg, rgba(147,197,253,0.5) 0%, rgba(59,130,246,0.28) 100%); color: #1e40af; border: 1px solid rgba(147,197,253,0.65); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(59,130,246,0.25); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } .chip-green { background: linear-gradient(180deg, rgba(134,239,172,0.5) 0%, rgba(16,185,129,0.28) 100%); color: #065f46; border: 1px solid rgba(134,239,172,0.65); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(16,185,129,0.25); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } .chip-amber { background: linear-gradient(180deg, rgba(252,211,77,0.5) 0%, rgba(245,158,11,0.28) 100%); color: #92400e; border: 1px solid rgba(252,211,77,0.75); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(245,158,11,0.25); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } .chip-violet { background: linear-gradient(180deg, rgba(196,181,253,0.5) 0%, rgba(139,92,246,0.28) 100%); color: #5b21b6; border: 1px solid rgba(196,181,253,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(139,92,246,0.25); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } .chip-pink { background: linear-gradient(180deg, rgba(249,168,212,0.5) 0%, rgba(236,72,153,0.28) 100%); color: #9d174d; border: 1px solid rgba(249,168,212,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(236,72,153,0.25); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } .pine-dark .chip-blue, [data-theme="dark"] .chip-blue { color: #93c5fd; } .pine-dark .chip-green, [data-theme="dark"] .chip-green { color: #86efac; } .pine-dark .chip-amber, [data-theme="dark"] .chip-amber { color: #fcd34d; } .pine-dark .chip-violet, [data-theme="dark"] .chip-violet { color: #c4b5fd; } .pine-dark .chip-pink, [data-theme="dark"] .chip-pink { color: #f9a8d4; } /* --- プライマリボタン --- */ .pine-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 44px; background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #6366f1 100%); color: #fff; font-size: 13px; font-weight: 600; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.35); cursor: pointer; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 14px rgba(59,130,246,0.4), 0 14px 28px rgba(99,102,241,0.35); transition: all 0.25s; font-family: inherit; letter-spacing: -0.01em; } .pine-btn-primary::before { content: ''; position: absolute; inset: 1px; border-radius: 13px; background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(255,255,255,0.45), transparent 60%); pointer-events: none; } .pine-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); } .pine-btn-primary:active { transform: translateY(1px); filter: brightness(0.95); } .pine-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* --- kbd バッジ --- */ .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; padding: 3px 7px; background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.5)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.8); border-radius: 5px; color: #334155; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(15,23,42,0.1); } .kbd-light { font-size: 10px; padding: 2px 6px; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.45); border-radius: 5px; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pine-dark .kbd, [data-theme="dark"] .kbd { background: linear-gradient(180deg, rgba(71,85,105,0.6), rgba(30,41,59,0.6)); border-color: rgba(255,255,255,0.15); color: #cbd5e1; } /* --- ライブインジケータ --- */ .pine-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg,#4ade80,#10b981); box-shadow: 0 0 0 3px rgba(16,185,129,0.25), 0 0 10px rgba(16,185,129,0.7); animation: pineBeat 2s ease-in-out infinite; vertical-align: middle; } @keyframes pineBeat { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.85); } } /* --- アニメーション: スピン (全プラグインで統一) --- */ @keyframes aSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .anim-spin { display: inline-block; }