[Refactor] Tidy up the color variables.

This commit is contained in:
Sakamoto Shiina
2025-01-02 19:22:09 +09:00
parent d798562de7
commit 5d0e9e0559
28 changed files with 30 additions and 110 deletions

View File

@@ -16,7 +16,6 @@
height: 100%;
font-size: 1.4rem;
resize: none;
color: var(--dark_basic_text_color);
&.is_disabled {
color: var(--dark_500_color);
pointer-events: none;

View File

@@ -22,11 +22,11 @@
bottom: 0;
left: 0;
border-radius: 0.4rem;
background-color: (#00000044);
background-color: var(--dark_1000_color_66);
backdrop-filter: blur(4rem);
border: solid 0.1rem var(--dark_700_color);
&:hover {
background-color: (#00000088);
background-color: var(--dark_1000_color_aa);
}
&:active {
backdrop-filter: blur(1.4rem);
@@ -35,7 +35,6 @@
.edit_button {
padding: 0.8rem 1.2rem;
color: var(--dark_basic_text_color);
height: 100%;
width: 100%;
font-size: 1.4rem;
@@ -62,7 +61,6 @@
}
.save_button_label {
color: var(--dark_basic_text_color);
font-size: 1.4rem;
}
@@ -91,7 +89,6 @@
.open_webpage_text {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}
.external_link_svg {

View File

@@ -1,12 +1,10 @@
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import CircularProgress from "@mui/material/CircularProgress";
import styles from "./DownloadModels.module.scss";
import {
RadioButton,
// DownloadModels,
} from "../index";
export const DownloadModels = (props) => {
const options = props.options.map(item => ({
...item,
@@ -25,25 +23,11 @@ export const DownloadModels = (props) => {
downloadStartFunction={props.downloadStartFunction}
/>
</>
// <div className={styles.container}>
// {props.models.map((option) => (
// <ModelSelector key={option.model_id} option={option} {...props}/>
// ))}
// </div>
);
};
const ModelSelector = ({option, ...props}) => {
const { t } = useTranslation();
const [circular_color, setCircularColor] = useState("");
const [circular_color_2, setCircularColor2] = useState("");
useEffect(() => {
const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--dark_600_color");
setCircularColor(circular_color.trim());
const circular_color_2 = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
setCircularColor2(circular_color_2.trim());
}, []);
const renderContent = () => {
const circular_progress = Math.floor(option.progress / 10) * 10;
@@ -56,13 +40,13 @@ const ModelSelector = ({option, ...props}) => {
variant={(option.progress === 100) ? "indeterminate" : "determinate"}
value={circular_progress}
size="3rem"
sx={{ color: circular_color_2 }}
sx={{ color: "var(--primary_300_color)" }}
/>
<p className={styles.progress_label}>{`${Math.round(option.progress)}%`}</p>
</>
);
case option.is_pending:
return <CircularProgress size="3rem" sx={{ color: circular_color }}/>;
return <CircularProgress size="3rem" sx={{ color: "var(--dark_600_color)" }}/>;
case !option.is_downloaded:
return (
<button

View File

@@ -22,11 +22,9 @@
}
.download_button_label {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}
.progress_label {
position: absolute;
font-size: 1rem;
color: var(--dark_basic_text_color);
}

View File

@@ -8,7 +8,6 @@
.label {
font-size: 1.6rem;
font-weight: 400;
color: var(--dark_basic_text_color);
white-space: nowrap;
width: max-content;
}

View File

@@ -31,13 +31,6 @@ export const Slider = (props) => {
backgroundColor: "var(--dark_800_color)",
padding: "0.6rem 1rem",
lineHeight: "1.15",
// top: "-1.4rem",
// "&::before": {
// left: "30%",
// width: "1rem",
// height: "1rem",
// clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
// },
},
},
"& .MuiSlider-markLabel": {

View File

@@ -16,7 +16,6 @@
height: 100%;
font-size: 1.4rem;
resize: none;
color: var(--dark_basic_text_color);
&.is_disable {
color: var(--dark_500_color);
pointer-events: none;

View File

@@ -41,5 +41,4 @@
.button_text {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}

View File

@@ -32,7 +32,6 @@
.item_text {
font-size: 1.4rem;
font-weight: 300;
color: var(--dark_basic_text_color);
&.is_redoable {
text-decoration: line-through;
}
@@ -56,7 +55,7 @@
.delete_svg {
width: 2.4rem;
color: #bb4448;
color: var(--error_bc_color);
}
.redo_svg {
@@ -77,7 +76,6 @@
.add_button {
padding: 0.8rem 1.2rem;
background-color: var(--primary_600_color);
color: var(--dark_basic_text_color);
font-size: 1.4rem;
border-radius: 0.4rem;
text-align: center;

View File

@@ -61,7 +61,6 @@
.device_label {
font-size: 1.8rem;
color: var(--dark_basic_text_color);
}
.device_contents {

View File

@@ -39,7 +39,7 @@
background-color: var(--dark_850_color);
}
&.is_selected .controller_switcher_label {
color: var(--dark_basic_text_color);
color: var(--dark_200_color);
}
}
.controller_switcher_label {
@@ -92,7 +92,6 @@
transform: translateX(10%) rotate(90deg);
}
.sample_text_button_label {
color: var(--dark_basic_text_color);
position: absolute;
left: 50%;
top: 110%;
@@ -281,7 +280,6 @@
}
.restore_default_settings_button {
color: var(--dark_basic_text_color);
font-size: 1.2rem;
margin-top: 6rem;
padding: 0.8rem;