diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less index 2a9b7c118..b19d9f86b 100644 --- a/src/routes/MetaDetails/VideosList/Video/styles.less +++ b/src/routes/MetaDetails/VideosList/Video/styles.less @@ -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%; + } + } + } } \ No newline at end of file