codex-endpoint-switcher 1.1.0 → 1.3.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,21 @@ code {
   position: relative;
   max-width: 1440px;
   margin: 0 auto;
-  padding: 28px;
+  height: 100vh;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.app-shell {
+  height: 100%;
+  display: block;
+}
+
+.app-shell[hidden],
+.auth-gate[hidden] {
+  display: none;
 }
 
-.hero-card,
 .panel {
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
@@ -60,15 +77,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,108 +86,80 @@ code {
   font-weight: 700;
 }
 
-.hero-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;
-}
-
-.hero-text {
-  max-width: 620px;
-  margin: 16px 0 0;
-  color: var(--muted);
-  font-size: 1rem;
-  line-height: 1.7;
-}
-
-.hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 24px;
+.auth-gate {
+  height: 100%;
+  display: grid;
+  place-items: center;
 }
 
-.hero-side {
-  position: relative;
-  min-height: 220px;
-  border-radius: 28px;
+.auth-card {
+  width: min(560px, 100%);
+  min-height: auto;
+  padding: 20px;
+  border-radius: 36px;
+  display: block;
   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;
+    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);
 }
 
-.hero-badge {
-  position: absolute;
-  right: 22px;
-  bottom: 22px;
-  display: inline-flex;
-  align-items: center;
-  padding: 12px 18px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.82);
+.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);
-  color: var(--text);
-  font-weight: 700;
 }
 
-.orb {
-  position: absolute;
-  border-radius: 999px;
-  filter: blur(2px);
-  animation: drift 9s ease-in-out infinite;
+.auth-panel-header {
+  margin-bottom: 0;
 }
 
-.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));
+.auth-form {
+  margin-top: 0;
 }
 
-.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;
+.auth-form .field-hint,
+.auth-status {
+  margin-top: 2px;
 }
 
 .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: auto minmax(0, 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 +167,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,
@@ -204,12 +192,30 @@ code {
 
 .current-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.current-summary {
+  margin-bottom: 6px;
+}
+
+.current-copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1.4;
+}
+
+.current-tools {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
 .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 +228,31 @@ code {
   word-break: break-all;
 }
 
-.metric-card-wide {
-  grid-column: span 2;
+.current-panel .panel-header {
+  margin-bottom: 6px;
+}
+
+.current-panel {
+  align-self: start;
+  display: grid;
+  align-content: start;
+}
+
+.current-panel .metric-card {
+  padding: 5px 8px;
+}
+
+.current-panel .metric-card strong {
+  margin-top: 2px;
+  font-size: 0.88rem;
+}
+
+.current-panel .metric-label {
+  font-size: 0.76rem;
+}
+
+.current-panel .secondary-button {
+  height: 32px;
 }
 
 .metric-label {
@@ -233,19 +262,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 +349,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;
 }
 
-.sync-status-card-wide {
-  grid-column: span 2;
+.account-primary-card strong {
+  font-size: 1rem;
+}
+
+.account-inline-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.account-inline-card {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.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 +458,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,16 +489,52 @@ input[readonly] {
 
 .profiles-list {
   display: grid;
+  grid-auto-rows: minmax(190px, auto);
+  align-content: start;
+  flex: 1 1 auto;
   gap: 14px;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 6px;
+  padding-bottom: 6px;
+}
+
+.profiles-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  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 {
   display: grid;
+  grid-template-rows: auto auto;
   gap: 14px;
+  min-height: 100%;
   padding: 18px;
   border-radius: var(--radius-md);
   background: var(--panel-strong);
   border: 1px solid rgba(47, 36, 30, 0.08);
+  overflow: visible;
 }
 
 .profile-card.active {
@@ -433,6 +559,7 @@ input[readonly] {
 .profile-heading {
   display: grid;
   gap: 8px;
+  min-width: 0;
 }
 
 .profile-badges {
@@ -458,7 +585,10 @@ input[readonly] {
 
 .profile-meta {
   display: grid;
+  grid-template-rows: repeat(3, auto);
   gap: 8px;
+  min-height: 0;
+  align-content: start;
 }
 
 .profile-meta span {
@@ -466,10 +596,14 @@ input[readonly] {
   gap: 4px;
   color: var(--muted);
   font-size: 0.92rem;
+  min-width: 0;
 }
 
 .profile-meta strong {
   color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .profile-path {
@@ -489,11 +623,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 +646,301 @@ 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);
-  }
+.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;
 }
 
 @media (max-width: 1160px) {
-  .hero-card,
+  body {
+    overflow: auto;
+  }
+
+  .page-shell {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .auth-gate {
+    height: auto;
+  }
+
   .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;
   }
 
-  .hero-side {
-    min-height: 180px;
+  .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,
+  .panel {
+    border-radius: 20px;
+    padding: 14px;
+  }
+
+  .account-hint {
+    font-size: 0.82rem;
+    line-height: 1.4;
+  }
+
+  .current-tools {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .current-tools 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-tools {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .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;
+    min-height: 0;
+  }
+
+  .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-width: 560px) {
+  .current-tools {
+    grid-template-columns: 1fr;
+  }
+
+  .profiles-list {
+    grid-auto-rows: auto;
+  }
+
+  .profile-card {
+    height: auto;
+  }
+
+  .profile-meta {
+    grid-template-rows: none;
+  }
+
+  .profile-meta strong {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
+}
+
+@media (max-height: 920px) and (min-width: 1161px) {
+  .page-shell {
+    padding: 12px;
+  }
+
+  .auth-card {
+    min-height: auto;
+    padding: 16px;
+  }
+
+  .panel {
+    padding: 16px;
+  }
+
+  .metric-card {
+    padding: 12px;
+  }
+
+  .stack-form {
+    gap: 10px;
+    padding: 12px;
+  }
+
+  .content-grid {
+    gap: 14px;
   }
 }