cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(header): new glass header on channel view

Browse source
This commit is contained in:
trashtemp 2021-12-26 22:26:27 +01:00
parent e20c3ee518
commit 83f38d71ce
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
6 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/common/messaging/bars/JumpToBottom.tsx
View file

@ -37,6 +37,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
user-select: none;
justify-content: space-between;
transition: color ease-in-out 0.08s;
top: 48px;
${(props) =>
props.accent

6
src/components/navigation/SidebarBase.tsx
View file

@ -8,6 +8,12 @@ export default styled.div`
user-select: none;
flex-direction: row;
align-items: stretch;
> * > ::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 48px solid transparent;
}
`;
export const GenericSidebarBase = styled.div<{

8
src/components/ui/Header.tsx
View file

@ -31,7 +31,13 @@ const Header = styled.div<Props>`
align-items: center;
background-size: cover !important;
background-position: center !important;
background-color: var(--primary-header);
//background-color: var(--primary-header);
background-color: rgba(54, 54, 54, 0.75);
backdrop-filter: blur(10px);
z-index: 20;
position: absolute;
width: 100%;
/*> div {
text-overflow: ellipsis;

1
src/pages/RevoltApp.tsx
View file

@ -30,6 +30,7 @@ const Routes = styled.div`
display: flex;
overflow: hidden;
flex-direction: column;
position: relative;
background: var(--primary-background);
`;

6
src/pages/channels/Channel.tsx
View file

@ -35,6 +35,12 @@ const ChannelMain = styled.div`
min-height: 0;
overflow: hidden;
flex-direction: row;
> * > ::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 48px solid transparent;
}
`;
const ChannelContent = styled.div`

7
src/pages/channels/messaging/MessageArea.tsx
View file

@ -39,8 +39,15 @@ const Area = styled.div`
min-height: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-top: 48px;
word-break: break-word;
> * > ::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 80px solid transparent;
}
> div {
display: flex;
min-height: 100%;