Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
6.3 KiB
353 lines
6.3 KiB
5 years ago
|
/*!
|
||
|
ckin v0.0.1: Custom HTML5 Video Player Skins.
|
||
|
(c) 2017
|
||
|
MIT License
|
||
|
git+https://github.com/hunzaboy/ckin.git
|
||
|
*/
|
||
|
|
||
|
/* video {
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
cursor: pointer;
|
||
|
} */
|
||
|
|
||
|
.ckin {
|
||
|
&__player {
|
||
|
letter-spacing: 0.02em;
|
||
|
}
|
||
|
|
||
|
&__overlay {
|
||
|
position: relative;
|
||
|
|
||
|
&:before {
|
||
|
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
|
||
|
}
|
||
|
|
||
|
&--2:before {
|
||
|
background: rgba(24, 24, 24, 0.8);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.ckin__player.ckin__fullscreen {
|
||
|
position: fixed;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
height: 100%;
|
||
|
width: 100%;
|
||
|
z-index: 10000000;
|
||
|
background: #000;
|
||
|
border-radius: 0 !important;
|
||
|
display: -ms-flexbox;
|
||
|
display: flex;
|
||
|
}
|
||
|
|
||
|
.default {
|
||
|
border: 0 solid rgba(0, 0, 0, 0.2);
|
||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||
|
position: relative;
|
||
|
font-size: 0;
|
||
|
overflow: hidden;
|
||
|
//border-radius: 5px;
|
||
|
cursor: pointer;
|
||
|
|
||
|
&:before {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
bottom: 0;
|
||
|
right: 0;
|
||
|
//border-radius: 5px;
|
||
|
transition: opacity .2s;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
}
|
||
|
|
||
|
&__title {
|
||
|
position: absolute;
|
||
|
left: 20px;
|
||
|
top: 20px;
|
||
|
z-index: 1;
|
||
|
font-size: 24px;
|
||
|
color: rgba(255, 255, 255, 0.8);
|
||
|
font-style: italic;
|
||
|
}
|
||
|
|
||
|
&__button {
|
||
|
background: none;
|
||
|
border: 0;
|
||
|
color: #fff;
|
||
|
outline: 0;
|
||
|
padding: 3px 10px 6px 10px;
|
||
|
/* padding: 6px 10px 6px 10px; */
|
||
|
cursor: pointer;
|
||
|
font-size: 24px;
|
||
|
line-height: 1;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
|
||
|
i {
|
||
|
-ms-flex-item-align: center;
|
||
|
-ms-grid-row-align: center;
|
||
|
align-self: center;
|
||
|
}
|
||
|
|
||
|
&--big {
|
||
|
background: none;
|
||
|
border: 0;
|
||
|
line-height: 1;
|
||
|
color: #fff;
|
||
|
text-align: center;
|
||
|
outline: 0;
|
||
|
padding: 0;
|
||
|
cursor: pointer;
|
||
|
position: absolute;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
-ms-transform: translate(-50%, -50%) scale(1);
|
||
|
transform: translate(-50%, -50%) scale(1);
|
||
|
font-size: 64px;
|
||
|
transition: all .2s;
|
||
|
-ms-touch-action: manipulation;
|
||
|
touch-action: manipulation;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&__slider {
|
||
|
width: 10px;
|
||
|
height: 30px;
|
||
|
}
|
||
|
|
||
|
&__controls {
|
||
|
position: absolute;
|
||
|
bottom: 0;
|
||
|
right: 0;
|
||
|
left: 0;
|
||
|
transition: all .3s;
|
||
|
/* background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%); */
|
||
|
/* font-size: 32px; */
|
||
|
text-align: left;
|
||
|
direction: ltr;
|
||
|
/* padding-top: 7px; */
|
||
|
border-radius: 0 0 5px 5px;
|
||
|
z-index: 3;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.default.is-playing:before {
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
-ms-transform: translate(-50%, -50%) scale(1.3);
|
||
|
transform: translate(-50%, -50%) scale(1.3);
|
||
|
}
|
||
|
|
||
|
.default.is-playing .default__button--big {
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.default.is-playing .default__controls {
|
||
|
-ms-transform: translateY(52px);
|
||
|
transform: translateY(52px);
|
||
|
}
|
||
|
|
||
|
.default.is-playing:hover .default__controls {
|
||
|
-ms-transform: translateY(0);
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
|
||
|
.default .progress {
|
||
|
position: relative;
|
||
|
display: -ms-flexbox;
|
||
|
display: flex;
|
||
|
margin: 0 8px;
|
||
|
height: 5px;
|
||
|
transition: height 0.3s;
|
||
|
background: rgba(255, 255, 255, 0.38);
|
||
|
cursor: pointer;
|
||
|
border-radius: 4px;
|
||
|
overflow: visible;
|
||
|
}
|
||
|
|
||
|
.default .progress__filled {
|
||
|
width: 0%;
|
||
|
background: #63a2e3;
|
||
|
/* -ms-flex: 0;
|
||
|
flex: 0;
|
||
|
-ms-flex-preferred-size: 0%;
|
||
|
flex-basis: 0%; */
|
||
|
border-radius: 4px;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
.ckin__player button {
|
||
|
font-size: 18px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
video::-webkit-media-controls-enclosure {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.progress input {
|
||
|
-webkit-appearance: none;
|
||
|
-moz-appearance: none;
|
||
|
background: transparent;
|
||
|
height: 4.5px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range]:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range]::-webkit-slider-runnable-track {
|
||
|
width: 100%;
|
||
|
cursor: pointer;
|
||
|
border-radius: 1.3px;
|
||
|
-webkit-appearance: none;
|
||
|
transition: all 0.4s ease;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range]::-webkit-slider-thumb {
|
||
|
height: 15px;
|
||
|
width: 15px;
|
||
|
border-radius: 16px;
|
||
|
background: #63a2e3;
|
||
|
cursor: pointer;
|
||
|
-webkit-appearance: none;
|
||
|
margin-left: -1px;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range]:focus::-webkit-slider-runnable-track {
|
||
|
background: transparent;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range].volume {
|
||
|
height: 5px;
|
||
|
background-color: #fff;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range].volume::-webkit-slider-runnable-track {
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range].volume::-webkit-slider-thumb {
|
||
|
margin-left: 0;
|
||
|
height: 14px;
|
||
|
width: 14px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range]::-moz-range-track {
|
||
|
width: 100%;
|
||
|
height: 8.4px;
|
||
|
cursor: pointer;
|
||
|
border: 1px solid transparent;
|
||
|
background: transparent;
|
||
|
border-radius: 1.3px;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range]::-moz-range-thumb {
|
||
|
height: 14px;
|
||
|
width: 14px;
|
||
|
border-radius: 50px;
|
||
|
border: 1px solid #63a2e3;
|
||
|
background: #63a2e3;
|
||
|
cursor: pointer;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range]:focus::-moz-range-track {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
.progress input[type=range].volume::-moz-range-thumb {
|
||
|
border: 1px solid #fff;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.seek {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
width: 100%;
|
||
|
cursor: pointer;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
.seek:hover + .seek-tooltip {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.left-controls {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.bottom-controls {
|
||
|
padding: 3px 4px 5px 4px;
|
||
|
//padding: 5px 4px 5px 4px;
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.time {
|
||
|
float: right;
|
||
|
padding: 7px 0px 9px 14px;
|
||
|
font-size: 15px;
|
||
|
color: white;
|
||
|
}
|
||
|
|
||
|
.circle .circle-time {
|
||
|
color: #fff;
|
||
|
font-size: 13px;
|
||
|
float: left;
|
||
|
margin-top: 1px;
|
||
|
}
|
||
|
.circle .circle-time-left {
|
||
|
position: absolute;
|
||
|
top: 3px;
|
||
|
left: 2px;
|
||
|
border-radius: 12px;
|
||
|
background-color: rgba(0, 0, 0, 0.23);
|
||
|
padding: 1px 7px 2px 7px;
|
||
|
z-index: 2;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
}
|
||
|
video[data-ckin="circle"] {
|
||
|
-webkit-clip-path: ellipse(100px 100px at center);
|
||
|
clip-path: ellipse(100px 100px at center);
|
||
|
}
|
||
|
.progress-ring {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.progress-ring__circle {
|
||
|
transform-origin: center;
|
||
|
transform: rotate(-90deg);
|
||
|
transition: stroke-dashoffset 0.15s;
|
||
|
}
|
||
|
|
||
|
.ckin__player.circle {
|
||
|
position: relative;
|
||
|
width: 200px;
|
||
|
height: 200px;
|
||
|
}
|
||
|
|
||
|
.iconVolume {
|
||
|
padding: 0 1px 0 3px;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
font-size: 1.25rem;
|
||
|
color: #fff;
|
||
|
}
|