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 e6c317b

Browse files
committed
improved button hover and active states
1 parent 821bcac commit e6c317b

File tree

2 files changed

+91
-23
lines changed

2 files changed

+91
-23
lines changed

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

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,86 @@ function createStyledButton(text: string, isActive: boolean = false): HTMLButton
2020
button.classList.add('nav-button');
2121
if (isActive) button.classList.add('active');
2222

23-
chrome.storage.local.get(['isDarkTheme'], (result) => {
24-
const isDark = result.isDarkTheme;
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';
23+
const updateButtonStyles = (isDark: boolean, isButtonActive: boolean) => {
24+
// Light theme colors
25+
const lightTheme = {
26+
base: '#f3f4f5',
27+
active: '#e0e0e0',
28+
hover: '#e6e6e6',
29+
border: 'rgba(0, 0, 0, 0.15)',
30+
activeBorder: '#f3f4f5',
31+
hoverBorder: 'rgba(0, 0, 0, 0.25)',
32+
text: '#2d2d2d'
33+
};
34+
35+
// Dark theme colors
36+
const darkTheme = {
37+
base: '#2d2d2d',
38+
active: '#404040',
39+
hover: '#3d3d3d',
40+
border: 'rgba(255, 255, 255, 0.15)',
41+
activeBorder: '#2d2d2d',
42+
hoverBorder: 'rgba(255, 255, 255, 0.25)',
43+
text: '#e6e6e6'
44+
};
45+
46+
const theme = isDark ? darkTheme : lightTheme;
47+
48+
button.style.backgroundColor = isButtonActive ? theme.active : theme.base;
49+
button.style.color = theme.text;
50+
button.style.border = `1px solid ${isButtonActive ? theme.activeBorder : theme.border}`;
51+
button.style.boxShadow = isButtonActive ? `0 0 0 1px ${theme.activeBorder}` : 'none';
2952

53+
// Remove existing listeners
54+
const oldMouseEnter = button.onmouseenter;
55+
const oldMouseLeave = button.onmouseleave;
56+
if (oldMouseEnter) button.removeEventListener('mouseenter', oldMouseEnter);
57+
if (oldMouseLeave) button.removeEventListener('mouseleave', oldMouseLeave);
58+
59+
// Add new theme-aware listeners
3060
button.addEventListener('mouseenter', () => {
3161
if (!button.classList.contains('active')) {
32-
button.style.backgroundColor = isDark ? '#3d3d3d' : '#e6e6e6';
33-
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.25)';
62+
button.style.backgroundColor = theme.hover;
63+
button.style.borderColor = theme.hoverBorder;
3464
}
3565
});
66+
3667
button.addEventListener('mouseleave', () => {
3768
if (!button.classList.contains('active')) {
38-
button.style.backgroundColor = isDark ? '#2d2d2d' : '#f3f4f5';
39-
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)';
69+
button.style.backgroundColor = theme.base;
70+
button.style.borderColor = theme.border;
71+
} else {
72+
button.style.backgroundColor = theme.active;
73+
button.style.borderColor = theme.activeBorder;
4074
}
4175
});
76+
};
4277

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)';
78+
// Initial style setup
79+
chrome.storage.local.get(['isDarkTheme'], (result) => {
80+
updateButtonStyles(result.isDarkTheme, isActive);
81+
});
82+
83+
// Listen for theme changes
84+
chrome.storage.onChanged.addListener((changes) => {
85+
if (changes.isDarkTheme) {
86+
updateButtonStyles(changes.isDarkTheme.newValue, button.classList.contains('active'));
4787
}
4888
});
4989

90+
// Update styles when active state changes
91+
const observer = new MutationObserver((mutations) => {
92+
mutations.forEach((mutation) => {
93+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
94+
chrome.storage.local.get(['isDarkTheme'], (result) => {
95+
updateButtonStyles(result.isDarkTheme, button.classList.contains('active'));
96+
});
97+
}
98+
});
99+
});
100+
101+
observer.observe(button, { attributes: true });
102+
50103
button.style.width = '120px';
51104
button.style.padding = '4px 8px';
52105
button.style.margin = '0 8px';
@@ -252,7 +305,8 @@ function showContent(type: 'Discussion' | 'Video' | 'Code') {
252305
// Update button states
253306
const buttons = document.querySelectorAll('.nav-button');
254307
buttons.forEach(button => {
255-
if (button.textContent === type) {
308+
const isActive = button.textContent === type;
309+
if (isActive) {
256310
button.classList.add('active');
257311
} else {
258312
button.classList.remove('active');

‎src/problems-by-company/company.css

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,28 @@ button,
4646

4747
nav button {
4848
font-weight: 500;
49-
letter-spacing: 0.8px;
50-
text-transform: uppercase;
49+
letter-spacing: 0.5px;
50+
text-transform: none;
51+
display: flex;
52+
align-items: center;
53+
gap: 8px;
54+
padding: 8px 16px;
55+
min-width: 130px;
56+
height: 40px;
57+
background-color: var(--button-bg-color);
58+
color: var(--text-color);
59+
border: 1px solid var(--border-color);
60+
border-radius: 6px;
61+
font-size: 12px;
62+
transition: all 0.2s ease;
5163
}
5264

5365
button:hover {
54-
background-color: #424242;
55-
border-color: rgba(255,255,255,0.2);
66+
background-color: var(--button-hover-bg);
67+
border-color: var(--button-hover-border);
5668
cursor: pointer;
5769
transform: translateY(-1px);
58-
color: #ffd700;
70+
color: var(--link-color);
5971
}
6072

6173
table {
@@ -77,12 +89,14 @@ td {
7789
}
7890

7991
th {
80-
background-color: #424242;
81-
color: #40a9ff;
92+
background-color: var(--button-bg-color);
93+
color: var(--link-color);
8294
font-weight: 500;
8395
font-size: 14px;
84-
text-transform: uppercase;
96+
text-transform: none;
8597
letter-spacing: 0.5px;
98+
padding: 12px 16px;
99+
border-bottom: 1px solid var(--border-color);
86100
}
87101

88102
td {

0 commit comments

Comments
(0)

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