From 9c6404ed41a30501ec0bd4a7450eec1412b5649b Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 24 May 2022 14:01:04 +0300 Subject: [PATCH] styles updated --- src/App/styles.less | 4 +- src/common/ColorInput/ColorPicker/styles.less | 1 + src/common/ColorInput/styles.less | 7 --- src/common/MainNavBars/styles.less | 6 +- src/common/MetaItem/styles.less | 18 ++---- .../MetaPreview/ActionButton/styles.less | 15 +++-- src/common/MetaPreview/styles.less | 15 +++-- .../MetaRow/MetaRowPlaceholder/styles.less | 6 +- src/common/MetaRow/styles.less | 2 +- src/common/ModalDialog/styles.less | 22 ++++--- src/common/Multiselect/styles.less | 2 +- .../HorizontalNavBar/NavMenu/styles.less | 2 +- .../NavBar/HorizontalNavBar/styles.less | 7 ++- src/common/NavBar/VerticalNavBar/styles.less | 14 +++-- src/routes/Addons/Addon/styles.less | 11 ++-- src/routes/Addons/Addons.js | 16 +++-- src/routes/Addons/styles.less | 54 ++++++++-------- src/routes/Board/styles.less | 19 +++++- src/routes/Discover/Discover.js | 48 +++++++------- src/routes/Discover/styles.less | 63 ++++++------------- src/routes/Library/Library.js | 12 ++-- src/routes/Library/styles.less | 62 ++++++------------ src/routes/Player/ControlBar/ControlBar.js | 4 +- src/routes/Player/ControlBar/styles.less | 12 ++-- src/routes/Search/styles.less | 4 +- src/routes/Settings/styles.less | 2 +- 26 files changed, 197 insertions(+), 231 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 9cc75f671..e9a01575a 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -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; } } \ No newline at end of file diff --git a/src/common/ColorInput/ColorPicker/styles.less b/src/common/ColorInput/ColorPicker/styles.less index ddd9a12b2..6e06b1122 100644 --- a/src/common/ColorInput/ColorPicker/styles.less +++ b/src/common/ColorInput/ColorPicker/styles.less @@ -2,6 +2,7 @@ .color-picker-container { overflow: visible; + text-align: center; * { overflow: visible; diff --git a/src/common/ColorInput/styles.less b/src/common/ColorInput/styles.less index 31096d5f2..39c82b290 100644 --- a/src/common/ColorInput/styles.less +++ b/src/common/ColorInput/styles.less @@ -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; - } } \ No newline at end of file diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index b9ca98a06..8537da985 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -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; } } } \ No newline at end of file diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less index 749896268..4bd1cd3da 100644 --- a/src/common/MetaItem/styles.less +++ b/src/common/MetaItem/styles.less @@ -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; + } } } } diff --git a/src/common/MetaPreview/ActionButton/styles.less b/src/common/MetaPreview/ActionButton/styles.less index 720c735fc..6b0767b05 100644 --- a/src/common/MetaPreview/ActionButton/styles.less +++ b/src/common/MetaPreview/ActionButton/styles.less @@ -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; } } } \ No newline at end of file diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less index aa141b718..4d0bcd975 100644 --- a/src/common/MetaPreview/styles.less +++ b/src/common/MetaPreview/styles.less @@ -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%; + } } \ No newline at end of file diff --git a/src/common/MetaRow/MetaRowPlaceholder/styles.less b/src/common/MetaRow/MetaRowPlaceholder/styles.less index befe06adb..d2752a593 100644 --- a/src/common/MetaRow/MetaRowPlaceholder/styles.less +++ b/src/common/MetaRow/MetaRowPlaceholder/styles.less @@ -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; + } } } } diff --git a/src/common/MetaRow/styles.less b/src/common/MetaRow/styles.less index ae343e514..02c68bc7a 100644 --- a/src/common/MetaRow/styles.less +++ b/src/common/MetaRow/styles.less @@ -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; } diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less index 20bf7fd4f..b447a94f0 100644 --- a/src/common/ModalDialog/styles.less +++ b/src/common/ModalDialog/styles.less @@ -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; } } } diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index 6f5700a56..dc3741bc1 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -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; } } diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less index 1b9eba567..b890f8bb3 100644 --- a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less +++ b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less @@ -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); } } \ No newline at end of file diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 533e868c6..a18a41fb3 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -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 { diff --git a/src/common/NavBar/VerticalNavBar/styles.less b/src/common/NavBar/VerticalNavBar/styles.less index 7efb576e2..a601d2071 100644 --- a/src/common/NavBar/VerticalNavBar/styles.less +++ b/src/common/NavBar/VerticalNavBar/styles.less @@ -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; } } } diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less index c005cca69..50967b822 100644 --- a/src/routes/Addons/Addon/styles.less +++ b/src/routes/Addons/Addon/styles.less @@ -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; } } } diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index d2642a52d..1a889ae50 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -81,15 +81,13 @@ const Addons = ({ urlParams, queryParams }) => {
Add addon
-
- {selectInputs.map((selectInput, index) => ( - - ))} -
+ {selectInputs.map((selectInput, index) => ( + + ))}
{ { discover.defaultRequest ?
-
- {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( - - ))} -
+ {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( + + ))} @@ -188,19 +186,17 @@ const Discover = ({ urlParams, queryParams }) => { { inputsModalOpen && discover.defaultRequest ? -
- {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( - - ))} -
+ {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( + + ))} : null diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 7e6c28514..05599283f 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -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; } diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index 032366b0d..b350ce170 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -54,10 +54,8 @@ const Library = ({ model, urlParams, queryParams }) => { { model === 'continue_watching' || profile.auth !== null ?
-
- - -
+ +
{ paginationInput !== null ? @@ -116,10 +114,8 @@ const Library = ({ model, urlParams, queryParams }) => { { inputsModalOpen ? -
- - -
+ + : null diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index d9a4179c4..49a4f1987 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -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 { diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 469d04d1d..b63c453f4 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -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 = ({ />