The social RSS reader. Built on AT Protocol.
glean.at
Refactor CSS styles and add accessibility support
author
Julien Robert
date
(Jun 8, 2026, 6:15 PM +0200)
commit
e7ec0909
e7ec0909e08c13810da023dc10ca162423b36bdf
parent
df519dda
df519ddaff85c5659caa9bf5f5839c4db3b479b7
+30
-36
+30
-36
static/input.css
+30
-36
static/input.css
···
85
85
.article-body figure { @apply my-4 }
86
86
.article-body figcaption { @apply text-sm text-spot-secondary text-center mt-2 }
87
87
.article-body a { @apply text-spot-green underline hover:brightness-110 }
88
-
.article-body table { @apply w-full border-collapse my-4 text-sm }
88
+
.article-body table { display: block; overflow-x: auto; @apply w-full border-collapse my-4 text-sm }
89
89
.article-body th { @apply border border-spot-divider px-3 py-2 bg-spot-surface font-semibold text-left text-spot-text }
90
90
.article-body td { @apply border border-spot-divider px-3 py-2 text-spot-body }
91
91
.article-body hr { @apply border-spot-divider my-6 }
···
96
96
.article-body .annotation-highlight { @apply bg-spot-green/25 border-b-2 border-spot-green/50 px-0.5 rounded-sm transition-colors }
97
97
.article-body .annotation-highlight:hover { @apply bg-spot-green/40 }
98
98
.article-body div, .article-body section, .article-body article, .article-body main, .article-body aside, .article-body nav, .article-body header, .article-body footer, .article-body span { max-width: 100%; overflow-wrap: break-word; }
99
-
.article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
100
-
}
99
+
100
+
.sidebar-link {
101
+
transition: color 0.15s, background-color 0.15s;
102
+
}
103
+
.sidebar-link:hover {
104
+
color: var(--spot-text);
105
+
background: var(--spot-hover-50);
106
+
}
107
+
.sidebar-link.active {
108
+
color: var(--spot-green);
109
+
background: var(--spot-hover-50);
110
+
}
111
+
112
+
.htmx-swapping {
113
+
opacity: 0;
114
+
transition: opacity 0.3s ease-out;
115
+
}
101
116
102
-
@layer utilities {
103
-
.line-clamp-2 {
104
-
display: -webkit-box;
105
-
-webkit-line-clamp: 2;
106
-
-webkit-box-orient: vertical;
107
-
overflow: hidden;
117
+
.animate-fade-in {
118
+
animation: fadeIn 0.3s ease-out forwards;
119
+
}
120
+
121
+
.animate-pulse-dot {
122
+
animation: pulse-dot 2s ease-in-out infinite;
108
123
}
109
124
}
110
125
···
115
130
-moz-osx-font-smoothing: grayscale;
116
131
}
117
132
118
-
.sidebar-link {
119
-
transition: color 0.15s, background-color 0.15s;
120
-
}
121
-
.sidebar-link:hover {
122
-
color: var(--spot-text);
123
-
background: var(--spot-hover-50);
124
-
}
125
-
.sidebar-link.active {
126
-
color: var(--spot-green);
127
-
background: var(--spot-hover-50);
128
-
}
129
-
130
133
::-webkit-scrollbar { width: 8px; }
131
134
::-webkit-scrollbar-track { background: var(--spot-bg); }
132
135
::-webkit-scrollbar-thumb { background: var(--spot-muted); border-radius: 6px; }
···
135
138
* {
136
139
scrollbar-width: thin;
137
140
scrollbar-color: var(--spot-muted) transparent;
138
-
}
139
-
140
-
.htmx-swapping {
141
-
opacity: 0;
142
-
transition: opacity 0.3s ease-out;
143
141
}
144
142
145
143
::selection {
···
147
145
color: var(--spot-text);
148
146
}
149
147
150
-
input:focus, textarea:focus {
151
-
outline: none;
152
-
}
153
-
154
148
@keyframes fadeIn {
155
149
from { opacity: 0; transform: translateY(4px); }
156
150
to { opacity: 1; transform: translateY(0); }
157
-
}
158
-
159
-
.animate-fade-in {
160
-
animation: fadeIn 0.3s ease-out forwards;
161
151
}
162
152
163
153
@keyframes pulse-dot {
···
165
155
50% { opacity: 0.5; }
166
156
}
167
157
168
-
.animate-pulse-dot {
169
-
animation: pulse-dot 2s ease-in-out infinite;
158
+
@media (prefers-reduced-motion: reduce) {
159
+
*, *::before, *::after {
160
+
animation-duration: 0.01ms !important;
161
+
animation-iteration-count: 1 !important;
162
+
transition-duration: 0.01ms !important;
163
+
}
170
164
}