From 733c6060bde65e400b85d774578fd6b5b196b6a6 Mon Sep 17 00:00:00 2001 From: IDeathByte <41571062+IDeathByte@users.noreply.github.com> Date: Thu, 16 Oct 2025 19:32:53 +0500 Subject: [PATCH] replace all font-size properties to vw for normal screen scaling --- style.css | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/style.css b/style.css index 87d9e15..d36a13c 100644 --- a/style.css +++ b/style.css @@ -639,7 +639,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-inventory-items { - font-size: clamp(5px, 1vw, 7px); + font-size: clamp(0.4vw, 0.5vw, 0.6vw); color: var(--rpg-text); line-height: 1.3; overflow-y: auto; @@ -746,7 +746,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-stat-label { min-width: 4.062rem; - font-size: clamp(7px, 1.1vw, 8px); + font-size: clamp(0.9vw, 0.95vw, 1vw); font-weight: 600; text-align: left; color: var(--rpg-text); @@ -776,7 +776,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-stat-value { color: #fff; - font-size: clamp(7px, 1.1vw, 8px); + font-size: clamp(0.9vw, 0.95vw, 1vw); font-weight: bold; min-width: 1.875rem; text-align: right; @@ -797,7 +797,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { transform: translateY(-50%); z-index: 2; min-width: auto; - font-size: clamp(7px, 1.1vw, 9px); + font-size: clamp(0.6vw, 0.7vw, 0.8vw); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } @@ -814,7 +814,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { transform: translateY(-50%); z-index: 2; min-width: auto; - font-size: clamp(7px, 1.1vw, 9px); + font-size: clamp(0.6vw, 0.7vw, 0.8vw); } } @@ -824,7 +824,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { display: flex; align-items: center; gap: 0.375em; - font-size: clamp(6px, 1vw, 8px); + font-size: clamp(0.4vw, 0.5vw, 0.6vw); padding: clamp(4px, 0.6vh, 6px) 0.375em; background: rgba(0, 0, 0, 0.3); border-radius: 0.25em; @@ -890,7 +890,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-classic-stat-label { - font-size: clamp(6px, 0.8vw, 7px); + font-size: clamp(0.4vw, 0.5vw, 0.6vw); font-weight: bold; text-transform: uppercase; letter-spacing: 0.006em; @@ -900,7 +900,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-classic-stat-value { - font-size: clamp(10px, 1.2vw, 12px); + font-size: clamp(0.5vw, 0.6vw, 0.7vw); font-weight: bold; color: var(--rpg-highlight); text-align: center; @@ -1053,7 +1053,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-calendar-top { background: var(--rpg-highlight); color: var(--rpg-bg); - font-size: clamp(5px, 1vw, 7px); + font-size: clamp(0.5vw, 0.55vw, 0.6vw); font-weight: bold; padding: 0.125em 0.375em; border-radius: 3px 3px 0 0; @@ -1064,7 +1064,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-calendar-day { background: rgba(255, 255, 255, 0.1); color: var(--rpg-text); - font-size: clamp(14px, 2.5vw, 20px); + font-size: clamp(0.8vw, 1vw, 1.2vw); font-weight: bold; padding: 0.25em; width: 100%; @@ -1078,7 +1078,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-calendar-year { - font-size: clamp(5px, 0.8vw, 6px); + font-size: clamp(0.5vw, 0.55vw, 0.6vw); color: var(--rpg-text); opacity: 0.7; margin-top: 0.062em; @@ -1092,7 +1092,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-weather-forecast { - font-size: clamp(5px, 0.8vw, 6px); + font-size: clamp(0.4vw, 0.5vw, 0.6vw); text-align: center; margin: 0; font-weight: 600; @@ -1155,7 +1155,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-temp-value { - font-size: clamp(6px, 1.2vw, 8px); + font-size: clamp(0.5vw, 0.6vw, 0.7vw); font-weight: bold; color: var(--rpg-text); text-align: center; @@ -1218,7 +1218,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-time-value { - font-size: clamp(6px, 1.1vw, 8px); + font-size: clamp(0.5vw,0.6vw,0.7vw); font-weight: bold; color: var(--rpg-text); } @@ -1249,7 +1249,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-map-marker { - font-size: 1.5vw; + font-size: 1vw; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); animation: markerPulse 2s ease-in-out infinite; } @@ -1260,7 +1260,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } .rpg-location-text { - font-size: clamp(7px, 1.2vw, 8px); + font-size: clamp(0.5vw, 0.6vw, 0.7vw); font-weight: bold; color: var(--rpg-text); text-align: center; @@ -1574,7 +1574,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-character-name { font-weight: bold; color: var(--rpg-highlight); - font-size: clamp(9px, 1.5vw, 12px); + font-size: clamp(0.7vw, 0.75vw, 0.8vw); text-transform: uppercase; letter-spacing: 0.031em; white-space: nowrap; /* Prevent name from wrapping */ @@ -1584,7 +1584,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Character traits/status line */ .rpg-character-traits { - font-size: clamp(8px, 1.3vw, 10px); + font-size: clamp(0.6vw, 0.7vw, 0.8vw); color: var(--rpg-text); opacity: 0.8; line-height: 1.3; @@ -3011,7 +3011,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Thought content on the right */ .rpg-thought-content { flex: 1; - font-size: clamp(10px, 1.4vw, 12px); + font-size: clamp(0.68vw, 0.7vw, 0.72vw); line-height: 1.5; color: var(--rpg-text, #eaeaea); font-style: italic;