Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 821bcac

Browse files
committed
better button & border contrast
1 parent d7d664c commit 821bcac

File tree

2 files changed

+50
-24
lines changed

2 files changed

+50
-24
lines changed

‎src/content-script/update-solutions-tab.ts

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,27 +22,36 @@ function createStyledButton(text: string, isActive: boolean = false): HTMLButton
2222

2323
chrome.storage.local.get(['isDarkTheme'], (result) => {
2424
const isDark = result.isDarkTheme;
25-
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
26-
button.style.color = isDark ? '#fff' : '#1a1a1a';
27-
button.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`;
25+
button.style.backgroundColor = isDark ? '#2d2d2d' : '#f3f4f5';
26+
button.style.color = isDark ? '#e6e6e6' : '#2d2d2d';
27+
button.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)'}`;
28+
button.style.fontWeight = '500';
2829

2930
button.addEventListener('mouseenter', () => {
3031
if (!button.classList.contains('active')) {
31-
button.style.backgroundColor = isDark ? '#424242' : '#e6e6e6';
32+
button.style.backgroundColor = isDark ? '#3d3d3d' : '#e6e6e6';
33+
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.25)';
3234
}
3335
});
3436
button.addEventListener('mouseleave', () => {
3537
if (!button.classList.contains('active')) {
36-
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
38+
button.style.backgroundColor = isDark ? '#2d2d2d' : '#f3f4f5';
39+
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)';
3740
}
3841
});
42+
43+
if (isActive) {
44+
button.style.backgroundColor = isDark ? '#404040' : '#e0e0e0';
45+
button.style.color = isDark ? '#ffffff' : '#000000';
46+
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
47+
}
3948
});
4049

4150
button.style.width = '120px';
4251
button.style.padding = '4px 8px';
4352
button.style.margin = '0 8px';
4453
button.style.borderRadius = '6px';
45-
button.style.fontSize = '11px';
54+
button.style.fontSize = '12px';
4655
button.style.transition = 'all 0.2s ease';
4756
button.style.letterSpacing = '0.5px';
4857
button.style.cursor = 'pointer';
@@ -358,23 +367,26 @@ function createLanguageButtons(problem: any) {
358367
langButton.style.gap = '8px';
359368
langButton.style.padding = '6px 12px';
360369
langButton.style.borderRadius = '6px';
361-
langButton.style.fontSize = '11px';
370+
langButton.style.fontSize = '12px';
362371
langButton.style.letterSpacing = '.5px';
363372
langButton.style.transition = 'all 0.2s ease';
364373
langButton.style.cursor = 'pointer';
374+
langButton.style.fontWeight = '500';
365375

366376
chrome.storage.local.get(['isDarkTheme'], (result) => {
367377
const isDark = result.isDarkTheme;
368-
langButton.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
369-
langButton.style.color = isDark ? '#fff' : '#1a1a1a';
370-
langButton.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`;
378+
langButton.style.backgroundColor = isDark ? '#2d2d2d' : '#f3f4f5';
379+
langButton.style.color = isDark ? '#e6e6e6' : '#2d2d2d';
380+
langButton.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)'}`;
371381

372382
// on hover just make the background a few shades darker or lighter
373383
langButton.addEventListener('mouseenter', () => {
374-
langButton.style.backgroundColor = isDark ? '#424242' : '#e6e6e6';
384+
langButton.style.backgroundColor = isDark ? '#3d3d3d' : '#e6e6e6';
385+
langButton.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.25)';
375386
});
376387
langButton.addEventListener('mouseleave', () => {
377-
langButton.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
388+
langButton.style.backgroundColor = isDark ? '#2d2d2d' : '#f3f4f5';
389+
langButton.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)';
378390
});
379391
});
380392

‎src/popup/popup.css

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,32 @@
66
--icon-size: 16px;
77
--spacing: 10px;
88
--transition-speed: 0.2s;
9-
--border-color: black;
9+
--border-color: rgba(0,0,0,0.15);
1010
--link-color: #303134;
11-
--text-color: black;
11+
--text-color: #2d2d2d;
12+
--button-bg-color: #f3f4f5;
1213
--button-hover-bg: #e6e6e6;
14+
--button-hover-border: rgba(0, 0, 0, 0.25);
1315
}
1416

1517
/* Dark theme */
1618
[data-theme="dark"] {
1719
--background-color: #202124;
18-
--border-color: #5f6368;
20+
--border-color: rgba(255,255,255,0.15);
1921
--link-color: #8ab4f8;
20-
--button-bg-color: #303134;
21-
--button-hover-bg: #424242;
22-
--text-color: #e8eaed;
22+
--button-bg-color: #2d2d2d;
23+
--button-hover-bg: #3d3d3d;
24+
--text-color: #e6e6e6;
2325
--code-bg-color: #303134;
2426
--info-message-bg: rgba(48, 49, 52, 0.5);
27+
--button-hover-border: rgba(255, 255, 255, 0.25);
28+
--active-text: #ffffff;
29+
--active-bg: #404040;
30+
}
31+
32+
[data-theme="light"] {
33+
--active-text: #000000;
34+
--active-bg: #e0e0e0;
2535
}
2636

2737
/* Display size variations */
@@ -73,11 +83,13 @@ body {
7383
border-radius: var(--border-radius);
7484
cursor: pointer;
7585
font-size: var(--base-font-size);
86+
letter-spacing: 0.5px;
7687
transition: all var(--transition-speed) ease;
7788
}
7889

7990
.material-button:hover, .code-btn:hover {
8091
background-color: var(--button-hover-bg) !important;
92+
border-color: var(--button-hover-border);
8193
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8294
}
8395

@@ -104,23 +116,24 @@ a {
104116
}
105117

106118
.tab {
107-
background: transparent;
108-
border: none;
119+
background: transparent!important;
120+
border: 1px solid transparent;
109121
border-radius: 5px;
110122
font-size: var(--base-font-size);
123+
font-weight: 500;
111124
padding: calc(var(--spacing) * 0.6) var(--spacing);
112125
cursor: pointer;
113126
color: var(--text-color);
114-
transition: color var(--transition-speed) ease, border-bottom var(--transition-speed) ease;
127+
letter-spacing: 0.5px;
128+
transition: all var(--transition-speed) ease;
115129
}
116130

117131
.tab:hover {
118-
background-color: var(--button-hover-bg) !important;
132+
border:1px solid var(--button-hover-bg) !important;
119133
}
120134

121135
.tab.active {
122-
border-bottom: 2px solid var(--link-color);
123-
color: var(--link-color);
136+
background-color: var(--active-bg) !important;
124137
}
125138

126139
/* Main content on popup and settings*/
@@ -167,6 +180,7 @@ a {
167180
color: var(--color);
168181
border-radius: 8px;
169182
background-color: var(--info-message-bg);
183+
letter-spacing: .5px;
170184
}
171185

172186
/* Response containers */

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /