pinokiod 7.3.10 → 7.3.12

package/server/public/universal-launcher.css

@@ -23,7 +23,7 @@
   --universal-launcher-primary-border-hover: var(--universal-quick-action-bg);
   --universal-create-dropdown-surface: #ffffff;
   --universal-create-dropdown-shadow: 0 12px 24px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
-  --universal-create-dropdown-hover: rgba(65, 105, 225, 0.1);
+  --universal-create-dropdown-hover: var(--pinokio-sidebar-tab-hover, rgba(15, 23, 42, 0.035));
 }
 
 body.dark {
@@ -49,31 +49,29 @@ body.dark {
   --universal-launcher-primary-border-hover: var(--universal-quick-action-text);
   --universal-create-dropdown-surface: #151517;
   --universal-create-dropdown-shadow: 0 16px 36px rgba(0, 0, 0, 0.38), 0 2px 10px rgba(0, 0, 0, 0.24);
-  --universal-create-dropdown-hover: rgba(65, 105, 225, 0.22);
+  --universal-create-dropdown-hover: var(--pinokio-sidebar-tab-hover, rgba(255, 255, 255, 0.055));
 }
 
 .main-sidebar .universal-create-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: auto;
-  right: 0;
-  z-index: 80;
-  min-width: 172px;
-  width: max-content;
-  max-width: min(220px, calc(100vw - 24px));
+  position: static;
+  min-width: 0;
+  width: 100%;
+  max-width: none;
   height: auto !important;
   max-height: none !important;
   display: none;
   flex-direction: column;
   align-items: stretch;
   align-content: flex-start;
-  gap: 2px;
-  padding: 4px;
-  border: 1px solid var(--universal-launcher-border-strong);
-  border-radius: 8px;
-  background: var(--universal-create-dropdown-surface);
-  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.08);
-  overflow: clip;
+  gap: 1px;
+  margin: 1px 0 3px;
+  padding: 1px 0 1px 27px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  overflow: visible;
+  box-sizing: border-box;
 }
 
 .main-sidebar .universal-create-menu:not([open]) .universal-create-dropdown {
@@ -84,6 +82,15 @@ body.dark {
   display: flex !important;
 }
 
+.main-sidebar .universal-create-menu[open] > summary {
+  background: var(--pinokio-sidebar-tab-hover, transparent) !important;
+  color: var(--pinokio-sidebar-tab-active-color, var(--universal-launcher-text)) !important;
+}
+
+.main-sidebar .universal-create-menu[open] > summary .main-sidebar-action-icon {
+  color: var(--pinokio-sidebar-icon-active, currentColor) !important;
+}
+
 .main-sidebar .universal-create-dropdown button {
   appearance: none;
   border: 0;
@@ -92,15 +99,15 @@ body.dark {
   align-items: center;
   justify-content: flex-start;
   background: transparent;
-  color: var(--universal-launcher-text);
+  color: var(--pinokio-sidebar-tab-muted, var(--universal-launcher-text));
   text-align: left;
-  min-height: 32px;
+  min-height: 25px;
   gap: 3px;
-  padding: 0 8px;
+  padding: 3px 5px;
   border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.25;
   white-space: nowrap;
   cursor: pointer;
   box-sizing: border-box;
@@ -110,12 +117,14 @@ body.dark {
 .main-sidebar .universal-create-dropdown button:hover,
 .main-sidebar .universal-create-dropdown button:focus-visible {
   background: var(--universal-create-dropdown-hover);
+  color: var(--pinokio-sidebar-tab-active-color, var(--universal-launcher-text));
   outline: none;
 }
 
 body.dark .main-sidebar .universal-create-dropdown button:hover,
 body.dark .main-sidebar .universal-create-dropdown button:focus-visible {
   background: var(--universal-create-dropdown-hover);
+  color: var(--pinokio-sidebar-tab-active-color, var(--universal-launcher-text));
 }
 
 .universal-launcher-overlay {
@@ -1752,9 +1761,9 @@ body.dark .universal-launcher-error {
 
 .swal2-popup.universal-launcher-download-modal {
   border: 1px solid var(--universal-launcher-border);
-  border-radius: 12px;
+  border-radius: 8px;
   background: var(--universal-launcher-panel-bg);
-  box-shadow: 0 26px 64px rgba(15, 23, 42, 0.18);
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
 }
 
 .swal2-container.universal-launcher-download-container {
@@ -1782,7 +1791,7 @@ body.dark .universal-launcher-error {
 .universal-launcher-download-icon {
   width: 32px;
   height: 32px;
-  border-radius: 9px;
+  border-radius: 7px;
   border: 1px solid var(--universal-launcher-border);
   background: var(--universal-launcher-panel-bg-muted);
   color: var(--universal-launcher-title-color);
@@ -1799,10 +1808,10 @@ body.dark .universal-launcher-error {
 }
 
 .universal-launcher-download-title {
-  font-size: 18px;
-  line-height: 1.15;
-  font-weight: 700;
-  letter-spacing: -0.03em;
+  font-size: 16px;
+  line-height: 1.25;
+  font-weight: 600;
+  letter-spacing: 0;
   color: var(--universal-launcher-text);
 }
 
@@ -1844,9 +1853,9 @@ body.dark .universal-launcher-error {
 .universal-launcher-download-input {
   width: 100%;
   box-sizing: border-box;
-  min-height: 38px;
-  padding: 0 12px;
-  border-radius: 8px;
+  min-height: 36px;
+  padding: 0 10px;
+  border-radius: 6px;
   border: 1px solid var(--universal-launcher-border-strong);
   background: var(--universal-launcher-control-surface);
   color: var(--universal-launcher-text);

package/server/public/urldropdown.css

@@ -1825,3 +1825,287 @@ body.dark .host-badge {
 body.dark .host-arch {
   color: #a0aec0;
 }
+
+/* Minimal modal normalization for launcher and capture overlays. */
+.create-launcher-modal-overlay,
+.capture-modal-overlay {
+  background: rgba(9, 11, 15, 0.34);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+body.dark .create-launcher-modal-overlay,
+body.dark .capture-modal-overlay {
+  background: rgba(0, 0, 0, 0.58);
+}
+
+.create-launcher-modal,
+.capture-modal {
+  border: 1px solid rgba(24, 24, 27, 0.12) !important;
+  border-radius: 8px !important;
+  background: #ffffff !important;
+  color: #18181b !important;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
+}
+
+body.dark .create-launcher-modal,
+body.dark .capture-modal {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  background: #1b1c1d !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-header {
+  border-bottom-color: rgba(24, 24, 27, 0.1) !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-header {
+  border-bottom-color: rgba(255, 255, 255, 0.09) !important;
+}
+
+.create-launcher-modal h3,
+.capture-modal-title {
+  color: inherit !important;
+  font-size: 16px !important;
+  line-height: 1.25 !important;
+  font-weight: 600 !important;
+  letter-spacing: 0 !important;
+}
+
+.create-launcher-modal .create-launcher-modal-description,
+.capture-modal-description {
+  color: #71717a !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-description,
+body.dark .capture-modal-description {
+  color: rgba(229, 231, 235, 0.62) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-close {
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 6px !important;
+  border-color: rgba(24, 24, 27, 0.12) !important;
+  background: transparent !important;
+  color: #71717a !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-close {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: rgba(229, 231, 235, 0.58) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-close:hover,
+.create-launcher-modal .create-launcher-modal-close:focus-visible {
+  background: rgba(24, 24, 27, 0.06) !important;
+  color: #18181b !important;
+  outline: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-close:hover,
+body.dark .create-launcher-modal .create-launcher-modal-close:focus-visible {
+  background: rgba(255, 255, 255, 0.07) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-input,
+.create-launcher-modal .create-launcher-modal-textarea,
+.create-launcher-modal .create-launcher-modal-template-input {
+  border-radius: 6px !important;
+  border-color: rgba(24, 24, 27, 0.16) !important;
+  background: #ffffff !important;
+  color: #18181b !important;
+  box-shadow: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-input,
+body.dark .create-launcher-modal .create-launcher-modal-textarea,
+body.dark .create-launcher-modal .create-launcher-modal-template-input {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-input:focus,
+.create-launcher-modal .create-launcher-modal-textarea:focus,
+.create-launcher-modal .create-launcher-modal-template-input:focus {
+  border-color: rgba(24, 24, 27, 0.42) !important;
+  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12) !important;
+  outline: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-input:focus,
+body.dark .create-launcher-modal .create-launcher-modal-textarea:focus,
+body.dark .create-launcher-modal .create-launcher-modal-template-input:focus {
+  border-color: rgba(255, 255, 255, 0.38) !important;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-template,
+.create-launcher-modal .create-launcher-modal-tool,
+.create-launcher-modal .create-launcher-upload-dropzone,
+.create-launcher-modal .create-launcher-upload-item {
+  border-color: rgba(24, 24, 27, 0.1) !important;
+  background: rgba(24, 24, 27, 0.03) !important;
+  box-shadow: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-template,
+body.dark .create-launcher-modal .create-launcher-modal-tool,
+body.dark .create-launcher-modal .create-launcher-upload-dropzone,
+body.dark .create-launcher-modal .create-launcher-upload-item {
+  border-color: rgba(255, 255, 255, 0.09) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-tool:hover,
+.create-launcher-modal .create-launcher-modal-tool.selected,
+.create-launcher-modal .create-launcher-modal-tool:focus-within,
+body.dark .create-launcher-modal .create-launcher-modal-tool:hover,
+body.dark .create-launcher-modal .create-launcher-modal-tool.selected,
+body.dark .create-launcher-modal .create-launcher-modal-tool:focus-within {
+  border-color: rgba(24, 24, 27, 0.2) !important;
+  background: rgba(24, 24, 27, 0.06) !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-tool:hover,
+body.dark .create-launcher-modal .create-launcher-modal-tool.selected,
+body.dark .create-launcher-modal .create-launcher-modal-tool:focus-within {
+  border-color: rgba(255, 255, 255, 0.18) !important;
+  background: rgba(255, 255, 255, 0.07) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-tool::before,
+body.dark .create-launcher-modal .create-launcher-modal-tool::before {
+  border-color: rgba(24, 24, 27, 0.3) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-tool::before {
+  border-color: rgba(255, 255, 255, 0.32) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-tool.selected::before {
+  border-color: #18181b !important;
+  background: #18181b !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-tool.selected::before {
+  border-color: rgba(250, 250, 250, 0.94) !important;
+  background: rgba(250, 250, 250, 0.94) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-button,
+.capture-modal-button {
+  min-height: 32px !important;
+  padding: 0 12px !important;
+  border-radius: 6px !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  transform: none !important;
+}
+
+.create-launcher-modal .create-launcher-modal-button.confirm,
+.capture-modal-button.primary {
+  border: 1px solid #18181b !important;
+  background: #18181b !important;
+  color: #ffffff !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-button.confirm,
+body.dark .capture-modal-button.primary {
+  border-color: rgba(250, 250, 250, 0.94) !important;
+  background: rgba(250, 250, 250, 0.94) !important;
+  color: #1b1c1d !important;
+}
+
+.create-launcher-modal .create-launcher-modal-button.confirm:hover,
+.capture-modal-button.primary:hover {
+  border-color: #27272a !important;
+  background: #27272a !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-button.confirm:hover,
+body.dark .capture-modal-button.primary:hover {
+  border-color: #ffffff !important;
+  background: #ffffff !important;
+}
+
+.create-launcher-modal .create-launcher-modal-button.cancel,
+.capture-modal-button.secondary {
+  border: 1px solid rgba(24, 24, 27, 0.12) !important;
+  background: transparent !important;
+  color: #52525b !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-button.cancel,
+body.dark .capture-modal-button.secondary {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: rgba(229, 231, 235, 0.7) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-button.cancel:hover,
+.capture-modal-button.secondary:hover {
+  border-color: rgba(24, 24, 27, 0.2) !important;
+  background: rgba(24, 24, 27, 0.06) !important;
+  color: #18181b !important;
+  box-shadow: none !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-button.cancel:hover,
+body.dark .capture-modal-button.secondary:hover {
+  border-color: rgba(255, 255, 255, 0.18) !important;
+  background: rgba(255, 255, 255, 0.07) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-button:focus-visible,
+.capture-modal-button:focus-visible {
+  outline: 2px solid rgba(24, 24, 27, 0.28) !important;
+  outline-offset: 2px !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-button:focus-visible,
+body.dark .capture-modal-button:focus-visible {
+  outline-color: rgba(255, 255, 255, 0.28) !important;
+}
+
+.create-launcher-modal .create-launcher-upload-dropzone.dragover {
+  border-color: rgba(24, 24, 27, 0.28) !important;
+  background: rgba(24, 24, 27, 0.05) !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-upload-dropzone.dragover {
+  border-color: rgba(255, 255, 255, 0.22) !important;
+  background: rgba(255, 255, 255, 0.06) !important;
+}
+
+.create-launcher-modal .create-launcher-upload-remove {
+  color: #52525b !important;
+}
+
+body.dark .create-launcher-modal .create-launcher-upload-remove {
+  color: rgba(229, 231, 235, 0.7) !important;
+}
+
+.create-launcher-modal .create-launcher-modal-advanced,
+.create-launcher-modal .create-launcher-modal-bookmarklet {
+  color: #52525b !important;
+  text-decoration-color: rgba(82, 82, 91, 0.35);
+}
+
+body.dark .create-launcher-modal .create-launcher-modal-advanced,
+body.dark .create-launcher-modal .create-launcher-modal-bookmarklet {
+  color: rgba(229, 231, 235, 0.7) !important;
+  text-decoration-color: rgba(229, 231, 235, 0.28);
+}