diff --git a/client/components/Logo.vue b/client/components/Logo.vue new file mode 100644 index 000000000..10b3b87d8 --- /dev/null +++ b/client/components/Logo.vue @@ -0,0 +1,52 @@ + + + diff --git a/client/components/Settings.vue b/client/components/Settings.vue index d6a44c316..eda0bb261 100644 --- a/client/components/Settings.vue +++ b/client/components/Settings.vue @@ -186,6 +186,14 @@ const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p @valuechange="val => settingsStore.setShowHomeSubscriptions(val)" /> + +

Enhancements

+

Videoplayer

diff --git a/client/components/header/MainHeader.vue b/client/components/header/MainHeader.vue index 6f14233e8..1bb826f5d 100644 --- a/client/components/header/MainHeader.vue +++ b/client/components/header/MainHeader.vue @@ -1,20 +1,19 @@ @@ -28,7 +27,7 @@ const { posAbsolute, topPositionPx } = useHeaderScroll(); left: 0; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: right; z-index: 800; background-color: var(--header-transparent); backdrop-filter: blur(10px); @@ -51,49 +50,10 @@ const { posAbsolute, topPositionPx } = useHeaderScroll(); position: absolute; } - .logo-link { - text-decoration: none; - margin: auto 10px auto 10px; - box-sizing: border-box; - display: flex; - flex-direction: row-reverse; - align-items: center; - position: relative; - z-index: +1; - - .logo { - font-family: $header-font; - font-size: 1.5rem; - color: var(--title-color); - width: auto; - overflow: hidden; - white-space: nowrap; - transition: width 300ms linear; - display: flex; - margin: 4px 0 0 0; - - span { - display: block; - } - - .logo-colored { - color: transparent; - background-image: var(--theme-color-gradient); - background-clip: text; - -webkit-background-clip: text; - } - } - - .logo-small { - margin: auto; - height: calc(#{$header-height} - 20px); - transform: scale(0.8) translateY(-2px); - transition: clip-path 300ms $intro-easing, transform 300ms linear; - } - - @media screen and (max-width: $mobile-width) { + @media screen and (max-width: $mobile-width) { + .logo-link { width: 40px; - + .logo { width: 0; } diff --git a/client/pages/index.vue b/client/pages/index.vue index 303c131ed..3ec52c9ad 100644 --- a/client/pages/index.vue +++ b/client/pages/index.vue @@ -1,6 +1,7 @@