antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Improve header color styles on detail pages

Browse source
This commit is contained in:
jeffvli 2023-07-20 17:31:56 -07:00
parent 713260bfc9
commit 31eb22f968
11 changed files with 473 additions and 429 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/renderer/features/shared/components/library-background-overlay.tsx Normal file
View file

@ -0,0 +1,14 @@
import styled from 'styled-components';
export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>`
position: absolute;
z-index: -1;
width: 100%;
height: 20vh;
min-height: 200px;
background: ${(props) => props.backgroundColor};
background-image: var(--bg-subheader-overlay);
opacity: 0.3;
user-select: none;
pointer-events: none;
`;

6
src/renderer/features/shared/components/library-header.tsx
View file

@ -1,6 +1,6 @@
import { forwardRef, ReactNode, Ref } from 'react';
import { Center, Group } from '@mantine/core';
import { useMergedRef } from '@mantine/hooks';
import { forwardRef, ReactNode, Ref } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
@ -57,6 +57,7 @@ const BackgroundImage = styled.div<{ background: string }>`
width: 100%;
height: 100%;
background: ${(props) => props.background};
opacity: 0.9;
`;
const BackgroundImageOverlay = styled.div`
@ -66,8 +67,7 @@ const BackgroundImageOverlay = styled.div`
z-index: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)),
var(--background-noise);
background: var(--bg-header-overlay);
`;
interface LibraryHeaderProps {