Skip to content

Commit 41c15c2

Browse files
aboseabose
committed
refactor: ai prompt box css in remote functions
1 parent 1f741a8 commit 41c15c2

File tree

3 files changed

+109
-109
lines changed

3 files changed

+109
-109
lines changed

‎src/extensionsIntegrated/phoenix-pro/browser-css/ai-prompt-box.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:host {
2+
all: initial !important;
3+
}
4+
5+
.phoenix-ai-prompt-box {
6+
position: absolute !important;
7+
background: #3C3F41 !important;
8+
border: 1px solid #4285F4 !important;
9+
border-radius: 4px !important;
10+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
11+
font-family: Arial, sans-serif !important;
12+
z-index: 2147483647 !important;
13+
width: var(--ai-box-width) !important;
14+
padding: 0 !important;
15+
box-sizing: border-box !important;
16+
}
17+
18+
.phoenix-ai-prompt-input-container {
19+
position: relative !important;
20+
}
21+
22+
.phoenix-ai-prompt-textarea {
23+
width: 100% !important;
24+
height: var(--ai-box-height) !important;
25+
border: none !important;
26+
border-radius: 4px 4px 0 0 !important;
27+
padding: 12px 40px 12px 16px !important;
28+
font-size: 14px !important;
29+
font-family: Arial, sans-serif !important;
30+
resize: none !important;
31+
outline: none !important;
32+
box-sizing: border-box !important;
33+
background: transparent !important;
34+
color: #c5c5c5 !important;
35+
transition: background 0.2s ease !important;
36+
}
37+
38+
.phoenix-ai-prompt-textarea:focus {
39+
background: rgba(255, 255, 255, 0.03) !important;
40+
}
41+
42+
.phoenix-ai-prompt-textarea::placeholder {
43+
color: #a0a0a0 !important;
44+
opacity: 0.7 !important;
45+
}
46+
47+
.phoenix-ai-prompt-send-button {
48+
background-color: transparent !important;
49+
border: 1px solid transparent !important;
50+
color: #a0a0a0 !important;
51+
border-radius: 4px !important;
52+
cursor: pointer !important;
53+
padding: 3px 6px !important;
54+
display: flex !important;
55+
align-items: center !important;
56+
justify-content: center !important;
57+
font-size: 14px !important;
58+
transition: all 0.2s ease !important;
59+
}
60+
61+
.phoenix-ai-prompt-send-button:hover:not(:disabled) {
62+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
63+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
64+
}
65+
66+
.phoenix-ai-prompt-send-button:disabled {
67+
opacity: 0.5 !important;
68+
cursor: not-allowed !important;
69+
}
70+
71+
.phoenix-ai-bottom-controls {
72+
border-top: 1px solid rgba(255,255,255,0.14) !important;
73+
padding: 8px 16px !important;
74+
background: transparent !important;
75+
border-radius: 0 0 4px 4px !important;
76+
display: flex !important;
77+
align-items: center !important;
78+
justify-content: space-between !important;
79+
}
80+
81+
.phoenix-ai-model-select {
82+
padding: 4px 8px !important;
83+
border: 1px solid transparent !important;
84+
border-radius: 4px !important;
85+
font-size: 12px !important;
86+
background: transparent !important;
87+
color: #a0a0a0 !important;
88+
outline: none !important;
89+
cursor: pointer !important;
90+
transition: all 0.2s ease !important;
91+
}
92+
93+
.phoenix-ai-model-select:hover {
94+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
95+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
96+
}
97+
98+
.phoenix-ai-model-select:focus {
99+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
100+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
101+
}
102+
103+
.phoenix-ai-model-select option {
104+
background: #000 !important;
105+
color: #fff !important;
106+
padding: 4px 8px !important;
107+
}

‎src/extensionsIntegrated/phoenix-pro/browser-css/image-gallery.css‎

Whitespace-only changes.

‎src/extensionsIntegrated/phoenix-pro/remote-styles.js‎

Lines changed: 2 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -18,115 +18,8 @@ define(function (require, exports, module) {
1818
const toastMessageStyles = require("text!./browser-css/toast-message.css");
1919
const dialogOverlayStyles = require("text!./browser-css/dialog-overlay.css");
2020

21-
const aiPromptBoxStyles = `
22-
:host {
23-
all: initial !important;
24-
}
25-
26-
.phoenix-ai-prompt-box {
27-
position: absolute !important;
28-
background: #3C3F41 !important;
29-
border: 1px solid #4285F4 !important;
30-
border-radius: 4px !important;
31-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
32-
font-family: Arial, sans-serif !important;
33-
z-index: 2147483647 !important;
34-
width: var(--ai-box-width) !important;
35-
padding: 0 !important;
36-
box-sizing: border-box !important;
37-
}
38-
39-
.phoenix-ai-prompt-input-container {
40-
position: relative !important;
41-
}
42-
43-
.phoenix-ai-prompt-textarea {
44-
width: 100% !important;
45-
height: var(--ai-box-height) !important;
46-
border: none !important;
47-
border-radius: 4px 4px 0 0 !important;
48-
padding: 12px 40px 12px 16px !important;
49-
font-size: 14px !important;
50-
font-family: Arial, sans-serif !important;
51-
resize: none !important;
52-
outline: none !important;
53-
box-sizing: border-box !important;
54-
background: transparent !important;
55-
color: #c5c5c5 !important;
56-
transition: background 0.2s ease !important;
57-
}
58-
59-
.phoenix-ai-prompt-textarea:focus {
60-
background: rgba(255, 255, 255, 0.03) !important;
61-
}
62-
63-
.phoenix-ai-prompt-textarea::placeholder {
64-
color: #a0a0a0 !important;
65-
opacity: 0.7 !important;
66-
}
67-
68-
.phoenix-ai-prompt-send-button {
69-
background-color: transparent !important;
70-
border: 1px solid transparent !important;
71-
color: #a0a0a0 !important;
72-
border-radius: 4px !important;
73-
cursor: pointer !important;
74-
padding: 3px 6px !important;
75-
display: flex !important;
76-
align-items: center !important;
77-
justify-content: center !important;
78-
font-size: 14px !important;
79-
transition: all 0.2s ease !important;
80-
}
81-
82-
.phoenix-ai-prompt-send-button:hover:not(:disabled) {
83-
border: 1px solid rgba(0, 0, 0, 0.24) !important;
84-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
85-
}
86-
87-
.phoenix-ai-prompt-send-button:disabled {
88-
opacity: 0.5 !important;
89-
cursor: not-allowed !important;
90-
}
91-
92-
.phoenix-ai-bottom-controls {
93-
border-top: 1px solid rgba(255,255,255,0.14) !important;
94-
padding: 8px 16px !important;
95-
background: transparent !important;
96-
border-radius: 0 0 4px 4px !important;
97-
display: flex !important;
98-
align-items: center !important;
99-
justify-content: space-between !important;
100-
}
101-
102-
.phoenix-ai-model-select {
103-
padding: 4px 8px !important;
104-
border: 1px solid transparent !important;
105-
border-radius: 4px !important;
106-
font-size: 12px !important;
107-
background: transparent !important;
108-
color: #a0a0a0 !important;
109-
outline: none !important;
110-
cursor: pointer !important;
111-
transition: all 0.2s ease !important;
112-
}
113-
114-
.phoenix-ai-model-select:hover {
115-
border: 1px solid rgba(0, 0, 0, 0.24) !important;
116-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
117-
}
118-
119-
.phoenix-ai-model-select:focus {
120-
border: 1px solid rgba(0, 0, 0, 0.24) !important;
121-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
122-
}
123-
124-
.phoenix-ai-model-select option {
125-
background: #000 !important;
126-
color: #fff !important;
127-
padding: 4px 8px !important;
128-
}
129-
`;
21+
// this is the AI prompt box that comes up when you click on the AI button in the ribbon
22+
const aiPromptBoxStyles = require("text!./browser-css/ai-prompt-box.css");
13023

13124
const imageGalleryStyles = `
13225
:host {

0 commit comments

Comments
 (0)