Provides better subtitle styling for Viki.
All variables (text size, text color, background color, etc.) are separeted from the rest of the CSS. This way if you don't like the styling you can easily change it to fit your taste.
Viki Better Subtitle Styling by jinpha
Details
Authorjinpha
LicenseMIT License
Categoryviki
Created
Updated
Size3.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Changing the font family
If you're changing the font family. You also need to change the @import or remove it depending on whether the font already exists on your computer. If it doesn't exists on your computer you can use https://fonts.google.com/ to find the font you like. As far as I know you only need to add Regular 400 and Regular 400 Italic.
Changelog
v1.0.1
- Fix compatibility issue with the update to the Viki subtitles
v1.0.0
- Initial release
Source code
/* ==UserStyle==
@name Viki Better Subtitle Styling
@version 20230227.00.18
@namespace userstyles.world/user/jinpha
@description Provides better subtitle styling for Viki.
All variables (text size, text color, background color, etc.) are separeted from the rest of the CSS. This way if you don't like the styling you can easily change it to fit your taste.
@author jinpha
@license MIT License
==/UserStyle== */
@-moz-document url-prefix("https://www.viki.com/videos/") {
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&display=swap');
/* Configuration */
body {
--subtitle-text-font-family: 'Noto Sans' sans-serif;
--subtitle-text-font-size: 1.2em;
--subtitle-text-font-weight: normal;
--subtitle-text-font-color: white;
--subtitle-text-line-height: normal;
--subtitle-background-color: rgba(0, 0, 0, 0.5);
--subtitle-background-corner: 4px;
--subtitle-background-padding: 0px 10px 5px 10px;
/* The maximum width of the subtitle */
--subtitle-max-width: 87%;
--subtitle-bottom-distance: 2em;
/* The height of the player controlbar (DO NOT CHANGE - should be the same as the .vjs-control-bar element) */
--subtitle-control-bar-height: max(7vw, 72px);
}
/* CSS Magic */
.vjs-text-track-display div {
font-family: var(--subtitle-text-font-family) !important;
font-size: var(--subtitle-text-font-size) !important;
font-weight: var(--subtitle-text-font-weight) !important;
color: var(--subtitle-text-font-color) !important;
box-sizing: border-box !important;
}
.vjs-text-track-display > div {
display: flex !important;
justify-content: center !important;
margin: 0 !important;
inset: auto 0 0 0 !important;
}
.vjs-text-track-display > div > div {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
max-width: var(--subtitle-max-width) !important;
margin-bottom: 0px !important;
background-color: var(--subtitle-background-color) !important;
border-radius: var(--subtitle-background-corner) !important;
padding: var(--subtitle-background-padding) !important;
text-align: center !important;
box-sizing: content-box !important;
}
.vjs-text-track-display > div > div > div {
padding: 0 !important;
text-shadow: none !important;
display: inline !important;
top: auto !important;
bottom: auto !important;
line-height: var(--subtitle-text-line-height) !important;
background-color: transparent !important;
}
.video-js.vjs-user-inactive.vjs-paused .vjs-text-track-display,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
bottom: var(--subtitle-bottom-distance) !important;
}
.vjs-user-active .vjs-text-track-display {
bottom: calc(var(--subtitle-control-bar-height) + var(--subtitle-bottom-distance)) !important;
}
.video-js .vjs-control-bar {
height: var(--subtitle-control-bar-height) !important;
}
}