diff --git a/packages/renderer/src/styles/global.scss b/packages/renderer/src/styles/global.scss index 8a25cbdd2..ef9b69dae 100644 --- a/packages/renderer/src/styles/global.scss +++ b/packages/renderer/src/styles/global.scss @@ -21,6 +21,7 @@ html { background: var(--content-bg); font-family: var(--content-font-family); font-size: var(--root-font-size); + user-select: none; } @media only screen and (max-width: 639px) { @@ -65,6 +66,31 @@ a { text-decoration: none; } +button { + -webkit-app-region: no-drag; +} + +.hide-scrollbar { + scrollbar-width: thin; + scrollbar-color: transparent transparent; + + &::-webkit-scrollbar { + width: 1px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: transparent; + } +} + +.hide-scrollbar::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + @font-face { font-family: "AnekTamil"; src: url("../fonts/AnekTamil-Regular.ttf") format("truetype"); @@ -75,11 +101,6 @@ a { src: url("../fonts/Archivo-Regular.ttf") format("truetype"); } -@font-face { - font-family: "Cormorant"; - src: url("../fonts/Cormorant-Regular.ttf") format("truetype"); -} - @font-face { font-family: "Circular STD"; src: url("../fonts/CircularSTD-Regular.ttf") format("truetype"); @@ -110,11 +131,6 @@ a { src: url("../fonts/Gotham-Regular.ttf") format("truetype"); } -@font-face { - font-family: "Hahmlet"; - src: url("../fonts/Hahmlet-Regular.ttf") format("truetype"); -} - @font-face { font-family: "Inconsolata"; src: url("../fonts/Inconsolata-Regular.ttf") format("truetype"); @@ -140,11 +156,6 @@ a { src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); } -@font-face { - font-family: "Oswald"; - src: url("../fonts/Oswald-Regular.ttf") format("truetype"); -} - @font-face { font-family: "Oxygen"; src: url("../fonts/Oxygen-Regular.ttf") format("truetype"); @@ -170,11 +181,6 @@ a { src: url("../fonts/Sora-Regular.ttf") format("truetype"); } -@font-face { - font-family: "Spectral"; - src: url("../fonts/Spectral-Regular.ttf") format("truetype"); -} - @font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Regular.ttf") format("truetype"); diff --git a/packages/renderer/src/themes/default.scss b/packages/renderer/src/themes/default.scss index 11324648c..fae5c0601 100644 --- a/packages/renderer/src/themes/default.scss +++ b/packages/renderer/src/themes/default.scss @@ -2,27 +2,27 @@ --root-font-size: 12px; --icon-color: rgb(255, 255, 255); - --primary-color: rgb(89, 141, 245); + --primary-color: rgb(5, 109, 255); --secondary-color: rgb(255, 120, 120); --success-color: green; --warning-color: orange; --danger-color: rgb(204, 50, 50); --generic-border-color: rgba(50, 50, 50, 0.7); - --main-bg: rgb(20, 21, 23); + --main-bg: rgb(18, 18, 18); --main-fg: rgb(245, 245, 245); --main-fg-secondary: rgb(150, 150, 150); --titlebar-fg: rgb(255, 255, 255); - --titlebar-bg: rgb(13, 14, 17); + --titlebar-bg: rgb(7, 7, 7); - --sidebar-bg: rgb(10, 12, 15); - --sidebar-btn-color: rgb(179, 179, 179); + --sidebar-bg: rgb(0, 0, 0); + --sidebar-btn-color: rgb(255, 255, 255); --sidebar-btn-color-hover: #dddddd; --sidebar-handle-bg: #4d4d4d; --sidebar-border: none; - --playerbar-bg: linear-gradient(rgb(20, 20, 20) 0%, rgb(30, 30, 30) 50%, rgb(20, 20, 20) 100%); + --playerbar-bg: rgb(24, 24, 24); --playerbar-btn-main-fg: rgb(0, 0, 0); --playerbar-btn-main-fg-hover: rgb(0, 0, 0); --playerbar-btn-main-bg: rgb(230, 230, 230); @@ -42,7 +42,7 @@ --scrollbar-thumb-bg: rgba(90, 90, 90, 0.5); --btn-primary-bg: var(--primary-color); - --btn-primary-bg-hover: rgb(31, 93, 216); + --btn-primary-bg-hover: rgb(51, 109, 255); --btn-primary-fg: #ffffff; --btn-primary-fg-hover: #ffffff; @@ -62,7 +62,7 @@ --input-active-fg: rgb(193, 193, 193); --input-active-bg: rgba(255, 255, 255, 0.1); - --dropdown-menu-bg: rgb(24, 24, 24); + --dropdown-menu-bg: rgba(24, 24, 24, 0.85); --dropdown-menu-fg: rgb(220, 220, 220); --dropdown-menu-bg-hover: rgb(37, 38, 43); --dropdown-menu-border: 1px rgba(50, 50, 50, 0.7) solid; @@ -81,7 +81,7 @@ --toast-description-fg: rgb(193, 194, 197); --toast-bg: rgb(16, 16, 16); - --modal-bg: rgb(24, 24, 24); + --modal-bg: rgba(24, 24, 24, 0.85); --paper-bg: rgb(30, 30, 30); @@ -90,7 +90,7 @@ --card-default-bg: rgb(24, 24, 24); --card-default-bg-hover: rgb(40, 40, 40); - --card-default-radius: 10px; + --card-default-radius: 5px; --card-poster-bg: transparent; --card-poster-bg-hover: transparent; --card-poster-radius: 3px; @@ -128,6 +128,7 @@ .mantine-Modal-modal { background: var(--modal-bg); border-radius: 10px; + backdrop-filter: blur(8px); } .mantine-Modal-header {