diff options
author | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
---|---|---|
committer | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
commit | 58ebd3bc0f00c532e97e9a5571471ffab87934ba (patch) | |
tree | 6e099e59af07206df6edf2b0c585d0c5a466d4bd /server/web/src/design/GlobalStyle.tsx |
Diffstat (limited to 'server/web/src/design/GlobalStyle.tsx')
-rw-r--r-- | server/web/src/design/GlobalStyle.tsx | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/server/web/src/design/GlobalStyle.tsx b/server/web/src/design/GlobalStyle.tsx new file mode 100644 index 0000000..25c47bf --- /dev/null +++ b/server/web/src/design/GlobalStyle.tsx @@ -0,0 +1,52 @@ +import { createGlobalStyle } from 'styled-components'; + +// NOTE : rem unit is used instead of px. But +// the UI is still dependant on px units, mostly +// because of some javascript calculations +export const GlobalStyle = createGlobalStyle` + ::-webkit-scrollbar { + height: 0.2rem; + width: 0.4rem; + } + + ::-webkit-scrollbar-track { + background-color: rgb(5, 32, 58); + } + + ::-webkit-scrollbar-thumb { + background-color: rgb(31, 113, 145); + } + + ::placeholder { + text-transform: capitalize; + color: rgb(204, 204, 204); + opacity: 1; + } + + * { + box-sizing: border-box; + outline: none; + } + + body { + font-family: Arial, Helvetica, sans-serif; + background-color: rgb(5, 32, 58); + color: rgb(255, 255, 255); + font-size: 0.7rem; + font-weight: 100; + margin: 0; + } + + button, svg { + cursor: pointer; + } + + button { + transition: 150ms; + + :active { + transform: translateY(0.125rem); + transition: 150ms; + } + } +`; |