mirror of
https://github.com/antebudimir/feishin.git
synced 2026-03-02 04:07:25 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
Jeff
GitHub
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -2,10 +2,8 @@
|
|||
position: fixed !important;
|
||||
top: 65px;
|
||||
z-index: 15;
|
||||
background: var(--table-header-bg) !important;
|
||||
margin: 0 -2rem;
|
||||
padding: 0 2rem;
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
margin: 0 -2rem;
|
||||
box-shadow: 0 -1px 0 0 #181818;
|
||||
transition: position 0.2s ease-in-out;
|
||||
}
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
}
|
||||
|
||||
.ag-header-transparent {
|
||||
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
|
||||
--ag-header-background-color: rgb(0 0 0 / 0%) !important;
|
||||
}
|
||||
|
||||
.ag-header-fixed-margin {
|
||||
|
|
@ -36,8 +34,8 @@
|
|||
|
||||
.ag-header-cell,
|
||||
.ag-header-group-cell {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.ag-header-cell-resize {
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@forward './mixins.scss';
|
||||
@forward './fonts.scss';
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { css } from 'styled-components';
|
||||
|
||||
export enum Font {
|
||||
EPILOGUE = 'Epilogue',
|
||||
GOTHAM = 'Gotham',
|
||||
INTER = 'Inter',
|
||||
POPPINS = 'Poppins',
|
||||
}
|
||||
|
||||
export const fontGotham = (weight?: number) => css`
|
||||
font-weight: ${weight || 400};
|
||||
font-family: Gotham, sans-serif;
|
||||
`;
|
||||
|
||||
export const fontPoppins = (weight?: number) => css`
|
||||
font-weight: ${weight || 400};
|
||||
font-family: Poppins, sans-serif;
|
||||
`;
|
||||
|
||||
export const fontInter = (weight?: number) => css`
|
||||
font-weight: ${weight || 400};
|
||||
font-family: Inter, sans-serif;
|
||||
`;
|
||||
|
||||
export const fontEpilogue = (weight?: number) => css`
|
||||
font-weight: ${weight || 400};
|
||||
font-family: Epilogue, sans-serif;
|
||||
`;
|
||||
|
||||
export const fontRoboto = (weight?: number) => css`
|
||||
font-weight: ${weight || 400};
|
||||
font-family: Roboto, sans-serif;
|
||||
`;
|
||||
395
src/renderer/styles/global.css
Normal file
395
src/renderer/styles/global.css
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
@import url('./ag-grid.css');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
|
||||
text-size-adjust: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-content-font-family);
|
||||
font-size: var(--theme-root-font-size);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--theme-colors-foreground);
|
||||
background: var(--theme-colors-background);
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
@media only screen and (width < 640px) {
|
||||
body,
|
||||
html {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--theme-scrollbar-track-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--theme-scrollbar-track-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--theme-scrollbar-handle-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--theme-scrollbar-handle-hover-background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Archivo;
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fredoka;
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/Fredoka-VariableFont_wdth,wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'League Spartan';
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lexend;
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Sora;
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/Sora-VariableFont_wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/Poppins-Regular.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/Poppins-Bold.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Poppins;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('../fonts/Poppins-Black.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
font-weight: 100 1000;
|
||||
src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: DroidSerif;
|
||||
src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf')
|
||||
format('truetype');
|
||||
unicode-range: U+000-5FF; /* Latin glyphs */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: DroidSerif;
|
||||
src: url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2')
|
||||
format('truetype');
|
||||
unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
|
||||
}
|
||||
|
||||
:root {
|
||||
--theme-background-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=');
|
||||
--theme-fullscreen-player-text-shadow: black 0px 0px 10px;
|
||||
--theme-font-size-xs: var(--mantine-font-size-xs);
|
||||
--theme-font-size-sm: var(--mantine-font-size-sm);
|
||||
--theme-font-size-md: var(--mantine-font-size-md);
|
||||
--theme-font-size-lg: var(--mantine-font-size-lg);
|
||||
--theme-font-size-xl: var(--mantine-font-size-xl);
|
||||
--theme-font-size-2xl: var(--mantine-font-size-2xl);
|
||||
--theme-font-size-3xl: var(--mantine-font-size-3xl);
|
||||
--theme-font-size-4xl: var(--mantine-font-size-4xl);
|
||||
--theme-font-size-5xl: var(--mantine-font-size-5xl);
|
||||
--theme-breakpoint-xs: var(--mantine-breakpoint-xs);
|
||||
--theme-breakpoint-sm: var(--mantine-breakpoint-sm);
|
||||
--theme-breakpoint-md: var(--mantine-breakpoint-md);
|
||||
--theme-breakpoint-lg: var(--mantine-breakpoint-lg);
|
||||
--theme-breakpoint-xl: var(--mantine-breakpoint-xl);
|
||||
--theme-breakpoint-2xl: var(--mantine-breakpoint-2xl);
|
||||
--theme-breakpoint-3xl: var(--mantine-breakpoint-3xl);
|
||||
--theme-spacing-xs: var(--mantine-spacing-xs);
|
||||
--theme-spacing-sm: var(--mantine-spacing-sm);
|
||||
--theme-spacing-md: var(--mantine-spacing-md);
|
||||
--theme-spacing-lg: var(--mantine-spacing-lg);
|
||||
--theme-spacing-xl: var(--mantine-spacing-xl);
|
||||
--theme-spacing-2xl: var(--mantine-spacing-2xl);
|
||||
--theme-spacing-3xl: var(--mantine-spacing-3xl);
|
||||
--theme-spacing-4xl: var(--mantine-spacing-4xl);
|
||||
--theme-shadow-xs: var(--mantine-shadow-xs);
|
||||
--theme-shadow-sm: var(--mantine-shadow-sm);
|
||||
--theme-shadow-md: var(--mantine-shadow-md);
|
||||
--theme-shadow-lg: var(--mantine-shadow-lg);
|
||||
--theme-shadow-xl: var(--mantine-shadow-xl);
|
||||
--theme-radius-xs: var(--mantine-radius-xs);
|
||||
--theme-radius-sm: var(--mantine-radius-sm);
|
||||
--theme-radius-md: var(--mantine-radius-md);
|
||||
--theme-radius-lg: var(--mantine-radius-lg);
|
||||
--theme-radius-xl: var(--mantine-radius-xl);
|
||||
--theme-line-height-xs: var(--mantine-line-height-xs);
|
||||
--theme-line-height-sm: var(--mantine-line-height-sm);
|
||||
--theme-line-height-md: var(--mantine-line-height-md);
|
||||
--theme-line-height-lg: var(--mantine-line-height-lg);
|
||||
--theme-line-height-xl: var(--mantine-line-height-xl);
|
||||
--theme-colors-dark-1: var(--mantine-color-dark-1);
|
||||
--theme-colors-dark-2: var(--mantine-color-dark-2);
|
||||
--theme-colors-dark-3: var(--mantine-color-dark-3);
|
||||
--theme-colors-dark-4: var(--mantine-color-dark-4);
|
||||
--theme-colors-dark-5: var(--mantine-color-dark-5);
|
||||
--theme-colors-dark-6: var(--mantine-color-dark-6);
|
||||
--theme-colors-dark-7: var(--mantine-color-dark-7);
|
||||
--theme-colors-dark-8: var(--mantine-color-dark-8);
|
||||
--theme-colors-dark-9: var(--mantine-color-dark-9);
|
||||
--theme-colors-dark-10: var(--mantine-color-dark-10);
|
||||
--theme-colors-light-1: var(--mantine-color-light-1);
|
||||
--theme-colors-light-2: var(--mantine-color-light-2);
|
||||
--theme-colors-light-3: var(--mantine-color-light-3);
|
||||
--theme-colors-light-4: var(--mantine-color-light-4);
|
||||
--theme-colors-light-5: var(--mantine-color-light-5);
|
||||
--theme-colors-light-6: var(--mantine-color-light-6);
|
||||
--theme-colors-light-7: var(--mantine-color-light-7);
|
||||
--theme-colors-light-8: var(--mantine-color-light-8);
|
||||
--theme-colors-light-9: var(--mantine-color-light-9);
|
||||
--theme-colors-light-10: var(--mantine-color-light-10);
|
||||
--theme-colors-background: var(--mantine-color-body);
|
||||
--theme-colors-foreground: var(--mantine-color-text);
|
||||
--theme-colors-primary-filled: var(--mantine-primary-color-filled);
|
||||
--theme-colors-primary-contrast: var(--mantine-primary-color-contrast);
|
||||
|
||||
@mixin light-root {
|
||||
--theme-colors-border: rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
@mixin dark-root {
|
||||
--theme-colors-border: rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
.ag-theme-alpine-dark {
|
||||
--ag-font-family: var(--theme-content-font-family);
|
||||
--ag-borders: none;
|
||||
--ag-border-color: var(--theme-colors-border);
|
||||
--ag-header-background-color: var(--theme-colors-background);
|
||||
--ag-header-foreground-color: var(--theme-colors-foreground);
|
||||
--ag-background-color: var(--theme-colors-background);
|
||||
--ag-odd-row-background-color: var(--theme-colors-background);
|
||||
--ag-foreground-color: var(--theme-colors-foreground);
|
||||
--ag-cell-horizontal-padding: var(--theme-spacing-sm);
|
||||
--ag-row-hover-color: lighten(var(--theme-colors-background), 5%);
|
||||
--ag-selected-row-background-color: lighten(var(--theme-colors-background), 10%);
|
||||
--ag-header-column-resize-handle-width: 0;
|
||||
}
|
||||
|
||||
.ag-header {
|
||||
border-bottom: 2px solid var(--theme-colors-border);
|
||||
}
|
||||
|
||||
.ag-ltr .ag-header-cell-resize {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ag-header:hover .ag-header-cell-resize {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
width: 0.2em;
|
||||
height: 50%;
|
||||
border: 1px var(--theme-colors-border) solid;
|
||||
}
|
||||
|
||||
.ag-header-cell-label {
|
||||
font-family: var(--theme-content-font-family);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ag-cell-rating,
|
||||
.ag-cell-favorite {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ag-cell-transparent {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ag-cell-rating.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ag-cell-favorite.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ag-row-hover {
|
||||
.ag-cell-transparent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ag-cell-rating,
|
||||
.ag-cell-favorite {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ag-cell-focus {
|
||||
border: 1px var(--theme-colors-border) solid !important;
|
||||
}
|
||||
|
||||
@mixin dark-root {
|
||||
.current-song {
|
||||
.current-song-child {
|
||||
font-weight: 500;
|
||||
color: var(--theme-colors-primary-filled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin light-root {
|
||||
.current-song {
|
||||
.current-song-child {
|
||||
font-weight: 500;
|
||||
color: var(--theme-colors-primary-filled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.current-song > .row-index.playing .current-song-index {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,217 +0,0 @@
|
|||
@use '../themes/default.scss';
|
||||
@use '../themes/dark.scss';
|
||||
@use '../themes/light.scss';
|
||||
@use './ag-grid.scss';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
color: var(--content-text-color);
|
||||
background: var(--content-bg);
|
||||
font-family: var(--content-font-family);
|
||||
font-size: var(--root-font-size);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 639px) {
|
||||
body,
|
||||
html {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--scrollbar-track-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-bg-hover);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mantine-ScrollArea-thumb[data-state='visible'] {
|
||||
animation: fadeIn 0.3s forwards;
|
||||
}
|
||||
|
||||
.mantine-ScrollArea-scrollbar[data-state='hidden'] {
|
||||
animation: fadeOut 0.2s forwards;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Archivo';
|
||||
src: url('../fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fredoka';
|
||||
src: url('../fonts/Fredoka-VariableFont_wdth,wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'League Spartan';
|
||||
src: url('../fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lexend';
|
||||
src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Sora';
|
||||
src: url('../fonts/Sora-VariableFont_wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/Poppins-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/Poppins-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url('../fonts/Poppins-Black.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
|
||||
font-weight: 100 1000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DroidSerif';
|
||||
src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf')
|
||||
format('truetype');
|
||||
unicode-range: U+000-5FF; /* Latin glyphs */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'DroidSerif';
|
||||
src: url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2') format('truetype');
|
||||
unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './fonts';
|
||||
export * from './mixins';
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import { css } from 'styled-components';
|
||||
|
||||
export const textEllipsis = css`
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
export const flexBetween = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
export const flexCenter = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
export const flexCenterColumn = css`
|
||||
${flexCenter}
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const coverBackground = css`
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
`;
|
||||
|
||||
export const fadeIn = css`
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const rotating = css`
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -3,11 +3,9 @@
|
|||
--os-handle-bg: var(--scrollbar-thumb-bg);
|
||||
--os-handle-bg-hover: var(--scrollbar-thumb-bg-hover);
|
||||
--os-handle-bg-active: var(--scrollbar-thumb-bg-hover);
|
||||
|
||||
--os-track-bg: var(--scrollbar-track-bg);
|
||||
--os-track-bg-hover: var(--scrollbar-track-bg);
|
||||
--os-track-bg-active: var(--scrollbar-track-bg);
|
||||
|
||||
--os-padding-perpendicular: 0;
|
||||
--os-padding-axis: 0;
|
||||
--os-track-border-radius: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue