RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement background images supports

Browse Source
This commit is contained in:
srgooglo 2022-06-02 00:37:03 +02:00
parent 8a032790cd
commit 18b9fea6b8
4 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app/src/App.jsx
View File

@ -417,6 +417,7 @@ class App extends React.Component {
<title>{config.app.siteName}</title> <title>{config.app.siteName}</title>
</Helmet> </Helmet>
<antd.ConfigProvider> <antd.ConfigProvider>
<div className="backgroundDecorator" />
<Layout <Layout
user={this.state.user} user={this.state.user}
staticRenders={App.staticRenders} staticRenders={App.staticRenders}

4
packages/app/src/layout/header/index.less
View File

@ -14,8 +14,8 @@
transition: all ease-in-out 150ms; transition: all ease-in-out 150ms;
background: var(--background-color-primary) !important; background-color: transparent;
background-color: var(--background-color-primary) !important; background: transparent !important;
border-bottom: 1px var(--border-color) solid; border-bottom: 1px var(--border-color) solid;

7
packages/app/src/layout/sidedrawer/index.less
View File

@ -4,6 +4,10 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
> div {
transform: translate(-50px, 0);
}
.sidedrawer { .sidedrawer {
position: relative; position: relative;
@ -28,6 +32,9 @@
word-break: break-all; word-break: break-all;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
// create shadow on the right side
box-shadow : 0 0 5px 4px rgba(0, 0, 0, 0.1) !important;
&.hided { &.hided {
width: 0; width: 0;
min-width: 0; min-width: 0;

32
packages/app/src/theme/index.less
View File

@ -74,7 +74,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--background-color-primary) !important; background-color: var(--layoutBackgroundColor) !important;
} }
#nprogress { #nprogress {
@ -89,10 +89,17 @@ body {
} }
.ant-layout, .ant-layout,
.content_layout, .content_layout {
width: 100%;
height: 100%;
max-height: 100vh;
background-color: transparent;
}
.app_layout { .app_layout {
background: var(--background-color-primary) !important; background-color: rgba(var(--layoutBackgroundColor), var(--backgroundColorTransparency)) !important;
background-color: var(--background-color-primary) !important; backdrop-filter: blur(var(--backgroundBlur));
position: relative; position: relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -126,6 +133,23 @@ body {
} }
} }
.backgroundDecorator {
background-image: var(--backgroundImage);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transition: all 150ms ease-in-out;
}
.layout_page { .layout_page {
position: relative; position: relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;