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

nav bars styled

Browse source
This commit is contained in:
nklhrstv 2020-02-25 14:38:29 +02:00
parent 19132242cd
commit d14525b4fa
7 changed files with 56 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App/styles.less
View file

@ -11,7 +11,7 @@
--poster-shape-ratio: 1.464; --poster-shape-ratio: 1.464;
--scroll-bar-width: 6px; --scroll-bar-width: 6px;
--horizontal-nav-bar-size: 4rem; --horizontal-nav-bar-size: 4rem;
--vertical-nav-bar-size: 5rem; --vertical-nav-bar-size: 5.2rem;
--focus-outline-size: 2px; --focus-outline-size: 2px;
--color-facebook: #4267b2; --color-facebook: #4267b2;
--color-twitter: #1DA1F2; --color-twitter: #1DA1F2;

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

@ -2,7 +2,7 @@
.nav-menu-container { .nav-menu-container {
width: 20rem; width: 20rem;
background-color: @color-background-dark2; background-color: @color-background-light1;
.user-info-container { .user-info-container {
display: grid; display: grid;

4
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -34,14 +34,14 @@ const SearchBar = ({ className, query, active }) => {
ref={searchInputRef} ref={searchInputRef}
className={styles['search-input']} className={styles['search-input']}
type={'text'} type={'text'}
placeholder={'Search'} placeholder={'Search or paste link'}
defaultValue={query} defaultValue={query}
tabIndex={-1} tabIndex={-1}
onSubmit={queryInputOnSubmit} onSubmit={queryInputOnSubmit}
/> />
: :
<div className={styles['search-input']}> <div className={styles['search-input']}>
<div className={styles['placeholder-label']}>Search</div> <div className={styles['placeholder-label']}>Search or paste link</div>
</div> </div>
} }
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}> <Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>

33
src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
View file

@ -1,11 +1,16 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.search-bar-container { .search-bar-container {
--search-bar-size: calc(var(--horizontal-nav-bar-size) - 1rem);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: calc(var(--horizontal-nav-bar-size) * 0.7); height: var(--search-bar-size);
border-radius: calc(var(--horizontal-nav-bar-size) * 0.7); border-radius: var(--search-bar-size);
background-color: @color-background-dark3; background-color: @color-background-light2;
&:hover {
background-color: @color-background-light3;
}
.search-input { .search-input {
flex: 1; flex: 1;
@ -13,14 +18,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0 1rem; padding: 0 0.5rem 0 1.5rem;
color: @color-secondaryvariant2-light1; color: @color-secondaryvariant1-light1-90;
cursor: text; cursor: text;
&::placeholder, .placeholder-label { &::placeholder, .placeholder-label {
max-height: 1.2em; max-height: 1.2em;
opacity: 1; opacity: 1;
color: @color-secondaryvariant2-light1; color: @color-secondaryvariant1-light1-90;
} }
} }
@ -30,14 +35,20 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: calc(var(--horizontal-nav-bar-size) * 0.7); width: var(--search-bar-size);
height: calc(var(--horizontal-nav-bar-size) * 0.7); height: var(--search-bar-size);
&:hover {
.icon {
fill: @color-secondaryvariant2-light1;
}
}
.icon { .icon {
flex: none; flex: none;
width: 1.5rem; width: 1.7rem;
height: 1.5rem; height: 1.7rem;
fill: @color-secondaryvariant2-light1; fill: @color-secondaryvariant1;
} }
} }
} }

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

@ -5,7 +5,8 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: var(--horizontal-nav-bar-size); height: var(--horizontal-nav-bar-size);
background-color: @color-background-dark1; padding-right: 1rem;
background-color: @color-background;
overflow: visible; overflow: visible;
.logo-container { .logo-container {
@ -18,19 +19,24 @@
.logo { .logo {
flex: none; flex: none;
width: 70%; width: 2.5rem;
height: 70%; height: 2.5rem;
object-position: center; object-position: center;
object-fit: contain; object-fit: contain;
} }
} }
.spacing {
flex: 1 0 0;
}
.title { .title {
flex: 1; flex: 4 0 0;
padding: 0 1rem; padding: 0 1rem;
font-size: 1.1rem; font-size: 1.2rem;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
letter-spacing: 0.01rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
color: @color-secondaryvariant2-light1; color: @color-secondaryvariant2-light1;
@ -40,15 +46,9 @@
} }
} }
.spacing {
flex: 1;
}
.search-bar { .search-bar {
flex-grow: 0; flex: 2 0 9.5rem;
flex-shrink: 1; max-width: 30rem;
flex-basis: 25rem;
min-width: 9.5rem;
&+.spacing { &+.spacing {
max-width: 11rem; max-width: 11rem;
@ -69,17 +69,17 @@
} }
&:hover { &:hover {
background-color: @color-background; background-color: @color-background-light2;
} }
&:global(.active) { &:global(.active) {
background-color: @color-background-dark2; background-color: @color-background-light1;
} }
.icon { .icon {
flex: none; flex: none;
width: 1.8rem; width: 1.7rem;
height: 1.8rem; height: 1.7rem;
fill: @color-secondaryvariant2-light1; fill: @color-secondaryvariant2-light1;
} }
} }

20
src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
View file

@ -5,16 +5,17 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: @color-background;
&:hover { &:hover {
background-color: @color-background-dark1; background-color: @color-background-light2;
} }
&:global(.selected) { &:global(.selected) {
background-color: @color-secondaryvariant1-dark5; background-color: @color-secondaryvariant1-dark5;
&:hover { &:hover {
background-color: @color-secondary-dark3; background-color: @color-secondaryvariant1-dark4;
} }
.icon { .icon {
@ -22,25 +23,26 @@
} }
.label { .label {
color: @color-surface-light5; color: @color-surface-light5-90;
} }
} }
.icon { .icon {
flex: none; flex: none;
width: 1.5rem; width: 1.7rem;
height: 1.5rem; height: 1.7rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
fill: @color-secondary-light2; fill: @color-secondary-light5;
} }
.label { .label {
flex: none; flex: none;
max-height: 2.4em; max-height: 2.4em;
padding: 0 0.5rem; padding: 0 0.2rem;
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.01rem;
text-align: center; text-align: center;
color: @color-secondary-light2; color: @color-secondaryvariant1-90;
} }
} }

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

@ -15,8 +15,8 @@
display: grid; display: grid;
width: 100%; width: 100%;
height: 100%; height: 100%;
grid-template-columns: auto 1fr; grid-template-columns: var(--vertical-nav-bar-size) calc(100% - var(--vertical-nav-bar-size));
grid-template-rows: auto 1fr; grid-template-rows: var(--horizontal-nav-bar-size) calc(100% - var(--horizontal-nav-bar-size));
grid-template-areas: grid-template-areas:
"horizontal-nav-bar horizontal-nav-bar" "horizontal-nav-bar horizontal-nav-bar"
"vertical-nav-bar board-content"; "vertical-nav-bar board-content";