loadtoagent 1.0.0

package/renderer/styles-settings.css

@@ -0,0 +1,606 @@
+/*
+ * Settings and releases
+ * ---------------------
+ * Language preferences, version state, release notes, and update actions.
+ */
+
+.settings-nav-item .nav-icon {
+  font-size: 14px;
+}
+
+.settings-nav-item b {
+  background: #17352f;
+  color: #73e3bd;
+}
+
+.settings-nav-item.active {
+  background: linear-gradient(90deg,rgba(67,207,166,.14),rgba(67,207,166,.035));
+  box-shadow: inset 2px 0 #55d9ae;
+}
+
+.update-notice {
+  max-width: 1640px;
+  min-height: 62px;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  margin: 20px auto 0;
+  padding: 11px 12px 11px 14px;
+  border: 1px solid rgba(73,216,171,.3);
+  border-radius: 14px;
+  background: radial-gradient(circle at 8% 0,rgba(69,220,170,.12),transparent 34%),linear-gradient(100deg,#0e1d1b,#0b131a);
+  box-shadow: 0 14px 42px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.03);
+}
+
+.update-notice-signal {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border: 1px solid #2e6657;
+  border-radius: 10px;
+  background: #123128;
+}
+
+.update-notice-signal i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #5ce2b6;
+  box-shadow: 0 0 0 5px rgba(92,226,182,.08),0 0 16px rgba(92,226,182,.5);
+  animation: pulse 1.6s infinite;
+}
+
+.update-notice>div {
+  min-width: 0;
+  flex: 1;
+}
+
+.update-notice b {
+  display: block;
+  color: #d9f1e9;
+  font-size: 12px;
+}
+
+.update-notice small {
+  display: block;
+  margin-top: 4px;
+  color: #718c85;
+  font-size: 9px;
+}
+
+.update-notice button {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid #347760;
+  border-radius: 9px;
+  background: #153d31;
+  color: #88ebc8;
+  font-size: 10px;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.update-notice button:hover {
+  background: #1a4b3b;
+}
+
+.update-notice button span {
+  margin-left: 7px;
+}
+
+.settings-section {
+  max-width: 1320px;
+  margin: 26px auto 0;
+}
+
+.settings-head {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 16px;
+}
+
+.settings-head h2 {
+  margin: 0;
+  color: #edf4f2;
+  font-size: 25px;
+  letter-spacing: -.04em;
+}
+
+.settings-head p:last-child {
+  max-width: 760px;
+  margin: 7px 0 0;
+  color: #788890;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.settings-head .eyebrow {
+  margin: 0 0 5px;
+  color: #58dcb1;
+}
+
+.settings-emblem {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  overflow: hidden;
+  border: 1px solid #356658;
+  border-radius: 15px;
+  background: linear-gradient(145deg,#153b30,#0c1b1c);
+  box-shadow: inset 0 1px rgba(255,255,255,.04),0 0 34px rgba(61,205,159,.08);
+}
+
+.settings-emblem span {
+  z-index: 1;
+  color: #70e5bd;
+  font-size: 25px;
+}
+
+.settings-emblem i {
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  border: 1px dashed rgba(96,224,184,.2);
+  border-radius: 50%;
+  animation: orbit 9s linear infinite;
+}
+
+.language-settings-card {
+  display: grid;
+  grid-template-columns: 54px minmax(0,1fr) minmax(210px,270px);
+  align-items: center;
+  gap: 17px;
+  margin-bottom: 12px;
+  padding: 17px 19px;
+  border: 1px solid #2a403e;
+  border-radius: 16px;
+  background: radial-gradient(circle at 0 0,rgba(73,216,171,.09),transparent 28%),linear-gradient(120deg,#0f1a20,#0a1219);
+  box-shadow: inset 0 1px rgba(255,255,255,.025);
+}
+
+.language-settings-mark {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #34665b;
+  border-radius: 13px;
+  background: #102b27;
+  color: #78e4c1;
+  font-family: "Geist Mono","Cascadia Code",Consolas,monospace;
+  font-size: 17px;
+  font-weight: 800;
+  box-shadow: 0 0 24px rgba(73,216,171,.07);
+}
+
+.language-settings-copy {
+  min-width: 0;
+}
+
+.language-settings-copy>span {
+  display: block;
+  color: #5d857a;
+  font-size: 8px;
+  font-weight: 850;
+  letter-spacing: .13em;
+  text-transform: uppercase;
+}
+
+.language-select>span {
+  display: block;
+  color: #5d857a;
+  font-size: 8px;
+  font-weight: 850;
+  letter-spacing: .13em;
+  text-transform: uppercase;
+}
+
+.language-settings-copy h3 {
+  margin: 5px 0 0;
+  color: #e3eceb;
+  font-size: 15px;
+  letter-spacing: -.025em;
+}
+
+.language-settings-copy p {
+  margin: 6px 0 0;
+  color: #71838c;
+  font-size: 10px;
+  line-height: 1.55;
+}
+
+.language-select {
+  display: block;
+}
+
+.language-select select {
+  width: 100%;
+  height: 42px;
+  margin-top: 7px;
+  padding: 0 38px 0 12px;
+  border: 1px solid #31544c;
+  border-radius: 10px;
+  background-color: #0d191d;
+  color: #d5e4e1;
+  font: 700 11px "Geist",sans-serif;
+  outline: none;
+  cursor: pointer;
+}
+
+.language-select select:hover {
+  border-color: #407467;
+  background-color: #10221f;
+}
+
+.language-select select:focus-visible {
+  border-color: #5eddb5;
+  box-shadow: 0 0 0 3px rgba(94,221,181,.1);
+}
+
+.update-panel {
+  overflow: hidden;
+  border: 1px solid #263740;
+  border-radius: 19px;
+  background: radial-gradient(circle at 86% -16%,rgba(71,202,163,.1),transparent 35%),linear-gradient(145deg,#0d151d,#091017 62%);
+  box-shadow: 0 20px 58px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025);
+}
+
+.version-route {
+  display: grid;
+  grid-template-columns: minmax(210px,1fr) minmax(180px,.72fr) minmax(210px,1fr);
+  align-items: center;
+  gap: 14px;
+  padding: 25px;
+  border-bottom: 1px solid #203039;
+  background: linear-gradient(90deg,rgba(255,255,255,.012),rgba(72,205,165,.025));
+}
+
+.version-node {
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px;
+  border: 1px solid #293a45;
+  border-radius: 14px;
+  background: #0d161e;
+}
+
+.version-node span {
+  color: #687b89;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+
+.version-node strong {
+  margin-top: 10px;
+  color: #e5edf1;
+  font-family: "Geist Mono","Cascadia Code",Consolas,monospace;
+  font-size: 29px;
+  letter-spacing: -.045em;
+}
+
+.remote-version-node {
+  border-color: #2f5a4f;
+  background: radial-gradient(circle at 100% 0,rgba(73,216,171,.1),transparent 48%),#0d191b;
+}
+
+.remote-version-node strong {
+  color: #86e8c7;
+}
+
+.version-connector {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+}
+
+.version-connector i {
+  height: 1px;
+  background: linear-gradient(90deg,transparent,#345e54);
+}
+
+.version-connector i:last-child {
+  background: linear-gradient(90deg,#345e54,transparent);
+}
+
+.version-connector span {
+  color: #50786d;
+  font-family: "Geist Mono","Cascadia Code",Consolas,monospace;
+  font-size: 8px;
+  font-weight: 800;
+  letter-spacing: .13em;
+  white-space: nowrap;
+}
+
+.update-console {
+  display: grid;
+  grid-template-columns: 54px minmax(0,1fr) auto;
+  align-items: center;
+  gap: 15px;
+  padding: 20px 24px;
+}
+
+.update-state-mark {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #344551;
+  border-radius: 13px;
+  background: #121c25;
+  color: #91a5b1;
+  font-size: 20px;
+}
+
+.update-state-copy span {
+  color: #687c89;
+  font-size: 8px;
+  font-weight: 850;
+  letter-spacing: .13em;
+}
+
+.update-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.update-actions button {
+  white-space: nowrap;
+}
+
+.update-panel[data-update-status="available"] .update-state-mark {
+  border-color: #34735f;
+  background: #12362d;
+  color: #6fe4bc;
+  box-shadow: 0 0 28px rgba(61,205,159,.08);
+}
+
+.update-panel[data-update-status="downloaded"] .update-state-mark {
+  border-color: #34735f;
+  background: #12362d;
+  color: #6fe4bc;
+  box-shadow: 0 0 28px rgba(61,205,159,.08);
+}
+
+.update-panel[data-update-status="current"] .update-state-mark {
+  border-color: #31556a;
+  background: #102733;
+  color: #7ed8f1;
+}
+
+.update-panel[data-update-status="error"] .update-state-mark {
+  border-color: #714148;
+  background: #311b20;
+  color: #ff9a9f;
+}
+
+.update-panel[data-update-status="checking"] .update-state-mark span {
+  animation: update-spin 1.1s linear infinite;
+}
+
+.update-progress {
+  margin: 0 24px 20px;
+  padding: 13px 14px;
+  border: 1px solid #26483f;
+  border-radius: 11px;
+  background: #0c1a19;
+}
+
+.update-progress>div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #83a79c;
+  font-size: 9px;
+}
+
+.update-progress>div:first-child b {
+  color: #78dfbd;
+  font-family: "Geist Mono","Cascadia Code",Consolas,monospace;
+}
+
+.update-progress-track {
+  height: 5px;
+  margin-top: 9px;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #142923;
+}
+
+.update-progress-track i {
+  display: block;
+  width: 0;
+  height: 100%;
+  border-radius: 4px;
+  background: linear-gradient(90deg,#3fb88f,#70e2ba);
+  box-shadow: 0 0 12px rgba(77,216,174,.35);
+  transition: width .18s ease;
+}
+
+.update-progress small {
+  display: block;
+  margin-top: 7px;
+  color: #58756c;
+  font-size: 8px;
+}
+
+.update-error {
+  margin: 0 24px 20px;
+  padding: 11px 13px;
+  border: 1px solid #663b42;
+  border-radius: 10px;
+  background: #25171b;
+  color: #e7959b;
+  font-size: 9px;
+  line-height: 1.55;
+}
+
+.release-notes {
+  border-top: 1px solid #203039;
+  background: #0a1117;
+}
+
+.release-notes>div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px 24px;
+  border-bottom: 1px solid #18252d;
+}
+
+.release-notes button {
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: #67caa9;
+  font-size: 9px;
+  cursor: pointer;
+}
+
+.release-notes button:hover {
+  color: #8ce9c9;
+}
+
+.settings-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(3,minmax(0,1fr));
+  gap: 11px;
+  margin-top: 12px;
+}
+
+.settings-meta-grid article {
+  min-height: 130px;
+  padding: 17px;
+  border: 1px solid #22313b;
+  border-radius: 14px;
+  background: linear-gradient(145deg,rgba(16,24,33,.92),rgba(10,16,23,.86));
+}
+
+.settings-head>div>p:last-child {
+  color: #98a7b2;
+  font-size: 12px;
+}
+
+.version-node small {
+  margin-top: 8px;
+  color: #98a7b2;
+  font-size: 12px;
+}
+
+.update-state-copy p {
+  margin: 6px 0 0;
+  line-height: 1.5;
+  color: #98a7b2;
+  font-size: 12px;
+}
+
+.settings-meta-grid p {
+  margin: 8px 0 0;
+  line-height: 1.65;
+  color: #98a7b2;
+  font-size: 12px;
+}
+
+.release-notes pre {
+  max-height: 230px;
+  margin: 0;
+  padding: 18px 24px;
+  overflow: auto;
+  font-family: "Geist",sans-serif;
+  line-height: 1.75;
+  white-space: pre-wrap;
+  color: #98a7b2;
+  font-size: 12px;
+}
+
+.settings-meta-grid span {
+  display: block;
+  color: #57746b;
+  font-weight: 850;
+  letter-spacing: .11em;
+  font-size: 10px;
+}
+
+.version-node>span {
+  font-size: 10px;
+}
+
+.update-state-copy>span {
+  font-size: 10px;
+}
+
+.release-notes>div span {
+  color: #5e756f;
+  font-weight: 850;
+  letter-spacing: .13em;
+  font-size: 10px;
+}
+
+.settings-meta-grid b {
+  display: block;
+  margin-top: 9px;
+  color: #c4d3d3;
+  font-size: 14px;
+}
+
+.update-state-copy h3 {
+  margin: 5px 0 0;
+  color: #dfe8ec;
+  letter-spacing: -.025em;
+  font-size: 14px;
+}
+
+body[data-current-view="settings"] .topbar {
+  align-items: center;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #1d2835;
+}
+
+body[data-current-view="settings"] .topbar .eyebrow {
+  display: none;
+}
+
+body[data-current-view="settings"] .topbar .subtitle {
+  display: none;
+}
+
+body[data-current-view="settings"] .top-actions {
+  display: none;
+}
+
+body[data-current-view="settings"] .topbar h1 {
+  font-size: 22px;
+}
+
+@keyframes orbit {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes motion-live-update {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+
+  35% {
+    filter: brightness(1.12);
+  }
+}
+
+@keyframes update-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}