Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

styles updated

Browse source
This commit is contained in:
nklhrstv 2022-05-24 14:01:04 +03:00
parent 211f478e8a
commit 9c6404ed41
26 changed files with 197 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App/styles.less
View file

@ -139,7 +139,7 @@ html {
@media only screen and (max-width: @xsmall) { @media only screen and (max-width: @xsmall) {
html { html {
min-width: inherit !important; min-width: inherit;
min-height: inherit !important; min-height: inherit;
} }
} }

1
src/common/ColorInput/ColorPicker/styles.less
View file

@ -2,6 +2,7 @@
.color-picker-container { .color-picker-container {
overflow: visible; overflow: visible;
text-align: center;
* { * {
overflow: visible; overflow: visible;

7
src/common/ColorInput/styles.less
View file

@ -1,7 +1,6 @@
// Copyright (C) 2017-2022 Smart code 203358507 // Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.color-input-container { .color-input-container {
position: relative; position: relative;
@ -33,10 +32,4 @@
.color-picker-container { .color-picker-container {
margin: 1rem 0; margin: 1rem 0;
}
@media only screen and (max-width: @minimum) {
.color-picker-container {
text-align: center;
}
} }

6
src/common/MainNavBars/styles.less
View file

@ -35,12 +35,12 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.main-nav-bars-container { .main-nav-bars-container {
.nav-content-container { .nav-content-container {
left: 0 !important; left: 0;
bottom: var(--vertical-nav-bar-size) !important; bottom: var(--vertical-nav-bar-size);
} }
.vertical-nav-bar { .vertical-nav-bar {
top: initial !important; top: initial;
} }
} }
} }

18
src/common/MetaItem/styles.less
View file

@ -180,23 +180,17 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.meta-item-container { .meta-item-container {
display: flex; padding: 0.5rem;
flex-direction: column;
gap: 0.75em;
padding: 0.5em;
.poster-container {
flex: auto;
}
.title-bar-container { .title-bar-container {
height: 2.5rem; margin-top: 0.5rem;
flex: auto;
align-items: flex-start;
.title-label { .title-label {
padding-left: 0; padding-left: 0;
padding-right: 0 !important;
&:only-child {
padding-right: 0;
}
} }
} }
} }

15
src/common/MetaPreview/ActionButton/styles.less
View file

@ -51,17 +51,24 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.action-button-container { .action-button-container {
flex-direction: row; flex-direction: row;
padding: 0 1.5rem;
.icon-container { .icon-container {
flex: none;
align-self: center; align-self: center;
flex: 0 0 auto; height: 2rem;
height: 2em; width: 2rem;
width: 2em;
padding-top: 0; padding-top: 0;
margin-right: 0.5rem;
&:only-child {
padding: 0;
margin-right: 0;
}
} }
.label-container { .label-container {
flex: 0 0 auto; flex: 1;
} }
} }
} }

15
src/common/MetaPreview/styles.less
View file

@ -210,9 +210,7 @@
} }
.action-buttons-container { .action-buttons-container {
max-height: 9.5rem;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 1em;
padding: 0 1.5rem; padding: 0 1.5rem;
overflow-x: visible; overflow-x: visible;
scrollbar-width: none; scrollbar-width: none;
@ -222,18 +220,19 @@
} }
.action-button { .action-button {
height: 4rem;
width: auto; width: auto;
display: flex; height: 4rem;
flex-direction: row; max-width: 60%;
gap: 0.75em;
padding: 0 1.5em;
margin: 1rem 0; margin: 1rem 0;
&:not(:last-child) { &:not(:last-child) {
margin-right: 0; margin-right: 1rem;
} }
} }
} }
} }
.share-prompt {
width: 100%;
}
} }

6
src/common/MetaRow/MetaRowPlaceholder/styles.less
View file

@ -93,7 +93,11 @@
.meta-row-placeholder-container { .meta-row-placeholder-container {
.meta-items-container { .meta-items-container {
.meta-item { .meta-item {
margin: 0; margin: 0.5rem;
&:not(:first-child) {
margin-left: 0.5rem;
}
} }
} }
} }

2
src/common/MetaRow/styles.less
View file

@ -100,10 +100,10 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.meta-row-container { .meta-row-container {
.header-container { .header-container {
gap: 0.5em;
padding: 0 0.5em; padding: 0 0.5em;
.title-container { .title-container {
margin-right: 0.5rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

22
src/common/ModalDialog/styles.less
View file

@ -123,33 +123,37 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.modal-container { .modal-container {
.modal-dialog-container { .modal-dialog-container {
position: relative;
width: 90%; width: 90%;
max-width: initial; max-width: initial;
gap: 0.5em;
.close-button-container { .close-button-container {
position: absolute; position: absolute;
top: 0;
right: 0;
margin: 0.75rem 0.75rem 0 0; margin: 0.75rem 0.75rem 0 0;
padding: 0.25rem; padding: 0.25rem;
} }
.title-container { .title-container {
max-height: initial; max-height: 4.8em;
margin: 0; margin: 1rem 3rem 1rem 1.5rem;
padding: 1em 1.5em;
} }
.modal-dialog-content { .modal-dialog-content {
margin: 0; margin: 0 0.5rem;
padding: 0 1.5rem; padding: 0 0.5rem;
&:last-child {
margin-bottom: 1rem;
}
} }
.buttons-container { .buttons-container {
margin: 0; margin: 1rem 1rem 0;
padding: 1.5em;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 1rem;
} }
} }
} }

2
src/common/Multiselect/styles.less
View file

@ -104,7 +104,7 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.modal-container, .popup-menu-container { .modal-container, .popup-menu-container {
.menu-container { .menu-container {
max-height: 19em; max-height: 19rem;
overflow-y: auto; overflow-y: auto;
} }
} }

2
src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
View file

@ -105,6 +105,6 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.nav-menu-container { .nav-menu-container {
max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1em); max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem);
} }
} }

7
src/common/NavBar/HorizontalNavBar/styles.less
View file

@ -96,11 +96,14 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.horizontal-nav-bar-container { .horizontal-nav-bar-container {
justify-content: space-between; justify-content: space-between;
gap: 0.5em;
padding-right: 0; padding-right: 0;
.logo-container { .logo-container {
width: 4em; width: var(--horizontal-nav-bar-size);
}
.search-bar {
margin: 0 0.5rem;
} }
.spacing { .spacing {

14
src/common/NavBar/VerticalNavBar/styles.less
View file

@ -32,16 +32,20 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: var(--vertical-nav-bar-size) !important; height: var(--vertical-nav-bar-size);
width: 100% !important; width: 100%;
overflow: hidden !important; overflow-y: hidden;
overflow-x: auto !important; overflow-x: auto;
.nav-tab-button { .nav-tab-button {
flex: none; flex: none;
&:first-child { &:first-child {
margin-top: 0 !important; margin-top: 0;
}
&:last-child {
margin-bottom: 0;
} }
} }
} }

11
src/routes/Addons/Addon/styles.less
View file

@ -171,22 +171,20 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.addon-container { .addon-container {
flex-direction: column; flex-wrap: wrap;
align-items: center;
gap: 2em;
.info-container { .info-container {
flex-basis: auto; margin-left: 0.5rem;
padding: 0; padding: 0;
} }
.buttons-container { .buttons-container {
flex: 0 1 100%;
margin-top: 1rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1.5em;
width: 100%;
.install-button-container, .uninstall-button-container, .share-button-container { .install-button-container, .uninstall-button-container, .share-button-container {
&:not(:first-child) { &:not(:first-child) {
@ -206,6 +204,7 @@
.install-button-container, .uninstall-button-container { .install-button-container, .uninstall-button-container {
flex-basis: 100%; flex-basis: 100%;
margin-right: 1rem;
} }
} }
} }

16
src/routes/Addons/Addons.js
View file

@ -81,15 +81,13 @@ const Addons = ({ urlParams, queryParams }) => {
<Icon className={styles['icon']} icon={'ic_plus'} /> <Icon className={styles['icon']} icon={'ic_plus'} />
<div className={styles['add-button-label']}>Add addon</div> <div className={styles['add-button-label']}>Add addon</div>
</Button> </Button>
<div className={styles['multiselect-inputs-container']}> {selectInputs.map((selectInput, index) => (
{selectInputs.map((selectInput, index) => ( <Multiselect
<Multiselect {...selectInput}
{...selectInput} key={index}
key={index} className={styles['select-input-container']}
className={styles['select-input-container']} />
/> ))}
))}
</div>
<div className={styles['spacing']} /> <div className={styles['spacing']} />
<SearchBar <SearchBar
className={styles['search-bar']} className={styles['search-bar']}

54
src/routes/Addons/styles.less
View file

@ -7,6 +7,10 @@
multiselect-menu-container: menu-container; multiselect-menu-container: menu-container;
} }
:import('~stremio/common/ModalDialog/styles.less') {
share-modal-content: modal-dialog-content;
}
:import('~stremio/common/ModalDialog/styles.less') { :import('~stremio/common/ModalDialog/styles.less') {
addon-modal-content: modal-dialog-content; addon-modal-content: modal-dialog-content;
cancel-button-label: label; cancel-button-label: label;
@ -76,23 +80,16 @@
} }
} }
.multiselect-inputs-container { .select-input-container {
flex: auto; flex-grow: 0;
display: flex; flex-shrink: 1;
flex-direction: row; flex-basis: 15rem;
overflow: visible; height: 3.5rem;
margin-right: 1.5rem;
.select-input-container { .multiselect-menu-container {
flex-grow: 0; max-height: calc(3.2rem * 7);
flex-shrink: 1; overflow: auto;
flex-basis: 15rem;
height: 3.5rem;
margin-right: 1.5rem;
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
} }
} }
@ -151,13 +148,15 @@
.filters-modal-content { .filters-modal-content {
display: flex; display: flex;
gap: 1em;
flex-direction: column; flex-direction: column;
overflow-y: visible !important;
overflow: visible; overflow: visible;
.select-input-container { .select-input-container {
height: 3.5em; height: 3.5em;
&:not(:last-child) {
margin-bottom: 1rem;
}
} }
} }
} }
@ -208,7 +207,7 @@
} }
.share-modal-container { .share-modal-container {
.addon-modal-content { .share-modal-content {
width: 30rem; width: 30rem;
.title-container { .title-container {
@ -271,21 +270,15 @@
.addons-container { .addons-container {
.addons-content { .addons-content {
.selectable-inputs-container { .selectable-inputs-container {
gap: 1em;
.add-button-container { .add-button-container {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: calc(3em + var(--horizontal-nav-bar-size)); bottom: calc(3rem + var(--horizontal-nav-bar-size));
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40, box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20; 0 1.1rem 0.85rem @color-background-dark5-20;
} }
.select-input-container { .select-input-container {
flex: 0 1 3.5em;
}
.multiselect-inputs-container {
display: none; display: none;
} }
@ -295,6 +288,7 @@
.search-bar { .search-bar {
flex-basis: 100%; flex-basis: 100%;
margin-right: 1rem;
} }
.filter-button { .filter-button {
@ -304,7 +298,13 @@
} }
} }
.add-addon-modal-container, .share-modal-container { .share-modal-container {
.share-modal-content {
width: auto;
}
}
.add-addon-modal-container {
.addon-modal-content { .addon-modal-content {
width: auto; width: auto;

19
src/routes/Board/styles.less
View file

@ -12,6 +12,7 @@
} }
.board-container { .board-container {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -187,24 +188,36 @@
.board-container { .board-container {
.board-content-container { .board-content-container {
.board-content { .board-content {
height: calc(100% - 4rem);
.board-row { .board-row {
margin: 2em 1em; padding: 2rem 1rem;
} }
.board-row-poster, .board-row-square { .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+4) { &:nth-child(n+4) {
display: none; display: none;
} }
} }
} }
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+3) {
display: none;
}
}
}
} }
} }
.board-warning-container { .board-warning-container {
width: 100%;
position: absolute; position: absolute;
left: 0;
right: 0;
bottom: var(--vertical-nav-bar-size); bottom: var(--vertical-nav-bar-size);
height: 4rem;
} }
} }
} }

48
src/routes/Discover/Discover.js
View file

@ -80,19 +80,17 @@ const Discover = ({ urlParams, queryParams }) => {
{ {
discover.defaultRequest ? discover.defaultRequest ?
<div className={styles['selectable-inputs-container']}> <div className={styles['selectable-inputs-container']}>
<div className={styles['multiselect-inputs-container']}> {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( <Multiselect
<Multiselect key={index}
key={index} className={styles['select-input']}
className={styles['select-input']} title={title}
title={title} options={options}
options={options} selected={selected}
selected={selected} renderLabelText={renderLabelText}
renderLabelText={renderLabelText} onSelect={onSelect}
onSelect={onSelect} />
/> ))}
))}
</div>
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}> <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} /> <Icon className={styles['filter-icon']} icon={'ic_filter'} />
</Button> </Button>
@ -188,19 +186,17 @@ const Discover = ({ urlParams, queryParams }) => {
{ {
inputsModalOpen && discover.defaultRequest ? inputsModalOpen && discover.defaultRequest ?
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}> <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
<div className={styles['selectable-input-container']}> {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( <Multiselect
<Multiselect key={index}
key={index} className={styles['select-input']}
className={styles['select-input']} title={title}
title={title} options={options}
options={options} selected={selected}
selected={selected} renderLabelText={renderLabelText}
renderLabelText={renderLabelText} onSelect={onSelect}
onSelect={onSelect} />
/> ))}
))}
</div>
</ModalDialog> </ModalDialog>
: :
null null

63
src/routes/Discover/styles.less
View file

@ -48,32 +48,25 @@
padding: 1.5rem; padding: 1.5rem;
overflow: visible; overflow: visible;
.multiselect-inputs-container { .select-input {
flex: auto; flex: 0 1 15rem;
display: flex; height: 3.5rem;
flex-direction: row;
overflow: visible;
.select-input { &:not(:first-child) {
flex: 0 1 15rem; margin-left: 1.5rem;
height: 3.5rem; }
&:not(:first-child) { &:nth-child(n+4) {
margin-left: 1.5rem; display: none;
&~.filter-container {
display: flex;
} }
}
&:nth-child(n+4) { .multiselect-menu-container {
display: none; max-height: calc(3.2rem * 7);
overflow: auto;
&~.filter-container {
display: flex;
}
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
} }
} }
@ -84,6 +77,7 @@
justify-content: center; justify-content: center;
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
margin-left: 1.5rem;
background-color: @color-background; background-color: @color-background;
.filter-icon { .filter-icon {
@ -131,10 +125,6 @@
width: 3rem; width: 3rem;
} }
} }
.filters {
display: none;
}
} }
.missing-addon-warning-container { .missing-addon-warning-container {
@ -255,17 +245,13 @@
overflow: visible; overflow: visible;
.selectable-inputs-modal-content { .selectable-inputs-modal-content {
overflow-y: visible !important;
overflow: visible; overflow: visible;
.selectable-input-container { .select-input {
display: flex; height: 3.5rem;
gap: 1em;
flex-direction: column;
overflow: visible;
.select-input { &:not(:last-child) {
height: 3.5em; margin-bottom: 1rem;
} }
} }
} }
@ -438,17 +424,8 @@
.selectable-inputs-container { .selectable-inputs-container {
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
gap: 1em;
.select-input { .select-input {
flex: 0 1 3.5em;
&:not(:first-child) {
margin-left: 0;
}
}
.multiselect-inputs-container {
display: none; display: none;
} }

12
src/routes/Library/Library.js
View file

@ -54,10 +54,8 @@ const Library = ({ model, urlParams, queryParams }) => {
{ {
model === 'continue_watching' || profile.auth !== null ? model === 'continue_watching' || profile.auth !== null ?
<div className={styles['selectable-inputs-container']}> <div className={styles['selectable-inputs-container']}>
<div className={styles['multiselect-inputs-container']}> <Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...typeSelect} className={styles['select-input-container']} /> <Multiselect {...sortSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
</div>
<div className={styles['spacing']} /> <div className={styles['spacing']} />
{ {
paginationInput !== null ? paginationInput !== null ?
@ -116,10 +114,8 @@ const Library = ({ model, urlParams, queryParams }) => {
{ {
inputsModalOpen ? inputsModalOpen ?
<ModalDialog title={'Library filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}> <ModalDialog title={'Library filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
<div className={styles['selectable-input-container']}> <Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...typeSelect} className={styles['select-input-container']} /> <Multiselect {...sortSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
</div>
</ModalDialog> </ModalDialog>
: :
null null

62
src/routes/Library/styles.less
View file

@ -39,26 +39,19 @@
padding: 1.5rem; padding: 1.5rem;
overflow: visible; overflow: visible;
.multiselect-inputs-container { .select-input-container {
flex: auto; flex-grow: 0;
display: flex; flex-shrink: 1;
flex-direction: row; flex-basis: 15rem;
overflow: visible; height: 3.5rem;
.select-input-container { &:not(:last-child) {
flex-grow: 0; margin-right: 1.5rem;
flex-shrink: 1; }
flex-basis: 15rem;
height: 3.5rem;
&:not(:last-child) { .multiselect-menu-container {
margin-right: 1.5rem; max-height: calc(3.2rem * 7);
} overflow: auto;
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
} }
} }
@ -116,10 +109,6 @@
width: 3rem; width: 3rem;
} }
} }
.filters {
display: none;
}
} }
.message-container { .message-container {
@ -201,17 +190,13 @@
overflow: visible; overflow: visible;
.selectable-inputs-modal-content { .selectable-inputs-modal-content {
overflow-y: visible !important;
overflow: visible; overflow: visible;
.selectable-input-container { .select-input-container {
display: flex; height: 3.5em;
gap: 1em;
flex-direction: column;
overflow: visible;
.select-input-container { &:not(:last-child) {
height: 3.5em; margin-bottom: 1rem;
} }
} }
} }
@ -293,24 +278,11 @@
.library-content { .library-content {
.selectable-inputs-container { .selectable-inputs-container {
justify-content: space-between; justify-content: space-between;
gap: 1em;
.select-input-container { .select-input-container {
flex-basis: 3.5em;
&:not(:last-child) {
margin-right: 0;
}
}
.multiselect-inputs-container {
display: none; display: none;
} }
.filter-container {
display: flex;
}
.spacing { .spacing {
display: none; display: none;
} }
@ -318,6 +290,10 @@
.pagination-input { .pagination-input {
margin-left: 0; margin-left: 0;
} }
.filter-container {
display: flex;
}
} }
.meta-items-container { .meta-items-container {

4
src/routes/Player/ControlBar/ControlBar.js
View file

@ -33,7 +33,7 @@ const ControlBar = ({
}) => { }) => {
const { chromecast } = useServices(); const { chromecast } = useServices();
const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active); const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active);
const [buttonsMenuOpen,,, toogleButtonsMenu] = useBinaryState(false); const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false);
const onSubtitlesButtonMouseDown = React.useCallback((event) => { const onSubtitlesButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesMenuClosePrevented = true; event.nativeEvent.subtitlesMenuClosePrevented = true;
}, []); }, []);
@ -115,7 +115,7 @@ const ControlBar = ({
/> />
<div className={styles['spacing']} /> <div className={styles['spacing']} />
<Button className={styles['control-bar-buttons-menu-button']} onClick={toogleButtonsMenu}> <Button className={styles['control-bar-buttons-menu-button']} onClick={toogleButtonsMenu}>
<Icon className={styles['icon']} icon="ic_more"/> <Icon className={styles['icon']} icon={'ic_more'} />
</Button> </Button>
<div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}> <div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}> <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>

12
src/routes/Player/ControlBar/styles.less
View file

@ -71,6 +71,7 @@
} }
.control-bar-buttons-menu-container { .control-bar-buttons-menu-container {
flex: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -82,12 +83,13 @@
padding: 0; padding: 0;
.seek-bar { .seek-bar {
padding: 0 1.5em; margin: 0 1.5rem;
} }
.control-bar-buttons-container { .control-bar-buttons-container {
gap: 0.5em; position: relative;
padding: 0 0.5em; padding: 0 0.5rem;
overflow: visible;
.control-bar-buttons-menu-button { .control-bar-buttons-menu-button {
display: flex; display: flex;
@ -95,10 +97,10 @@
.control-bar-buttons-menu-container { .control-bar-buttons-menu-container {
position: absolute; position: absolute;
right: 0.15em; right: 0.15rem;
bottom: 4.5rem; bottom: 4.5rem;
flex-direction: column; flex-direction: column;
padding: 0.5em; padding: 0.5rem;
background-color: @color-background-dark1; background-color: @color-background-dark1;
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40, box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20; 0 1.1rem 0.85rem @color-background-dark5-20;

4
src/routes/Search/styles.less
View file

@ -224,7 +224,7 @@
.search-container { .search-container {
.search-content { .search-content {
.search-row { .search-row {
margin: 2rem 1rem; padding: 2rem 1rem;
} }
.search-row-poster, .search-row-square { .search-row-poster, .search-row-square {
@ -236,7 +236,7 @@
} }
.search-hints-container { .search-hints-container {
padding: 4rem 2em; padding: 4rem 2rem;
.search-hint-container { .search-hint-container {
padding: 0 1.5rem; padding: 0 1.5rem;

2
src/routes/Settings/styles.less
View file

@ -367,7 +367,7 @@
.side-menu-container { .side-menu-container {
width: 100%; width: 100%;
padding: 0 1em; padding: 0 1rem;
.side-menu-button { .side-menu-button {
display: none; display: none;