codex-endpoint-switcher 1.1.0 → 1.2.0

package/src/renderer/styles.css

@@ -21,8 +21,14 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  height: 100%;
+}
+
 body {
   margin: 0;
+  overflow: hidden;
   min-height: 100vh;
   color: var(--text);
   font-family: "Segoe UI Variable", "Microsoft YaHei UI", "PingFang SC", sans-serif;
@@ -48,10 +54,28 @@ code {
   position: relative;
   max-width: 1440px;
   margin: 0 auto;
-  padding: 28px;
+  height: 100vh;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.app-shell {
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 16px;
 }
 
-.hero-card,
+.mobile-section-nav {
+  display: none;
+}
+
+.app-shell[hidden],
+.auth-gate[hidden] {
+  display: none;
+}
+
+.workspace-bar,
 .panel {
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
@@ -60,15 +84,6 @@ code {
   box-shadow: var(--shadow);
 }
 
-.hero-card {
-  display: grid;
-  grid-template-columns: 1.6fr 0.9fr;
-  gap: 20px;
-  overflow: hidden;
-  padding: 34px;
-  border-radius: var(--radius-xl);
-}
-
 .eyebrow,
 .panel-kicker {
   margin: 0 0 10px;
@@ -78,49 +93,101 @@ code {
   font-weight: 700;
 }
 
-.hero-copy h1,
+.workspace-copy h1,
 .panel-header h2,
-.profile-heading h3 {
+.profile-heading h3,
+.modal-header h2 {
   margin: 0;
   font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif;
   letter-spacing: 0.01em;
 }
 
-.hero-copy h1 {
-  font-size: clamp(2rem, 3vw, 3.3rem);
-  line-height: 1.05;
+.auth-gate {
+  height: 100%;
+  display: grid;
+  place-items: center;
 }
 
-.hero-text {
-  max-width: 620px;
-  margin: 16px 0 0;
-  color: var(--muted);
-  font-size: 1rem;
-  line-height: 1.7;
+.auth-card {
+  width: min(560px, 100%);
+  min-height: auto;
+  padding: 20px;
+  border-radius: 36px;
+  display: block;
+  background:
+    radial-gradient(circle at top left, rgba(216, 97, 53, 0.18), transparent 34%),
+    radial-gradient(circle at bottom right, rgba(46, 139, 139, 0.16), transparent 32%),
+    rgba(255, 249, 243, 0.9);
+}
+
+.auth-form-card {
+  display: grid;
+  align-content: center;
+  gap: 14px;
+  padding: 14px;
+  border-radius: 30px;
+  background: rgba(255, 252, 248, 0.82);
+  border: 1px solid rgba(47, 36, 30, 0.08);
+}
+
+.auth-panel-header {
+  margin-bottom: 0;
+}
+
+.auth-form {
+  margin-top: 0;
+}
+
+.auth-form .field-hint,
+.auth-status {
+  margin-top: 2px;
+}
+
+.workspace-bar {
+  display: grid;
+  gap: 14px;
+  padding: 18px 20px;
+  border-radius: var(--radius-xl);
+  background:
+    linear-gradient(135deg, rgba(255, 252, 248, 0.94), rgba(247, 238, 230, 0.9)),
+    var(--panel);
 }
 
-.hero-actions {
+.workspace-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+  align-items: start;
+}
+
+.workspace-copy h1 {
+  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
+  line-height: 1.05;
+}
+
+.workspace-title-row {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
   gap: 12px;
-  margin-top: 24px;
 }
 
-.hero-side {
-  position: relative;
-  min-height: 220px;
-  border-radius: 28px;
-  background:
-    linear-gradient(145deg, rgba(216, 97, 53, 0.18), rgba(46, 139, 139, 0.16)),
-    rgba(255, 255, 255, 0.42);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  overflow: hidden;
+.workspace-text {
+  max-width: 760px;
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: 0.94rem;
+  line-height: 1.55;
+}
+
+.workspace-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
 }
 
 .hero-badge {
-  position: absolute;
-  right: 22px;
-  bottom: 22px;
   display: inline-flex;
   align-items: center;
   padding: 12px 18px;
@@ -131,55 +198,37 @@ code {
   font-weight: 700;
 }
 
-.orb {
-  position: absolute;
-  border-radius: 999px;
-  filter: blur(2px);
-  animation: drift 9s ease-in-out infinite;
-}
-
-.orb-a {
-  top: 28px;
-  left: 36px;
-  width: 180px;
-  height: 180px;
-  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.92), rgba(216, 97, 53, 0.6));
-}
-
-.orb-b {
-  right: 32px;
-  top: 84px;
-  width: 140px;
-  height: 140px;
-  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(46, 139, 139, 0.65));
-  animation-delay: -3s;
+.workspace-badge {
+  flex: 0 0 auto;
+  padding: 10px 14px;
+  white-space: nowrap;
 }
 
 .content-grid {
   display: grid;
-  grid-template-columns: 1.15fr 0.85fr;
+  grid-template-columns: 0.84fr 1.16fr;
+  height: 100%;
   gap: 20px;
-  margin-top: 22px;
-}
-
-.panel {
-  padding: 24px;
-  border-radius: var(--radius-lg);
+  min-height: 0;
+  overflow: hidden;
 }
 
-.current-panel,
-.profiles-panel,
-.footer-panel {
-  grid-column: 1 / 2;
+.left-column {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 20px;
+  overflow: hidden;
 }
 
-.action-panel {
-  grid-column: 2 / 3;
-  grid-row: 1 / 3;
+.left-column > .panel {
+  align-self: stretch;
 }
 
-.footer-panel {
-  grid-column: 1 / 3;
+.panel {
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  min-height: 0;
 }
 
 .panel-header {
@@ -187,7 +236,15 @@ code {
   justify-content: space-between;
   gap: 16px;
   align-items: start;
-  margin-bottom: 18px;
+  margin-bottom: 14px;
+}
+
+.panel-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
 .panel-tag,
@@ -202,14 +259,34 @@ code {
   font-weight: 700;
 }
 
+.mobile-section-button {
+  height: 40px;
+  padding: 0 14px;
+  border: 1px solid rgba(47, 36, 30, 0.1);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.68);
+  color: var(--text);
+  cursor: pointer;
+  transition:
+    background 0.18s ease,
+    color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.mobile-section-button.is-active {
+  background: linear-gradient(135deg, #d86135, #b1431d);
+  color: #fff;
+  box-shadow: 0 12px 28px rgba(179, 67, 29, 0.24);
+}
+
 .current-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
 }
 
 .metric-card {
-  padding: 18px;
+  padding: 14px;
   border-radius: var(--radius-md);
   background: var(--panel-strong);
   border: 1px solid rgba(47, 36, 30, 0.08);
@@ -222,8 +299,29 @@ code {
   word-break: break-all;
 }
 
+.current-panel .panel-header {
+  margin-bottom: 8px;
+}
+
+.current-panel .metric-card {
+  padding: 6px 9px;
+}
+
+.current-panel .metric-card strong {
+  margin-top: 3px;
+  font-size: 0.9rem;
+}
+
+.current-panel .metric-label {
+  font-size: 0.78rem;
+}
+
+.current-panel .secondary-button {
+  height: 32px;
+}
+
 .metric-card-wide {
-  grid-column: span 2;
+  grid-column: 1 / -1;
 }
 
 .metric-label {
@@ -233,19 +331,31 @@ code {
 
 .stack-form {
   display: grid;
-  gap: 14px;
-  padding: 16px;
+  gap: 12px;
+  padding: 14px;
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.45);
   border: 1px solid rgba(47, 36, 30, 0.08);
 }
 
 .stack-form + .stack-form {
-  margin-top: 16px;
+  margin-top: 12px;
 }
 
-.stack-form-alt {
-  background: rgba(251, 246, 240, 0.7);
+#authForm {
+  grid-template-columns: 1fr;
+}
+
+#endpointForm {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+#authForm .field-hint,
+#authForm .action-row,
+#endpointForm .field:nth-of-type(3),
+#endpointForm .field-hint,
+#endpointForm .action-row {
+  grid-column: 1 / -1;
 }
 
 .field {
@@ -308,37 +418,86 @@ input[readonly] {
   gap: 10px;
 }
 
-.sync-status-grid {
+.account-primary-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
 
-.sync-status-card {
-  padding: 14px;
-  border-radius: 14px;
+.account-primary-card,
+.account-inline-card {
+  padding: 12px;
+  border-radius: 16px;
   background: rgba(255, 255, 255, 0.72);
   border: 1px solid rgba(47, 36, 30, 0.08);
 }
 
-.sync-status-card strong {
+.account-primary-card {
+  min-height: 82px;
+  display: grid;
+  align-content: space-between;
+}
+
+.account-primary-card strong,
+.account-inline-card strong {
   display: block;
-  margin-top: 8px;
-  word-break: break-all;
+  margin-top: 6px;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.account-primary-card strong {
+  font-size: 1rem;
+}
+
+.account-inline-grid {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr);
+  gap: 8px;
+}
+
+.account-inline-card {
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
-.sync-status-card-wide {
-  grid-column: span 2;
+.account-inline-card strong {
+  font-size: 0.9rem;
+}
+
+.account-inline-card-wide strong {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.account-actions-grid {
+  display: grid;
+  gap: 7px;
+}
+
+.account-actions-grid-compact {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.account-actions-grid-sync {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.account-actions-grid button {
+  min-width: 0;
+  height: 36px;
+  padding: 0 12px;
 }
 
 .metric-actions {
-  margin-top: 12px;
+  margin-top: 8px;
 }
 
 .primary-button,
 .secondary-button,
 .ghost-button {
-  height: 44px;
+  height: 40px;
   padding: 0 16px;
   border-radius: 999px;
   border: 1px solid transparent;
@@ -368,7 +527,7 @@ input[readonly] {
 }
 
 .danger-button {
-  height: 44px;
+  height: 40px;
   padding: 0 16px;
   border-radius: 999px;
   border: 1px solid rgba(168, 52, 44, 0.15);
@@ -399,7 +558,36 @@ input[readonly] {
 
 .profiles-list {
   display: grid;
+  flex: 1 1 auto;
   gap: 14px;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.profiles-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.profiles-list::-webkit-scrollbar,
+.modal-card::-webkit-scrollbar {
+  width: 10px;
+}
+
+.profiles-list::-webkit-scrollbar-thumb,
+.modal-card::-webkit-scrollbar-thumb {
+  background: rgba(47, 36, 30, 0.18);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.profiles-list::-webkit-scrollbar-track,
+.modal-card::-webkit-scrollbar-track {
+  background: rgba(47, 36, 30, 0.04);
+  border-radius: 999px;
 }
 
 .profile-card {
@@ -489,11 +677,11 @@ input[readonly] {
 }
 
 .status-box {
-  min-height: 70px;
-  padding: 18px;
+  min-height: 46px;
+  padding: 10px 14px;
   border-radius: var(--radius-md);
   border: 1px solid rgba(47, 36, 30, 0.08);
-  line-height: 1.7;
+  line-height: 1.5;
   white-space: pre-wrap;
 }
 
@@ -512,39 +700,302 @@ input[readonly] {
   color: var(--error);
 }
 
-@keyframes drift {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  50% {
-    transform: translate3d(8px, -12px, 0) scale(1.04);
-  }
+.workspace-status {
+  min-height: 0;
+  padding: 12px 14px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.account-panel {
+  display: grid;
+  gap: 7px;
+  align-content: start;
+  overflow: hidden;
+}
+
+.account-hint {
+  margin: -2px 0 0;
+  font-size: 0.82rem;
+  line-height: 1.35;
+}
+
+.modal-open {
+  overflow: hidden !important;
+}
+
+.modal-shell {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.modal-shell[hidden] {
+  display: none;
+}
+
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(47, 36, 30, 0.34);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.modal-card {
+  position: relative;
+  z-index: 1;
+  width: min(720px, calc(100vw - 48px));
+  max-height: min(760px, calc(100vh - 48px));
+  padding: 22px;
+  border-radius: 28px;
+  overflow: auto;
+  background: rgba(255, 249, 243, 0.96);
+  border: 1px solid rgba(49, 40, 34, 0.12);
+  box-shadow: 0 36px 90px rgba(47, 36, 30, 0.24);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: start;
+  margin-bottom: 16px;
+}
+
+.modal-text {
+  margin: 8px 0 0;
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.icon-button {
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(47, 36, 30, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.75);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.endpoint-form {
+  margin-top: 0;
+}
+
+#proxyModeHint {
+  display: none;
 }
 
 @media (max-width: 1160px) {
-  .hero-card,
+  body {
+    overflow: auto;
+  }
+
+  .page-shell {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .auth-gate {
+    height: auto;
+  }
+
+  .workspace-main,
   .content-grid {
     grid-template-columns: 1fr;
   }
 
-  .action-panel,
-  .footer-panel,
-  .profiles-panel,
-  .current-panel {
-    grid-column: auto;
-    grid-row: auto;
+  .left-column {
+    grid-template-rows: auto auto;
+    overflow: visible;
+  }
+
+  #proxyModeHint {
+    display: block;
   }
 
-  .hero-side {
-    min-height: 180px;
+  .workspace-title-row,
+  .workspace-actions,
+  .panel-header-actions {
+    justify-content: flex-start;
   }
 
-  .sync-status-grid {
+  .current-grid,
+  .account-inline-grid {
     grid-template-columns: 1fr;
   }
 
-  .sync-status-card-wide {
-    grid-column: auto;
+  .account-primary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .account-panel,
+  .profiles-panel {
+    overflow: visible;
+  }
+
+  .modal-shell {
+    padding: 16px;
+  }
+
+  .modal-card {
+    width: min(100%, 680px);
+    max-height: calc(100vh - 32px);
+    padding: 18px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-shell {
+    padding: 8px;
+  }
+
+  .app-shell {
+    height: auto;
+    min-height: 100%;
+    gap: 10px;
+  }
+
+  .auth-card {
+    width: 100%;
+    padding: 10px;
+    border-radius: 24px;
+  }
+
+  .auth-form-card,
+  .workspace-bar,
+  .panel {
+    border-radius: 20px;
+    padding: 14px;
+  }
+
+  .workspace-title-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .workspace-text,
+  .account-hint {
+    font-size: 0.82rem;
+    line-height: 1.4;
+  }
+
+  .workspace-actions {
+    width: 100%;
+  }
+
+  .workspace-actions button,
+  .action-row button,
+  .account-actions-grid button,
+  .card-actions button {
+    flex: 1 1 calc(50% - 6px);
+    min-width: 0;
+  }
+
+  .panel-header {
+    gap: 12px;
+  }
+
+  .current-panel,
+  .account-panel,
+  .profiles-panel {
+    height: auto;
+  }
+
+  .current-grid,
+  .account-primary-grid,
+  .account-inline-grid {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .account-actions-grid-sync {
+    grid-template-columns: 1fr;
+  }
+
+  .account-actions-grid-compact {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .account-primary-card,
+  .account-inline-card {
+    padding: 10px;
+    min-height: auto;
+  }
+
+  .account-primary-card strong,
+  .account-inline-card strong {
+    font-size: 0.92rem;
+    line-height: 1.4;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  .profile-card {
+    gap: 10px;
+    padding: 14px;
+  }
+
+  .profile-topline {
+    flex-direction: column;
+  }
+
+  .card-actions {
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .modal-shell {
+    padding: 8px;
+  }
+
+  .modal-card {
+    width: 100%;
+    max-height: calc(100vh - 8px);
+    border-radius: 22px;
+    padding: 16px;
+  }
+}
+
+@media (max-height: 920px) and (min-width: 1161px) {
+  .page-shell {
+    padding: 12px;
+  }
+
+  .auth-card {
+    min-height: auto;
+    padding: 16px;
+  }
+
+  .workspace-bar {
+    padding: 16px 18px;
+  }
+
+  .panel {
+    padding: 16px;
+  }
+
+  .workspace-copy h1 {
+    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
+  }
+
+  .metric-card {
+    padding: 12px;
+  }
+
+  .stack-form {
+    gap: 10px;
+    padding: 12px;
+  }
+
+  .content-grid {
+    gap: 14px;
   }
 }