thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: text over axes
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Tomáš Mládek 2024-02-03 18:44:05 +01:00
parent 697b8d1f42
commit 82907f451e
2 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/ScreenInfo.svelte
View file

@ -45,7 +45,7 @@
} }
.window { .window {
margin-top: 1em; margin-top: calc(1em / 0.8);
font-size: 0.8em; font-size: 0.8em;
} }
</style> </style>

17
src/lib/TestCard.svelte
View file

@ -24,7 +24,7 @@
onMount(() => { onMount(() => {
window.addEventListener('dblclick', () => { window.addEventListener('dblclick', () => {
document.body.requestFullscreen(); document.body.requestFullscreen();
}) });
}); });
</script> </script>
@ -42,7 +42,9 @@
<Axes /> <Axes />
<div class="outer"></div> <div class="outer"></div>
<div class="inner"> <div class="inner"></div>
<div class="info">
<ScreenInfo /> <ScreenInfo />
</div> </div>
@ -84,9 +86,6 @@
width: calc(var(--block-size) * var(--circle-blocks)); width: calc(var(--block-size) * var(--circle-blocks));
height: calc(var(--block-size) * var(--circle-blocks)); height: calc(var(--block-size) * var(--circle-blocks));
display: flex;
justify-content: center;
align-items: center;
border: 1px solid white; border: 1px solid white;
background: rgba(0, 0, 0, 0.66); background: rgba(0, 0, 0, 0.66);
border-radius: 50%; border-radius: 50%;
@ -106,6 +105,14 @@
opacity: 0.5; opacity: 0.5;
} }
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.column { .column {
position: absolute; position: absolute;
top: 50%; top: 50%;