mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
Light mode fixes (#1379)
* Fix color of text in text buttons in light mode * fix border color of search input in light mode * fix carousel text colors in light mode * fix scroll shadows colors in light mode
This commit is contained in:
@@ -181,6 +181,11 @@
|
||||
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: white;
|
||||
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.nav-arrow-left,
|
||||
.nav-arrow-right {
|
||||
position: absolute;
|
||||
|
||||
@@ -130,6 +130,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
|
||||
<Group gap="xs" justify="center" wrap="wrap">
|
||||
{album.genres?.slice(0, 2).map((genre) => (
|
||||
<Badge
|
||||
classNames={{ label: styles.badge }}
|
||||
key={`genre-${genre.id}`}
|
||||
size="sm"
|
||||
variant="transparent"
|
||||
@@ -138,7 +139,11 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
|
||||
</Badge>
|
||||
))}
|
||||
{album.releaseYear && (
|
||||
<Badge size="sm" variant="transparent">
|
||||
<Badge
|
||||
classNames={{ label: styles.badge }}
|
||||
size="sm"
|
||||
variant="transparent"
|
||||
>
|
||||
{album.releaseYear}
|
||||
</Badge>
|
||||
)}
|
||||
@@ -248,6 +253,12 @@ export const FeatureCarousel = ({ data, onNearEnd }: FeatureCarouselProps) => {
|
||||
onClick={handlePrevious}
|
||||
radius="50%"
|
||||
size="md"
|
||||
styles={{
|
||||
icon: {
|
||||
color: 'white',
|
||||
fill: 'white',
|
||||
},
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon
|
||||
@@ -257,6 +268,12 @@ export const FeatureCarousel = ({ data, onNearEnd }: FeatureCarouselProps) => {
|
||||
onClick={handleNext}
|
||||
radius="50%"
|
||||
size="md"
|
||||
styles={{
|
||||
icon: {
|
||||
color: 'white',
|
||||
fill: 'white',
|
||||
},
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -191,6 +191,15 @@
|
||||
rgb(0 0 0 / 5%) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
@mixin light {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--theme-colors-background) 0%,
|
||||
alpha(var(--theme-colors-background), 0.05) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.item-table-left-scroll-shadow {
|
||||
@@ -207,6 +216,15 @@
|
||||
rgb(0 0 0 / 5%) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
@mixin light {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--theme-colors-background) 0%,
|
||||
alpha(var(--theme-colors-background), 0.05) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.item-table-right-scroll-shadow {
|
||||
@@ -223,6 +241,15 @@
|
||||
rgb(0 0 0 / 5%) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
@mixin light {
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
var(--theme-colors-background) 0%,
|
||||
alpha(var(--theme-colors-background), 0.05) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.item-table-top-scroll-shadow {
|
||||
@@ -239,4 +266,13 @@
|
||||
rgb(0 0 0 / 5%) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
@mixin light {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--theme-colors-background) 0%,
|
||||
alpha(var(--theme-colors-background), 0.05) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,6 +38,21 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.search-text-input {
|
||||
background: transparent;
|
||||
border-color: rgb(255 255 255 / 5%);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
@mixin light {
|
||||
border-color: rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
border-color: rgb(255 255 255 / 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-lg) {
|
||||
.content-layout {
|
||||
grid-template-areas: 'songs metadata';
|
||||
|
||||
@@ -622,6 +622,7 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
|
||||
<Stack gap="md">
|
||||
<Group gap="sm" w="100%">
|
||||
<TextInput
|
||||
classNames={{ input: styles.searchTextInput }}
|
||||
flex={1}
|
||||
leftSection={<Icon icon="search" />}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
@@ -638,12 +639,6 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
styles={{
|
||||
input: {
|
||||
background: 'transparent',
|
||||
border: '1px solid rgba(255, 255, 255, 0.05)',
|
||||
},
|
||||
}}
|
||||
value={searchTerm}
|
||||
/>
|
||||
<ListSortByDropdownControlled
|
||||
|
||||
@@ -86,6 +86,12 @@
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
|
||||
@mixin light {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
svg {
|
||||
color: black;
|
||||
fill: black;
|
||||
|
||||
Reference in New Issue
Block a user