tagword-codeagent 1.1.6__py3-none-any.whl

codeagent/web/static/16-mobile.css

@@ -0,0 +1,612 @@
+/* ================================================================
+ * 16-mobile.css — Mobile / touch layout (≤768px)
+ * ================================================================ */
+
+.topbar__sidebar-btn,
+.sidebar-backdrop {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --mobile-nav-h: calc(52px + env(safe-area-inset-bottom, 0px));
+    --topbar-h: 48px;
+  }
+
+  /* ---- Viewport height ---- */
+  .app,
+  .activity-bar {
+    height: 100dvh;
+  }
+
+  /* ---- App shell: single column + fixed nav ---- */
+  .app {
+    display: block;
+    position: relative;
+    grid-template-columns: unset;
+    grid-template-rows: unset;
+  }
+
+  .workspace {
+    height: 100dvh;
+    padding-bottom: var(--mobile-nav-h);
+    box-sizing: border-box;
+  }
+
+  .workspace > .page {
+    bottom: var(--mobile-nav-h);
+  }
+
+  /* ---- Bottom tab bar (activity bar) ---- */
+  .activity-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    width: 100%;
+    min-width: 0;
+    height: var(--mobile-nav-h);
+    flex-direction: row;
+    align-items: stretch;
+    border-right: none;
+    border-top: 1px solid var(--border);
+    z-index: 120;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    background: var(--bg-panel);
+  }
+
+  .activity-bar__top {
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    gap: 0;
+    padding: var(--sp-1) var(--sp-1) 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .activity-bar__bottom {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--sp-1) var(--sp-2) 0;
+    border-top: none;
+    border-left: 1px solid var(--divider);
+    flex-shrink: 0;
+  }
+
+  .activity-btn {
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    font-size: 18px;
+  }
+
+  .activity-btn.active::before {
+    left: 50%;
+    top: 2px;
+    transform: translateX(-50%);
+    width: 18px;
+    height: 3px;
+    border-radius: 3px;
+  }
+
+  /* ---- Sidebar drawer ---- */
+  .sidebar-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    bottom: var(--mobile-nav-h);
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 190;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body.sidebar-open .sidebar-backdrop {
+    display: block;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: var(--mobile-nav-h);
+    width: min(88vw, 320px);
+    max-height: none;
+    z-index: 200;
+    transform: translateX(-105%);
+    transition: transform 0.24s cubic-bezier(0.2, 0, 0, 1);
+    box-shadow: var(--shadow-lg);
+    border-right: 1px solid var(--border);
+    border-bottom: none;
+  }
+
+  body.sidebar-open .sidebar {
+    transform: translateX(0);
+  }
+
+  /* Stats mode: sidebar becomes main content */
+  body[data-activity-mode="stats"] .sidebar {
+    position: relative;
+    width: 100%;
+    transform: none;
+    box-shadow: none;
+    bottom: auto;
+    height: calc(100dvh - var(--mobile-nav-h));
+  }
+
+  body[data-activity-mode="stats"] .workspace {
+    display: none;
+  }
+
+  body[data-activity-mode="stats"] .topbar__sidebar-btn {
+    display: none;
+  }
+
+  /* Files mode: compact file tree on top */
+  body[data-activity-mode="files"] .sidebar {
+    position: relative;
+    width: 100%;
+    transform: none;
+    box-shadow: none;
+    max-height: 38vh;
+    bottom: auto;
+    flex-shrink: 0;
+  }
+
+  body[data-activity-mode="files"] .app {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+  }
+
+  body[data-activity-mode="files"] .workspace {
+    flex: 1;
+    min-height: 0;
+    height: auto;
+    padding-bottom: var(--mobile-nav-h);
+  }
+
+  /* Config / tasks / agent: hide sidebar from layout */
+  body[data-activity-mode="config"] .sidebar,
+  body[data-activity-mode="tasks"] .sidebar,
+  body[data-activity-mode="agent"] .sidebar,
+  body[data-activity-mode="team"] .sidebar,
+  body[data-activity-mode="hub"] .sidebar {
+    display: none;
+  }
+
+  body[data-activity-mode="config"] .sidebar-backdrop,
+  body[data-activity-mode="tasks"] .sidebar-backdrop,
+  body[data-activity-mode="agent"] .sidebar-backdrop,
+  body[data-activity-mode="team"] .sidebar-backdrop,
+  body[data-activity-mode="hub"] .sidebar-backdrop {
+    display: none !important;
+  }
+
+  /* ---- Topbar ---- */
+  .topbar {
+    padding: 0 var(--sp-3);
+    gap: var(--sp-2);
+  }
+
+  .topbar__sidebar-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    border-radius: var(--r-md);
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .topbar__sidebar-btn:hover,
+  .topbar__sidebar-btn.is-active {
+    background: var(--bg-hover);
+    color: var(--accent);
+  }
+
+  .topbar__sidebar-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  body:not([data-activity-mode="chat"]) .topbar__sidebar-btn {
+    display: none;
+  }
+
+  .topbar__title {
+    max-width: 36vw;
+    font-size: 13px;
+  }
+
+  .topbar__project-path {
+    display: none !important;
+  }
+
+  .channel-pill {
+    font-size: 9.5px;
+    padding: 1px 6px;
+  }
+
+  .topbar__meta {
+    gap: var(--sp-1);
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .topbar__todo-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .topbar__todo-btn svg {
+    width: 17px;
+    height: 17px;
+  }
+
+  /* ---- Chat page ---- */
+  #page-chat.active {
+    flex-direction: column;
+  }
+
+  .chat-log {
+    padding: var(--sp-4) var(--sp-3);
+    gap: var(--sp-4);
+  }
+
+  .msg-row.msg-agent {
+    padding-right: 0;
+  }
+
+  .msg-row.msg-user {
+    padding-left: 0;
+  }
+
+  .msg-col {
+    max-width: 96%;
+  }
+
+  .bubble {
+    font-size: 14px;
+    padding: 10px 13px;
+  }
+
+  .compose {
+    padding: var(--sp-2) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
+  }
+
+  .compose__box {
+    border-radius: var(--r-lg);
+  }
+
+  .compose__dock {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 6px 6px;
+    min-height: 0;
+    background: var(--bg-subtle);
+  }
+
+  .compose__dock-tools {
+    flex-shrink: 0;
+  }
+
+  .compose__dock-chips {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    gap: 4px;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+    overflow: hidden;
+  }
+
+  .compose__dock-actions {
+    flex-shrink: 0;
+    gap: 4px;
+  }
+
+  .compose__tool-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+  }
+
+  .compose__chip {
+    height: 28px;
+    padding: 0 7px;
+    font-size: 11px;
+    gap: 4px;
+  }
+
+  .compose__chip--think {
+    flex-shrink: 0;
+    padding: 0 6px;
+  }
+
+  .compose__chip--think .think-toggle__label {
+    display: none;
+  }
+
+  .compose__switch-track {
+    width: 26px;
+    height: 15px;
+  }
+
+  .compose__switch-thumb {
+    width: 11px;
+    height: 11px;
+  }
+
+  .compose__chip--think[aria-pressed="true"] .compose__switch-thumb {
+    transform: translateX(11px);
+  }
+
+  .compose__chip--model {
+    flex: 1;
+    min-width: 0;
+    max-width: none;
+    padding-right: 6px;
+  }
+
+  .compose__chip--model .compose__chip-leading {
+    display: none;
+  }
+
+  .compose__chip-chevron {
+    margin-left: -2px;
+  }
+
+  .token-usage--compact {
+    padding: 2px 5px 2px 4px;
+    gap: 3px;
+  }
+
+  .token-usage--compact .token-usage__segs {
+    display: none;
+  }
+
+  .token-usage--compact .token-usage__icon {
+    display: inline-flex;
+    width: 12px;
+    height: 12px;
+  }
+
+  .token-usage--compact .token-usage__pct {
+    min-width: 22px;
+    font-size: 10px;
+  }
+
+  .btn--send .btn__send-label { display: none; }
+  .btn--send {
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    border-radius: var(--r-full);
+    gap: 0;
+  }
+
+  .compose__sheet-grid {
+    grid-template-columns: 1fr;
+    padding: 2px 8px 10px;
+  }
+
+  .compose__head {
+    padding: 8px 8px 0;
+  }
+
+  .compose-attach-chip {
+    width: 60px;
+  }
+
+  .compose-attach-chip img {
+    width: 60px;
+    height: 46px;
+  }
+
+  .compose__editor #msg,
+  .compose__box > #msg {
+    padding: 10px 12px 6px;
+    font-size: 14px;
+  }
+
+  .compose-attach-chip {
+    max-width: 160px;
+  }
+
+  .bubble .md-content img,
+  .chat-inline-img,
+  .bubble-user__img,
+  .oa-tool-gen-images img,
+  .chat-img-wrap > img {
+    max-width: 100%;
+    max-height: min(40vh, 280px);
+  }
+
+  .chat-img-wrap__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .camera-modal__dialog {
+    max-width: 100%;
+    margin: var(--sp-2);
+    max-height: calc(100dvh - var(--mobile-nav-h) - var(--sp-4));
+    display: flex;
+    flex-direction: column;
+  }
+
+  .camera-modal__video {
+    max-height: 50dvh;
+  }
+
+  #msg {
+    font-size: 16px; /* prevent iOS zoom on focus */
+    min-height: 48px;
+  }
+
+  /* ---- Slide panels → below the topbar (topbar remains accessible) ---- */
+  .todo-panel,
+  .git-slide-panel,
+  .plan-panel {
+    position: fixed;
+    top: var(--topbar-h);
+    left: 0;
+    right: 0;
+    bottom: var(--mobile-nav-h);
+    width: 100% !important;
+    max-width: none;
+    z-index: 150;
+    border-left: none;
+  }
+
+  /* ---- Forms & config pages ---- */
+  .page--scroll {
+    padding: var(--sp-4) var(--sp-3) var(--sp-8);
+  }
+
+  .section {
+    padding: var(--sp-4);
+    border-radius: var(--r-lg);
+  }
+
+  .form-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--sp-2);
+  }
+
+  .form-row label {
+    min-width: 0;
+  }
+
+  .form-row input,
+  .form-row select,
+  .form-row textarea {
+    width: 100% !important;
+    max-width: none !important;
+  }
+
+  .section__header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--sp-2);
+  }
+
+  .config-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-row {
+    flex-direction: column;
+  }
+
+  .field-row > input {
+    min-width: 0;
+  }
+
+  .preset-card {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--sp-2);
+  }
+
+  .preset-card__actions {
+    margin-left: 0;
+    justify-content: flex-end;
+  }
+
+  .preset-use-type-seg__btn {
+    font-size: 11px;
+    padding: 3px 8px;
+  }
+
+  .compose-stack-panel__body--grid {
+    grid-template-columns: 1fr;
+  }
+
+  .compose-stack-row {
+    grid-template-columns: 44px minmax(0, 1fr);
+  }
+
+  /* ---- Cron / tasks ---- */
+  .cron-day-pill {
+    width: 38px;
+    height: 36px;
+  }
+
+  /* ---- Stats ---- */
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--sp-2);
+  }
+
+  /* ---- Modals ---- */
+  .modal__box {
+    max-width: calc(100vw - var(--sp-6));
+    margin: var(--sp-4);
+  }
+
+  /* 手机端 Team/Agent 等模态框可滚动 */
+  .modal-overlay .modal {
+    max-height: calc(100dvh - var(--mobile-nav-h) - var(--sp-6));
+    margin: var(--sp-3);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .modal-overlay .modal__body {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: var(--sp-4);
+  }
+
+  .modal-overlay .modal__footer {
+    flex-shrink: 0;
+    border-top: 1px solid var(--border);
+    padding: var(--sp-3);
+  }
+
+  /* ---- Search / session tree touch targets ---- */
+  .tree-session__row,
+  .tree-project__row,
+  .sess-row .sess-item-main {
+    min-height: 44px;
+  }
+
+  /* 手机端：项目名右侧的「新建会话」和「⋮」按钮始终显示（桌面版 hover 才显示） */
+  .tree-project__add-session,
+  .tree-project__menu {
+    display: flex;
+  }
+
+  .tree-footer-btn,
+  .search-bar__input {
+    min-height: 40px;
+  }
+
+  .project-tree__footer {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+}
+
+/* Tablet: soften layout between 769px and 900px */
+@media (min-width: 769px) and (max-width: 900px) {
+  .topbar__sidebar-btn,
+  .sidebar-backdrop {
+    display: none !important;
+  }
+}