init
This commit is contained in:
434
animex/src/csplayer.css
Normal file
434
animex/src/csplayer.css
Normal file
@@ -0,0 +1,434 @@
|
||||
@import url("./icons/tabler-icons.min.css");
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* outline: 1px solid greenyellow !important;*/
|
||||
}
|
||||
|
||||
.csPlayer {
|
||||
--playerBg: #000;
|
||||
--playerColor: #e1e1e1;
|
||||
--playerBR: 5px;
|
||||
--startLoaderColor: #e1e1e1;
|
||||
--startBtnSize: 65px;
|
||||
--startBtnBg: var(--playerColor);
|
||||
--startBtnIconColor: var(--playerBg);
|
||||
--playPauseIconColor: var(--playerColor);
|
||||
--forwardIconColor: var(--playerColor);
|
||||
--backwardIconColor: var(--playerColor);
|
||||
--sliderBg: #383838;
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: var(--playerColor);
|
||||
--sliderSeekTrackColor: var(--playerColor);
|
||||
--sliderLoadedTrackColor: #878787;
|
||||
--currentTimeTextColor: var(--playerColor);
|
||||
--durationTextColor: var(--playerColor);
|
||||
--settingsBtnColor: var(--playerColor);
|
||||
--fullscreenBtnColor: var(--playerColor);
|
||||
--settingsBg: #181818;
|
||||
--settingsTextColor: var(--playerColor);
|
||||
--settingsInputIconBg: #4b4b4b;
|
||||
--settingsInputIconColor: var(--playerColor);
|
||||
background: var(--playerBg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
margin: 0 auto;
|
||||
user-select: none !important;
|
||||
position: relative;
|
||||
border-radius: var(--playerBR);
|
||||
min-width: 270px !important;
|
||||
}
|
||||
.theme-default {
|
||||
--playerBg: #000;
|
||||
--playerColor: #e1e1e1;
|
||||
--playerBR: 5px;
|
||||
--startLoaderColor: #e1e1e1;
|
||||
--startBtnSize: 65px;
|
||||
--startBtnBg: var(--playerColor);
|
||||
--startBtnIconColor: var(--playerBg);
|
||||
--playPauseIconColor: var(--playerColor);
|
||||
--forwardIconColor: var(--playerColor);
|
||||
--backwardIconColor: var(--playerColor);
|
||||
--sliderBg: #383838;
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: var(--playerColor);
|
||||
--sliderSeekTrackColor: var(--playerColor);
|
||||
--sliderLoadedTrackColor: #878787;
|
||||
--currentTimeTextColor: var(--playerColor);
|
||||
--durationTextColor: var(--playerColor);
|
||||
--settingsBtnColor: var(--playerColor);
|
||||
--fullscreenBtnColor: var(--playerColor);
|
||||
--settingsBg: #181818;
|
||||
--settingsTextColor: var(--playerColor);
|
||||
--settingsInputIconBg: #4b4b4b;
|
||||
--settingsInputIconColor: var(--playerColor);
|
||||
}
|
||||
.theme-youtube {
|
||||
--playerBg: #000;
|
||||
--playerColor: #e1e1e1;
|
||||
--playerBR: 5px;
|
||||
--startLoaderColor: var(--playerColor);
|
||||
--startBtnSize: 65px;
|
||||
--startBtnBg: #fe0001;
|
||||
--startBtnIconColor: var(--playerColor);
|
||||
--playPauseIconColor: var(--playerColor);
|
||||
--forwardIconColor: var(--playerColor);
|
||||
--backwardIconColor: var(--playerColor);
|
||||
--sliderBg: #383838;
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: #fe0001;
|
||||
--sliderSeekTrackColor: #fe0001;
|
||||
--sliderLoadedTrackColor: #787672;
|
||||
--currentTimeTextColor: var(--playerColor);
|
||||
--durationTextColor: var(--playerColor);
|
||||
--settingsBtnColor: var(--playerColor);
|
||||
--fullscreenBtnColor: var(--playerColor);
|
||||
--settingsBg: #212121;
|
||||
--settingsTextColor: var(--playerColor);
|
||||
--settingsInputIconBg: #4b4b4b;
|
||||
--settingsInputIconColor: var(--playerColor);
|
||||
}
|
||||
.theme-plyr {
|
||||
--playerBg: #000000;
|
||||
--playerColor: #626a76;
|
||||
--playerBR: 10px;
|
||||
--startLoaderColor: #ffffff;
|
||||
--startBtnSize: 60px;
|
||||
--startBtnBg: #01b2ff;
|
||||
--startBtnIconColor: #ffffff;
|
||||
--playPauseIconColor: #ffffff;
|
||||
--forwardIconColor: #ffffff;
|
||||
--backwardIconColor: #ffffff;
|
||||
--sliderBg: rgba(255, 255, 255, 0.1);
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: #01b2ff;
|
||||
--sliderSeekTrackColor: #01b2ff;
|
||||
--sliderLoadedTrackColor: #787672;
|
||||
--currentTimeTextColor: #ffffff;
|
||||
--durationTextColor: #ffffff;
|
||||
--settingsBtnColor: #ffffff;
|
||||
--fullscreenBtnColor: #ffffff;
|
||||
--settingsBg: rgba(255, 255, 255, 0.95);
|
||||
--settingsTextColor: #3d4049;
|
||||
--settingsInputIconBg: #d9dadc;
|
||||
--settingsInputIconColor: #01b2ff;
|
||||
}
|
||||
.csPlayer .csPlayer-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--playerBR);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.csPlayer .csPlayer-container iframe {
|
||||
width: 2400%;
|
||||
height: 100%;
|
||||
margin-left: -1149.95%;
|
||||
border: none;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
}
|
||||
.csPlayer .csPlayer-container span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--playerBg);
|
||||
background-image: none;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.csPlayer .csPlayer-container span i {
|
||||
display: block;
|
||||
width: var(--startBtnSize);
|
||||
height: var(--startBtnSize);
|
||||
color: var(--startBtnIconColor);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: var(--startBtnBg);
|
||||
font-size: calc(var(--startBtnSize) / 2.5);
|
||||
}
|
||||
.csPlayer-loading {
|
||||
color: transparent !important;
|
||||
background: transparent !important;
|
||||
border: 5px solid var(--startLoaderColor) !important;
|
||||
border-bottom-color: transparent !important;
|
||||
animation: csPlayerSpin 1s linear infinite;
|
||||
}
|
||||
@keyframes csPlayerSpin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.csPlayer .csPlayer-container span div {
|
||||
width: 100%;
|
||||
height: calc(50% - (var(--startBtnSize) / 2));
|
||||
background: transparent !important;
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.csPlayer .csPlayer-container span div:nth-of-type(1) {
|
||||
top: 0;
|
||||
}
|
||||
.csPlayer .csPlayer-container span div:nth-of-type(2) {
|
||||
bottom: 0;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
background: transparent;
|
||||
border-radius: var(--playerBR);
|
||||
display: none;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.csPlayer-controls-open {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
.csPlayer-controls-open main {
|
||||
transform: translate(-50%, -50%) scale(1) !important;
|
||||
}
|
||||
.csPlayer-controls-open .csPlayer-controls {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform 0s ease-in-out;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i {
|
||||
font-size: 2rem;
|
||||
padding: 8px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i.ti-rewind-backward-10 {
|
||||
color: var(--backwardIconColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i.ti-rewind-forward-10 {
|
||||
color: var(--forwardIconColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i.csPlayer-play-pause-btn {
|
||||
color: var(--playPauseIconColor);
|
||||
padding: 10px;
|
||||
border: 2px solid var(--playPauseIconColor);
|
||||
border-radius: 100%;
|
||||
margin: 0 3.5rem;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 8px 10px;
|
||||
transform: scale(0);
|
||||
transition: transform 0s ease-in-out;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls p {
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls p:nth-of-type(1) {
|
||||
color: var(--currentTimeTextColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls p:nth-of-type(2) {
|
||||
color: var(--durationTextColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i {
|
||||
font-size: 1.4rem;
|
||||
margin: 0 0 0 6px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i.settingsBtn {
|
||||
color: var(--settingsBtnColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i.fsBtn {
|
||||
color: var(--fullscreenBtnColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
height: calc(var(--sliderThumbSize) / 3);
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
background: var(--sliderBg);
|
||||
border-radius: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div span {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: var(--sliderLoadedTrackColor);
|
||||
opacity: 0.5;
|
||||
border-radius: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div input {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
appearance: none;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--sliderSeekTrackColor) 0%,
|
||||
transparent 0%
|
||||
);
|
||||
border-radius: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
height: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-top: calc(0px - (var(--sliderThumbSize) / 3));
|
||||
background-color: var(--sliderThumbColor);
|
||||
height: calc(var(--sliderThumbSize));
|
||||
width: calc(var(--sliderThumbSize));
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
/* Firefox */
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-moz-range-track {
|
||||
background: transparent;
|
||||
height: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-moz-range-thumb {
|
||||
margin-top: calc(0px - (var(--sliderThumbSize) / 3));
|
||||
background-color: var(--sliderThumbColor);
|
||||
height: calc(var(--sliderThumbSize));
|
||||
width: calc(var(--sliderThumbSize));
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box {
|
||||
width: 150px;
|
||||
max-width: 200px;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 50px;
|
||||
padding: 4px 10px;
|
||||
background: var(--settingsBg);
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box p {
|
||||
width: 100%;
|
||||
color: var(--settingsTextColor);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box p b {
|
||||
font-weight: normal;
|
||||
margin: 0 0 0 auto;
|
||||
padding-left: 15px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box p i {
|
||||
font-size: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box span {
|
||||
display: block;
|
||||
max-height: 0px;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box span label {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
font-size: 13px;
|
||||
color: var(--settingsTextColor);
|
||||
margin: 6px 0;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-settings-box
|
||||
span
|
||||
label
|
||||
input[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--settingsInputIconBg);
|
||||
margin: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 100%;
|
||||
margin-right: 6px;
|
||||
opacity: 1;
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-settings-box
|
||||
span
|
||||
label
|
||||
input[type="radio"]:checked {
|
||||
border: 5px solid var(--settingsInputIconColor);
|
||||
}
|
||||
Reference in New Issue
Block a user