Warning, /webapps/ocs-webserver/httpdocs/theme/react/assets/less/style.less is written in an unsupported language. File is not indexed.
0001 // out: ../css/style.css, sourcemap: true, compress: true
0002
0003 @import "elements.less";
0004
0005 .reverse {
0006 -moz-transform: scale(-1, 1) !important;
0007 -webkit-transform: scale(-1, 1) !important;
0008 -o-transform: scale(-1, 1) !important;
0009 -ms-transform: scale(-1, 1) !important;
0010 transform: scale(-1, 1) !important;
0011 }
0012
0013 header {
0014
0015 div.container.header {
0016 height: 110px;
0017 }
0018 }
0019
0020 .small.metamenu {
0021 width: 100%;
0022 background-color: #fff;
0023 height: auto;
0024 float: left;
0025
0026 > ul {
0027 &.left {
0028 margin-left: 5px;
0029 }
0030 > li {
0031 margin-top: 10px;
0032 }
0033 }
0034 }
0035
0036 .metaheader-menu-item {
0037 margin: 5px 0;
0038 margin-top: 0 !important;
0039 margin-bottom: 0 !important;
0040
0041 #user-dropdown {
0042 margin-bottom: 2px;
0043 position: relative;
0044 margin: 5px 0;
0045 height: 32px;
0046 width: 32px;
0047 padding: 0;
0048
0049 .dropdown-toggle {
0050 padding: 0;
0051 background-color: white;
0052 color: #6a7686;
0053 .transition();
0054 height: 32px;
0055 width: 32px;
0056 overflow: hidden;
0057
0058 .glyphicon {
0059 font-size: 16px;
0060 top: 3px;
0061 font-style: normal;
0062 font-weight: 100;
0063 }
0064
0065 img {
0066 width: 100%;
0067 height: 100%;
0068 border-radius: 100%;
0069 }
0070
0071 &:active {
0072 box-shadow: none;
0073 outline: none;
0074 }
0075
0076 }
0077
0078 .dropdown-menu {
0079 border-radius: 0;
0080 padding: 0;
0081 width: 320px;
0082 top: 50px;
0083 background: #fff;
0084 border: 1px solid #ccc;
0085 border-color: rgba(0,0,0,.2);
0086 color: #000;
0087 -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
0088 box-shadow: 0 2px 10px rgba(0,0,0,.2);
0089
0090 .btn-blue {
0091 border-radius: 2px;
0092 padding: 0 12px;
0093 font-size: 12px;
0094 height: 30px;
0095 background: #4d90fe;
0096 font-weight: bold;
0097 border: 1px solid #3079ed;
0098
0099 &:hover {
0100 background: #357ae8;
0101 border-color: #2f5bb7;
0102 color: white;
0103 box-shadow: 0 1px 1px rgba(0,0,0,0.2);
0104 }
0105 }
0106
0107
0108 &::before {
0109 content: "";
0110 position: absolute;
0111 right: 6px;
0112 top: -8px;
0113 width: 0;
0114 height: 0;
0115 border-style: solid;
0116 border-width: 0 8.5px 8.5px;
0117 border-color: transparent transparent #b7bcc4 transparent;
0118 border-bottom-color: #fff;
0119 border-style: dashed dashed solid;
0120 z-index: 1;
0121 }
0122 }
0123
0124 }
0125
0126
0127 &#user-signin-button {
0128 padding-top: 6px;
0129
0130 a {
0131 padding: 0;
0132 font-size: 13px;
0133 display: block;
0134 height: 30px;
0135 line-height: 30px;
0136 color: white;
0137
0138 .btn-blue {
0139 padding: 0 12px;
0140 border-radius: 2px;
0141 font-size: 12px;
0142 height: 30px;
0143 background: #4d90fe;
0144 font-weight: bold;
0145 border: 1px solid #3079ed;
0146 background: -webkit-linear-gradient(top,#4387fd,#4683ea);
0147
0148 &:hover {
0149 color: white;
0150 }
0151
0152 }
0153 }
0154 }
0155 }
0156
0157 #main-header {
0158 background: #4a86cf;
0159 width: 100%;
0160 height: 70px;
0161 padding-left: 275px;
0162 position: relative;
0163
0164 .logo-header {
0165 background-image: none;
0166 display: block;
0167 height: 100px;
0168 left: 6px;
0169 position: absolute;
0170 top: -10px;
0171 width: 265px;
0172 z-index: 999;
0173 overflow: hidden;
0174 }
0175
0176 .user-menu-container {
0177 float: right;
0178 padding: 15px;
0179 height: 70px;
0180 width: auto;
0181
0182 ul {
0183 float: right;
0184 width: auto;
0185 padding: 0;
0186 margin: 0;
0187
0188 }
0189 }
0190
0191 #nav-top {
0192
0193 #nav-left {
0194 padding: 15px;
0195
0196 form#search {
0197 padding: 7px;
0198 margin-right: 7px;
0199
0200 input.content-search {
0201 border-radius: 10px;
0202 border: 1px solid #ccc;
0203 height: 26px;
0204 padding: 0 8px;
0205 }
0206 }
0207 }
0208 }
0209 }
0210
0211 .products-showcase {
0212
0213 .products-container {
0214
0215 .square {
0216 width: 14.28571%;
0217 position: relative;
0218 float: left;
0219 margin-bottom: 15px;
0220 }
0221
0222 .square:after {
0223 content: "";
0224 display: block;
0225 padding-bottom: 120%;
0226
0227 }
0228
0229 .content {
0230 position: absolute;
0231 width: 100%;
0232 height: 100%;
0233 padding: 0 6px;
0234
0235 a {
0236 display: block;
0237 width: 100%;
0238 height: 100%;
0239 position: relative;
0240 }
0241
0242 .product-wrapper {
0243 position: relative;
0244 width: 100%;
0245 height: 100%;
0246 background-color: white;
0247 }
0248
0249 .product-image-container {
0250 position: absolute;
0251 height: 100%;
0252 width: 100%;
0253 overflow: hidden;
0254 padding-bottom: 60px;
0255
0256 figure {
0257 width: 100%;
0258 height: 100%;
0259 position: relative;
0260
0261 span {
0262 position: absolute;
0263 bottom: 5px;
0264 left: 0;
0265 font-weight: 500;
0266 color: #636363;
0267 overflow: hidden;
0268 white-space: nowrap;
0269 text-overflow: ellipsis;
0270 line-height: 1.2;
0271 font-weight: 500 !important;
0272 width: 100%;
0273 padding: 0 10px;
0274 text-align: center;
0275 }
0276
0277 img {
0278 position: absolute;
0279 top: 50%;
0280 left: 50%;
0281 width: 110px;
0282 height: 110px;
0283 margin: -55px 0 0 -55px;
0284 border-radius: 100%;
0285
0286
0287 &.squared {
0288 border-radius: 0;
0289 }
0290
0291 &.full {
0292 position: relative;
0293 width: 100%;
0294 height: 100%;
0295 margin: 0;
0296 border-radius: 0;
0297 top: 0;
0298 left: 0;
0299 }
0300
0301 &.padded {
0302 border-radius: 0;
0303 border:10px solid white;
0304 }
0305
0306 &.rounded-corners {
0307 border-radius: 20%;
0308 }
0309
0310 &.very-rounded-corners {
0311 border-radius: 40%;
0312
0313 }
0314 }
0315 }
0316 }
0317
0318 .product-info {
0319 width: 100%;
0320 height: 60px;
0321 color: white;
0322 padding:14px 16px;
0323 position: absolute;
0324 bottom: 0;
0325 left: 0;
0326 background-color: rgba(0,0,0,.38);
0327
0328 span {
0329 width: 100%;
0330 float: left;
0331 overflow: hidden;
0332 // white-space: nowrap;
0333 text-overflow: ellipsis;
0334 line-height: 1.2;
0335 font-weight: 500 !important;
0336
0337 &.product-info-title {
0338 font-size: 90%;
0339 }
0340
0341 &.product-info-description {
0342 font-size: 70%;
0343 height: 30px;
0344 line-height: 15px;
0345 overflow: hidden;
0346 text-overflow: ellipsis;
0347 display: -webkit-box;
0348 -webkit-line-clamp: 2;
0349 -webkit-box-orient: vertical;
0350 }
0351 }
0352
0353 &.music-image {
0354 padding-right: 40px;
0355 padding-left: 40px;
0356 padding-top: 20px;
0357 text-align: center;
0358
0359 .material-icons {
0360 position: absolute;
0361 top: 18px;
0362
0363 &.left-icon {
0364 left: 10px;
0365
0366 }
0367
0368 &.right-icon {
0369 right: 10px;
0370 }
0371 }
0372 }
0373 }
0374
0375 &:hover {
0376 .product-wrapper {
0377 background-color: #c1c1c1;
0378 }
0379 }
0380 }
0381 }
0382 }
0383
0384 .explore-products-container {
0385
0386 .product-group-scroll-wrapper {
0387 .product-group-scroll-loading-container {
0388 width: 100%;
0389 float: left;
0390 padding: 20px 0;
0391
0392 .icon-wrapper {
0393 display: table;
0394 margin: 0 auto;
0395 }
0396 }
0397 }
0398
0399 #pagination-container {
0400 text-align: center;
0401
0402 .wrapper {
0403 margin: 0 auto;
0404 display: table;
0405 width: auto;
0406
0407 ul {
0408 padding: 0;
0409 margin: 0;
0410 list-style-type: none;
0411
0412 li {
0413 float: left;
0414 width: auto;
0415 margin-right:5px;
0416
0417 a {
0418 font-size: 18px;
0419
0420 .num-wrap {
0421 display: block;
0422 float: left;
0423
0424 span, i {
0425 display: block;
0426 float: left;
0427 }
0428 }
0429
0430 &.active {
0431 font-weight: 500;
0432 text-decoration: underline;
0433 }
0434 }
0435 }
0436 }
0437 }
0438 }
0439 }
0440
0441 .explore-top-bar {
0442 margin-bottom: 20px;
0443 border-bottom: 2px solid #ccc;
0444 float: left;
0445 width: 100%;
0446
0447 .item {
0448 padding: 5px 10px;
0449 border-bottom: 2px solid transparent;
0450 font-size: 14px;
0451 margin-bottom: -2px;
0452 float: left;
0453 cursor: pointer;
0454
0455 &.active {
0456 border-bottom-color: #2673b0;
0457 }
0458
0459 &:hover {
0460 border-bottom-color: lighten(#2673b0,10%);
0461 }
0462 }
0463 }
0464
0465 .cards {
0466 width: 100%;
0467 float: left;
0468
0469 .user-card-item {
0470 width: 16.6666%;
0471 padding: 0 5px;
0472 float: left;
0473
0474 .card-content {
0475 border: 5px solid #ccc;
0476 border-radius: 10px;
0477 padding: 5px;
0478 font-size: 15px;
0479 float: left;
0480 height: auto;
0481 text-align: center;
0482
0483 .user-avatar {
0484 padding-bottom: 5px;
0485 margin-bottom: 5px;
0486
0487 img {
0488 max-width: 100%;
0489 height: auto;
0490 border-radius: 100%;
0491 }
0492 }
0493
0494 span {
0495 display: block;
0496 width: 100%;
0497 float: left;
0498
0499 i {
0500 font-size: 20px;
0501 }
0502
0503 img {
0504 width: 23px;
0505 height: 23px;
0506 display: table;
0507 margin: 0 auto;
0508 margin-bottom: 4px;
0509 }
0510 }
0511 }
0512 }
0513 }
0514
0515 .modal {
0516
0517 .modal-dialog {
0518 .modal-content {
0519 .modal-header {
0520 height: 70px;
0521
0522 .action-icon-container {
0523 position: absolute;
0524 left: 15px;
0525 top: 15px;
0526 height: 40px;
0527 width: 40px;
0528 text-align: center;
0529 font-size: 40px;
0530 line-height: 35px;
0531 border:1px solid;
0532 border-radius: 5px;
0533
0534 &.minus {
0535 color: #fff;
0536 background-color: #c9302c;
0537 border-color: #ac2925;
0538 }
0539
0540 &.plus {
0541 color: #fff;
0542 background-color: #449d44;
0543 border-color: #398439;
0544 line-height: 40px;
0545 }
0546 }
0547
0548 .modal-title {
0549 text-transform: initial;
0550 padding-left: 50px;
0551 height: 40px;
0552 line-height: 32px;
0553 }
0554
0555 .close {
0556 position: absolute;
0557 top: 15px;
0558 right: 15px;
0559 }
0560 }
0561 .modal-footer {
0562 text-align: center;
0563
0564 .glyphicon {
0565 display: table;
0566 margin: 0 auto;
0567 float: none;
0568 }
0569 }
0570 }
0571 }
0572
0573 &.please-login {
0574 .modal-dialog {
0575 width: 250px;
0576 .modal-title {
0577 padding: 0 !important;
0578 text-align: center;
0579 }
0580 .modal-body {
0581 text-align: center;
0582 }
0583 }
0584 }
0585
0586 &.report-comment-modal {
0587
0588 .modal-title {
0589 padding-left: 0 !important;
0590 }
0591
0592 .modal-footer {
0593 a {
0594 float: right !important;
0595
0596 .glyphicon {
0597 display: inline-block !important;
0598 margin-right: 5px !important;
0599 }
0600 }
0601 }
0602 }
0603
0604 }
0605
0606 table {
0607 thead, tbody {
0608 tr {
0609 th, td {
0610 text-align: left !important;
0611 font-size: 13px !important;
0612 font-weight: 500 !important;
0613 padding: 12px 8px !important;
0614 }
0615 }
0616 }
0617 }
0618
0619 #app-root {
0620 font-family: Ubuntu, "times new roman", times, roman, serif;
0621 font-size: 13pt;
0622 font-weight: 400;
0623 line-height: 1.8;
0624
0625 section.section {
0626 &:first-of-type {
0627 background-color: #e5eeee;
0628 }
0629 }
0630
0631 .container {
0632 width: 100% !important;
0633 max-width: 1000px !important;
0634 padding: 0;
0635 }
0636
0637 .row {
0638 margin-left: -6px;
0639 margin-right: -6px;
0640 }
0641
0642 * {
0643 font-weight: 300;
0644 }
0645
0646 .mdl-button {
0647 text-transform: capitalize !important;
0648 font-size: 14px !important;
0649 font-family: Ubuntu, "times new roman", times, roman, serif !important;
0650
0651 &#become-a-supporter {
0652 width: 100%;
0653 font-size: 20px !important;
0654 text-transform: none !important;
0655 padding-top: 15px;
0656 padding-bottom: 15px;
0657 height: auto !important;
0658 border-radius: 8px !important;
0659 line-height: 1;
0660 }
0661 }
0662
0663 .section {
0664 padding: 20px 0;
0665 // background-image: url('../img/hp-section-bg.png');
0666
0667 .section-header {
0668 position: relative;
0669
0670 .actions {
0671 position: absolute;
0672 top: 5px;
0673 right: 0;
0674 }
0675 }
0676
0677
0678 h1, h2, h3, h4, h5 ,h6 {
0679 width: 100%;
0680 margin-top: 0;
0681 font-weight: 300;
0682 color: black !important;
0683 }
0684
0685
0686 h1 {
0687 width: 100%;
0688 margin-top: 0;
0689 font-weight: 300;
0690 color: black !important;
0691 font-size: 24px;
0692 margin-bottom: 15px;
0693 }
0694
0695 h2 {
0696 padding-bottom: 0;
0697 font-size: 40px;
0698 margin-bottom: 1em;
0699 }
0700
0701 h3 {
0702 font-size: 28px;
0703 margin-bottom: 10px;
0704 height: 40px;
0705 }
0706
0707 &:nth-child(even){
0708 // background-image: none;
0709 // background-color: white;
0710 }
0711 }
0712
0713 #homepage {
0714
0715 .actions {
0716 .mdl-button + .mdl-button {
0717 margin-left: 3px;
0718 }
0719 }
0720
0721 #introduction {
0722 background-color: #f7f7f7;
0723 padding-bottom: 30px;
0724 margin-bottom: 10px;
0725
0726 p {
0727 max-width: 700px;
0728 font-size: 14pt;
0729 line-height: 1.4;
0730 margin-bottom: 45px;
0731 }
0732
0733 .mdl-button {
0734 img {
0735 height: 20px;
0736 margin-right: 5px;
0737 margin-top: -3px;
0738 }
0739 }
0740
0741 .green {
0742 .mdl-button {
0743 background: #18a104 !important;
0744 }
0745 }
0746 }
0747 }
0748 }
0749
0750 #homepage {
0751 .hp-wrapper {
0752 .section {
0753 &:last-of-type {
0754 .container {
0755 .product-carousel {
0756 border-bottom: 0;
0757 }
0758 }
0759 }
0760 }
0761
0762 .section + .section {
0763 padding-top: 0;
0764 }
0765 }
0766 }
0767
0768 #explore-page {
0769 padding: 20px;
0770 .main-content-container {
0771 //width: 80%;
0772 width: 100%;
0773 float: left;
0774 padding-left: 270px;
0775 padding-right: 70px;
0776 position: relative;
0777 }
0778
0779 .right-sidebar-container {
0780 // width: 20%;
0781 // float: right;
0782 display: none;
0783
0784 .ers-section {
0785 float: left;
0786 width: 100%;
0787 padding: 10px;
0788
0789 h3 {
0790 font-size: 20px;
0791 font-weight: 500;
0792 }
0793
0794 img#download-app {
0795 max-width: 100%;
0796 }
0797
0798 .sidebar-feed-container {
0799 background: rgba(0,0,0,.03);
0800 padding: 10px;
0801 overflow: auto;
0802
0803 ul {
0804 padding: 0;
0805 margin: 0;
0806 list-style-type: none;
0807 }
0808
0809 ol {
0810 margin: 0;
0811 padding-left: 25px;
0812 background-color: white;
0813
0814 li {
0815 padding-left: 40px !important;
0816 position: relative;
0817
0818 img {
0819 position: absolute;
0820 top: 5px;
0821 left: 5px;
0822 width: 30px;
0823 height: 30px;
0824 }
0825
0826 > a {
0827 display: block;
0828 }
0829
0830 span.cat-name {
0831 font-size: 12px;
0832 }
0833 }
0834 }
0835
0836 ul, ol {
0837 border: 1px solid #ccc;
0838
0839 li {
0840 padding: 5px;
0841 background-color: white;
0842
0843 .cm-userinfo {
0844 background: rgba(0,0,0,0.03);
0845 float: right;
0846 width: 48px;
0847 text-align: center;
0848 padding: 3px;
0849
0850 img {
0851 width: 42px;
0852 height: 42px;
0853 border-radius: 100%;
0854 }
0855
0856 .username {
0857 display: block;
0858 text-align: center;
0859 overflow: hidden;
0860 white-space: nowrap;
0861 text-overflow: ellipsis;
0862 }
0863 }
0864
0865 .title, .info-row {
0866 display: block;
0867 width: 100%;
0868 }
0869
0870 .title {
0871 font-size: 15px;
0872 }
0873
0874 .content {
0875 font-size: 13px;
0876 line-height: 1;
0877 }
0878
0879 .info-row {
0880 overflow: auto;
0881
0882 span {
0883 float: left;
0884 display: inline-block;
0885 font-size: 12px;
0886
0887 &.comment-counter {
0888 float: right;
0889 }
0890 }
0891 }
0892 }
0893
0894 li + li {
0895 border-top:1px solid #ccc;
0896 }
0897 }
0898
0899 .supporter-list-wrapper {
0900 border: 1px solid #ccc;
0901 background-color: white;
0902 padding: 10px;
0903 float: left;
0904 width: 100%;
0905
0906 .supporter-item {
0907 float: left;
0908 padding: 3px;
0909 height: 31px;
0910 width: 31px;
0911
0912 a {
0913 display: block;
0914 width: 100%;
0915 height: 100%;
0916 float: left;
0917
0918 img {
0919 width: 25px;
0920 height: 25px;
0921 float: left;
0922 }
0923 }
0924 }
0925 }
0926
0927 &#top-products-container {
0928 small {
0929 margin-top: -10px;
0930 display: block;
0931 }
0932 }
0933 }
0934 }
0935 }
0936
0937 .left-sidebar-container {
0938 position: absolute;
0939 top: 0;
0940 left: 0;
0941 width: 270px;
0942 padding: 0 30px 0 15px;
0943
0944 aside.explore-left-sidebar {
0945 background: rgba(0,0,0,.03);
0946 padding: 15px 0;
0947 overflow: auto;
0948
0949
0950 ul {
0951 margin: 0;
0952 padding: 0 10px;
0953 list-style-type: none;
0954 float: left;
0955 width: 100%;
0956
0957 li {
0958 float: left;
0959 width: 100%;
0960
0961 a {
0962 width: 100%;
0963 float: left;
0964 height: 25px;
0965 padding: 0 5px;
0966 background-color: transparent;
0967 .transition();
0968
0969 span {
0970 display: block;
0971 width: auto;
0972 float: left;
0973
0974 &.product-counter {
0975 float: right;
0976 }
0977 }
0978
0979 &:hover,
0980 &.active {
0981 background-color: #60bcff;
0982 color: white;
0983
0984 }
0985 }
0986 ul {
0987 border-left: 2px solid #ccc;
0988 padding:15px 0 0 15px;
0989 }
0990 }
0991 }
0992 }
0993 }
0994
0995 .main-content {
0996 padding-left: 15px;
0997 padding-right: 0;
0998
0999 .explore-page-category-title {
1000 h2 {
1001 margin-top: 0;
1002 }
1003 small {
1004 font-weight: 500;
1005 font-size: 17px;
1006 }
1007 }
1008 }
1009
1010 }
1011
1012 #product-page {
1013 position: relative;
1014
1015 #product-download-section {
1016 text-align: center;
1017 overflow: hidden;
1018 height: 0px;
1019 background: rgba(0,0,0,0.5);
1020 z-index: 1000;
1021 .transition(0.5s);
1022
1023 #files-tab {
1024 display: table;
1025 margin: 20px auto;
1026 }
1027 }
1028
1029 #product-view-header {
1030 background-color: #f7f7f7;
1031 padding-bottom: 15px;
1032
1033 .container {
1034 .product-view-header-left,
1035 .product-view-header-right {
1036 width: 50%;
1037 float: left;
1038 }
1039 }
1040
1041 .image-container {
1042 float: left;
1043 width: 100%;
1044 height: 60px;
1045 margin-bottom: 20px;
1046
1047 img {
1048 width: 60px;
1049 height: 60px;
1050 float: left;
1051 }
1052 }
1053
1054 .product-info {
1055 width: 100%;
1056 float: left;
1057
1058 h1 {
1059 font-size: 30px !important;
1060 }
1061
1062 .info-row {
1063 width: 100%;
1064 float: left;
1065 margin-bottom: 15px;
1066
1067 > a {
1068 height: 30px;
1069 display: block;
1070 float: left;
1071 position: relative;
1072
1073 span {
1074 display: block;
1075 float: left;
1076 height: 30px;
1077 font-size: 15px;
1078 }
1079 }
1080
1081 > a + a {
1082 margin-left: 10px;
1083 }
1084
1085 a.user {
1086
1087 padding-left: 40px;
1088
1089 span.avatar {
1090 width: 30px;
1091 height: 30px;
1092 border-radius: 100%;
1093 display: block;
1094 overflow: hidden;
1095 position: absolute;
1096 left: 0;
1097 top: 0;
1098 border:1px solid #ccc;
1099
1100 img {
1101 width: 100%;
1102 height: 100%;
1103 float: left;
1104 }
1105 }
1106
1107 span.username {
1108 display: block;
1109 }
1110 }
1111
1112 .product-tags {
1113
1114 .mdl-chip {
1115 height: 30px !important;
1116 line-height: 30px !important;
1117 margin: 0;
1118 margin-top: 0 !important;
1119 margin-left: 10px;
1120 float: left;
1121 display: block;
1122 box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
1123
1124 span {
1125 font-weight: 500 !important;
1126 color: #2773b0;
1127 margin-right: 5px;
1128 }
1129 }
1130 }
1131 }
1132
1133 }
1134
1135 .details-container {
1136 width: 100%;
1137 position: relative;
1138 padding-top: 80px;
1139
1140 .mdl-button {
1141 float: right;
1142 margin-left: 10px;
1143 }
1144
1145 #likes-container {
1146 height: 38px;
1147 width: 40px;
1148 float: right;
1149 position: relative;
1150
1151 .likes {
1152 float: right;
1153 width: 40px;
1154 clear: both;
1155 position: absolute;
1156 height: 40px;
1157 margin-bottom: 7px;
1158 top: 0;
1159 right: 0;
1160
1161 i {
1162 font-size: 40px;
1163 color: #4a85cf;
1164 .transition();
1165 }
1166
1167 span {
1168 position: absolute;
1169 left: 0;
1170 top: 3px;
1171 width: 100%;
1172 height: 100%;
1173 text-align: center;
1174 padding-top: 5px;
1175 font-size: 12px;
1176 font-weight: 500 !important;
1177 cursor: pointer;
1178 }
1179
1180 &:hover {
1181
1182 i {
1183 color: darken(#4a85cf,5%);
1184 }
1185 }
1186 }
1187
1188 .likes-label-container {
1189 position: absolute;
1190 bottom: -21px;
1191 right: 0;
1192 width: 200px;
1193 font-size: 15px;
1194 text-align: right;
1195 font-weight: 500;
1196 }
1197
1198 &.liked-by-user {
1199 .likes {
1200 span {
1201 color: white;
1202 }
1203 }
1204 }
1205 }
1206
1207 .ratings-bar-container {
1208 width: 200px;
1209 float: left;
1210 clear: both;
1211 padding: 0 25px;
1212 position: absolute;
1213 top: 140px;
1214 right: 0;
1215
1216 .ratings-bar-left {
1217 position: absolute;
1218 left: 0;
1219 top: 0;
1220 height: 25px;
1221 background-color: #ccc;
1222 border-radius: 5px 0 0 5px;
1223 border-color: #a7a7a7;
1224 border-style: solid;
1225 border-width: 0 0 2px 0;
1226 width: 25px;
1227 cursor: pointer;
1228 .transition();
1229
1230 &:hover {
1231 background-color: #c9302c;
1232 color:white;
1233 }
1234
1235 &:active {
1236 color:white;
1237 border-color: white;
1238 border-style: inset;
1239 border-width: 1px 0 0 1px;
1240 background-color: #c9302c;
1241 }
1242 }
1243
1244 .ratings-bar-right {
1245 position: absolute;
1246 top: 0;
1247 right: 0;
1248 height: 25px;
1249 background-color: #ccc;
1250 border-radius: 0 5px 5px 0;
1251 border-color: #a7a7a7;
1252 border-style: solid;
1253 border-width: 0 0 2px 0;
1254 width: 25px;
1255 cursor: pointer;
1256 .transition();
1257
1258 &:hover {
1259 background-color: #449d44;
1260 color:white;
1261 }
1262
1263 &:active {
1264 color:white;
1265 border-style: inset;
1266 border-width: 1px 1px 0 0;
1267 border-color: white;
1268 background-color: #449d44;
1269 }
1270 }
1271
1272 .ratings-bar-holder {
1273 width: 100%;
1274 height: 25px;
1275
1276 .ratings-bar {
1277 height: 25px;
1278 width: 25%;
1279 float: left;
1280 background-color: #acc8ac;
1281 border-bottom: 2px solid rgb(141, 158, 141);
1282
1283 &.red {
1284 background-color: #c9302c;
1285 }
1286 }
1287
1288 .ratings-bar-empty {
1289 width: 75%;
1290 height: 25px;
1291 float: left;
1292 background-color: #efefef;
1293 border-bottom: 2px solid #ccc;
1294 }
1295 }
1296 }
1297 }
1298 }
1299
1300 #product-view-gallery-container {
1301 > .container {
1302 > .section {
1303 border-bottom: 1px solid #ccc;
1304 }
1305 }
1306
1307 #product-gallery {
1308 width: 100%;
1309 position: relative;
1310 height: 200px;
1311
1312 .section {
1313 width: 100%;
1314 height: 200px;
1315 overflow: hidden;
1316 padding: 0;
1317 position: relative;
1318 }
1319
1320 .gallery-arrow {
1321 z-index: 100;
1322 display: block;
1323 height: 50px;
1324 cursor: pointer;
1325 width: 50px;
1326 background-color: rgba(255,255,255,0.9);
1327 text-align: center;
1328 border-radius: 100%;
1329 border: 1px solid #c7c7c7;
1330 top: 50%;
1331 margin-top: -25px;
1332
1333 &.arrow-left {
1334 position: absolute;
1335 left: -25px;
1336 i {
1337 position: absolute;
1338 display: block;
1339 top: 50%;
1340 left: 0;
1341 font-size: 50px;
1342 margin-top: -25px;
1343 margin-left: 0px;
1344 }
1345 }
1346
1347 &.arrow-right {
1348 position: absolute;
1349 right: -25px;
1350 i {
1351 position: absolute;
1352 display: block;
1353 top: 50%;
1354 left: 0;
1355 font-size: 50px;
1356 margin-top: -25px;
1357 margin-left: 0px;
1358 }
1359 }
1360
1361 }
1362
1363 .gallery-items-wrapper {
1364 position: absolute;
1365 top: 0;
1366 left: 0;
1367 height: 200px;
1368 .transition();
1369
1370 .gallery-item {
1371 float: left;
1372 height: 200px;
1373 width: 300px;
1374 text-align: center;
1375 padding: 0 10px;
1376 cursor: pointer;
1377
1378 > * {
1379 margin: 0 auto;
1380 display: table;
1381 width: auto;
1382 max-width: 100%;
1383 max-height: 100%;
1384 }
1385 }
1386 }
1387 }
1388 }
1389
1390 #product-gallery-lightbox {
1391 position: fixed;
1392 top: 0;
1393 left: 0;
1394 width: 100%;
1395 height: 100%;
1396 background: rgba(0,0,0,0.75);
1397 z-index: 1000;
1398 padding-bottom: 200px;
1399
1400 #close-lightbox {
1401 position: absolute;
1402 top: 0;
1403 right: 0;
1404 width: 50px;
1405 height: 50px;
1406 cursor: pointer;
1407 z-index: 10000;
1408
1409 i {
1410 font-size: 48px;
1411 color: white;
1412 }
1413 }
1414
1415 #lightbox-gallery-main-view {
1416 width: 100%;
1417 height: 100%;
1418 padding: 0 50px;
1419 position: relative;
1420
1421 .current-gallery-item {
1422 height: 100%;
1423 width: 100%;
1424 position: absolute;
1425 padding: 50px;
1426 left: 0;
1427 top: 0;
1428
1429 > div {
1430 height: 100%;
1431 width: 100%;
1432 margin: 0 auto;
1433 display: table;
1434
1435 iframe {
1436 width: 100%;
1437 height: 100%;
1438 }
1439 }
1440
1441 .media-item {
1442 max-width: 100%;
1443 width: auto;
1444 height: 100%;
1445 max-height: 100%;
1446 margin: 0 auto;
1447 display: table;
1448 }
1449 }
1450
1451 .gallery-arrow {
1452 position: absolute;
1453 top: 50%;
1454 margin-top: -25px;
1455 display: block;
1456 height: 50px;
1457 cursor: pointer;
1458 width: 50px;
1459 background-color: rgba(255,255,255,0.9);
1460 text-align: center;
1461 border-radius: 100%;
1462 border: 1px solid #c7c7c7;
1463 z-index: 1001;
1464
1465 i {
1466 position: absolute;
1467 display: block;
1468 top: 50%;
1469 left: 0;
1470 font-size: 50px;
1471 margin-top: -25px;
1472 margin-left: 0px;
1473 }
1474
1475 &#arrow-left {
1476 left: 10px;
1477 }
1478
1479 &#arrow-right {
1480 right: 10px;
1481 }
1482 }
1483 }
1484
1485 #lightbox-gallery-thumbnails {
1486 position: absolute;
1487 bottom: 0;
1488 left: 0;
1489 width: 100%;
1490 height: 200px;
1491 padding: 25px;
1492 background-color: rgba(0,0,0,0.5);
1493
1494 #gallery-items-wrapper {
1495 .transition();
1496 }
1497
1498 .section {
1499 width: 100%;
1500 height: 150px;
1501 overflow: hidden;
1502 position: relative;
1503 padding: 0;
1504 }
1505
1506 .thumbnail-item {
1507 height: 150px;
1508 width: 200px;
1509 padding: 0 10px;
1510 float: left;
1511 overflow: hidden;
1512 text-align: center;
1513 cursor: pointer;
1514
1515 > img, iframe {
1516 max-width: 150px;
1517 max-height: 200px;
1518 margin: 0 auto;
1519 height: 100%;
1520 display: table;
1521 border: 2px solid transparent;
1522 .transition();
1523 }
1524
1525 iframe {
1526 z-index: -1000;
1527 pointer-events: none;
1528 }
1529
1530 &.hover {
1531 > img, iframe {
1532 border:1px solid #ccc;
1533 }
1534 }
1535
1536 &.active {
1537 > img, iframe {
1538 border:1px solid white;
1539 }
1540 }
1541 }
1542 }
1543 }
1544
1545 #product-description {
1546
1547 .main-content {
1548 width: 100%;
1549 float: left;
1550 margin-bottom: 20px;
1551 }
1552
1553 article {
1554 float: left;
1555 width: 70%;
1556 padding-right: 100px;
1557
1558 p {
1559 font-size: 16px;
1560 }
1561 }
1562
1563 aside {
1564 float: right;
1565 width: 30%;
1566
1567 ul {
1568 margin: 0;
1569 padding: 0;
1570 list-style-type: none;
1571
1572 li {
1573 float: left;
1574 width: 100%;
1575 height: 30px;
1576 line-height: 30px;
1577
1578 span {
1579 float: left;
1580 width: 50%;
1581 display: block;
1582 font-size: 15px;
1583 }
1584
1585 .key {
1586 text-align: right;
1587 padding-right: 10px;
1588 color: #666;
1589 }
1590
1591 .val {
1592 text-align: left;
1593 padding-left: 10px;
1594 }
1595
1596 &:last-of-type {
1597 border-top: 1px dotted #cdcdcd;
1598 }
1599 }
1600 }
1601 }
1602 }
1603
1604 #product-files {
1605 table {
1606 width: 100%;
1607 }
1608 }
1609
1610 #product-view-content-container {
1611 padding-bottom: 20px;
1612 float: left;
1613 width: 100%;
1614
1615 #files-tab {
1616 table {
1617 width: 100%;
1618 }
1619 }
1620
1621 #ratings-tab {
1622 .ratings-filters-menu {
1623 margin-bottom: 25px;
1624 .btn-container + .btn-container {
1625 margin-left: 10px;
1626 }
1627 }
1628 }
1629 }
1630
1631 #product-comments-container {
1632 padding-bottom: 25px;
1633 float: left;
1634 width: 100%;
1635
1636 .section-header {
1637 position: relative;
1638 margin-bottom: 25px;
1639
1640 .comments-counter {
1641 position: absolute;
1642 top: 0;
1643 right:0;
1644 }
1645 }
1646
1647 .comment-form-container {
1648
1649 textarea {
1650 margin-bottom: 10px;
1651 }
1652
1653 button[type="button"]{
1654 float: right;
1655 margin: 10px 0;
1656
1657 span.glyphicon {
1658 margin-right: 10px;
1659 }
1660 }
1661 }
1662
1663 }
1664
1665 .comment-list {
1666 height: auto;
1667 float: left;
1668 width: 100%;
1669
1670 h3 {
1671 margin-bottom: 15px;
1672 }
1673
1674 .comment-item {
1675 width: 100%;
1676 padding-left: 80px;
1677 position: relative;
1678 float: left;
1679 margin-bottom: 10px;
1680 font-size: 14px;
1681 min-height: 60px;
1682
1683 .comment-user-avatar {
1684 width: 60px;
1685 position: absolute;
1686 left: 0;
1687 top: 5px;
1688 height: 60px;
1689
1690 .is-supporter-display {
1691 color: white;
1692 position: absolute;
1693 bottom: 0;
1694 left: 0px;
1695 display: block;
1696 width: 25px;
1697 height: 25px;
1698 background-color: #EE6E09;
1699 text-align: center;
1700 line-height: 25px;
1701 border-radius: 100%;
1702 }
1703
1704 .is-creater-display {
1705 color: white;
1706 position: absolute;
1707 bottom: 0;
1708 right: 0px;
1709 display: block;
1710 width: 25px;
1711 height: 25px;
1712 background-color: blue;
1713 text-align: center;
1714 line-height: 25px;
1715 border-radius: 100%;
1716 }
1717
1718 img {
1719 width: 60px;
1720 height: 60px;
1721 border-radius: 100%;
1722 }
1723 }
1724
1725 .comment-item-content {
1726 width: 100%;
1727 float: left;
1728 min-height: 60px;
1729 margin-bottom: 10px;
1730
1731 .comment-item-header, .comment-item-text, .comment-item-actions {
1732 width: 100%;
1733 float: left;
1734 margin-bottom: 10px;
1735 }
1736
1737 .comment-item-header {
1738 float: left;
1739 ul {
1740 list-style-type: none;
1741 margin: 0;
1742 padding: 0;
1743 float: left;
1744
1745 li {
1746 float: left;
1747 margin-left: 5px;
1748 &::before {
1749 content: "•";
1750 color: #E2E2E2;
1751 margin-right: 5px;
1752 }
1753
1754 span {
1755
1756 &.uc-icon {
1757 width: 20px;
1758 height: 20px;
1759 display: block;
1760 text-align: center;
1761 float: right;
1762 line-height: 20px;
1763 font-size: 12px;
1764 color: white;
1765 margin-top: 2px;
1766 text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
1767 border-radius: 5px;
1768 }
1769
1770 &.is-supporter-display {
1771 background: #EE6E09;
1772 }
1773
1774 &.is-creater-display {
1775 background-color: rgb(74, 134, 207);
1776 }
1777 }
1778
1779 &:first-of-type {
1780 margin-left: 0;
1781 &::before {
1782 content:"";
1783 margin: 0;
1784 }
1785 }
1786 }
1787 }
1788
1789 a.comment-username {
1790 font-weight: 500;
1791 }
1792
1793 }
1794
1795 .comment-item-actions {
1796 a {
1797 cursor: pointer;
1798 display: block;
1799 margin-right: 15px;
1800 position: relative;
1801 padding-left: 20px;
1802 float: left;
1803
1804 i {
1805 font-size: 16px;
1806 position: absolute;
1807 left: 2px;
1808 top: 2px;
1809 }
1810 }
1811 }
1812
1813 }
1814
1815 .comment-item-replies-container {
1816 margin-left: -30px;
1817 }
1818 }
1819 }
1820
1821 .product-ratings-list {
1822 .rating-item-header {
1823 a {
1824 font-weight: 500 !important;
1825 margin-right: 10px;
1826 }
1827 }
1828 }
1829
1830 .supporter-list {
1831
1832 .supporter-list-item {
1833 float: left;
1834 width: 20%;
1835 margin-bottom: 20px;
1836 font-size: 14px;
1837
1838 .item-content {
1839 padding-left: 70px;
1840 padding-right: 10px;
1841 position: relative;
1842 height: 60px;
1843 margin-bottom: 10px;
1844
1845 .user-avatar {
1846 position: absolute;
1847 top: 0;
1848 left: 0;
1849 height: 60px;
1850 width: 60px;
1851 background: white;
1852 border: 2px solid #ccc;
1853 border-radius: 100%;
1854 padding: 2px;
1855 overflow: hidden;
1856
1857 img {
1858 border-radius: 100%;
1859 width: 100%;
1860 height: 100%;
1861 }
1862 }
1863
1864 span {
1865 margin-right: 5px;
1866 display: block;
1867 float: left;
1868 width: 100%;
1869 height: 20px;
1870 line-height: 20px;
1871 }
1872 }
1873
1874 .user-avatar {
1875 img {
1876 width: 60px;
1877 height: 60px;
1878 margin-bottom: 10px;
1879 }
1880 }
1881
1882 .card-type-holder {
1883 img {
1884 height: 20px;
1885 width: 20px;
1886 margin-top: -4px;
1887 }
1888 }
1889
1890 span {
1891 margin-right: 5px;
1892 }
1893 }
1894 }
1895 }
1896
1897 @media (max-width: 1720px) and (min-width:1501px) {
1898 .products-showcase {
1899 .products-container {
1900 .square {
1901 width: 14.28571%;
1902 }
1903 }
1904 }
1905 }
1906
1907 @media (max-width: 1720px) and (min-width:1501px) {
1908 .products-showcase {
1909 .products-container {
1910 .square {
1911 width: 16.66667%;
1912 }
1913 }
1914 }
1915 }
1916
1917 @media (max-width: 1500px) and (min-width: 1251px) {
1918 .products-showcase {
1919 .products-container {
1920 .square {
1921 width: 20%;
1922 }
1923 }
1924 }
1925 /*.explore-products-container {
1926 .products-showcase {
1927 .products-container {
1928 .square {
1929 width: 25%;
1930 }
1931 }
1932 }
1933 }*/
1934 }
1935
1936 @media (max-width: 1250px) and (min-width: 1000px) {
1937 .products-showcase {
1938 .products-container {
1939 .square {
1940 width: 25%;
1941 }
1942 }
1943 }
1944 /*.explore-products-container {
1945 .products-showcase {
1946 .products-container {
1947 .square {
1948 width: 33.33333%;
1949 }
1950 }
1951 }
1952 }*/
1953
1954 /*#explore-page {
1955 .main-content-container {
1956 width: 75%;
1957 float: left;
1958 }
1959
1960 .right-sidebar-container {
1961 width: 25%;
1962 float: right;
1963 }
1964 }*/
1965
1966 }
1967
1968 @media (max-width: 999px) and (min-width: 662px) {
1969 #app-root {
1970 .container {
1971 padding: 0 20px !important;
1972 }
1973 }
1974 .products-showcase {
1975 .products-container {
1976 .square {
1977 width: 33.3333%;
1978 }
1979 }
1980 }
1981 /*.explore-products-container {
1982 .products-showcase {
1983 .products-container {
1984 .square {
1985 width: 50%;
1986 }
1987 }
1988 }
1989 }*/
1990
1991 #explore-page {
1992 /*.main-content-container {
1993 width: 75%;
1994 float: left;
1995 }
1996
1997 .right-sidebar-container {
1998 width: 25%;
1999 float: right;
2000 }*/
2001 }
2002
2003 }
2004
2005 @media (max-width: 661px) {
2006 #app-root {
2007 .container {
2008 padding: 0 20px !important;
2009 }
2010 }
2011 .products-showcase {
2012 .products-container {
2013 .square {
2014 width: 50%;
2015 }
2016 }
2017 }
2018 .explore-products-container {
2019 .products-showcase {
2020 .products-container {
2021 .square {
2022 width: 100%;
2023 }
2024 }
2025 }
2026 }
2027
2028 #explore-page {
2029 /*.main-content-container {
2030 width: 75%;
2031 float: left;
2032 }
2033
2034 .right-sidebar-container {
2035 width: 25%;
2036 float: right;
2037 }*/
2038 }
2039
2040 }
2041
2042 @media (max-width: 401px) {
2043 #app-root {
2044 .container {
2045 padding: 0 20px !important;
2046 }
2047 }
2048 .products-showcase {
2049 .products-container {
2050 .square {
2051 width: 100%;
2052 }
2053 }
2054 }
2055
2056 #explore-page {
2057 .main-content-container {
2058 width: 100%;
2059 float: left;
2060 }
2061
2062 .right-sidebar-container {
2063 width: 100%;
2064 float: right;
2065 }
2066 }
2067
2068 }
2069
2070 footer {
2071 * {
2072 line-height: inherit;
2073 }
2074 nav#footer-nav ul li {
2075 font-size:12px;
2076 line-height: 12px;
2077 }
2078 }