Skip to content

Commit 99ef370

Browse files
aboseabose
committed
chore: phoenix pro dialog light theme support
1 parent 7777dda commit 99ef370

File tree

4 files changed

+143
-96
lines changed

4 files changed

+143
-96
lines changed

‎src/services/html/pro-upgrade.html‎

Lines changed: 1 addition & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,11 @@
11
<div class="browser-login-waiting-dialog modal">
2-
<style>
3-
/* Local tokens mapped to your dark palette */
4-
.browser-login-waiting-dialog {
5-
--bg: #1c1c1e; /* @dark-bc-bg-status-bar */
6-
--card-bg: #313131; /* @dark-bc-panel-bg-alt */
7-
--card-bg-hover: #2c2c2c; /* @dark-bc-panel-bg */
8-
--card-border: rgba(255,255,255,0.06);
9-
--card-border-hover: rgba(255,255,255,0.12);
10-
--text: #ffffff; /* @dark-bc-text-alt */
11-
--text-muted: #9a9a9a; /* @dark-bc-text-quiet */
12-
--text-medium: #cccccc; /* @dark-bc-text-medium */
13-
--thumb-bg: #1b1b1b; /* @dark-bc-bg-inline-widget */
14-
--focus: #1473e6; /* highlight/focus blue */
15-
--link: #6bbeff; /* @dark-bc-text-link */
16-
}
17-
18-
.modal-header .dialog-title {
19-
color: var(--text);
20-
}
21-
22-
.features-grid {
23-
display: grid;
24-
grid-template-columns: repeat(2, 1fr);
25-
gap: 16px;
26-
}
27-
28-
.feature-card {
29-
background: var(--card-bg);
30-
border: 1px solid var(--card-border);
31-
border-radius: 5px;
32-
overflow: hidden;
33-
display: flex;
34-
flex-direction: column;
35-
transition: background 0.15s ease, border-color 0.15s ease;
36-
}
37-
38-
.feature-card:hover {
39-
background: var(--card-bg-hover);
40-
border-color: var(--card-border-hover);
41-
}
42-
43-
.feature-card:focus-within {
44-
outline: 2px solid var(--focus);
45-
outline-offset: 2px;
46-
}
47-
48-
.feature-thumb {
49-
width: 100%;
50-
height: 120px;
51-
object-fit: cover;
52-
background: var(--thumb-bg);
53-
}
54-
55-
.feature-body {
56-
padding: 12px;
57-
}
58-
59-
.feature-body h2 {
60-
margin: 0 0 6px;
61-
font-size: 15px;
62-
color: var(--text);
63-
}
64-
65-
.feature-body p {
66-
margin: 0;
67-
font-size: 13px;
68-
color: var(--text-muted);
69-
line-height: 1.35;
70-
}
71-
72-
.waiting-content-container > p {
73-
margin-bottom: 20px;
74-
font-size: 14px;
75-
color: var(--text-medium);
76-
}
77-
78-
.phoenix-pro-title {
79-
background: linear-gradient(45deg,#ff8c42,#ffa500,#ffcc70,#ffd700);
80-
background-clip: text;
81-
-webkit-background-clip: text;
82-
color: transparent;
83-
-webkit-text-fill-color: transparent;
84-
display: inline-block;
85-
}
86-
87-
.browser-login-waiting-dialog a {
88-
color: var(--link);
89-
text-decoration: none;
90-
}
91-
.browser-login-waiting-dialog a:hover {
92-
text-decoration: underline;
93-
}
94-
</style>
95-
962
<div class="modal-header">
973
<h1 class="dialog-title">{{{title}}}</h1>
984
</div>
995

1006
<div class="modal-body" style="max-height: 550px;">
1017
<div class="waiting-content-container">
102-
<p style="margin-bottom: 20px; color: #aaa; font-size: 14px;">
8+
<p style="margin-bottom: 20px; font-size: 14px;">
1039
{{message}}
10410
</p>
10511

‎src/styles/brackets.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
@import "Extn-CustomSnippets.less";
4848
@import "Extn-CollapseFolders.less";
4949
@import "UserProfile.less";
50+
@import "phoenix-pro.less";
5051

5152
/* Overall layout */
5253

‎src/styles/brackets_core_ui_variables.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@
281281
@dark-css-codehint-icon: #146a41;
282282

283283
// phoenix pro
284-
@phoenix-pro-gradient-dark: linear-gradient(
284+
@phoenix-pro-gradient-dark: linear-gradient(
285285
45deg,
286286
#ff8c42, /* deep orange */
287287
#ffa500, /* bright orange */

‎src/styles/phoenix-pro.less‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
@import "brackets_variables.less";
2+
@import "brackets_core_ui_variables.less";
3+
4+
/* Dialog styles with light default + .dark overrides */
5+
.browser-login-waiting-dialog {
6+
/* ---- Layout ---- */
7+
.features-grid {
8+
display: grid;
9+
grid-template-columns: repeat(2, 1fr);
10+
gap: 16px;
11+
}
12+
13+
/* ---- Cards ---- */
14+
.feature-card {
15+
background: @bc-panel-bg-alt; // light surface
16+
border: 1px solid @bc-panel-border; // subtle light border
17+
border-radius: @bc-border-radius-large; // 5px
18+
overflow: hidden;
19+
display: flex;
20+
flex-direction: column;
21+
transition: background 0.15s ease, border-color 0.15s ease;
22+
23+
.dark & {
24+
background: @dark-bc-panel-bg-alt; // #313131
25+
border: 1px solid @dark-bc-highlight; // rgba(255,255,255,0.06)
26+
border-radius: @dark-bc-border-radius-large;
27+
}
28+
}
29+
30+
.feature-card:hover {
31+
background: @bc-panel-bg; // hover lift
32+
border-color: @bc-shadow-small; // rgba(0,0,0,0.06)
33+
34+
.dark & {
35+
background: @dark-bc-panel-bg; // #2c2c2c
36+
border-color: @dark-bc-panel-bg-hover;// rgba(255,255,255,0.12)
37+
}
38+
}
39+
40+
.feature-card:focus-within {
41+
outline: 2px solid @bc-btn-border-focused; // #2893ef (light)
42+
outline-offset: 2px;
43+
44+
.dark & {
45+
outline: 2px solid @dark-bc-btn-border-focused;// #2893ef (dark var)
46+
}
47+
}
48+
49+
/* ---- Media thumb ---- */
50+
.feature-thumb {
51+
width: 100%;
52+
height: 120px;
53+
object-fit: cover;
54+
background: @bc-bg-inline-widget; // #e6e9e9
55+
56+
.dark & {
57+
background: @dark-bc-bg-inline-widget;// #1b1b1b
58+
}
59+
}
60+
61+
/* ---- Card body ---- */
62+
.feature-body {
63+
padding: 12px;
64+
}
65+
66+
.feature-body h2 {
67+
margin: 0 0 6px;
68+
font-size: 15px;
69+
color: @bc-text-emphasized; // #111
70+
71+
.dark & {
72+
color: @dark-bc-text-alt; // #fff
73+
}
74+
}
75+
76+
.feature-body p {
77+
margin: 0;
78+
font-size: 13px;
79+
color: @bc-text-medium; // #606060
80+
line-height: 1.35;
81+
82+
.dark & {
83+
color: @dark-bc-text-quiet; // #9a9a9a
84+
}
85+
}
86+
87+
/* ---- Header title ---- */
88+
.modal-header .dialog-title {
89+
color: @bc-text-emphasized; // #111 on light
90+
91+
.dark & {
92+
color: @dark-bc-text-alt; // #fff on dark
93+
}
94+
}
95+
96+
/* ---- Body copy ---- */
97+
.waiting-content-container > p {
98+
margin-bottom: 20px;
99+
font-size: 14px;
100+
color: @bc-text-medium; // #606060
101+
102+
.dark & {
103+
color: @dark-bc-text-medium; // #ccc
104+
}
105+
}
106+
107+
/* ---- Phoenix Pro gradient title ----
108+
Light default: use the "light" gradient so it pops on light bg.
109+
Dark override: switch to the "dark" gradient for richer contrast. */
110+
.phoenix-pro-title {
111+
background: @phoenix-pro-gradient-light;
112+
background-clip: text;
113+
-webkit-background-clip: text;
114+
color: transparent;
115+
-webkit-text-fill-color: transparent;
116+
display: inline-block;
117+
118+
.dark & {
119+
background: @phoenix-pro-gradient-dark;
120+
background-clip: text;
121+
-webkit-background-clip: text;
122+
color: transparent;
123+
-webkit-text-fill-color: transparent;
124+
}
125+
}
126+
127+
/* ---- Links ---- */
128+
a {
129+
color: @bc-text-link; // #0083e8
130+
text-decoration: none;
131+
132+
.dark & {
133+
color: @dark-bc-text-link; // #6bbeff
134+
}
135+
}
136+
137+
a:hover {
138+
text-decoration: underline;
139+
}
140+
}

0 commit comments

Comments
 (0)