mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 06:32:11 +00:00
styling vertical and horizontal nav bars acording to the new design
This commit is contained in:
nklhrstv
parent
d087c6e4df
commit
f6cc388b8f
14 changed files with 232 additions and 309 deletions
|
|
@ -1,20 +0,0 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const Button = require('stremio/common/Button');
|
||||
const styles = require('./styles');
|
||||
|
||||
const AddonsButton = ({ className }) => {
|
||||
return (
|
||||
<Button className={classnames(className, styles['addons-button-container'])} href={'#/addons'} tabIndex={-1}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
AddonsButton.propTypes = {
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = AddonsButton;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
const AddonsButton = require('./AddonsButton');
|
||||
|
||||
module.exports = AddonsButton;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.addons-button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const Button = require('stremio/common/Button');
|
||||
const useFullscreen = require('stremio/common/useFullscreen');
|
||||
const styles = require('./styles');
|
||||
|
||||
const FullscreenButton = ({ className }) => {
|
||||
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
|
||||
return (
|
||||
<Button className={classnames(className, styles['fullscreen-button-container'])} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
|
||||
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
FullscreenButton.propTypes = {
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = FullscreenButton;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
const FullscreenButton = require('./FullscreenButton');
|
||||
|
||||
module.exports = FullscreenButton;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.fullscreen-button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,9 +4,8 @@ const classnames = require('classnames');
|
|||
const Icon = require('stremio-icons/dom');
|
||||
const Button = require('stremio/common/Button');
|
||||
const Image = require('stremio/common/Image');
|
||||
const useFullscreen = require('stremio/common/useFullscreen');
|
||||
const SearchBar = require('./SearchBar');
|
||||
const AddonsButton = require('./AddonsButton');
|
||||
const FullscreenButton = require('./FullscreenButton');
|
||||
const NavMenu = require('./NavMenu');
|
||||
const styles = require('./styles');
|
||||
|
||||
|
|
@ -14,11 +13,18 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
|
|||
const backButtonOnClick = React.useCallback(() => {
|
||||
window.history.back();
|
||||
}, []);
|
||||
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
|
||||
const renderNavBarLabel = React.useMemo(() => ({ ref, className, onClick, children, }) => (
|
||||
<Button ref={ref} className={classnames(className, styles['button-container'])} tabIndex={-1} onClick={onClick}>
|
||||
<Icon className={styles['icon']} icon={'ic_more'} />
|
||||
{children}
|
||||
</Button>
|
||||
), []);
|
||||
return (
|
||||
<nav className={classnames(className, styles['horizontal-nav-bar-container'])}>
|
||||
{
|
||||
backButton ?
|
||||
<Button className={styles['back-button-container']} tabIndex={-1} onClick={backButtonOnClick}>
|
||||
<Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
|
||||
<Icon className={styles['icon']} icon={'ic_back_ios'} />
|
||||
</Button>
|
||||
:
|
||||
|
|
@ -50,19 +56,23 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
|
|||
<div className={styles['spacing']} />
|
||||
{
|
||||
addonsButton ?
|
||||
<AddonsButton className={styles['addons-button']} />
|
||||
<Button className={styles['button-container']} href={'#/addons'} tabIndex={-1}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
</Button>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
fullscreenButton ?
|
||||
<FullscreenButton className={styles['fullscreen-button']} />
|
||||
<Button className={styles['button-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
|
||||
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
|
||||
</Button>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
navMenu ?
|
||||
<NavMenu className={styles['nav-menu']} />
|
||||
<NavMenu renderLabel={renderNavBarLabel} />
|
||||
:
|
||||
null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const useFullscreen = require('stremio/common/useFullscreen');
|
|||
const useProfile = require('stremio/common/useProfile');
|
||||
const styles = require('./styles');
|
||||
|
||||
const NavMenu = ({ className }) => {
|
||||
const NavMenu = (props) => {
|
||||
const { core } = useServices();
|
||||
const profile = useProfile();
|
||||
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
|
||||
|
|
@ -31,82 +31,86 @@ const NavMenu = ({ className }) => {
|
|||
}
|
||||
});
|
||||
}, []);
|
||||
const renderLabel = React.useMemo(() => ({ ref, className, children }) => (
|
||||
props.renderLabel({
|
||||
ref,
|
||||
className: classnames(className, { 'active': menuOpen }),
|
||||
onClick: popupLabelOnClick,
|
||||
children,
|
||||
})
|
||||
), [menuOpen, popupLabelOnClick]);
|
||||
const renderMenu = React.useMemo(() => () => (
|
||||
<div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
|
||||
<div className={styles['user-info-container']}>
|
||||
<div
|
||||
className={styles['avatar-container']}
|
||||
style={{
|
||||
backgroundImage: profile.auth === null ?
|
||||
'url(\'/images/anonymous.png\')'
|
||||
:
|
||||
`url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')`
|
||||
}}
|
||||
/>
|
||||
<div className={styles['email-container']}>
|
||||
<div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
|
||||
</div>
|
||||
<Button className={styles['logout-button-container']} title={profile.auth === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
|
||||
<div className={styles['logout-label']}>{profile.auth === null ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
|
||||
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
|
||||
<div className={styles['nav-menu-option-label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Settings'} href={'#/settings'}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />
|
||||
<div className={styles['nav-menu-option-label']}>Settings</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Addons'} href={'#/addons'}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
<div className={styles['nav-menu-option-label']}>Addons</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Remote Control'}>
|
||||
<Icon className={styles['icon']} icon={'ic_remote'} />
|
||||
<div className={styles['nav-menu-option-label']}>Remote Control</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'}>
|
||||
<Icon className={styles['icon']} icon={'ic_magnet'} />
|
||||
<div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Help & Feedback'} href={'https://stremio.zendesk.com/'} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_help'} />
|
||||
<div className={styles['nav-menu-option-label']}>Help & Feedback</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Terms of Service'} href={'https://www.stremio.com/tos'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Terms of Service</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Privacy Policy'} href={'https://www.stremio.com/privacy'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Privacy Policy</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'About Stremio'} href={'https://www.stremio.com/'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>About Stremio</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
), [profile, fullscreen]);
|
||||
return (
|
||||
<Popup
|
||||
open={menuOpen}
|
||||
onCloseRequest={closeMenu}
|
||||
renderLabel={({ ref, className: popupLabelClassName, children }) => (
|
||||
<Button ref={ref} className={classnames(className, popupLabelClassName, styles['nav-menu-label-container'], { 'active': menuOpen })} tabIndex={-1} onClick={popupLabelOnClick}>
|
||||
<Icon className={styles['icon']} icon={'ic_more'} />
|
||||
{children}
|
||||
</Button>
|
||||
)}
|
||||
renderMenu={() => (
|
||||
<div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
|
||||
<div className={styles['user-info-container']}>
|
||||
<div
|
||||
className={styles['avatar-container']}
|
||||
style={{
|
||||
backgroundImage: profile.auth === null ?
|
||||
'url(\'/images/anonymous.png\')'
|
||||
:
|
||||
`url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')`
|
||||
}}
|
||||
/>
|
||||
<div className={styles['email-container']}>
|
||||
<div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
|
||||
</div>
|
||||
<Button className={styles['logout-button-container']} title={profile.auth === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
|
||||
<div className={styles['logout-label']}>{profile.auth === null ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
|
||||
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
|
||||
<div className={styles['nav-menu-option-label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Settings'} href={'#/settings'}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />
|
||||
<div className={styles['nav-menu-option-label']}>Settings</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Addons'} href={'#/addons'}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
<div className={styles['nav-menu-option-label']}>Addons</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Remote Control'}>
|
||||
<Icon className={styles['icon']} icon={'ic_remote'} />
|
||||
<div className={styles['nav-menu-option-label']}>Remote Control</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'}>
|
||||
<Icon className={styles['icon']} icon={'ic_magnet'} />
|
||||
<div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Help & Feedback'} href={'https://stremio.zendesk.com/'} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_help'} />
|
||||
<div className={styles['nav-menu-option-label']}>Help & Feedback</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Terms of Service'} href={'https://www.stremio.com/tos'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Terms of Service</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Privacy Policy'} href={'https://www.stremio.com/privacy'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>Privacy Policy</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'About Stremio'} href={'https://www.stremio.com/'} target={'_blank'}>
|
||||
<div className={styles['nav-menu-option-label']}>About Stremio</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
renderLabel={renderLabel}
|
||||
renderMenu={renderMenu}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
NavMenu.propTypes = {
|
||||
className: PropTypes.string
|
||||
renderLabel: PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = NavMenu;
|
||||
|
|
|
|||
|
|
@ -1,116 +1,96 @@
|
|||
.nav-menu-label-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
.nav-menu-container {
|
||||
width: 20rem;
|
||||
background-color: @color-background-dark2;
|
||||
|
||||
&:global(.active) {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
.user-info-container {
|
||||
display: grid;
|
||||
height: 7rem;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
grid-template-rows: 50% 50%;
|
||||
grid-template-areas:
|
||||
"avatar-area email-area"
|
||||
"avatar-area logout-button-area";
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
.avatar-container {
|
||||
grid-area: avatar-area;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-origin: content-box;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.nav-menu-container {
|
||||
width: 20rem;
|
||||
background-color: var(--color-background);
|
||||
.email-container {
|
||||
grid-area: email-area;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem 0 0;
|
||||
|
||||
.user-info-container {
|
||||
display: grid;
|
||||
height: 7rem;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
grid-template-rows: 50% 50%;
|
||||
grid-template-areas:
|
||||
"avatar-area email-area"
|
||||
"avatar-area logout-button-area";
|
||||
|
||||
.avatar-container {
|
||||
grid-area: avatar-area;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-origin: content-box;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
grid-area: email-area;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem 0 0;
|
||||
|
||||
.email-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.logout-button-container {
|
||||
grid-area: logout-button-area;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 1rem 1rem 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
|
||||
.logout-label {
|
||||
color: var(--color-surfacelighter);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
.email-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
color: @color-surface-light5;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu-section {
|
||||
border-top: thin solid var(--color-surfacedark80);
|
||||
.logout-button-container {
|
||||
grid-area: logout-button-area;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 1rem 1rem 0;
|
||||
|
||||
.nav-menu-option-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 4rem;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
.logout-label {
|
||||
color: @color-surface-light5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin: 1.3rem;
|
||||
fill: var(--color-secondarylight);
|
||||
}
|
||||
.logout-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
color: @color-surface-light3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu-option-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
padding-right: 1.3rem;
|
||||
color: var(--color-surfacelighter);
|
||||
.nav-menu-section {
|
||||
border-top: thin solid @color-surface-dark5;
|
||||
|
||||
&:only-child {
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
.nav-menu-option-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 4rem;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-background-dark1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin: 1.3rem;
|
||||
fill: @color-secondaryvariant2-light1;
|
||||
}
|
||||
|
||||
.nav-menu-option-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
padding-right: 1.3rem;
|
||||
color: @color-surface-light5;
|
||||
|
||||
&:only-child {
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,11 @@
|
|||
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
|
||||
|
||||
.search-bar-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--color-secondary60);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
.submit-button-container {
|
||||
background-color: var(--color-secondarylight);
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.active) {
|
||||
background-color: var(--color-background);
|
||||
|
||||
.submit-button-container {
|
||||
background-color: var(--color-secondarylight);
|
||||
}
|
||||
}
|
||||
height: calc(var(--horizontal-nav-bar-size) * 0.7);
|
||||
border-radius: calc(var(--horizontal-nav-bar-size) * 0.7);
|
||||
background-color: @color-background-dark3;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
|
|
@ -26,13 +14,13 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-secondaryvariant2-light1;
|
||||
cursor: text;
|
||||
|
||||
&::placeholder, .placeholder-label {
|
||||
max-height: 1.2em;
|
||||
opacity: 1;
|
||||
color: var(--color-surfacelight);
|
||||
color: @color-secondaryvariant2-light1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -42,15 +30,14 @@
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: var(--horizontal-nav-bar-size);
|
||||
height: var(--horizontal-nav-bar-size);
|
||||
background-color: var(--color-secondarylight60);
|
||||
width: calc(var(--horizontal-nav-bar-size) * 0.7);
|
||||
height: calc(var(--horizontal-nav-bar-size) * 0.7);
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: var(--color-surfacelighter);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: @color-secondaryvariant2-light1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,21 @@
|
|||
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
|
||||
|
||||
.horizontal-nav-bar-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: var(--horizontal-nav-bar-size);
|
||||
background-color: var(--color-secondarydark);
|
||||
background-color: @color-background-dark1;
|
||||
overflow: visible;
|
||||
|
||||
.logo-container, .back-button-container {
|
||||
.logo-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--vertical-nav-bar-size);
|
||||
height: var(--horizontal-nav-bar-size);
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
.logo {
|
||||
flex: none;
|
||||
width: 70%;
|
||||
|
|
@ -24,28 +25,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.back-button-container {
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-secondaryvariant2-light1;
|
||||
|
||||
&+.spacing {
|
||||
display: none;
|
||||
|
|
@ -60,7 +48,6 @@
|
|||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 25rem;
|
||||
align-self: stretch;
|
||||
min-width: 9.5rem;
|
||||
|
||||
&+.spacing {
|
||||
|
|
@ -68,9 +55,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
.addons-button, .fullscreen-button, .notifications-menu, .nav-menu {
|
||||
.button-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--horizontal-nav-bar-size);
|
||||
height: var(--horizontal-nav-bar-size);
|
||||
|
||||
&.back-button-container {
|
||||
width: var(--vertical-nav-bar-size);
|
||||
height: var(--horizontal-nav-bar-size);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @color-background;
|
||||
}
|
||||
|
||||
&:global(.active) {
|
||||
background-color: @color-background-dark2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
fill: @color-secondaryvariant2-light1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,12 +6,24 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:global(.selected) {
|
||||
background-color: @color-secondary-dark4;
|
||||
&:hover {
|
||||
background-color: @color-background-dark1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @color-secondary-dark3;
|
||||
&:global(.selected) {
|
||||
background-color: @color-secondaryvariant1-dark5;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-secondary-dark3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: @color-surface-light5;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @color-surface-light5;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -19,7 +31,7 @@
|
|||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
fill: @color-secondaryvariant2-light2;
|
||||
fill: @color-secondary-light2;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -29,6 +41,6 @@
|
|||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: @color-surface-light5;
|
||||
color: @color-secondary-light2;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
|
||||
@import (reference) '~stremio/common/screen-sizes.less';
|
||||
|
||||
:import('~stremio/common/MetaRow/styles.less') {
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
grid-template-areas:
|
||||
"horizontal-nav-bar horizontal-nav-bar"
|
||||
"vertical-nav-bar board-content";
|
||||
background-color: var(--color-background);
|
||||
background-color: @color-background-dark2;
|
||||
|
||||
.horizontal-nav-bar {
|
||||
grid-area: horizontal-nav-bar;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
|
||||
@import (reference) '~stremio/common/screen-sizes.less';
|
||||
|
||||
:import('~stremio/common/MetaRow/styles.less') {
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
grid-template-areas:
|
||||
"horizontal-nav-bar horizontal-nav-bar"
|
||||
"vertical-nav-bar search-content";
|
||||
background-color: var(--color-background);
|
||||
background-color: @color-background-dark2;
|
||||
|
||||
|
||||
.horizontal-nav-bar {
|
||||
|
|
|
|||
Loading…
Reference in a new issue