/* ===================================================================
* DVTV-000 パインズ Liquid Glass Design System v1.4.3
* 株式会社松尾電設 — 全パインズプラグイン共通デザインベースライン
* v1.1.0: 白モード(.pine-light)正式追加+フォントサイズトークン/階層を一元化
* v1.2.0: ボタンサイズ3段階(.pine-btn-sm / .pine-btn / .pine-btn-lg)追加
* v1.2.3: .anim-spinにanimation付与(回転修正)+全アイコンにflex-shrink:0
* v1.2.4: .anim-spinをホバー時のみ回転に修正(常時回転を廃止)
* v1.3.0: アイコンサイズ5段階切替([data-is="0"〜"4"])+共通ツールバー追加
* v1.4.0: カードサイズ5段階切替([data-cs="0"〜"4"])+カード毎固定指定クラス追加
* v1.4.1: DVTV-001カード(.dvtv-dash-card)をカードサイズ切替対象に追加
* v1.4.2: 固定サイズクラスの001対応拡張+JSはlocalStorage保存時のみ適用(data-size-lock対応)
* v1.4.3: カード毎の固定サイズ指定を一括切替(data-cs)より常に優先
* =================================================================== */
/* --- デザイントークン --- */
: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;
/* v1.1.0: フォントサイズトークン (デフォルト=中) */
--fs-base: 14px;
--fs-card-title: 14px;
--fs-card-desc: 11.5px;
--fs-stat: 28px;
--fs-stat-label: 11px;
--fs-h2: 22px;
--fs-h3: 16px;
--fs-h4: 13px;
--fs-hero-title: 26px;
--fs-hero-label: 11px;
--fs-hero-sub: 13px;
--fs-tab: 13px;
--fs-sub-tab: 12px;
--fs-toolbar: 11px;
--fs-small: 11px;
--fs-tiny: 10px;
--fw-base: 400;
--fw-bold-key: 700;
--fw-bold-title: 800;
--fw-bold-header: 800;
/* v1.3.0: アイコンサイズトークン (デフォルト=中、従来の固定pxと同値) */
--icon-xs: 12px;
--icon-sm: 14px;
--icon-md: 16px;
--icon-lg: 22px;
--icon-xl: 26px;
}
/* --- フォントサイズ階層 (data-fs属性で5段階切替) v1.1.0: DVTV-001から移管 --- */
.pine-root[data-fs="0"], [data-fs="0"].pine-root {
--fs-base: 11px; --fs-card-title: 11px; --fs-card-desc: 9px;
--fs-stat: 19px; --fs-stat-label: 9px;
--fs-h2: 16px; --fs-h3: 12px; --fs-h4: 10.5px;
--fs-hero-title: 17px; --fs-hero-label: 8.5px; --fs-hero-sub: 10px;
--fs-tab: 10px; --fs-sub-tab: 9px; --fs-toolbar: 9px;
--fs-small: 9.5px; --fs-tiny: 8.5px;
}
.pine-root[data-fs="1"], [data-fs="1"].pine-root {
--fs-base: 12.5px; --fs-card-title: 12.5px; --fs-card-desc: 10.5px;
--fs-stat: 23px; --fs-stat-label: 10px;
--fs-h2: 19px; --fs-h3: 14px; --fs-h4: 12px;
--fs-hero-title: 21px; --fs-hero-label: 10px; --fs-hero-sub: 11.5px;
--fs-tab: 11.5px; --fs-sub-tab: 10.5px; --fs-toolbar: 10px;
--fs-small: 10.5px; --fs-tiny: 9.5px;
}
.pine-root[data-fs="2"], [data-fs="2"].pine-root {
--fs-base: 14px; --fs-card-title: 14px; --fs-card-desc: 11.5px;
--fs-stat: 28px; --fs-stat-label: 11px;
--fs-h2: 22px; --fs-h3: 16px; --fs-h4: 13px;
--fs-hero-title: 26px; --fs-hero-label: 11px; --fs-hero-sub: 13px;
--fs-tab: 13px; --fs-sub-tab: 12px; --fs-toolbar: 11px;
--fs-small: 11px; --fs-tiny: 10px;
}
.pine-root[data-fs="3"], [data-fs="3"].pine-root {
--fs-base: 17px; --fs-card-title: 17px; --fs-card-desc: 14px;
--fs-stat: 34px; --fs-stat-label: 13.5px;
--fs-h2: 27px; --fs-h3: 19.5px; --fs-h4: 16px;
--fs-hero-title: 32px; --fs-hero-label: 13.5px; --fs-hero-sub: 16px;
--fs-tab: 16px; --fs-sub-tab: 14.5px; --fs-toolbar: 13.5px;
--fs-small: 13.5px; --fs-tiny: 12px;
}
.pine-root[data-fs="4"], [data-fs="4"].pine-root {
--fs-base: 21px; --fs-card-title: 21px; --fs-card-desc: 17px;
--fs-stat: 42px; --fs-stat-label: 16.5px;
--fs-h2: 33px; --fs-h3: 24px; --fs-h4: 19.5px;
--fs-hero-title: 40px; --fs-hero-label: 16.5px; --fs-hero-sub: 19.5px;
--fs-tab: 19.5px; --fs-sub-tab: 18px; --fs-toolbar: 16.5px;
--fs-small: 16.5px; --fs-tiny: 14.5px;
}
/* --- アイコンサイズ階層 (data-is属性で5段階切替) v1.3.0 ---
* 61ダッシュボードビルダーの文字サイズと同形式。localStorage: dvtv_dash_is */
.pine-root[data-is="0"], [data-is="0"].pine-root {
--icon-xs: 9px; --icon-sm: 10.5px; --icon-md: 12px; --icon-lg: 16.5px; --icon-xl: 19.5px;
}
.pine-root[data-is="1"], [data-is="1"].pine-root {
--icon-xs: 10.5px; --icon-sm: 12.5px; --icon-md: 14px; --icon-lg: 19px; --icon-xl: 23px;
}
.pine-root[data-is="2"], [data-is="2"].pine-root {
--icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 22px; --icon-xl: 26px;
}
.pine-root[data-is="3"], [data-is="3"].pine-root {
--icon-xs: 14.5px; --icon-sm: 17px; --icon-md: 19px; --icon-lg: 26.5px; --icon-xl: 31px;
}
.pine-root[data-is="4"], [data-is="4"].pine-root {
--icon-xs: 17px; --icon-sm: 19.5px; --icon-md: 22.5px; --icon-lg: 31px; --icon-xl: 36.5px;
}
/* --- カードサイズ階層 (data-cs属性で5段階切替) v1.4.0 ---
* 61ダッシュボードビルダーのカードサイズ(小/標準/大/特大)を000で汎用化。
* localStorage: dvtv_dash_cs。中(2)は規則なし＝各プラグインの既定を維持。
* ※61の .dvtv-db-card はカード毎の独自サイズを持つため対象外。
* v1.4.1: DVTV-001の .dvtv-dash-card / .dvtv-dash-card-desc を対象に追加。
* v1.4.3: 固定サイズ指定(.pine-card-sm/-lg/-featured)付きカードは一括切替の対象外
* (設定によるカード毎指定が常に優先されるように:not()で除外)。 */
.pine-root[data-cs="0"] .pine-card:not(.dvtv-db-card):not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured),
.pine-root[data-cs="0"] .dvtv-dash-card:not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured) { padding: 8px 10px !important; gap: 8px !important; }
.pine-root[data-cs="0"] .pine-card:not(.dvtv-db-card):not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured) p,
.pine-root[data-cs="0"] .pine-card:not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured) .pine-card-desc,
.pine-root[data-cs="0"] .dvtv-dash-card:not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured) .dvtv-dash-card-desc { display: none !important; }
.pine-root[data-cs="1"] .pine-card:not(.dvtv-db-card):not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured),
.pine-root[data-cs="1"] .dvtv-dash-card:not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured) { padding: 10px 12px !important; gap: 10px !important; }
.pine-root[data-cs="3"] .pine-card:not(.dvtv-db-card):not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured),
.pine-root[data-cs="3"] .dvtv-dash-card:not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured) { padding: 20px 24px !important; gap: 14px !important; }
.pine-root[data-cs="4"] .pine-card:not(.dvtv-db-card):not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured),
.pine-root[data-cs="4"] .dvtv-dash-card:not(.pine-card-sm):not(.pine-card-lg):not(.pine-card-featured) { padding: 26px 30px !important; gap: 16px !important; }
/* --- カード毎の固定サイズ指定 (61のsize列相当・コード側指定用) v1.4.0 ---
* v1.4.2: 001のspan構造(.dvtv-dash-card-title/-desc)対応+文字サイズ調整を追加 */
.pine-card-sm { padding: 10px 12px !important; gap: 10px !important; }
.pine-card-sm p,
.pine-card-sm .pine-card-desc,
.pine-card-sm .dvtv-dash-card-desc { display: none !important; }
.pine-card-sm .pine-card-title,
.pine-card-sm .dvtv-dash-card-title { font-size: calc(var(--fs-card-title) - 1px) !important; }
.pine-card-lg { padding: 20px 24px !important; gap: 14px !important; }
.pine-card-lg .pine-card-title,
.pine-card-lg .dvtv-dash-card-title { font-size: calc(var(--fs-card-title) + 3px) !important; }
.pine-card-lg .pine-card-desc,
.pine-card-lg .dvtv-dash-card-desc { font-size: calc(var(--fs-card-desc) + 1px) !important; }
.pine-card-featured {
padding: 24px !important;
grid-column: span 2;
grid-row: span 2;
min-height: 180px;
}
.pine-card-featured .pine-card-title,
.pine-card-featured .dvtv-dash-card-title {
font-size: calc(var(--fs-card-title) + 6px) !important;
white-space: normal !important;
}
.pine-card-featured .pine-card-desc,
.pine-card-featured .dvtv-dash-card-desc { font-size: calc(var(--fs-card-desc) + 2px) !important; }
@media (max-width: 768px) {
.pine-card-featured { grid-column: span 1; grid-row: auto; min-height: 120px; }
}
/* --- ダークモード トークン --- */
.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);
}
/* --- ライト(白)モード トークン v1.1.0 --- */
.pine-light,
[data-theme="light"].pine-root,
.pine-root[data-theme="light"] {
--glass-alpha-top: 0.0;
--glass-alpha-mid: 0.0;
--glass-alpha-bot: 0.0;
--glass-border: rgba(15,23,42,0.08);
--glass-halo: transparent;
--glass-dome: transparent;
--pine-text: #0f172a;
--pine-text-2: #334155;
--pine-text-3: #475569;
--pine-text-4: #64748b;
--pine-bg: #f6f7f9;
--pine-shadow-rgba: rgba(15,23,42,0.06);
--pine-text-shadow: none;
--pine-text-shadow-soft: none;
}
/* --- ルート --- */
.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: var(--fs-base);
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; }
/* ライトモード時: カラーブロブとノイズグレインを完全停止 v1.1.0 */
.pine-light .pine-canvas,
.pine-light .pine-grain,
[data-theme="light"] .pine-canvas,
[data-theme="light"] .pine-grain {
display: none !important;
}
.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);
}
/* ライトモード時のガラス: backdrop-filter停止、純白+1pxグレー枠 v1.1.0 */
.pine-light .glass,
[data-theme="light"] .glass {
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pine-light .glass::before,
[data-theme="light"] .glass::before {
display: none;
}
/* --- ヘッダー専用 --- */
.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);
}
/* ライトモード時のヘッダー v1.1.0 */
.pine-light .glass-header,
[data-theme="light"] .glass-header {
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
/* --- アイコン (v1.3.0: 固定px → CSS変数参照。data-isで5段階切替可) --- */
.pine-icon { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; flex-shrink: 0; }
.pine-icon-lg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; }
.pine-icon-xl { width: var(--icon-xl); height: var(--icon-xl); fill: none; stroke: currentColor; }
.pine-icon-sm { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; }
.pine-icon-xs { width: var(--icon-xs); height: var(--icon-xs); fill: none; stroke: currentColor; }
.pine-icon, .pine-icon-lg, .pine-icon-xl, .pine-icon-sm, .pine-icon-xs { vertical-align: middle; flex-shrink: 0; }
/* --- 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; }
/* --- ボタンサイズ 3段階 (v1.2.0) ---
* .pine-btn-primary 単体 = 44px(既定)。sm / lg を併記でサイズ切替。
* 小: 34px
* 中: 44px (pine-btn 明記も可)
* 大: 52px
* 複合セレクタ(詳細度0,2,0)で記述順に依存せず確実に上書き。
*/
.pine-btn-primary.pine-btn-sm {
height: 34px; padding: 0 14px; gap: 6px;
font-size: 11.5px; border-radius: var(--radius-sm);
}
.pine-btn-primary.pine-btn-sm::before { border-radius: 9px; }
.pine-btn-primary.pine-btn {
height: 44px; padding: 0 20px; gap: 8px;
font-size: 13px; border-radius: var(--radius-md);
}
.pine-btn-primary.pine-btn::before { border-radius: 13px; }
.pine-btn-primary.pine-btn-lg {
height: 52px; padding: 0 28px; gap: 10px;
font-size: 15px; border-radius: var(--radius-lg);
}
.pine-btn-primary.pine-btn-lg::before { border-radius: 19px; }
/* --- 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); }
}
/* v1.2.4: 常時回転を廃止し、ホバー時のみ回転。
* 直接の親要素をホバー(:hover > .anim-spin)またはアイコン自身をホバー、
* および代表的なインタラクティブ容器(button/a/.pine-btn-primary/.bead)ホバーで発火。
* ※body/html:hoverで常時発火する descendant セレクタは使わない。 */
.anim-spin { display: inline-block; }
.anim-spin:hover,
:hover > .anim-spin,
button:hover .anim-spin,
a:hover .anim-spin,
.pine-btn-primary:hover .anim-spin,
.bead:hover .anim-spin {
animation: aSpin 0.8s linear infinite;
}
/* ============================================================
v1.1.0: ライトモード追加分のチップ・kbd など細部調整
(.pine-darkに対応する.pine-light のペア)
============================================================ */
/* チップは色トーンを明るすぎないように維持。文字色のみ調整 */
.pine-light .chip-blue, [data-theme="light"] .chip-blue { color: #1e40af; }
.pine-light .chip-green, [data-theme="light"] .chip-green { color: #065f46; }
.pine-light .chip-amber, [data-theme="light"] .chip-amber { color: #92400e; }
.pine-light .chip-violet, [data-theme="light"] .chip-violet { color: #5b21b6; }
.pine-light .chip-pink, [data-theme="light"] .chip-pink { color: #9d174d; }
/* kbd ライトモードはデフォルト表示と同じ（明示しておく） */
.pine-light .kbd,
[data-theme="light"] .kbd {
background: linear-gradient(180deg, #ffffff, #f1f5f9);
border: 1px solid #cbd5e1;
color: #334155;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(15,23,42,0.06);
}
/* ============================================================
v1.3.0: 共通ツールバー (61ダッシュボードビルダー準拠)
アイコンサイズ5ボタン等に使用。dvtv_design_icon_size_toolbar()が出力。
============================================================ */
.pine-toolbar {
display: inline-flex; gap: 3px; align-items: center;
padding: 4px; border-radius: 12px;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(15,23,42,0.06);
}
.pine-dark .pine-toolbar, [data-theme="dark"] .pine-toolbar {
background: rgba(30,41,59,0.5);
border-color: rgba(255,255,255,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.pine-light .pine-toolbar, [data-theme="light"] .pine-toolbar {
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pine-tb-btn {
background: transparent; border: 0; border-radius: 8px;
padding: 5px 10px; cursor: pointer;
font-size: var(--fs-toolbar);
font-family: inherit; color: #64748b;
transition: all 0.2s;
display: inline-flex; align-items: center; gap: 4px;
line-height: 1.3;
}
.pine-tb-btn:hover {
background: rgba(255,255,255,0.5); color: #1e293b;
}
.pine-dark .pine-tb-btn, [data-theme="dark"] .pine-tb-btn { color: #94a3b8; }
.pine-dark .pine-tb-btn:hover, [data-theme="dark"] .pine-tb-btn:hover {
background: rgba(255,255,255,0.1); color: #f1f5f9;
}
.pine-tb-btn.is-active {
background: linear-gradient(180deg, rgba(59,130,246,0.9), rgba(99,102,241,0.9));
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 6px rgba(59,130,246,0.3);
}
.pine-tb-sep {
width: 1px; height: 18px;
background: rgba(148,163,184,0.3);
margin: 0 3px;
}
/* アイコンサイズツールバーの見本アイコン (ボタン内で大きさを段階表示) */
.pine-is-toolbar .pine-tb-btn svg { stroke: currentColor; fill: none; flex-shrink: 0; }