74 lines
1.5 KiB
TypeScript
74 lines
1.5 KiB
TypeScript
import {createGlobalStyle, css} from 'styled-components';
|
|
|
|
export const GlobalStyle = createGlobalStyle`
|
|
@font-face {
|
|
font-family: 'FallbackFont';
|
|
src: local('Helvetica');
|
|
size-adjust: 98.5%;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Roboto', 'FallbackFont', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
|
|
color:#0C3B2E;
|
|
}
|
|
|
|
html {
|
|
overflow: hidden;
|
|
height: 100svh;
|
|
}
|
|
|
|
body {
|
|
height: 100svh;
|
|
background-color: ${({ theme }) => theme.colors.pageBg};
|
|
background-image: url('/images/background-raspberry.png');
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: contain;
|
|
background-position: left top;
|
|
min-height: 100svh;
|
|
|
|
${({ theme }) => theme.media.mobile(css`
|
|
background-position: center 72%;
|
|
`)};
|
|
}
|
|
|
|
#root {
|
|
height: 100vh;
|
|
${({ theme }) => theme.media.mobile(css`
|
|
overflow: auto;
|
|
`)};
|
|
}
|
|
|
|
button {
|
|
-webkit-touch-callout: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@keyframes opacityAnim {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
*::placeholder {
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
}
|
|
`; |