Scroll parchment with the document surface

This commit is contained in:
Admin 2026-10-07 20:30:33 +00:00
parent 32efa65bc9
commit ef1e2e07d9

View File

@ -2,7 +2,9 @@
@media(max-width:700px){.topbar{height:68px;padding:0 18px;gap:10px}.brand>span{font-size:12px;letter-spacing:2px}.brand{font-size:23px;gap:9px}.status{font-size:9px}.topbar>.quiet{font-size:11px;max-width:85px;overflow:hidden}main{padding:18px 16px 105px}.character-switch{margin-bottom:25px}.hero{gap:15px;flex-wrap:wrap;margin-bottom:25px}.hero h1{font-size:34px}.hero>div:nth-child(2){flex:1;min-width:0}.hero h1{overflow-wrap:anywhere}.monogram{width:57px;height:68px;font-size:32px}.edit{width:100%;text-align:right;padding:0;min-height:24px}.combat-grid{grid-template-columns:repeat(3,1fr);gap:10px}.hp-card{grid-column:1/-1;padding:20px 24px}.hp-value{font-size:58px;margin:10px 0}.hp-footer{font-size:11px}.stat-card{padding:15px 6px;min-height:120px}.stat-card>span{font-size:8px}.stat-card strong{font-size:34px;margin:6px}.stat-card .quiet{font-size:10px;min-height:24px;padding:2px}.ability-row{gap:6px;margin-bottom:22px}.ability-row button{padding:11px 0;border-radius:8px}.ability-row strong{font-size:24px}.ability-row span{font-size:8px;letter-spacing:1px}.ability-row small{font-size:10px}.two-column{grid-template-columns:1fr;gap:0}.panel{padding:20px 17px;border-radius:12px}.section-title h2{font-size:22px}.section-title>.quiet{font-size:11px}.save-row{grid-template-columns:repeat(3,1fr)}.skill-grid{grid-template-columns:1fr 1fr;gap:2px 16px}.skill-grid button{font-size:11px;padding:12px 0}.rest-bar{flex-wrap:wrap;gap:10px}.rest-bar>span{width:100%;margin:0 0 5px}.rest-bar button{flex:1}footer{font-size:8px;letter-spacing:0;gap:10px}.overlay{align-items:flex-end;padding:0}.drawer{border-radius:22px 22px 0 0;padding:25px 20px max(25px,env(safe-area-inset-bottom));max-height:92dvh}.empty{padding:50px 8px}.empty h1,.gate h1{font-size:38px}.gate{padding-top:100px}.settings-actions>*{flex:1;min-width:45%;font-size:12px}.spell-row{align-items:flex-start}.roll-buttons button{font-size:11px}.chip{font-size:9px}}
/* Illustrated UI collection. */
body{background:#f6e6c4 url('./assets/parchment.webp') repeat;background-size:700px}
body{background:#f6e6c4}
/* Paint the parchment on the document surface, not the browser canvas. */
#app{min-height:100vh;min-height:100dvh;background:#f6e6c4 url('./assets/parchment.webp') repeat;background-size:700px;background-attachment:scroll;background-position:top center}
.ui-icon{display:inline-block;width:32px;height:32px;flex-shrink:0;vertical-align:middle;overflow:hidden;pointer-events:none}
.panel,.stat-card,.drawer{background-color:rgba(255,250,232,.91);border-color:#c5ad76;box-shadow:0 2px 0 #b4986030,inset 0 1px 0 #fff9}
.panel h2{display:flex;align-items:center;gap:10px}.panel h2 .ui-icon{width:34px;height:34px}
@ -21,7 +23,7 @@ body{background:#f6e6c4 url('./assets/parchment.webp') repeat;background-size:70
.empty-icon{width:96px;height:96px;margin-bottom:20px}
.monogram{background:#e7d19c;border-color:#ae8c4e}.monogram span{background:#f8e8bf}
.skill-grid button:hover,.save-row button:hover{background:#f0e4bf}
@media(max-width:700px){body{background-size:550px}.stat-card>.ui-icon{width:34px;height:34px;margin-bottom:6px}.stat-card{min-height:154px}.ability-row .ui-icon{width:29px;height:29px;margin-bottom:6px}.panel h2 .ui-icon{width:29px;height:29px}.panel h2{font-size:20px;gap:8px}.bottom-nav .ui-icon{width:34px;height:34px}.counter{gap:8px}.counter button{min-width:32px}.resource>.ui-icon{width:26px;height:26px}.section-title>.quiet{white-space:nowrap}.rest-bar .ui-icon{width:26px;height:26px}}
@media(max-width:700px){#app{background-size:550px}.stat-card>.ui-icon{width:34px;height:34px;margin-bottom:6px}.stat-card{min-height:154px}.ability-row .ui-icon{width:29px;height:29px;margin-bottom:6px}.panel h2 .ui-icon{width:29px;height:29px}.panel h2{font-size:20px;gap:8px}.bottom-nav .ui-icon{width:34px;height:34px}.counter{gap:8px}.counter button{min-width:32px}.resource>.ui-icon{width:26px;height:26px}.section-title>.quiet{white-space:nowrap}.rest-bar .ui-icon{width:26px;height:26px}}
/* Keep the illustrated folio style through the working UI. */
[hidden]{display:none!important}