/* ======================================================================
rk — らてきちツール共通デザイン
Deploy Studio の見た目をそのまま全体の基準にしたもの。
base.html が読み込むので、どのページでも使える。
…
の内側で .rk-card / .rk-btn などが効く
以前は deploy_studio / flow_studio / gpu_studio / spec_studio が
それぞれ _rk_style.html に同じ定義を持っていた。共通部分はここに集め、
各アプリの _rk_style.html には「そのアプリ固有のパーツ」だけを残している。
====================================================================== */
:root {
--rk-ink: #26313F;
--rk-ink-2: #3A4656;
--rk-muted: #6C7686;
--rk-line: #E4E8EF;
--rk-bg: #F5F6F8;
--rk-accent: #DD7A2C;
--rk-accent-deep: #C05F14;
--rk-accent-bg: #FBEFE1;
--rk-live: #0E8A6C;
--rk-live-bg: #E1F3ED;
--rk-warn: #A97615;
--rk-warn-bg: #FCF3DF;
--rk-danger: #C2453A;
--rk-danger-bg: #FBEAE8;
--rk-font: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
--rk-mono: "IBM Plex Mono", ui-monospace, monospace;
--rk-side-w: 248px;
}
/* ======================================================================
アプリの外枠（サイドバー・上部バー）
====================================================================== */
body.rk-body { background: var(--rk-bg); color: var(--rk-ink); font-family: var(--rk-font); }
.rk-shell { display: flex; min-height: 100vh; }
.rk-main { flex: 1 1 auto; min-width: 0; padding: 2rem; }
.rk-main-inner { max-width: 1280px; margin: 0 auto; }
/* ---- サイドバー ---- */
.rk-side {
width: var(--rk-side-w); flex: none; background: var(--rk-ink); color: #fff;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
display: flex; flex-direction: column;
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.rk-side-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding: 1.1rem 1rem .9rem 1.15rem; }
.rk-brand { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; min-width: 0; }
.rk-brand img { height: 30px; width: 30px; border-radius: 9px; object-fit: cover; flex: none; }
.rk-brand-name { font-weight: 900; letter-spacing: .02em; font-size: .95rem; white-space: nowrap; }
.rk-role { font-family: var(--rk-mono); font-size: .62rem; font-weight: 600; letter-spacing: .1em;
color: var(--rk-accent); border: 1px solid rgba(221,122,44,.5); border-radius: 6px; padding: .05rem .35rem; }
.rk-side-search { margin: 0 .85rem .6rem; position: relative; }
.rk-side-search input {
width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
border-radius: 9px; color: #fff; font-size: .8rem; padding: .5rem .7rem .5rem 2rem; font-family: inherit;
}
.rk-side-search input::placeholder { color: rgba(255,255,255,.42); }
.rk-side-search input:focus { outline: none; border-color: var(--rk-accent); background: rgba(255,255,255,.1); }
.rk-side-search svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
width: 15px; height: 15px; color: rgba(255,255,255,.45); }
.rk-nav { padding: 0 .6rem 1rem; flex: 1 1 auto; }
.rk-nav-group { margin-top: .9rem; }
.rk-nav-label { display: flex; align-items: center; gap: .45rem; padding: 0 .6rem .35rem;
font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.45); }
.rk-nav-label::before { content: ""; width: 3px; height: 10px; border-radius: 2px; background: var(--rk-accent); }
.rk-nav a {
display: flex; align-items: center; gap: .65rem; padding: .48rem .6rem; border-radius: 9px;
color: rgba(255,255,255,.78); text-decoration: none; font-size: .85rem; font-weight: 500;
transition: background .12s, color .12s;
}
.rk-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.rk-nav a.is-active { background: rgba(221,122,44,.16); color: #fff; font-weight: 700;
box-shadow: inset 3px 0 0 var(--rk-accent); }
.rk-nav a .rk-icon { width: 18px; height: 18px; flex: none; opacity: .85; }
.rk-nav a.is-active .rk-icon { color: var(--rk-accent); opacity: 1; }
.rk-nav-empty { display: none; padding: .5rem .6rem; font-size: .78rem; color: rgba(255,255,255,.45); }
.rk-side-foot { flex: none; border-top: 1px solid rgba(255,255,255,.08); padding: .7rem .6rem 1rem; }
.rk-side-foot a { color: rgba(255,255,255,.62); }
.rk-side-foot a:hover { color: #FFB59E; background: rgba(194,69,58,.18); }
.rk-icon-btn {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 9px; border: none; background: transparent; color: rgba(255,255,255,.7); cursor: pointer;
}
.rk-icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.rk-icon-btn svg { width: 19px; height: 19px; }
/* PC で畳んだときに出る「開く」ボタン */
.rk-reopen { position: fixed; top: 12px; left: 12px; z-index: 41; background: var(--rk-ink);
box-shadow: 0 2px 8px rgba(38,49,63,.25); display: none; }
/* ---- モバイル上部バー ---- */
.rk-topbar {
display: none; position: sticky; top: 0; z-index: 50; background: var(--rk-ink);
align-items: center; justify-content: space-between;
padding: env(safe-area-inset-top) 12px 0 16px; height: calc(52px + env(safe-area-inset-top));
}
.rk-topbar .rk-brand img { height: 28px; width: 28px; }
.rk-backdrop { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(15,23,34,.5); }
@media (min-width: 769px) {
body.rk-side-collapsed .rk-side { display: none; }
body.rk-side-collapsed .rk-reopen { display: inline-flex; }
body.rk-side-collapsed .rk-main { padding-left: 4rem; }
}
@media (max-width: 768px) {
.rk-topbar { display: flex; }
.rk-side { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%);
transition: transform .22s ease; }
.rk-side.open { transform: none; box-shadow: 0 0 30px rgba(0,0,0,.3); }
.rk-backdrop.open { display: block; }
.rk-side-collapse { display: none; }
.rk-main { padding: 16px; }
}
/* ---- フラッシュメッセージ ---- */
.rk-flash { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.rk-flash > div { border-radius: 12px; padding: .75rem 1rem; font-size: .85rem; line-height: 1.6;
border: 1px solid; white-space: pre-line; }
.rk-flash .is-success { background: var(--rk-live-bg); border-color: #B9E0D4; color: var(--rk-live); }
.rk-flash .is-error { background: var(--rk-danger-bg); border-color: #EBC7C3; color: var(--rk-danger); }
.rk-flash .is-warning { background: var(--rk-warn-bg); border-color: #EFD9A8; color: var(--rk-warn); }
.rk-flash .is-info { background: var(--rk-accent-bg); border-color: #F0D5B5; color: var(--rk-accent-deep); }
/* ======================================================================
コンポーネント（.rk の内側で使う）
====================================================================== */
.rk { font-family: var(--rk-font); color: var(--rk-ink); max-width: 100%; }
.rk *, .rk *::before, .rk *::after { box-sizing: border-box; }
.rk img, .rk video { max-width: 100%; }
.rk .rk-mono { font-family: var(--rk-mono); font-variant-numeric: tabular-nums; }
/* ---- header ---- */
.rk .rk-eyebrow { display:flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:700;
letter-spacing:.14em; color:var(--rk-muted); text-transform:uppercase; }
.rk .rk-mark { display:inline-flex; gap:3px; flex:none; }
.rk .rk-mark i { width:4px; height:14px; border-radius:2px; display:block; }
.rk .rk-mark i:first-child { background:var(--rk-ink); }
.rk .rk-mark i:last-child { background:var(--rk-accent); }
.rk .rk-h1 { font-size:1.65rem; font-weight:900; letter-spacing:.01em; line-height:1.25; }
.rk .rk-chip { display:inline-block; vertical-align:middle; margin-left:.5rem; font-size:.72rem;
font-weight:900; letter-spacing:.08em; background:var(--rk-ink); color:#fff; border-radius:8px; padding:.2rem .5rem; }
/* ---- card ---- */
.rk .rk-card { background:#fff; border:1px solid var(--rk-line); border-radius:14px;
box-shadow:0 1px 2px rgba(38,49,63,.05); }
.rk .rk-card-pad { padding:1.25rem; }
.rk .rk-section-t { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:.95rem; }
.rk .rk-section-t .rk-mark i { height:12px; }
.rk .rk-hint { font-size:.72rem; color:var(--rk-muted); line-height:1.6; }
/* ---- buttons ---- */
.rk .rk-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
font-weight:700; font-size:.85rem; line-height:1; padding:.6rem 1.15rem; border-radius:10px;
border:1px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none;
transition:background .15s, border-color .15s, color .15s, transform .05s; }
.rk .rk-btn:active { transform:translateY(1px); }
.rk .rk-btn[disabled] { opacity:.4; cursor:not-allowed; transform:none; }
.rk .rk-btn-primary { background:var(--rk-accent); color:#fff; }
.rk .rk-btn-primary:not([disabled]):hover { background:var(--rk-accent-deep); }
.rk .rk-btn-dark { background:var(--rk-ink); color:#fff; }
.rk .rk-btn-dark:not([disabled]):hover { background:#0F1722; }
.rk .rk-btn-ghost { background:#fff; border-color:var(--rk-line); color:var(--rk-ink-2); }
.rk .rk-btn-ghost:not([disabled]):hover { border-color:var(--rk-ink-2); }
.rk .rk-btn-danger { background:#fff; border-color:#EBC7C3; color:var(--rk-danger); }
.rk .rk-btn-danger:not([disabled]):hover { background:var(--rk-danger-bg); }
.rk .rk-btn-sm { padding:.45rem .8rem; font-size:.78rem; }
.rk .rk-link { color:var(--rk-accent-deep); font-weight:700; text-decoration:none; background:none;
border:none; cursor:pointer; padding:0; font-size:inherit; }
.rk .rk-link:hover { text-decoration:underline; }
.rk .rk-link-muted { color:var(--rk-muted); font-weight:700; background:none; border:none; cursor:pointer; padding:0; }
.rk .rk-link-muted:hover { color:var(--rk-ink); text-decoration:underline; }
.rk .rk-link-danger { color:var(--rk-danger); font-weight:700; background:none; border:none; cursor:pointer; padding:0; }
/* ---- pills ---- */
.rk .rk-pill { display:inline-block; font-size:.7rem; font-weight:700; padding:.18rem .6rem;
border-radius:999px; line-height:1.3; white-space:nowrap; }
.rk .rk-pill-ok, .rk .rk-pill-live { background:var(--rk-live-bg); color:var(--rk-live); }
.rk .rk-pill-off { background:#EDF0F4; color:var(--rk-muted); }
.rk .rk-pill-warn { background:var(--rk-warn-bg); color:var(--rk-warn); }
.rk .rk-pill-accent { background:var(--rk-accent-bg); color:var(--rk-accent-deep); }
.rk .rk-pill-danger { background:var(--rk-danger-bg); color:var(--rk-danger); }
/* ---- alerts ---- */
.rk .rk-alert { border-radius:12px; padding:.8rem 1rem; font-size:.83rem; line-height:1.6; border:1px solid; }
.rk .rk-alert ul { margin:.4rem 0 0; padding-left:1.1rem; }
.rk .rk-alert-warn { background:var(--rk-warn-bg); border-color:#EFD9A8; color:var(--rk-warn); }
.rk .rk-alert-danger { background:var(--rk-danger-bg); border-color:#EBC7C3; color:var(--rk-danger); }
.rk .rk-alert-info { background:var(--rk-accent-bg); border-color:#F0D5B5; color:var(--rk-accent-deep); }
.rk .rk-alert-success { background:var(--rk-live-bg); border-color:#B9E0D4; color:var(--rk-live); }
/* ---- forms ---- */
.rk .rk-label { display:block; font-size:.76rem; font-weight:700; color:var(--rk-ink-2); margin-bottom:.35rem; }
.rk .rk-input, .rk select.rk-input, .rk textarea.rk-input {
width:100%; max-width:100%; background:#fff; border:1px solid var(--rk-line); border-radius:10px;
padding:.55rem .8rem; font-size:.88rem; color:var(--rk-ink);
transition:border-color .15s, box-shadow .15s; }
.rk .rk-input:focus { outline:none; border-color:var(--rk-accent); box-shadow:0 0 0 3px var(--rk-accent-bg); }
.rk .rk-input::placeholder { color:#A6AEBB; }
.rk .rk-input[disabled] { background:#F2F4F7; color:#A6AEBB; }
.rk textarea.rk-input { resize:vertical; }
.rk .rk-check { display:flex; align-items:center; gap:.45rem; font-size:.82rem; cursor:pointer; }
/* select は中身の文字数で幅が決まり、flex 行を押し広げてはみ出すので縮められるようにする */
.rk select.rk-input { min-width:0; text-overflow:ellipsis; }
/* iOS Safari は 16px 未満の入力欄にフォーカスすると自動ズームする */
@media (max-width: 768px) {
.rk .rk-input, .rk select.rk-input, .rk textarea.rk-input { font-size:16px; }
.rk .rk-console select.rk-input { flex:1 1 120px; width:auto; }
}
/* Django の as_p をそのまま読める形にする */
.rk .rk-form p { margin:0 0 1rem; }
.rk .rk-form label { display:block; font-size:.76rem; font-weight:700; color:var(--rk-ink-2); margin-bottom:.35rem; }
.rk .rk-form input[type=text], .rk .rk-form input[type=password], .rk .rk-form input[type=email],
.rk .rk-form input[type=number], .rk .rk-form input[type=url], .rk .rk-form input[type=date],
.rk .rk-form select, .rk .rk-form textarea {
width:100%; background:#fff; border:1px solid var(--rk-line); border-radius:10px;
padding:.55rem .8rem; font-size:.88rem; color:var(--rk-ink); }
.rk .rk-form input:focus, .rk .rk-form select:focus, .rk .rk-form textarea:focus {
outline:none; border-color:var(--rk-accent); box-shadow:0 0 0 3px var(--rk-accent-bg); }
.rk .rk-form input[type=checkbox] { width:auto; margin-right:.4rem; }
.rk .rk-form .helptext { display:block; font-size:.7rem; color:var(--rk-muted); margin-top:.25rem; }
.rk .rk-form ul.errorlist { list-style:none; padding:0; margin:.3rem 0 0; font-size:.72rem; color:var(--rk-danger); }
@media (min-width:768px) {
.rk .rk-form-2col { display:grid; gap:0 1.25rem; grid-template-columns:1fr 1fr; }
.rk .rk-form-2col p:has(textarea) { grid-column:1 / -1; }
}
/* ---- tables ---- */
.rk .rk-table { width:100%; font-size:.85rem; border-collapse:collapse; }
.rk .rk-table thead th { text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.08em;
color:var(--rk-muted); text-transform:uppercase; padding:.65rem .9rem;
border-bottom:1px solid var(--rk-line); background:#FAFBFC; white-space:nowrap; }
.rk .rk-table td { padding:.6rem .9rem; border-bottom:1px solid #F0F2F6; }
.rk .rk-table tbody tr:last-child td { border-bottom:none; }
.rk .rk-table thead th.num, .rk .rk-table td.num { text-align:right; }
.rk .rk-empty { text-align:center; color:#A6AEBB; padding:2rem 0 !important; }
/* ---- 定義リスト ---- */
.rk .rk-dl { display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; font-size:.85rem; margin:0; }
.rk .rk-dl dt { font-size:.72rem; font-weight:700; color:var(--rk-muted); white-space:nowrap; padding-top:.15rem; }
.rk .rk-dl dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:520px) { .rk .rk-dl { grid-template-columns:1fr; gap:.15rem .75rem; }
.rk .rk-dl dd { margin-bottom:.6rem; } }
/* ---- 状態ドット ---- */
.rk .rk-dot { width:9px; height:9px; border-radius:999px; background:#8A94A3; flex:none; display:inline-block; }
.rk .rk-dot.live { background:#2FD6A8; box-shadow:0 0 0 4px rgba(47,214,168,.18); }
.rk .rk-dot.busy { background:#F0B355; animation:rk-pulse 1.4s ease-in-out infinite; }
.rk .rk-dot.err { background:#E86B60; }
.rk .rk-dot.off { background:#B8C0CA; }
@keyframes rk-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* ---- 濃色の状態バー（コンソール）とメーター ---- */
.rk .rk-console { background:var(--rk-ink); color:#fff; border-radius:14px; padding:.85rem 1rem; }
.rk .rk-console .rk-btn-ghost { background:transparent; border-color:rgba(255,255,255,.25); color:#fff; }
.rk .rk-console .rk-btn-ghost:not([disabled]):hover { border-color:#fff; }
.rk .rk-console .rk-hint, .rk .rk-console .rk-console-sub { color:rgba(255,255,255,.62); }
.rk .rk-console a { color:#fff; }
.rk .rk-sticky { position:sticky; top:0; z-index:30; }
@media (max-width:768px) { .rk .rk-sticky { top:52px; } }
.rk .rk-meter { font-family:var(--rk-mono); font-weight:600; font-size:1.15rem; line-height:1.2; }
.rk .rk-bar { height:4px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; }
.rk .rk-bar > i { display:block; height:100%; border-radius:999px; background:var(--rk-accent); transition:width .3s; }
.rk .rk-bar-light { background:#EEF1F5; height:6px; }
/* ---- ログ ---- */
.rk .rk-log {
background:#0F1722; color:#D6DCE5; border-radius:12px; padding:.9rem 1rem;
font-family:var(--rk-mono); font-size:.74rem; line-height:1.65;
white-space:pre-wrap; overflow-wrap:anywhere; max-height:26rem; overflow-y:auto;
}
.rk .rk-log:empty::after { content:"（ログはまだありません）"; color:#5B6678; }
/* ---- コード表記 ---- */
.rk code { font-family:var(--rk-mono); font-size:.8em; background:#F4F6F9; border:1px solid var(--rk-line);
border-radius:6px; padding:.1rem .35rem; overflow-wrap:anywhere; }
.rk .rk-log code, .rk pre code { background:none; border:none; padding:0; }
/* ---- カード一覧 ---- */
.rk .rk-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
@media (max-width:480px) { .rk .rk-grid { grid-template-columns:1fr; } }
.rk .rk-proj { display:block; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.rk .rk-proj:hover { border-color:#D5CBBF; box-shadow:0 2px 10px rgba(38,49,63,.07); }
/* ---- アプリタイル（ダッシュボード） ---- */
.rk .rk-tiles { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.rk .rk-tile { display:flex; align-items:center; padding-right:.5rem;
transition:border-color .15s, box-shadow .15s, transform .15s; }
.rk .rk-tile-link { display:flex; align-items:center; gap:.8rem; flex:1 1 auto; min-width:0;
padding:.85rem 0 .85rem 1rem; text-decoration:none; color:inherit; }
.rk .rk-tile:hover { border-color:#E8C9A8; box-shadow:0 4px 14px rgba(38,49,63,.08); transform:translateY(-1px); }
.rk .rk-tile-ic { width:38px; height:38px; border-radius:10px; flex:none; display:flex; align-items:center;
justify-content:center; background:var(--rk-accent-bg); color:var(--rk-accent-deep); }
.rk .rk-tile-ic svg { width:20px; height:20px; }
.rk .rk-tile-name { display:block; font-weight:700; font-size:.9rem; line-height:1.3; }
.rk .rk-tile-desc { display:block; font-size:.72rem; color:var(--rk-muted); line-height:1.4; margin-top:.1rem; }
.rk .rk-tile-pin { margin-left:auto; flex:none; background:none; border:none; cursor:pointer; padding:.25rem;
color:#C9CFD8; border-radius:6px; }
.rk .rk-tile-pin:hover { color:var(--rk-accent); background:var(--rk-accent-bg); }
.rk .rk-tile-pin.on { color:var(--rk-accent); }
.rk .rk-tile-pin svg { width:16px; height:16px; }
.rk .rk-tile-pin.on svg { fill:currentColor; }
/* ---- スイッチ ----
*/
.rk .rk-switch { position:relative; display:inline-flex; flex:none; width:38px; height:22px; cursor:pointer; }
.rk .rk-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.rk .rk-switch i { width:100%; height:100%; border-radius:999px; background:#D5DAE2; transition:background .15s; }
.rk .rk-switch i::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.rk .rk-switch input:checked + i { background:var(--rk-live); }
.rk .rk-switch input:checked + i::after { transform:translateX(16px); }
.rk .rk-switch input:focus-visible + i { box-shadow:0 0 0 3px var(--rk-accent-bg); }
.rk .rk-switch input:disabled + i { opacity:.5; }
/* ---- 数値タイル ---- */
.rk .rk-stats { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.rk .rk-stat { padding:.8rem 1rem; }
.rk .rk-stat .rk-meter { font-size:1.4rem; }
/* ---- タブ（絞り込み） ---- */
.rk .rk-tabs { display:flex; gap:.35rem; overflow-x:auto; padding-bottom:2px; }
.rk .rk-tab { flex:none; font-size:.8rem; font-weight:700; padding:.45rem .9rem; border-radius:999px;
border:1px solid var(--rk-line); background:#fff; color:var(--rk-ink-2); cursor:pointer; }
.rk .rk-tab.is-on, .rk .rk-tab[aria-pressed="true"] { background:var(--rk-ink); border-color:var(--rk-ink); color:#fff; }
/* ---- アバター ---- */
.rk .rk-avatar { width:38px; height:38px; border-radius:50%; flex:none; overflow:hidden; display:flex;
align-items:center; justify-content:center; background:var(--rk-accent-bg); color:var(--rk-accent-deep);
font-weight:900; font-size:.9rem; }
.rk .rk-avatar img { width:100%; height:100%; object-fit:cover; }
/* ---- 確認ダイアログ（