pinokiod 3.84.0 → 3.86.0

package/server/public/style.css

@@ -176,12 +176,12 @@ aside .tab.submenu {
   justify-content: center;
 }
 .url-bar .http-url:hover {
-  color: royalblue;
-  border-color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
+  border-color: rgba(127, 91, 243, 0.9);
 }
 .url-bar .https-url:hover {
-  color: royalblue;
-  border-color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
+  border-color: rgba(127, 91, 243, 0.9);
 }
 .url-bar .https-url {
   cursor: pointer;
@@ -295,7 +295,7 @@ body.dark .type-tabs {
   */
 }
 .navheader a:hover, .navheader button:hover {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .navheader a, .navheader button {
   cursor: pointer;
@@ -475,10 +475,10 @@ footer b {
   font-size: 12px;
 }
 .requirements .requirement-item .label.highlighted {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .requirements .requirement-item .name.highlighted {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .requirements .requirement-item .name {
   color: rgba(0,0,0,0.7);
@@ -508,7 +508,7 @@ body.dark .requirements .requirement-item .name {
   color: rgba(255,255,255,0.8);
 }
 body.dark .requirements .requirement-item .name.highlighted {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 body.dark .requirement-item {
 /*
@@ -552,7 +552,7 @@ body.dark .requirement-item {
 }
 #del-bin {
   cursor: pointer;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 
 html.columns {
@@ -747,12 +747,13 @@ form.search {
   justify-content: center;
   gap: 5px;
 }
-.btn-tab .btn {
+body.dark .btn-tab .btn, .btn-tab .btn {
   display: flex;
   text-align: center;
   align-items: center;
   gap: 5px;
   box-sizing: border-box;
+  background: rgba(127, 91, 243, 0.9) !important;
 }
 body.dark form.search input[type=search] {
   border: none;
@@ -1581,7 +1582,7 @@ body.dark .swal2-popup {
 }
 .swal2-html-container a {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .swal2-html-container .footer {
   text-align: center;
@@ -1731,7 +1732,7 @@ body.dark .swal2-modal input {
   margin-right: 5px;
 }
 .swal2-modal input[type=checkbox]:checked {
-  background: royalblue; 
+  background: rgba(127, 91, 243, 0.9);
 }
 .swal2-modal .checkbox-row {
   display: flex;
@@ -1806,7 +1807,7 @@ body.dark .swal2-styled.swal2-confirm{
 }
 .noty_bar.noty_type__success {
   color: white !important;
-  background: royalblue !important;
+  background: rgba(127, 91, 243, 0.9) !important;
 }
 b {
   color: cornflowerblue;
@@ -1907,7 +1908,7 @@ b {
 }
 .dependencies .item .downloaded {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   margin-left: 5px;
 }
 .dependencies h2 {
@@ -1920,7 +1921,7 @@ b {
   background: none;
 }
 .opener.btn {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 .field-row {
   display: flex;
@@ -1952,10 +1953,10 @@ body.dark .btn2 {
   */
 }
 .btn2:hover {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 body.dark .btn2:hover {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 /*
 body.dark .browser-options {
@@ -2124,7 +2125,7 @@ footer.status {
   height: 100%;
   */
   margin: 0;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   color: white;
   overflow: auto;
   flex-grow: 1;
@@ -2134,7 +2135,7 @@ footer.status {
   padding: 10px;
   box-sizing: border-box;
   align-items: center;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 #error-screen-close {
   background: rgba(0, 0, 0, 0.6);
@@ -2162,11 +2163,11 @@ footer.status {
   text-transform: uppercase;
 }
 .tippy-box[data-theme~='pointer'] {
-  background-color: royalblue;
+  background-color: rgba(127, 91, 243, 0.9);
   color: white;
 }
 .tippy-box[data-theme~='pointer'] .tippy-arrow {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 #fsmenu {
 /*
@@ -2188,7 +2189,7 @@ mark{
 #close-error-screen {
   background: white !important;
   padding: 15px !important;
-  color: royalblue !important;
+  color: rgba(127, 91, 243, 0.9) !important;
   cursor: pointer;
 }
 
@@ -2318,11 +2319,11 @@ body.dark .dropdown-content .btn2 {
 }
 
 body.dark .mode-selector .btn2.selected {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   color: white;
 }
 .mode-selector .btn2.selected {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   color: white;
   border-radius: 4px;
 }

package/server/public/urldropdown.css

@@ -3,7 +3,7 @@
   width: 100%;
 }
 .url-modal-overlay .url-dropdown {
-  max-height: 50%;
+  max-height: 50vh;
 }
 .url-dropdown {
   position: absolute;
@@ -75,11 +75,480 @@ body.dark .url-dropdown-loading {
   padding: 12px 16px;
   text-align: center;
   color: #718096;
-  font-style: italic;
 }
 body.dark .url-dropdown-empty {
   color: #a0aec0;
 }
+.url-dropdown-empty-message {
+  font-style: italic;
+}
+.url-dropdown-empty-actions {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.url-dropdown-create-button {
+  padding: 8px 18px;
+  border-radius: 6px;
+  border: none;
+  background: var(--light-btn-bg, #7f5bf3);
+  color: var(--light-btn-color, #fff);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.1s ease;
+}
+.url-dropdown-create-button:hover {
+  background: #6846e3;
+}
+.url-dropdown-create-button:active {
+  transform: translateY(1px);
+}
+body.dark .url-dropdown-create-button {
+  background: var(--dark-btn-bg, rgba(255,255,255,0.07));
+  color: var(--dark-btn-color, whitesmoke);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+body.dark .url-dropdown-create-button:hover {
+  background: rgba(255,255,255,0.12);
+}
+.url-dropdown-empty-description {
+  font-size: 12px;
+  color: #4a5568;
+}
+body.dark .url-dropdown-empty-description {
+  color: #cbd5f5;
+}
+.create-launcher-modal-overlay {
+  position: fixed;
+  inset: 0;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.35);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+  animation: createLauncherModalFade 160ms ease-out;
+}
+.create-launcher-modal {
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 20px;
+  padding: 28px 32px;
+  width: min(640px, calc(100% - 64px));
+  box-shadow: 0 40px 100px rgba(15, 23, 42, 0.35);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  -webkit-backdrop-filter: blur(28px);
+  backdrop-filter: blur(28px);
+  animation: createLauncherModalPop 180ms ease-out;
+}
+body.dark .create-launcher-modal {
+  background: rgba(17, 24, 39, 0.82);
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  color: rgba(226, 232, 240, 0.96);
+  box-shadow: 0 50px 120px rgba(2, 6, 20, 0.82);
+}
+.create-launcher-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding-bottom: 4px;
+}
+.create-launcher-modal-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(127, 91, 243, 0.9), rgba(95, 64, 216, 0.9));
+  color: white;
+  box-shadow: 0 18px 40px rgba(111, 76, 242, 0.3);
+  flex-shrink: 0;
+}
+.create-launcher-modal-icon i {
+  font-size: 18px;
+}
+.create-launcher-modal-headings {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.create-launcher-modal h3 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.create-launcher-modal-description {
+  margin: 0;
+  font-size: 14px;
+  color: rgba(71, 85, 105, 0.8);
+  line-height: 1.5;
+}
+body.dark .create-launcher-modal-description {
+  color: rgba(203, 213, 225, 0.9);
+}
+.create-launcher-modal-label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(71, 85, 105, 0.9);
+}
+body.dark .create-launcher-modal-label {
+  color: rgba(203, 213, 225, 0.75);
+}
+.create-launcher-modal-input {
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  background: rgba(248, 250, 255, 0.65);
+  font-size: 15px;
+  line-height: 1.4;
+  color: var(--light-color, #131313);
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+.create-launcher-modal-input:focus {
+  outline: none;
+  border-color: var(--light-link-color, #7f5bf3);
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.12);
+}
+body.dark .create-launcher-modal-input {
+  background: rgba(148, 163, 184, 0.12);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  color: rgba(226, 232, 240, 0.96);
+}
+body.dark .create-launcher-modal-input:focus {
+  border-color: rgba(127, 91, 243, 0.7);
+  background: rgba(76, 86, 106, 0.3);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.2);
+}
+.create-launcher-modal-error {
+  min-height: 18px;
+  font-size: 12px;
+  color: #e53e3e;
+}
+.create-launcher-modal-textarea {
+  padding: 16px 18px;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  min-height: 132px;
+  resize: vertical;
+  font-size: 15px;
+  line-height: 1.55;
+  background: rgba(248, 250, 255, 0.68);
+  color: var(--light-color, #131313);
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+.create-launcher-modal-textarea:focus {
+  outline: none;
+  border-color: var(--light-link-color, #7f5bf3);
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.12);
+}
+body.dark .create-launcher-modal-textarea {
+  background: rgba(148, 163, 184, 0.12);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  color: rgba(226, 232, 240, 0.96);
+}
+body.dark .create-launcher-modal-textarea:focus {
+  border-color: rgba(127, 91, 243, 0.7);
+  background: rgba(76, 86, 106, 0.32);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.2);
+}
+.create-launcher-modal-template {
+  display: none;
+  flex-direction: column;
+  gap: 12px;
+  border-radius: 16px;
+  padding: 16px 18px;
+  background: rgba(248, 250, 255, 0.7);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+}
+body.dark .create-launcher-modal-template {
+  background: rgba(30, 41, 59, 0.45);
+  border-color: rgba(148, 163, 184, 0.32);
+}
+.create-launcher-modal-template-title {
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: rgba(71, 85, 105, 0.85);
+}
+body.dark .create-launcher-modal-template-title {
+  color: rgba(226, 232, 240, 0.82);
+}
+.create-launcher-modal-template-description {
+  margin: 0;
+  font-size: 13px;
+  color: rgba(71, 85, 105, 0.75);
+}
+body.dark .create-launcher-modal-template-description {
+  color: rgba(203, 213, 225, 0.75);
+}
+.create-launcher-modal-template-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.create-launcher-modal-template-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.create-launcher-modal-template-field-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: rgba(71, 85, 105, 0.9);
+}
+body.dark .create-launcher-modal-template-field-label {
+  color: rgba(226, 232, 240, 0.86);
+}
+.create-launcher-modal-template-input {
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background: rgba(255, 255, 255, 0.82);
+  font-size: 14px;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+.create-launcher-modal-template-input:focus {
+  outline: none;
+  border-color: rgba(127, 91, 243, 0.8);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.18);
+}
+body.dark .create-launcher-modal-template-input {
+  background: rgba(17, 24, 39, 0.65);
+  border-color: rgba(148, 163, 184, 0.4);
+  color: rgba(226, 232, 240, 0.95);
+}
+body.dark .create-launcher-modal-template-input:focus {
+  border-color: rgba(148, 163, 184, 0.9);
+  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.22);
+}
+.create-launcher-modal-tools {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  font-size: 13px;
+}
+.create-launcher-modal-tools-title {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(71, 85, 105, 0.8);
+}
+body.dark .create-launcher-modal-tools-title {
+  color: rgba(203, 213, 225, 0.7);
+}
+.create-launcher-modal-tools-options {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.create-launcher-modal-tool {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
+  background: rgba(255, 255, 255, 0.7);
+}
+.create-launcher-modal-tool:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
+}
+.create-launcher-modal-tool.selected {
+  border-color: rgba(127, 91, 243, 0.65);
+  background: rgba(127, 91, 243, 0.16);
+  box-shadow: 0 12px 32px rgba(127, 91, 243, 0.25);
+}
+.create-launcher-modal-tool:focus-within {
+  border-color: rgba(127, 91, 243, 0.6);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.22);
+}
+body.dark .create-launcher-modal-tool {
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  background: rgba(76, 86, 106, 0.26);
+  color: rgba(226, 232, 240, 0.92);
+  box-shadow: 0 12px 32px rgba(2, 6, 20, 0.35);
+}
+body.dark .create-launcher-modal-tool:focus-within {
+  border-color: rgba(127, 91, 243, 0.7);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.28);
+}
+body.dark .create-launcher-modal-tool:hover {
+  box-shadow: 0 14px 40px rgba(2, 6, 20, 0.45);
+}
+body.dark .create-launcher-modal-tool.selected {
+  border-color: rgba(127, 91, 243, 0.7);
+  background: rgba(127, 91, 243, 0.28);
+  box-shadow: 0 14px 40px rgba(5, 9, 25, 0.55);
+}
+.create-launcher-modal-tool input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.create-launcher-modal-tool::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid rgba(71, 85, 105, 0.35);
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.create-launcher-modal-tool.selected::before {
+  border-color: rgba(127, 91, 243, 0.9);
+  background: rgba(127, 91, 243, 0.9);
+  box-shadow: 0 0 0 4px rgba(127, 91, 243, 0.18);
+}
+.create-launcher-modal-tool-label {
+  font-weight: 600;
+  font-size: 15px;
+  color: rgba(15, 23, 42, 0.88);
+}
+body.dark .create-launcher-modal-tool-label {
+  color: rgba(226, 232, 240, 0.96);
+}
+.create-launcher-modal-tool-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  object-fit: contain;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 2px;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+  flex-shrink: 0;
+}
+body.dark .create-launcher-modal-tool-icon {
+  background: rgba(30, 41, 59, 0.6);
+  box-shadow: 0 4px 14px rgba(2, 6, 20, 0.45);
+}
+.create-launcher-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+.create-launcher-modal-button {
+  padding: 10px 20px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
+}
+.create-launcher-modal-button.cancel {
+  background: rgba(148, 163, 184, 0.16);
+  color: rgba(15, 23, 42, 0.75);
+}
+.create-launcher-modal-button.cancel:hover {
+  background: rgba(148, 163, 184, 0.25);
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+}
+body.dark .create-launcher-modal-button.cancel {
+  background: rgba(148, 163, 184, 0.2);
+  color: rgba(226, 232, 240, 0.9);
+}
+.create-launcher-modal-button.confirm {
+  background: linear-gradient(135deg, rgba(127, 91, 243, 0.95), rgba(84, 63, 196, 0.95));
+  color: var(--light-btn-color, #fff);
+  box-shadow: 0 16px 36px rgba(111, 76, 242, 0.28);
+}
+.create-launcher-modal-button.confirm:hover {
+  box-shadow: 0 20px 40px rgba(111, 76, 242, 0.35);
+  transform: translateY(-1px);
+}
+body.dark .create-launcher-modal-button.confirm {
+  background: linear-gradient(135deg, rgba(127, 91, 243, 0.9), rgba(88, 63, 199, 0.9));
+  color: white;
+}
+.create-launcher-modal-button:active {
+  transform: translateY(1px);
+}
+.create-launcher-modal-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 6px;
+  font-size: 13px;
+}
+.create-launcher-modal-advanced {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  /*
+  text-decoration: none;
+  */
+  color: var(--light-link-color, #7f5bf3);
+  transition: color 0.2s ease;
+}
+.create-launcher-modal-advanced:hover {
+  color: #6846e3;
+  text-decoration: underline;
+}
+.create-launcher-modal-advanced.secondary {
+  color: rgba(15, 23, 42, 0.7);
+}
+.create-launcher-modal-advanced.secondary:hover {
+  color: rgba(15, 23, 42, 0.95);
+}
+body.dark .create-launcher-modal-advanced {
+  color: var(--dark-link-color, #b7a1ff);
+}
+body.dark .create-launcher-modal-advanced.secondary {
+  color: rgba(226, 232, 240, 0.8);
+}
+body.dark .create-launcher-modal-advanced.secondary:hover {
+  color: rgba(226, 232, 240, 0.98);
+}
+@keyframes createLauncherModalFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes createLauncherModalPop {
+  from {
+    opacity: 0;
+    transform: scale(0.98) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
 .urlbar {
   flex-grow: 1;
   margin: 0 20px;
@@ -182,7 +651,7 @@ body.dark .url-modal-input {
 
 /* Host categorization styles */
 .url-dropdown-host-header {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   font-weight: bold;
   font-size: 18px;
   color: white;
@@ -193,7 +662,7 @@ body.dark .url-modal-input {
 }
 
 body.dark .url-dropdown-host-header {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   color: white;
   border-bottom-color: rgba(255, 255, 255, 0.1);
 }
@@ -256,7 +725,7 @@ body.dark .host-badge {
   color: white !important;
 }
 .peer-network-button {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   color: white;
   border: none;
   padding: 4px 10px;