Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +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;
--scroll-bar-width: 6px;
--horizontal-nav-bar-size: 4rem;
--vertical-nav-bar-size: 5rem;
--vertical-nav-bar-size: 5.2rem;
--focus-outline-size: 2px;
--color-facebook: #4267b2;
--color-twitter: #1DA1F2;

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

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

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

@ -34,14 +34,14 @@ const SearchBar = ({ className, query, active }) => {
ref={searchInputRef}
className={styles['search-input']}
type={'text'}
placeholder={'Search'}
placeholder={'Search or paste link'}
defaultValue={query}
tabIndex={-1}
onSubmit={queryInputOnSubmit}
/>
:
<div className={styles['search-input']}>
<div className={styles['placeholder-label']}>Search</div>
<div className={styles['placeholder-label']}>Search or paste link</div>
</div>
}
<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';
.search-bar-container {
--search-bar-size: calc(var(--horizontal-nav-bar-size) - 1rem);
display: flex;
flex-direction: row;
height: calc(var(--horizontal-nav-bar-size) * 0.7);
border-radius: calc(var(--horizontal-nav-bar-size) * 0.7);
background-color: @color-background-dark3;
height: var(--search-bar-size);
border-radius: var(--search-bar-size);
background-color: @color-background-light2;
&:hover {
background-color: @color-background-light3;
}
.search-input {
flex: 1;
@ -13,14 +18,14 @@
display: flex;
flex-direction: row;
align-items: center;
padding: 0 1rem;
color: @color-secondaryvariant2-light1;
padding: 0 0.5rem 0 1.5rem;
color: @color-secondaryvariant1-light1-90;
cursor: text;
&::placeholder, .placeholder-label {
max-height: 1.2em;
opacity: 1;
color: @color-secondaryvariant2-light1;
color: @color-secondaryvariant1-light1-90;
}
}
@ -30,14 +35,20 @@
flex-direction: row;
justify-content: center;
align-items: center;
width: calc(var(--horizontal-nav-bar-size) * 0.7);
height: calc(var(--horizontal-nav-bar-size) * 0.7);
width: var(--search-bar-size);
height: var(--search-bar-size);
&:hover {
.icon {
fill: @color-secondaryvariant2-light1;
}
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant2-light1;
width: 1.7rem;
height: 1.7rem;
fill: @color-secondaryvariant1;
}
}
}

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

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

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

@ -5,16 +5,17 @@
flex-direction: column;
align-items: center;
justify-content: center;
background-color: @color-background;
&:hover {
background-color: @color-background-dark1;
background-color: @color-background-light2;
}
&:global(.selected) {
background-color: @color-secondaryvariant1-dark5;
&:hover {
background-color: @color-secondary-dark3;
background-color: @color-secondaryvariant1-dark4;
}
.icon {
@ -22,25 +23,26 @@
}
.label {
color: @color-surface-light5;
color: @color-surface-light5-90;
}
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
width: 1.7rem;
height: 1.7rem;
margin-bottom: 0.5rem;
fill: @color-secondary-light2;
fill: @color-secondary-light5;
}
.label {
flex: none;
max-height: 2.4em;
padding: 0 0.5rem;
font-size: 0.9rem;
padding: 0 0.2rem;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.01rem;
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;
width: 100%;
height: 100%;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-columns: var(--vertical-nav-bar-size) calc(100% - var(--vertical-nav-bar-size));
grid-template-rows: var(--horizontal-nav-bar-size) calc(100% - var(--horizontal-nav-bar-size));
grid-template-areas:
"horizontal-nav-bar horizontal-nav-bar"
"vertical-nav-bar board-content";