diff --git a/assets/css/default.css b/assets/css/default.css index 2cedcf0c..995b8440 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -550,6 +550,11 @@ span > select { color: #565d64; } +.light-theme .video-badges > span { + background: rgb(235, 235, 235); + color: #828282; +} + @media (prefers-color-scheme: light) { .no-theme a:hover, .no-theme a:active, @@ -596,6 +601,11 @@ span > select { .light-theme .pure-menu-heading { color: #565d64; } + + .no-theme .video-badges > span { + background: rgb(235, 235, 235); + color: #828282; + } } @@ -658,6 +668,12 @@ body.dark-theme { color: inherit; } +.dark-theme .video-badges > span { + background: rgb(50, 50, 50); + color: #9e9e9e; +} + + @media (prefers-color-scheme: dark) { .no-theme a:hover, .no-theme a:active, @@ -719,6 +735,11 @@ body.dark-theme { .no-theme footer a { color: #adadad !important; } + + .no-theme .video-badges > span { + background: rgb(50, 50, 50); + color: #9e9e9e; + } } @@ -816,3 +837,19 @@ h1, h2, h3, h4, h5, p, #download_widget { width: 100%; } + +.video-badges > span { + display: flex; + align-items: center; + gap: 5px; + + padding: 2px 10px; + border-radius: 10px; + + font-size: 12px; + font-weight: 600; +} + +.video-badges > i { + margin-right: 5px; +} \ No newline at end of file diff --git a/locales/en-US.json b/locales/en-US.json index 4f2c2770..78ec0203 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -501,5 +501,6 @@ "toggle_theme": "Toggle Theme", "carousel_slide": "Slide {{current}} of {{total}}", "carousel_skip": "Skip the Carousel", - "carousel_go_to": "Go to slide `x`" + "carousel_go_to": "Go to slide `x`", + "video_badges_members_only": "Members only" } diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index c966a926..59282165 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -200,6 +200,16 @@ <% end %> + <% if item.responds_to?(:badges) && !item.badges.none? %> +
+ <% + # TODO Other types of badges + %> + <% if item.badges.members_only? %> + <%=translate(locale, "video_badges_members_only")%> + <% end %> +
+ <%end%> <% end %>