melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: implement typography, scrollbars, and minimalist empty/focus states

Browse Source
This commit is contained in:
mkelvers
2026-04-09 12:42:27 +02:00
parent 216bfab5fe
commit b53a2c5751
1 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
static/css/style.css
View File

@@ -51,10 +51,36 @@
box-sizing: border-box; box-sizing: border-box;
} }
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 1px solid var(--text);
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--border);
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
body { body {
background-color: var(--bg); background-color: var(--bg);
color: var(--text); color: var(--text);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: var(--text-lg); font-size: var(--text-lg);
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
@@ -209,13 +235,13 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--surface-hover); background-color: var(--surface-hover);
background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 6px);
border: 1px solid var(--border); border: 1px solid var(--border);
font-size: var(--text-xs); font-size: 0;
color: var(--text-muted); color: transparent;
flex-shrink: 0; flex-shrink: 0;
text-align: center; user-select: none;
padding: var(--space-xs);
} }
.search-result-info { .search-result-info {
@@ -328,10 +354,12 @@ a:visited {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-muted); color: transparent;
font-size: var(--text-base); font-size: 0;
background: var(--surface); background-color: var(--surface);
background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 8px);
border: 1px solid var(--border); border: 1px solid var(--border);
user-select: none;
} }
.catalog-title { .catalog-title {