Skip to content

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

Changes appearance of Criterion Collection subtitles.

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...

Reviews

No reviews yet.