Foundry/ripcrypt
1
0
Fork 0
Code Issues 22 Pull requests Releases Activity Actions

Get the fate compass looking good

Browse source
This commit is contained in:
Oliver-Akins 2025-02-28 16:18:31 -07:00
parent 77979f5550
commit 3d6710dd18
2 changed files with 51 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
templates/Apps/DelveDiceHUD/fateCompass.hbs
View file

@ -1,3 +1,16 @@
<div id="fate-compass">
North
</div>
<div class="compass-container">
<div class="compass">
<span style="grid-area: N;">N</span>
<span style="grid-area: W;">W</span>
<rc-icon
class="compass-pointer"
name="icons/arrow-compass"
var:fill="var(--accent-3)"
var:size="1rem"
></rc-icon>
<span style="grid-area: E;">E</span>
<span style="grid-area: S;">S</span>
</div>
</div>
</div>

36
templates/Apps/DelveDiceHUD/style.css
View file

@ -15,4 +15,40 @@
cursor: pointer;
}
}
#fate-compass {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
.compass-container {
position: absolute;
background: var(--DelveDice-background);
border-radius: 0 0 999px 999px;
padding: 4px;
width: 100%;
}
.compass {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-template-areas:
". N ."
"W A E"
". S .";
align-items: center;
justify-items: center;
background: var(--accent-2);
border-radius: 999px;
aspect-ratio: 1;
}
.compass-pointer {
grid-area: A;
transition: 500ms transform;
transform: rotate(-90deg); /* North by default */
}
}
}