Skip to content

Commit 5fe3a7b

Browse files
devvaannshdevvaannsh
committed
refactor: add important to all the boxes styling to prevent user styles from overriding it
1 parent 7da49fa commit 5fe3a7b

File tree

1 file changed

+100
-100
lines changed

1 file changed

+100
-100
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 100 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -770,7 +770,7 @@ function RemoteFunctions(config = {}) {
770770

771771
let rect = element.getBoundingClientRect();
772772
marker.style.position = "fixed";
773-
marker.style.zIndex = "2147483646";
773+
marker.style.zIndex = "2147483647";
774774
marker.style.borderRadius = "2px";
775775
marker.style.pointerEvents = "none";
776776

@@ -1273,52 +1273,52 @@ function RemoteFunctions(config = {}) {
12731273

12741274
const styles = `
12751275
:host {
1276-
all: initial;
1276+
all: initial !important;
12771277
}
12781278
12791279
.phoenix-more-options-box {
1280-
background-color: #4285F4;
1281-
color: white;
1282-
border-radius: 3px;
1283-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
1284-
font-size: 12px;
1285-
font-family: Arial, sans-serif;
1286-
z-index: 2147483647;
1287-
position: absolute;
1280+
background-color: #4285F4 !important;
1281+
color: white !important;
1282+
border-radius: 3px !important;
1283+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
1284+
font-size: 12px !important;
1285+
font-family: Arial, sans-serif !important;
1286+
z-index: 2147483647 !important;
1287+
position: absolute !important;
12881288
left: -1000px;
12891289
top: -1000px;
1290-
box-sizing: border-box;
1290+
box-sizing: border-box !important;
12911291
}
12921292
12931293
.node-options {
1294-
display: flex;
1295-
align-items: center;
1294+
display: flex !important;
1295+
align-items: center !important;
12961296
}
12971297
12981298
.node-options span {
1299-
padding: 4px 3.9px;
1300-
cursor: pointer;
1301-
display: flex;
1302-
align-items: center;
1303-
border-radius: 0;
1299+
padding: 4px 3.9px !important;
1300+
cursor: pointer !important;
1301+
display: flex !important;
1302+
align-items: center !important;
1303+
border-radius: 0 !important;
13041304
}
13051305
13061306
.node-options span:first-child {
1307-
border-radius: 3px 0 0 3px;
1307+
border-radius: 3px 0 0 3px !important;
13081308
}
13091309
13101310
.node-options span:last-child {
1311-
border-radius: 0 3px 3px 0;
1311+
border-radius: 0 3px 3px 0 !important;
13121312
}
13131313
13141314
.node-options span:hover {
1315-
background-color: rgba(255, 255, 255, 0.15);
1315+
background-color: rgba(255, 255, 255, 0.15) !important;
13161316
}
13171317
13181318
.node-options span > svg {
1319-
width: 16px;
1320-
height: 16px;
1321-
display: block;
1319+
width: 16px !important;
1320+
height: 16px !important;
1321+
display: block !important;
13221322
}
13231323
`;
13241324

@@ -1535,37 +1535,37 @@ function RemoteFunctions(config = {}) {
15351535

15361536
const styles = `
15371537
:host {
1538-
all: initial;
1538+
all: initial !important;
15391539
}
15401540
15411541
.phoenix-node-info-box {
1542-
background-color: #4285F4;
1543-
color: white;
1544-
border-radius: 3px;
1545-
padding: 5px 8px;
1546-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
1547-
font-size: 12px;
1548-
font-family: Arial, sans-serif;
1549-
z-index: 2147483647;
1550-
position: absolute;
1542+
background-color: #4285F4 !important;
1543+
color: white !important;
1544+
border-radius: 3px !important;
1545+
padding: 5px 8px !important;
1546+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
1547+
font-size: 12px !important;
1548+
font-family: Arial, sans-serif !important;
1549+
z-index: 2147483647 !important;
1550+
position: absolute !important;
15511551
left: ${leftPos}px;
15521552
top: -1000px;
1553-
max-width: 300px;
1554-
box-sizing: border-box;
1555-
pointer-events: none;
1553+
max-width: 300px !important;
1554+
box-sizing: border-box !important;
1555+
pointer-events: none !important;
15561556
}
15571557
15581558
.tag-name {
1559-
font-weight: bold;
1559+
font-weight: bold !important;
15601560
}
15611561
15621562
.id-name,
15631563
.class-name {
1564-
margin-top: 3px;
1564+
margin-top: 3px !important;
15651565
}
15661566
15671567
.exceeded-classes {
1568-
opacity: 0.8;
1568+
opacity: 0.8 !important;
15691569
}
15701570
`;
15711571

@@ -1682,96 +1682,96 @@ function RemoteFunctions(config = {}) {
16821682

16831683
const styles = `
16841684
:host {
1685-
all: initial;
1685+
all: initial !important;
16861686
}
16871687
16881688
.phoenix-ai-prompt-box {
1689-
position: absolute;
1690-
background: white;
1691-
border: 1px solid #4285F4;
1692-
border-radius: 8px;
1693-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
1694-
font-family: Arial, sans-serif;
1695-
z-index: 2147483647;
1696-
width: ${boxWidth}px;
1697-
padding: 0;
1698-
box-sizing: border-box;
1689+
position: absolute !important;
1690+
background: white !important;
1691+
border: 1px solid #4285F4 !important;
1692+
border-radius: 8px !important;
1693+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
1694+
font-family: Arial, sans-serif !important;
1695+
z-index: 2147483647 !important;
1696+
width: ${boxWidth}px !important;
1697+
padding: 0 !important;
1698+
box-sizing: border-box !important;
16991699
}
17001700
17011701
.phoenix-ai-prompt-input-container {
1702-
position: relative;
1702+
position: relative !important;
17031703
}
17041704
17051705
.phoenix-ai-prompt-textarea {
1706-
width: 100%;
1707-
height: ${boxHeight}px;
1708-
border: none;
1709-
border-radius: 8px;
1710-
padding: 12px 40px 12px 16px;
1711-
font-size: 14px;
1712-
font-family: Arial, sans-serif;
1713-
resize: none;
1714-
outline: none;
1715-
box-sizing: border-box;
1716-
background: #f9f9f9;
1706+
width: 100% !important;
1707+
height: ${boxHeight}px !important;
1708+
border: none !important;
1709+
border-radius: 8px !important;
1710+
padding: 12px 40px 12px 16px !important;
1711+
font-size: 14px !important;
1712+
font-family: Arial, sans-serif !important;
1713+
resize: none !important;
1714+
outline: none !important;
1715+
box-sizing: border-box !important;
1716+
background: #f9f9f9 !important;
17171717
}
17181718
17191719
.phoenix-ai-prompt-textarea:focus {
1720-
background: white;
1720+
background: white !important;
17211721
}
17221722
17231723
.phoenix-ai-prompt-textarea::placeholder {
1724-
color: #999;
1724+
color: #999 !important;
17251725
}
17261726
17271727
.phoenix-ai-prompt-send-button {
1728-
width: 28px;
1729-
height: 28px;
1730-
border: none;
1731-
border-radius: 50%;
1732-
background: #4285F4;
1733-
color: white;
1734-
cursor: pointer;
1735-
display: flex;
1736-
align-items: center;
1737-
justify-content: center;
1738-
font-size: 14px;
1739-
transition: background-color 0.2s;
1740-
line-height: 0.5;
1728+
width: 28px !important;
1729+
height: 28px !important;
1730+
border: none !important;
1731+
border-radius: 50% !important;
1732+
background: #4285F4 !important;
1733+
color: white !important;
1734+
cursor: pointer !important;
1735+
display: flex !important;
1736+
align-items: center !important;
1737+
justify-content: center !important;
1738+
font-size: 14px !important;
1739+
transition: background-color 0.2s !important;
1740+
line-height: 0.5 !important;
17411741
}
17421742
17431743
.phoenix-ai-prompt-send-button:hover:not(:disabled) {
1744-
background: #4285F4;
1744+
background: #4285F4 !important;
17451745
}
17461746
17471747
.phoenix-ai-prompt-send-button:disabled {
1748-
background: #dadce0;
1749-
color: #9aa0a6;
1750-
cursor: not-allowed;
1748+
background: #dadce0 !important;
1749+
color: #9aa0a6 !important;
1750+
cursor: not-allowed !important;
17511751
}
17521752
17531753
.phoenix-ai-bottom-controls {
1754-
border-top: 1px solid #e0e0e0;
1755-
padding: 8px 16px;
1756-
background: #f9f9f9;
1757-
border-radius: 0 0 8px 8px;
1758-
display: flex;
1759-
align-items: center;
1760-
justify-content: space-between;
1754+
border-top: 1px solid #e0e0e0 !important;
1755+
padding: 8px 16px !important;
1756+
background: #f9f9f9 !important;
1757+
border-radius: 0 0 8px 8px !important;
1758+
display: flex !important;
1759+
align-items: center !important;
1760+
justify-content: space-between !important;
17611761
}
17621762
17631763
.phoenix-ai-model-select {
1764-
padding: 4px 8px;
1765-
border: 1px solid #ddd;
1766-
border-radius: 4px;
1767-
font-size: 12px;
1768-
background: white;
1769-
outline: none;
1770-
cursor: pointer;
1764+
padding: 4px 8px !important;
1765+
border: 1px solid #ddd !important;
1766+
border-radius: 4px !important;
1767+
font-size: 12px !important;
1768+
background: white !important;
1769+
outline: none !important;
1770+
cursor: pointer !important;
17711771
}
17721772
17731773
.phoenix-ai-model-select:focus {
1774-
border-color: #4285F4;
1774+
border-color: #4285F4 !important;
17751775
}
17761776
`;
17771777

@@ -2007,7 +2007,7 @@ function RemoteFunctions(config = {}) {
20072007
font-weight: 600 !important;
20082008
user-select: none !important;
20092009
transition: all 0.2s ease !important;
2010-
z-index: 10 !important;
2010+
z-index: 2147483647 !important;
20112011
padding: 2px 12px 6px 12px !important;
20122012
}
20132013
@@ -2159,7 +2159,7 @@ function RemoteFunctions(config = {}) {
21592159
justify-content: center !important;
21602160
cursor: pointer !important;
21612161
font-size: 12px !important;
2162-
z-index: 2 !important;
2162+
z-index: 2147483647 !important;
21632163
padding: 0 8px !important;
21642164
white-space: nowrap !important;
21652165
opacity: 0 !important;
@@ -2873,7 +2873,7 @@ function RemoteFunctions(config = {}) {
28732873
"top": offset.top + "px",
28742874
"width": elementBounds.width + "px",
28752875
"height": elementBounds.height + "px",
2876-
"z-index": 2000000,
2876+
"z-index": 2147483647,
28772877
"margin": 0,
28782878
"padding": 0,
28792879
"position": "absolute",

0 commit comments

Comments
 (0)