Skip to content

Commit 572538c

Browse files
devvaannshdevvaannsh
committed
refactor: make image gallery UI consistent
1 parent 6545634 commit 572538c

File tree

1 file changed

+40
-58
lines changed

1 file changed

+40
-58
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 40 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1343,7 +1343,7 @@ function RemoteFunctions(config = {}) {
13431343
`,
13441344

13451345
selectImageFromComputer: `
1346-
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
1346+
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
13471347
<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
13481348
</svg>
13491349
`,
@@ -1355,7 +1355,7 @@ function RemoteFunctions(config = {}) {
13551355
`,
13561356

13571357
folderSettings: `
1358-
<svg viewBox="0 0 24 24" fill="currentColor">
1358+
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
13591359
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
13601360
</svg>
13611361
`
@@ -2224,7 +2224,7 @@ function RemoteFunctions(config = {}) {
22242224
left: 0 !important;
22252225
right: 0 !important;
22262226
width: 100vw !important;
2227-
background: linear-gradient(180deg, rgba(12,14,20,0.0), rgba(12,14,20,0.7)) !important;
2227+
background: #3C3F41 !important;
22282228
z-index: 2147483647 !important;
22292229
display: flex !important;
22302230
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
@@ -2234,9 +2234,6 @@ function RemoteFunctions(config = {}) {
22342234
.phoenix-ribbon-container {
22352235
width: 100% !important;
22362236
height: 156px !important;
2237-
background: rgba(255, 255, 255, 0.3) !important;
2238-
backdrop-filter: blur(10px) !important;
2239-
-webkit-backdrop-filter: blur(10px) !important;
22402237
border: 1px solid rgba(255, 255, 255, 0.2) !important;
22412238
position: relative !important;
22422239
}
@@ -2353,7 +2350,7 @@ function RemoteFunctions(config = {}) {
23532350
display: flex !important;
23542351
width: 100% !important;
23552352
position: absolute !important;
2356-
top: 6px !important;
2353+
top: 8px !important;
23572354
}
23582355
23592356
.phoenix-ribbon-header-left {
@@ -2370,54 +2367,50 @@ function RemoteFunctions(config = {}) {
23702367
.phoenix-ribbon-search {
23712368
display: flex !important;
23722369
align-items: stretch !important;
2373-
background: rgba(21,25,36,0.65) !important;
2374-
padding: 0 !important;
23752370
border-radius: 6px !important;
23762371
margin-left: 6px !important;
23772372
border: 1px solid rgba(255,255,255,0.14) !important;
2378-
transition: all 0.2s ease !important;
2379-
overflow: hidden !important;
23802373
}
23812374
23822375
.phoenix-ribbon-search:hover {
2383-
background: rgba(21,25,36,0.85) !important;
2384-
border-color: rgba(255,255,255,0.25) !important;
2385-
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
2376+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2377+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
23862378
}
23872379
23882380
.phoenix-ribbon-search:focus-within {
2389-
background: rgba(21,25,36,0.9) !important;
2390-
border-color: rgba(106,169,255,0.4) !important;
2381+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2382+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
23912383
}
23922384
23932385
.phoenix-ribbon-search input {
23942386
background: transparent !important;
23952387
border: none !important;
23962388
outline: none !important;
2397-
color: #eaeaf0 !important;
2389+
color: #a0a0a0 !important;
23982390
width: 150px !important;
23992391
padding: 2px 6px !important;
24002392
border-radius: 4px 0 0 4px !important;
24012393
}
24022394
24032395
.phoenix-ribbon-search input::placeholder {
2404-
color: rgba(234, 234, 240, 0.6) !important;
2405-
opacity: 1 !important;
2396+
color: #a0a0a0 !important;
2397+
opacity: 0.7 !important;
24062398
}
24072399
24082400
.phoenix-ribbon-search input::-webkit-input-placeholder {
2409-
color: rgba(234, 234, 240, 0.6) !important;
2401+
color: #a0a0a0 !important;
2402+
opacity: 0.7 !important;
24102403
}
24112404
24122405
.phoenix-ribbon-search input::-moz-placeholder {
2413-
color: rgba(234, 234, 240, 0.6) !important;
2414-
opacity: 1 !important;
2406+
color: #a0a0a0 !important;
2407+
opacity: 0.7 !important;
24152408
}
24162409
24172410
.phoenix-ribbon-search-btn {
24182411
background: transparent !important;
24192412
border: none !important;
2420-
color: #4285F4 !important;
2413+
color: #a0a0a0 !important;
24212414
cursor: pointer !important;
24222415
padding: 2px 6px !important;
24232416
border-radius: 0 4px 4px 0 !important;
@@ -2428,72 +2421,61 @@ function RemoteFunctions(config = {}) {
24282421
}
24292422
24302423
.phoenix-ribbon-search-btn:hover {
2431-
color: #4285F4 !important;
2424+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2425+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
24322426
}
24332427
24342428
.phoenix-ribbon-select {
24352429
margin-left: 10px !important;
24362430
}
24372431
24382432
.phoenix-select-image-btn {
2439-
background: rgba(21,25,36,0.65) !important;
2440-
border: 1px solid rgba(255,255,255,0.14) !important;
2441-
color: #eaeaf0 !important;
2442-
padding: 4px 6px 2px 6px !important;
2433+
background-color: transparent !important;
2434+
border: none !important;
2435+
color: #a0a0a0 !important;
24432436
border-radius: 6px !important;
2444-
font-size: 12px !important;
24452437
cursor: pointer !important;
2446-
transition: all 0.2s ease !important;
24472438
}
24482439
24492440
.phoenix-select-image-btn:hover {
2450-
background: rgba(21,25,36,0.85) !important;
2451-
border-color: rgba(255,255,255,0.25) !important;
2452-
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
2441+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2442+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
24532443
}
24542444
24552445
.phoenix-ribbon-folder-settings {
2456-
background: rgba(21,25,36,0.65) !important;
2457-
border: 1px solid rgba(255,255,255,0.14) !important;
2458-
color: #eaeaf0 !important;
2459-
cursor: pointer !important;
2460-
padding: 2px 6px 1px 6px !important;
2446+
background-color: transparent !important;
2447+
border: none !important;
2448+
color: #a0a0a0 !important;
24612449
border-radius: 6px !important;
2450+
cursor: pointer !important;
24622451
margin-right: 8px !important;
2463-
transition: all 0.2s ease !important;
2464-
font-size: 12px !important;
24652452
display: flex !important;
24662453
align-items: center !important;
24672454
justify-content: center !important;
2455+
margin-bottom: 4px !important;
24682456
}
24692457
24702458
.phoenix-ribbon-folder-settings:hover {
2471-
background: rgba(21,25,36,0.85) !important;
2472-
border-color: rgba(255,255,255,0.25) !important;
2473-
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
2474-
}
2475-
2476-
.phoenix-ribbon-folder-settings svg {
2477-
width: 16px !important;
2478-
height: 16px !important;
2459+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2460+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
24792461
}
24802462
24812463
.phoenix-ribbon-close {
2482-
background: rgba(21,25,36,0.65) !important;
2483-
border: 1px solid rgba(255,255,255,0.14) !important;
2484-
color: #eaeaf0 !important;
2485-
cursor: pointer !important;
2486-
padding: 2px 7px 1px 7px !important;
2464+
background-color: transparent !important;
2465+
border: none !important;
2466+
color: #a0a0a0 !important;
24872467
border-radius: 6px !important;
2468+
cursor: pointer !important;
2469+
display: flex !important;
2470+
align-items: center !important;
2471+
justify-content: center !important;
24882472
margin-right: 16px !important;
2489-
transition: all 0.2s ease !important;
2490-
font-size: 16px !important;
2473+
font-size: 22px !important;
24912474
}
24922475
24932476
.phoenix-ribbon-close:hover {
2494-
background: rgba(21,25,36,0.85) !important;
2495-
border-color: rgba(255,255,255,0.25) !important;
2496-
box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
2477+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2478+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
24972479
}
24982480
24992481
.phoenix-ribbon-attribution {

0 commit comments

Comments
 (0)