codexmate 0.0.19 → 0.0.21

package/web-ui/styles/responsive.css

@@ -0,0 +1,450 @@
+.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) {
+    .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) {
+    .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) {
+    .app-shell {
+        grid-template-columns: 1fr;
+        min-height: auto;
+        height: auto;
+        overflow: visible;
+    }
+
+    .side-rail {
+        display: none;
+    }
+
+    .top-tabs {
+        display: flex !important;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 2px;
+        margin-left: -2px;
+        margin-right: -2px;
+    }
+
+    .main-panel {
+        padding: 0 12px 16px;
+        height: auto;
+        overflow-y: visible;
+    }
+
+    .main-panel-topbar {
+        position: static;
+        margin: 0 0 10px;
+        padding: 0;
+        background: transparent;
+        backdrop-filter: none;
+    }
+
+    .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 {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+
+    .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;
+    }
+
+    body {
+        padding: var(--spacing-md) var(--spacing-sm);
+    }
+    .container {
+        padding: 0 var(--spacing-sm) var(--spacing-md);
+    }
+    .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%;
+    }
+
+    .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: 75px;
+        height: 75px;
+        contain-intrinsic-size: 75px;
+        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 {
+        -webkit-line-clamp: 1;
+        max-height: none;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .session-item-actions {
+        margin-top: 0;
+    }
+
+    .session-item-meta {
+        margin-top: -2px;
+        margin-bottom: 0;
+        gap: 4px;
+        align-items: center;
+    }
+
+    .trash-item.session-item {
+        min-height: auto;
+        height: auto;
+        contain-intrinsic-size: auto;
+    }
+
+    .trash-item-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+
+    .trash-item-mainline {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+    }
+
+    .trash-item-side {
+        width: 100%;
+        min-width: 0;
+        align-items: stretch;
+        gap: 10px;
+        padding-top: 8px;
+        border-top: 1px dashed rgba(216, 201, 184, 0.55);
+    }
+
+    .trash-item-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        justify-content: flex-start;
+        width: 100%;
+    }
+
+    .trash-item-actions .btn-mini {
+        width: 100%;
+        height: 44px;
+        min-height: 44px;
+        padding: 0 10px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        white-space: nowrap;
+    }
+
+    .trash-item .session-count-badge {
+        align-self: flex-start;
+        margin-top: 0;
+    }
+
+    .trash-item-title {
+        -webkit-line-clamp: 3;
+        max-height: none;
+        white-space: normal;
+        text-overflow: clip;
+        overflow: hidden;
+    }
+
+    .trash-item-meta {
+        margin-top: 6px;
+        margin-bottom: 0;
+        gap: 6px;
+        align-items: center;
+    }
+
+    .trash-item-time {
+        padding-top: 2px;
+        line-height: 1.35;
+        text-align: right;
+    }
+
+    .trash-item-path {
+        grid-template-columns: 1fr;
+        gap: 4px;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+}