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

Lint files based on updated rules

Browse source
This commit is contained in:
jeffvli 2023-09-15 20:42:38 -07:00
parent d45b01625b
commit ec457d5125
57 changed files with 153 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/features/player/components/center-controls.tsx
View file

@ -62,7 +62,7 @@ const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
justify-content: center;
max-width: 50px;
@media (max-width: 768px) {
@media (width <= 768px) {
display: none;
}
`;
@ -80,7 +80,7 @@ const ControlsContainer = styled.div`
justify-content: center;
height: 35px;
@media (max-width: 768px) {
@media (width <= 768px) {
${ButtonsContainer} {
gap: 0;
}

19
src/renderer/features/player/components/full-screen-player-image.tsx
View file

@ -18,13 +18,12 @@ import {
} from '/@/renderer/store';
const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
position: absolute;
width: 100%;
height: 100%;
object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')}};
object-position: 50% 100%;
border-radius: 5px;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 40%)) drop-shadow(0 0 5px rgba(0, 0, 0, 40%));
position: absolute;
height: 100%;
object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')};
object-position: 50% 100%;
filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%));
border-radius: 5px;
`;
const ImageContainer = styled(motion.div)`
@ -32,8 +31,8 @@ const ImageContainer = styled(motion.div)`
display: flex;
align-items: flex-end;
max-width: 100%;
aspect-ratio: 1/1;
height: 65%;
aspect-ratio: 1/1;
margin-bottom: 1rem;
`;
@ -42,8 +41,8 @@ interface TransparentMetadataContainer {
}
const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
padding: 1rem;
background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
border-radius: 5px;
h1 {
@ -52,7 +51,7 @@ const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
`;
const PlayerContainer = styled(Flex)`
@media screen and (max-height: 640px) {
@media screen and (height <= 640px) {
.full-screen-player-image-metadata {
display: none;
height: 100%;

10
src/renderer/features/player/components/full-screen-player-queue.tsx
View file

@ -17,9 +17,9 @@ const QueueContainer = styled.div`
height: 100%;
.ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
--ag-background-color: rgba(0, 0, 0, 0%) !important;
--ag-odd-row-background-color: rgba(0, 0, 0, 0%) !important;
--ag-header-background-color: rgb(0 0 0 / 0%) !important;
--ag-background-color: rgb(0 0 0 / 0%) !important;
--ag-odd-row-background-color: rgb(0 0 0 / 0%) !important;
}
.ag-header {
@ -46,11 +46,11 @@ interface TransparendGridContainerProps {
}
const GridContainer = styled.div<TransparendGridContainerProps>`
padding: 1rem;
background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: 1fr;
padding: 1rem;
background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
border-radius: 5px;
`;

4
src/renderer/features/player/components/full-screen-player.tsx
View file

@ -38,7 +38,7 @@ const Container = styled(motion.div)`
justify-content: center;
padding: 2rem;
@media screen and (max-width: 768px) {
@media screen and (width <= 768px) {
padding: 2rem 2rem 1rem;
}
`;
@ -52,7 +52,7 @@ const ResponsiveContainer = styled.div`
max-width: 2560px;
margin-top: 5rem;
@media screen and (max-width: 768px) {
@media screen and (width <= 768px) {
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
margin-top: 0;

10
src/renderer/features/player/components/left-controls.tsx
View file

@ -41,9 +41,9 @@ const Image = styled(motion.div)`
position: relative;
width: 60px;
height: 60px;
background-color: var(--placeholder-bg);
cursor: pointer;
filter: drop-shadow(0 5px 6px rgb(0, 0, 0, 50%));
background-color: var(--placeholder-bg);
filter: drop-shadow(0 5px 6px rgb(0 0 0 / 50%));
${fadeIn};
animation: fadein 0.2s ease-in-out;
@ -68,10 +68,10 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
width: 95%;
max-width: 20vw;
overflow: hidden;
color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
line-height: 1.3;
white-space: nowrap;
color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
text-overflow: ellipsis;
white-space: nowrap;
a {
color: ${(props) => props.$secondary && 'var(--text-secondary)'};
@ -84,7 +84,7 @@ const LeftControlsContainer = styled.div`
height: 100%;
padding-left: 1rem;
@media (max-width: 640px) {
@media (width <= 640px) {
${ImageWrapper} {
display: none;
}

4
src/renderer/features/player/components/player-button.tsx
View file

@ -73,14 +73,14 @@ const ButtonTertiaryVariant = css`
type StyledPlayerButtonProps = Omit<PlayerButtonProps, 'icon'>;
const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
all: unset;
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem;
overflow: visible;
background: var(--playerbar-btn-bg-hover);
all: unset;
cursor: default;
background: var(--playerbar-btn-bg-hover);
button {
display: flex;

2
src/renderer/features/player/components/playerbar.tsx
View file

@ -30,7 +30,7 @@ const PlayerbarControlsGrid = styled.div`
gap: 1rem;
height: 100%;
@media (max-width: 768px) {
@media (width <= 768px) {
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.5fr);
}
`;