Add scss utilities

src/renderer/app.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { MantineProvider } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { Router } from './router/Router';
-import './App.scss';
+import './styles/global.scss';
 
 export const App = () => {
   const [theme] = useLocalStorage({

src/renderer/styles/base.scss

@@ -0,0 +1,2 @@
+@forward './mixins.scss';
+@forward './fonts.scss';

src/renderer/styles/global.scss

@@ -1,21 +1,21 @@
-@use 'themes/default.scss';
-@use 'themes/dark.scss';
+@use '../themes/default.scss';
+@use '../themes/dark.scss';
 
 * {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
 }
 
 body,
 html {
-  min-width: 640px;
-  display: block;
-  height: 100%;
-  width: 100%;
   position: absolute;
-  overflow-y: hidden;
+  display: block;
+  width: 100%;
+  min-width: 640px;
+  height: 100%;
   overflow-x: hidden;
+  overflow-y: hidden;
   color: var(--content-text-color);
   background: var(--content-bg);
 }

src/renderer/styles/mixins.scss

@@ -0,0 +1,37 @@
+@mixin hidden-text-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-center-column {
+  @include flex-center;
+  flex-direction: column;
+}
+
+@mixin flex-center-vertical {
+  display: flex;
+  align-items: center;
+}
+
+@mixin flex-center-horizontal {
+  display: flex;
+  justify-content: center;
+}
+
+@mixin cover-background {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}