枠のスキンを作る

機能の四角い枠（ランキング（コメント・投げ銭）・参加管理・ピックアップ（ストック）・アンケート・セットリスト・出席カレンダー・レイド主の紹介カード・カウンター・トーナメント表（枠の見た目を選べる機能すべて。増えればここも増える））の見た目を、素材として配れます。1つ作れば、枠の見た目を選べる機能のどれにでも使えます。

書き方

見た目は panel.css 1枚に書きます。枠は .ml-panel と書いてください。もりあげログが、選ばれた機能の枠だけに効くように直します。

使える変数

色（meta.json の colors）

meta.json の colors（bg・fg・accent・sub・line、どれも #rrggbb）。選ばれたときに、その機能の色の欄へ流し込む（あとから利用者が直せる）。bg と fg がそろわないと流し込まない

• 文字の色・大きさ・余白・幅は書かないでください。その機能の設定が決めます（書いても使われません）。
• 絵は panel.css と同じ場所に置き、url(ファイル名) で指します。
• 絵や模様は、浮かせた層（::before・::after、position:absolute）に描きます。

コメントスキンも、そのまま使えます

取り込み済みのコメント表示のスキンは、そのまま枠のスキンとしても選べる。.comment-block（と ::before・::after）の地・縁・枠の絵・飾りだけを取り出す。名前・本文・種類分け（[data-owner] など）は使われない

入れた人は

〔設定 → 素材〕で入れたあと、各機能の設定の〔枠の見た目〕で選びます（「取り込んだ枠のスキン」の中に並びます）。

見本

meta.json（sample-panel）

{
  "format": 1,
  "kind": "panel-skin",
  "id": "sample-panel",
  "name": "見本の枠のスキン",
  "nameEn": "Sample Panel Skin",
  "version": "1.0.0",
  "author": "Lino Labs",
  "license": {
    "text": "作り方の見本です。改変も再配布も自由です。ご自分の素材の土台にしてください。",
    "url": "https://lino-labs.com/docs/creators/"
  },
  "description": "二重の線と、左上の小さな印を持つ枠。ランキング・参加管理・セットリストなど、枠の見た目を選べる機能すべてで使えます。",
  "descriptionEn": "A panel with a double outline and a small mark at the top left. Works in every feature that lets you pick a frame look.",
  "tags": ["見本", "型紙"],
  "tagsEn": ["Sample", "Template"],
  "colors": { "bg": "#14201c", "fg": "#f2f5f0", "accent": "#9fe1cb", "sub": "#a9b8b0", "line": "#2d4a40" }
}

panel.css（sample-panel・ほかには mark.png）

/* 枠のスキンの見本（kind: panel-skin）。決まりは build/pack-samples/panel-api.json。
   ・枠は .ml-panel と書く。もりあげログが、選ばれた機能の枠だけに効くように直す
   ・文字の色・大きさ・余白・幅は書かない（その機能の設定が決める）
   ・地は var(--ml-panel-bg, 既定) で塗る。利用者がその機能で選んだ地の色が効く */

.ml-panel{
  background:var(--ml-panel-bg, #14201c);
  border:2px solid #9fe1cb;
  border-radius:10px;
  box-shadow:0 0 0 4px rgba(159,225,203,.25), 0 8px 24px rgba(0,0,0,.45);
}

/* 内側のもう1本の線。浮かせて置く層は中身の下に描かれる */
.ml-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px dashed rgba(159,225,203,.55);
  border-radius:6px;
  pointer-events:none;
}

/* 左上の印。絵は panel.css と同じ場所に置き、ファイル名だけで指す */
.ml-panel::after{
  content:"";
  position:absolute;
  left:-7px; top:-7px;
  width:14px; height:14px;
  background:url(mark.png) center/contain no-repeat;
  pointer-events:none;
}