mirror of
https://github.com/zkldi/Tachi.git
synced 2026-10-12 09:18:25 +03:00
fix: scss refactor
This commit is contained in:
zkldi
@@ -212,3 +212,5 @@
|
||||
.MuiTabs-scrollButtons.Mui-disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@import "tachi-custom/custom", "tachi-custom/hero", "tachi-custom/splash-screen";
|
||||
@@ -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!
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user