Skip to content

Commit aae8dec

Browse files
tonykayclaude
tonykay
and
claude
committed
fix: improve Commento styling with !important overrides
- Fix vote button layout (inline-flex instead of stacked) - Add !important to all CSS rules to override inline styles - Improve button sizing and spacing - Add specific styling for login box, error messages - Better dark mode support Fixes rendering issues with vote buttons and layout on production site. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 09e4d08 commit aae8dec

1 file changed

Lines changed: 190 additions & 85 deletions

File tree

‎static/css/commento-custom.css‎

Lines changed: 190 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,252 @@
11
/**
22
* Commento Custom Styles
33
* Matches hugo-clarity theme design
4+
*
5+
* Note: Using !important to override Commento's inline styles
46
*/
57

6-
/* Use theme colors and fonts */
8+
/* Main container */
79
#commento {
8-
--commento-primary: #0077b8; /* Theme blue */
9-
--commento-background: #fff; /* Light background */
10-
--commento-text: #575757; /* Body text color */
11-
--commento-header: #020202; /* Header text (darker) */
12-
--commento-border: #dedede; /* Subtle borders */
13-
--commento-shadow: rgba(0,0,0,0.12); /* Consistent shadows */
10+
font-family: Metropolis, sans-serif !important;
11+
color: #575757 !important;
12+
line-height: 1.6 !important;
13+
}
14+
15+
/* Fix vote button layout - they should be inline */
16+
.commento-vote {
17+
display: inline-flex !important;
18+
align-items: center !important;
19+
gap: 0.25rem !important;
20+
}
21+
22+
.commento-vote button {
23+
background: transparent !important;
24+
border: 1px solid #dedede !important;
25+
border-radius: 3px !important;
26+
padding: 0.25rem 0.5rem !important;
27+
cursor: pointer !important;
28+
color: #575757 !important;
29+
font-size: 0.875rem !important;
30+
transition: all 0.2s ease !important;
31+
min-width: auto !important;
32+
}
1433

15-
font-family: Metropolis, sans-serif; /* Match theme font */
16-
color: var(--commento-text);
34+
.commento-vote button:hover {
35+
background: rgba(0, 119, 184, 0.1) !important;
36+
border-color: #0077b8 !important;
37+
color: #0077b8 !important;
1738
}
1839

19-
/* Comment box styling to match blog cards */
20-
#commento .commento-root {
21-
background: var(--commento-background);
22-
border-radius: 3px;
23-
padding: 1.5rem;
24-
margin-top: 2rem;
40+
.commento-vote-count {
41+
font-size: 0.875rem !important;
42+
color: #575757 !important;
43+
padding: 0 0.5rem !important;
2544
}
2645

2746
/* Buttons match theme primary color */
28-
#commento button,
47+
#commento button.commento-submit-button,
2948
#commento .commento-button {
30-
background-color: var(--commento-primary);
31-
border: none;
32-
border-radius: 3px;
33-
color: white;
34-
padding: 0.5rem 1rem;
35-
font-family: Metropolis, sans-serif;
36-
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
49+
background-color: #0077b8 !important;
50+
border: none !important;
51+
border-radius: 3px !important;
52+
color: white !important;
53+
padding: 0.5rem 1rem !important;
54+
font-family: Metropolis, sans-serif !important;
55+
cursor: pointer !important;
56+
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1) !important;
3757
}
3858

39-
#commento button:hover,
59+
#commento button.commento-submit-button:hover,
4060
#commento .commento-button:hover {
41-
background-color: #006ba1; /* Slightly darker on hover */
42-
box-shadow: 0 0 5rem rgba(0, 0, 0, 0.2);
61+
background-color: #006ba1 !important;
62+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2) !important;
4363
}
4464

4565
/* Input fields match theme styling */
4666
#commento input[type="text"],
4767
#commento input[type="email"],
68+
#commento input[type="password"],
4869
#commento textarea {
49-
border: 1px solid var(--commento-border);
50-
border-radius: 3px;
51-
padding: 0.5rem;
52-
font-family: Metropolis, sans-serif;
53-
color: var(--commento-text);
54-
background: var(--commento-background);
70+
border: 1px solid #dedede !important;
71+
border-radius: 3px !important;
72+
padding: 0.5rem !important;
73+
font-family: Metropolis, sans-serif !important;
74+
color: #575757 !important;
75+
background: #fff !important;
76+
width: 100% !important;
5577
}
5678

5779
#commento input:focus,
5880
#commento textarea:focus {
59-
outline: none;
60-
border-color: var(--commento-primary);
61-
box-shadow: 0 0 0 2px rgba(0, 119, 184, 0.1);
81+
outline: none !important;
82+
border-color: #0077b8 !important;
83+
box-shadow: 0 0 0 2px rgba(0, 119, 184, 0.1) !important;
6284
}
6385

64-
/* Comment threading - clear visual hierarchy */
65-
#commento .commento-comment-children {
66-
margin-left: 2rem;
67-
padding-left: 1rem;
68-
border-left: 2px solid var(--commento-border);
86+
/* Comment card styling */
87+
.commento-card {
88+
background: #fff !important;
89+
border: 1px solid #dedede !important;
90+
border-radius: 3px !important;
91+
padding: 1rem !important;
92+
margin-bottom: 1rem !important;
93+
}
94+
95+
/* Comment header (author, time) */
96+
.commento-name {
97+
font-weight: 600 !important;
98+
color: #020202 !important;
99+
font-size: 1rem !important;
69100
}
70101

71-
/* Comment metadata (author, time) */
72-
#commento .commento-name {
73-
font-weight: 600;
74-
color: var(--commento-header);
102+
.commento-timeago {
103+
color: #999 !important;
104+
font-size: 0.875rem !important;
105+
margin-left: 0.5rem !important;
75106
}
76107

77-
#commento .commento-timeago {
78-
color: #999;
79-
font-size: 0.875rem;
108+
/* Comment body text */
109+
.commento-body {
110+
margin-top: 0.5rem !important;
111+
color: #575757 !important;
112+
line-height: 1.6 !important;
113+
}
114+
115+
/* Comment threading - clear visual hierarchy */
116+
.commento-children {
117+
margin-left: 2rem !important;
118+
padding-left: 1rem !important;
119+
border-left: 2px solid #dedede !important;
120+
margin-top: 1rem !important;
80121
}
81122

82123
/* Links match theme blue */
83124
#commento a {
84-
color: var(--commento-primary);
85-
text-decoration: none;
86-
transition: color 0.2s ease;
125+
color: #0077b8 !important;
126+
text-decoration: none !important;
127+
transition: color 0.2s ease !important;
87128
}
88129

89130
#commento a:hover {
90-
color: #006ba1;
91-
text-decoration: underline;
131+
color: #006ba1 !important;
132+
text-decoration: underline !important;
92133
}
93134

94135
/* Reply button styling */
95-
#commento .commento-reply-button {
96-
background: transparent;
97-
color: var(--commento-primary);
98-
padding: 0.25rem 0.5rem;
99-
font-size: 0.875rem;
136+
.commento-reply-button {
137+
background: transparent !important;
138+
color: #0077b8 !important;
139+
border: 1px solid #0077b8 !important;
140+
padding: 0.25rem 0.75rem !important;
141+
font-size: 0.875rem !important;
142+
border-radius: 3px !important;
143+
margin-top: 0.5rem !important;
144+
}
145+
146+
.commento-reply-button:hover {
147+
background: rgba(0, 119, 184, 0.1) !important;
148+
}
149+
150+
/* Login box */
151+
#commento-login-box-container {
152+
background: #fafafa !important;
153+
border: 1px solid #dedede !important;
154+
border-radius: 3px !important;
155+
padding: 1rem !important;
156+
margin-bottom: 1rem !important;
157+
}
158+
159+
/* Social login buttons */
160+
.commento-oauth-buttons-container button {
161+
margin: 0.25rem !important;
162+
padding: 0.5rem 1rem !important;
163+
border-radius: 3px !important;
164+
font-family: Metropolis, sans-serif !important;
100165
}
101166

102-
#commento .commento-reply-button:hover {
103-
background: rgba(0, 119, 184, 0.1);
104-
box-shadow: none;
167+
/* Anonymous login option */
168+
.commento-anonymous-checkbox-container {
169+
margin: 0.5rem 0 !important;
170+
}
171+
172+
/* Error messages */
173+
.commento-error-box {
174+
background: #FAE2E2 !important;
175+
border: 1px solid rgba(217, 83, 79, 0.8) !important;
176+
border-radius: 3px !important;
177+
padding: 0.75rem !important;
178+
margin: 0.5rem 0 !important;
179+
color: #721c24 !important;
180+
}
181+
182+
/* Markdown formatting */
183+
.commento-markdown * {
184+
font-family: Metropolis, sans-serif !important;
185+
}
186+
187+
.commento-markdown code {
188+
background: #f5f5f5 !important;
189+
padding: 0.125rem 0.25rem !important;
190+
border-radius: 2px !important;
191+
font-size: 0.875em !important;
192+
}
193+
194+
.commento-markdown pre {
195+
background: #002538 !important;
196+
color: #fff !important;
197+
padding: 1rem !important;
198+
border-radius: 3px !important;
199+
overflow-x: auto !important;
105200
}
106201

107202
/* Dark mode support (matches theme dark mode) */
108203
html[data-mode="dim"] #commento {
109-
--commento-background: rgba(255,255,255,0.05);
110-
--commento-text: hsla(0,0%,100%,0.87);
111-
--commento-header: #fff;
112-
--commento-border: rgba(255,255,255,0.1);
113-
--commento-shadow: rgba(0,0,0,0.3);
204+
color: hsla(0,0%,100%,0.87) !important;
205+
}
206+
207+
html[data-mode="dim"] .commento-card {
208+
background: rgba(255,255,255,0.05) !important;
209+
border-color: rgba(255,255,255,0.1) !important;
114210
}
115211

116212
html[data-mode="dim"] #commento input[type="text"],
117213
html[data-mode="dim"] #commento input[type="email"],
214+
html[data-mode="dim"] #commento input[type="password"],
118215
html[data-mode="dim"] #commento textarea {
119-
background: rgba(255,255,255,0.05);
120-
border-color: rgba(255,255,255,0.1);
121-
color: hsla(0,0%,100%,0.87);
216+
background: rgba(255,255,255,0.05) !important;
217+
border-color: rgba(255,255,255,0.1) !important;
218+
color: hsla(0,0%,100%,0.87) !important;
219+
}
220+
221+
html[data-mode="dim"] .commento-children {
222+
border-left-color: rgba(255,255,255,0.1) !important;
223+
}
224+
225+
html[data-mode="dim"] .commento-name {
226+
color: #fff !important;
227+
}
228+
229+
html[data-mode="dim"] .commento-body {
230+
color: hsla(0,0%,100%,0.87) !important;
122231
}
123232

124-
html[data-mode="dim"] #commento .commento-comment-children {
125-
border-left-color: rgba(255,255,255,0.1);
233+
html[data-mode="dim"] #commento-login-box-container {
234+
background: rgba(255,255,255,0.05) !important;
235+
border-color: rgba(255,255,255,0.1) !important;
126236
}
127237

128-
/* Spacing and typography refinements */
129-
#commento .commento-card {
130-
margin-bottom: 1rem;
131-
padding: 1rem;
132-
border-radius: 3px;
133-
background: var(--commento-background);
238+
html[data-mode="dim"] .commento-vote button {
239+
border-color: rgba(255,255,255,0.1) !important;
240+
color: hsla(0,0%,100%,0.87) !important;
134241
}
135242

136-
#commento .commento-body {
137-
line-height: 1.6;
138-
margin-top: 0.5rem;
243+
/* Root section spacing */
244+
#commento-section {
245+
margin-top: 3rem !important;
246+
padding-top: 2rem !important;
247+
border-top: 1px solid #dedede !important;
139248
}
140249

141-
/* Section header */
142-
#commento-section h2,
143-
#commento-section h3 {
144-
color: var(--commento-header);
145-
font-family: Metropolis, sans-serif;
146-
margin-bottom: 1rem;
250+
html[data-mode="dim"] #commento-section {
251+
border-top-color: rgba(255,255,255,0.1) !important;
147252
}

0 commit comments

Comments
 (0)