/* 生きた見本（yukiglass）。build/skins/make.js が作る。手で直さない。 */ .pv-yukiglass{ display:block; padding:16px 14px; box-sizing:border-box; font-size:16px; --fs:1em; --nms:1; --avs:44px; --gap:12px; --cmw:100%; --cminh:0; background: radial-gradient(60% 45% at 18% 12%, #3a5a7a 0%, transparent 60%), radial-gradient(55% 50% at 82% 78%, #2c4a63 0%, transparent 62%), linear-gradient(150deg, #1b2733 0%, #26323f 55%, #1a222c 100%); } .pv-yukiglass .comment{ max-width:100%; } /* ★ 飾りの色は、必ずつまみ（--skin-*）に追わせること。 　 SVGの中に色を直に書くと、色の見本を切り替えても飾りだけ元の色のまま残る。 　 SVGはCSSの変数を読めないので、**マスク**にして background-color で塗る。 */ /* ============================================================ もりあげログ コメントスキン yukiglass — 雪ガラス 凍ったガラス。後ろが透け、ふちに霜、右上に雪の結晶。 「冬」とは別の一枚で、こちらは**雪と氷そのもの**が主役。 ★ 後ろが透けるので、映像や背景の上で使うと映える。 単色の背景では効果が出にくい。 触れるつまみは meta.json の params に書いたものだけ。 飾りは SVG を CSS に埋め込んでいるので、スキンは CSS 1枚で完結する。 ============================================================ */ .pv-yukiglass{ --skin-main:#BFE6FF; /* 氷の色（地） */ --skin-sub:#FFFFFF; /* 雪の色（霜のふち・光） */ --skin-accent:#8FE0FF; /* 結晶の色（飾り） */ --skin-font-fallback:"Zen Kaku Gothic New", system-ui, sans-serif; --sk-radius:14px; --sk-pad:12px 17px; --sk-alpha:.30; /* 地の透け具合。薄くしすぎると文字が読めなくなる */ /* 飾りの形。★ 色の見本（presets）から --skin-mark で選ぶ。 SVGはCSSの変数を読めないので、**マスク**にして background-color で塗る。 */ --sk-m-yuki:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cg%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M12%201v22M2.5%206.5l19%2011M21.5%206.5l-19%2011%22/%3E%3Cpath%20d=%22M12%204.6l2.2-2.2M12%204.6L9.8%202.4M12%2019.4l2.2%202.2M12%2019.4l-2.2%202.2M5.2%208.6L2.3%208M5.2%208.6l-.6-2.9M18.8%2015.4l2.9.6M18.8%2015.4l.6%202.9M18.8%208.6l2.9-.6M18.8%208.6l.6-2.9M5.2%2015.4l-2.9.6M5.2%2015.4l-.6%202.9%22/%3E%3C/g%3E%3C/svg%3E"); --sk-m-aurora:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M1.6%2015.4C4.4%208.6%208%205.2%2012%205.2s7.6%203.4%2010.4%2010.2c-2.9-2.8-6.3-4.2-10.4-4.2s-7.5%201.4-10.4%204.2z%22/%3E%3Cpath%20d=%22M4.4%2020.8c2.2-3.6%204.7-5.4%207.6-5.4s5.4%201.8%207.6%205.4c-2.3-1.6-4.8-2.4-7.6-2.4s-5.3.8-7.6%202.4z%22/%3E%3C/svg%3E"); --sk-m-asahi:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M2%2018.6h20v2H2z%22/%3E%3Cpath%20d=%22M12%205.4a7%207%200%200%201%207%207H5a7%207%200%200%201%207-7z%22/%3E%3Cpath%20d=%22M12%200l1.4%203.2h-2.8zM1.4%206.2l3.6%201.2-1.4%202.4zM22.6%206.2l-2.2%203.6-1.4-2.4z%22/%3E%3C/svg%3E"); --sk-m-kirameki:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M12%200c1%206.6%205.4%2011%2012%2012-6.6%201-11%205.4-12%2012-1-6.6-5.4-11-12-12%206.6-1%2011-5.4%2012-12z%22/%3E%3C/svg%3E"); --sk-m-diamond:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M12%201.6l7.4%206.2L12%2022.4%204.6%207.8z%22/%3E%3C/svg%3E"); --skin-mark:var(--sk-m-yuki); /* 既定の飾り */ } .pv-yukiglass .comment{ display:flex; align-items:flex-start; gap:12px; margin:0 0 var(--gap, 12px); font-family:var(--skin-font, var(--font, var(--skin-font-fallback))); background:none; border:none; } .pv-yukiglass .comment-icon{ flex:0 0 auto; width:var(--avs, 44px); height:var(--avs, 44px); margin-top:6px; border-radius:50%; overflow:hidden; background:var(--skin-main); /* 控え：color-mix を知らないブラウザ用（XSplitの内蔵ブラウザなど） */ background:color-mix(in srgb, var(--skin-main) 35%, transparent); border:1.5px solid var(--skin-sub); /* 控え：color-mix を知らないブラウザ用（XSplitの内蔵ブラウザなど） */ border:1.5px solid color-mix(in srgb, var(--skin-sub) 75%, transparent); box-shadow:0 4px 14px rgba(20,60,90,.3), 0 0 12px color-mix(in srgb, var(--skin-accent) 40%, transparent); } .pv-yukiglass .comment-icon img{ width:100%; height:100%; object-fit:cover; display:block; } .pv-yukiglass .comment-body{ min-width:0; flex:1 1 auto; } .pv-yukiglass .comment-name{ display:table; font-size:calc(.74em * var(--nms, 1)); line-height:1.4; margin:0 0 5px 5px; color:var(--skin-sub); letter-spacing:.12em; text-shadow:0 1px 4px rgba(0,30,60,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 凍ったガラス。地は薄く、下半分にだけ暗幕を敷いて文字を守る */ /* ★ backdrop-filter は使わないこと。 　 配信画面（ブラウザソース）は**その頁だけで描かれてから**配信ソフトに渡るので、 　 後ろにあるのは**何もない（透明）**。ぼかす相手が無いので、この指定は 　 OBSでもXSplitでも**見た目に何もしていない**。 　 それでいて、古い描画の仕組みでは**その箱の地と枠ごと消える**ことがある 　（XSplitで「雪の結晶は見えるのに枠が見えない」と言われた。2026-09-07。 　　結晶は箱の**外**に置いてあるので、そこだけが生き残っていた）。 　 得るものが無く、失うものが大きいのでやめた。ガラスの感じは 　 --sk-alpha（地の透け具合）で出す。 */ .pv-yukiglass .comment-block{ position:relative; display:inline-block; max-width:var(--cmw, 100%); min-height:var(--cminh, 0); box-sizing:border-box; padding:var(--sk-pad); border-radius:var(--sk-radius); background:var(--skin-main); /* 控え：color-mix を知らないブラウザ用（XSplitの内蔵ブラウザなど） */ background:color-mix(in srgb, var(--skin-main) calc(var(--sk-alpha) * 100%), transparent); background-image:linear-gradient(180deg, rgba(0,20,40,.14) 0%, rgba(0,20,40,.36) 100%); border:1.5px solid var(--skin-sub); /* 控え：color-mix を知らないブラウザ用（XSplitの内蔵ブラウザなど） */ border:1.5px solid color-mix(in srgb, var(--skin-sub) 55%, transparent); box-shadow:0 6px 22px rgba(10,40,70,.3), inset 0 1px 0 color-mix(in srgb, var(--skin-sub) 65%, transparent), inset 0 0 22px color-mix(in srgb, var(--skin-sub) 18%, transparent); } /* ふちの霜。上と角に白いもやを乗せる */ .pv-yukiglass .comment-block::before{ content:""; position:absolute; inset:1px; border-radius:calc(var(--sk-radius) - 2px); background: radial-gradient(120% 60% at 10% -10%, var(--skin-sub), transparent 60%), radial-gradient(90% 50% at 95% 105%, var(--skin-sub), transparent 62%); /* 控え：color-mix を知らないブラウザ用（XSplitの内蔵ブラウザなど） */ background: radial-gradient(120% 60% at 10% -10%, color-mix(in srgb, var(--skin-sub) 45%, transparent), transparent 60%), radial-gradient(90% 50% at 95% 105%, color-mix(in srgb, var(--skin-sub) 26%, transparent), transparent 62%); pointer-events:none; } /* 右上と左下の雪の結晶。 ★ ふわっと出ては消える（2026-09-07の要望）。2つは**逆の間**で光らせる （同じ間だと2つが一緒に消えて、飾りが無い時間ができる）。 ★ `prefers-reduced-motion` で止めないこと。 これは**視聴者に見せる**動きで、止めるかどうかを決めたのは配信者ではない。 ★ 左下は `.comment-body::after` に置く。`.comment-block` の擬似要素は 2つとも使い切っている（::before＝ふちの霜／::after＝右上の結晶）。 */ .pv-yukiglass .comment-block::after{ content:""; position:absolute; right:8px; top:-12px; width:25px; height:25px; background-color:var(--skin-sub); -webkit-mask:var(--skin-mark) center/contain no-repeat; mask:var(--skin-mark) center/contain no-repeat; filter:drop-shadow(0 0 6px rgba(143,224,255,.95)); animation:yukiglass-sk-yuki-kira 4.2s ease-in-out infinite; } .pv-yukiglass .comment-body{ position:relative; } .pv-yukiglass .comment-body::after{ content:""; position:absolute; left:5px; bottom:-10px; width:20px; height:20px; background-color:var(--skin-sub); -webkit-mask:var(--skin-mark) center/contain no-repeat; mask:var(--skin-mark) center/contain no-repeat; filter:drop-shadow(0 0 5px rgba(143,224,255,.8)); animation:yukiglass-sk-yuki-kira 4.2s ease-in-out infinite; animation-delay:-2.1s; /* 右上と入れ違いに光らせる */ pointer-events:none; } @keyframes yukiglass-sk-yuki-kira{ 0% { opacity:0; transform:scale(.7) rotate(-12deg); } 30% { opacity:1; transform:scale(1) rotate(0deg); } 70% { opacity:.95; transform:scale(1.02) rotate(6deg); } 100% { opacity:0; transform:scale(.78) rotate(14deg); } } .pv-yukiglass .comment-text{ position:relative; z-index:1; font-size:var(--fs, 1em); line-height:1.64; word-break:break-word; color:#fff; /* 縁取りを強めに。後ろが何色でも文字の形が残る。 */ text-shadow:0 1px 2px rgba(0,20,45,.85), 0 0 6px rgba(0,20,45,.6); } .pv-yukiglass .comment[data-owner="true"] .comment-block{ background:var(--skin-accent); /* 控え：color-mix を知らないブラウザ用（XSplitの内蔵ブラウザなど） */ background:color-mix(in srgb, var(--skin-accent) calc(var(--sk-alpha) * 130%), transparent); border-color:var(--skin-sub); /* 控え：color-mix を知らないブラウザ用（XSplitの内蔵ブラウザなど） */ border-color:color-mix(in srgb, var(--skin-sub) 80%, transparent); } .pv-yukiglass .comment[data-moderator="true"] .comment-name::after{ content:"MOD"; margin-left:.6em; font-size:.84em; color:var(--skin-accent); letter-spacing:.1em; } .pv-yukiglass .comment[data-member="true"] .comment-name::before{ content:"❄"; margin-right:.35em; font-size:.9em; } .pv-yukiglass .comment[data-hasgift="true"] .comment-block{ box-shadow:0 6px 22px rgba(10,40,70,.3), 0 0 0 3px color-mix(in srgb, var(--skin-accent) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--skin-sub) 65%, transparent); } .pv-yukiglass .gift-head{ display:flex; align-items:baseline; gap:.5em; } .pv-yukiglass .gift-amount{ font-size:.9em; font-weight:700; color:var(--skin-accent); text-shadow:0 1px 2px rgba(0,20,45,.7); } /* 霜が張るように、静かに出す */ .pv-yukiglass .comment .bd.first,.pv-yukiglass .comment[data-first="true"] .comment-block{ animation:yukiglass-sk-yuki .6s ease; } @keyframes yukiglass-sk-yuki{ 0%{ opacity:0; transform:scale(.97); filter:blur(2px); } 100%{ opacity:1; transform:none; filter:none; } } @media(prefers-reduced-motion:reduce){ .pv-yukiglass .comment .bd.first,.pv-yukiglass .comment[data-first="true"] .comment-block{ animation:none; } } /* ============================================================ もりあげログ コメントスキン ― どのスキンにも要る土台 ★ ここは**飾りを持たない**。色も形も書かない。 各スキンの skin.css の末尾に、この中身をそのまま貼って配る （スキンはCSS1枚で完結させる決まりなので、@import はしない）。 ★ 直したら、build/skins/make.js で作り直して zip を配り直すこと。 ============================================================ */ /* ------------------------------------------------------------ バッジ・印・絵文字・スタンプ コメント欄が渡してくる材料。名前の中と本文の後ろに入る。 .cbadge / .cbadge-t サイト側のバッジ（画像と文字） .bd.first / .back / .cp / .notice 初コメ・おかえり・ポイント・フォロー .em 絵文字 .sticker スタンプ画像 .uid ID（設定で出したときだけ） ------------------------------------------------------------ */ .pv-yukiglass .comment-name .cbadge{ width:1.1em; height:1.1em; vertical-align:-.15em; margin-right:.25em; border-radius:3px; object-fit:contain; } .pv-yukiglass .comment-name .cbadge-t{ margin-right:.3em; font-size:.9em; } .pv-yukiglass .comment-name .bd{ display:inline-block; margin-left:.45em; padding:0 .5em; border-radius:999px; font-size:.82em; line-height:1.7; vertical-align:.05em; white-space:nowrap; } .pv-yukiglass .comment-name .bd.first{ background:#1ecf73; color:#04351d; } .pv-yukiglass .comment-name .bd.back{ background:#5b9bd5; color:#04203a; } .pv-yukiglass .comment-name .bd.cp{ background:#f0b429; color:#3a2408; } .pv-yukiglass .comment-name .bd.notice{ background:#c98ae0; color:#2c0e38; } .pv-yukiglass .comment-name .uid{ margin-left:.4em; font-size:.82em; opacity:.65; } .pv-yukiglass .comment-block .em{ height:1.5em; vertical-align:-.35em; margin:0 .1em; } .pv-yukiglass .comment-block .sticker{ display:block; max-width:140px; max-height:140px; margin-top:.45em; border-radius:8px; } /* 翻訳の最中は、うっすら知らせる */ .pv-yukiglass .comment[data-translating="true"] .comment-text{ opacity:.72; font-style:italic; } /* 名前が長いときは、名前だけを詰めて印を守る。 ★ ここで display を指定しないこと。名前を吹き出しの上に置くスキンで 横並びになってしまう（実際にそれで位置がずれた）。 */ .pv-yukiglass .comment-body{ min-width:0; } .pv-yukiglass .comment-name{ min-width:0; max-width:100%; } .pv-yukiglass .comment-name .nm-text{ display:inline-block; max-width:100%; vertical-align:bottom; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pv-yukiglass .comment-name .bd,.pv-yukiglass .comment-name .cbadge,.pv-yukiglass .comment-name .uid{ flex:0 0 auto; } .pv-yukiglass .comment-name .nm-text{ flex:0 1 auto; } /* ------------------------------------------------------------ 右寄せへの追従 本体は #wrap に align-items:flex-end を付けて右へ寄せる。 行が幅いっぱいだと寄る余地が無いので、内容の幅にしておく。 ------------------------------------------------------------ */ .pv-yukiglass .comment{ align-self:flex-start; } .pv-yukiglass .align-right .comment{ align-self:flex-end; } .pv-yukiglass .align-right .comment-body{ display:flex; flex-direction:column; align-items:flex-end; } .pv-yukiglass .align-right .comment{ flex-direction:row-reverse; } /* ------------------------------------------------------------ 本体の「表示スタイル」「形」を打ち消す 行には本体と同じ 'c' が付いている（出現アニメのため）。 打ち消さないと、スキンの吹き出しの後ろに本体のカードが二重に出る。 ------------------------------------------------------------ */ .pv-yukiglass .comment.c{ background:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; clip-path:none !important; text-shadow:none; } .pv-yukiglass.p0{--skin-main:#BFE6FF;--skin-sub:#FFFFFF;--skin-accent:#8FE0FF;--skin-mark:var(--sk-m-yuki);} .pv-yukiglass.p1{--skin-main:#FFFFFF;--skin-sub:#FFFFFF;--skin-accent:#CFEBFF;--skin-mark:var(--sk-m-yuki);} .pv-yukiglass.p2{--skin-main:#8BE3C8;--skin-sub:#EAFBFF;--skin-accent:#B79BFF;--skin-mark:var(--sk-m-aurora);} .pv-yukiglass.p3{--skin-main:#FFC9D8;--skin-sub:#FFFFFF;--skin-accent:#FFE7A8;--skin-mark:var(--sk-m-asahi);} .pv-yukiglass.p4{--skin-main:#9FD2F0;--skin-sub:#FFFFFF;--skin-accent:#FFFFFF;--skin-mark:var(--sk-m-kirameki);} .pv-yukiglass.p5{--skin-main:#5E7A8C;--skin-sub:#EAF4FF;--skin-accent:#BFE6FF;--skin-mark:var(--sk-m-diamond);}