/* ============================================================
lib/components.css — yuto's dev tools 共通コンポーネント
全ツール共通のレイアウト・コンポーネントスタイル。
各ツールはこのファイルを で読み込んで、自分の style.css
ではツール固有のスタイルだけ書く。
トークン（色・shadow・radius・spacing・font）は lib/theme.css で
定義済み。このファイルではトークンを var() で参照するだけ。
このファイルを編集すると全ツールに即時反映されることに注意。
============================================================ */
/* ============================================================
Reset / Base
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* ============================================================
View switching
で .app-view-* を切り替え
============================================================ */
.app-view { display: none; }
body[data-view="list"] .app-view-list { display: block; }
body[data-view="editor"] .app-view-editor { display: block; }
/* ============================================================
Layout — max-width 1280px の中央寄せコンテナ
============================================================ */
.app-inner {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: var(--space-6) var(--space-10) var(--space-10);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* ============================================================
Header
左: [← 戻る] [アイコン] タイトル
右: テーマ切替ボタン + sync UI
下端に区切り線でメイン領域と分離
============================================================ */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-strong);
box-shadow: 0 1px 0 var(--shadow-light);
}
.app-header-left {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
flex: 1;
}
.app-header-right {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
/* ---- 戻るボタン（pill 型ニューモフィズム） ---- */
.app-back-btn {
height: 34px;
padding: 0 var(--space-3);
border: none;
border-radius: var(--radius-full);
background: var(--bg);
color: var(--text-dim);
font-size: 12px;
font-weight: 700;
font-family: var(--font-sans);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
box-shadow: var(--shadow-out-sm);
transition: box-shadow .15s, color .15s, transform .1s;
flex-shrink: 0;
text-decoration: none;
line-height: 1;
margin-right: var(--space-2);
}
.app-back-btn:hover { color: var(--accent); }
.app-back-btn:active {
box-shadow: var(--shadow-in-sm);
transform: scale(.96);
}
/* 広い画面では戻るボタンを左余白に配置（ネガティブマージンで引き出し） */
/* ※ editor ビューは max-width:none なので適用しない */
@media (min-width: 1500px) {
body[data-view="list"] .app-header-left > .app-back-btn:first-child {
margin-left: calc(-1 * (var(--space-10) + 70px));
}
}
/* ---- タイトルアイコン ---- */
.app-title-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--bg);
box-shadow: var(--shadow-out-sm);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
line-height: 1;
}
/* ---- タイトルテキスト ---- */
.app-title {
font-size: 22px;
font-weight: 800;
color: var(--text);
margin: 0;
line-height: 1.2;
letter-spacing: -.02em;
}
/* ---- ヘッダーアクション（編集画面の保存・読込・書出） ---- */
.app-header-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
justify-content: flex-end;
padding: 0 var(--space-4);
}
.app-header-actions .btn {
font-size: 12px;
padding: 8px 14px;
gap: 6px;
}
.app-header-actions .dropdown {
position: relative;
}
.app-header-actions .dropdown-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 8px;
padding: 4px;
min-width: 140px;
z-index: 100;
display: none;
flex-direction: column;
gap: 2px;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.app-header-actions .dropdown.open .dropdown-menu {
display: flex;
}
.app-header-actions .dropdown-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 5px;
font-size: 12px;
cursor: pointer;
color: var(--text-dim);
white-space: nowrap;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.app-header-actions .dropdown-item:hover {
background: var(--bg);
color: var(--text);
}
/* ---- Drive 同期プログレスバー ---- */
.drive-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: driveBar .9s ease-in-out infinite; }
@keyframes driveBar { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
/* ---- 同期状態ドット（エディタ画面用） ---- */
.sync-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: var(--muted); transition: background .2s, box-shadow .2s;
}
.sync-dot[data-status="synced"] { background: var(--success); box-shadow: 0 0 6px rgba(33,168,125,.55); }
.sync-dot[data-status="syncing"] { background: var(--accent); animation: syncPulse 1.2s ease-in-out infinite; }
.sync-dot[data-status="error"] { background: var(--danger); box-shadow: 0 0 6px rgba(255,114,114,.55); }
@keyframes syncPulse { 0%,100%{opacity:.4;transform:scale(.85)} 50%{opacity:1;transform:scale(1.1)} }
/* ---- 保存ボタン状態変化 ---- */
#save-btn { min-width: 80px; justify-content: center; }
.app-header-actions .btn-icon { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; }
.btn-save-done { background: var(--success); }
.btn-save-error { background: var(--danger); }
/* ---- 編集可能タイトル ---- */
.app-title-editable {
cursor: pointer;
border-radius: var(--radius-sm);
padding: 2px 8px;
transition: background .15s;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 60px;
}
.app-title-editable:hover {
background: color-mix(in srgb, var(--text) 8%, transparent);
}
.app-title-editable.editing {
cursor: text;
background: var(--bg);
box-shadow: var(--shadow-in-sm);
outline: none;
}
/* ---- 旧 back-link（後方互換 — 新規では使わない） ---- */
.app-back-link {
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
letter-spacing: .04em;
margin-top: 6px;
width: fit-content;
transition: color .15s;
line-height: 1;
}
.app-back-link:hover { color: var(--accent); }
/* ============================================================
Toolbar — セクションタイトル + アクション行
============================================================ */
.app-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.app-section-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0;
}
/* ============================================================
Main area
============================================================ */
.app-main {
flex: 1;
display: flex;
flex-direction: column;
}
/* ============================================================
Gallery grid — 標準規則：左上から流し込み
============================================================ */
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-5);
}
/* ============================================================
Card（ニューモフィズム）
============================================================ */
.app-card {
position: relative;
background: var(--bg);
border-radius: var(--radius);
padding: var(--space-4);
cursor: pointer;
transition: box-shadow .18s, transform .18s;
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--shadow-out);
text-decoration: none;
color: inherit;
}
.app-card:hover {
box-shadow: var(--shadow-out-lg);
transform: translateY(-2px);
}
.app-card-thumb {
height: 140px;
border-radius: var(--radius-sm);
background: var(--bg);
box-shadow: var(--shadow-in-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 36px;
opacity: .55;
overflow: hidden;
}
.app-card-thumb svg { width: 100%; height: 100%; display: block; opacity: 1; }
.app-card-info {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: 0 var(--space-1);
}
.app-card-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-card-meta {
font-size: 11px;
color: var(--text-dim);
display: flex;
gap: var(--space-3);
align-items: center;
}
.app-card-actions {
position: absolute;
top: var(--space-3);
right: var(--space-3);
display: flex;
gap: var(--space-1);
opacity: 0;
transition: opacity .15s;
}
.app-card:hover .app-card-actions { opacity: 1; }
.app-card-btn {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
border: none;
background: var(--bg);
color: var(--text-dim);
font-size: 12px;
cursor: pointer;
box-shadow: var(--shadow-out-sm);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color .12s, box-shadow .12s;
font-family: inherit;
}
.app-card-btn:hover { color: var(--accent); }
.app-card-btn.danger:hover { color: var(--danger); }
.app-card-btn:active { box-shadow: var(--shadow-in-sm); }
@media (pointer: coarse) { .app-card-actions { opacity: 1; } }
/* ============================================================
Empty state — 件数 0 のときの表示
============================================================ */
.app-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 80px var(--space-5);
color: var(--muted);
}
.app-empty-icon { font-size: 56px; opacity: .3; margin-bottom: var(--space-3); }
.app-empty-text { font-size: 14px; font-weight: 700; color: var(--text-dim); }
.app-empty-sub { font-size: 11px; }
/* ============================================================
Editor body — ツール固有の編集 UI を入れる箱
============================================================ */
.app-editor-body {
flex: 1;
background: var(--bg);
border-radius: var(--radius);
padding: var(--space-8);
min-height: 400px;
box-shadow: var(--shadow-in-sm);
}
/* ============================================================
Editor view 全幅オーバーライド
一覧画面と違って編集画面は max-width 解除・左右 padding 0
============================================================ */
body[data-view="editor"] .app-inner {
max-width: none;
min-height: 100vh;
padding: 0;
gap: 0;
}
body[data-view="editor"] .app-header {
padding: var(--space-5) var(--space-5) var(--space-4);
}
body[data-view="editor"] .app-editor-body {
flex: 1;
border-radius: 0;
box-shadow: none;
background: var(--bg);
padding: var(--space-5);
min-height: 0;
}
/* ============================================================
Buttons — .btn / .btn-primary / .btn-ghost / .btn-danger
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 24px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
border: none;
background: var(--bg);
color: var(--text);
box-shadow: var(--shadow-out-sm);
transition: box-shadow .15s, color .15s, background .15s, transform .1s;
white-space: nowrap;
text-decoration: none;
}
.btn:hover { color: var(--accent); }
.btn:active {
box-shadow: var(--shadow-in-sm);
transform: scale(.98);
}
.btn:disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover {
background: var(--accent-hover);
color: #fff;
}
.btn-ghost {
color: var(--text-dim);
}
.btn-ghost:hover { color: var(--text); }
.btn-danger {
color: var(--danger);
}
.btn-danger:hover { color: var(--danger); }
.btn-orange {
background: var(--orange);
color: #fff;
}
.btn-orange:hover { opacity: .85; color: #fff; }
.btn-teal {
background: var(--teal);
color: #fff;
}
.btn-teal:hover { opacity: .85; color: #fff; }
/* ============================================================
Forms — .form-row / .form-label / .form-input
============================================================ */
.form-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.form-label {
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
letter-spacing: .04em;
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-input {
width: 100%;
padding: 12px 16px;
background: var(--bg);
border: none;
border-radius: var(--radius-sm);
color: var(--text);
font-family: inherit;
font-size: 13px;
outline: none;
box-shadow: var(--shadow-in-sm);
transition: box-shadow .15s;
}
.form-input:focus { box-shadow: var(--shadow-in); }
.form-input::placeholder { color: var(--muted); }
textarea.form-input { resize: vertical; min-height: 80px; font-family: inherit; }
/* ============================================================
Modal — .modal-overlay / .modal / .modal-* 各領域
============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-5);
}
.modal-overlay[hidden] { display: none; }
.modal {
background: var(--bg);
border-radius: var(--radius-lg);
width: 100%;
max-width: 480px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow-out-lg);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-6);
}
.modal-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0;
}
.modal-close {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--bg);
border: none;
color: var(--text-dim);
cursor: pointer;
font-size: 14px;
box-shadow: var(--shadow-out-sm);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
}
.modal-close:hover { color: var(--accent); }
.modal-close:active { box-shadow: var(--shadow-in-sm); }
.modal-body { padding: var(--space-2) var(--space-6) var(--space-6); overflow-y: auto; }
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding-top: var(--space-2);
}
/* ============================================================
Radio button — .radio + 中の
============================================================ */
.radio {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text);
font-family: inherit;
user-select: none;
}
.radio input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--bg);
box-shadow: var(--shadow-in-sm);
cursor: pointer;
position: relative;
transition: box-shadow .15s;
flex-shrink: 0;
margin: 0;
}
.radio input[type="radio"]:hover {
box-shadow: var(--shadow-in);
}
.radio input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--accent);
}
.radio input[type="radio"]:disabled {
cursor: not-allowed;
opacity: .5;
}
/* ============================================================
Checkbox — .checkbox + 中の
============================================================ */
.checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text);
font-family: inherit;
user-select: none;
}
.checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--bg);
box-shadow: var(--shadow-in-sm);
cursor: pointer;
position: relative;
transition: box-shadow .15s, background .15s;
flex-shrink: 0;
margin: 0;
}
.checkbox input[type="checkbox"]:hover {
box-shadow: var(--shadow-in);
}
.checkbox input[type="checkbox"]:checked {
background: var(--accent);
box-shadow: var(--shadow-in-sm);
}
.checkbox input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 7px;
top: 3px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.checkbox input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: .5;
}
/* ============================================================
Select — .select（ネイティブ