|
- /*!
- ckin v0.0.1: Custom HTML5 Video Player Skins.
- (c) 2017
- MIT License
- git+https://github.com/hunzaboy/ckin.git
- */
- @font-face {
- font-family: 'ckin';
- src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABBIAAsAAAAAGoQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3RY21hcAAAAYQAAADQAAADIjn098ZnbHlmAAACVAAACv4AABEIAwnSw2hlYWQAAA1UAAAAKgAAADYUHzoRaGhlYQAADYAAAAAbAAAAJA4DByFobXR4AAANnAAAAA8AAACE4AAAAGxvY2EAAA2sAAAARAAAAEQ9NEHGbWF4cAAADfAAAAAfAAAAIAEyAIFuYW1lAAAOEAAAASUAAAIK1cf1oHBvc3QAAA84AAABDwAAAZ5AAl/0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQ7xTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGBHcRdyA4RZgQRAC4HCwEAAHic7dFprsIgAEXhg8U61XmeWcBb1FuQP4w7ZQXK5boMm3yclFDSANAHmuKviBBeBPQ8ymyo8w3jOh/5r2ui5nN6v8sYNJb3WMdeWRvLji0DhozKdxM6psyYs2DJijUbtuzYc+DIiTMXrty4k8oGLb+n0xCe37ekM7Z66j1DbUy3l6PpHnLfdLO5NdSBoQ4NdWSoY9ON54mhdqa/y1NDnRnq3FAXhro01JWhrg11Y6hbQ90Z6t5QD4Z6NNSToZ4N9WKoV0O9GerdUJORPqkhTd54nJ1YDXBU1RV+576/JBs2bPYPkrDZt5vsJrv53V/I5mclhGDCTwgGBQQSTEji4hCkYIAGd4TGIWFAhV0RQTpWmQp1xv6hA4OTOlNr2zFANbHUYbq2OtNCpViRqsk+e+7bTQAhzti8vPfuPffcc88959zznbcMMPjHD/KDDGEY0ABpYX384NhlomIYlo4JISGEY9mMh2FSidYiqkEUphtNYDSY/dXg9023l4DdxlqUl0chuZRhncJKrsCQHIwcGuwfnhMIzBnuH4Sym+1D2zaGjheXlhYfD238z80mKYMmvJ5XeOTzd8z9eujbMxJNhu4C9xPE/bCMiDuSNIWgkTQwBE55hLSAE7ZwhrHLnAHZOGV/kmBGTiNjZxzI77Hb7Hqjz68TjT6vh+5JT/cCIkqS0D6CqPf5jX4Qjdx5j6vlDfZM4aZFdbVXIxtOlJaP/WottMnH6CJQ3bTiue3PrY23HjnChtuamxwvvzFjxkPrNj3z0tG9T561HDYf6OgmRWvlY3JQHoQb8ltV2Yet7YfWctEjR1AtxS/cSX6U4alf6NJEBQ7YKg9wrXQKd0IeZCb2ux75Uhh1Un+Nz+9LTOE7PK777nN5xqdTneTBhCbx446mZrhnUkrCz2YhA9dSMxaG0SYmT8hi9ZPu1E94PJYQSH6LRmhxec7Q7ZeXntgQuVpbh+a4qWNsckVyTdn0P7o7DpgPW84+uRcq0BITflBikGdUjAZ9wYBVI3mtrNvr9kpg1UsaK6t3690aoorC1lg0GpMH2HAMtkZjsSi5Ig9ESVosOh7GQfLjKNLvKpMKkLSKNFAka710GdgSi8oDMSoNhqjkKBXTgn3swtaxyzGkUzIzae9RtLdWkSlZ1KDX6EzgllzV4NV4SoDFSOGD4+HCeQUF8wrZ5Hs8zIb5EaVxy8DYFTbMCJPnLIWZxugZE2NlivC0gc1qEQUR8jEKgZcAXeH18BiCgl5nlHh0CrjB4Hb5fX4gb0J7c9PuHVsfgkx2n/vTY/JV8kn8PGxf7faOZ8qX8JVByuIf4whk9sqXli2hvPJV9hrp0hY7l8r2x37ydaVsb4xvXv/47v2NjfCl8m5oRDJclFMoE1yk0Uh1Te4/m8lFXe9qBZD0EkheicebXvzI2PLCuoKCukLuhPIeKwaHPEouxw3kMqaIUXDQ1p0mip+MyCORSCQaoUsnY1VZ38nUTrG21WvVo4f1OsEJFhvSfAFwGfT8VHRMeAVUpwLOoLzjT/REIj3O3FhuURE+nERF+0pTId5Fyxv5sfwGyg4O+my4vZv0sZm7oeQlFZORiB+tG0MweVNraeitl7yxiPIHTk4/diVxs94o5lEYishB2iAtkchEnsActoEpx44Fo8XnsQMaA22BlqC20RmhBKzYojZyYaxg+JggMc4HHY2m+L9EkWSYljirOisrO7d3VorxzyZ6Vc4lJqITAu1b2wOBdrLElAP+bFc2eGaZFVbkmJktv5uT6Jlz5D/MnBFor6ig/JPnRViBsV3LNKGGqB1ChJ0tgQywlVLFJIuQgTFttwkiKxhyQdAZMdMYtSaoAewqfvXVYPAbDT6/1mez85YS8FSDywQ6NfAnef6FNEGMilnppyvn5rB6tTyq1pOceRWnp2WJEZFXHeX5oyoem1nTTgdqc4heDY7bOeKz63vnz+/dRx+s31Ht2JGanQ5seirfWJL9tjozU/12TnEjn5oux9OzU3ckGbBzBwNOyk69JykKH0n/0LM9A72tuwM3zQpIRu4AxiToseEpgPOmbROyFe9/X2yeUvoUsCyEvjcgs7fpWP3/aKlFN0+6HFUe6D9HFz/XPwBlN9tTqNyZjFJ8UO2RUT5/h4CptCctEyeisnOyXjALEp7dXKaQKf6O7IMnGjNNACRMLxqdYJX8eMLvmmd68D+ayBLyKKYZwYxDt/GNhzETDJ05Qxlyi3pi3/Z93ndYVSumgj0V/KkIFlO6+1K3fF2+3g0q+YtuSIf0bvmLqV09nnobI6hwcjIP8aPCKayjsF5JBY3LaKAeRLSyYB1h81oTwe9SlPMkXB7G0mfL9q71gaqqwPqu67QRKS1+ObTx+sbQy9QV2OQHEScGkdFBeT7v7qisqqrs6N52i78/R+6S0qQONVj26agOVoswCyQWIV5D86vH53bxNUeXV0K+XZaHv/nm/KsHhOvylwsWnJX/HE8l/4WCv5x+l5n08z6UU8bUMa3MBpSmM7F63AxntdC9eBCKEZW9Hr+ABNqtxgAQrSbMtmrW7lKQuoSgBhSrTazWVU2QAKWY8wiiuhqFmQgWJBgoXiuWIm42N7hqZbBsgXz52O5P5uSvaNgFGnOuvsRw8I8Laha91wMvDuxqWFheN7/8GVtTltdS83DQsXRmqc5ZtcJXEVrlV2doTWk5+Yunm71dG5f55m/qY0MjI93vv9/NfpxXV9sUXrxy2fbNy1or65cOlDRnOoKFeeXcbw42H/bNDT5Qs3flgs31gWC1lD1nfUV/X7NdCnSUdHY2e8afzfKsqZ5ZljfDqjLOmk3UebNXB+aHArPYDRs+/HDDxeT5DiP+sFg7OpRaVQMGBV89PpeBdj22hCE0Uub0UqwLrNWsG0cuyadgLXTeR5rbO4+3c/vl15cur2nRq+TXCQDcS3SO+s6ak+e5/eMS+1dw3btu3YG2tvFL8XdIZvdjdW6TO/4B7IdrZWVPmctm5/59AgsPItTSbCiIBr2OqIGzmu20SMKAS7yqwGBUfGfgjDYlLLDeF0SfcLB2LSx8flT+08/kzz6yOj96rft4rpTjdPQcmLd47uKibbDq7ZSz/XtbH2nN717Nd62rU+c8Icevvv7I09wA6WvjVcafb+FsbNG+ZQ80Rn6ZZsvrP7teP2dzTdoETvNhjCmsr8FID2sJ69VYvdUcxk4AzYRlKcaE38eXNRlfW9H1as9i6acLHp1XpuNB5K7DIvkX08y1ZYvh3KfWaiCzH+ztrSDmD7LuX73x/mJelB8Yj39t8nhNQJJ2CAthpoFGLsGgtSOCJooCGoaJAMTjSWHVZ08YAa1Fg9lPI5U6DOsGVjDasJeZZ+YyhfCwfOzCxlBA69M9XLXtza7H/rav+9Tjq5xNi0wpKQIRNO4Lrzz7yp5QVYM6Jd/oc1Uvn/mQhhuWh6ENXoS2YTZ8QT42bF5d/559zp5r0Uff2VnR2tdf2/WCOd2cO0Mw6qpWPnvxpV0nrt5fZd2yItc199GWe8vlNfNDq+CH/7yAAnB9hn7T4QO4c1g9ScxsZgmzntnE/IDGndtHMw69lFwoCnYsMGx+rBp8JSBqdLzBr9QRPq/PbhWMWFtQZp1xguy/haw3TEHm3TWAnxFWQQWgt7M5OV0lCz1VRYucpWliy7z6Zd4urwPIyeZQqli2Lgg7szJV09PysATbOQtYIrB2YzbkJYkGgJ0m4AjPUap1pvYu1K9qr97z0Yl3p332b2LYB78ncYIlRkau/8GObSsOlZancACE5d5ily+c2+7h5Yj4lqhVmXXB+iXLfvdqSgqfKtQvfHDV0OnvQR1qhw42XS/vkvsh/hXcrDFP0a+SJNIomEfD1nsrYGO+1bgTOJhM8Hv6ek+7vVglxuSRwoKn17S937bm6YJCeSSG0Op1n+7tE37tcZ/p7dsTv4EUrGpDbWueKigsLHhqTVsoEj+JU0kaSjnj9tz8/gryQWwJ9BcJXBC/7smO+I/IFURJetFPrdt5WcoL6DbEJaygI8CTHfQTjf40ofD+DwalTqIAAHicY2BkYGAA4uByr8R4fpuvDNzsDCBw7f/3LmSanREszsHABKIAKi0J7gAAeJxjYGRgYGcAARD5/z87IwMjAypQBAAtgwI4AHicY2BgYGAfYAwAOkQA4QAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhHicY2BkYGBQZChlYGcAASYg5gJCBob/YD4DABfTAbQAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2PyXLCMBBE3YCNDWEL2ffk7o8S8oCnkCVHC5C/jzBQlUP6IHVPzYyekl5y0iL5X5/ooY8BUmQYIkeBEca4wgRTzDDHAtdY4ga3uMM9HvCIJzzjBa94wzs+8ImvZNAq8TM+HqVkKxWlrQiOxjujQkNlEzyNzl6Z/cU2XF06at7U83VQyklLpEvSnuzsb+HAPnPfQVgaupa1Jlu4sPLsFblcitaz0dHU0ZF1qatjZ1+aTXYCmp6u0gSvWNPyHLtFZ+ZeXWVSaEkqs3T8S74WklbGbNNNq4LL4+CWKtZDv2cfX8l8aFbKFhEnJnJ+IULFpqwoQnNHlHaVQtPBl+ypmbSWdmyC61KS/AKZC3Y+AA==) format("woff");
- font-weight: normal;
- font-style: normal; }
-
- [class^="ckin-"], [class*=" ckin-"] {
- /* use !important to prevent issues with browser extensions that change fonts */
- font-family: 'ckin' !important;
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- .ckin-compress:before {
- content: "\f109";;
- }
-
- .ckin-expand:before {
- content: "\f108";;
- }
-
- .ckin-play:before {
- content: "\f101";
- }
-
- .ckin-pause:before {
- content: "\f103";
- }
-
- .ckin-stop:before {
- content: "\f10a";
- }
-
- .ckin-backward:before {
- content: "\f120";;
- }
-
- .ckin-forward:before {
- content: "\f11f";
- }
-
- .ckin-volume-high:before {
- content: "\f107";
- }
-
- .ckin-volume-medium:before {
- content: "\f106";
- }
-
- .ckin-volume-low:before {
- content: "\f105";
- }
-
- .ckin-volume-mute:before {
- content: "\f104";
- }
-
- body {
- font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- letter-spacing: 0.02em;
- }
-
- video {
- width: 100%;
- height: auto;
- cursor: pointer;
- }
-
- .ckin__player {
- margin-bottom: 20px;
- font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
- letter-spacing: 0.02em;
- &.audio {
- overflow: visible;
- padding-top: 52px;
- }
- }
-
- .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;
- }
-
- .ckin__overlay {
- position: relative;
- }
-
- .ckin__overlay:before {
- background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
- }
-
- .ckin__overlay--2:before {
- background: rgba(24, 24, 24, 0.8);
- }
-
- .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;
- }
-
- .default:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- border-radius: 5px;
- transition: opacity .2s;
- opacity: 1;
- visibility: visible;
- }
-
- .default__title {
- position: absolute;
- left: 20px;
- top: 20px;
- z-index: 1;
- font-size: 24px;
- color: rgba(255, 255, 255, 0.8);
- font-style: italic;
- }
-
- .default__button {
- background: none;
- border: 0;
- line-height: 1;
- color: #00CF7D;
- outline: 0;
- padding: 0;
- cursor: pointer;
- -ms-flex-pack: center;
- justify-content: center;
- display: -ms-flexbox;
- display: flex;
- max-width: 50px;
- }
-
- .default__button i {
- -ms-flex-item-align: center;
- -ms-grid-row-align: center;
- align-self: center;
- }
-
- .default__button--big {
- background: none;
- border: 0;
- line-height: 1;
- color: #00CF7D;
- 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;
- }
-
- .default__slider {
- width: 10px;
- height: 30px;
- }
-
- .default__controls {
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- bottom: 0;
- right: 0;
- left: 0;
- transition: all .3s;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- background-color: @dark-blue;
- font-size: 32px;
- -ms-flex-align: center;
- align-items: center;
- padding: 10px;
- -ms-transform: translateY(0);
- transform: translateY(0);
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 0 0 5px 5px;
- }
-
- .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__controls > * {
- -ms-flex: 1;
- flex: 1;
- }
-
- .default .progress {
- position: relative;
- display: -ms-flexbox;
- display: flex;
- height: 17px;
- margin-bottom: 0px;
- transition: height 0.3s;
- background: rgba(0, 0, 0, 0.5);
- cursor: pointer;
- border-radius: 4px;
- }
-
- .default .progress__filled {
- width: 0%;
- background: #00CF7D;
- -ms-flex: 0;
- flex: 0;
- -ms-flex-preferred-size: 0%;
- flex-basis: 0%;
- border-radius: 4px;
- }
-
- .default .progress__breaker {
- display: block;
- width: 100%;
- height: 0;
- }
-
- .default {
- .progress__time {
- font-size: small;
- margin-right: 5px;
- }
- }
-
- .minimal {
- 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;
- }
-
- .minimal:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- border-radius: 5px;
- transition: opacity .2s;
- opacity: 1;
- visibility: visible;
- }
-
- .minimal__title {
- position: absolute;
- left: 20px;
- top: 20px;
- z-index: 1;
- font-size: 24px;
- color: rgba(255, 255, 255, 0.8);
- font-style: italic;
- }
-
- .minimal__button {
- background: none;
- border: 0;
- line-height: 1;
- color: #00CF7D;
- outline: 0;
- padding: 0;
- cursor: pointer;
- -ms-flex-pack: center;
- justify-content: center;
- display: -ms-flexbox;
- display: flex;
- max-width: 50px;
- }
-
- .minimal__button i {
- -ms-flex-item-align: center;
- -ms-grid-row-align: center;
- align-self: center;
- }
-
- .minimal__button--big {
- background: none;
- border: 0;
- line-height: 1;
- color: #00CF7D;
- 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 ease-in;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- }
-
- .minimal__slider {
- width: 10px;
- height: 30px;
- }
-
- .minimal__controls {
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- bottom: 0;
- right: 0;
- left: 0;
- transition: all .3s;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- background-color: @dark-blue;
- font-size: 32px;
- -ms-flex-align: center;
- align-items: center;
- padding: 10px;
- -ms-transform: translateY(0);
- transform: translateY(0);
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 0 0 5px 5px;
- }
-
- .minimal.is-playing:before {
- opacity: 0;
- visibility: hidden;
- }
-
- .minimal.is-playing .minimal__button--big {
- opacity: 0;
- visibility: hidden;
- -ms-transform: translate(-50%, -50%) scale(1.3);
- transform: translate(-50%, -50%) scale(1.3);
- }
-
- .minimal.is-playing .minimal__controls {
- -ms-transform: translateY(52px);
- transform: translateY(52px);
- }
-
- .minimal.is-playing:hover .minimal__controls {
- -ms-transform: translateY(0);
- transform: translateY(0);
- }
-
- .minimal__controls > * {
- -ms-flex: 1;
- flex: 1;
- }
-
- .minimal .progress {
- position: relative;
- display: -ms-flexbox;
- display: flex;
- height: 17px;
- margin-bottom: 0px;
- transition: height 0.3s;
- background: rgba(0, 0, 0, 0.5);
- cursor: pointer;
- border-radius: 4px;
- }
-
- .minimal .progress__filled {
- width: 0%;
- background: #00CF7D;
- -ms-flex: 0;
- flex: 0;
- -ms-flex-preferred-size: 0%;
- flex-basis: 0%;
- border-radius: 4px;
- }
-
- .minimal .progress__breaker {
- display: block;
- width: 100%;
- height: 0;
- }
-
- .minimal {
- .progress__time {
- font-size: small;
- margin-right: 5px;
- }
- }
-
-
- .compact {
- 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;
- }
-
- .compact:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- border-radius: 5px;
- transition: opacity .2s;
- opacity: 1;
- visibility: visible;
- }
-
- .compact__title {
- position: absolute;
- left: 20px;
- top: 20px;
- z-index: 1;
- font-size: 24px;
- color: rgba(255, 255, 255, 0.8);
- }
-
- .compact__button {
- background: none;
- border: 0;
- line-height: 1;
- color: #00CF7D;
- outline: 0;
- padding: 0;
- cursor: pointer;
- -ms-flex-pack: center;
- justify-content: center;
- display: -ms-flexbox;
- display: flex;
- max-width: 50px;
- }
-
- .compact__button i {
- -ms-flex-item-align: center;
- -ms-grid-row-align: center;
- align-self: center;
- }
-
- .compact__button--big {
- background: none;
- border: 0;
- line-height: 1;
- color: #00CF7D;
- 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 ease-in;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- }
-
- .compact__slider {
- width: 10px;
- height: 30px;
- }
-
- .compact__controls {
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- max-width: 400px;
- bottom: 0;
- right: 0;
- left: 50%;
- transition: all .3s;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- background-color: @dark-blue;
- font-size: 32px;
- -ms-flex-align: center;
- align-items: center;
- padding: 10px;
- -ms-transform: translateY(-20px) translateX(-50%);
- transform: translateY(-20px) translateX(-50%);
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 5px;
- }
-
- .compact.is-playing:before {
- opacity: 0;
- visibility: hidden;
- }
-
- .compact.is-playing .compact__button--big {
- opacity: 0;
- visibility: hidden;
- -ms-transform: translate(-50%, -50%) scale(1.3);
- transform: translate(-50%, -50%) scale(1.3);
- }
-
- .compact.is-playing .compact__controls {
- -ms-transform: translateY(52px) translateX(-50%);
- transform: translateY(52px) translateX(-50%);
- }
-
- .compact.is-playing:hover .compact__controls {
- -ms-transform: translateY(-20px) translateX(-50%);
- transform: translateY(-20px) translateX(-50%);
- }
-
- .compact__controls > * {
- -ms-flex: 1;
- flex: 1;
- }
-
- .compact .progress {
- position: relative;
- display: -ms-flexbox;
- display: flex;
- height: 17px;
- margin-bottom: 0px;
- transition: height 0.3s;
- background: rgba(0, 0, 0, 0.5);
- cursor: pointer;
- border-radius: 4px;
- }
-
- .compact .progress__filled {
- width: 0%;
- background: #00CF7D;
- -ms-flex: 0;
- flex: 0;
- -ms-flex-preferred-size: 0%;
- flex-basis: 0%;
- border-radius: 4px;
- }
-
- .compact .progress__breaker {
- display: block;
- width: 100%;
- height: 0;
- }
-
- .compact {
- .progress__time {
- font-size: small;
- margin-right: 5px;
- }
- }
-
-
-
- @media (max-width: 480px) {
- .ckin__player button {
- font-size: 18px;
- }
- }
-
- video::-webkit-media-controls-enclosure {
- display: none !important;
- }
|