51 lines
1.4 KiB
CSS
51 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@import "./fonts/BalsamiqSans";
|
|
|
|
@theme {
|
|
}
|
|
|
|
:root {
|
|
--safe-area-height: var(--tg-viewport-stable-height, 100dvh);
|
|
--safe-area-width: var(--tg-viewport-width, 100dvw);
|
|
|
|
--safe-area-top: var(--tg-viewport-safe-area-inset-top, 0px);
|
|
--safe-content-top: var(--tg-viewport-content-safe-area-inset-top, 0px);
|
|
--safe-top: calc(var(--safe-area-top) + var(--safe-content-top));
|
|
|
|
--safe-area-right: var(--tg-viewport-safe-area-inset-right, 0px);
|
|
--safe-content-right: var(--tg-viewport-content-safe-area-inset-right, 0px);
|
|
--safe-right: calc(var(--safe-area-right) + var(--safe-content-right));
|
|
|
|
--safe-area-bottom: var(--tg-viewport-safe-area-inset-bottom, 0px);
|
|
--safe-content-bottom: var(--tg-viewport-content-safe-area-inset-bottom, 0px);
|
|
--safe-bottom: calc(var(--safe-area-bottom) + var(--safe-content-bottom));
|
|
|
|
--safe-area-left: var(--tg-viewport-safe-area-inset-left, 0px);
|
|
--safe-content-left: var(--tg-viewport-content-safe-area-inset-left, 0px);
|
|
--safe-left: calc(var(--safe-area-left) + var(--safe-content-left));
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: #9ebf3e;
|
|
height: var(--safe-area-height);
|
|
width: var(--safe-area-width);
|
|
font-family: "BalsamiqSans", sans-serif;
|
|
}
|
|
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 600px;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
button {
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|