Add explanation tooltips for derived values
Hover/focus/tap tooltips show how attributes, derived stats, skill target numbers and limits, capacity, carry weight and point pools are calculated. Used in the wizard pages, the side sheet and the summary. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K
This commit is contained in:
@@ -162,3 +162,10 @@ tr.dim td { opacity: .55; }
|
||||
.card.tile { display: flex; flex-direction: column; gap: .3rem; }
|
||||
.card.tile.on { border-color: var(--noxium); box-shadow: inset 0 0 0 1px var(--noxium); background: var(--panel2); }
|
||||
.tilestepper { margin-top: auto; padding-top: .4rem; justify-content: flex-end; }
|
||||
|
||||
.tipped { border-bottom: 1px dotted var(--muted); cursor: help; }
|
||||
.tipwrap { cursor: help; }
|
||||
.tipicon { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .3rem; border: 1px solid var(--muted); border-radius: 50%; color: var(--muted); font-size: .7rem; font-style: italic; font-weight: 700; vertical-align: middle; }
|
||||
.tipwrap:hover .tipicon, .tipwrap:focus .tipicon { color: var(--noxium); border-color: var(--noxium); }
|
||||
.tippop { position: fixed; z-index: 1000; max-width: 340px; padding: .55rem .75rem; background: var(--panel2); color: var(--text); border: 1px solid var(--diesium); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: .85rem; line-height: 1.4; pointer-events: none; }
|
||||
.tippop div + div { margin-top: .35rem; }
|
||||
|
||||
Reference in New Issue
Block a user