cosmo/cosmos-dh-tweaks
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

add scaling option for fear tracker

Browse source
This commit is contained in:
CPTN Cosmo 2026-07-12 19:22:20 +02:00
parent 318498489b
commit 737690f42a
3 changed files with 262 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

121
styles/cosmos-dh-tweaks.css
View file

@ -156,8 +156,8 @@
text-align: center;
}
/* Reset button styling */
button.cosmo-reset-fear-pos-btn {
button.cosmo-reset-fear-pos-btn,
button.cosmo-reset-fear-scale-btn {
background: rgba(197, 164, 94, 0.1);
border: 1px solid rgb(153, 122, 79);
color: #d3d3d3;
@ -172,8 +172,123 @@ button.cosmo-reset-fear-pos-btn {
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
button.cosmo-reset-fear-pos-btn:hover {
button.cosmo-reset-fear-pos-btn:hover,
button.cosmo-reset-fear-scale-btn:hover {
background: rgba(197, 164, 94, 0.25);
border-color: #ffffff;
color: #ffffff;
}
/* Fear Tracker Scaling */
#resources {
--cosmo-fear-scale: 1;
}
/* Scale the skull icons */
#resources #resource-fear i {
width: calc(3rem * var(--cosmo-fear-scale, 1)) !important;
height: calc(3rem * var(--cosmo-fear-scale, 1)) !important;
font-size: calc(1.125rem * var(--cosmo-fear-scale, 1)) !important;
}
/* Scale hover state font-size for GMs */
#resources.isGM #resource-fear i:hover {
font-size: calc(1.25rem * var(--cosmo-fear-scale, 1)) !important;
}
/* Scale the control buttons (+ and -) */
#resources #resource-fear .controls {
width: calc(30px * var(--cosmo-fear-scale, 1)) !important;
height: calc(30px * var(--cosmo-fear-scale, 1)) !important;
font-size: calc(1.25rem * var(--cosmo-fear-scale, 1)) !important;
}
#resources #resource-fear .controls:hover {
font-size: calc(1.5rem * var(--cosmo-fear-scale, 1)) !important;
}
/* Scale the resource bar */
#resources #resource-fear .resource-bar {
font-size: calc(1.25rem * var(--cosmo-fear-scale, 1)) !important;
padding: calc(0.25rem * var(--cosmo-fear-scale, 1)) calc(0.5rem * var(--cosmo-fear-scale, 1)) !important;
}
/* Scale the window padding and flex gap */
#resources .window-content {
padding: calc(0.5rem * var(--cosmo-fear-scale, 1)) !important;
}
#resources #resource-fear {
gap: calc(0.5rem * var(--cosmo-fear-scale, 1)) calc(0.25rem * var(--cosmo-fear-scale, 1)) !important;
}
/* Scale the window header */
#resources header.window-header {
font-size: calc(14px * var(--cosmo-fear-scale, 1)) !important;
min-height: calc(30px * var(--cosmo-fear-scale, 1)) !important;
height: calc(30px * var(--cosmo-fear-scale, 1)) !important;
}
#resources header.window-header h1 {
font-size: calc(14px * var(--cosmo-fear-scale, 1)) !important;
}
#resources header.window-header button,
#resources header.window-header a,
#resources header.window-header i {
font-size: calc(14px * var(--cosmo-fear-scale, 1)) !important;
}
#resources header.window-header button,
#resources header.window-header a {
width: calc(30px * var(--cosmo-fear-scale, 1)) !important;
height: calc(30px * var(--cosmo-fear-scale, 1)) !important;
line-height: calc(30px * var(--cosmo-fear-scale, 1)) !important;
}
/* Context menu scale controls styling */
.cosmo-context-menu-header {
padding: 6px 12px 2px 12px;
font-size: 11px;
text-transform: uppercase;
color: #a49a85;
font-weight: bold;
letter-spacing: 0.5px;
border-top: 1px solid rgba(153, 122, 79, 0.3);
margin-top: 4px;
}
.cosmo-context-menu-scale-controls {
display: flex;
padding: 4px 12px 8px 12px;
gap: 4px;
justify-content: space-between;
}
.cosmo-context-menu-scale-controls button.scale-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(153, 122, 79, 0.4);
color: #d3d3d3;
padding: 2px 6px;
border-radius: 3px;
cursor: pointer;
font-size: 11px;
font-family: inherit;
transition: all 0.2s ease;
flex: 1;
text-align: center;
}
.cosmo-context-menu-scale-controls button.scale-btn:hover {
background: rgba(197, 164, 94, 0.25);
border-color: #ffffff;
color: #ffffff;
}
.cosmo-context-menu-scale-controls button.scale-btn.active {
background: rgba(197, 164, 94, 0.4);
border-color: rgb(197, 164, 94);
color: #ffffff;
font-weight: bold;
}