Mirrored_Repos/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2026-11-03 10:27:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add minute badge to the watch page, right next to the title of the video (#6112)

Browse Source 
* minute badge added to watch page

* replace time calculations with the stdlib's native functions

Co-authored-by: syeopite <70992037+syeopite@users.noreply.github.com>

* reordered duration badge to be before audio mode toggle

* abbreviated length logic abstracted into a helper function

* space added between badge and texts

* run ameba linter

* move it between the title and listen button

* use border radius of 3px, since that is the buttons of purecss uses

* chore: move the css element to a more appropiate place + add missing support for dark mode css

* chore: hide time indicator if length_seconds is less than 0 or nil

* chore: add TODO statement for the locales

---------

Co-authored-by: discollizard <discollizard@github.com>
Co-authored-by: discollizard <49206310+discollizard@users.noreply.github.com>
Co-authored-by: syeopite <70992037+syeopite@users.noreply.github.com>
This commit is contained in:
Fijxu
2026-11-02 00:58:01 -03:00
committed by GitHub
parent cbaca26f24
commit 4a618775e4
3 changed files with 45 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/default.css
View File

@@ -671,6 +671,11 @@ body.dark-theme {
color: #f0f0f0;
}
.dark-theme .length-watch-page {
background-color: rgba(255, 255, 255, 0.12);
color: #f0f0f0;
}
.dark-theme .pure-form legend {
color: #f0f0f0;
}
@@ -731,6 +736,11 @@ body.dark-theme {
color: #f0f0f0;
}
.no-theme .length-watch-page {
background-color: rgba(255, 255, 255, 0.12);
color: #f0f0f0;
}
.no-theme .pure-form legend {
color: #f0f0f0;
}
@@ -927,3 +937,18 @@ h1, h2, h3, h4, h5, p,
#comments-turned-off-on-video-message > p, #comments-disabled-message > p {
text-align: center;
}
.length-watch-page{
position: relative;
background-color: rgba(35, 35, 35, 0.75);
color: #fff;
border-radius: 3px;
padding: 4px 10px;
font-size: 20px;
right: 0.25em;
bottom: 0.25em;
margin-left: 10px;
margin-right: 10px;
-webkit-user-select: none;
user-select: none;
}