daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-07 10:31:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

new color theme

Browse Source
This commit is contained in:
BFlat committed 2022-10-19 08:07:07 +07:00
1 parent d81e01d984
commit 895a254174
6 files changed
+159 -218
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou/src/AppNew.scss
+7 -156
View File
@@ -31,16 +31,7 @@ $headings-font-family: "Merriweather", serif;
}
.bg-gradient {
background: rgb(13, 16, 25) !important;
background: linear-gradient(
325deg,
rgba(13, 16, 25, 1) 0%,
rgba(42, 21, 34, 1) 55%,
rgba(16, 14, 26, 1) 100%
) !important;
background-repeat: no-repeat;
background-attachment: fixed;
background: $bg !important;
}
// Style for user text input that overflows
@@ -139,148 +130,6 @@ $headings-font-family: "Merriweather", serif;
width: 1px;
}
}
&.dark-mode {
&.bg-gradient {
background: darken(rgb(13, 16, 25), 2%) !important;
background: linear-gradient(
325deg,
darken(rgba(13, 16, 25, 1), 2%) 0%,
darken(rgba(42, 21, 34, 1), 3%) 55%,
darken(rgba(16, 14, 26, 1), 2%) 100%
) !important;
background-repeat: no-repeat;
background-attachment: fixed;
}
.nav-bg-dark {
background-color: darken(#17101c, 2%);
}
.top-bar {
background-color: rgba($white, 0.05);
}
.panel {
background-color: rgba($white, 0.05);
}
select {
border-color: $input-dark !important;
background-color: $input-dark !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.btn-destructive {
background-color: #ffcfce !important;
}
.video-card-title,
.video-card-text {
color: $white !important;
}
textarea {
background-color: $input-dark !important;
border-color: $input-dark !important;
color: $white;
}
.form-select {
color: $white;
}
::placeholder {
color: $white !important;
}
.input-icon .form-control-feedback {
color: $white !important;
}
input {
background-color: $input-dark !important;
border-color: $input-dark !important;
color: $white;
}
.btn-secondary {
color: $white !important;
border-color: #974e4c;
background-color: #974e4c;
&:hover {
border-color: lighten(#974e4c, 6%);
background-color: lighten(#974e4c, 6%);
}
}
.btn-destructive {
background-color: #6d353b !important;
border-color: #6d353b;
color: $white;
&:hover {
border-color: lighten(#6d353b, 6%);
background-color: lighten(#6d353b, 6%) !important;
}
}
.btn-inform svg {
filter: invert(98%) sepia(2%) saturate(0%) hue-rotate(196deg)
brightness(200%) contrast(103%);
}
.dropdown-menu {
background-color: #281b25;
}
.dropdown-item {
color: $white;
&:hover {
background-color: lighten(#271e25, 8%);
}
&:focus {
background-color: lighten(#271e25, 8%);
}
&:active {
background-color: $primary;
}
}
.menu-item {
color: $white;
background-color: $input-dark;
border-bottom: 1px solid;
border-color: rgba($white, 0.05);
&:hover {
background-color: lighten($input-dark, 10%);
}
&:last-child {
border-bottom: none;
}
}
.form-control::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba($white, 0.5) !important;
opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgba($white, 0.5) !important;
}
.form-control::-ms-input-placeholder {
/* Microsoft Edge */
color: rgba($white, 0.5) !important;
}
}
}
$footer-height: 2rem;
@@ -345,23 +194,25 @@ $headings-font-family: "Merriweather", serif;
font-size: 15px;
font-weight: 600;
padding: 0.5rem 1rem;
color: $secondary;
color: $white;
&:hover {
color: $secondary;
color: $white;
background-color: $secondary;
}
&:focus {
background-color: $white;
background-color: $secondary;
}
&:active {
background-color: $primary;
background-color: lighten($secondary, 10%);
color: $white;
}
}
.dropdown-menu {
background-color: $panel;
border-color: rgba($white, 0.12) !important;
border: 1px solid;
border-radius: 8px;
packages/fakeyou/src/scss/CSSParticles.scss
+1 -1
View File
@@ -1,6 +1,6 @@
/* Config */
$color-bg: #000000;
$color-particle: rgba(255, 255, 255, 0.05);
$color-particle: rgba(255, 255, 255, 0.04);
$spacing: 2560px;
$time-1: 120s;
$time-2: 240s;
packages/fakeyou/src/scss/colours.scss
+8 -3
View File
@@ -1,10 +1,15 @@
// Default colours
$primary: #fc6b68;
$secondary: #212529;
$input-dark: darken(#55434e, 7%);
$secondary: #3c3c49;
$bg: #1c1c25;
$panel: #272731;
$input: #3c3c49;
$input-placeholder: #aeaeb3;
$danger: #8f4951;
$input-dark: #3c3c49;
$info: #252d43;
$success: #40ad48;
$danger: #e51c23;
$warning: darken(#f7941c, 5%);
$accent: #80cfd3;
$workflow: $primary;
packages/fakeyou/src/scss/site-refresh.scss
+67 -18
View File
@@ -159,42 +159,42 @@ styles with important tags:
.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active {
background-color: $white;
color: $secondary;
background-color: $secondary;
color: $white;
border: 2.5px solid;
border-color: $white;
border-color: $secondary;
transition: 0.2s;
}
.btn-secondary:hover {
background-color: #ccc;
color: $secondary;
background-color: lighten($secondary, 5%) !important;
color: $white;
border: 2.5px solid;
border-color: #ccc;
border-color: lighten($secondary, 5%) !important;
}
.btn-secondary.disabled,
.btn-secondary:disabled {
color: rgba($secondary, 0.8);
background-color: #fff;
border-color: #fff;
color: $white;
background-color: lighten($secondary, 5%) !important;
border-color: lighten($secondary, 5%) !important;
}
.btn-destructive,
.btn-destructive:focus,
.btn-destructive:active {
background-color: #fff;
color: #fc6b68;
background-color: $danger;
color: $white;
border: 2.5px solid;
border-color: #fff;
border-color: $danger;
transition: 0.2s;
}
.btn-destructive:hover {
background-color: #fdcfce;
color: #fc6b68;
background-color: lighten($danger, 5%) !important;
color: $white;
border: 2.5px solid;
border-color: #fdcfce;
border-color: lighten($danger, 5%) !important;
}
.btn-inform {
@@ -208,11 +208,10 @@ styles with important tags:
.panel {
position: relative;
width: 100%;
background-color: rgba($white, 0.1);
background-color: $panel;
border-color: #ffffff12 !important;
border: 1px solid;
border-radius: 0px;
backdrop-filter: blur(5px);
.panel-title {
position: static;
@@ -555,6 +554,57 @@ styles with important tags:
}
}
select {
border-color: $input-dark !important;
background-color: $input-dark !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.btn-destructive {
background-color: $danger !important;
}
.video-card-title,
.video-card-text {
color: $white !important;
}
textarea {
background-color: $input-dark !important;
border-color: $input-dark !important;
color: $white !important;
}
.form-select {
color: $white !important;
}
.form-control::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba($white, 0.5) !important;
opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgba($white, 0.5) !important;
}
.form-control::-ms-input-placeholder {
/* Microsoft Edge */
color: rgba($white, 0.5) !important;
}
.input-icon .form-control-feedback {
color: $white !important;
}
input {
background-color: $input !important;
border-color: $input !important;
color: $white !important;
}
@media (min-width: 992px) {
.fakeyou-refresh {
.panel {
@@ -594,7 +644,6 @@ styles with important tags:
margin-left: auto;
max-width: 1080px;
border-radius: 8px;
backdrop-filter: blur(5px);
}
.panel {
packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+75 -39
View File
@@ -46,12 +46,12 @@ interface Props {
}
function NewTopNavFc(props: Props) {
const defaultColourView = window.localStorage.getItem("darkMode");
// const defaultColourView = window.localStorage.getItem("darkMode");
const defaultLowSpecView = window.localStorage.getItem("lowSpec");
const [darkModes, toggleDarkModes] = useState(
defaultColourView === "false" ? true : false
);
// const [darkModes, toggleDarkModes] = useState(
// defaultColourView === "false" ? true : false
// );
const [lowSpecView, toggleLowSpecs] = useState(
defaultLowSpecView === "false" ? true : false
@@ -92,11 +92,11 @@ function NewTopNavFc(props: Props) {
return () => clearInterval(interval);
}, [pendingTtsJobs]);
const toggleDarkMode = () => {
window.localStorage.setItem("darkMode", darkModes ? "true" : "false");
// const toggleDarkMode = () => {
// window.localStorage.setItem("darkMode", darkModes ? "true" : "false");
toggleDarkModes(!darkModes);
};
// toggleDarkModes(!darkModes);
// };
const toggleLowSpec = () => {
window.localStorage.setItem("lowSpec", lowSpecView ? "true" : "false");
@@ -128,8 +128,8 @@ function NewTopNavFc(props: Props) {
useEffect(() => {
// Logic for dark mode toggle
if (darkModes) document.getElementById("main")!.classList.add("dark-mode");
else document.getElementById("main")!.classList.remove("dark-mode");
// if (darkModes) document.getElementById("main")!.classList.add("dark-mode");
// else document.getElementById("main")!.classList.remove("dark-mode");
// Logic for the animation toggle
if (lowSpecView) document.getElementById("main")!.classList.add("low-spec");
@@ -226,9 +226,10 @@ function NewTopNavFc(props: Props) {
Online Users: <span className="fw-bold text-red">1,204</span>
</p> */}
<Tippy
content={`${darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
}`}
{/* <Tippy
content={`${
darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
}`}
>
<button
className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
@@ -236,13 +237,14 @@ function NewTopNavFc(props: Props) {
>
<FontAwesomeIcon icon={darkModes ? faSun : faMoon} />
</button>
</Tippy>
</Tippy> */}
<Tippy
content={`${lowSpecView ? "Turn on animations" : "Turn off animations"
}`}
content={`${
lowSpecView ? "Turn on animations" : "Turn off animations"
}`}
>
<button
className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
className="btn btn-toggle"
onClick={() => toggleLowSpec()}
>
<FontAwesomeIcon
@@ -370,42 +372,64 @@ function NewTopNavFc(props: Props) {
aria-labelledby="offcanvasNavbarLgDropdown-community"
>
<li data-bs-toggle="offcanvas">
<Link className="dropdown-item" to="/contribute" title="to Upload page">
<Link
className="dropdown-item"
to="/contribute"
title="to Upload page"
>
<FontAwesomeIcon icon={faUpload} className="me-2" />
Contribute/Upload
</Link>
</li>
<li data-bs-toggle="offcanvas">
<Link className="dropdown-item" to="/leaderboard" title="to leaderboard">
<Link
className="dropdown-item"
to="/leaderboard"
title="to leaderboard"
>
<FontAwesomeIcon icon={faTrophy} className="me-2" />
Leaderboard
</Link>
</li>
<li data-bs-toggle="offcanvas">
<a className="dropdown-item"
href={ThirdPartyLinks.FAKEYOU_DISCORD}
title="discord chat"
target="_blank"
rel="noopener noreferrer">
<a
className="dropdown-item"
href={ThirdPartyLinks.FAKEYOU_DISCORD}
title="discord chat"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faDiscord} className="me-2" />
Discord Chat
</a>
</li>
<li data-bs-toggle="offcanvas">
<Link className="dropdown-item" to="/patrons" title="to patron list">
<Link
className="dropdown-item"
to="/patrons"
title="to patron list"
>
<FontAwesomeIcon icon={faPatreon} className="me-2" />
Patrons
</Link>
</li>
<li data-bs-toggle="offcanvas">
<Link className="dropdown-item" to="/firehose" title="to feed">
<Link
className="dropdown-item"
to="/firehose"
title="to feed"
>
<FontAwesomeIcon icon={faList} className="me-2" />
Feed
</Link>
</li>
<hr className='dropdown-divider' />
<hr className="dropdown-divider" />
<li data-bs-toggle="offcanvas">
<Link className="dropdown-item" to={myDataLink} title="my profile">
<Link
className="dropdown-item"
to={myDataLink}
title="my profile"
>
<FontAwesomeIcon icon={faUser} className="me-2" />
My Data
</Link>
@@ -414,13 +438,23 @@ function NewTopNavFc(props: Props) {
</li>
<li data-bs-toggle="offcanvas" className="nav-item d-lg-none">
<Link className="nav-link" aria-current="page" to="/about" title="About Us">
<Link
className="nav-link"
aria-current="page"
to="/about"
title="About Us"
>
About
</Link>
</li>
<li data-bs-toggle="offcanvas" className="nav-item d-lg-none">
<Link className="nav-link" aria-current="page" title="Terms of Use" to="/terms">
<Link
className="nav-link"
aria-current="page"
title="Terms of Use"
to="/terms"
>
Terms of Use
</Link>
</li>
@@ -461,9 +495,10 @@ function NewTopNavFc(props: Props) {
<li className="ps-3 d-lg-none">
<div className="d-flex gap-4 py-2">
<div className="top-bar-text mobile">Options:</div>
<Tippy
content={`${darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
}`}
{/* <Tippy
content={`${
darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
}`}
>
<button
className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
@@ -471,15 +506,16 @@ function NewTopNavFc(props: Props) {
>
<FontAwesomeIcon icon={darkModes ? faSun : faMoon} />
</button>
</Tippy>
</Tippy> */}
<Tippy
content={`${lowSpecView
? "Turn on animations"
: "Turn off animations"
}`}
content={`${
lowSpecView
? "Turn on animations"
: "Turn off animations"
}`}
>
<button
className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
className="btn btn-toggle"
onClick={() => toggleLowSpec()}
>
<FontAwesomeIcon
packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
+1 -1
View File
@@ -338,7 +338,7 @@ function TtsModelListPage(props: Props) {
<div className="col-lg-6">
<div className="d-flex justify-content-center">
<motion.img
src="mascot/Halloween-Hanashi.webp"
src="mascot/kitsune_pose2.webp"
className="img-fluid"
width="516"
height="508"