Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 05:32:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Revert "refactor: margin-top now is added only on navmenu pop up"

Browse source 
This reverts commit ac050f14c9.
This commit is contained in:
kKaskak 2023-10-23 20:16:10 +03:00
parent ac050f14c9
commit c27f0a3013
5 changed files with 17698 additions and 5191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

22717
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -67,8 +67,8 @@
"readdirp": "3.6.0",
"terser-webpack-plugin": "5.2.4",
"webpack": "5.61.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"webpack-cli": "4.9.1",
"webpack-dev-server": "^4.7.4",
"workbox-webpack-plugin": "^6.5.3"
}
}

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

@ -3,114 +3,99 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/NavBar/HorizontalNavBar/styles.less') {
wrapper-container: buttons-container;
}
.nav-menu-container {
width: 22rem;
max-height: calc(100vh - var(--horizontal-nav-bar-size));
overflow-y: auto;
border-radius: var(--border-radius);
background-color: var(--modal-background-color);
:import('~stremio/common/Popup/styles.less') {
navmenu-wrapper-container: menu-container;
}
.user-info-container {
display: flex;
padding: 1.5rem 1rem;
.wrapper-container {
.navmenu-wrapper-container {
margin-top: 1rem;
.avatar-container {
flex: none;
height: 4rem;
width: 4rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
background-color: var(--primary-foreground-color);
opacity: 0.9;
}
.nav-menu-container {
width: 22rem;
max-height: calc(100vh - var(--horizontal-nav-bar-size));
overflow-y: auto;
border-radius: var(--border-radius);
background-color: var(--modal-background-color);
.user-info-details {
flex: auto;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
.user-info-container {
display: flex;
padding: 1.5rem 1rem;
.email-container {
flex: none;
margin-bottom: 0.5rem;
.avatar-container {
flex: none;
height: 4rem;
width: 4rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
background-color: var(--primary-foreground-color);
opacity: 0.9;
}
.user-info-details {
flex: auto;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
.email-container {
flex: none;
margin-bottom: 0.5rem;
.email-label {
flex: 1;
color: var(--primary-foreground-color);
}
}
.logout-button-container {
flex: none;
&:hover, &:focus {
outline: none;
.logout-label {
text-decoration: underline;
}
}
.logout-label {
flex: 1;
font-size: 0.9rem;
font-weight: 500;
color: var(--primary-foreground-color);
}
}
.email-label {
flex: 1;
color: var(--primary-foreground-color);
}
}
.nav-menu-section {
border-top: thin solid var(--overlay-color);
.logout-button-container {
flex: none;
.nav-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
padding: 0 1.5rem;
&:hover, &:focus {
outline: none;
&:hover {
background-color: var(--overlay-color);
.logout-label {
text-decoration: underline;
}
}
.icon {
flex: none;
width: 2rem;
height: 2rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
opacity: 0.3;
}
.nav-menu-option-label {
flex: 1;
color: var(--primary-foreground-color);
}
.logout-label {
flex: 1;
font-size: 0.9rem;
font-weight: 500;
color: var(--primary-foreground-color);
}
}
}
}
}
.nav-menu-section {
border-top: thin solid var(--overlay-color);
.nav-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
padding: 0 1.5rem;
&:hover {
background-color: var(--overlay-color);
}
.icon {
flex: none;
width: 2rem;
height: 2rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
opacity: 0.3;
}
.nav-menu-option-label {
flex: 1;
color: var(--primary-foreground-color);
}
}
}
}
@media only screen and (max-width: @minimum) {
.nav-menu-container {

1
src/common/Popup/styles.less
View file

@ -19,6 +19,7 @@
background-color: var(--modal-background-color);
box-shadow: var(--outer-glow);
cursor: auto;
margin-top: 1rem;
&.menu-direction-top-left {
top: initial;