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

fix video context menu styles for big screen

Browse source
This commit is contained in:
nklhrstv 2022-10-05 17:04:41 +03:00
parent bab59bc061
commit dac345a5ce
1 changed files with 57 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -17,7 +17,9 @@
flex-wrap: wrap;
padding: 0.5rem 1rem;
&:hover, &:focus, &:global(.active) {
&:hover,
&:focus,
&:global(.active) {
background-color: @color-background;
}
@ -92,7 +94,8 @@
margin-left: 0.5rem;
}
.upcoming-container, .watched-container {
.upcoming-container,
.watched-container {
flex: none;
padding: 0.2rem 0.4rem;
max-width: 10rem;
@ -131,54 +134,65 @@
background-color: @color-primaryvariant1;
}
}
}
@media only screen and (max-width: @minimum) {
.video-container {
&:hover, &:focus, &:global(.active) {
background-color: @color-surface-light5-20;
}
.context-menu-container {
max-width: calc(90% - 1.5rem);
.context-menu-container {
max-width: calc(90% - 1.5rem);
.context-menu-content {
--spatial-navigation-contain: contain;
background-color: @color-background-dark1;
&.menu-direction-top-left, &.menu-direction-bottom-left {
right: 1.5rem;
}
.context-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 1rem;
&.menu-direction-top-right, &.menu-direction-bottom-right {
left: 1.5rem;
}
&:hover,
&:focus {
background-color: @color-background;
}
&.menu-direction-top-left, &.menu-direction-top-right {
bottom: 90%;
}
&.menu-direction-bottom-left, &.menu-direction-bottom-right {
top: 90%;
}
.context-menu-content {
--spatial-navigation-contain: contain;
background-color: @color-background-dark1;
.context-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 1rem;
&:hover, &:focus {
background-color: @color-background;
}
.context-menu-option-label {
font-size: 1rem;
max-height: 2.4em;
color: @color-surface-light5-90;
}
.context-menu-option-label {
font-size: 1rem;
max-height: 2.4em;
color: @color-surface-light5-90;
}
}
}
}
}
@media only screen and (max-width: @minimum) {
.video-container {
&:hover,
&:focus,
&:global(.active) {
background-color: @color-surface-light5-20;
}
.context-menu-container {
&.menu-direction-top-left,
&.menu-direction-bottom-left {
right: 1.5rem;
}
&.menu-direction-top-right,
&.menu-direction-bottom-right {
left: 1.5rem;
}
&.menu-direction-top-left,
&.menu-direction-top-right {
bottom: 90%;
}
&.menu-direction-bottom-left,
&.menu-direction-bottom-right {
top: 90%;
}
}
}
}