olcxjas-softworks/PLWL
2
0
Fork 0
Code Issues Pull requests Projects Releases 15 Packages Wiki Activity Actions

improve small elements rendering, bump to 0.4.2

Browse source
This commit is contained in:
olcxja 2026-10-05 17:37:23 +02:00
commit cb0b071a38
3 changed files with 22 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

12
renderer/app.js
View file

@ -1,5 +1,17 @@
'use strict'
// The CSS scales the root font size with the window width (max(15px, 100vw/90)),
// which is fractional at almost every width - every rem value in the UI then
// lands on a fractional pixel and text/border rounding drifts a pixel up or
// down while resizing (badges were the most visible case). Snap it to whole
// pixels so the whole layout steps in 1px root increments instead.
function snapRootFontSize() {
const px = Math.max(15, Math.round(window.innerWidth / 90))
document.documentElement.style.fontSize = px + 'px'
}
snapRootFontSize()
window.addEventListener('resize', snapRootFontSize, { passive: true })
const qs = s => document.querySelector(s)
const qsa = s => [...document.querySelectorAll(s)]

32
renderer/style.css
View file

@ -7,6 +7,10 @@
src: url('Nunito-Black.ttf') format('truetype');
}
* {
transform: translateZ(0);
}
:root {
--main-bg-color: rgb(20, 20, 20);
--panel-color: rgb(26, 26, 26);
@ -16,7 +20,7 @@
--button-margin: 0.4rem;
--button-height: 2.4rem;
--icon-button-size: 3.4rem;
--border-width: 0.09rem;
--border-width: 0.08rem;
--big-default: rgb(207, 207, 207);
--big-red: hsl(0, 68%, 52%);
--big-green: hsl(120, 60%, 55%);
@ -103,10 +107,6 @@ sidebarelement.active .icon-button { background: rgba(255, 255, 255, 0.05); }
border: var(--border-width) solid transparent;
border-radius: 0.8rem;
cursor: pointer;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
transform-origin: center center;
}
.icon-button:hover { background: rgba(255, 255, 255, 0.05); }
.icon-button:active { background: rgba(255, 255, 255, 0.1); transform: var(--press-scale); }
@ -211,10 +211,6 @@ content {
/* only Regular and Black faces are bundled, so >=600 resolves to the same
bold rendering on every button; primary just adds the filled style */
font-weight: 700;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
transform-origin: center center;
}
.button:hover { background-color: rgba(255, 255, 255, 0.09); }
.button:active { background-color: rgba(255, 255, 255, 0.1); transform: var(--press-scale); }
@ -260,10 +256,6 @@ input, textarea {
min-height: var(--button-height);
user-select: text !important;
cursor: text;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
transform-origin: center center;
}
input:hover, textarea:hover { background-color: rgba(255, 255, 255, 0.09); }
input:active, textarea:active { background-color: rgba(255, 255, 255, 0.1); }
@ -298,8 +290,6 @@ input[type='checkbox'] {
display: inline-flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.15s ease;
}
input[type='checkbox']:hover { background-color: rgba(255, 255, 255, 0.09); }
@ -336,10 +326,6 @@ select {
width: 100%;
user-select: none;
z-index: 2;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
transform-origin: center center;
}
.custom-select:hover { background-color: rgba(255, 255, 255, 0.09); }
.custom-select:active { background-color: rgba(255, 255, 255, 0.1); transform: var(--press-scale); }
@ -558,11 +544,11 @@ select {
flex-wrap: wrap;
}
.badge {
display: inline-flex;
align-items: center;
font-size: 0.72rem;
/* Nunito keeps a lot of air above the caps, so a line box centred by its
font metrics reads as "text sits high" (clearest on "Portable"); bias the
padding downwards, keeping the same overall height, to centre the label */
padding: 0.25em 0.7em 0.03em;
line-height: 1.2;
padding: 0.24em 0.7em 0.24em;
border-radius: 0.6rem;
border: var(--border-width) solid var(--light-border-color);
color: var(--darker-text-color);