This commit is contained in:
[witbox2018] 2023-04-10 15:08:14 +08:00
parent c4db359a85
commit 7c448656a9
3 changed files with 52 additions and 16 deletions

View File

@ -14,7 +14,7 @@
0px 0px 0px 0.9375px rgba(0, 0, 0, 0.5); 0px 0px 0px 0.9375px rgba(0, 0, 0, 0.5);
background-color: var(--white); background-color: var(--white);
border: 2px solid hsla(0, 0%, 100%, .1); border: 2px solid hsla(0, 0%, 100%, .1);
border-radius: 10px; border-radius: 20px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
color: var(--black); color: var(--black);
background-color: var(--white); background-color: var(--white);
@ -39,13 +39,15 @@
.tight-container { .tight-container {
--window-width: 100vw; --window-width: 100vw;
--window-height: var(--full-height); --window-height: var(--full-height);
--window-content-width: 768px; --window-content-width: 868px;
@include container(); @include container();
max-width: 100vw; max-width: 100vw;
max-height: var(--full-height); max-height: var(--full-height);
background: var(--gray);
border-radius: 0; border-radius: 0;
} }
@ -60,7 +62,7 @@
background-color: var(--second); background-color: var(--second);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05); // box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
position: relative; position: relative;
transition: width ease 0.1s; transition: width ease 0.1s;
} }
@ -90,6 +92,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
background-color: var(--white);
} }
.mobile { .mobile {
@ -157,12 +160,15 @@
.chat-list {} .chat-list {}
.chat-item { .chat-item {
box-sizing: border-box; box-sizing: border-box;
padding: 12px 10px; padding: 12px 10px;
color: var(--black); color: var(--black);
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border-radius: 10px; border-radius: 10px;
margin: 0 1px; margin: 0 1px;
margin-bottom: 14px; margin-bottom: 14px;
@ -180,8 +186,8 @@
background-image: linear-gradient(to right, var(--second), var(--second)), background-image: linear-gradient(to right, var(--second), var(--second)),
linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 73.67%, rgba(255, 255, 255, 0) 99.95%), linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 73.67%, rgba(255, 255, 255, 0) 99.95%),
linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
box-shadow: 0px 16px 32px -16px rgba(0, 0, 0, 0.5),
0px 0px 0px 0.9375px rgba(0, 0, 0, 0.5);
} }
@keyframes slide-in { @keyframes slide-in {
@ -200,7 +206,6 @@
background-color: var(--hover-color); background-color: var(--hover-color);
} }
.chat-item-selected { .chat-item-selected {
color: var(--black); color: var(--black);
border: 1px solid transparent; border: 1px solid transparent;
@ -392,7 +397,7 @@
} }
.chat-message-user>.chat-message-container>.chat-message-item { .chat-message-user>.chat-message-container>.chat-message-item {
background: rgba(78, 91, 246, 0.60); background: var(--chatpop);
border-radius: 10px 4px 10px 10px; border-radius: 10px 4px 10px 10px;
border: none; border: none;
} }
@ -503,7 +508,7 @@
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
border: var(--border-in-light); border: var(--border-in-light);
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03); // box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
background-color: var(--white); background-color: var(--white);
color: var(--black); color: var(--black);
padding: 12px 62px 12px 12px; padding: 12px 62px 12px 12px;
@ -537,7 +542,7 @@
border-box; border-box;
background-image: linear-gradient(to right, var(--white), var(--white)), background-image: linear-gradient(to right, var(--white), var(--white)),
linear-gradient(90deg, rgba(255, 99, 99, 0.8), rgba(155, 77, 255, 0.8)); linear-gradient(90deg, rgba(255, 99, 99, 0.8), rgba(155, 77, 255, 0.8));
box-shadow: 1px 0px 14px 0px rgb(69 80 219 / 55%); box-shadow: 0px 3px 22px 0px rgb(69 80 219 / 50%);
// padding: inherit; // padding: inherit;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
@ -588,7 +593,32 @@
width: 100%; width: 100%;
} }
.addConversation {
.addConversation {
box-sizing:border-box;
color: var(--black);
font-weight: bold;
height: 52px;
width: 100%;
border-radius: 10px;
margin-bottom: 14px;
border: var(--border-in-light);
background-color: var(--white);
box-shadow: var(--card-shadow);
font-size: 14px;
align-items: center;
display: flex;
// justify-content: center;
padding: 12px 10px;
transition: all 0.5s ease;
cursor: pointer;
}
.addConversationDark {
box-sizing: border-box; box-sizing: border-box;
color: var(--black); color: var(--black);
font-weight: bold; font-weight: bold;

View File

@ -85,6 +85,8 @@ function useSwitchTheme() {
}, [config.theme]); }, [config.theme]);
} }
// const isDarkTheme = config.theme === "dark";
function useDragSideBar() { function useDragSideBar() {
const limit = (x: number) => Math.min(500, Math.max(220, x)); const limit = (x: number) => Math.min(500, Math.max(220, x));
@ -200,7 +202,9 @@ function _Home() {
}} }}
> >
<button <button
className={styles["addConversation"]} className={`${styles.addConversation} ${
config.theme === "dark" ? styles.addConversationDark : ""
}`}
onClick={() => { onClick={() => {
createNewSession(); createNewSession();
setShowSideBar(false); setShowSideBar(false);

View File

@ -3,8 +3,8 @@
--white: white; --white: white;
--black: rgb(48, 48, 48); --black: rgb(48, 48, 48);
--gray: rgb(250, 250, 250); --gray: rgb(250, 250, 250);
--primary: rgba(78, 91, 246, 0.8); --primary: rgba(78, 91, 246);
--second: #dadefd83; --second: rgba(40, 40, 255, .04);
--hover-color: rgba(78, 91, 246, 0.1); --hover-color: rgba(78, 91, 246, 0.1);
--bar-color: rgba(0, 0, 0, 0.1); --bar-color: rgba(0, 0, 0, 0.1);
--theme-color: var(--gray); --theme-color: var(--gray);
@ -12,9 +12,10 @@
/* shadow */ /* shadow */
--shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1); --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
--card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05); --card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);
/* stroke */ /* stroke */
--border-in-light: 1px solid rgb(222, 222, 222); --border-in-light: 1px solid #E1E1E1;
--chatpop:rgba(40, 40, 255, .04);
} }
@mixin dark { @mixin dark {
@ -29,6 +30,7 @@
--bar-color: rgba(255, 255, 255, 0.1); --bar-color: rgba(255, 255, 255, 0.1);
--border-in-light: 1px solid #dadefd36; --border-in-light: 1px solid #dadefd36;
--theme-color: var(--white); --theme-color: var(--white);
--chatpop:rgba(78, 91, 246, 0.4);
} }
.light { .light {