Skip to content

管理画面テーマ AuroraFlow のタブとコンテンツ領域をフラットなカード調にする - #881

Merged
yama merged 3 commits into
mainfrom
style/auroraflow-modernize
Oct 22, 2026
Merged

管理画面テーマ AuroraFlow のタブとコンテンツ領域をフラットなカード調にする#881
yama merged 3 commits into
mainfrom
style/auroraflow-modernize

Conversation

@yama

@yama yama commented Oct 22, 2026

Copy link
Copy Markdown
Member

概要

管理画面テーマ AuroraFlow の、上部ナビより下の作業領域を、フラットな白いカード調にしました。上部のオーロラ風グラデーションはそのままです。あわせて、ナビの未選択の文字と、選択中のタブを見やすくしています。変更は AuroraFlow のファイルだけです。

変更内容

  • タブ: 灰色の箱と枠線をやめ、1本の下線の上に並ぶフラットな見出しにした。選択中は青い下線と太い濃紺の文字、ホバーは淡い青の地色、キーボード操作時は青いフォーカス枠で示す
  • タブの中身: タブ列の下線を上辺とする白いカードにし、ごく薄い影で背景から浮かせた
  • ページタイトルとセクション見出しの灰色の帯をやめ、見出しと本文を、薄い枠と控えめな角丸の白いカードにまとめた
  • ツリー: 背景を明るいグレーにし、メインとの境目を 1px の線にした。ホバーと選択中を淡い青で示す（行の寸法・インデント・開閉は変えていない）
  • 操作ボタン: ボタン列を白いカードにした。保存などの主ボタンは濃い青、削除系は赤い文字と枠で示す
  • 入力欄: 左上だけ濃い立体的な枠をやめ、均一な薄い枠にした
  • グローバルナビ: 未選択の文字を明るくした（コントラスト比 3.9〜4.2 → 6.1〜6.8、WCAG AA を満たす）。選択中とホバーは白い文字と地色で、未選択より目立つ

確認手順

  • 管理画面テーマを AuroraFlow にして、ダッシュボード・リソース編集・エレメント管理を開く
    • タブが下線型で、選択中は太い濃紺の文字と青い下線になっていること。タブを切り替えても位置がずれないこと
    • 見出しと本文が白いカードにまとまり、灰色の帯がないこと
  • スニペットやリソースの編集画面で、削除ボタンが赤く、更新ボタンが濃い青であること
  • ツリーで項目にホバーしたときと選択したときに、淡い青で区別できること
  • ナビの未選択のメニュー名が読みやすく、選択中のメニューがはっきり分かること

Docker の検証環境で、Playwright（ヘッドレス Chromium）を使って上記を撮影し、変更前と比べた。

備考

🤖 Generated with Claude Code

yama and others added 2 commits October 23, 2026 01:49
@yama @claude
style(manager): AuroraFlow のタブとコンテンツ領域をフラットなカード調にする
56dcd2d 
上部のオーロラ風ナビはそのままに、その下の作業領域を整理する。

- タブ: 灰色の箱と枠をやめ、タブ列の下線に乗るフラットな見出しにする。選択中は青い下線、
  ホバーは淡い青の地色、キーボード操作時は青いフォーカス枠で示す
- タブの中身: タブ列の下線を上辺とする白いカードにし、ごく薄い影で背景から浮かせる
- ページタイトル(h1)の灰色の帯と、セクション見出しの濃い灰色の帯をやめ、
  見出しと本文を薄い枠と控えめな角丸の白いカードにまとめる
- ツリー: 明るいグレーにし、内側の影をやめてメインとの境目を 1px の線にする。
  ホバーと選択中を淡い青の地色(選択中は枠付き)で示す(行の寸法は変えない)
- 操作ボタン: 浮遊バーを白いカードにし、主ボタンはナビに合わせた濃い青、
  削除系(#delete / #deletedraft / onclick="delete…")は赤い文字と枠にする
- 入力欄の立体的な左上の濃い枠と内側の影をやめ、均一な薄い枠にする

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@yama @claude
style(manager): AuroraFlow のナビの未選択文字を明るくし、選択中のタブを太い濃紺にする
6a6fa87 
- グローバルナビの未選択項目の文字のアルファを 0.55 から 0.78 に上げる。
  背景の最も明るい所でもコントラスト比 3.9〜4.2 から 6.1〜6.8 になり WCAG AA を満たす。
  選択中・ホバーは白(1.0)と地色のままで、未選択より一段目立つ
- 選択中のタブを font-weight: 600 の濃紺(#0e2f47)にする。青い下線はそのまま。
  タブの位置と寸法は選択を切り替えても変わらない

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@yama yama added the enhancement 改善・機能追加 label Oct 22, 2026
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 22, 2026 •
edited
Loading

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-22T17:01:13.626627Z 6a6fa87 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@yama @claude
fix(manager): AuroraFlow でモーダルのフッターへ移った操作ボタン群に枠と影が出ないようにする
42471a8 
#actions に付けた白地の枠と影が、モーダルで shell.js がフッターへ移したときにも残っていた。
shell.css は位置と背景だけを戻すため、テーマ側で枠と影を外す。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This was referenced Oct 22, 2026
Merged
Merged
@yama
yama merged commit d16c6cb into main Oct 22, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

enhancement 改善・機能追加 バグ修正

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@yama