picoride 0.1.0

data/web/public/css/style.css

@@ -0,0 +1,886 @@
+:root {
+  --bg: #1e1e1e;
+  --bg-sidebar: #252526;
+  --bg-toolbar: #2d2d2d;
+  --border: #3c3c3c;
+  --text: #d4d4d4;
+  --text-dim: #8a8a8a;
+  --accent: #007acc;
+  --accent-hover: #1a8cd8;
+  --ok: #4caf50;
+  --error: #f44336;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.app-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.menu-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 44px;
+  flex-shrink: 0;
+  padding: 0 16px;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border);
+}
+
+.menu-bar-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.menu-project-select {
+  max-width: 220px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.menu-bar-spacer {
+  flex: 1;
+}
+
+.menu-bar-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  white-space: nowrap;
+  background: #3c3c3c;
+  color: var(--text-dim);
+}
+
+.menu-bar-status::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.menu-bar-status.running {
+  background: rgba(0, 122, 204, 0.15);
+  color: var(--accent);
+}
+
+.menu-bar-status.success {
+  background: rgba(76, 175, 80, 0.15);
+  color: var(--ok);
+}
+
+.menu-bar-status.failed {
+  background: rgba(244, 67, 54, 0.15);
+  color: var(--error);
+}
+
+.menu-bar select {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.menu-bar-hint {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  background: var(--bg-sidebar);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  padding: 12px 0;
+}
+
+.sidebar h1 {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dim);
+  padding: 0 16px 8px;
+  margin: 0;
+}
+
+.sidebar-message {
+  padding: 6px 16px;
+  font-size: 13px;
+  color: var(--text-dim);
+}
+
+/*
+  TreeView (tree_view.rb) 用のスタイル。汎用コンポーネント側は見た目を一切
+  知らないので、クラス名(tree-view / tree-node / tree-row 等)はこちら側の
+  取り決め。ネストした .tree-children ごとに padding-left を足しているだけで、
+  深さはCSSの入れ子だけで自然に表現される(Ruby側で深さを数える必要がない)。
+*/
+.tree-view,
+.tree-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tree-children {
+  padding-left: 14px;
+}
+
+.tree-row {
+  padding: 5px 16px 5px 8px;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tree-row:hover {
+  background: #2a2d2e;
+}
+
+.tree-node-file.active > .tree-row {
+  background: #37373d;
+  color: #fff;
+}
+
+.tree-caret {
+  width: 14px;
+  flex-shrink: 0;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 10px;
+}
+
+.tree-caret-spacer {
+  width: 14px;
+  flex-shrink: 0;
+}
+
+.tree-icon {
+  font-size: 10px;
+  font-weight: bold;
+  width: 16px;
+  text-align: center;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.tree-icon.rb { background: #701516; color: #fff; }
+.tree-icon.c, .tree-icon.h { background: #283593; color: #fff; }
+
+.tree-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.editor-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.editor-tabs {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 0 16px;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border);
+}
+
+button.editor-tab {
+  background: transparent;
+  color: var(--text-dim);
+  padding: 8px 4px;
+  font-size: 12px;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+}
+
+button.editor-tab:hover:not(:disabled) {
+  background: transparent;
+  color: var(--text);
+}
+
+button.editor-tab.active {
+  color: #fff;
+  border-bottom-color: var(--accent);
+}
+
+.tab-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.tab-pane.hidden {
+  display: none;
+}
+
+.terminal-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.terminal-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  padding: 8px 16px;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.terminal-status {
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+.terminal-status.connected { color: var(--ok); }
+.terminal-status.connecting { color: var(--accent); }
+
+button.terminal-upload {
+  background: #555;
+}
+
+button.terminal-upload:hover:not(:disabled) {
+  background: #6a6a6a;
+}
+
+.terminal-container {
+  flex: 1;
+  min-height: 0;
+  padding: 8px;
+  background: #1a1a1a;
+}
+
+.terminal-upload-log {
+  flex-shrink: 0;
+  max-height: 140px;
+  margin: 0;
+  padding: 8px 16px;
+  overflow: auto;
+  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+  border-top: 1px solid var(--border);
+  color: var(--text);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.current-file {
+  flex: 1;
+  color: var(--text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  padding: 6px 14px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+button:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+button:disabled {
+  background: #555;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Raspberry Pi Pico の「UF2をダウンロード」(<a download>)をボタンと同じ見た目にする */
+a.menu-download {
+  display: inline-block;
+  background: var(--accent);
+  color: #fff;
+  padding: 6px 14px;
+  border-radius: 4px;
+  font-size: 13px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a.menu-download:hover {
+  background: var(--accent-hover);
+}
+
+.status {
+  min-width: 90px;
+  font-size: 12px;
+}
+
+.status.ok { color: var(--ok); }
+.status.error { color: var(--error); }
+
+.editor-wrapper {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.line-numbers {
+  width: 48px;
+  flex-shrink: 0;
+  overflow: hidden;
+  background: #1a1a1a;
+  border-right: 1px solid var(--border);
+  text-align: right;
+  padding: 12px 8px 12px 0;
+  color: var(--text-dim);
+  user-select: none;
+}
+
+.line-numbers,
+.highlight-layer,
+#editor {
+  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  tab-size: 2;
+  letter-spacing: normal;
+  word-spacing: normal;
+}
+
+.editor-scroll-area {
+  position: relative;
+  flex: 1;
+  overflow: auto;
+  /*
+    highlight-layer(<pre>)と#editor(<textarea>)を同じグリッドセルに重ねる。
+    どちらも grid-area:1/1 を指定し、align-items:stretch(初期値)で
+    お互いが常に同じ高さ・同じ位置になるようにする。
+
+    以前は position:absolute で重ねていたが、<textarea> は内容が
+    あふれると要素内部で独自にスクロールする性質を持つため、
+    親のスクロールとテキストエリア自身のスクロールがズレて
+    「表示されている文字列とキャレットの行が合わない」問題が起きていた。
+    Gridで重ねてスクロールをこのコンテナ一箇所に集約することで解消する。
+  */
+  display: grid;
+}
+
+.highlight-layer,
+#editor {
+  grid-area: 1 / 1;
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: 12px;
+  border: 0;
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+  box-sizing: border-box;
+}
+
+.highlight-layer {
+  pointer-events: none;
+  color: var(--text);
+  background: none;
+  overflow: hidden; /* <pre>のデフォルトoverflow:autoを無効化し、独自スクロールを防ぐ */
+}
+
+.highlight-layer code {
+  margin: 0;
+  padding: 0;
+  background: none;
+  font: inherit;
+  white-space: inherit;
+}
+
+#editor {
+  background: transparent;
+  color: transparent;
+  caret-color: #fff;
+  resize: none;
+  outline: none;
+  overflow: hidden; /* textarea自身の内部スクロールを無効化し、親のスクロールに一本化 */
+  z-index: 1;
+}
+
+#editor::placeholder {
+  color: var(--text-dim);
+}
+
+#editor:disabled {
+  cursor: default;
+}
+
+.log-panel {
+  flex-shrink: 0;
+  max-height: 220px;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border);
+  background: var(--bg-toolbar);
+}
+
+.log-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.log-panel-spacer {
+  flex: 1;
+}
+
+button.log-panel-tab {
+  background: transparent;
+  color: var(--text-dim);
+  padding: 4px 2px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+}
+
+button.log-panel-tab:hover:not(:disabled) {
+  background: transparent;
+  color: var(--text);
+}
+
+button.log-panel-tab.active {
+  color: #fff;
+  border-bottom-color: var(--accent);
+}
+
+button.build-refresh {
+  background: #555;
+}
+
+button.build-refresh:hover:not(:disabled) {
+  background: #6a6a6a;
+}
+
+.build-status {
+  min-width: 90px;
+  font-size: 12px;
+  text-align: right;
+}
+
+.build-status.success { color: var(--ok); }
+.build-status.failed { color: var(--error); }
+
+.build-options {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.build-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.build-option select {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 12px;
+}
+
+.build-log {
+  margin: 0;
+  padding: 12px 16px;
+  overflow: auto;
+  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--text);
+}
+
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+}
+
+.dialog {
+  min-width: 320px;
+  background: var(--bg-toolbar);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.dialog h2 {
+  font-size: 14px;
+  margin: 0;
+  padding: 16px 16px 12px;
+}
+
+.settings-dialog .build-options {
+  border-bottom: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.build-option-note {
+  max-width: 420px;
+  line-height: 1.5;
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px 16px;
+}
+
+button.dialog-cancel {
+  background: #555;
+}
+
+button.dialog-cancel:hover:not(:disabled) {
+  background: #6a6a6a;
+}
+
+.platform-target {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.install-panel {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-toolbar);
+  padding: 8px 16px 12px;
+}
+
+.install-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.install-panel-header h1 {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dim);
+  margin: 0;
+  flex: 1;
+}
+
+.install-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+/* esp-web-install-button 自体はShadow DOM内の"Connect"ボタンを描画するが、
+   ここでは slot="activate" で差し込んだ通常の <button> を使っているので、
+   button { ... } の共通スタイルがそのまま当たる */
+esp-web-install-button {
+  align-self: flex-start;
+}
+
+/*
+  ファイルメニュー(menu_bar.rb)。トグルボタン+絶対配置のドロップダウンという
+  一番シンプルな構成にしてある(他のダイアログと同じく、外側クリックでの
+  自動クローズは実装していない。設定ダイアログ等も同じ割り切り)。
+*/
+.file-menu {
+  position: relative;
+}
+
+.file-menu-toggle {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 6px 12px;
+}
+
+.file-menu-toggle:hover:not(:disabled) {
+  background: var(--bg);
+}
+
+.file-menu-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 190px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px;
+  background: var(--bg-toolbar);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  z-index: 20;
+}
+
+.file-menu-item {
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.file-menu-item:hover:not(:disabled) {
+  background: var(--accent);
+}
+
+/*
+  ファイルツリー(tree_view.rb)の右クリックコンテキストメニュー。
+  全画面の透明なオーバーレイ(.context-menu-overlay)でメニュー外への
+  クリック/右クリックを拾って閉じ、本体(.context-menu)は右クリックした
+  座標にposition: fixedで直接置く(editor_app.rbのrender_tree_context_menu参照)。
+*/
+.context-menu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 25;
+}
+
+.context-menu {
+  position: fixed;
+  min-width: 160px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px;
+  background: var(--bg-toolbar);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.context-menu-item {
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.context-menu-item:hover:not(:disabled) {
+  background: var(--accent);
+}
+
+/* PromptDialog(新しいプロジェクト/mrbgemを追加/新規ファイル、共通のダイアログ) */
+.prompt-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0 16px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.prompt-field input {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 13px;
+}
+
+.prompt-error {
+  padding: 8px 16px 0;
+  font-size: 12px;
+  color: var(--error);
+}
+
+/* DirectoryBrowserDialog(「ワークスペースを開く」のディレクトリ選択UI) */
+.directory-browser-dialog {
+  width: 460px;
+  max-width: calc(100vw - 32px);
+}
+
+.directory-browser-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  padding: 0 16px 8px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.breadcrumb-segment {
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.breadcrumb-segment:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+
+.breadcrumb-current {
+  cursor: default;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.breadcrumb-current:hover {
+  background: transparent;
+}
+
+.breadcrumb-sep {
+  color: var(--text-dim);
+}
+
+.directory-browser-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px 8px;
+}
+
+.directory-browser-list {
+  margin: 0 16px;
+  max-height: 260px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+}
+
+.directory-browser-message {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.directory-browser-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.directory-browser-item:hover {
+  background: var(--bg-toolbar);
+}
+
+.directory-browser-item-icon {
+  font-size: 13px;
+}
+
+.directory-browser-create {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px 0;
+}
+
+.directory-browser-create input {
+  flex: 1;
+  min-width: 160px;
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 13px;
+}
+
+/* Prismのトークンカラー(one-dark寄りのシンプルな配色) */
+.token.comment { color: #6a9955; font-style: italic; }
+.token.string,
+.token.char { color: #ce9178; }
+.token.number,
+.token.boolean { color: #b5cea8; }
+.token.keyword,
+.token.builtin { color: #c586c0; }
+.token.function { color: #dcdcaa; }
+.token.class-name { color: #4ec9b0; }
+.token.symbol,
+.token.variable { color: #9cdcfe; }
+.token.operator,
+.token.punctuation { color: #d4d4d4; }
+.token.regex { color: #d16969; }
+.token.property,
+.token.macro { color: #569cd6; }