refactor: indetation

This commit is contained in:
Tim 2023-10-17 15:35:01 +02:00
parent 290640c81b
commit 2a7974058d
6 changed files with 30 additions and 17 deletions

View file

@ -30,6 +30,7 @@
color: var(--primary-foreground-color);
}
}
.uninstall-button {
background-color: var(--overlay-color);
@ -37,6 +38,7 @@
outline: var(--focus-outline-size) solid var(--overlay-color);
background-color: transparent;
}
&:focus {
outline-color: var(--primary-foreground-color);
}

View file

@ -176,6 +176,7 @@
&:not(:last-child) {
margin-right: 1rem;
}
&:hover {
.label {
opacity: 0.7;
@ -197,6 +198,7 @@
&:not(:last-child) {
margin-right: 1rem;
}
&.show-button {
&:hover, &:focus {
background-color: var( --secondary-accent-color);

View file

@ -25,6 +25,7 @@
.thumbnail-container, .addon-name-container {
flex: none;
overflow: visible;
.thumbnail {
display: block;
height: 5rem;
@ -51,6 +52,7 @@
color: var(--primary-foreground-color);
}
}
.info-container {
flex: 1;
padding: 0 0.5rem 0 1.5rem;
@ -85,13 +87,15 @@
}
}
}
@media only screen and (max-width: @small) {
.stream-container {
.info-container {
font-size: 0.9rem;
}
.info-container {
font-size: 0.9rem;
}
}
}
@media only screen and (max-width: @minimum) {
.stream-container {
.thumbnail-container, .addon-name-container {

View file

@ -96,26 +96,25 @@ const StreamsList = ({ className, video, ...props }) => {
:
<React.Fragment>
<div className={styles['select-choices-wrapper']}>
{ video ? (
<React.Fragment>
<Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
<Icon className={styles['icon']} name={'chevron-back'} />
</Button>
<div className={styles['episode-title']}>
{`S${video?.season}E${video?.episode} ${(video?.title)}`}
</div>
</React.Fragment>
)
:
null
{
video ?
<React.Fragment>
<Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
<Icon className={styles['icon']} name={'chevron-back'} />
</Button>
<div className={styles['episode-title']}>
{`S${video?.season}E${video?.episode} ${(video?.title)}`}
</div>
</React.Fragment>
:
null
}
{
Object.keys(streamsByAddon).length > 1 ? (
Object.keys(streamsByAddon).length > 1 ?
<Multiselect
{...selectableOptions}
className={styles['select-input-container']}
/>
)
:
null
}

View file

@ -40,6 +40,7 @@
color: var(--primary-foreground-color);
}
}
.select-choices-wrapper {
display: flex;
align-items: center;
@ -55,12 +56,14 @@
border-radius: 0.5em;
padding: 1em;
max-height: 3em;
.icon {
width: 1.5em;
height: 1.5em;
color: var(--primary-foreground-color);
opacity: 0.6;
}
&:hover, &:global(.active) {
background-color: var(--overlay-color);
opacity: 1;
@ -85,6 +88,7 @@
flex: 0 0 auto;
flex-grow: 1;
background: none;
&:hover, &:focus, &:global(.active) {
background-color: var(--overlay-color);
}

View file

@ -24,6 +24,7 @@
.search-row {
margin: 4rem 2rem;
}
.search-hints-wrapper {
display: flex;
align-items: center;
@ -37,6 +38,7 @@
justify-content: center;
align-items: center;
padding: 0 1rem;
.search-hints-title {
flex-grow: 0;
flex-shrink: 1;