root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: dark theme for scroller

Browse Source
This commit is contained in:
jialin
2025-04-28 10:05:06 +08:00
parent ce9c31f368
commit 60d0750695
39 changed files with 216 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/hf-model-file.tsx
+3 -7
View File
@@ -1,3 +1,4 @@
import SimpleOverlay from '@/components/simple-overlay';
import { createAxiosToken } from '@/hooks/use-chunk-request';
import { useIntl } from '@umijs/max';
import { Empty, Select, Spin } from 'antd';
@@ -11,7 +12,6 @@ import React, {
useRef,
useState
} from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import styled from 'styled-components';
import {
@@ -399,11 +399,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
></Spin>
</div>
)}
<SimpleBar
style={{
height: collapsed ? 'max-content' : 'calc(100vh - 300px)'
}}
>
<SimpleOverlay height={collapsed ? 'max-content' : 'calc(100vh - 300px)'}>
<div style={{ padding: '16px 24px' }}>
{dataSource.fileList.length ? (
<ItemFileWrapper>
@@ -433,7 +429,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
)
)}
</div>
</SimpleBar>
</SimpleOverlay>
</div>
);
});
src/pages/llmodels/components/model-card.tsx
+3 -3
View File
@@ -1,5 +1,6 @@
import IconFont from '@/components/icon-font';
import MarkdownViewer from '@/components/markdown-viewer';
import SimpleOverlay from '@/components/simple-overlay';
import useRequestToken from '@/hooks/use-request-token';
import {
DownOutlined,
@@ -17,7 +18,6 @@ import React, {
useRef,
useState
} from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import {
downloadModelFile,
@@ -357,7 +357,7 @@ const ModelCard: React.FC<{
{collapsed ? <DownOutlined /> : <RightOutlined />}
</span>
</span>
<SimpleBar
<SimpleOverlay
style={{
paddingTop: collapsed ? 12 : 0,
maxHeight: collapsed ? 300 : 0
@@ -368,7 +368,7 @@ const ModelCard: React.FC<{
content={readmeText}
theme="light"
></MarkdownViewer>
</SimpleBar>
</SimpleOverlay>
</div>
)}
</div>
src/pages/llmodels/components/search-result.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import IconFont from '@/components/icon-font';
import SimpleOverlay from '@/components/simple-overlay';
import { SearchOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Col, Empty, Row, Spin } from 'antd';
import React, { useMemo } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import { modelSourceMap } from '../config';
import '../style/search-result.less';
@@ -89,7 +89,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
}, [networkError, source, intl]);
return (
<SimpleBar style={{ height: 'calc(100vh - 224px)' }}>
<SimpleOverlay style={{ height: 'calc(100vh - 224px)' }}>
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
@@ -124,7 +124,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
</div>
</Spin>
</div>
</SimpleBar>
</SimpleOverlay>
);
};
src/pages/llmodels/style/catalog-item.less
+2 -2
View File
@@ -34,11 +34,11 @@
}
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.title {
src/pages/llmodels/style/column-wrapper.less
+1 -1
View File
@@ -26,6 +26,6 @@
right: 0;
z-index: 100;
padding-block: 0;
background-color: var(--color-white-1);
background-color: var(--ant-color-bg-elevated);
}
}
src/pages/llmodels/style/data-form.less
+1 -1
View File
@@ -11,7 +11,7 @@
font-weight: var(--font-weight-bold) !important;
&:hover {
background-color: var(--color-fill-sider) !important;
background-color: var(--ant-color-fill-tertiary) !important;
}
}
src/pages/llmodels/style/hf-model-file.less
+3 -2
View File
@@ -8,13 +8,14 @@
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
cursor: pointer;
background-color: var(--ant-color-bg-container);
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.tags {
src/pages/llmodels/style/hf-model-item.less
+3 -2
View File
@@ -7,13 +7,14 @@
border-radius: var(--border-radius-base);
padding: 12px 14px;
cursor: pointer;
background-color: var(--ant-color-bg-container);
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.title {
src/pages/llmodels/style/model-card.less
+1 -1
View File
@@ -27,7 +27,7 @@
.mkd-title {
cursor: pointer;
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
border-bottom: 1px solid rgba(255, 255, 255, 10%);
display: flex;
justify-content: space-between;
src/pages/llmodels/style/search-result.less
-1
View File
@@ -1,7 +1,6 @@
@padding: 24px;
.search-result-wrap {
background-color: rgba(255, 255, 255, 100%);
padding: 16px @padding;
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
}