style: 调整亮色模式下的滚动条与loading配色

pull/13/head
moonrailgun 4 years ago
parent 06b3e86f1a
commit b6235fd058

@ -72,7 +72,7 @@ export const MainProvider: React.FC = React.memo((props) => {
if (loading) {
return (
<div className="fixed inset-0 flex items-center justify-center bg-content-light dark:bg-content-dark text-white text-xl">
<div className="fixed inset-0 flex items-center justify-center bg-content-light dark:bg-content-dark text-gray-700 dark:text-white text-xl">
<LoadingSpinner tip={t('正在连接到聊天服务器...')} />
</div>
);

@ -1,5 +1,5 @@
.dark {
color: rgba(255,255,255,0.85);
#tailchat-app {
@apply text-gray-700;
/* 滚动条 */
::-webkit-scrollbar {
@ -12,7 +12,7 @@
}
::-webkit-scrollbar-thumb {
background-color: #202225;
@apply bg-black bg-opacity-10;
border-color: transparent;
background-clip: padding-box;
border-width: 4px;
@ -20,16 +20,37 @@
border-radius: 8px;
&:hover {
background-color: #202225;
@apply bg-black bg-opacity-20;
}
}
::-webkit-scrollbar-track {
background-color: #2f3136;
@apply bg-black bg-opacity-5;
border-color: transparent;
background-clip: padding-box;
border-width: 4px;
border-style: solid;
border-radius: 8px;
}
// 深色模式覆盖
&.dark {
color: rgba(255, 255, 255, 0.85);
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #202225;
&:hover {
background-color: #202225;
}
}
::-webkit-scrollbar-track {
background-color: #2f3136;
}
}
}

Loading…
Cancel
Save