mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
new color theme applied to settings
This commit is contained in:
nklhrstv
parent
d5dea1da8b
commit
30ecf2f805
3 changed files with 63 additions and 47 deletions
|
|
@ -1,3 +1,5 @@
|
|||
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
|
||||
|
||||
.color-input-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
|
@ -13,13 +15,13 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.5rem;
|
||||
border: thin solid var(--color-surfacelighter20);
|
||||
border: thin solid @color-surface-light5-20;
|
||||
pointer-events: none;
|
||||
|
||||
.transparent-label {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-surface-light5;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -28,4 +30,4 @@
|
|||
|
||||
.color-picker-container {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -148,6 +148,9 @@ const Settings = () => {
|
|||
null
|
||||
}
|
||||
</div>
|
||||
<Button className={styles['user-panel-container']} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
|
||||
<div className={styles['user-panel-label']}>User Panel</div>
|
||||
</Button>
|
||||
</div>
|
||||
{
|
||||
profile.auth === null ?
|
||||
|
|
@ -157,18 +160,16 @@ const Settings = () => {
|
|||
</Button>
|
||||
</div>
|
||||
:
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
|
||||
<Icon className={styles['icon']} icon={'ic_user'} />
|
||||
<div className={styles['label']}>User panel</div>
|
||||
</Button>
|
||||
</div>
|
||||
null
|
||||
}
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Addons'} href={'#/addons'}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
<div className={styles['label']}>Addons</div>
|
||||
</Button>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Interface language</div>
|
||||
</div>
|
||||
<Multiselect
|
||||
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
|
||||
{...interfaceLanguageSelect}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
|
|
@ -197,15 +198,6 @@ const Settings = () => {
|
|||
<div className={styles['label']}>Subscribe</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<div className={styles['option-name-container']}>
|
||||
<div className={styles['label']}>Interface language</div>
|
||||
</div>
|
||||
<Multiselect
|
||||
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
|
||||
{...interfaceLanguageSelect}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['option-container']}>
|
||||
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Export user data'} onClick={exportDataOnClick}>
|
||||
<div className={styles['label']}>Export user data</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
|
||||
|
||||
:import('~stremio/common/Checkbox/styles.less') {
|
||||
checkbox-icon: icon;
|
||||
}
|
||||
|
|
@ -10,7 +12,7 @@
|
|||
.settings-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
background-color: @color-background-dark2;
|
||||
|
||||
.settings-content {
|
||||
width: 100%;
|
||||
|
|
@ -23,23 +25,23 @@
|
|||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 17rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-backgroundlighter);
|
||||
width: 20rem;
|
||||
padding: 3rem;
|
||||
|
||||
.side-menu-button {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
padding: 1rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-secondaryvariant1;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--color-background);
|
||||
background-color: @color-background;
|
||||
color: @color-surface-light5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface20);
|
||||
background-color: @color-background-light1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -49,7 +51,7 @@
|
|||
|
||||
.version-info-label {
|
||||
margin: 0.5rem 0;
|
||||
color: var(--color-surfacelight);
|
||||
color: @color-secondaryvariant1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,15 +64,11 @@
|
|||
.section-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 0;
|
||||
padding: 3rem 0;
|
||||
overflow: visible;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: thin solid var(--color-primary40);
|
||||
border-bottom: thin solid @color-primary;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
|
|
@ -79,7 +77,7 @@
|
|||
font-size: 1.8rem;
|
||||
line-height: 3.4rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-surface-light5;
|
||||
}
|
||||
|
||||
.option-container {
|
||||
|
|
@ -97,12 +95,12 @@
|
|||
}
|
||||
|
||||
&.user-info-option-container {
|
||||
height: 7rem;
|
||||
height: 6rem;
|
||||
|
||||
.avatar-container {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
width: 7rem;
|
||||
width: 6rem;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
|
|
@ -130,9 +128,9 @@
|
|||
|
||||
.email-label {
|
||||
flex: 1;
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.1rem;
|
||||
max-height: 2.4em;
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-surface-light5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +141,7 @@
|
|||
outline: none;
|
||||
|
||||
.logout-label {
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-surface-light5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -151,10 +149,34 @@
|
|||
.logout-label {
|
||||
flex: 1;
|
||||
max-height: 1.2em;
|
||||
color: var(--color-surface);
|
||||
color: @color-surface;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 3.5rem;
|
||||
margin-left: 1rem;
|
||||
background-color: @color-accent3;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-accent3-light1;
|
||||
}
|
||||
|
||||
.user-panel-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
padding: 0 0.5rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: @color-surface-light5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-name-container, .option-input-container {
|
||||
|
|
@ -168,7 +190,7 @@
|
|||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
fill: var(--color-surfacelighter);
|
||||
fill: @color-surface-light5;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -176,7 +198,7 @@
|
|||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
line-height: 1.5rem;
|
||||
color: var(--color-surfacelighter);
|
||||
color: @color-surface-light5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -191,10 +213,10 @@
|
|||
|
||||
&.button-container {
|
||||
justify-content: center;
|
||||
background-color: var(--color-primary);
|
||||
background-color: @color-accent3;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primarylight);
|
||||
background-color: @color-accent3-light1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue