Changes appearance of Criterion Collection subtitles.
Criterion Collection Subtitles by trevorraney
Details
Authortrevorraney
LicenseNo License
Categorycriterion collection, userstyles, subtitiles
Created
Updated
Size170 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Install and it should work.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Criterion Collection Subs
@namespace https://embed.criterionchannel.com/videos/
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document domain("example.com") {
/**
/* VimeoPlayer - v3.20.17 - 2020-07-10 */
@charset "UTF-8";
@-webkit-keyframes buffer {
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
}
@keyframes buffer {
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
}
@-moz-keyframes bufferLeft {
0% {
left: 0
}
100% {
left: -10px
}
}
@-webkit-keyframes throb {
0%,
100% {
background-color: #555
}
50% {
background-color: #444
}
}
@keyframes throb {
0%,
100% {
background-color: #555
}
50% {
background-color: #444
}
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
20% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
40%,
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px)
}
60% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px)
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes wiggle {
0% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
20% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
40%,
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px)
}
60% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px)
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes pulse {
50% {
-webkit-transform: scale(.9);
transform: scale(.9)
}
}
@keyframes pulse {
50% {
-webkit-transform: scale(.9);
transform: scale(.9)
}
}
@-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
:-webkit-full-screen-ancestor > :not(:-webkit-full-screen-ancestor):not(:-webkit-full-screen) {
display: none!important
}
:-ms-fullscreen-ancestor > :not(:-ms-fullscreen-ancestor):not(:-ms-fullscreen) {
display: none!important
}
:fullscreen-ancestor > :not(:fullscreen-ancestor):not(:fullscreen) {
display: none!important
}
body:not(.showfocus) .player button,
body:not(.showfocus) .player li,
body:not(.showfocus) .player span,
body:not(.showfocus) .player svg {
outline: 0!important
}
.vp-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.vp-placeholder {
opacity: 1;
-webkit-transition: opacity 125ms ease-out .1s;
transition: opacity 125ms ease-out .1s
}
.vp-placeholder-fadeout {
opacity: 0
}
.player {
position: relative;
max-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: auto;
color: #fff;
line-height: normal;
overflow: visible;
border-collapse: separate;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulate;
touch-action: manipulate
}
.player :focus {
outline: 2px solid #00adef;
outline-offset: 2px
}
.player,
.player h1,
.player h2 {
font-family: "Helvetica Neue", Helvetica, Arial!important;
font-size: 10px
}
.player,
.player *,
.player ::after,
.player ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent
}
.player.scrubbing * {
cursor: -webkit-grabbing!important;
cursor: grabbing!important
}
.player.loading .vp-controls-wrapper,
.player.loading .vp-video-wrapper {
opacity: 0
}
.player:hover .vp-controls.controls-outro {
opacity: 1
}
.player button {
cursor: pointer;
font-size: 1em
}
.player button,
.player input,
.player textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial;
line-height: normal;
height: auto;
vertical-align: baseline
}
.player a:active,
.player button:active,
.player button:not(:focus) {
outline: 0
}
.player img {
border: 0
}
.player a {
text-decoration: none
}
.player .hidden {
display: none!important
}
.player .invisible {
opacity: 0
}
.player .cloaked {
visibility: hidden
}
.player .rounded-box {
background: rgba(23, 35, 34, .75);
border-radius: .5em
}
.player .fill {
fill: #fff
}
.player .toggle.off .fill {
fill: #fff
}
.player .toggle.off .stroke {
stroke: #fff
}
.player .stroke {
stroke: #fff;
fill: none
}
.player .only-in-fullscreen {
display: none!important
}
.js-player-fullscreen:-webkit-full-screen .only-in-fullscreen {
display: block!important
}
.js-player-fullscreen:-ms-fullscreen .only-in-fullscreen {
display: block!important
}
.js-player-fullscreen-api .only-in-fullscreen,
.js-player-fullscreen:fullscreen .only-in-fullscreen {
display: block!important
}
.player .vp-target {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3
}
.player.player-ad .vp-target {
visibility: hidden
}
.player .vp-controls-wrapper,
.player .vp-video-wrapper {
opacity: 1;
-webkit-transition: opacity 125ms ease-out;
transition: opacity 125ms ease-out
}
.player.player-cursor-hide {
cursor: none
}
.player.grabbable {
cursor: move;
cursor: -webkit-grab;
cursor: grab
}
.player.grabbing {
cursor: move;
cursor: -webkit-grabbing;
cursor: grabbing
}
.player .vp-ads-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.player .vp-ads-wrapper .vp-ads-tag {
position: absolute;
top: 10px;
left: 10px;
height: 22px;
padding: 0 .8em;
font-size: 1.2em;
line-height: 2;
text-transform: uppercase;
border-radius: 3px;
background: rgba(23, 35, 34, .75);
color: #fff
}
.player .vp-alert {
background: rgba(23, 35, 34, .75);
text-align: center;
z-index: 24;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 50px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
-webkit-transition: opacity .1s, -webkit-transform .1s linear;
transition: opacity .1s, -webkit-transform .1s linear;
transition: transform .1s linear, opacity .1s;
transition: transform .1s linear, opacity .1s, -webkit-transform .1s linear;
min-height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.player .vp-alert h3 {
margin: 0;
color: #fff;
font-size: 1.2em
}
.player .vp-alert.in {
opacity: 1;
-webkit-transition: opacity .1s, -webkit-transform .1s cubic-bezier(0, 1.14, .57, 1.21);
transition: opacity .1s, -webkit-transform .1s cubic-bezier(0, 1.14, .57, 1.21);
transition: transform .1s cubic-bezier(0, 1.14, .57, 1.21), opacity .1s;
transition: transform .1s cubic-bezier(0, 1.14, .57, 1.21), opacity .1s, -webkit-transform .1s cubic-bezier(0, 1.14, .57, 1.21);
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-delay: .1s;
animation-delay: .1s;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.player .vp-alert.leaving {
-webkit-animation-fill-mode: none;
animation-fill-mode: none;
-webkit-transition: opacity .2s linear, -webkit-transform .2s linear;
transition: opacity .2s linear, -webkit-transform .2s linear;
transition: transform .2s linear, opacity .2s linear;
transition: transform .2s linear, opacity .2s linear, -webkit-transform .2s linear
}
.player .vp-alert .close {
position: absolute;
right: 0;
background: 0 0;
margin: 0;
padding: 0;
top: 0;
height: 100%
}
.player .vp-alert .close .icon-close {
width: 1.125em;
height: 1.125em;
margin: .9375em
}
.player .vp-alert .close:active {
-webkit-transform: translateY(1px);
transform: translate...