Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +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) {
html {
min-width: inherit !important;
min-height: inherit !important;
min-width: inherit;
min-height: inherit;
}
}

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

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

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

@ -1,7 +1,6 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.color-input-container {
position: relative;
@ -33,10 +32,4 @@
.color-picker-container {
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) {
.main-nav-bars-container {
.nav-content-container {
left: 0 !important;
bottom: var(--vertical-nav-bar-size) !important;
left: 0;
bottom: var(--vertical-nav-bar-size);
}
.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) {
.meta-item-container {
display: flex;
flex-direction: column;
gap: 0.75em;
padding: 0.5em;
.poster-container {
flex: auto;
}
padding: 0.5rem;
.title-bar-container {
height: 2.5rem;
flex: auto;
align-items: flex-start;
margin-top: 0.5rem;
.title-label {
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) {
.action-button-container {
flex-direction: row;
padding: 0 1.5rem;
.icon-container {
flex: none;
align-self: center;
flex: 0 0 auto;
height: 2em;
width: 2em;
height: 2rem;
width: 2rem;
padding-top: 0;
margin-right: 0.5rem;
&:only-child {
padding: 0;
margin-right: 0;
}
}
.label-container {
flex: 0 0 auto;
flex: 1;
}
}
}

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

@ -210,9 +210,7 @@
}
.action-buttons-container {
max-height: 9.5rem;
flex-wrap: nowrap;
gap: 1em;
padding: 0 1.5rem;
overflow-x: visible;
scrollbar-width: none;
@ -222,18 +220,19 @@
}
.action-button {
height: 4rem;
width: auto;
display: flex;
flex-direction: row;
gap: 0.75em;
padding: 0 1.5em;
height: 4rem;
max-width: 60%;
margin: 1rem 0;
&: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-items-container {
.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) {
.meta-row-container {
.header-container {
gap: 0.5em;
padding: 0 0.5em;
.title-container {
margin-right: 0.5rem;
white-space: nowrap;
text-overflow: ellipsis;
}

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

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

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

@ -105,6 +105,6 @@
@media only screen and (max-width: @minimum) {
.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) {
.horizontal-nav-bar-container {
justify-content: space-between;
gap: 0.5em;
padding-right: 0;
.logo-container {
width: 4em;
width: var(--horizontal-nav-bar-size);
}
.search-bar {
margin: 0 0.5rem;
}
.spacing {

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

@ -32,16 +32,20 @@
display: flex;
flex-direction: row;
justify-content: space-between;
height: var(--vertical-nav-bar-size) !important;
width: 100% !important;
overflow: hidden !important;
overflow-x: auto !important;
height: var(--vertical-nav-bar-size);
width: 100%;
overflow-y: hidden;
overflow-x: auto;
.nav-tab-button {
flex: none;
&: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) {
.addon-container {
flex-direction: column;
align-items: center;
gap: 2em;
flex-wrap: wrap;
.info-container {
flex-basis: auto;
margin-left: 0.5rem;
padding: 0;
}
.buttons-container {
flex: 0 1 100%;
margin-top: 1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.5em;
width: 100%;
.install-button-container, .uninstall-button-container, .share-button-container {
&:not(:first-child) {
@ -206,6 +204,7 @@
.install-button-container, .uninstall-button-container {
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'} />
<div className={styles['add-button-label']}>Add addon</div>
</Button>
<div className={styles['multiselect-inputs-container']}>
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))}
</div>
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))}
<div className={styles['spacing']} />
<SearchBar
className={styles['search-bar']}

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

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

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

@ -12,6 +12,7 @@
}
.board-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
@ -187,24 +188,36 @@
.board-container {
.board-content-container {
.board-content {
height: calc(100% - 4rem);
.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 {
&:nth-child(n+4) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+3) {
display: none;
}
}
}
}
}
.board-warning-container {
width: 100%;
position: absolute;
left: 0;
right: 0;
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 ?
<div className={styles['selectable-inputs-container']}>
<div className={styles['multiselect-inputs-container']}>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
<Multiselect
key={index}
className={styles['select-input']}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
onSelect={onSelect}
/>
))}
</div>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
<Multiselect
key={index}
className={styles['select-input']}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
onSelect={onSelect}
/>
))}
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
</Button>
@ -188,19 +186,17 @@ const Discover = ({ urlParams, queryParams }) => {
{
inputsModalOpen && discover.defaultRequest ?
<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) => (
<Multiselect
key={index}
className={styles['select-input']}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
onSelect={onSelect}
/>
))}
</div>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
<Multiselect
key={index}
className={styles['select-input']}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
onSelect={onSelect}
/>
))}
</ModalDialog>
:
null

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

@ -48,32 +48,25 @@
padding: 1.5rem;
overflow: visible;
.multiselect-inputs-container {
flex: auto;
display: flex;
flex-direction: row;
overflow: visible;
.select-input {
flex: 0 1 15rem;
height: 3.5rem;
.select-input {
flex: 0 1 15rem;
height: 3.5rem;
&:not(:first-child) {
margin-left: 1.5rem;
}
&:not(:first-child) {
margin-left: 1.5rem;
&:nth-child(n+4) {
display: none;
&~.filter-container {
display: flex;
}
}
&:nth-child(n+4) {
display: none;
&~.filter-container {
display: flex;
}
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
}
@ -84,6 +77,7 @@
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-left: 1.5rem;
background-color: @color-background;
.filter-icon {
@ -131,10 +125,6 @@
width: 3rem;
}
}
.filters {
display: none;
}
}
.missing-addon-warning-container {
@ -255,17 +245,13 @@
overflow: visible;
.selectable-inputs-modal-content {
overflow-y: visible !important;
overflow: visible;
.selectable-input-container {
display: flex;
gap: 1em;
flex-direction: column;
overflow: visible;
.select-input {
height: 3.5rem;
.select-input {
height: 3.5em;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
@ -438,17 +424,8 @@
.selectable-inputs-container {
flex-direction: row-reverse;
justify-content: space-between;
gap: 1em;
.select-input {
flex: 0 1 3.5em;
&:not(:first-child) {
margin-left: 0;
}
}
.multiselect-inputs-container {
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 ?
<div className={styles['selectable-inputs-container']}>
<div className={styles['multiselect-inputs-container']}>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
</div>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
<div className={styles['spacing']} />
{
paginationInput !== null ?
@ -116,10 +114,8 @@ const Library = ({ model, urlParams, queryParams }) => {
{
inputsModalOpen ?
<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 {...sortSelect} className={styles['select-input-container']} />
</div>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
</ModalDialog>
:
null

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

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

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

@ -33,7 +33,7 @@ const ControlBar = ({
}) => {
const { chromecast } = useServices();
const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active);
const [buttonsMenuOpen,,, toogleButtonsMenu] = useBinaryState(false);
const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false);
const onSubtitlesButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesMenuClosePrevented = true;
}, []);
@ -115,7 +115,7 @@ const ControlBar = ({
/>
<div className={styles['spacing']} />
<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>
<div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
<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 {
flex: none;
display: flex;
flex-direction: row;
}
@ -82,12 +83,13 @@
padding: 0;
.seek-bar {
padding: 0 1.5em;
margin: 0 1.5rem;
}
.control-bar-buttons-container {
gap: 0.5em;
padding: 0 0.5em;
position: relative;
padding: 0 0.5rem;
overflow: visible;
.control-bar-buttons-menu-button {
display: flex;
@ -95,10 +97,10 @@
.control-bar-buttons-menu-container {
position: absolute;
right: 0.15em;
right: 0.15rem;
bottom: 4.5rem;
flex-direction: column;
padding: 0.5em;
padding: 0.5rem;
background-color: @color-background-dark1;
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;

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

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

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

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