Skip to content

Commit 05683e0

Browse files
devvaannshdevvaannsh
committed
refactor: improve UI to make it consistent
1 parent 587a7e2 commit 05683e0

File tree

1 file changed

+66
-25
lines changed

1 file changed

+66
-25
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 66 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2050,7 +2050,6 @@ function RemoteFunctions(config = {}) {
20502050
backdrop-filter: blur(10px) !important;
20512051
-webkit-backdrop-filter: blur(10px) !important;
20522052
border: 1px solid rgba(255, 255, 255, 0.2) !important;
2053-
border-radius: 12px !important;
20542053
position: relative !important;
20552054
}
20562055
@@ -2060,7 +2059,7 @@ function RemoteFunctions(config = {}) {
20602059
overflow: hidden !important;
20612060
scroll-behavior: smooth !important;
20622061
padding: 6px !important;
2063-
top: 34px !important;
2062+
top: 30px !important;
20642063
}
20652064
20662065
.phoenix-ribbon-row {
@@ -2103,7 +2102,6 @@ function RemoteFunctions(config = {}) {
21032102
color: #eaeaf0 !important;
21042103
background: rgba(21,25,36,0.65) !important;
21052104
cursor: pointer !important;
2106-
backdrop-filter: blur(8px) !important;
21072105
font-size: 20px !important;
21082106
font-weight: 600 !important;
21092107
user-select: none !important;
@@ -2167,7 +2165,7 @@ function RemoteFunctions(config = {}) {
21672165
display: flex !important;
21682166
width: 100% !important;
21692167
position: absolute !important;
2170-
top: 5px !important;
2168+
top: 6px !important;
21712169
}
21722170
21732171
.phoenix-ribbon-header-left {
@@ -2183,65 +2181,108 @@ function RemoteFunctions(config = {}) {
21832181
21842182
.phoenix-ribbon-search {
21852183
display: flex !important;
2186-
align-items: center !important;
2187-
background: rgba(0,0,0,0.5) !important;
2188-
padding: 5px !important;
2189-
border-radius: 5px !important;
2190-
margin-left: 8px !important;
2184+
align-items: stretch !important;
2185+
background: rgba(21,25,36,0.65) !important;
2186+
padding: 0 !important;
2187+
border-radius: 6px !important;
2188+
margin-left: 6px !important;
2189+
border: 1px solid rgba(255,255,255,0.14) !important;
2190+
transition: all 0.2s ease !important;
2191+
overflow: hidden !important;
2192+
}
2193+
2194+
.phoenix-ribbon-search:hover {
2195+
background: rgba(21,25,36,0.85) !important;
2196+
border-color: rgba(255,255,255,0.25) !important;
2197+
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
2198+
}
2199+
2200+
.phoenix-ribbon-search:focus-within {
2201+
background: rgba(21,25,36,0.9) !important;
2202+
border-color: rgba(106,169,255,0.4) !important;
21912203
}
21922204
21932205
.phoenix-ribbon-search input {
21942206
background: transparent !important;
21952207
border: none !important;
21962208
outline: none !important;
2197-
color: white !important;
2198-
width: 200px !important;
2209+
color: #eaeaf0 !important;
2210+
width: 150px !important;
2211+
padding: 2px 6px !important;
2212+
border-radius: 4px 0 0 4px !important;
21992213
}
22002214
22012215
.phoenix-ribbon-search input::placeholder {
2202-
color: rgba(255, 255, 255, 0.7) !important;
2216+
color: rgba(234, 234, 240, 0.6) !important;
22032217
opacity: 1 !important;
22042218
}
22052219
22062220
.phoenix-ribbon-search input::-webkit-input-placeholder {
2207-
color: rgba(255, 255, 255, 0.7) !important;
2221+
color: rgba(234, 234, 240, 0.6) !important;
22082222
}
22092223
22102224
.phoenix-ribbon-search input::-moz-placeholder {
2211-
color: rgba(255, 255, 255, 0.7) !important;
2225+
color: rgba(234, 234, 240, 0.6) !important;
22122226
opacity: 1 !important;
22132227
}
22142228
22152229
.phoenix-ribbon-search-btn {
2216-
background: none !important;
2230+
background: transparent !important;
22172231
border: none !important;
2218-
color: #6aa9ff !important;
2232+
color: #4285F4 !important;
22192233
cursor: pointer !important;
2234+
padding: 2px 6px !important;
2235+
border-radius: 0 4px 4px 0 !important;
2236+
font-size: 12px !important;
2237+
font-weight: 500 !important;
2238+
transition: all 0.2s ease !important;
2239+
margin-left: 0 !important;
2240+
}
2241+
2242+
.phoenix-ribbon-search-btn:hover {
2243+
color: #4285F4 !important;
22202244
}
22212245
22222246
.phoenix-ribbon-select {
22232247
margin-left: 10px !important;
22242248
}
22252249
22262250
.phoenix-select-image-btn {
2227-
background: gray !important;
2228-
border: 1px solid rgba(255, 255, 255, 0.2) !important;
2229-
color: #fff !important;
2230-
padding: 2px 4px !important;
2251+
background: rgba(21,25,36,0.65) !important;
2252+
border: 1px solid rgba(255,255,255,0.14) !important;
2253+
color: #eaeaf0 !important;
2254+
padding: 1px 3px !important;
22312255
border-radius: 6px !important;
22322256
font-size: 12px !important;
22332257
cursor: pointer !important;
22342258
transition: all 0.2s ease !important;
22352259
}
22362260
2261+
.phoenix-select-image-btn:hover {
2262+
background: rgba(21,25,36,0.85) !important;
2263+
border-color: rgba(255,255,255,0.25) !important;
2264+
transform: scale(1.05) !important;
2265+
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
2266+
}
2267+
2268+
22372269
.phoenix-ribbon-close {
2238-
background: rgba(0,0,0,0.5) !important;
2239-
border: none !important;
2240-
color: white !important;
2270+
background: rgba(21,25,36,0.65) !important;
2271+
border: 1px solid rgba(255,255,255,0.14) !important;
2272+
color: #eaeaf0 !important;
22412273
cursor: pointer !important;
2242-
padding: 4px 8px !important;
2243-
border-radius: 3px !important;
2274+
padding: 2px 6px !important;
2275+
border-radius: 6px !important;
22442276
margin-right: 16px !important;
2277+
transition: all 0.2s ease !important;
2278+
font-size: 16px !important;
2279+
}
2280+
2281+
.phoenix-ribbon-close:hover {
2282+
background: rgba(21,25,36,0.85) !important;
2283+
border-color: rgba(255,255,255,0.25) !important;
2284+
transform: scale(1.05) !important;
2285+
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
22452286
}
22462287
22472288
.phoenix-ribbon-attribution {

0 commit comments

Comments
 (0)