Skip to content

Commit d2d332f

Browse files
aboseabose
committed
refactor: hyperlink editor and hot corner css in remote functions
1 parent ac96446 commit d2d332f

3 files changed

Lines changed: 153 additions & 154 deletions

File tree

‎src/extensionsIntegrated/phoenix-pro/browser-css/hot-corners.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
:host {
2+
all: initial !important;
3+
}
4+
5+
.phoenix-hot-corner {
6+
position: fixed !important;
7+
top: 0 !important;
8+
left: 50% !important;
9+
transform: translateX(-50%) !important;
10+
z-index: 2147483646 !important;
11+
pointer-events: none !important;
12+
}
13+
14+
.hot-corner-indicator {
15+
width: 70px !important;
16+
height: 5px !important;
17+
background-color: rgba(160, 160, 160, 0.4) !important;
18+
border-radius: 0 0 3px 3px !important;
19+
margin: 0 auto !important;
20+
pointer-events: auto !important;
21+
}
22+
23+
.hot-corner-box {
24+
position: absolute !important;
25+
top: 0 !important;
26+
left: 50% !important;
27+
transform: translateX(-50%) translateY(-100%) !important;
28+
width: 36px !important;
29+
height: 28px !important;
30+
background-color: rgba(60, 63, 65, 0.95) !important;
31+
border-radius: 0 0 6px 6px !important;
32+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
33+
display: flex !important;
34+
align-items: center !important;
35+
justify-content: center !important;
36+
opacity: 0 !important;
37+
transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
38+
pointer-events: auto !important;
39+
}
40+
41+
.phoenix-hot-corner:hover .hot-corner-box {
42+
transform: translateX(-50%) translateY(0) !important;
43+
opacity: 1 !important;
44+
}
45+
46+
.hot-corner-box.peek-animation {
47+
animation: peekDown 1.2s ease-in-out !important;
48+
transition: none !important;
49+
}
50+
51+
@keyframes peekDown {
52+
0% {
53+
transform: translateX(-50%) translateY(-100%);
54+
opacity: 0;
55+
}
56+
25% {
57+
transform: translateX(-50%) translateY(0);
58+
opacity: 1;
59+
}
60+
75% {
61+
transform: translateX(-50%) translateY(0);
62+
opacity: 1;
63+
}
64+
100% {
65+
transform: translateX(-50%) translateY(-100%);
66+
opacity: 0;
67+
}
68+
}
69+
70+
.hot-corner-play-btn {
71+
background-color: transparent !important;
72+
border: none !important;
73+
color: #a0a0a0 !important;
74+
font-size: 16px !important;
75+
width: 100% !important;
76+
height: 100% !important;
77+
cursor: pointer !important;
78+
display: flex !important;
79+
align-items: center !important;
80+
justify-content: center !important;
81+
transition: color 0.2s ease !important;
82+
padding: 0 !important;
83+
}
84+
85+
.hot-corner-play-btn:hover {
86+
color: #c0c0c0 !important;
87+
}
88+
89+
.hot-corner-play-btn.selected {
90+
color: #FBB03B !important;
91+
}
92+
93+
.hot-corner-play-btn.selected:hover {
94+
color: #FCC04B !important;
95+
}
96+
97+
.hot-corner-play-btn svg {
98+
width: 18px !important;
99+
height: 18px !important;
100+
}

‎src/extensionsIntegrated/phoenix-pro/browser-css/hyperlink-editor.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
:host {
2+
all: initial !important;
3+
}
4+
5+
.hyperlink-input-box {
6+
position: absolute;
7+
background-color: #2c2c2c !important;
8+
border: 1px solid #4a4a4a !important;
9+
border-radius: 6px !important;
10+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
11+
z-index: 2147483647;
12+
min-width: 200px;
13+
max-width: 400px;
14+
box-sizing: border-box;
15+
padding: 7px 14px !important;
16+
display: flex !important;
17+
align-items: center !important;
18+
gap: 8px !important;
19+
}
20+
21+
.link-icon {
22+
display: flex !important;
23+
align-items: center !important;
24+
justify-content: center !important;
25+
flex-shrink: 0 !important;
26+
width: 16px !important;
27+
height: 16px !important;
28+
color: #cdcdcd !important;
29+
}
30+
31+
.link-icon svg {
32+
width: 16px !important;
33+
height: 16px !important;
34+
display: block !important;
35+
}
36+
37+
input {
38+
flex: 1 !important;
39+
border: none;
40+
outline: none;
41+
font-size: 14px !important;
42+
font-family: Arial, sans-serif !important;
43+
color: #cdcdcd !important;
44+
background: transparent;
45+
}
46+
47+
input::placeholder {
48+
color: #6a6a6a !important;
49+
}

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

Lines changed: 4 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -23,160 +23,10 @@ define(function (require, exports, module) {
2323
// this is the image gallery that comes up at the bottom of the page when you click on the image gallery button
2424
const imageGalleryStyles = require("text!./browser-css/image-gallery.css");
2525

26-
const hyperlinkEditorStyles = `
27-
:host {
28-
all: initial !important;
29-
}
30-
31-
.hyperlink-input-box {
32-
position: absolute;
33-
background-color: #2c2c2c !important;
34-
border: 1px solid #4a4a4a !important;
35-
border-radius: 6px !important;
36-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
37-
z-index: 2147483647;
38-
min-width: 200px;
39-
max-width: 400px;
40-
box-sizing: border-box;
41-
padding: 7px 14px !important;
42-
display: flex !important;
43-
align-items: center !important;
44-
gap: 8px !important;
45-
}
46-
47-
.link-icon {
48-
display: flex !important;
49-
align-items: center !important;
50-
justify-content: center !important;
51-
flex-shrink: 0 !important;
52-
width: 16px !important;
53-
height: 16px !important;
54-
color: #cdcdcd !important;
55-
}
56-
57-
.link-icon svg {
58-
width: 16px !important;
59-
height: 16px !important;
60-
display: block !important;
61-
}
62-
63-
input {
64-
flex: 1 !important;
65-
border: none;
66-
outline: none;
67-
font-size: 14px !important;
68-
font-family: Arial, sans-serif !important;
69-
color: #cdcdcd !important;
70-
background: transparent;
71-
}
72-
73-
input::placeholder {
74-
color: #6a6a6a !important;
75-
}
76-
`;
77-
78-
const hotCornerStyles = `
79-
:host {
80-
all: initial !important;
81-
}
82-
83-
.phoenix-hot-corner {
84-
position: fixed !important;
85-
top: 0 !important;
86-
left: 50% !important;
87-
transform: translateX(-50%) !important;
88-
z-index: 2147483646 !important;
89-
pointer-events: none !important;
90-
}
91-
92-
.hot-corner-indicator {
93-
width: 70px !important;
94-
height: 5px !important;
95-
background-color: rgba(160, 160, 160, 0.4) !important;
96-
border-radius: 0 0 3px 3px !important;
97-
margin: 0 auto !important;
98-
pointer-events: auto !important;
99-
}
100-
101-
.hot-corner-box {
102-
position: absolute !important;
103-
top: 0 !important;
104-
left: 50% !important;
105-
transform: translateX(-50%) translateY(-100%) !important;
106-
width: 36px !important;
107-
height: 28px !important;
108-
background-color: rgba(60, 63, 65, 0.95) !important;
109-
border-radius: 0 0 6px 6px !important;
110-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
111-
display: flex !important;
112-
align-items: center !important;
113-
justify-content: center !important;
114-
opacity: 0 !important;
115-
transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
116-
pointer-events: auto !important;
117-
}
118-
119-
.phoenix-hot-corner:hover .hot-corner-box {
120-
transform: translateX(-50%) translateY(0) !important;
121-
opacity: 1 !important;
122-
}
123-
124-
.hot-corner-box.peek-animation {
125-
animation: peekDown 1.2s ease-in-out !important;
126-
transition: none !important;
127-
}
128-
129-
@keyframes peekDown {
130-
0% {
131-
transform: translateX(-50%) translateY(-100%);
132-
opacity: 0;
133-
}
134-
25% {
135-
transform: translateX(-50%) translateY(0);
136-
opacity: 1;
137-
}
138-
75% {
139-
transform: translateX(-50%) translateY(0);
140-
opacity: 1;
141-
}
142-
100% {
143-
transform: translateX(-50%) translateY(-100%);
144-
opacity: 0;
145-
}
146-
}
147-
148-
.hot-corner-play-btn {
149-
background-color: transparent !important;
150-
border: none !important;
151-
color: #a0a0a0 !important;
152-
font-size: 16px !important;
153-
width: 100% !important;
154-
height: 100% !important;
155-
cursor: pointer !important;
156-
display: flex !important;
157-
align-items: center !important;
158-
justify-content: center !important;
159-
transition: color 0.2s ease !important;
160-
padding: 0 !important;
161-
}
162-
163-
.hot-corner-play-btn:hover {
164-
color: #c0c0c0 !important;
165-
}
166-
167-
.hot-corner-play-btn.selected {
168-
color: #FBB03B !important;
169-
}
170-
171-
.hot-corner-play-btn.selected:hover {
172-
color: #FCC04B !important;
173-
}
174-
175-
.hot-corner-play-btn svg {
176-
width: 18px !important;
177-
height: 18px !important;
178-
}
179-
`;
26+
const hyperlinkEditorStyles = require("text!./browser-css/hyperlink-editor.css");
27+
// This is the page play mode control that comes up in popped-out live preview to toggle
28+
// between preview and editor mode and other controls exposed in popped out live preview.
29+
const hotCornerStyles = require("text!./browser-css/hot-corners.css");
18030

18131

18232
const remoteStyles = {

0 commit comments

Comments
 (0)