From 8639558d606beba343c4097a8bcaebe1d2b29c18 Mon Sep 17 00:00:00 2001 From: zkldi <20380519+zkldi@users.noreply.github.com> Date: Wed, 22 Mar 2023 23:43:35 +0000 Subject: [PATCH] fix: scss refactor --- client/src/_style/base.scss | 2 + client/src/_style/stub.scss | 7 + client/src/_style/tachi-custom/_custom.scss | 178 ++++++++++++++++++ client/src/_style/tachi-custom/_hero.scss | 43 +++++ .../_style/tachi-custom/_splash-screen.scss | 60 ++++++ client/src/index.tsx | 2 +- client/vite.config.js | 6 +- 7 files changed, 294 insertions(+), 4 deletions(-) create mode 100644 client/src/_style/stub.scss create mode 100644 client/src/_style/tachi-custom/_custom.scss create mode 100644 client/src/_style/tachi-custom/_hero.scss create mode 100644 client/src/_style/tachi-custom/_splash-screen.scss diff --git a/client/src/_style/base.scss b/client/src/_style/base.scss index 65c22635e..e8c41fc99 100644 --- a/client/src/_style/base.scss +++ b/client/src/_style/base.scss @@ -212,3 +212,5 @@ .MuiTabs-scrollButtons.Mui-disabled { opacity: 0.3; } + +@import "tachi-custom/custom", "tachi-custom/hero", "tachi-custom/splash-screen"; \ No newline at end of file diff --git a/client/src/_style/stub.scss b/client/src/_style/stub.scss new file mode 100644 index 000000000..c4f67193d --- /dev/null +++ b/client/src/_style/stub.scss @@ -0,0 +1,7 @@ +// This is an empty scss file. +// You might wonder why we import it. +// Well, our "entry point" to our scss is dynamic +// and depends on additionalData (see vite.config.js). +// However, the SCSS loader will not bother with that additionalData +// if it finds no SCSS files to load. This 'empty' file actually +// determines whether we render any CSS at all. Fun! \ No newline at end of file diff --git a/client/src/_style/tachi-custom/_custom.scss b/client/src/_style/tachi-custom/_custom.scss new file mode 100644 index 000000000..0a06ab25c --- /dev/null +++ b/client/src/_style/tachi-custom/_custom.scss @@ -0,0 +1,178 @@ +.card-nav-icon { + color: #999; + transition: 100ms; + + &:hover { + color: $tachi-primary !important; + } +} + +.stat-overview-card { + box-shadow: black 0px 0px 2px 1px; +} + +.card-dark { + background-color: #1c1c1c; + + > .card-header { + background-color: #1c1c1c; + } + > .card-footer { + background-color: #1c1c1c; + } +} + +.fake-row { + td { + padding: 0 !important; + border-top: none; + } +} + +.tr-dropdown-container { + padding: 4px; + border-top: 1px solid $table-border-color; + background-color: $tachi-background; + + &.collapsing { + border-bottom: 1px solid $table-border-color; + } +} + +.gentle-link { + color: white; + + &:hover { + color: $tachi-primary; + } +} + +@include media-breakpoint-down(sm) { + #kt_content { + padding-top: 55px; + } + + .background-image { + top: 55px; + } +} + +@include media-breakpoint-up(md) { + #kt_content { + padding-top: 80px; + } + + .background-image { + top: 80px; + } +} + +.highlighted-row { + td { + background-color: rgba($color: $tachi-primary, $alpha: 0.1); + } +} + +.nav-link { + &:hover { + background-color: unset !important; + } +} + +.text-monospace { + font-family: monospace; +} + +.modal { + .form-control { + background-color: $tachi-overground; + } +} + +.ladder-header { + background-color: #2b292b; + font-size: x-large; + vertical-align: middle; + padding-top: 0.25rem; + padding-bottom: 0.5rem; + font-weight: bold; + outline: solid 1px black; + margin-top: 2rem; +} + +.ladder-element { + background-color: #1c1c1c; + vertical-align: middle; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + outline: solid 1px black; +} + +.ladder-element-dark { + background-color: #131313; +} + +.ladder-element-achieved { + background-color: rgba(50, 205, 50, 0.2); +} + +.ladder-element-unachieved { + background-color: rgba(170, 85, 85, 0.2); +} + +.timeline-element { + background-color: #1c1c1c; + border-radius: 1rem; + padding: 1rem; + margin-top: 1rem; +} + +.custom-switch { + padding: 0 !important; +} + +.instructions-list { + font-size: 1.2rem; +} + +.instructions-list > li { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.scoreinfo-grid-minimap { + display: grid; + grid-template-columns: repeat(auto-fill, 30px); + row-gap: 5px; + column-gap: 2px; + justify-items: center; +} + +.scoreinfo-grid-minimap-element { + width: 20px; + height: 20px; + outline: 1px black solid; + display: flex; + justify-content: center; + align-content: center; + text-align: center; + color: white; + font-weight: 900; +} + +.scoreinfo-grid-minimap-element-recent { + box-shadow: inset 0px 0px 5px goldenrod; +} + +.privacy-policy > h2 { + margin-top: 1rem; +} + +.breakdown-hover-row:hover .breakdown-hover-highlight-button { + opacity: 1; +} + +.breakdown-hover-highlight-button { + transition: opacity 0.3s; + opacity: 0; +} diff --git a/client/src/_style/tachi-custom/_hero.scss b/client/src/_style/tachi-custom/_hero.scss new file mode 100644 index 000000000..e532a6c34 --- /dev/null +++ b/client/src/_style/tachi-custom/_hero.scss @@ -0,0 +1,43 @@ +.landing-page { + .hero { + width: 100vw; + height: 100vh; + + .hero-bg-image { + width: 100vw; + height: 100vh; + z-index: 1; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + position: absolute; + } + + .hero-bg-fader { + width: 100vw; + height: 100vh; + z-index: 2; + opacity: 0.75; + position: absolute; + } + + .hero-content-wrapper { + width: 100vw; + height: 100vh; + z-index: 3; + position: absolute; + } + + .hero-content-wrapper > .row { + height: calc(100vh - 150px); + } + + @media only screen and (max-width: 600px) { + .hero-content-wrapper > .row { + height: calc(100vh - 80px); + } + } + + + } +} diff --git a/client/src/_style/tachi-custom/_splash-screen.scss b/client/src/_style/tachi-custom/_splash-screen.scss new file mode 100644 index 000000000..b4d949fc9 --- /dev/null +++ b/client/src/_style/tachi-custom/_splash-screen.scss @@ -0,0 +1,60 @@ +body { + margin: 0; + padding: 0; +} + +#splash-screen { + position: absolute; + z-index: 1000; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-color: #131313; +} + +#splash-screen img { + margin-left: calc(100vw - 100%); + margin-bottom: 30px; +} + +#splash-screen.hidden { + opacity: 0; + visibility: hidden; +} + +.splash-spinner { + animation: rotate 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; + margin-left: calc(100vw - 100%); + width: 50px; + height: 50px; +} + +.splash-spinner .path { + stroke: #e61c6e; + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} diff --git a/client/src/index.tsx b/client/src/index.tsx index 382511b1e..3ba31e21c 100644 --- a/client/src/index.tsx +++ b/client/src/index.tsx @@ -1,7 +1,7 @@ import "@fortawesome/fontawesome-free/css/all.min.css"; import React from "react"; import ReactDOM from "react-dom"; -import "./_style/base.scss"; +import "./_style/stub.scss"; import "./_assets/flaticon/flaticon.css"; import "./_assets/flaticon2/flaticon.css"; import "./_assets/keenthemes-icons/font/ki.css"; diff --git a/client/vite.config.js b/client/vite.config.js index b7a0acf9c..ce752f7df 100644 --- a/client/vite.config.js +++ b/client/vite.config.js @@ -44,11 +44,11 @@ export default defineConfig(() => { // If you have access to the private metronic scss submodule // and have cloned it, use that. - if (fs.existsSync(path.join(__dirname, "../_assets/metronic-scss/style.react.scss"))) { - scssEntryPoint = "../_assets/metronic-scss/style.react.scss"; + if (fs.existsSync(path.join(__dirname, "./src/_assets/metronic-scss/style.react.scss"))) { + scssEntryPoint = "./src/_assets/metronic-scss/style.react.scss"; } else { // Else, use some default compiled css. - scssEntryPoint = "../_assets/compiled-css/main.css"; + scssEntryPoint = './src/_assets/compiled-css/main.css";@import "./src/_style/base.scss'; } return {