pinokiod 7.3.9 → 7.3.11

package/server/public/task-launcher.css

@@ -105,15 +105,15 @@ body.dark.connect-page.task-launcher-page::before {
 body.plugin-detail-page .swal2-popup.pinokio-modern-modal {
   padding: 0 !important;
   border: 1px solid var(--task-border) !important;
-  border-radius: 14px !important;
+  border-radius: 8px !important;
   background: var(--task-panel) !important;
-  box-shadow: 0 26px 72px rgba(15, 23, 42, 0.22) !important;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
   color: var(--task-text) !important;
   overflow: hidden !important;
 }
 
 body.dark.plugin-detail-page .swal2-popup.pinokio-modern-modal {
-  box-shadow: 0 30px 84px rgba(0, 0, 0, 0.46) !important;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
 }
 
 body.plugin-detail-page .swal2-popup.pinokio-modern-modal .swal2-html-container.pinokio-modern-html {
@@ -127,16 +127,16 @@ body.plugin-detail-page .swal2-popup.pinokio-modern-modal .swal2-html-container.
 }
 
 body.plugin-detail-page .pinokio-modern-close.swal2-close {
-  top: 14px !important;
-  right: 14px !important;
-  width: 36px;
-  height: 36px;
+  top: 12px !important;
+  right: 12px !important;
+  width: 28px;
+  height: 28px;
   margin: 0;
   border: 1px solid var(--task-border);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  border-radius: 6px;
+  background: transparent;
   color: var(--task-muted) !important;
-  font-size: 30px;
+  font-size: 22px;
   line-height: 1;
 }
 
@@ -156,23 +156,23 @@ body.plugin-detail-page .pinokio-modal-surface {
 body.plugin-detail-page .pinokio-modal-header {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 18px 20px 14px;
+  gap: 10px;
+  padding: 14px;
   border-bottom: 1px solid var(--task-border);
 }
 
 body.plugin-detail-page .pinokio-modal-icon {
-  width: 38px;
-  height: 38px;
+  width: 32px;
+  height: 32px;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--task-border);
-  border-radius: 10px;
+  border-radius: 7px;
   background: color-mix(in srgb, var(--task-panel) 92%, var(--task-soft));
-  color: var(--task-accent);
-  font-size: 15px;
+  color: var(--task-muted);
+  font-size: 14px;
 }
 
 body.plugin-detail-page .pinokio-modal-heading {
@@ -183,9 +183,9 @@ body.plugin-detail-page .pinokio-modal-heading {
 }
 
 body.plugin-detail-page .pinokio-modal-title {
-  font-size: 15px;
+  font-size: 16px;
   line-height: 1.25;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--task-text);
 }
 
@@ -197,7 +197,7 @@ body.plugin-detail-page .pinokio-modal-subtitle {
 
 body.plugin-detail-page .pinokio-modal-body,
 body.plugin-detail-page .pinokio-modal-body--iframe {
-  padding: 16px 20px 20px;
+  padding: 12px 14px 14px;
   background: transparent;
 }
 
@@ -207,7 +207,7 @@ body.plugin-detail-page .pinokio-modal-body--iframe iframe {
   height: min(64vh, 540px);
   min-height: 360px;
   border: 1px solid var(--task-border);
-  border-radius: 12px;
+  border-radius: 7px;
   background: color-mix(in srgb, var(--task-panel) 90%, var(--task-soft));
 }
 
@@ -235,28 +235,30 @@ body.plugin-detail-page .pinokio-modal-body--iframe iframe {
 }
 
 .task-library-page .task-shell-header {
-  padding: 0 28px 12px;
+  padding: 12px 18px 14px;
 }
 
 .task-library-page .task-title {
-  font-size: clamp(28px, 3.2vw, 38px);
+  font-size: 22px;
+  line-height: 1.12;
+  letter-spacing: 0;
 }
 
 .task-library-page .task-description {
-  margin-top: 6px;
+  margin-top: 4px;
   font-size: 12px;
-  line-height: 1.45;
+  line-height: 1.4;
 }
 
 .task-container {
   flex: 1;
   min-width: 0;
-  padding: 20px 28px 32px;
+  padding: 0;
   box-sizing: border-box;
 }
 
 body.task-page .task-shell {
-  width: min(980px, 100%);
+  width: 100%;
   margin: 0;
   background: transparent;
   border: 0;
@@ -314,27 +316,28 @@ body.task-page .task-shell {
 }
 
 body.plugin-page .task-shell {
-  width: min(1140px, 100%);
+  width: 100%;
 }
 
 body.connect-page .task-shell {
-  width: min(980px, 100%);
+  width: 100%;
 }
 
 .task-shell-header {
   position: static;
   top: auto;
   z-index: auto;
-  padding: 4px 28px 18px;
+  padding: 12px 18px 14px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 20px 24px;
-  align-items: flex-start;
+  gap: 16px 24px;
+  align-items: center;
   border-bottom: 1px solid var(--task-border);
 }
 
 .task-shell-header .task-title {
   display: block;
+  margin: 0;
   padding: 0;
 }
 
@@ -359,15 +362,15 @@ body.connect-page .task-shell {
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 
 .task-eyebrow {
   margin: 0;
   color: var(--task-accent);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
@@ -387,9 +390,10 @@ body.connect-page .task-shell {
 
 .task-title {
   margin: 0;
-  font-size: clamp(26px, 3vw, 34px);
-  line-height: 1.08;
-  letter-spacing: -0.045em;
+  font-size: 22px;
+  line-height: 1.12;
+  letter-spacing: 0;
+  font-weight: 760;
 }
 
 .task-detail-page .task-title {
@@ -398,10 +402,14 @@ body.connect-page .task-shell {
 }
 
 .task-description {
-  margin: 10px 0 0;
+  margin: 4px 0 0;
   color: var(--task-muted);
-  font-size: 14px;
-  line-height: 1.55;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+body.task-page .task-shell-header .task-description {
+  max-width: none;
 }
 
 .task-header-badges {
@@ -488,7 +496,7 @@ body.connect-page .task-shell {
 }
 
 .task-shell-body {
-  padding: 12px 28px 12px;
+  padding: 28px 28px 32px;
   display: grid;
   gap: 0;
 }
@@ -1628,15 +1636,53 @@ body.dark .task-link-button.danger {
 }
 
 .setup-shell {
-  width: min(1120px, 100%);
+  width: 100%;
+}
+
+body.setup-page .task-shell-header {
+  padding-bottom: 14px;
+}
+
+body.setup-page .task-shell-header-main {
+  max-width: 820px;
+}
+
+body.setup-page .task-title {
+  font-size: 22px;
+  line-height: 1.12;
+  letter-spacing: 0;
+  font-weight: 760;
+}
+
+body.setup-page .task-description {
+  max-width: 76ch;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+body.setup-page .task-badge {
+  min-height: 22px;
+  border-radius: 7px;
+  background: transparent;
+}
+
+body.setup-page .task-badge-warning {
+  border-color: rgba(180, 83, 9, 0.26);
+  background: transparent;
+  color: #92400e;
+}
+
+body.dark.setup-page .task-badge-warning {
+  border-color: rgba(251, 191, 36, 0.28);
+  color: #f5d69a;
 }
 
 .setup-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  gap: 36px;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 32px;
   align-items: start;
-  padding-top: 18px;
+  padding-top: 16px;
 }
 
 .setup-requirements-section {
@@ -1646,23 +1692,28 @@ body.dark .task-link-button.danger {
 
 .setup-requirement-list {
   display: grid;
-  gap: 10px;
+  gap: 0;
+  border-top: 1px solid var(--task-border);
+  border-bottom: 1px solid var(--task-border);
 }
 
 .setup-requirement-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 16px;
+  gap: 14px;
   align-items: center;
-  padding: 14px 16px;
-  border: 1px solid var(--task-border);
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  padding: 12px 0;
+  border: 0;
+  border-top: 1px solid var(--task-border);
+  background: transparent;
 }
 
 .setup-requirement-row.needs-update {
-  border-color: color-mix(in srgb, var(--task-accent) 18%, var(--task-border-strong));
-  background: color-mix(in srgb, var(--task-accent) 8%, var(--task-panel));
+  background: transparent;
+}
+
+.setup-requirement-row:first-child {
+  border-top: 0;
 }
 
 .setup-requirement-copy {
@@ -1670,17 +1721,17 @@ body.dark .task-link-button.danger {
 }
 
 .setup-requirement-name {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 700;
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
   color: var(--task-text);
   word-break: break-word;
 }
 
 .setup-requirement-detail {
-  margin-top: 4px;
+  margin-top: 3px;
   color: var(--task-muted);
-  font-size: 12px;
+  font-size: 11px;
   line-height: 1.45;
 }
 
@@ -1688,50 +1739,83 @@ body.dark .task-link-button.danger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  min-height: 30px;
-  padding: 0 11px;
-  border: 1px solid var(--task-border);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--task-panel) 88%, var(--task-soft));
+  gap: 6px;
+  min-height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: var(--task-muted);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.01em;
   white-space: nowrap;
 }
 
+.setup-requirement-state i {
+  font-size: 10px;
+}
+
 .setup-requirement-row.is-installed .setup-requirement-state {
-  color: var(--task-text);
+  color: var(--task-muted);
 }
 
 .setup-requirement-row.needs-update .setup-requirement-state {
-  border-color: color-mix(in srgb, var(--task-accent) 24%, var(--task-border-strong));
-  background: color-mix(in srgb, var(--task-accent) 10%, var(--task-panel));
-  color: color-mix(in srgb, var(--task-accent) 70%, var(--task-text));
+  color: #92400e;
+}
+
+body.dark .setup-requirement-row.needs-update .setup-requirement-state {
+  color: #f5d69a;
 }
 
 .setup-actions-column {
   position: sticky;
-  top: 18px;
+  top: 20px;
   align-self: start;
+  padding-left: 24px;
+  border-left: 1px solid var(--task-border);
 }
 
 .setup-action-card {
   margin: 0;
-  padding: 18px 0 0;
+  padding: 0;
   border-top: 0;
 }
 
 .setup-summary-grid {
-  margin-top: 2px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 7px;
+  margin-top: 6px;
+}
+
+.setup-summary-grid .task-meta-chip {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.setup-summary-grid .task-meta-chip-label {
+  margin-bottom: 0;
+  letter-spacing: 0.04em;
+}
+
+.setup-summary-grid .task-meta-chip-value {
+  font-size: 12px;
+  color: var(--task-text);
 }
 
 .setup-primary-button {
   width: 100%;
   min-height: 40px;
-  margin-top: 18px;
+  margin-top: 16px;
   font-size: 12px;
+  border-radius: 8px;
 }
 
 .setup-install-form {
@@ -1740,9 +1824,9 @@ body.dark .task-link-button.danger {
 
 .setup-secondary-actions {
   display: grid;
-  gap: 10px;
-  padding-top: 16px;
-  margin-top: 16px;
+  gap: 8px;
+  padding-top: 14px;
+  margin-top: 14px;
   border-top: 1px solid var(--task-border);
 }
 
@@ -1752,6 +1836,9 @@ body.dark .task-link-button.danger {
 
 .setup-secondary-actions .task-button {
   justify-content: flex-start;
+  min-height: 30px;
+  border-radius: 7px;
+  color: var(--task-muted);
 }
 
 .setup-reset-loading {
@@ -1782,26 +1869,28 @@ body.dark .task-link-button.danger {
   width: min(480px, 100%);
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 20px;
-  border: 1px solid var(--task-border);
-  border-radius: 16px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  gap: 14px;
+  padding: 16px 0;
+  border: 0;
+  border-top: 1px solid var(--task-border);
+  border-bottom: 1px solid var(--task-border);
+  border-radius: 0;
+  background: transparent;
   box-sizing: border-box;
 }
 
 .setup-loading-icon {
-  width: 42px;
-  height: 42px;
+  width: 36px;
+  height: 36px;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--task-border);
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--task-panel) 92%, var(--task-soft));
-  color: var(--task-accent);
-  font-size: 16px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--task-muted);
+  font-size: 14px;
 }
 
 .setup-loading-copy {
@@ -2266,7 +2355,7 @@ body.plugin-page .plugin-card {
   padding: 15px;
   border-radius: 16px;
   border: 1px solid var(--task-border);
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
+  background: transparent;
   color: var(--task-text);
   text-decoration: none;
   transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
@@ -2274,7 +2363,7 @@ body.plugin-page .plugin-card {
 
 body.plugin-page .plugin-card:hover,
 body.plugin-page .plugin-card:focus-within {
-  background: color-mix(in srgb, var(--task-panel) 88%, var(--task-soft));
+  background: color-mix(in srgb, var(--task-text) 5%, transparent);
   border-color: var(--task-border-strong);
   transform: translateY(-1px);
 }
@@ -2286,7 +2375,7 @@ body.plugin-page .plugin-card .plugin-icon {
   border-radius: 12px;
   object-fit: cover;
   flex-shrink: 0;
-  background: color-mix(in srgb, var(--task-panel) 90%, white);
+  background: color-mix(in srgb, var(--task-text) 5%, transparent);
   border: 1px solid var(--task-border);
 }
 
@@ -2363,7 +2452,7 @@ body.plugin-page .plugin-empty {
   padding: 22px;
   border-radius: 16px;
   border: 1px dashed var(--task-border-strong);
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
+  background: transparent;
 }
 
 body.plugin-page .plugin-install-trigger {
@@ -3049,6 +3138,8 @@ body.dark .plugin-option .option-icon {
     top: 12px;
     order: -1;
     z-index: 2;
+    padding-left: 0;
+    border-left: 0;
   }
 
   .setup-action-card {