pi-studio 0.9.54 → 0.9.56

package/client/studio.css

@@ -222,9 +222,30 @@
     }
 
     button {
+      -webkit-appearance: none;
+      appearance: none;
       cursor: pointer;
     }
 
+    .studio-flat-select {
+      -webkit-appearance: none;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23717a84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+      background-position: right 8px center !important;
+      background-repeat: no-repeat !important;
+      background-size: 10px 6px !important;
+      padding-right: 26px !important;
+    }
+
+    @media (forced-colors: active) {
+      .studio-flat-select {
+        -webkit-appearance: auto;
+        appearance: auto;
+        background-image: none !important;
+        padding-right: 10px !important;
+      }
+    }
+
     button:not(:disabled):hover,
     select:hover {
       background: var(--panel-2);
@@ -442,20 +463,52 @@
       color: var(--accent);
     }
 
+    .studio-header-select-wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .studio-header-select-wrap::after {
+      content: "⌄";
+      position: absolute;
+      top: 50%;
+      right: 4px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1;
+      pointer-events: none;
+      transform: translateY(-58%);
+    }
+
+    .studio-header-select-wrap:hover::after,
+    .studio-header-select-wrap:focus-within::after {
+      color: var(--text);
+    }
+
     .section-header select {
       font-weight: 600;
       font-size: 14px;
       border: none;
       border-radius: 4px;
       background: inherit;
+      background-image: none;
       color: inherit;
       cursor: pointer;
-      padding: 2px 4px;
+      padding: 2px 18px 2px 4px;
       margin: 0;
-      -webkit-appearance: menulist;
-      appearance: menulist;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .section-header select:hover,
+    .section-header select:focus {
+      background-color: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
+    body[data-studio-mode="editor-only"] #editorViewSelectWrap,
     body[data-studio-mode="editor-only"] #editorViewSelect,
     body[data-studio-mode="editor-only"] #sendRunBtn,
     body[data-studio-mode="editor-only"] #queueSteerBtn,
@@ -464,7 +517,9 @@
     body[data-studio-mode="editor-only"] #critiqueBtn,
     body[data-studio-mode="editor-only"] #showMeBtn,
     body[data-studio-mode="editor-only"] #showMeResponseBtn,
+    body[data-studio-mode="editor-only"] #followSelectWrap,
     body[data-studio-mode="editor-only"] #followSelect,
+    body[data-studio-mode="editor-only"] #responseHighlightSelectWrap,
     body[data-studio-mode="editor-only"] #responseHighlightSelect,
     body[data-studio-mode="editor-only"] #pullLatestBtn,
     body[data-studio-mode="editor-only"] #historyPrevBtn,
@@ -496,6 +551,10 @@
       font-size: 14px;
     }
 
+    body[data-watched-file-preview="1"] #leftSectionHeader .section-header-main::before {
+      content: "Source (read-only)";
+    }
+
     body[data-watched-file-preview="1"] #rightSectionHeader .section-header-main::before {
       content: "Watched preview";
     }
@@ -3252,6 +3311,20 @@
       flex: 0 0 auto;
     }
 
+    #responseActions .response-option-select-wrap {
+      width: auto;
+      flex: 0 0 auto;
+    }
+
+    #responseActions .response-option-select-wrap select {
+      width: 100%;
+      min-width: 0;
+      padding-right: 26px;
+      -webkit-appearance: none;
+      appearance: none;
+      background-image: none;
+    }
+
     #critiqueView.git-changes-host {
       flex: 1 1 auto;
       min-height: 0;
@@ -4911,15 +4984,43 @@
       line-height: 1.35;
     }
 
+    .studio-menu-select-wrap {
+      position: relative;
+      display: flex;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .studio-menu-select-wrap::after {
+      content: "⌄";
+      position: absolute;
+      top: 50%;
+      right: 8px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1;
+      pointer-events: none;
+      transform: translateY(-58%);
+    }
+
+    .studio-menu-select-wrap:hover::after,
+    .studio-menu-select-wrap:focus-within::after {
+      color: var(--text);
+    }
+
     .footer-model-menu-field select {
       width: 100%;
       min-width: 0;
       background: var(--panel-2);
+      background-image: none;
       color: var(--text);
       border: 1px solid var(--control-border);
       border-radius: 8px;
-      padding: 5px 7px;
+      padding: 5px 24px 5px 7px;
       font: inherit;
+      -webkit-appearance: none;
+      appearance: none;
     }
 
     .footer-model-menu-note {
@@ -5667,6 +5768,10 @@
       font-size: 12px;
     }
 
+    body.studio-ui-refresh #responseActions .response-option-select-wrap select {
+      padding-right: 24px;
+    }
+
 
     body.studio-ui-refresh main {
       gap: 0;
@@ -5832,8 +5937,11 @@
     body.studio-ui-refresh #rightSectionHeader #rightViewSelect {
       font-size: 14px;
       font-weight: 700;
-      padding: 3px 5px;
+      padding: 3px 20px 3px 5px;
       max-width: 230px;
+      -webkit-appearance: none;
+      appearance: none;
+      background-image: none;
     }
 
     body.studio-ui-refresh .studio-refresh-static-title {
@@ -5845,6 +5953,34 @@
       white-space: nowrap;
     }
 
+    body.studio-ui-refresh .studio-watched-source-title {
+      padding-right: 1px;
+    }
+
+    body.studio-ui-refresh .studio-watched-source-read-only-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      min-height: 20px;
+      padding: 1px 4px;
+      border: 0;
+      background: transparent;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      font-weight: 500;
+      line-height: 1.2;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-watched-source-read-only-badge::before {
+      content: "";
+      width: 5px;
+      height: 5px;
+      border-radius: 999px;
+      background: currentColor;
+      opacity: 0.72;
+    }
+
     body.studio-ui-refresh #leftFocusBtn,
     body.studio-ui-refresh #rightFocusBtn {
       width: 29px;