Skip to content

Commit 216e17a

Browse files
calixtemancalixteman
committed
[Editor] Fix the style of the buttons in dialog (bug 1953003)
This patch fixes: - the style of the primary/secondary buttons in the dialog which weren't fully compliant to the last specs. - the style of the input field in HCM (wrong background) - the color of the link in the image tab.
1 parent 391e84c commit 216e17a

File tree

2 files changed

+73
-18
lines changed

2 files changed

+73
-18
lines changed

‎web/dialog.css

+57-11
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,32 @@
3333
--radio-border-color: #8f8f9d;
3434
--radio-checked-border-color: #0060df;
3535

36-
--button-secondary-bg-color: #f0f0f4;
36+
--button-secondary-bg-color: rgb(21 20 26 / 0.07);
3737
--button-secondary-fg-color: var(--text-primary-color);
3838
--button-secondary-border-color: var(--button-secondary-bg-color);
39-
--button-secondary-hover-bg-color: var(--button-secondary-bg-color);
39+
--button-secondary-active-bg-color: rgb(21 20 26 / 0.21);
40+
--button-secondary-active-fg-color: var(--button-secondary-fg-color);
41+
--button-secondary-active-border-color: var(--button-secondary-bg-color);
42+
--button-secondary-hover-bg-color: rgb(21 20 26 / 0.14);
4043
--button-secondary-hover-fg-color: var(--button-secondary-fg-color);
4144
--button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
4245

4346
--button-primary-bg-color: #0060df;
4447
--button-primary-fg-color: #fbfbfe;
4548
--button-primary-border-color: var(--button-primary-bg-color);
46-
--button-primary-hover-bg-color: var(--button-primary-bg-color);
49+
--button-primary-active-bg-color: #054096;
50+
--button-primary-active-fg-color: var(--button-primary-fg-color);
51+
--button-primary-active-border-color: var(--button-primary-active-bg-color);
52+
--button-primary-hover-bg-color: #0250bb;
4753
--button-primary-hover-fg-color: var(--button-primary-fg-color);
4854
--button-primary-hover-border-color: var(--button-primary-hover-bg-color);
4955

5056
--button-disabled-bg-color: color-mix(in srgb, currentcolor, transparent 60%);
5157
--button-disabled-fg-color: var(--button-disabled-bg-color);
5258

59+
--input-text-bg-color: white;
60+
--input-text-fg-color: var(--text-primary-color);
61+
5362
@media (prefers-color-scheme: dark) {
5463
--dialog-bg-color: #1c1b22;
5564
--dialog-border-color: #1c1b22;
@@ -67,9 +76,15 @@
6776
--radio-checked-bg-color: #15141a;
6877
--radio-checked-border-color: #0df;
6978

70-
--button-secondary-bg-color: #2b2a33;
79+
--button-secondary-bg-color: rgb(251 251 254 / 0.07);
80+
--button-secondary-active-bg-color: rgb(251 251 254 / 0.21);
81+
--button-secondary-hover-bg-color: rgb(251 251 254 / 0.14);
7182
--button-primary-bg-color: #0df;
7283
--button-primary-fg-color: #15141a;
84+
--button-primary-active-bg-color: #aaf2ff;
85+
--button-primary-hover-bg-color: #80ebff;
86+
87+
--input-text-bg-color: #42414d;
7388
}
7489

7590
@media screen and (forced-colors: active) {
@@ -92,19 +107,31 @@
92107
--radio-border-color: ButtonText;
93108
--radio-checked-border-color: ButtonText;
94109

95-
--button-secondary-bg-color: ButtonFace;
110+
--button-secondary-bg-color: HighlightText;
96111
--button-secondary-fg-color: ButtonText;
97112
--button-secondary-border-color: ButtonText;
98-
--button-secondary-hover-bg-color: AccentColor;
99-
--button-secondary-hover-fg-color: AccentColorText;
113+
--button-secondary-active-bg-color: HighlightText;
114+
--button-secondary-active-fg-color: SelectedItem;
115+
--button-secondary-active-border-color: ButtonText;
116+
--button-secondary-hover-bg-color: HighlightText;
117+
--button-secondary-hover-fg-color: SelectedItem;
118+
--button-secondary-hover-border-color: SelectedItem;
100119

101120
--button-primary-bg-color: ButtonText;
102-
--button-primary-fg-color: ButtonFace;
103-
--button-primary-hover-bg-color: AccentColor;
104-
--button-primary-hover-fg-color: AccentColorText;
121+
--button-primary-fg-color: HighlightText;
122+
--button-primary-border-color: ButtonText;
123+
--button-primary-active-bg-color: SelectedItem;
124+
--button-primary-active-fg-color: HighlightText;
125+
--button-primary-active-border-color: ButtonText;
126+
--button-primary-hover-bg-color: SelectedItem;
127+
--button-primary-hover-fg-color: HighlightText;
128+
--button-primary-hover-border-color: SelectedItem;
105129

106130
--button-disabled-bg-color: GrayText;
107131
--button-disabled-fg-color: ButtonFace;
132+
133+
--input-text-bg-color: HighlightText;
134+
--input-text-fg-color: FieldText;
108135
}
109136

110137
font: message-box;
@@ -205,7 +232,8 @@
205232
border-radius: 4px;
206233
border: 1px solid;
207234
font: menu;
208-
font-weight: 600;
235+
font-weight: 590;
236+
font-size: 13px;
209237
padding: 4px 16px;
210238
width: auto;
211239
height: 32px;
@@ -217,6 +245,7 @@
217245

218246
> span {
219247
color: inherit;
248+
font: inherit;
220249
}
221250

222251
&.secondaryButton {
@@ -229,6 +258,12 @@
229258
background-color: var(--button-secondary-hover-bg-color);
230259
border-color: var(--button-secondary-hover-border-color);
231260
}
261+
262+
&:active {
263+
color: var(--button-secondary-active-fg-color);
264+
background-color: var(--button-secondary-active-bg-color);
265+
border-color: var(--button-secondary-active-border-color);
266+
}
232267
}
233268

234269
&.primaryButton {
@@ -242,6 +277,12 @@
242277
background-color: var(--button-primary-hover-bg-color);
243278
border-color: var(--button-primary-hover-border-color);
244279
}
280+
281+
&:active {
282+
color: var(--button-primary-active-fg-color);
283+
background-color: var(--button-primary-active-bg-color);
284+
border-color: var(--button-primary-active-border-color);
285+
}
245286
}
246287

247288
&:disabled {
@@ -282,6 +323,11 @@
282323
}
283324
}
284325

326+
input[type="text"] {
327+
background-color: var(--input-text-bg-color);
328+
color: var(--input-text-fg-color);
329+
}
330+
285331
.messageBar {
286332
--message-bar-bg-color: #ffebcd;
287333
--message-bar-fg-color: #15141a;

‎web/signature_manager.css

+16-7
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,14 @@
5050
--primary-color: var(--text-primary-color);
5151
--description-input-color: var(--primary-color);
5252
--border-color: #8f8f9d;
53+
--open-link-fg: var(--link-fg-color);
54+
--open-link-hover-fg: var(--link-hover-fg-color);
5355

5456
@media screen and (forced-colors: active) {
5557
--primary-color: ButtonText;
5658
--border-color: ButtonText;
59+
--open-link-fg: ButtonText;
60+
--open-link-hover-fg: ButtonText;
5761
}
5862

5963
width: 570px;
@@ -82,9 +86,7 @@
8286

8387
.inputWithClearButton {
8488
--button-dimension: 24px;
85-
86-
--closing-button-icon: url(images/messageBar_closingButton.svg);
87-
--closing-button-color: var(--primary-color);
89+
--clear-button-icon: url(images/messageBar_closingButton.svg);
8890

8991
width: 100%;
9092
position: relative;
@@ -97,10 +99,8 @@
9799
height: 32px;
98100
padding-inline: 8px calc(4px + var(--button-dimension));
99101
box-sizing: border-box;
100-
background-color: transparent;
101102
border-radius: 4px;
102103
border: 1px solid var(--border-color);
103-
color: var(--description-input-color);
104104
}
105105

106106
.clearInputButton {
@@ -110,9 +110,9 @@
110110
display: inline-block;
111111
width: var(--button-dimension);
112112
height: var(--button-dimension);
113-
background-color: var(--closing-button-color);
113+
background-color: var(--input-text-fg-color);
114114
mask-size: cover;
115-
mask-image: var(--closing-button-icon);
115+
mask-image: var(--clear-button-icon);
116116
padding: 0;
117117
border: 0;
118118
}
@@ -465,9 +465,18 @@
465465
align-items: center;
466466
justify-content: center;
467467

468+
span {
469+
color: var(--signature-placeholder-color);
470+
}
471+
468472
a {
473+
color: var(--open-link-fg);
469474
text-decoration: underline;
470475
cursor: pointer;
476+
477+
&:hover {
478+
color: var(--open-link-hover-fg);
479+
}
471480
}
472481
}
473482

0 commit comments

Comments
 (0)