kiska
/
transfer.sh-web
1
0
Fork 1
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
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.
26 Commits
2 Branches
8.0 MiB
 
 
 
 
Tree: 35a7877247
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '35a7877247'
${ noResults }
transfer.sh-web/src/styles/includes/ckin.less

628 lines
17 KiB
Raw Blame History 

  1. /*!

  2.    ckin v0.0.1: Custom HTML5 Video Player Skins.

  3.    (c) 2017

  4.    MIT License

  5.    git+https://github.com/hunzaboy/ckin.git

  6. */

  7. @font-face {

  8.   font-family: 'ckin';

  9.   src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");

  10.   font-weight: normal;

  11.   font-style: normal; }

  12. 

  13. [class^="ckin-"], [class*=" ckin-"] {

  14.   /* use !important to prevent issues with browser extensions that change fonts */

  15.   font-family: 'ckin' !important;

  16.   speak: none;

  17.   font-style: normal;

  18.   font-weight: normal;

  19.   font-variant: normal;

  20.   text-transform: none;

  21.   line-height: 1;

  22.   /* Better Font Rendering =========== */

  23.   -webkit-font-smoothing: antialiased;

  24.   -moz-osx-font-smoothing: grayscale;

  25. }

  26. 

  27. .ckin-compress:before {

  28.   content: "\f109";;

  29. }

  30. 

  31. .ckin-expand:before {

  32.   content: "\f108";;

  33. }

  34. 

  35. .ckin-play:before {

  36.   content: "\f101";

  37. }

  38. 

  39. .ckin-pause:before {

  40.   content: "\f103";

  41. }

  42. 

  43. .ckin-stop:before {

  44.   content: "\f10a";

  45. }

  46. 

  47. .ckin-backward:before {

  48.   content: "\f120";;

  49. }

  50. 

  51. .ckin-forward:before {

  52.   content: "\f11f";

  53. }

  54. 

  55. .ckin-volume-high:before {

  56.   content: "\f107";

  57. }

  58. 

  59. .ckin-volume-medium:before {

  60.   content: "\f106";

  61. }

  62. 

  63. .ckin-volume-low:before {

  64.   content: "\f105";

  65. }

  66. 

  67. .ckin-volume-mute:before {

  68.   content: "\f104";

  69. }

  70. 

  71. body {

  72.   font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;

  73.   -webkit-font-smoothing: antialiased;

  74.   -moz-osx-font-smoothing: grayscale;

  75.   letter-spacing: 0.02em;

  76. }

  77. 

  78. video {

  79.   width: 100%;

  80.   height: auto;

  81.   cursor: pointer;

  82. }

  83. 

  84. .ckin__player {

  85.   margin-bottom: 20px;

  86.   font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;

  87.   letter-spacing: 0.02em;

  88.   &.audio {

  89.     overflow: visible;

  90.     padding-top: 52px;

  91.   }

  92. }

  93. 

  94. .ckin__player.ckin__fullscreen {

  95.   position: fixed;

  96.   top: 0;

  97.   left: 0;

  98.   right: 0;

  99.   bottom: 0;

  100.   height: 100%;

  101.   width: 100%;

  102.   z-index: 10000000;

  103.   background: #000;

  104.   border-radius: 0 !important;

  105.   display: -ms-flexbox;

  106.   display: flex;

  107. }

  108. 

  109. .ckin__overlay {

  110.   position: relative;

  111. }

  112. 

  113. .ckin__overlay:before {

  114.   background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.65) 100%);

  115. }

  116. 

  117. .ckin__overlay--2:before {

  118.   background: rgba(24, 24, 24, 0.8);

  119. }

  120. 

  121. .default {

  122.   border: 0 solid rgba(0, 0, 0, 0.2);

  123.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  124.   position: relative;

  125.   font-size: 0;

  126.   overflow: hidden;

  127.   border-radius: 5px;

  128.   cursor: pointer;

  129. }

  130. 

  131. .default:before {

  132.   content: '';

  133.   position: absolute;

  134.   top: 0;

  135.   left: 0;

  136.   bottom: 0;

  137.   right: 0;

  138.   border-radius: 5px;

  139.   transition: opacity .2s;

  140.   opacity: 1;

  141.   visibility: visible;

  142. }

  143. 

  144. .default__title {

  145.   position: absolute;

  146.   left: 20px;

  147.   top: 20px;

  148.   z-index: 1;

  149.   font-size: 24px;

  150.   color: rgba(255, 255, 255, 0.8);

  151.   font-style: italic;

  152. }

  153. 

  154. .default__button {

  155.   background: none;

  156.   border: 0;

  157.   line-height: 1;

  158.   color: #00CF7D;

  159.   outline: 0;

  160.   padding: 0;

  161.   cursor: pointer;

  162.   -ms-flex-pack: center;

  163.       justify-content: center;

  164.   display: -ms-flexbox;

  165.   display: flex;

  166.   max-width: 50px;

  167. }

  168. 

  169. .default__button i {

  170.   -ms-flex-item-align: center;

  171.       -ms-grid-row-align: center;

  172.       align-self: center;

  173. }

  174. 

  175. .default__button--big {

  176.   background: none;

  177.   border: 0;

  178.   line-height: 1;

  179.   color: #00CF7D;

  180.   text-align: center;

  181.   outline: 0;

  182.   padding: 0;

  183.   cursor: pointer;

  184.   position: absolute;

  185.   opacity: 1;

  186.   visibility: visible;

  187.   top: 50%;

  188.   left: 50%;

  189.   -ms-transform: translate(-50%, -50%) scale(1);

  190.       transform: translate(-50%, -50%) scale(1);

  191.   font-size: 64px;

  192.   transition: all .2s;

  193.   -ms-touch-action: manipulation;

  194.       touch-action: manipulation;

  195. }

  196. 

  197. .default__slider {

  198.   width: 10px;

  199.   height: 30px;

  200. }

  201. 

  202. .default__controls {

  203.   display: -ms-flexbox;

  204.   display: flex;

  205.   position: absolute;

  206.   bottom: 0;

  207.   right: 0;

  208.   left: 0;

  209.   transition: all .3s;

  210.   -ms-flex-wrap: wrap;

  211.       flex-wrap: wrap;

  212.   background-color: @dark-blue;

  213.   font-size: 32px;

  214.   -ms-flex-align: center;

  215.       align-items: center;

  216.   padding: 10px;

  217.   -ms-transform: translateY(0);

  218.       transform: translateY(0);

  219.   -ms-flex-pack: justify;

  220.       justify-content: space-between;

  221.   border-radius: 0 0 5px 5px;

  222. }

  223. 

  224. .default.is-playing:before {

  225.   opacity: 0;

  226.   visibility: hidden;

  227.   -ms-transform: translate(-50%, -50%) scale(1.3);

  228.       transform: translate(-50%, -50%) scale(1.3);

  229. }

  230. 

  231. .default.is-playing .default__button--big {

  232.   opacity: 0;

  233.   visibility: hidden;

  234. }

  235. 

  236. .default.is-playing .default__controls {

  237.   -ms-transform: translateY(52px);

  238.       transform: translateY(52px);

  239. }

  240. 

  241. .default.is-playing:hover .default__controls {

  242.   -ms-transform: translateY(0);

  243.       transform: translateY(0);

  244. }

  245. 

  246. .default__controls > * {

  247.   -ms-flex: 1;

  248.       flex: 1;

  249. }

  250. 

  251. .default .progress {

  252.   position: relative;

  253.   display: -ms-flexbox;

  254.   display: flex;

  255.   height: 17px;

  256.   margin-bottom: 0px;

  257.   transition: height 0.3s;

  258.   background: rgba(0, 0, 0, 0.5);

  259.   cursor: pointer;

  260.   border-radius: 4px;

  261. }

  262. 

  263. .default .progress__filled {

  264.   width: 0%;

  265.   background: #00CF7D;

  266.   -ms-flex: 0;

  267.       flex: 0;

  268.   -ms-flex-preferred-size: 0%;

  269.       flex-basis: 0%;

  270.   border-radius: 4px;

  271. }

  272. 

  273. .default .progress__breaker {

  274.   display: block;

  275.   width: 100%;

  276.   height: 0;

  277. }

  278. 

  279. .default {

  280.   .progress__time {

  281.     font-size: small;

  282.     margin-right: 5px;

  283.   }

  284. }

  285. 

  286. .minimal {

  287.   border: 0 solid rgba(0, 0, 0, 0.2);

  288.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  289.   position: relative;

  290.   font-size: 0;

  291.   overflow: hidden;

  292.   border-radius: 5px;

  293.   cursor: pointer;

  294. }

  295. 

  296. .minimal:before {

  297.   content: '';

  298.   position: absolute;

  299.   top: 0;

  300.   left: 0;

  301.   bottom: 0;

  302.   right: 0;

  303.   border-radius: 5px;

  304.   transition: opacity .2s;

  305.   opacity: 1;

  306.   visibility: visible;

  307. }

  308. 

  309. .minimal__title {

  310.   position: absolute;

  311.   left: 20px;

  312.   top: 20px;

  313.   z-index: 1;

  314.   font-size: 24px;

  315.   color: rgba(255, 255, 255, 0.8);

  316.   font-style: italic;

  317. }

  318. 

  319. .minimal__button {

  320.   background: none;

  321.   border: 0;

  322.   line-height: 1;

  323.   color: #00CF7D;

  324.   outline: 0;

  325.   padding: 0;

  326.   cursor: pointer;

  327.   -ms-flex-pack: center;

  328.       justify-content: center;

  329.   display: -ms-flexbox;

  330.   display: flex;

  331.   max-width: 50px;

  332. }

  333. 

  334. .minimal__button i {

  335.   -ms-flex-item-align: center;

  336.       -ms-grid-row-align: center;

  337.       align-self: center;

  338. }

  339. 

  340. .minimal__button--big {

  341.   background: none;

  342.   border: 0;

  343.   line-height: 1;

  344.   color: #00CF7D;

  345.   text-align: center;

  346.   outline: 0;

  347.   padding: 0;

  348.   cursor: pointer;

  349.   position: absolute;

  350.   opacity: 1;

  351.   visibility: visible;

  352.   top: 50%;

  353.   left: 50%;

  354.   -ms-transform: translate(-50%, -50%) scale(1);

  355.       transform: translate(-50%, -50%) scale(1);

  356.   font-size: 64px;

  357.   transition: all .2s ease-in;

  358.   -ms-touch-action: manipulation;

  359.       touch-action: manipulation;

  360. }

  361. 

  362. .minimal__slider {

  363.   width: 10px;

  364.   height: 30px;

  365. }

  366. 

  367. .minimal__controls {

  368.   display: -ms-flexbox;

  369.   display: flex;

  370.   position: absolute;

  371.   bottom: 0;

  372.   right: 0;

  373.   left: 0;

  374.   transition: all .3s;

  375.   -ms-flex-wrap: wrap;

  376.       flex-wrap: wrap;

  377.   background-color: @dark-blue;

  378.   font-size: 32px;

  379.   -ms-flex-align: center;

  380.       align-items: center;

  381.   padding: 10px;

  382.   -ms-transform: translateY(0);

  383.       transform: translateY(0);

  384.   -ms-flex-pack: justify;

  385.       justify-content: space-between;

  386.   border-radius: 0 0 5px 5px;

  387. }

  388. 

  389. .minimal.is-playing:before {

  390.   opacity: 0;

  391.   visibility: hidden;

  392. }

  393. 

  394. .minimal.is-playing .minimal__button--big {

  395.   opacity: 0;

  396.   visibility: hidden;

  397.   -ms-transform: translate(-50%, -50%) scale(1.3);

  398.       transform: translate(-50%, -50%) scale(1.3);

  399. }

  400. 

  401. .minimal.is-playing .minimal__controls {

  402.   -ms-transform: translateY(52px);

  403.       transform: translateY(52px);

  404. }

  405. 

  406. .minimal.is-playing:hover .minimal__controls {

  407.   -ms-transform: translateY(0);

  408.       transform: translateY(0);

  409. }

  410. 

  411. .minimal__controls > * {

  412.   -ms-flex: 1;

  413.       flex: 1;

  414. }

  415. 

  416. .minimal .progress {

  417.   position: relative;

  418.   display: -ms-flexbox;

  419.   display: flex;

  420.   height: 17px;

  421.   margin-bottom: 0px;

  422.   transition: height 0.3s;

  423.   background: rgba(0, 0, 0, 0.5);

  424.   cursor: pointer;

  425.   border-radius: 4px;

  426. }

  427. 

  428. .minimal .progress__filled {

  429.   width: 0%;

  430.   background: #00CF7D;

  431.   -ms-flex: 0;

  432.       flex: 0;

  433.   -ms-flex-preferred-size: 0%;

  434.       flex-basis: 0%;

  435.   border-radius: 4px;

  436. }

  437. 

  438. .minimal .progress__breaker {

  439.   display: block;

  440.   width: 100%;

  441.   height: 0;

  442. }

  443. 

  444. .minimal {

  445.   .progress__time {

  446.     font-size: small;

  447.     margin-right: 5px;

  448.   }

  449. }

  450. 

  451. 

  452. .compact {

  453.   border: 0 solid rgba(0, 0, 0, 0.2);

  454.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  455.   position: relative;

  456.   font-size: 0;

  457.   overflow: hidden;

  458.   border-radius: 5px;

  459.   cursor: pointer;

  460. }

  461. 

  462. .compact:before {

  463.   content: '';

  464.   position: absolute;

  465.   top: 0;

  466.   left: 0;

  467.   bottom: 0;

  468.   right: 0;

  469.   border-radius: 5px;

  470.   transition: opacity .2s;

  471.   opacity: 1;

  472.   visibility: visible;

  473. }

  474. 

  475. .compact__title {

  476.   position: absolute;

  477.   left: 20px;

  478.   top: 20px;

  479.   z-index: 1;

  480.   font-size: 24px;

  481.   color: rgba(255, 255, 255, 0.8);

  482. }

  483. 

  484. .compact__button {

  485.   background: none;

  486.   border: 0;

  487.   line-height: 1;

  488.   color: #00CF7D;

  489.   outline: 0;

  490.   padding: 0;

  491.   cursor: pointer;

  492.   -ms-flex-pack: center;

  493.       justify-content: center;

  494.   display: -ms-flexbox;

  495.   display: flex;

  496.   max-width: 50px;

  497. }

  498. 

  499. .compact__button i {

  500.   -ms-flex-item-align: center;

  501.       -ms-grid-row-align: center;

  502.       align-self: center;

  503. }

  504. 

  505. .compact__button--big {

  506.   background: none;

  507.   border: 0;

  508.   line-height: 1;

  509.   color: #00CF7D;

  510.   text-align: center;

  511.   outline: 0;

  512.   padding: 0;

  513.   cursor: pointer;

  514.   position: absolute;

  515.   opacity: 1;

  516.   visibility: visible;

  517.   top: 50%;

  518.   left: 50%;

  519.   -ms-transform: translate(-50%, -50%) scale(1);

  520.       transform: translate(-50%, -50%) scale(1);

  521.   font-size: 64px;

  522.   transition: all .2s ease-in;

  523.   -ms-touch-action: manipulation;

  524.       touch-action: manipulation;

  525. }

  526. 

  527. .compact__slider {

  528.   width: 10px;

  529.   height: 30px;

  530. }

  531. 

  532. .compact__controls {

  533.   display: -ms-flexbox;

  534.   display: flex;

  535.   position: absolute;

  536.   max-width: 400px;

  537.   bottom: 0;

  538.   right: 0;

  539.   left: 50%;

  540.   transition: all .3s;

  541.   -ms-flex-wrap: wrap;

  542.       flex-wrap: wrap;

  543.   background-color: @dark-blue;

  544.   font-size: 32px;

  545.   -ms-flex-align: center;

  546.       align-items: center;

  547.   padding: 10px;

  548.   -ms-transform: translateY(-20px) translateX(-50%);

  549.       transform: translateY(-20px) translateX(-50%);

  550.   -ms-flex-pack: justify;

  551.       justify-content: space-between;

  552.   border-radius: 5px;

  553. }

  554. 

  555. .compact.is-playing:before {

  556.   opacity: 0;

  557.   visibility: hidden;

  558. }

  559. 

  560. .compact.is-playing .compact__button--big {

  561.   opacity: 0;

  562.   visibility: hidden;

  563.   -ms-transform: translate(-50%, -50%) scale(1.3);

  564.       transform: translate(-50%, -50%) scale(1.3);

  565. }

  566. 

  567. .compact.is-playing .compact__controls {

  568.   -ms-transform: translateY(52px) translateX(-50%);

  569.       transform: translateY(52px) translateX(-50%);

  570. }

  571. 

  572. .compact.is-playing:hover .compact__controls {

  573.   -ms-transform: translateY(-20px) translateX(-50%);

  574.       transform: translateY(-20px) translateX(-50%);

  575. }

  576. 

  577. .compact__controls > * {

  578.   -ms-flex: 1;

  579.       flex: 1;

  580. }

  581. 

  582. .compact .progress {

  583.   position: relative;

  584.   display: -ms-flexbox;

  585.   display: flex;

  586.   height: 17px;

  587.   margin-bottom: 0px;

  588.   transition: height 0.3s;

  589.   background: rgba(0, 0, 0, 0.5);

  590.   cursor: pointer;

  591.   border-radius: 4px;

  592. }

  593. 

  594. .compact .progress__filled {

  595.   width: 0%;

  596.   background: #00CF7D;

  597.   -ms-flex: 0;

  598.       flex: 0;

  599.   -ms-flex-preferred-size: 0%;

  600.       flex-basis: 0%;

  601.   border-radius: 4px;

  602. }

  603. 

  604. .compact .progress__breaker {

  605.   display: block;

  606.   width: 100%;

  607.   height: 0;

  608. }

  609. 

  610. .compact {

  611.   .progress__time {

  612.     font-size: small;

  613.     margin-right: 5px;

  614.   }

  615. }

  616. 

  617. 

  618. 

  619. @media (max-width: 480px) {

  620.   .ckin__player button {

  621.     font-size: 18px;

  622.   }

  623. }

  624. 

  625. video::-webkit-media-controls-enclosure {

  626.   display: none !important;

  627. }