HEGP
/
dataviz
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
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.
35 提交
1 分支
220MB
目錄樹: b9046b115d
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 'b9046b115d'
${ noResults }
dataviz/courses/perception-couleurs/assets/player/KeynoteDHTMLPlayer.css

657 line
13KB
原始文件 Blame 歷史記錄 

  1. * {

  2.     -webkit-user-select:none;

  3.     -moz-user-select:none;

  4.     -ms-user-select:none;

  5. }

  6. 

  7. /* Body */

  8. 

  9. body

  10. {

  11.     overflow: hidden;

  12.     margin: 0;

  13.     -webkit-user-select: none;

  14.     -moz-user-select: none;

  15.     -ms-user-select: none;

  16. }

  17. 

  18. @media screen and (max-device-width: 1025px)

  19. {

  20.     body

  21.     {

  22.         background-color: black;

  23.     }

  24. }

  25. 

  26. /* Debug Status Display */

  27.    

  28. div#statisticsDisplay

  29. {

  30.     position: absolute; 

  31.     color : white;

  32.     background-color: grey;

  33.     visibility: hidden;

  34. }

  35. 

  36. /* Stage */

  37. 

  38. div#stageArea

  39. {

  40.     position: absolute; 

  41.     visibility: hidden;

  42.     overflow: hidden;

  43. }

  44. 

  45. div.stage

  46. {

  47.     position: absolute; 

  48.     top: 0;

  49.     left: 0;

  50.     overflow: visible;

  51. }

  52. 

  53. /* Hyperlinke Plane */

  54. 

  55. div#hyperlinkPlane

  56. {

  57.     visibility: hidden;

  58.     pointer-events: none;

  59. }

  60. 

  61. div.hyperlink

  62. {

  63.     position: absolute;

  64.     cursor: pointer;

  65. }

  66. 

  67. /* Navigator */

  68. 

  69. div#slideshowNavigator {

  70.     -webkit-tap-highlight-color: rgba(0,0,0,0);

  71.     -moz-tap-highlight-color: rgba(0,0,0,0);

  72.     -ms-tap-highlight-color: rgba(0,0,0,0);

  73.     position: absolute;

  74.     overflow: hidden;

  75.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  76.     font-size: 12px;

  77.     line-height: 18px;

  78.     background-color: rgba(0,0,0,0);

  79.     color: 232323;

  80.     top: 0px;

  81.     left: 0px;

  82.     bottom: 0px;

  83.     width: 140px;

  84. }

  85. 

  86. div.navigatorLeftSidebar {

  87.     position: absolute;

  88.     overflow-x: hidden;

  89.     overflow-y: hidden;

  90.     top: 0px;

  91.     left: 0px;

  92.     bottom: 0px;

  93.     width: 30px;

  94.     background-color: rgba(0,0,0,0);

  95. }

  96. 

  97. div.navigatorThumbnailSidebar {

  98.     position: absolute;

  99.     overflow-x: hidden;

  100.     overflow-y: hidden;

  101.     border-right: 1px solid #676767;

  102.     background-color: #000;

  103.     top: 0px;

  104.     left: -140px;

  105.     bottom: 0px;

  106.     width: 129px;

  107.     -webkit-transition-property: left;

  108.     -webkit-transition-duration: 300ms;

  109.     -moz-transition-property: left;

  110.     -moz-transition-duration: 300ms;

  111.     -ms-transition-property: left;

  112.     -ms-transition-duration: 300ms;

  113. }

  114. 

  115. div.navigatorThumbnailScroller {

  116.     position: absolute;

  117.     overflow-x: hidden;

  118.     overflow-y: auto;

  119.     top: 0px;

  120.     left: 0px;

  121.     bottom: 0px;

  122.     width: 129px;

  123. }

  124. 

  125. div.navigatorThumbnailScroller::-webkit-scrollbar {

  126.     width: 7px;

  127. }

  128. 

  129. div.navigatorThumbnailScroller::-webkit-scrollbar-thumb {

  130.     background: rgba(255,255,255,0.4);

  131.     -webkit-border-radius: 10px;

  132. }

  133. 

  134. div.navigatorThumbnailSelection {

  135.     position: absolute;

  136.     border-top-style: none;

  137.     border-left-style: none;

  138.     border-right-style: none;

  139.     display: none;

  140.     background-color: rgba(125,125,125,0.5);

  141.     top: 0px;

  142.     width: 100%;

  143.     height: 76px;

  144. }

  145. 

  146. div.navigatorThumbnailContainer {

  147.     position: absolute;

  148.     top: 0px;

  149.     left: 0px;

  150.     bottom: auto;

  151.     width: 119px;

  152. }

  153. 

  154. div.navigatorThumbnailItem {

  155.     position: absolute;

  156.     top: 0px;

  157.     left: 0px;

  158.     width: 119px;

  159.     height: 76px;

  160.     cursor: default;

  161. }

  162. 

  163. div.navigatorThumbnailItemCanvasContainer {

  164.     position: absolute;

  165.     max-height: 90px;

  166.     border: 1px solid rgba(255,255,255,0.68);

  167.     -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);

  168.     -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);

  169.     -ms-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);

  170.     background-color: #444;

  171.     width: 88px;    

  172.     height: 66px;

  173. }

  174. 

  175. /* Slide Number Control */

  176. 

  177. div#slideNumberControl {

  178.     position: absolute;

  179.     overflow: hidden;

  180.     display: none;

  181.     opacity: 0;

  182.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  183.     font-size: 12px;

  184.     background-color: rgba(0,0,0,0.75);

  185.     color: white;

  186.     width: 120px;

  187.     height: 110px;

  188.     text-align: center;

  189.     border-radius: 12px;

  190.     -webkit-border-radius: 12px;

  191.     -moz-border-radius: 12px;

  192.     -ms-border-radius: 12px;

  193. }

  194. 

  195. div.slideNumberLabel {

  196.     position: relative;

  197.     margin-left:16px;

  198.     margin-right:16px;

  199.     margin-top: 16px;

  200.     width: 88px;

  201.     height:33px;

  202.     font-weight: bold;

  203. }

  204. 

  205. div.slideNumberDigit {

  206.     position: relative;

  207.     margin-left:auto;

  208.     margin-right:auto;

  209.     font-size:40px;

  210.     width: 88px;

  211.     height:39px;

  212. }

  213. 

  214. /* Slide Number Display */

  215. 

  216. div#slideNumberDisplay {

  217.     position: absolute;

  218.     overflow: hidden;

  219.     display: none;

  220.     opacity: 0;

  221.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  222.     font-size: 12px;

  223.     background-color: rgba(0,0,0,0.75);

  224.     color: white;

  225.     width: 100px;

  226.     height: 100px;

  227.     text-align: center;

  228.     border-radius: 12px;

  229.     -webkit-border-radius: 12px;

  230.     -moz-border-radius: 12px;

  231.     -ms-border-radius: 12px;

  232. }

  233. 

  234. div.slideNumberDisplayDigit {

  235.     position: relative;

  236.     margin-top:24px;

  237.     margin-left:auto;

  238.     margin-right:auto;

  239.     font-size:40px;

  240.     width: 88px;

  241.     height:39px;

  242. }

  243. 

  244. /* Help Placard Display */

  245. 

  246. div#helpPlacard {

  247.     display: none;

  248.     position: absolute;

  249.     overflow: hidden;

  250.     opacity: 0;

  251.     font-family: Helvetica, Arial, sans-serif;

  252.     font-size: 14px;

  253.     background-color: rgba(20,20,20,0.95);

  254.     color: white;

  255.     width: 822px;

  256.     height: 633px;

  257.     text-align: center;

  258.     border-radius: 12px 12px 12px 12px;

  259.     -webkit-border-radius: 12px 12px 12px 12px;

  260.     -moz-border-radius: 12px 12px 12px 12px;

  261.     -ms-border-radius: 12px 12px 12px 12px;

  262.     line-height:40px;

  263.     box-shadow: 0px 0px 40px black;

  264.     -webkit-box-shadow: 0px 0px 40px black;

  265.     -moz-box-shadow: 0px 0px 40px black;

  266. }

  267. 

  268. div.helpPlacardTitleBar {

  269.     /*position:absolute;*/

  270.     font-size: 22px;

  271.     color: rgba(120,120,120,1);    

  272.     font-family: Helvetica, Arial, sans-serif;

  273.     width: 822px;

  274.     height: 40px;

  275.     border-radius: 12px 12px 0 0;

  276.     -webkit-border-radius: 12px 12px 0 0;

  277.     -moz-border-radius: 12px 12px 0 0;

  278.     -ms-border-radius: 12px 12px 0 0;

  279.     border-bottom: 1px black solid;

  280. }

  281. 

  282. div.helpPlacardTitle {

  283.     padding-top:4px;

  284.     height:40px;

  285. }

  286. 

  287. div.helpPlacardCloseButton {

  288.     cursor:default;

  289.     top:10px;

  290.     left:10px;    

  291.     position:absolute;

  292.     background:url('close_n@2x.png') no-repeat 0 0;

  293.     background-size: 21px 21px;

  294.     width:21px;

  295.     height:21px;

  296. }

  297. 

  298. div.helpPlacardCloseButton:hover {

  299.     background:url('close_hi@2x.png') no-repeat 0 0;

  300.     background-size: 21px 21px;

  301. }

  302. 

  303. div.helpPlacardCloseButton:active {

  304.     background:url('close_p@2x.png') no-repeat 0 0;

  305.     background-size: 21px 21px;

  306. }

  307. 

  308. div.helpPlacardContentPanel {

  309.     width: 822px;

  310.     height: 310px;

  311. }

  312. 

  313. div.helpPlacardHeader {

  314.     color: rgba(255,255,255,1);    

  315.     font-weight: bold;

  316.     width:822px;

  317.     height:40px;

  318.     border-bottom: 1px white solid;

  319. }

  320. 

  321. div.helpPlacardHeader {

  322.     color: rgba(255,255,255,1);    

  323.     font-weight: bold;

  324.     width:822px;

  325.     height:40px;

  326.     border-bottom: 1px black solid;

  327. }

  328. 

  329. div.helpPlacardItem {

  330.     width:822px;

  331.     height:40px;

  332.     border-bottom: 1px black solid;

  333. }

  334. 

  335. div.helpPlacardLeftHeaderItem {

  336.     /*position:absolute;*/

  337.     color: white;    

  338.     text-align:right;

  339.     float:left;

  340.     width:400px;

  341. }

  342. 

  343. div.helpPlacardLeftItem {

  344.     color: rgba(120,120,120,1);    

  345.     text-align:right;

  346.     float:left;

  347.     width:400px;

  348.     border-right: 1px black solid;

  349. }

  350. 

  351. div.helpPlacardRightItem {

  352.     text-align:left;

  353.     float:right;

  354.     width:400px;

  355. }

  356. 

  357. div.helpPlacardFooter {

  358.     font-size: 14px;

  359.     color: rgba(120,120,120,1);

  360.     font-family: Helvetica, Arial, sans-serif;

  361.     width: 822px;

  362.     height: 54px;

  363. }

  364. 

  365. div.helpPlacardAcknowledgementsButton {

  366.     cursor: default;

  367.     right: 26px;

  368.     bottom: 22px;

  369.     height: 28px;

  370.     line-height: 28px;

  371.     padding-left: 11px;

  372.     padding-right: 11px;

  373.     position:absolute;

  374.     background:url('kn-cloud_pd_help_btn-N@2x.png') no-repeat center center fixed;

  375.     background-size: cover;

  376.     -webkit-background-size: cover;

  377.     -moz-background-size: cover;

  378.     border-radius: 4px 4px 4px 4px;

  379.     -webkit-border-radius: 4px 4px 4px 4px;

  380.     -moz-border-radius: 4px 4px 4px 4px;

  381. }

  382. 

  383. div.helpPlacardAcknowledgementsButton:hover {

  384.     background:url('kn-cloud_pd_help_btn-H@2x.png') no-repeat center center fixed;

  385.     background-size: cover;

  386.     -webkit-background-size: cover;

  387.     -moz-background-size: cover;

  388. }

  389. 

  390. div.helpPlacardAcknowledgementsButton:active {

  391.     background:url('kn-cloud_pd_help_btn-P@2x.png') no-repeat center center fixed;

  392.     background-size: cover;

  393.     -webkit-background-size: cover;

  394.     -moz-background-size: cover;

  395. }

  396. 

  397. /* Waiting Indicator */

  398. 

  399. @-webkit-keyframes spinnerAnimationRotate {

  400.     0% {

  401.         -webkit-transform: rotate(  0deg);

  402.     }

  403.     8.332% {

  404.         -webkit-transform: rotate(  0deg);

  405.     }

  406.     8.333% {

  407.         -webkit-transform: rotate( 30deg);

  408.     }

  409.     16.666% {

  410.         -webkit-transform: rotate( 30deg);

  411.     }

  412.     16.667% {

  413.         -webkit-transform: rotate( 60deg);

  414.     }

  415.     24.999% {

  416.         -webkit-transform: rotate( 60deg);

  417.     }

  418.     25% {

  419.         -webkit-transform: rotate( 90deg);

  420.     }

  421.     33.333% {

  422.         -webkit-transform: rotate( 90deg);

  423.     }

  424.     33.334% {

  425.         -webkit-transform: rotate(120deg);

  426.     }

  427.     41.666% {

  428.         -webkit-transform: rotate(120deg);

  429.     }

  430.     41.667% {

  431.         -webkit-transform: rotate(150deg);

  432.     }

  433.     49.999% {

  434.         -webkit-transform: rotate(150deg);

  435.     }

  436.     50% {

  437.         -webkit-transform: rotate(180deg);

  438.     }

  439.     58.333% {

  440.         -webkit-transform: rotate(180deg);

  441.     }

  442.     58.334% {

  443.         -webkit-transform: rotate(210deg);

  444.     }

  445.     66.666% {

  446.         -webkit-transform: rotate(210deg);

  447.     }

  448.     66.667% {

  449.         -webkit-transform: rotate(240deg);

  450.     }

  451.     74.999% {

  452.         -webkit-transform: rotate(240deg);

  453.     }

  454.     75% {

  455.         -webkit-transform: rotate(270deg);

  456.     }

  457.     83.333% {

  458.         -webkit-transform: rotate(270deg);

  459.     }

  460.     83.334% {

  461.         -webkit-transform: rotate(300deg);

  462.     }

  463.     91.666% {

  464.         -webkit-transform: rotate(300deg);

  465.     }

  466.     91.667% {

  467.         -webkit-transform: rotate(330deg);

  468.     }

  469.     99.999% {

  470.         -webkit-transform: rotate(330deg);

  471.     }

  472.     100% {

  473.         -webkit-transform: rotate(360deg);

  474.     }

  475. }

  476. 

  477. @-moz-keyframes spinnerAnimationRotate {

  478.     0% {

  479.         -moz-transform: rotate(  0deg);

  480.     }

  481.     8.332% {

  482.         -moz-transform: rotate(  0deg);

  483.     }

  484.     8.333% {

  485.         -moz-transform: rotate( 30deg);

  486.     }

  487.     16.666% {

  488.         -moz-transform: rotate( 30deg);

  489.     }

  490.     16.667% {

  491.         -moz-transform: rotate( 60deg);

  492.     }

  493.     24.999% {

  494.         -moz-transform: rotate( 60deg);

  495.     }

  496.     25% {

  497.         -moz-transform: rotate( 90deg);

  498.     }

  499.     33.333% {

  500.         -moz-transform: rotate( 90deg);

  501.     }

  502.     33.334% {

  503.         -moz-transform: rotate(120deg);

  504.     }

  505.     41.666% {

  506.         -moz-transform: rotate(120deg);

  507.     }

  508.     41.667% {

  509.         -moz-transform: rotate(150deg);

  510.     }

  511.     49.999% {

  512.         -moz-transform: rotate(150deg);

  513.     }

  514.     50% {

  515.         -moz-transform: rotate(180deg);

  516.     }

  517.     58.333% {

  518.         -moz-transform: rotate(180deg);

  519.     }

  520.     58.334% {

  521.         -moz-transform: rotate(210deg);

  522.     }

  523.     66.666% {

  524.         -moz-transform: rotate(210deg);

  525.     }

  526.     66.667% {

  527.         -moz-transform: rotate(240deg);

  528.     }

  529.     74.999% {

  530.         -moz-transform: rotate(240deg);

  531.     }

  532.     75% {

  533.         -moz-transform: rotate(270deg);

  534.     }

  535.     83.333% {

  536.         -moz-transform: rotate(270deg);

  537.     }

  538.     83.334% {

  539.         -moz-transform: rotate(300deg);

  540.     }

  541.     91.666% {

  542.         -moz-transform: rotate(300deg);

  543.     }

  544.     91.667% {

  545.         -moz-transform: rotate(330deg);

  546.     }

  547.     99.999% {

  548.         -moz-transform: rotate(330deg);

  549.     }

  550.     100% {

  551.         -moz-transform: rotate(360deg);

  552.     }

  553. }

  554. 

  555. @-ms-keyframes spinnerAnimationRotate {

  556.     0% {

  557.         -ms-transform: rotate(  0deg);

  558.     }

  559.     8.332% {

  560.         -ms-transform: rotate(  0deg);

  561.     }

  562.     8.333% {

  563.         -ms-transform: rotate( 30deg);

  564.     }

  565.     16.666% {

  566.         -ms-transform: rotate( 30deg);

  567.     }

  568.     16.667% {

  569.         -ms-transform: rotate( 60deg);

  570.     }

  571.     24.999% {

  572.         -ms-transform: rotate( 60deg);

  573.     }

  574.     25% {

  575.         -ms-transform: rotate( 90deg);

  576.     }

  577.     33.333% {

  578.         -ms-transform: rotate( 90deg);

  579.     }

  580.     33.334% {

  581.         -ms-transform: rotate(120deg);

  582.     }

  583.     41.666% {

  584.         -ms-transform: rotate(120deg);

  585.     }

  586.     41.667% {

  587.         -ms-transform: rotate(150deg);

  588.     }

  589.     49.999% {

  590.         -ms-transform: rotate(150deg);

  591.     }

  592.     50% {

  593.         -ms-transform: rotate(180deg);

  594.     }

  595.     58.333% {

  596.         -ms-transform: rotate(180deg);

  597.     }

  598.     58.334% {

  599.         -ms-transform: rotate(210deg);

  600.     }

  601.     66.666% {

  602.         -ms-transform: rotate(210deg);

  603.     }

  604.     66.667% {

  605.         -ms-transform: rotate(240deg);

  606.     }

  607.     74.999% {

  608.         -ms-transform: rotate(240deg);

  609.     }

  610.     75% {

  611.         -ms-transform: rotate(270deg);

  612.     }

  613.     83.333% {

  614.         -ms-transform: rotate(270deg);

  615.     }

  616.     83.334% {

  617.         -ms-transform: rotate(300deg);

  618.     }

  619.     91.666% {

  620.         -ms-transform: rotate(300deg);

  621.     }

  622.     91.667% {

  623.         -ms-transform: rotate(330deg);

  624.     }

  625.     99.999% {

  626.         -ms-transform: rotate(330deg);

  627.     }

  628.     100% {

  629.         -ms-transform: rotate(360deg);

  630.     }

  631. }

  632. 

  633. div#waitingIndicator

  634. {

  635.     position: absolute;

  636.     display: none;

  637.     visibility: visible;

  638.     width: 110px;

  639.     height: 110px;

  640.     background-image: url('waiting_bezel.png');

  641. }

  642. 

  643. div#waitingSpinner

  644. {

  645.     position: absolute; 

  646.     visibility: visible;

  647.     top: 27px;

  648.     left: 33px;

  649.     width: 42px;

  650.     height: 42px;

  651.     background: transparent url('spinner.png') no-repeat 0 0;

  652.     opacity: 0.75;

  653.     -webkit-animation: spinnerAnimationRotate 1s linear infinite;

  654.     -moz-animation: spinnerAnimationRotate 1s linear infinite;

  655.     -ms-animation: spinnerAnimationRotate 1s linear infinite;

  656. }