/* =========================================================================
ドット絵日記 — アプリ固有スタイル(差分のみ)
-------------------------------------------------------------------------
前提:
- 色・角丸・余白・文字は tokens.css のトークンを参照する。直値を書かない。
- 汎用部品(btn / card / field / chip / mds …)は components.css をそのまま使う。
ここに書くのは「ドット絵日記にしか無いもの」だけ。
- クラス名はデザインシステムの規則に合わせて「要素-分類」の2語。
========================================================================= */
/* hidden 属性を効かせる。
ブラウザ標準の [hidden] { display: none } は UA スタイルなので、
components.css の .btn { display: inline-flex } のような作者スタイルに負ける。
(デザインシステムの .modal で display を [open] にだけ書いているのと同じ理由)
ここで作者スタイルとして打ち直し、他のどの指定にも負けないよう !important を付ける。 */
[hidden] { display: none !important; }
/* 書き出し画像の文字色。DS の ink / subtext は赤寄りの黒だが、
書き出しだけは青に振っている(温かい紙の上でやわらかく読ませるため)。
フッターもその世界観に合わせたいので、ここでトークンにして共有する。
⚠️ app.js の OUT.textColor / OUT.dateColor と同じ値。片方を変えたらもう片方も。 */
:root {
--print-ink: #314272; /* ひとこと相当 */
--print-sub: #7d818a; /* 日付相当 */
}
body {
margin: 0;
background: var(--color-page-bg);
color: var(--color-ink);
font-size: var(--text-body);
letter-spacing: var(--tracking-body);
line-height: var(--leading-body);
font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
/* ============================================================ ページの骨格 */
.site-main {
padding: var(--space-group) 0;
}
/* ページ末尾の説明とクレジット。主張しないよう、サブテキストの色と大きさで置く */
.site-foot {
padding-bottom: var(--space-group);
text-align: center;
}
/* サービス名。3段の強さの一番上(名前=ink → 説明=subtext → クレジット=subtext) */
/* 書体はゴシックのまま。ニュアンスは字面ではなく、字間と行間の広さで作る。
── 書き出し画像(app.js の OUT)と同じ考え方。
DS の字間トークンは 0.02em / 0.05em の2種しかないが、ここは書き出しに寄せた
広い値を直値で置く(トークンは増やさない。余白と同じ方針)。 */
.site-name {
margin: 0 0 6px;
color: var(--print-ink);
letter-spacing: 0.16em;
}
/* 書き出しの日付と同じ「印」の質感。いちばん字間を広く取る */
.site-tagline {
margin: 0 0 18px;
color: var(--print-sub);
font-size: var(--text-caption);
letter-spacing: 0.24em;
}
/* 初めて来た人向けの短い説明。1000px幅いっぱいに流すと1行が長すぎるので幅を絞る。
行間は DS 既定(1.6)より広い 2.0。字間だけ空けると行が団子に見えるため */
.site-about {
max-width: 30em;
margin: 0 auto 18px;
color: var(--print-sub);
font-size: var(--text-caption);
letter-spacing: 0.12em;
line-height: 2;
}
.site-credit {
color: var(--print-sub);
font-size: var(--text-caption);
letter-spacing: 0.24em;
text-decoration: none;
}
.site-credit:hover {
color: var(--print-ink);
text-decoration: underline;
}
.site-credit:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* ============================================================ エディタの2カラム
左 = 絵を作る面(キャンバス)、右 = 道具(パレット・色)。
768px 以下では縦積みにして、キャンバスを上に置く。 */
.editor {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px;
align-items: start;
}
/* グリッドの子は既定で min-width: auto。中身が縮まず横に突き抜けるので 0 に倒す */
.editor > * { min-width: 0; }
.tool + .tool { margin-top: 12px; }
/* 道具の切り替えタブ。DSの .tab-list は inline-flex なので、器の幅いっぱいに広げる */
.tool-tabs {
display: flex;
width: 100%;
margin: 12px 0;
}
/* 見出しの右にボタンを添える行。カード内見出しの下余白はこちらで受ける */
.tool-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-inline);
/* 一覧側が padding 4px を持つぶん、ここは 8px にして見た目の間隔を 12px に揃える */
margin-bottom: 8px;
}
/* 見出しが余りを取り、右側のもの(件数・ボタン)は寄り添って並ぶ */
.tool-head .card-title { margin-bottom: 0; flex: 1 1 auto; }
/* ラベルの入れ替え。2つを同じマス目に重ねて、器は長いほうの幅で固定する。
JS で文字を差し替えるとボタンの幅が動くので、それを避けるための作り
(デザインシステムの「もっと見る」と同じ考え方)。
隠す側は display:none ではなく visibility:hidden。幅への寄与を残すため。 */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.swap-show { visibility: hidden; }
[data-state="hidden"] .swap-show { visibility: visible; }
[data-state="hidden"] .swap-hide { visibility: hidden; }
/* ============================================================ キャンバス(canvas)
塗る面は「凹み」で表す(入力欄と同じ意味づけ)。
中のドットが全面を覆うので、凹みは外側の枠で見せる。 */
.canvas {
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-inset);
padding: 16px;
}
/* ドットの並び。列数は --grid-size(JS が設定)で決まる。
正方形を保ちたいので aspect-ratio を器に持たせる。 */
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-size, 10), 1fr);
aspect-ratio: 1;
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
/* ドラッグで塗るとき、スマホで画面が一緒に動かないようにする */
touch-action: none;
}
.dot {
appearance: none;
border: 0;
padding: 0;
margin: 0;
aspect-ratio: 1;
cursor: crosshair;
/* マス目の目安。書き出し画像には出さない編集用の線。
10×10 は 6×6 より線が増えるので、そのぶん薄くする */
box-shadow: inset 0 0 0 1px rgb(52 48 48 / .05);
}
.dot:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: -2px;
z-index: 1;
}
/* ============================================================ ステージ / キャラクター層
グリッドとキャラクターをぴったり重ねる。層は素通し(pointer-events: none)にして
グリッドを塗れるようにし、キャラクターだけが受け取る。 */
.stage {
position: relative;
/* 二本指で拡縮するあいだ、ブラウザ側のページ拡大を起こさせない。
.grid にも同じ指定があるが、指が .stage の余白に落ちる場合に備えてここでも止める */
touch-action: none;
/* キャンバスの外にはみ出したキャラクターを切る。
書き出し画像もこの枠で切れるので、見えているものが結果と一致する。
これが無いと、端に置いたキャラが画面幅を押し広げてしまう。 */
overflow: hidden;
border-radius: var(--radius-md);
}
.chara-layer {
position: absolute;
inset: 0;
pointer-events: none;
}
/* 置かれたキャラクター1体。
left/top は「キャンバスに対する%」、幅は基準サイズ×倍率。
translate(-50%,-50%) で、x/y が体の中心を指すようにしている。 */
.chara {
/* JS が実寸を入れるが、CSS 単体でも成立するよう既定値を持たせる */
--chara-base: 33.333%;
position: absolute;
width: calc(var(--chara-base) * var(--chara-scale, 1));
aspect-ratio: 1;
/* 順番は書き出し(drawCharaOnCanvas)と必ず揃える。ずれると画面と結果が食い違う */
transform: translate(-50%, -50%) rotate(var(--chara-rotate, 0deg)) scaleX(var(--chara-flip, 1));
pointer-events: auto;
cursor: grab;
touch-action: none;
}
.chara svg { display: block; width: 100%; height: 100%; }
.chara[data-state="dragging"] { cursor: grabbing; }
/* 選択中。キャラクターは形が不定なので、囲む枠ではなく薄い座布団で示す */
.chara[aria-pressed="true"]::before {
content: "";
position: absolute;
inset: -6%;
border-radius: var(--radius-sm);
background: rgb(52 48 48 / .10);
outline: 2px dashed var(--theme-base);
outline-offset: 0;
}
/* 絵の入れ物。色を変えるたびにここだけ差し替えるので、× ボタンを巻き込まない */
.chara-art { display: block; width: 100%; height: 100%; }
/* 右上の × で消す。
親が rotate / scaleX を持つので、その逆をかけて常に正立させる。
親の transform は rotate(R) scaleX(F) の順なので、打ち消しは scaleX(F) rotate(-R)。
大きさは px 固定。キャラクターを拡大しても × は太らない。 */
.chara-del {
position: absolute;
top: -9px;
right: -9px;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-surface-raised);
box-shadow: var(--shadow-card), inset 0 0 0 1px rgb(52 48 48 / .14);
cursor: pointer;
transform: scaleX(var(--chara-flip, 1)) rotate(calc(var(--chara-rotate, 0deg) * -1));
}
.chara-del::before,
.chara-del::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 1.5px;
background: var(--color-ink);
}
.chara-del::before { transform: translate(-50%, -50%) rotate(45deg); }
.chara-del::after { transform: translate(-50%, -50%) rotate(-45deg); }
.chara-del:hover { background: var(--color-bg-strong); }
.chara-del:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: 2px;
}
/* キャラクタータブ以外では、キャラクターは**見えるが触れない**。
ドットを触るのが基本の状態にしておくため。 */
.stage:not([data-tab="chara"]) .chara { pointer-events: none; }
.stage:not([data-tab="chara"]) .chara-del { display: none; }
/* ============================================================ 色見本(swatch)
パレットの8色。押せるので浮かせる(チップと同じ意味づけ)。 */
.swatch-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-inline);
}
.swatch {
appearance: none;
border: 0;
padding: 0;
aspect-ratio: 1;
border-radius: var(--radius-md);
background: var(--swatch-color);
box-shadow: var(--shadow-card), inset 0 0 0 1px rgb(52 48 48 / .10);
cursor: pointer;
transition: transform .12s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch:active { transform: translateY(0); }
.swatch:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: 2px;
}
/* 選択中。色そのものを隠さないよう、外側に輪郭を足すだけにする */
.swatch[aria-pressed="true"] {
box-shadow: 0 0 0 3px var(--theme-base), var(--shadow-card);
}
/* ============================================================ パレット選択(palette)
名前だけだと選びにくいので、8色の帯を添えたカード型にする。 */
.palette-list {
display: grid;
gap: var(--space-inline);
/* 種類が増えていくので高さを止めて中でスクロールさせる。
浮き(shadow-card)が縁で切れないよう内側に余白を取り、その分を外へ戻す。 */
max-height: 320px;
overflow-y: auto;
overscroll-behavior: contain;
padding: 4px;
margin: 0 -4px;
}
.palette {
appearance: none;
border: 0;
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: var(--color-surface-raised);
box-shadow: var(--shadow-card);
color: var(--color-ink);
font-size: var(--text-caption);
letter-spacing: var(--tracking-body);
text-align: left;
cursor: pointer;
}
.palette:hover { background: var(--color-bg-strong); }
.palette:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: 2px;
}
.palette[aria-pressed="true"] {
box-shadow: 0 0 0 2px var(--theme-base), var(--shadow-card);
}
.palette-name { flex: 1 1 auto; }
/* 8色をそのまま帯で見せる。中身は JS が span で並べる */
.palette-strip {
display: flex;
flex: none;
width: 96px;
height: 18px;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: inset 0 0 0 1px rgb(52 48 48 / .10);
}
.palette-strip span { flex: 1 1 0; }
/* キャンバス下の操作行 */
.canvas-actions {
display: flex;
gap: var(--space-inline);
margin-top: 12px;
}
.canvas-actions .canvas-status {
margin-left: auto;
align-self: center;
color: var(--color-subtext);
font-size: var(--text-caption);
}
/* ============================================================ キャラクター選択(chara)
横スクロールで選ぶカード型UI(企画書 2-3)。
名前 + ドット絵アイコンを見せる。名前は選ぶための呼び名で、完成画像には出さない。 */
.tool-count {
color: var(--color-subtext);
font-size: var(--text-caption);
font-variant-numeric: tabular-nums;
}
.chara-picker {
display: flex;
gap: var(--space-inline);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
/* 浮きが縁で切れないよう内側に余白を取り、その分を外へ戻す */
padding: 4px;
margin: 0 -4px;
}
.chara-card {
appearance: none;
border: 0;
flex: none;
width: 72px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
border-radius: var(--radius-md);
background: var(--color-surface-raised);
box-shadow: var(--shadow-card);
color: var(--color-ink);
font-size: var(--text-caption);
letter-spacing: var(--tracking-body);
line-height: var(--leading-tight);
cursor: pointer;
}
.chara-card:hover { background: var(--color-bg-strong); }
.chara-card:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: 2px;
}
/* 「次に置くもの」として選ばれている状態 */
.chara-card[aria-pressed="true"] {
box-shadow: 0 0 0 2px var(--theme-base), var(--shadow-card);
}
/* 上限(2体)に達しているとき。理由は見出し右の「2 / 2」が示す */
.chara-card:disabled {
opacity: .45;
cursor: not-allowed;
}
.chara-card:disabled:hover { background: var(--color-surface-raised); }
.chara-thumb {
width: 40px;
height: 40px;
}
.chara-thumb svg { display: block; width: 100%; height: 100%; }
.chara-name { white-space: nowrap; }
/* ------------------------------------------------- 置いたキャラクターの設定 */
.chara-settings {
margin-top: 12px;
padding-top: 12px;
/* 上の選択UIとの境目。カードの中なので線はページ背景色で「溝」に見せる */
border-top: 1px solid var(--color-page-bg);
}
/* キャラクターの色は、器を背景色と共有する(.swatch-list)。
マスの大きさ・角丸・折り返しが自動でそろい、ここでは中身の並べ方だけ足す。
.chara-swatches は display: contents にして、色見本を親のグリッドへ直接並べる。 */
.chara-swatches { display: contents; }
/* 自由に選ぶ枠。色見本と同じ面だが、破線で「自分で決める場所」だと分かるようにする */
.chara-free {
appearance: none;
width: 100%;
aspect-ratio: 1;
height: auto;
padding: 0;
border: 0;
border-radius: var(--radius-md);
background: none;
box-shadow: var(--shadow-card);
outline: 2px dashed var(--color-subtext);
outline-offset: -2px;
cursor: pointer;
}
.chara-free:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: 2px;
}
/* ネイティブの内側の余白を消して、色を面いっぱいに出す */
.chara-free::-webkit-color-swatch-wrapper { padding: 2px; }
.chara-free::-webkit-color-swatch {
border: 0;
border-radius: 3px;
}
.chara-free::-moz-color-swatch {
border: 0;
border-radius: 3px;
}
/* スライダー。デザインシステムに無い部品なので、ここで意味づけを合わせる。
溝 = 凹み(--shadow-inset)、つまみ = 浮き(--shadow-card)。 */
.range {
appearance: none;
width: 100%;
height: 22px;
background: none;
cursor: pointer;
}
.range:focus-visible {
outline: 2px solid var(--theme-base);
outline-offset: 2px;
border-radius: var(--radius-pill);
}
.range::-webkit-slider-runnable-track {
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-surface);
box-shadow: var(--shadow-inset);
}
.range::-webkit-slider-thumb {
appearance: none;
width: 22px;
height: 22px;
margin-top: -7px; /* トラック(8px)の中心にそろえる */
border-radius: var(--radius-pill);
background: var(--color-surface-raised);
box-shadow: var(--shadow-card), inset 0 0 0 1px rgb(52 48 48 / .10);
}
.range::-moz-range-track {
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-surface);
box-shadow: var(--shadow-inset);
}
.range::-moz-range-thumb {
width: 22px;
height: 22px;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-surface-raised);
box-shadow: var(--shadow-card), inset 0 0 0 1px rgb(52 48 48 / .10);
}
/* 大きさ・左右反転・外すを1行に並べる。スライダーだけが余りを取る */
.setting-actions {
display: flex;
align-items: center;
gap: var(--space-inline);
margin-top: 12px;
}
/* ラベル付きのスライダー1組。2本並べても両方が同じ幅で縮む */
.slider {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 0;
min-width: 0;
}
.slider-label {
flex: none;
color: var(--color-subtext);
font-size: var(--text-caption);
}
.slider .range {
flex: 1 1 0;
min-width: 0;
}
.setting-actions .range {
flex: 1 1 0;
min-width: 70px;
}
.setting-actions .btn { flex: none; }
/* ============================================================ 日付とひとこと(entry)
入力そのものはデザインシステムの .field / .form をそのまま使う。
ここで足すのは文字数カウンタと、ひとこと欄の高さだけ。 */
/* iPad / iPhone の Safari は input[type="date"] にネイティブ固有の最小幅を持たせる。
そのため width:100% を指定しても縮まず、カードの枠から右へはみ出す。
(box-sizing の問題ではない。components.css の一括指定は効いている)
ネイティブの見た目を切ると、幅の指定が素直に効くようになる。
タップで日付ピッカーが開く挙動はそのまま残る。
※ デザインシステム側の `.field-box` が抱える問題なので、DSへ逆輸入する候補。 */
.field-box[type="date"] {
appearance: none;
-webkit-appearance: none;
min-width: 0;
max-width: 100%;
}
/* 器のほうも、中身が縮まないときに押し広げられないようにしておく */
.field { min-width: 0; }
/* 60文字の一言なので、DS 既定(96px)ほどの高さは要らない */
.entry-text {
min-height: 64px;
}
.entry-count {
text-align: right;
/* 数字が増減しても左右に踊らないように(DSの規則) */
font-variant-numeric: tabular-nums;
}
/* ============================================================ 書き出し(export)
出来た画像はダウンロードさせず、![]()
として見せて長押しで保存してもらう。
器はデザインシステムの .modal(ネイティブ