Warning, /webapps/ocs-webserver/httpdocs/theme/react/product-media-slider/style/product-media-slider.less is written in an unsupported language. File is not indexed.
0001 @import "../../assets/less/elements.less";
0002
0003 video:focus {
0004 outline: none;
0005 outline-style: none;
0006 }
0007
0008 #product-media-slider-container {
0009 width:100%;
0010 margin-bottom: 15px;
0011 }
0012
0013 #media-slider {
0014 box-sizing: content-box;
0015 overflow: hidden;
0016 position: relative;
0017 padding-bottom: 110px;
0018 background-color: white;
0019
0020 .carousel-control {
0021 width: 50px;
0022 height: 100%;
0023 z-index: 100;
0024 cursor: pointer;
0025 opacity: 1;
0026
0027 .visible-container {
0028 background: rgba(0,0,0,0.35);
0029 top:50%;
0030 width:50px;
0031 height:50px;
0032 display: block;
0033 position: absolute;
0034 left:0;
0035
0036 .glyphicon {
0037 margin-top: -15px;
0038 }
0039 }
0040 }
0041
0042 .swiper-pagination {
0043 bottom: 0;
0044 }
0045
0046 .swiper-pagination-bullet {
0047 width: 14px;
0048 height: 14px;
0049 background: white;
0050 border: 1px solid #ccc;
0051 background: #ccc;
0052 }
0053
0054 .slider-navigation-toggle {
0055 position: absolute;
0056 right: 5px;
0057 height: 31px;
0058 width: 31px;
0059 background-size: 25px 25px;
0060 z-index: 100;
0061 cursor: pointer;
0062 background-image: url(../../assets/img/playlist-toggle.png);
0063 background-repeat: no-repeat;
0064 background-position: center center;
0065 background-color: white;
0066 border: 2px solid black;
0067 display: none !important;
0068 }
0069
0070 #slider-container {
0071 padding-bottom: 30px;
0072 }
0073
0074 .swiper-wrapper {
0075
0076 .react-player-container {
0077 width:inherit;
0078 position: relative;
0079
0080 .video-render-mask {
0081 background-color:white;
0082 position: absolute;
0083 top: 0;
0084 left: 0;
0085 width:100%;
0086 height:100%;
0087 z-index: 1;
0088 }
0089
0090 .video-react {
0091 font-family: inherit;
0092 overflow: hidden;
0093
0094 .video-react-big-play-button {
0095 border: 0.06666em solid transparent !important;
0096 background-color: rgb(255, 0, 0) !important;
0097 }
0098
0099 .video-react-slider:focus {
0100 box-shadow: none;
0101 }
0102
0103 .video-react-control-bar {
0104 font-size: 6pt;
0105 display: -webkit-box;
0106 display: -webkit-flex;
0107 display: -ms-flexbox;
0108 display: flex !important;
0109 visibility: visible;
0110 opacity: 1;
0111 height: 5em;
0112 padding-top: 1em;
0113 padding-right:1em;
0114 padding-left:1em;
0115 background-color: rgba(0, 0, 0, 0.7);
0116 .gradient(transparent,#000000,transparent);
0117 }
0118
0119 .video-react-control {
0120 &::before {
0121 font-size: 2.8em;
0122 line-height: 1.4;
0123 }
0124 }
0125
0126 .video-react-current-time,
0127 .video-react-duration {
0128 line-height: 2.7em;
0129 font-size: 1.5em;
0130 }
0131
0132 .video-react-current-time {
0133 padding-right:0;
0134
0135 &::after {
0136 content: "/";
0137 position: absolute;
0138 top: 0;
0139 right: -0.7em;
0140 }
0141 }
0142
0143 .video-react-volume-bar.video-react-slider-vertical {
0144 width: 100%;
0145 height: 8.5em;
0146 padding: 1.35em;
0147 margin-right: 0 !important;
0148 margin-left: 0 !important;
0149 background-color: transparent;
0150
0151 .video-react-volume-level {
0152 width: 0.3em;
0153 left: 50%;
0154 margin-left: -0.15em;
0155 z-index: 10;
0156
0157 &::before {
0158 position: absolute;
0159 font-size: 1.6em;
0160 }
0161 }
0162
0163 .video-react-volume-level {
0164 &::before {
0165 top: -0.2em;
0166 left: -0.4em;
0167 }
0168 }
0169
0170 &::after {
0171 width: 0.3em;
0172 left: 50%;
0173 margin-left: -0.15em;
0174 height: 100%;
0175 content: "";
0176 display: block;
0177 background-color:rgba(115, 133, 159, 0.5);
0178 position: absolute;
0179 top: 0;
0180 }
0181 }
0182
0183 .video-react-volume-bar.video-react-slider-horizontal {
0184 width: 7em;
0185 height: 4em;
0186 margin: 0;
0187 background-color: transparent;
0188
0189 .video-react-volume-level {
0190 height: 0.4em;
0191 top: 1.75em;
0192 left: 0.5em;
0193
0194 &::before {
0195 font-size:1.6em;
0196 top:-4px;
0197 right:-0.4em;
0198 }
0199 }
0200 }
0201
0202 .video-react-volume-menu-button-horizontal {
0203 &::before {
0204 width:1.5em;
0205 font-size: 2.6em;
0206 margin-top: 0.1em;
0207 }
0208 }
0209
0210 .video-react-volume-menu-button-vertical:hover .video-react-menu-content {
0211 height: 12em;
0212 width: 2.9em;
0213 bottom: 2.5em;
0214 }
0215
0216 .video-react-time-divider {
0217 display: none !important;
0218 }
0219
0220 .video-react-progress-control.video-react-control{
0221 position: absolute;
0222 top: 4px;
0223 left: 0;
0224 height: 1em;
0225 width: 100%;
0226 padding: 0 1em;
0227
0228 .video-react-mouse-display {
0229 background-color: transparent !important;
0230
0231 &::after {
0232 font-size:0.8em;
0233 }
0234 }
0235
0236 .video-react-progress-holder {
0237 height: 100%;
0238 padding: 13px 0 0 0;
0239 background: none;
0240 margin: 0;
0241
0242 .video-react-play-progress {
0243 &::before {
0244 visibility: hidden;
0245 }
0246 }
0247
0248 &:hover {
0249 .video-react-play-progress {
0250 &::before {
0251 visibility: visible !important;
0252 }
0253 }
0254 }
0255 }
0256 .video-react-slider-bar,
0257 .video-react-load-progress {
0258 top: 50%;
0259 margin-top: -0.15em;
0260 }
0261
0262 .video-react-load-progress {
0263 width:100% !important;
0264 div {
0265 background: #eaeaeaba;
0266 }
0267 }
0268 }
0269
0270 .video-react-play-progress.video-react-slider-bar {
0271 &::after {
0272 display: none !important;
0273 }
0274 }
0275
0276 .video-react-fullscreen-control {
0277 position: absolute;
0278 right: 1em;
0279 }
0280
0281 .video-react-play-progress {
0282 background-color: #ff0000;
0283
0284 &::before {
0285 color: #ff0000;
0286 }
0287 }
0288 }
0289
0290 .cinema-mode-button {
0291 line-height: 3em;
0292 display: inline-block;
0293 color: white;
0294 font-size: inherit;
0295 text-transform: uppercase;
0296 cursor: pointer;
0297 position: absolute;
0298 right: 5em;
0299
0300 span {
0301 display: block;
0302 width: 2.5em;
0303 height: 1.4em;
0304 border: 2px solid #e8e8e8;
0305 margin: 1.2em;
0306 }
0307 }
0308
0309 .next-slide-video {
0310 font-size: 1.8em;
0311 color: white;
0312 margin: 0.5em;
0313 cursor: pointer;
0314 }
0315
0316 &.hide {
0317 opacity: 0;
0318 }
0319 }
0320
0321 .slide-item {
0322 float:left;
0323 height: inherit;
0324 position: relative;
0325 margin:0;
0326 padding:0;
0327 text-align: center;
0328
0329 &.audio {
0330 overflow: hidden;
0331 width:100%;
0332 }
0333
0334 &.image {
0335 background-color:white !important;
0336 max-height: 100%;
0337 }
0338
0339 > div {
0340 text-align: center;
0341 height:100%;
0342
0343 iframe {
0344 height:100%;
0345 }
0346
0347 > div {
0348 margin: 0 auto;
0349 }
0350 }
0351
0352 img {
0353 display: block;
0354 margin-left: auto;
0355 margin-right: auto;
0356 margin-top: auto;
0357 margin-bottom:auto;
0358 max-width: 100%;
0359 max-height: 100%;
0360 cursor: -moz-zoom-in;
0361 cursor: -webkit-zoom-in;
0362 cursor: zoom-in;
0363 }
0364
0365 #book-container {
0366 width: auto;
0367 display: table;
0368 }
0369
0370 #iframe-container {
0371 iframe {
0372 width: 560px !important;
0373 height: 315px !important;
0374 }
0375 margin: 0 auto;
0376 }
0377 }
0378 }
0379
0380 .swiper-pagination {
0381 display: none;
0382 }
0383
0384 #slide-navigation {
0385 width:100%;
0386 text-align: center;
0387 position: absolute;
0388 height: 110px;
0389 bottom: 0;
0390 padding: 10px 0;
0391
0392 .swiper-slide {
0393 width: 25%;
0394 height: 100%;
0395 opacity: 0.7;
0396 border: 5px solid white;
0397
0398 &.active {
0399 border-color: #2673b0;
0400 }
0401
0402 &.book {
0403 background-color: #524631;
0404 padding:10px;
0405
0406 .preview-image {
0407 background-color:white;
0408 }
0409 }
0410 }
0411
0412 .swiper-slide-thumb-active {
0413 opacity: 1;
0414 }
0415
0416 .swiper-wrapper {
0417
0418 .swiper-slide {
0419
0420 .preview-image {
0421 width:100%;
0422 height: 100%;
0423 background-size: cover;
0424 background-position: center center;
0425 background-repeat: no-repeat;
0426 cursor: pointer;
0427 }
0428 }
0429 }
0430 }
0431
0432 &.hide-arrows {
0433 .carousel-control {
0434 opacity: 0;
0435 }
0436 }
0437
0438 &.cinema-mode {
0439
0440 .swiper-wrapper {
0441
0442 .slide-item {
0443
0444 img {
0445 cursor: -moz-zoom-out;
0446 cursor: -webkit-zoom-out;
0447 cursor: zoom-out;
0448 }
0449 }
0450
0451 .swiper-pagination-bullet {
0452 background: white !important;
0453 }
0454 }
0455
0456 #slide-navigation {
0457 background: black;
0458 &.dots {
0459 background-color: white;
0460 }
0461 }
0462 }
0463
0464 &.hide-playlist {
0465 padding-bottom: 30px;
0466
0467 #slide-navigation {
0468 display: none;
0469 }
0470
0471 .swiper-pagination {
0472 display: blocK;
0473 }
0474 }
0475
0476 &.fade-controls {
0477 .carousel-control,
0478 .slider-navigation-toggle {
0479 opacity: 0 !important;
0480 }
0481
0482 .video-react-playing {
0483 .video-react-control-bar {
0484 opacity: 0 !important;
0485 }
0486 }
0487 }
0488
0489 &.hide-controls {
0490 .carousel-control,
0491 .slider-navigation-toggle {
0492 display: none !important;
0493 }
0494
0495 .video-react-playing {
0496 .video-react-control-bar {
0497 display: none !important;
0498 }
0499 }
0500 }
0501
0502 &.disable-gallery {
0503 padding-bottom:0;
0504 .swiper-wrapper .slide-item img {
0505 max-height:360px
0506 }
0507 .carousel-control,
0508 .slider-navigation-toggle,
0509 #slide-navigation {
0510 display: none;
0511 }
0512 }
0513
0514 &.is-mobile {
0515 .video-react-playing {
0516 .video-react-video {
0517 pointer-events: none;
0518 }
0519 }
0520 }
0521
0522 &.is-full-screen {
0523 position: fixed;
0524 top: 0;
0525 left: 0;
0526 width: 100%;
0527 height: 100%;
0528 z-index: 11;
0529 background: rgba(0,0,0,0.5);
0530
0531
0532 #comics-reader-wrapper {
0533
0534 .nav-container {
0535 height: 95px;
0536 }
0537 .comic-book-reader {
0538 padding-bottom: 100px;
0539 padding-top: 34px;
0540
0541 .bb-bookblock {
0542 width: 93%;
0543 height: 95%;
0544 margin-top: 2%;
0545 }
0546 }
0547
0548 }
0549
0550 .swiper-pagination {
0551 margin-top: -50px;
0552 position: fixed;
0553 }
0554 }
0555 }
0556
0557
0558 #book-reader-wrapper {
0559 position: relative;
0560 height: inherit;
0561 padding: 10px 10px 0 10px;
0562
0563 &.is-mobile {
0564
0565 #book-menu {
0566 width: 100%;
0567 }
0568 }
0569
0570 #ajax-loader {
0571 width: 24px;
0572 height: 24px;
0573 position: absolute;
0574 top: 50%;
0575 left: 50%;
0576 margin-left: -12px;
0577 margin-top: -12px;
0578 background-image: url('../../assets/img/ajax-loader.gif');
0579 background-color: white;
0580 }
0581
0582 #book-container {
0583 border: 1px solid #ccc;
0584 width: 100% !important;
0585 display: block !important;
0586 padding: 20px;
0587 box-sizing: border-box;
0588 height: 100%;
0589 background-color: #524631;
0590 text-align: center;
0591
0592 .epub-container {
0593 border: 1px solid #eee;
0594 background: white;
0595 margin: 0 auto;
0596 }
0597 }
0598
0599 #book-pager {
0600 position: absolute;
0601 bottom: 2px;
0602 z-index: 100;
0603 font-weight: bold;
0604 left: 0;
0605 width: 100%;
0606 font-size:14px;
0607 margin-bottom: 5px;
0608
0609 div {
0610 display: inline;
0611 input[type="number"]{
0612 width: 30px;
0613 display: inline-block;
0614 padding: 2px;
0615 margin: 0 5px 0 0;
0616 height: 30px;
0617 }
0618 span {margin-right: 5px;}
0619 a {
0620 cursor: pointer;
0621 }
0622 }
0623 }
0624
0625 .arrow {
0626 outline: none;
0627 border: none;
0628 background: none;
0629 position: absolute;
0630 top: 50%;
0631 margin-top: -10px !important;
0632 font-size: 25px;
0633 padding: 0px 10px;
0634 color: #e2e2e2;
0635 font-family: arial, sans-serif;
0636 cursor: pointer;
0637 user-select: none;
0638 z-index: 100;
0639 font-weight: normal;
0640 top: auto;
0641 bottom: 6px;
0642 z-index: 10000;
0643
0644 &#prev {
0645 left:40px !important;
0646 }
0647
0648 &#next {
0649 right:40px !important;
0650 }
0651 }
0652
0653 .arrow:hover, .navlink:hover {
0654 color: #777;
0655 }
0656
0657 .arrow:active, .navlink:hover {
0658 color: #000;
0659 }
0660
0661 #toc-menu-toggle {
0662 position: absolute;
0663 bottom: 8px;
0664 left: 20px;
0665 z-index: 300;
0666 font-size: 22px;
0667 color: #e2e2e2;
0668 cursor: pointer;
0669 }
0670
0671 #book-menu {
0672 position: absolute;
0673 top: 10px;
0674 left: 10px;
0675 list-style-type: none;
0676 margin: 0;
0677 padding: 0 20px 0 40px;
0678 background-color: #f7f7f7;
0679 z-index: 199;
0680 max-width: 100%;
0681 height: calc(100% - 10px);
0682 /* border-radius: 5px 0 0 5px; */
0683 overflow-y: scroll;
0684 text-align: left;
0685
0686 li {
0687 a {
0688 padding: 5px;
0689 cursor: pointer;
0690 display: block;
0691 font-size: 12px;
0692
0693 &:hover {
0694 background: rgba(0,0,0,0.1);
0695 }
0696 }
0697
0698 > ul {
0699 padding: 0 0 0 10px;
0700 list-style-type: none;
0701 margin: 5px 0 0 0;
0702 }
0703
0704 }
0705 }
0706
0707 #title {
0708 width: 900px;
0709 min-height: 18px;
0710 margin: 10px auto;
0711 text-align: center;
0712 font-size: 16px;
0713 color: #E2E2E2;
0714 font-weight: 400;
0715 }
0716
0717 #title:hover {
0718 color: #777;
0719 }
0720
0721 #viewer.spreads {
0722 width: 100%;
0723 height: 100%;
0724 box-shadow: 0 0 4px #ccc;
0725 border-radius: 5px;
0726 padding: 0;
0727 position: relative;
0728 margin: 0;
0729 background: white url('img/ajax-loader.gif') center center no-repeat;
0730 top: 0;
0731 padding: 0px;
0732 }
0733
0734 #viewer.spreads .epub-view > iframe {
0735 background: white;
0736
0737 a:hover {
0738 color: black !important;
0739 }
0740 }
0741
0742 @media (min-width:969px){
0743 /*#viewer.spreads:after {
0744 position: absolute;
0745 width: 1px;
0746 border-right: 1px #000 solid;
0747 height: 90%;
0748 z-index: 1;
0749 left: 50%;
0750 margin-left: -1px;
0751 top: 5%;
0752 opacity: .15;
0753 box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
0754 content: "";
0755 }*/
0756 }
0757
0758 #viewer.scrolled {
0759 overflow: hidden;
0760 width: 800px;
0761 margin: 0 auto;
0762 position: relative;
0763 background: url('ajax-loader.gif') center center no-repeat;
0764
0765 }
0766
0767 #viewer.scrolled .epub-container {
0768 background: white;
0769 box-shadow: 0 0 4px #ccc;
0770 margin: 10px;
0771 padding: 20px;
0772 }
0773
0774 #viewer.scrolled .epub-view > iframe {
0775 background: white;
0776 }
0777
0778 #toc {
0779 display: block;
0780 margin: 10px auto;
0781 }
0782
0783 @media (min-width: 1000px) {
0784
0785
0786 #viewer.spreads.single:after {
0787 display: none;
0788 }
0789
0790 #prev {
0791 left: 40px;
0792 }
0793
0794 #next {
0795 right: 40px;
0796 }
0797 }
0798
0799 .navlink {
0800 margin: 14px;
0801 display: block;
0802 text-align: center;
0803 text-decoration: none;
0804 color: #ccc;
0805 }
0806
0807 #book-wrapper {
0808 width: 480px;
0809 height: 640px;
0810 overflow: hidden;
0811 border: 1px solid #ccc;
0812 margin: 28px auto;
0813 background: #fff;
0814 border-radius: 0 5px 5px 0;
0815 position: absolute;
0816 }
0817
0818 #book-viewer {
0819 width: 480px;
0820 height: 660px;
0821 margin: -30px auto;
0822 -moz-box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
0823 -webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
0824 box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
0825 }
0826
0827 #book-viewer iframe {
0828 padding: 40px 40px;
0829 }
0830
0831 #controls {
0832 position: absolute;
0833 bottom: 16px;
0834 left: 50%;
0835 width: 400px;
0836 margin-left: -200px;
0837 text-align: center;
0838 display: none;
0839 }
0840
0841 #controls > input[type=range] {
0842 width: 400px;
0843 }
0844
0845 #navigation {
0846 width: 400px;
0847 height: 100vh;
0848 position: absolute;
0849 overflow: auto;
0850 top: 0;
0851 left: 0;
0852 background: #777;
0853 -webkit-transition: -webkit-transform .25s ease-out;
0854 -moz-transition: -moz-transform .25s ease-out;
0855 -ms-transition: -moz-transform .25s ease-out;
0856 transition: transform .25s ease-out;
0857
0858 }
0859
0860 #navigation.fixed {
0861 position: fixed;
0862 }
0863
0864 #navigation h1 {
0865 width: 200px;
0866 font-size: 16px;
0867 font-weight: normal;
0868 color: #fff;
0869 margin-bottom: 10px;
0870 }
0871
0872 #navigation h2 {
0873 font-size: 14px;
0874 font-weight: normal;
0875 color: #B0B0B0;
0876 margin-bottom: 20px;
0877 }
0878
0879 #navigation ul {
0880 padding-left: 36px;
0881 margin-left: 0;
0882 margin-top: 12px;
0883 margin-bottom: 12px;
0884 width: 340px;
0885 }
0886
0887 #navigation ul li {
0888 list-style: decimal;
0889 margin-bottom: 10px;
0890 color: #cccddd;
0891 font-size: 12px;
0892 padding-left: 0;
0893 margin-left: 0;
0894 }
0895
0896 #navigation ul li a {
0897 color: #ccc;
0898 text-decoration: none;
0899 }
0900
0901 #navigation ul li a:hover {
0902 color: #fff;
0903 text-decoration: underline;
0904 }
0905
0906 #navigation ul li a.active {
0907 color: #fff;
0908 }
0909
0910 #navigation #cover {
0911 display: block;
0912 margin: 24px auto;
0913 }
0914
0915 #navigation #closer {
0916 position: absolute;
0917 top: 0;
0918 right: 0;
0919 padding: 12px;
0920 color: #cccddd;
0921 width: 24px;
0922 }
0923
0924 #navigation.closed {
0925 -webkit-transform: translate(-400px, 0);
0926 -moz-transform: translate(-400px, 0);
0927 -ms-transform: translate(-400px, 0);
0928 transform: translate(-400px, 0);
0929 }
0930
0931 svg {
0932 display: block;
0933 }
0934
0935 .close-x {
0936 stroke: #cccddd;
0937 fill: transparent;
0938 stroke-linecap: round;
0939 stroke-width: 5;
0940 }
0941
0942 .close-x:hover {
0943 stroke: #fff;
0944 }
0945
0946 #opener {
0947 position: absolute;
0948 top: 0;
0949 left: 0;
0950 padding: 10px;
0951 stroke: #E2E2E2;
0952 fill: #E2E2E2;
0953
0954 }
0955
0956 #opener:hover {
0957 stroke: #777;
0958 fill: #777;
0959 }
0960 }
0961
0962 #music-player-wrapper {
0963 position: relative;
0964
0965 &.mobile {
0966 .audio-lists-panel {
0967 height: 100%;
0968 padding-bottom:60px;
0969
0970 .audio-lists-panel-content {
0971 width: 100% !important;
0972 height: calc(100% - 56px);
0973 transform-origin: bottom center;
0974 }
0975 }
0976 #music-sponsor-display {
0977 width: 100%;
0978 left:0;
0979 }
0980 }
0981 .progress-bar {
0982 margin: -3px 20px 0 20px;
0983
0984 .rc-slider {
0985 height: 20px;
0986 padding: 8px 0;
0987
0988 .rc-slider-step {
0989 height:20px;
0990 }
0991 }
0992 }
0993
0994 .audio-lists-panel {
0995
0996 .audio-lists-panel-header {
0997 .close-btn {
0998 display: block;
0999 margin-right: 30px;
1000 }
1001 .line, .delete-btn {
1002 display:none;
1003 }
1004 }
1005
1006 .audio-item {
1007 .group.player-delete {
1008 display:none;
1009 }
1010 }
1011
1012 .audio-lists-panel-content {
1013 ul {
1014 text-align: left;
1015 }
1016 }
1017 }
1018
1019 &.desktop {
1020 .music-player-panel {
1021 height: 100%;
1022 width: 100%;
1023
1024 .panel-content {
1025 display:block !important;
1026 padding:20px !important;
1027
1028 .img-content {
1029 width: 100%;
1030 height: 200px;
1031 background-size: contain;
1032 display: block;
1033 background-position: center;
1034 margin-bottom: 20px;
1035 border-radius: 0;
1036 box-shadow: none;
1037 }
1038
1039 .progress-bar-content {
1040 padding: 0;
1041 flex: none;
1042 margin-bottom: 20px;
1043 display: block;
1044 float: left;
1045 width: 100%;
1046
1047 .audio-main {
1048 margin-top:20px;
1049 }
1050 }
1051
1052 .player-content {
1053 padding: 0;
1054
1055 .play-btn {
1056 padding: 0 5px;
1057 }
1058
1059 > .group {
1060 margin: 0 5px;
1061
1062 &.audio-download,
1063 &.hide-panel,
1064 &.lyric-btn {
1065 display:none;
1066 }
1067
1068 &.reload-btn {
1069 order:10;
1070 }
1071
1072 &.theme-switch {
1073 order:11;
1074 }
1075
1076 &.play-sounds {
1077 .sound-operation {
1078 width:0;
1079 opacity: 0;
1080 overflow: hidden;
1081 .transition();
1082
1083 .rc-slider-handle {
1084 margin-left: -14px;
1085 }
1086 }
1087
1088 .sounds-icon {
1089 margin-right: 0;
1090 }
1091
1092 &:hover {
1093 .sounds-icon {
1094 margin-right:15px;
1095 }
1096 .sound-operation {
1097 opacity: 1;
1098 display: block;
1099 width: 100px;
1100
1101
1102 }
1103 }
1104 }
1105 }
1106 }
1107 }
1108 }
1109
1110 .audio-lists-panel {
1111 position: absolute;
1112 top: 0;
1113 right: 0;
1114 width: 50%;
1115 height: 100%;
1116 padding-bottom:60px;
1117 display:none !important;
1118 }
1119
1120 &.show-playlist {
1121 .music-player-panel {
1122 width: 50%;
1123 }
1124
1125 .audio-lists-panel {
1126 display:block !important;
1127 height: 360px;
1128 }
1129 }
1130 }
1131
1132 .react-jinke-music-player-mobile {
1133 height: inherit;
1134
1135 .react-jinke-music-player-mobile-play-model-tip,
1136 .react-jinke-music-player-mobile-singer,
1137 .react-jinke-music-player-mobile-switch,
1138 .react-jinke-music-player-mobile-header > .right.item {
1139 display:none;
1140 }
1141
1142 .react-jinke-music-player-mobile-cover {
1143 width: 145px;
1144 height: 145px;
1145 }
1146 }
1147
1148 #music-sponsor-display {
1149 position: absolute;
1150 width: 50%;
1151 bottom: 0;
1152 left: 50%;
1153 height: 65px;
1154 z-index: 1000;
1155 color: white;
1156 background-color: #454951;
1157 padding: 5px;
1158 text-align: center;
1159 font-size: 10px;
1160
1161 span {
1162 display: block;
1163 float:left;
1164 width:100%;
1165 }
1166
1167 span {
1168 text-align: center;
1169 img {
1170 border-radius: 100%;
1171 border: 2px solid #c1c1c1;
1172 width: 30px;
1173 height: 30px;
1174 margin-top: 3px;
1175 cursor: pointer;
1176 }
1177 }
1178 }
1179
1180 /*.player-content {
1181
1182 span.group:first-of-type {
1183 display: none;
1184 }
1185
1186 .music-player-controls {
1187 width: 72px;
1188 span {
1189 svg {
1190 margin-top: 5px;
1191 }
1192 }
1193 }
1194 }*/
1195 }
1196
1197 #music-player-container {
1198 width: 100%;
1199 height: 100%;
1200
1201 * {
1202 -webkit-touch-callout: none; /* iOS Safari */
1203 -webkit-user-select: none; /* Safari */
1204 -khtml-user-select: none; /* Konqueror HTML */
1205 -moz-user-select: none; /* Old versions of Firefox */
1206 -ms-user-select: none; /* Internet Explorer/Edge */
1207 user-select: none; /* Non-prefixed version, currently
1208 supported by Chrome, Opera and Firefox */
1209 }
1210
1211 svg {
1212 font-size: 26px;
1213 cursor: pointer;
1214 }
1215
1216 .rc-slider-track {
1217 background-color: #31c27c !important;
1218 }
1219
1220 .rc-slider-handle {
1221 border-color: white;
1222 background-color: #31c27c;
1223 margin-left: 0 !important;
1224 }
1225
1226
1227 &.light {
1228
1229 svg {
1230 color: #31c27c;
1231 }
1232
1233 #music-player-control-panel {
1234 box-shadow: 0 1px 2px 0 rgba(0, 34, 77, 0.05);
1235 }
1236
1237 a {
1238 color: #32353d !important;
1239 }
1240
1241
1242 #music-player-container #music-player-playlist-panel #music-player-playlist ul li {
1243 background-color: #fff;
1244 border-bottom: 1px solid rgba(220, 220, 220, 0.26);
1245 &.is-playing, &.is-paused {
1246 background-color: #fafafa !important;
1247 }
1248 }
1249 }
1250
1251 &.dark {
1252 background-color: rgba(0, 0, 0, 0.7);
1253 color: white;
1254
1255 svg {
1256 color: white;
1257 .transition();
1258
1259 &:hover {
1260 color: #31c27c;
1261 }
1262 }
1263
1264 #music-player-container #music-player-playlist-panel #music-player-playlist ul li {
1265 background-color: #40444b;
1266 border-bottom: #40444b;
1267 &.is-playing, &.is-paused {
1268 background-color: #454951;
1269 }
1270 }
1271 }
1272
1273 #music-player-control-panel {
1274 width:100%;
1275 float: left;
1276 padding:10px;
1277 box-shadow: 0 0 3px #080808;
1278 position: absolute;
1279 z-index: 1111;
1280 .transition();
1281
1282 .music-player-cover {
1283 figure {
1284 padding: 10px 0;
1285 text-align: center;
1286 height: 221px;
1287 img {
1288 cursor: auto;
1289 }
1290 }
1291 }
1292
1293 .music-player-track-title {
1294 h2 {
1295 margin: 10px 0;
1296 width: 100%;
1297 text-align: center;
1298 font-size: 16px;
1299 padding: 0 10px;
1300 overflow: hidden;
1301 text-overflow: ellipsis;
1302 width: 100%;
1303 word-break: break-all;
1304 white-space: pre;
1305 }
1306 }
1307
1308 .music-player-time-display {
1309 width: 100%;
1310 padding: 15px 50px 10px;
1311 font-size: 12px;
1312 float: left;
1313 position: relative;
1314
1315 > span {
1316 display: block;
1317 float: left;
1318 height: 20px;
1319
1320 &.current-track-time {
1321 position: absolute;
1322 left: 10px;
1323 }
1324
1325 &.current-track-progress {
1326 width: 100%;
1327 position: relative;
1328 padding: 0 10px;
1329 }
1330
1331 &.current-track-duration {
1332 position: absolute;
1333 right: 10px;
1334
1335 .infinite {
1336 font-size: 29px;
1337 margin-top: -13px;
1338 display: block;
1339 }
1340 }
1341 }
1342 }
1343
1344 .music-player-controls-bar {
1345 width: 100%;
1346 text-align: center;
1347 float: left;
1348 padding: 10px 0;
1349
1350 .music-player-controls-wrapper {
1351 width: 100%;
1352 float: left;
1353
1354 > div {
1355 float: left;
1356 height: 30px;
1357 position: relative;
1358
1359 &.music-player-audio-control {
1360 span {
1361 display: block;
1362 padding: 0 4px;
1363 float: left;
1364 }
1365 }
1366
1367 &.playlist-toggle-container {
1368 float: right;
1369 padding: 3px;
1370 .playlist-toggle-button {
1371 background: rgba(0,0,0,0.2);
1372 padding: 3px 12px;
1373 font-size: 12px;
1374 border-radius: 12px;
1375 font-weight: bold;
1376 cursor: pointer;
1377 }
1378 }
1379
1380 &.theme-switch-wrapper {
1381 padding:2px 5px;
1382
1383 .rc-switch {
1384 position: relative;
1385 display: inline-block;
1386 box-sizing: border-box;
1387 width: 60px;
1388 height: 20px;
1389 line-height: 20px;
1390 padding: 0;
1391 vertical-align: middle;
1392 border-radius: 20px 20px;
1393 border: 1px solid #ccc;
1394 background-color: transparent;
1395 cursor: pointer;
1396 transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
1397 box-sizing: border-box;
1398 background-color: transparent;
1399 .transition();
1400
1401 &:focus {
1402 box-shadow: none !important;
1403 }
1404
1405 .rc-switch-inner {
1406 color: #fff;
1407 font-size: 12px;
1408 position: absolute;
1409 left: 24px;
1410 top: 0;
1411 }
1412
1413 &::after {
1414 position: absolute;
1415 width: 16px;
1416 height: 16px;
1417 left: 2px;
1418 top: 1px;
1419 border-radius: 50% 50%;
1420 background-color: #fff;
1421 content: " ";
1422 cursor: pointer;
1423 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
1424 -webkit-transform: scale(1);
1425 transform: scale(1);
1426 transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
1427 -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
1428 animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
1429 -webkit-animation-duration: 0.3s;
1430 animation-duration: 0.3s;
1431 }
1432 }
1433
1434 .rc-switch.checked {
1435 background-color: #31c27c !important;
1436 border: 1px solid #31c27c;
1437
1438 .rc-switch-inner {
1439 left: 6px;
1440 }
1441
1442 &::after {
1443 left: 39px;
1444 background-color: white;
1445 }
1446 }
1447 }
1448 }
1449
1450 .music-player-volume-control {
1451 float: right;
1452
1453 span {
1454 display: block;
1455 float: left;
1456 }
1457
1458 .volume-bar-container {
1459 width: 26px;
1460 display: block;
1461 float: left;
1462 height: 0;
1463 padding: 0 6px;
1464 position: absolute;
1465 bottom: 30px;
1466 background-color: rgba(62, 61, 61, 0.8);
1467 .transition();
1468
1469 .rc-slider {
1470 opacity: 0;
1471 .transition();
1472
1473 .rc-slider-handle {
1474 left: 0;
1475 }
1476 }
1477
1478 &:hover {
1479 .rc-slider {
1480 opacity: 1;
1481 }
1482 }
1483 }
1484
1485 &:hover {
1486 .volume-bar-container {
1487 overflow: hidden;
1488 height: 100px;
1489 padding: 10px 6px 15px;
1490
1491 .rc-slider {
1492 opacity: 1;
1493 }
1494 }
1495 }
1496
1497 &.is-muted {
1498 .rc-slider-track,
1499 .rc-slider-handle {
1500 opacity: 0;
1501 }
1502 }
1503 }
1504 }
1505 }
1506 }
1507
1508 #music-player-playlist-panel {
1509 width:0%;
1510 height: 100%;
1511 float: right;
1512 opacity: 0;
1513 .transition();
1514
1515 #music-player-playlist-header {
1516 height: 50px;
1517 padding: 0 75px 0 20px;
1518 width: 100%;
1519 line-height: 50px;
1520 text-align: left;
1521 background: rgba(0,0,0,0.05);
1522
1523 h2 {
1524 margin: 0;
1525 line-height: 50px;
1526 font-size: 16px;
1527 overflow: hidden;
1528 text-overflow: ellipsis;
1529 width: 100%;
1530 word-break: break-all;
1531 white-space: pre;
1532 }
1533
1534 .toggle-playlist {
1535 position: absolute;
1536 right: 50px;
1537 top: 15px;
1538 font-weight: bold;
1539 color: white;
1540 cursor: pointer;
1541 height: 19px;
1542 line-height: 10px;
1543 padding: 5px;
1544 border-radius: 100%;
1545 background: rgba(0,0,0,0.3);
1546 font-size: 12px;
1547 }
1548 }
1549
1550 #music-player-playlist {
1551 width: 100%;
1552 height: auto;
1553 float: left;
1554 padding-bottom: 60px;
1555 height: calc(100% - 50px);
1556
1557 ul {
1558 padding: 0;
1559 margin: 0;
1560 list-style-type: none;
1561 height: auto;
1562 float: left;
1563 width: 100%;
1564
1565 li {
1566 width: 100%;
1567 float: left;
1568 text-align: left;
1569 height: 46px;
1570 line-height: 50px;
1571 position: relative;
1572 background-color: rgba(0,0,0,0.1);
1573 border-bottom: #40444b;
1574 cursor: pointer;
1575 .transition();
1576
1577 a {
1578 display: block;
1579 width: 100%;
1580 height: inherit;
1581 font-size: 14px;
1582 padding: 0 20px 0 60px;
1583 float: left;
1584 text-decoration: none;
1585 overflow: hidden;
1586 text-overflow: ellipsis;
1587 width: 100%;
1588 word-break: break-all;
1589 white-space: pre;
1590 color: white;
1591 }
1592
1593 &.is-playing, &.is-paused, &:hover, &:active {
1594 background-color: rgba(0,0,0,0.2);
1595 }
1596
1597 svg {
1598 font-size: 22px;
1599 left: 21px;
1600 position: absolute;
1601 top: 13px;
1602 }
1603
1604 &:hover {
1605 svg {
1606 color: #31c27c;
1607 }
1608 }
1609 }
1610 }
1611 }
1612
1613 #music-sponsor-display {
1614 position: absolute;
1615 width: 50%;
1616 bottom: 0;
1617 left: 50%;
1618 height: 65px;
1619 z-index: 1000;
1620 /* color: white; */
1621 background-color: rgba(0,0,0,0.2);
1622 padding: 5px;
1623 text-align: center;
1624 font-size: 10px;
1625
1626 span {
1627 display: block;
1628 float:left;
1629 width:100%;
1630 }
1631
1632 span {
1633 text-align: center;
1634 img {
1635 border-radius: 100%;
1636 border: 2px solid #c1c1c1;
1637 width: 30px;
1638 height: 30px;
1639 margin-top: 3px;
1640 cursor: pointer;
1641 }
1642 }
1643 }
1644 }
1645
1646 &.show-playlist {
1647 #music-player-control-panel {
1648 width:50%;
1649 height: 100%;
1650 }
1651 #music-player-playlist-panel {
1652 width: 50%;
1653 height: 100%;
1654 opacity: 1;
1655 }
1656 }
1657
1658 &.is-mobile {
1659
1660 #music-player-control-panel {
1661 width: 100% !important;
1662
1663 .music-player-track-title {
1664 h2 {
1665 margin: 15px 0;
1666 }
1667 }
1668
1669 .music-player-cover {
1670 figure {
1671 height: 135px;
1672 width: 135px;
1673 margin: 50px auto;
1674 border-radius: 100%;
1675 overflow: hidden;
1676 border-radius: 50%;
1677 border: 5px solid rgba(0, 0, 0, 0.2);
1678 box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);
1679 margin: 20px auto;
1680 animation: fromTo 350ms cubic-bezier(0.43, -0.1, 0.16, 1.1) forwards;
1681 overflow: hidden;
1682 transition: box-shadow, border 350ms cubic-bezier(0.43, -0.1, 0.16, 1.1);
1683 }
1684 }
1685
1686 .music-player-controls-bar {
1687 padding: 0;
1688 .music-player-controls-wrapper {
1689 width: 100%;
1690 .music-player-audio-control {
1691 display: table;
1692 width: 240px;
1693 height: auto;
1694 margin: 0 auto;
1695 float: none;
1696
1697 span {
1698 padding: 0 16px !important;
1699 }
1700
1701 .play-icon,
1702 .pause-icon {
1703 font-size: 60px;
1704 }
1705
1706 .prev-icon,
1707 .next-icon {
1708 font-size: 40px;
1709 margin-top: 8px;
1710 }
1711 }
1712 .bottom-controls {
1713 float: left;
1714 height: 30px;
1715 width: 100%;
1716
1717 .music-player-volume-control {
1718 float: left;
1719 width: 50%;
1720
1721 .volume-bar-container {
1722 opacity: 1;
1723 position: relative;
1724 bottom: 0;
1725 left: 0;
1726 width: calc(100% - 50px);
1727 height: 26px;
1728 padding: 6px 10px 6px 10px;
1729 background: transparent;
1730
1731 .rc-slider {
1732 opacity: 1;
1733 }
1734 }
1735 }
1736 }
1737 }
1738 .playlist-toggle-container {
1739 width: 50%;
1740 float: right;
1741 text-align: right;
1742 }
1743 }
1744 }
1745
1746 #music-player-playlist-panel {
1747 width: 100% !important;
1748 height: 100%;
1749 position: absolute;
1750 top: 360px;
1751 background-color: inherit;
1752 z-index: 1112;
1753
1754 #music-player-playlist {
1755 ul {
1756 li {
1757 svg {
1758 left: 275px;
1759 }
1760 a {
1761 padding: 0 75px 0 50px;
1762 font-size: 12px;
1763 }
1764 }
1765 }
1766 }
1767 }
1768
1769 &.show-playlist {
1770 #music-player-playlist-panel {
1771 top:0;
1772 }
1773 }
1774 }
1775 }
1776
1777 #comics-reader-wrapper {
1778 height:100%;
1779 position: relative;
1780
1781 #ajax-loader {
1782 width: 24px;
1783 height: 24px;
1784 position: absolute;
1785 top: 50%;
1786 left: 50%;
1787 margin-left: -12px;
1788 margin-top: -12px;
1789 background-image: url('../../assets/img/ajax-loader.gif');
1790 background-color: white;
1791 }
1792
1793 .comic-book-reader {
1794 height: 100%;
1795 position: relative;
1796 padding-bottom: 60px;
1797
1798 .bb-bookblock {
1799 width: 450px;
1800 height: 100%;
1801 .bb-item, .bb-page {
1802 img {
1803 width:50%;
1804 float: left;
1805 }
1806 }
1807 }
1808 }
1809
1810 .nav-container {
1811 width: 100%;
1812 text-align: center;
1813 position: absolute;
1814 bottom: 0;
1815 z-index: 111;
1816 height: 58px;
1817
1818 nav {
1819 width: auto;
1820 height: 34px;
1821 margin: 0 auto 0;
1822 display: table;
1823
1824 a {
1825 display: block;
1826 min-width: 30px;
1827 height: 30px;
1828 text-align: center;
1829 border-radius: 2px;
1830 background: rgba(0,0,0,0.35);
1831 color: #fff;
1832 margin: 2px;
1833 float: left;
1834 cursor: pointer;
1835
1836 .glyphicon {
1837 top:7px;
1838 }
1839
1840 &:hover {
1841 opacity: 0.6;
1842 }
1843
1844 &#bb-nav-counter {
1845 line-height: 30px;
1846 font-size: 12px;
1847 }
1848 }
1849 }
1850
1851 > span.title {
1852 display: inline-block;
1853 /* min-width: 30px; */
1854 height: auto;
1855 text-align: center;
1856 border-radius: 2px;
1857 background: rgba(0, 0, 0, 0.35);
1858 color: #fff;
1859 margin: 2px;
1860 /* float: left; */
1861 cursor: pointer;
1862 font-size: 12px;
1863 padding: 4px;
1864 }
1865 }
1866 }