mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-09-27 13:46:37 +08:00
Restyle
This commit is contained in:
DominicJamesWhite
parent
fe39a837e9
commit
6a75ce476d
@ -1,43 +1,46 @@
|
||||
@import "./animation.scss";
|
||||
@import "./window.scss";
|
||||
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&display=swap");
|
||||
|
||||
@mixin light {
|
||||
--theme: light;
|
||||
|
||||
/* color */
|
||||
--white: white;
|
||||
--black: rgb(48, 48, 48);
|
||||
--gray: rgb(250, 250, 250);
|
||||
--primary: rgb(29, 147, 171);
|
||||
--second: rgb(231, 248, 255);
|
||||
--hover-color: #f3f3f3;
|
||||
--bar-color: rgba(0, 0, 0, 0.1);
|
||||
--theme-color: var(--gray);
|
||||
--white: var(--color-fanta-50);
|
||||
--black: var(--color-black-900);
|
||||
--gray: var(--color-mud-500); /* Main background */
|
||||
--primary: var(--color-violetta-500); /* Accent */
|
||||
--second: var(--color-mud-200); /* Secondary background */
|
||||
--hover-color: var(--color-black-100);
|
||||
--bar-color: var(--color-black-200); /* Scrollbar */
|
||||
--theme-color: var(--gray); /* Keep referencing the main background */
|
||||
|
||||
/* shadow */
|
||||
--shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
|
||||
--card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);
|
||||
|
||||
/* stroke */
|
||||
--border-in-light: 1px solid rgb(222, 222, 222);
|
||||
--border-in-light: 1px solid var(--color-pipe-500);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
--theme: dark;
|
||||
|
||||
/* color */
|
||||
--white: rgb(30, 30, 30);
|
||||
--black: rgb(187, 187, 187);
|
||||
--gray: rgb(21, 21, 21);
|
||||
--primary: rgb(29, 147, 171);
|
||||
--second: rgb(27 38 42);
|
||||
--hover-color: #323232;
|
||||
--white: var(
|
||||
--color-black-900
|
||||
); /* "Light" background elements in dark mode */
|
||||
--black: var(--color-tan-50); /* Text color */
|
||||
--gray: var(--color-black-950); /* Main background */
|
||||
--primary: var(--color-violetta-400); /* Accent (lighter for dark mode) */
|
||||
--second: var(--color-mauve-800); /* Secondary background */
|
||||
--hover-color: var(--color-mauve-700);
|
||||
|
||||
--bar-color: rgba(255, 255, 255, 0.1);
|
||||
--bar-color: var(--color-black-400); /* Scrollbar */
|
||||
|
||||
--border-in-light: 1px solid rgba(255, 255, 255, 0.192);
|
||||
--border-in-light: 1px solid var(--color-mauve-500);
|
||||
|
||||
--theme-color: var(--gray);
|
||||
--theme-color: var(--gray); /* Keep referencing the main background */
|
||||
|
||||
div:not(.no-dark) > svg {
|
||||
filter: invert(0.5);
|
||||
@ -57,6 +60,162 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Base color palette */
|
||||
--color-tan-50: #fcf9f8;
|
||||
--color-tan-100: #f9f2f1;
|
||||
--color-tan-200: #f1e3df;
|
||||
--color-tan-300: #ebd6d1;
|
||||
--color-tan-400: #e3c6bf;
|
||||
--color-tan-500: #ddbab1;
|
||||
--color-tan-600: #c48778;
|
||||
--color-tan-700: #a75c49;
|
||||
--color-tan-800: #6e3c30;
|
||||
--color-tan-900: #391f19;
|
||||
--color-tan-950: #1c100c;
|
||||
--color-black-50: #e8e8e8;
|
||||
--color-black-100: #d1d1d1;
|
||||
--color-black-200: #a3a3a3;
|
||||
--color-black-300: #737373;
|
||||
--color-black-400: #454545;
|
||||
--color-black-500: #171717;
|
||||
--color-black-600: #141414;
|
||||
--color-black-700: #141414;
|
||||
--color-black-800: #121212;
|
||||
--color-black-900: #121212;
|
||||
--color-black-950: #0f0f0f;
|
||||
--color-red-50: #ffebeb;
|
||||
--color-red-100: #ffdbdb;
|
||||
--color-red-200: #ffb3b3;
|
||||
--color-red-300: #ff8f8f;
|
||||
--color-red-400: #ff6b6b;
|
||||
--color-red-500: #ff4444;
|
||||
--color-red-600: #ff0505;
|
||||
--color-red-700: #c20000;
|
||||
--color-red-800: #800000;
|
||||
--color-red-900: #420000;
|
||||
--color-red-950: #1f0000;
|
||||
--color-brown-50: #f2e6e3;
|
||||
--color-brown-100: #e7d0ca;
|
||||
--color-brown-200: #ce9e92;
|
||||
--color-brown-300: #b76f5d;
|
||||
--color-brown-400: #8a4d3d;
|
||||
--color-brown-500: #532e25;
|
||||
--color-brown-600: #43251e;
|
||||
--color-brown-700: #311b16;
|
||||
--color-brown-800: #20120e;
|
||||
--color-brown-900: #120a08;
|
||||
--color-brown-950: #070403;
|
||||
--color-purple-50: #ebeaf1;
|
||||
--color-purple-100: #d8d4e2;
|
||||
--color-purple-200: #aea7c3;
|
||||
--color-purple-300: #877ca6;
|
||||
--color-purple-400: #635983;
|
||||
--color-purple-500: #423b57;
|
||||
--color-purple-600: #352f46;
|
||||
--color-purple-700: #272334;
|
||||
--color-purple-800: #191721;
|
||||
--color-purple-900: #0e0c12;
|
||||
--color-purple-950: #070609;
|
||||
--color-orange-50: #fdede7;
|
||||
--color-orange-100: #fcded4;
|
||||
--color-orange-200: #f9bda9;
|
||||
--color-orange-300: #f79c7e;
|
||||
--color-orange-400: #f47b53;
|
||||
--color-orange-500: #f15a26;
|
||||
--color-orange-600: #d33f0e;
|
||||
--color-orange-700: #9e2f0a;
|
||||
--color-orange-800: #691f07;
|
||||
--color-orange-900: #351003;
|
||||
--color-orange-950: #180702;
|
||||
--color-teal-50: #e8f5f7;
|
||||
--color-teal-100: #d2ecef;
|
||||
--color-teal-200: #a1d7de;
|
||||
--color-teal-300: #73c3ce;
|
||||
--color-teal-400: #42aebd;
|
||||
--color-teal-500: #32838e;
|
||||
--color-teal-600: #286971;
|
||||
--color-teal-700: #1f5057;
|
||||
--color-teal-800: #143439;
|
||||
--color-teal-900: #0b1c1e;
|
||||
--color-teal-950: #050e0f;
|
||||
--color-darkviolet-50: #e8e8ed;
|
||||
--color-darkviolet-100: #d3d5de;
|
||||
--color-darkviolet-200: #a8aabd;
|
||||
--color-darkviolet-300: #7a7d9a;
|
||||
--color-darkviolet-400: #565971;
|
||||
--color-darkviolet-500: #353746;
|
||||
--color-darkviolet-600: #2a2b37;
|
||||
--color-darkviolet-700: #1f2029;
|
||||
--color-darkviolet-800: #16171d;
|
||||
--color-darkviolet-900: #0b0b0f;
|
||||
--color-darkviolet-950: #040506;
|
||||
--color-mud-50: #fefcfb;
|
||||
--color-mud-100: #fcf9f8;
|
||||
--color-mud-200: #f9f3f1;
|
||||
--color-mud-300: #f6ece9;
|
||||
--color-mud-400: #f3e6e2;
|
||||
--color-mud-500: #f0e0db;
|
||||
--color-mud-600: #d5a89a;
|
||||
--color-mud-700: #ba7059;
|
||||
--color-mud-800: #824836;
|
||||
--color-mud-900: #41241b;
|
||||
--color-mud-950: #20120d;
|
||||
--color-fanta-50: #ffffff;
|
||||
--color-fanta-100: #fffbfa;
|
||||
--color-fanta-200: #fffbfa;
|
||||
--color-fanta-300: #fff7f5;
|
||||
--color-fanta-400: #fff3f0;
|
||||
--color-fanta-500: #fff2ee;
|
||||
--color-fanta-600: #ffa58a;
|
||||
--color-fanta-700: #ff5b29;
|
||||
--color-fanta-800: #c72e00;
|
||||
--color-fanta-900: #611700;
|
||||
--color-fanta-950: #330c00;
|
||||
--color-pipe-50: #f8f2f2;
|
||||
--color-pipe-100: #f3e8e8;
|
||||
--color-pipe-200: #e6d0d0;
|
||||
--color-pipe-300: #dab9b9;
|
||||
--color-pipe-400: #cda2a2;
|
||||
--color-pipe-500: #c08989;
|
||||
--color-pipe-600: #aa5f5f;
|
||||
--color-pipe-700: #824545;
|
||||
--color-pipe-800: #562e2e;
|
||||
--color-pipe-900: #2b1717;
|
||||
--color-pipe-950: #140b0b;
|
||||
--color-mauve-50: #e8e7ee;
|
||||
--color-mauve-100: #d4d2e0;
|
||||
--color-mauve-200: #aaa5c0;
|
||||
--color-mauve-300: #7c759f;
|
||||
--color-mauve-400: #585275;
|
||||
--color-mauve-500: #363248;
|
||||
--color-mauve-600: #2b2839;
|
||||
--color-mauve-700: #201d2a;
|
||||
--color-mauve-800: #17151e;
|
||||
--color-mauve-900: #0b0a0f;
|
||||
--color-mauve-950: #050406;
|
||||
--color-violetta-50: #f2effa;
|
||||
--color-violetta-100: #e5e0f5;
|
||||
--color-violetta-200: #cac1eb;
|
||||
--color-violetta-300: #b0a2e2;
|
||||
--color-violetta-400: #9583d8;
|
||||
--color-violetta-500: #7c66cf;
|
||||
--color-violetta-600: #563bba;
|
||||
--color-violetta-700: #412c8c;
|
||||
--color-violetta-800: #2b1d5d;
|
||||
--color-violetta-900: #160f2f;
|
||||
--color-violetta-950: #0b0717;
|
||||
--color-crevice-50: #fefcfb;
|
||||
--color-crevice-100: #fcf5f3;
|
||||
--color-crevice-200: #f9efeb;
|
||||
--color-crevice-300: #f6e5df;
|
||||
--color-crevice-400: #f3dbd3;
|
||||
--color-crevice-500: #f0d3c9;
|
||||
--color-crevice-600: #dd9a83;
|
||||
--color-crevice-700: #ca623f;
|
||||
--color-crevice-800: #8c4027;
|
||||
--color-crevice-900: #441f13;
|
||||
--color-crevice-950: #24100a;
|
||||
|
||||
@include light;
|
||||
|
||||
--window-width: 90vw;
|
||||
@ -90,8 +249,7 @@
|
||||
html {
|
||||
height: var(--full-height);
|
||||
|
||||
font-family: "Noto Sans", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
|
||||
"PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
font-family: "Archivo", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -315,7 +473,7 @@ pre {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
button{
|
||||
button {
|
||||
pointer-events: auto;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 4em;
|
||||
@ -333,7 +491,11 @@ pre {
|
||||
background-image: none;
|
||||
}
|
||||
.collapsed {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.06));
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.8),
|
||||
rgba(0, 0, 0, 0.06)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user