codexmate 0.0.41 → 0.0.42

package/web-ui/styles/responsive.css

@@ -1,501 +1,501 @@
-.content-wrapper {
-    min-height: 300px;
-    position: relative;
-}
-
-button:focus-visible,
-select:focus-visible,
-input:focus-visible,
-textarea:focus-visible {
-    outline: 3px solid rgba(201, 94, 75, 0.25);
-    outline-offset: 2px;
-}
-
-@media (max-width: 1280px) {
-    :root {
-        --side-rail-width: 224px;
-    }
-    .app-shell {
-        grid-template-columns: 224px minmax(0, 1fr);
-        gap: 0;
-    }
-
-    .main-panel {
-        padding: 0 20px 20px;
-    }
-
-    .main-panel-topbar {
-        margin: 0 -20px 12px;
-        padding: 0 20px 10px;
-    }
-
-}
-
-@media (max-width: 960px) {
-    :root {
-        --side-rail-width: 188px;
-    }
-    .container {
-        padding: 0;
-    }
-    .app-shell {
-        grid-template-columns: 188px minmax(0, 1fr);
-        gap: 0;
-    }
-    .main-panel {
-        padding: 0 16px 16px;
-        border-radius: 0;
-        min-height: 0;
-    }
-    .main-panel-topbar {
-        margin: 0 -16px 12px;
-        padding: 0 16px 10px;
-    }
-    .top-tabs {
-        display: none !important;
-    }
-    .status-strip {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 8px;
-        margin-top: 2px;
-    }
-    .status-chip {
-        min-width: 0;
-    }
-
-    .skills-summary-strip {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .skills-panel-header {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .skills-modal-actions {
-        align-items: flex-start;
-    }
-
-    .market-target-switch-compact {
-        justify-content: flex-start;
-    }
-}
-
-@media (max-width: 720px) {
-    :root {
-        --side-rail-width: min(188px, 46vw);
-    }
-
-    .container {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-        min-height: 100vh;
-        overflow: hidden;
-    }
-
-    .app-shell {
-        grid-template-columns: 1fr;
-        flex: 1 1 auto;
-        min-height: 0;
-        height: auto;
-        overflow: hidden;
-    }
-
-    .side-rail {
-        display: none;
-    }
-
-    .lang-fab {
-        display: block;
-    }
-
-    .top-tabs {
-        display: flex !important;
-        flex: 0 0 auto;
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding-bottom: 2px;
-        margin-left: -2px;
-        margin-right: -2px;
-        background: rgba(255, 248, 241, 0.96);
-        position: relative;
-        z-index: 30;
-    }
-
-    .main-panel {
-        padding: 0 12px 16px;
-        height: 100%;
-        min-height: 0;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .main-panel-topbar {
-        position: sticky;
-        top: 0;
-        z-index: 20;
-        margin: 0 0 10px;
-        padding: 0 0 8px;
-        background: rgba(255, 248, 241, 0.96);
-        backdrop-filter: blur(14px) saturate(130%);
-    }
-
-    .panel-header-refined {
-        margin-left: 0;
-        margin-right: 0;
-        padding: 14px 0 12px;
-    }
-
-    .main-title {
-        font-size: 18px;
-    }
-
-    .subtitle {
-        font-size: 12px;
-        margin-bottom: 0;
-        line-height: 1.4;
-    }
-
-    .panel-kicker {
-        display: none;
-    }
-
-    .top-tabs {
-        margin: 8px 0 10px;
-        gap: 5px;
-    }
-
-    .segmented-control {
-        flex-direction: column;
-        gap: 6px;
-    }
-
-    .status-strip {
-        gap: 12px;
-    }
-
-    .main-panel-topbar .status-strip {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: 8px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding-bottom: 2px;
-        scrollbar-width: none;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .main-panel-topbar .status-strip::-webkit-scrollbar {
-        display: none;
-    }
-
-    .main-panel-topbar .status-chip {
-        flex: 0 0 auto;
-        min-width: max-content;
-    }
-
-    .market-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .market-action-grid {
-        grid-template-columns: 1fr;
-    }
-
-}
-
-@media (max-width: 540px) {
-    .trash-header-actions {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        width: 100%;
-    }
-
-    .selector-header .trash-header-actions > .btn-tool,
-    .selector-header .trash-header-actions > .btn-tool-compact {
-        width: 100%;
-        min-width: 0;
-        height: 44px;
-        min-height: 44px;
-    }
-    .top-tabs {
-        gap: 5px;
-        margin: 2px 0 8px;
-        padding-right: 14px;
-    }
-    .main-panel {
-        padding: 0 10px 12px;
-    }
-
-    .main-panel-topbar {
-        margin-bottom: 8px;
-    }
-    .card {
-        padding: 12px;
-    }
-    .session-layout {
-        grid-template-columns: 1fr;
-        height: auto;
-        min-height: 0;
-    }
-
-    .status-strip {
-        gap: var(--spacing-xs);
-    }
-
-    .status-chip {
-        min-width: 100%;
-    }
-
-    .main-panel-topbar .status-chip {
-        min-width: max-content;
-    }
-
-    .btn-add,
-    .btn-tool,
-    .card-action-btn,
-    .btn-session-export,
-    .btn-session-open,
-    .btn-session-clone,
-    .btn-session-refresh,
-    .btn-session-delete,
-    .btn-icon,
-    .session-item-copy {
-        min-height: 44px;
-        padding-top: 12px;
-        padding-bottom: 12px;
-    }
-
-    .btn-icon,
-    .session-item-copy {
-        min-width: 36px;
-    }
-
-    .session-item {
-        min-height: 79px;
-        height: 79px;
-        contain-intrinsic-size: 79px;
-        padding: 12px 14px;
-    }
-
-    .session-item-header {
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .session-item-main {
-        align-items: center;
-    }
-
-    .session-item-copy {
-        width: 36px;
-        height: 36px;
-        min-width: 36px;
-        min-height: 36px;
-        border-radius: 6px;
-        padding: 2px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transform: translate(-3px, 0);
-    }
-
-    .session-item-copy svg {
-        width: 10px;
-        height: 10px;
-    }
-
-    .session-item-title {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .session-item-actions {
-        margin-top: 0;
-    }
-
-    .session-item-meta {
-        margin-top: 4px;
-        margin-bottom: 0;
-        gap: 4px;
-        align-items: center;
-    }
-
-    .trash-item-body {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 10px;
-    }
-
-    .trash-item-actions {
-        opacity: 1;
-        justify-content: flex-end;
-    }
-
-    .trash-item-cwd {
-        max-width: 140px;
-    }
-
-    .card {
-        padding: 8px;
-    }
-
-    .card-list {
-        gap: 4px;
-        margin-bottom: 4px;
-    }
-
-    .card-actions {
-        gap: 8px;
-    }
-
-    .card-action-btn {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-    }
-
-    .card-action-btn svg {
-        width: 18px;
-        height: 18px;
-    }
-
-    .card-trailing {
-        grid-auto-flow: row;
-        grid-auto-columns: 1fr;
-        justify-content: stretch;
-        justify-items: end;
-    }
-
-    .card-trailing .card-actions {
-        width: 100%;
-        justify-content: flex-end;
-        justify-self: end;
-    }
-
-    /* 移动端不显示配置状态 pill，节省空间 */
-    .card-trailing .pill {
-        display: none;
-    }
-
-    .openclaw-card-list .card-trailing .pill {
-        display: block;
-    }
-
-    .auth-profile-item {
-        padding: 10px;
-    }
-
-    .auth-profile-header {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 10px;
-    }
-
-    .auth-profile-actions {
-        justify-content: flex-start;
-    }
-
-    .auth-profile-grid {
-        grid-template-columns: 1fr;
-        gap: 6px;
-        margin-top: 8px;
-    }
-
-    .auth-profile-row {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        padding-bottom: 4px;
-        border-bottom: 1px dashed rgba(160, 145, 130, 0.25);
-    }
-
-    .auth-profile-row:last-child {
-        border-bottom: none;
-        padding-bottom: 0;
-    }
-
-    .session-preview {
-        border-radius: var(--radius-lg);
-    }
-
-    .skills-summary-strip {
-        grid-template-columns: 1fr;
-    }
-
-    .skills-panel {
-        padding: 10px;
-    }
-
-    .skills-root-box {
-        font-size: 11px;
-    }
-}
-
-@media (max-width: 820px) {
-    .container {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-        min-height: 100vh;
-        overflow: hidden;
-    }
-
-    .app-shell {
-        grid-template-columns: 1fr;
-        flex: 1 1 auto;
-        min-height: 0;
-        height: auto;
-        overflow: hidden;
-    }
-
-    .side-rail {
-        display: none !important;
-    }
-
-    .lang-fab {
-        display: none !important;
-    }
-
-    .top-tabs {
-        display: flex !important;
-        flex: 0 0 auto;
-        width: 100%;
-        max-width: 100%;
-        margin: 8px 0 10px;
-        padding: 0 max(18px, calc(env(safe-area-inset-right, 0px) + 14px)) 4px max(10px, calc(env(safe-area-inset-left, 0px) + 10px));
-        gap: 5px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        scroll-padding-inline: 10px 18px;
-        background: rgba(255, 248, 241, 0.96);
-        position: relative;
-        z-index: 30;
-    }
-
-    .top-tab:last-child {
-        margin-right: 8px;
-    }
-
-    .main-panel {
-        padding: 0 12px 16px;
-        height: 100%;
-        min-height: 0;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .main-panel-topbar {
-        position: sticky;
-        top: 0;
-        z-index: 20;
-        margin: 0 0 10px;
-        padding: 0 0 8px;
-        background: rgba(255, 248, 241, 0.96);
-        backdrop-filter: blur(14px) saturate(130%);
-    }
-}
+.content-wrapper {
+    min-height: 300px;
+    position: relative;
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 3px solid rgba(201, 94, 75, 0.25);
+    outline-offset: 2px;
+}
+
+@media (max-width: 1280px) {
+    :root {
+        --side-rail-width: 224px;
+    }
+    .app-shell {
+        grid-template-columns: 224px minmax(0, 1fr);
+        gap: 0;
+    }
+
+    .main-panel {
+        padding: 0 20px 20px;
+    }
+
+    .main-panel-topbar {
+        margin: 0 -20px 12px;
+        padding: 0 20px 10px;
+    }
+
+}
+
+@media (max-width: 960px) {
+    :root {
+        --side-rail-width: 188px;
+    }
+    .container {
+        padding: 0;
+    }
+    .app-shell {
+        grid-template-columns: 188px minmax(0, 1fr);
+        gap: 0;
+    }
+    .main-panel {
+        padding: 0 16px 16px;
+        border-radius: 0;
+        min-height: 0;
+    }
+    .main-panel-topbar {
+        margin: 0 -16px 12px;
+        padding: 0 16px 10px;
+    }
+    .top-tabs {
+        display: none !important;
+    }
+    .status-strip {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+        margin-top: 2px;
+    }
+    .status-chip {
+        min-width: 0;
+    }
+
+    .skills-summary-strip {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .skills-panel-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .skills-modal-actions {
+        align-items: flex-start;
+    }
+
+    .market-target-switch-compact {
+        justify-content: flex-start;
+    }
+}
+
+@media (max-width: 720px) {
+    :root {
+        --side-rail-width: min(188px, 46vw);
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        min-height: 100vh;
+        overflow: hidden;
+    }
+
+    .app-shell {
+        grid-template-columns: 1fr;
+        flex: 1 1 auto;
+        min-height: 0;
+        height: auto;
+        overflow: hidden;
+    }
+
+    .side-rail {
+        display: none;
+    }
+
+    .lang-fab {
+        display: block;
+    }
+
+    .top-tabs {
+        display: flex !important;
+        flex: 0 0 auto;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 2px;
+        margin-left: -2px;
+        margin-right: -2px;
+        background: rgba(255, 248, 241, 0.96);
+        position: relative;
+        z-index: 30;
+    }
+
+    .main-panel {
+        padding: 0 12px 16px;
+        height: 100%;
+        min-height: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .main-panel-topbar {
+        position: sticky;
+        top: 0;
+        z-index: 20;
+        margin: 0 0 10px;
+        padding: 0 0 8px;
+        background: rgba(255, 248, 241, 0.96);
+        backdrop-filter: blur(14px) saturate(130%);
+    }
+
+    .panel-header-refined {
+        margin-left: 0;
+        margin-right: 0;
+        padding: 14px 0 12px;
+    }
+
+    .main-title {
+        font-size: 18px;
+    }
+
+    .subtitle {
+        font-size: 12px;
+        margin-bottom: 0;
+        line-height: 1.4;
+    }
+
+    .panel-kicker {
+        display: none;
+    }
+
+    .top-tabs {
+        margin: 8px 0 10px;
+        gap: 5px;
+    }
+
+    .segmented-control {
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .status-strip {
+        gap: 12px;
+    }
+
+    .main-panel-topbar .status-strip {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 8px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 2px;
+        scrollbar-width: none;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .main-panel-topbar .status-strip::-webkit-scrollbar {
+        display: none;
+    }
+
+    .main-panel-topbar .status-chip {
+        flex: 0 0 auto;
+        min-width: max-content;
+    }
+
+    .market-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .market-action-grid {
+        grid-template-columns: 1fr;
+    }
+
+}
+
+@media (max-width: 540px) {
+    .trash-header-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        width: 100%;
+    }
+
+    .selector-header .trash-header-actions > .btn-tool,
+    .selector-header .trash-header-actions > .btn-tool-compact {
+        width: 100%;
+        min-width: 0;
+        height: 44px;
+        min-height: 44px;
+    }
+    .top-tabs {
+        gap: 5px;
+        margin: 2px 0 8px;
+        padding-right: 14px;
+    }
+    .main-panel {
+        padding: 0 10px 12px;
+    }
+
+    .main-panel-topbar {
+        margin-bottom: 8px;
+    }
+    .card {
+        padding: 12px;
+    }
+    .session-layout {
+        grid-template-columns: 1fr;
+        height: auto;
+        min-height: 0;
+    }
+
+    .status-strip {
+        gap: var(--spacing-xs);
+    }
+
+    .status-chip {
+        min-width: 100%;
+    }
+
+    .main-panel-topbar .status-chip {
+        min-width: max-content;
+    }
+
+    .btn-add,
+    .btn-tool,
+    .card-action-btn,
+    .btn-session-export,
+    .btn-session-open,
+    .btn-session-clone,
+    .btn-session-refresh,
+    .btn-session-delete,
+    .btn-icon,
+    .session-item-copy {
+        min-height: 44px;
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+
+    .btn-icon,
+    .session-item-copy {
+        min-width: 36px;
+    }
+
+    .session-item {
+        min-height: 79px;
+        height: 79px;
+        contain-intrinsic-size: 79px;
+        padding: 12px 14px;
+    }
+
+    .session-item-header {
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .session-item-main {
+        align-items: center;
+    }
+
+    .session-item-copy {
+        width: 36px;
+        height: 36px;
+        min-width: 36px;
+        min-height: 36px;
+        border-radius: 6px;
+        padding: 2px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transform: translate(-3px, 0);
+    }
+
+    .session-item-copy svg {
+        width: 10px;
+        height: 10px;
+    }
+
+    .session-item-title {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .session-item-actions {
+        margin-top: 0;
+    }
+
+    .session-item-meta {
+        margin-top: 4px;
+        margin-bottom: 0;
+        gap: 4px;
+        align-items: center;
+    }
+
+    .trash-item-body {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+
+    .trash-item-actions {
+        opacity: 1;
+        justify-content: flex-end;
+    }
+
+    .trash-item-cwd {
+        max-width: 140px;
+    }
+
+    .card {
+        padding: 8px;
+    }
+
+    .card-list {
+        gap: 4px;
+        margin-bottom: 4px;
+    }
+
+    .card-actions {
+        gap: 8px;
+    }
+
+    .card-action-btn {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+    }
+
+    .card-action-btn svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    .card-trailing {
+        grid-auto-flow: row;
+        grid-auto-columns: 1fr;
+        justify-content: stretch;
+        justify-items: end;
+    }
+
+    .card-trailing .card-actions {
+        width: 100%;
+        justify-content: flex-end;
+        justify-self: end;
+    }
+
+    /* 移动端不显示配置状态 pill，节省空间 */
+    .card-trailing .pill {
+        display: none;
+    }
+
+    .openclaw-card-list .card-trailing .pill {
+        display: block;
+    }
+
+    .auth-profile-item {
+        padding: 10px;
+    }
+
+    .auth-profile-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+
+    .auth-profile-actions {
+        justify-content: flex-start;
+    }
+
+    .auth-profile-grid {
+        grid-template-columns: 1fr;
+        gap: 6px;
+        margin-top: 8px;
+    }
+
+    .auth-profile-row {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding-bottom: 4px;
+        border-bottom: 1px dashed rgba(160, 145, 130, 0.25);
+    }
+
+    .auth-profile-row:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+    }
+
+    .session-preview {
+        border-radius: var(--radius-lg);
+    }
+
+    .skills-summary-strip {
+        grid-template-columns: 1fr;
+    }
+
+    .skills-panel {
+        padding: 10px;
+    }
+
+    .skills-root-box {
+        font-size: 11px;
+    }
+}
+
+@media (max-width: 820px) {
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        min-height: 100vh;
+        overflow: hidden;
+    }
+
+    .app-shell {
+        grid-template-columns: 1fr;
+        flex: 1 1 auto;
+        min-height: 0;
+        height: auto;
+        overflow: hidden;
+    }
+
+    .side-rail {
+        display: none !important;
+    }
+
+    .lang-fab {
+        display: none !important;
+    }
+
+    .top-tabs {
+        display: flex !important;
+        flex: 0 0 auto;
+        width: 100%;
+        max-width: 100%;
+        margin: 8px 0 10px;
+        padding: 0 max(18px, calc(env(safe-area-inset-right, 0px) + 14px)) 4px max(10px, calc(env(safe-area-inset-left, 0px) + 10px));
+        gap: 5px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-padding-inline: 10px 18px;
+        background: rgba(255, 248, 241, 0.96);
+        position: relative;
+        z-index: 30;
+    }
+
+    .top-tab:last-child {
+        margin-right: 8px;
+    }
+
+    .main-panel {
+        padding: 0 12px 16px;
+        height: 100%;
+        min-height: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .main-panel-topbar {
+        position: sticky;
+        top: 0;
+        z-index: 20;
+        margin: 0 0 10px;
+        padding: 0 0 8px;
+        background: rgba(255, 248, 241, 0.96);
+        backdrop-filter: blur(14px) saturate(130%);
+    }
+}