Skip to content

Commit f4faa44

Browse files
authored
Update styles.css
1 parent 0b1ff53 commit f4faa44

File tree

1 file changed

+0
-82
lines changed

1 file changed

+0
-82
lines changed

web/styles.css

Lines changed: 0 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -236,85 +236,3 @@ body {
236236
padding: 24px;
237237
}
238238
}
239-
240-
241-
242-
/* ---------- container for gradient & clipping ---------- */
243-
/* keep this minimal and scoped to mobile portrait where .sidebar is horizontal */
244-
.sidebar-container {
245-
/* default: no visual change on desktop */
246-
display: block;
247-
position: relative;
248-
overflow: visible;
249-
}
250-
251-
/* only apply mobile top-bar behaviour in portrait (matches your existing rules) */
252-
@media (max-width: 900px) and (orientation: portrait) {
253-
.sidebar-container {
254-
/* container handles the gradient/clip while .sidebar scrolls inside it */
255-
overflow: hidden;
256-
padding: 10px 0; /* keep same spacing you used */
257-
background: var(--sidebar);
258-
border-radius: 14px;
259-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
260-
}
261-
262-
/* the actual scrolling row */
263-
.sidebar {
264-
display: flex;
265-
gap: 6px;
266-
padding-left: 14px; /* match your existing .sidebar padding */
267-
overflow-x: auto;
268-
overflow-y: hidden;
269-
-webkit-overflow-scrolling: auto; /* help iOS not fade too quickly */
270-
scrollbar-width: thin; /* firefox hint */
271-
}
272-
273-
/* webkit scrollbar style for small phones */
274-
.sidebar::-webkit-scrollbar {
275-
height: 6px;
276-
}
277-
.sidebar::-webkit-scrollbar-thumb {
278-
background: rgba(0,0,0,0.28);
279-
border-radius: 3px;
280-
}
281-
282-
/* gradient fixed to the container's right edge (affordance) */
283-
.sidebar-container::after {
284-
content: '';
285-
position: absolute;
286-
top: 0;
287-
right: 0;
288-
height: 100%;
289-
width: 44px; /* hint width; tweak to taste */
290-
pointer-events: none;
291-
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
292-
transition: opacity .18s ease, right .18s ease;
293-
opacity: 1;
294-
border-top-right-radius: 14px;
295-
border-bottom-right-radius: 14px;
296-
}
297-
298-
/* hide gradient when scrolled to end OR when no overflow */
299-
.sidebar-container.scrolled-end::after,
300-
.sidebar-container.no-overflow::after {
301-
opacity: 0;
302-
pointer-events: none;
303-
}
304-
305-
/* small adjustment so the gradient doesn't fully cover last item */
306-
.sidebar-item:last-child {
307-
margin-right: 12px;
308-
}
309-
}
310-
311-
/* landscape (left vertical) behaviour remains unchanged, no gradient */
312-
@media (max-width: 900px) and (orientation: landscape) {
313-
/* keep your existing landscape rules */
314-
.sidebar {
315-
width: 220px;
316-
flex-direction: column;
317-
overflow-x: hidden;
318-
overflow-y: auto;
319-
}
320-
}

0 commit comments

Comments
 (0)