Warning, /webapps/ocs-webserver/httpdocs/theme/flatui/less/stylesheet.less is written in an unsupported language. File is not indexed.
0001 // out: ../css/stylesheet.css, sourcemap: true, compress: true
0002
0003 @import "stylesheets/mixins.less";
0004 /** @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);**/
0005 /**
0006 Google fonts
0007 **/
0008 /* open-sans-300 - latin */
0009 @font-face {
0010 font-family: 'Open Sans';
0011 font-style: normal;
0012 font-weight: 300;
0013 src: local('Open Sans Light'), local('OpenSans-Light'),
0014 url('../css/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
0015 url('../css/fonts/open-sans-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
0016 }
0017
0018 /* open-sans-regular - latin */
0019 @font-face {
0020 font-family: 'Open Sans';
0021 font-style: normal;
0022 font-weight: 400;
0023 src: local('Open Sans Regular'), local('OpenSans-Regular'),
0024 url('../css/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
0025 url('../css/fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
0026 }
0027
0028 /* open-sans-600 - latin */
0029 @font-face {
0030 font-family: 'Open Sans';
0031 font-style: normal;
0032 font-weight: 600;
0033 src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
0034 url('../css/fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
0035 url('../css/fonts/open-sans-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
0036 }
0037
0038 /* open-sans-700 - latin */
0039 @font-face {
0040 font-family: 'Open Sans';
0041 font-style: normal;
0042 font-weight: 700;
0043 src: local('Open Sans Bold'), local('OpenSans-Bold'),
0044 url('../css/fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
0045 url('../css/fonts/open-sans-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
0046 }
0047
0048
0049 /** GENERAL **/
0050
0051 body {
0052 color: #32353d;
0053 overflow-y: scroll;
0054 font-size: 1.5em;
0055 line-height: 1.231;
0056 color: #4e4e4e;
0057 font-family: 'Open Sans',sans-serif;
0058 font-size: medium;
0059 }
0060
0061 header, footer, main, section {
0062 width: 100%;
0063 float: left;
0064
0065 section.wrapper {
0066 margin-left: auto;
0067 margin-right: auto;
0068 width: 95%;
0069 float: none;
0070 height: auto;
0071 }
0072 }
0073
0074 a {
0075 text-decoration: none;
0076 color: #2673b0;
0077 .transition();
0078
0079 &:hover {
0080 text-decoration: none;
0081 }
0082 }
0083
0084 a:focus {
0085 outline: none;
0086 }
0087
0088
0089
0090 button::-moz-focus-inner {
0091 border: 0;
0092 }
0093
0094
0095 input, button, select, textarea {
0096 font-family: "Lato",sans-serif;
0097 font-size: 14px;
0098 }
0099
0100 h1 {
0101 font-size: 32px;
0102 font-weight: 900;
0103 }
0104
0105 h3 {
0106 font-size: 24px;
0107 font-weight: 700;
0108 margin-bottom: 4px;
0109 margin-top: 2px;
0110 }
0111
0112 h5 {
0113 font-size: 16px;
0114 font-weight: 500;
0115 text-transform: uppercase;
0116 }
0117
0118 @media (max-width: 1200px) and (min-width: 992px) {
0119
0120 header section.wrapper, footer section.wrapper, main section.wrapper {
0121 width: 95%;
0122 margin-left: 2.5%;
0123 margin-right: 2.5%;
0124 }
0125
0126 }
0127
0128
0129 /** /GENERAL **/
0130
0131 /**metaheader extra*/
0132 body {
0133 padding-top: 34px;
0134
0135 .navbar-gitlab {
0136 top: 34px;
0137 }
0138
0139 &#git-body {
0140 #metaheader {
0141 position: fixed !important;
0142 }
0143 .nav-sidebar {
0144 top:88px;
0145 }
0146 }
0147
0148 /*&#body-user, &#body-public {
0149 opendesktop-metaheader {
0150 position: relative !important;
0151 #metaheader {
0152 position: relative !important;
0153 }
0154 }
0155 }*/
0156
0157 &.navigation-topics,
0158 &.category-themes-and-apps,
0159 &.category-general,
0160 &[class*='category-'] {
0161 #metaheader #metaheader-nav #user-context-menu-container .user-dropdown .th-icon {
0162 margin-top: -5px;
0163 }
0164
0165 }
0166
0167 &.docked {
0168 .d-header {
0169 top: 34px;
0170 }
0171 #metaheader {
0172 position: fixed;
0173 }
0174 }
0175
0176 &.drawer-open {
0177 height: 100%;
0178 overflow: hidden;
0179 }
0180 }
0181
0182 /** COMMON **/
0183
0184 .btn{
0185 background: #bdc3c7 none repeat scroll 0 0;
0186 border: medium none;
0187 border-radius: 6px;
0188 box-shadow: none;
0189 color: #fff;
0190 line-height: 22px;
0191 padding: 9px 12px 10px;
0192 text-decoration: none;
0193 text-shadow: none;
0194 .transition(0.2);
0195
0196 &.btn-large {
0197 font-size: 16.996px;
0198 line-height: 20px;
0199 padding: 12px 18px 13px;
0200 }
0201
0202 &.btn-native {
0203 background-color: #2673b0;
0204 color: white;
0205 }
0206
0207 &.btn-pling-red {
0208 background-color: #e84310;
0209 }
0210 &.btn-pling-green {
0211 background-color: green;
0212 }
0213
0214 &.btn-purple {
0215 background: #9b59b6;
0216 padding: 10px 35px;
0217 }
0218 &.btn-file-dropzone {
0219 font-size: 10px;
0220 padding: 8px 10px 10px;
0221 line-height: 10px;
0222 }
0223 &.btn-file-action {
0224 font-size: 12px;
0225 padding: 8px 10px 10px;
0226 line-height: 16px;
0227 margin-left: 5px;
0228 }
0229 }
0230
0231 .pling-danger{
0232 background: #C9302C none repeat scroll 0 0;
0233 }
0234
0235
0236 .standard-form {
0237
0238 input {
0239 height: 41px;
0240 }
0241
0242 input,
0243 textarea,
0244 select {
0245 border: 1px solid #bdc3c7;
0246 padding: 0;
0247 .border_radius(5px);
0248 }
0249
0250 .field {
0251 margin-bottom: 15px;
0252 }
0253
0254 }
0255
0256 .icon-facebook, .icon-twitter, .icon-google {
0257 width: 40px;
0258 height: 40px;
0259 cursor: pointer;
0260 display: inline-block;
0261 background-image: url(../img/bg_sheet.png);
0262 }
0263
0264 .icon-facebook {
0265 background-position: 0 -105px;
0266 }
0267
0268 .icon-twitter {
0269 background-position: -40px -105px;
0270 }
0271
0272 .lightblue {
0273 color: #2673b0;
0274 }
0275
0276 .small {
0277 font-size: 12px;
0278 }
0279
0280 .large {
0281 font-size: 18px;
0282 }
0283
0284 .relative {
0285 position: relative;
0286 }
0287
0288 .absolute {
0289 position: absolute;
0290 }
0291
0292 .light {
0293 font-weight: 300;
0294 }
0295
0296 .lightgrey {
0297 color: #95a5a6;
0298 }
0299
0300 .center {
0301 text-align: center;
0302 }
0303
0304 i.myfav{
0305 color:#8e44ad;
0306 }
0307
0308 h1.page-title {
0309 color: #34495e;
0310 font-weight: bold;
0311 font-size: 32px;
0312 }
0313
0314 .modal {
0315 overflow-y: hidden;
0316 }
0317
0318 .right {
0319 float: right;
0320 }
0321
0322 .left {
0323 float: left;
0324 }
0325
0326 em.icon {
0327 display: inline-block;
0328 background-image: url(../img/bg_sheet.png);
0329
0330 &.info-icon {
0331 width: 31px;
0332 height: 30px;
0333 background-position: -289px -64px;
0334 }
0335
0336 }
0337
0338 .margin-bottom-10 {
0339 margin-bottom: 10px;
0340 }
0341
0342 .margin-top-15 {
0343 margin-top: 15px;
0344 }
0345
0346 .full-width {
0347 width: 100% !important;
0348 }
0349
0350
0351 .progress {
0352 height: 8px;
0353 .border_radius(0);
0354 margin-bottom: 0;
0355 }
0356
0357 /*paging style*/
0358 .opendesktopwidgetpager{
0359 display: flex;
0360 justify-content: right;
0361 align-items: center;
0362 justify-content: flex-end;
0363 ul.opendesktopwidgetpager{
0364 display: inline-block;
0365 padding-left: 0;
0366 margin: 20px 0;
0367 border-radius: 4px;
0368 > li {
0369 display: inline;
0370 >span{
0371 cursor: pointer;
0372 position: relative;
0373 float: left;
0374 margin-left: -1px;
0375 line-height: 1.42857143;
0376 color: #337ab7;
0377 text-decoration: none;
0378 background-color: #fff;
0379 border: 1px solid #ddd;
0380 padding: 5px 10px;
0381 font-size: 12px;
0382 }
0383 }
0384 >.active > span{
0385 z-index: 2;
0386 color: #fff;
0387 cursor: default;
0388 background-color: #337ab7;
0389 border-color: #337ab7;
0390 }
0391 }
0392 }
0393
0394 .disply-flex{
0395 display: flex;
0396 flex-wrap: wrap;
0397 }
0398
0399 .disply-flex > [class*='col-']{
0400 display: flex;
0401 flex-direction: column;
0402 }
0403 /** /COMMON **/
0404
0405 /** TOP MENU **/
0406 .metamenu{
0407 width:100%;
0408 background-color:#fff;
0409 height:15px;
0410 a#toggleStoreBtn{
0411 float: left;
0412 margin-left: 20px;
0413 text-decoration: none;
0414 }
0415 a.home-link{
0416 float: left;
0417 img.logo{
0418 width:16px;
0419 height:16px;
0420 }
0421 }
0422 }
0423
0424 .meta-nav-top {
0425
0426 > li {
0427
0428 > a{
0429 padding:0px 5px ;
0430 .transition();
0431
0432 &#ocs-stores {
0433
0434 img {
0435 width: 16px;
0436 height: 16px;
0437 }
0438 }
0439
0440 }
0441
0442 }
0443
0444 }
0445
0446 /** /TOP MENU **/
0447
0448 /** HEADER **/
0449 ul.meta-nav-top
0450 {
0451 list-style: none;
0452 li{
0453 float: left;
0454 }
0455 }
0456
0457 ul.meta-nav-top-right{
0458 margin:0px;
0459 margin-right: 30px;
0460 float: right;
0461 li{
0462 padding:0 10px;
0463 }
0464 }
0465
0466
0467 ul.meta-nav-top-left{
0468 float: left;
0469 }
0470
0471 #toggleStoreContainer{
0472 z-index: 1000;
0473 display: none;
0474 width: 60%;
0475 height: 200px;
0476 top:12px;
0477 left:190px;
0478 }
0479
0480 #toggleStoreContainer a{
0481 display: block;
0482 font-size: 16px;
0483
0484 }
0485 #toggleStoreContainer a:hover{
0486 color:#6a7686;
0487 }
0488
0489 #toggleStoreContainer b{
0490 text-decoration: underline;
0491 text-align: center;
0492 padding-left: 20px;
0493 font-size: 18px;
0494 cursor: default;
0495 }
0496 #toggleStoreContainer ul {
0497 list-style: none;
0498 padding:0;
0499 padding-top: 10px;
0500 padding-left:30px;
0501 }
0502 #toggleStoreContainer ul li{
0503 font-size: 14px;
0504 }
0505 #toggleStoreContainer ul li:hover{
0506 background-color: transparent;
0507
0508 }
0509
0510 header {
0511
0512 nav {
0513 border-bottom: transparent;
0514 }
0515
0516
0517 &#page_header {
0518 color: #6a7686;
0519 height: auto;
0520 font-size: 10pt;
0521 font-weight: 400;
0522 width: 100%;
0523 font-family: Arial,sans-serif;
0524
0525 nav#nav-top {
0526 margin-left:130px;
0527 width:84%;
0528 }
0529 }
0530
0531 .dropdown-header {
0532 width: 175px;
0533 height: 12px;
0534 background-image: url(../img/bg_sheet.png);
0535 background-position: -385px 0;
0536
0537 }
0538
0539 a {
0540 color: #ffffff;
0541 }
0542
0543 .pull-left,
0544 .pull-right {
0545 padding:0;
0546 }
0547
0548 ul {
0549 margin-bottom: 0;
0550
0551 &.menu-icon {
0552 float: right;
0553 display: none;
0554 }
0555
0556 li {
0557 list-style: none;
0558 display: inline-block;
0559 margin: 0;
0560 cursor: pointer;
0561 float: left;
0562 position: relative;
0563 height: 40px;
0564 line-height: 40px;
0565 float: left;
0566
0567 a {
0568 float: left;
0569 display: block;
0570 height: inherit;
0571 line-height: inherit;
0572 padding: 0 20px;
0573 }
0574
0575 &.profile-menu-container {
0576 padding-top: 0;
0577 padding-left: 40px;
0578
0579 .header-profile-image {
0580 top: 50%;
0581 left: 10px;
0582 height: 30px;
0583 width: 30px;
0584 margin-top: -15px;
0585 .supporter-badge{
0586 position: absolute;
0587 left: 0px;
0588 bottom: 0px;
0589 background: #EE6E09;
0590 text-align: center;
0591 /*border-radius: 30px 30px 30px 30px;*/
0592 color: #fff;
0593 /*padding: 5px 10px;*/
0594 font-size: 12px;
0595 border-radius: 999px;
0596 padding: 5px 5px;
0597 &.inactive{
0598 background: #ccc;
0599 }
0600 }
0601 img {
0602 height: 30px;
0603 width: 30px;
0604 float: left;
0605 .border_radius(999px);
0606 }
0607
0608 }
0609
0610 > a {
0611 display: block;
0612 }
0613 }
0614
0615 ul {
0616 width: 165px;
0617 margin-left: 0;
0618 position: absolute;
0619 left: -9999px;
0620 top: 45px;
0621 border: none;
0622 font-size: 14px;
0623 color: #7f8c8d;
0624 font-weight: normal;
0625 padding: 0;
0626 z-index: 10001;
0627 .border_radius(5px);
0628
0629 &.active {
0630 left: 0;
0631 top: 40px;
0632 }
0633
0634 li {
0635 text-align: left;
0636 display: block;
0637 width: 100%;
0638 background: #ecf0f1;
0639 margin: 0;
0640 padding: 0;
0641 height: 40px;
0642 border-bottom: 1px solid #d6d7d9;
0643
0644 &.first,
0645 &:first-of-type {
0646 .border_radius(5px 5px 0 0);
0647 }
0648
0649 &:last-of-type {
0650 .border_radius(0 0 5px 5px);
0651 }
0652
0653 a {
0654 color: #6a7686;
0655 text-align: left;
0656 height: 40px;
0657 line-height: 40px;
0658 }
0659 }
0660
0661 }
0662 }
0663 }
0664
0665 .container {
0666 margin-left: auto;
0667 margin-right: auto;
0668 float: none;
0669 height: auto;
0670 width: 100%;
0671 background-color: #e2e2e2;
0672 }
0673
0674 .container.header {
0675 margin-left: auto;
0676 margin-right: auto;
0677 float: none;
0678 width: 100%;
0679
0680 section.container {
0681 background-color: transparent;
0682
0683 &.backLink {
0684 background-color: #729ECD !important;
0685 height: 30px;
0686
0687 h4 {
0688 a:hover {
0689 color: #1d1d1d;
0690 }
0691 }
0692 }
0693
0694 section.wrapper {
0695 height: 40px;
0696 padding-left: 80px;
0697 position: relative;
0698 }
0699
0700 }
0701
0702 section.container + section.container {
0703 background-color: transparent;
0704 padding-left: 0;
0705
0706 > section.wrapper {
0707 padding-left: 242px;
0708 height: 50px;
0709 }
0710 }
0711
0712 nav {
0713 border-bottom: transparent;
0714
0715 #search {
0716 height: 25px;
0717 padding: 0;
0718 margin: 6.5px 15px;
0719 line-height: 25px;
0720 position: relative;
0721
0722 input.content-search {
0723 width: 16em;
0724 height: 25px;
0725 padding: 0;
0726 border: 1px solid white;
0727 margin-bottom: -1px;
0728 padding-right: 30px;
0729 text-indent: 5px;
0730 color: #6a7686;
0731 float: left;
0732 border-radius: 6px;
0733 box-shadow: none;
0734 }
0735
0736 div.icon-search-input {
0737 top: 2px;
0738 right: 0;
0739 width: 25px;
0740 height: 25px;
0741 background-image: url(/theme/flatui/img/icon-search-input-2.png);
0742 background-position: center center;
0743 position: absolute;
0744 cursor: pointer;
0745 }
0746
0747 }
0748
0749 }
0750
0751 ul.menu-nav-tabs {
0752 bottom: 0;
0753 display: inline-table;
0754 list-style-type: none;
0755 margin: 0;
0756 padding: 0;
0757 position: absolute;
0758 z-index: 999;
0759 }
0760
0761 }
0762
0763 }
0764
0765 /*
0766 header section.container {
0767 background-color: transparent;
0768 }
0769
0770 header section.container + section.container {
0771 background-color: transparent;
0772 }
0773
0774 header section.container + section.container > section.wrapper {
0775 padding-left: 242px;
0776 height: 50px;
0777 }
0778
0779 header section.container.backLink {
0780 background-color: #729ECD !important;
0781 height: 30px;
0782 }
0783
0784 header section.container.backLink h4 a:hover {
0785 color: #1d1d1d;
0786 }
0787
0788 #page_header div a.black {
0789 color: #6a7686;
0790 }
0791
0792 #page_header div a.black:hover {
0793 color: #1d1d1d;
0794 }
0795
0796 ul.menu-nav-tabs {
0797 bottom: 0;
0798 display: inline-table;
0799 list-style-type: none;
0800 margin: 0;
0801 padding: 0;
0802 position: absolute;
0803 z-index: 999;
0804 }
0805 */
0806 /** /HEADER **/
0807 /** pling nav tabs**/
0808
0809
0810 // rewrite bootrap nav a
0811 @pling-nav-tabs-active-color: #2673b0;
0812 @pling-nav-tabs-onhover-color: #222;
0813 @pling-nav-tabs-color: #777;
0814 .pling-nav-tabs-a{
0815 border: 0 ;
0816 position: relative;
0817 color: @pling-nav-tabs-color;
0818 font-size: 13px;
0819 transition: color 0s;
0820 bottom: -1px;
0821 border-bottom-width: 2px;
0822 border-bottom-style: solid;
0823 border-bottom-color: transparent;
0824 background-color:transparent;
0825 cursor: pointer;
0826 }
0827
0828
0829 .pling-nav-tabs{
0830 ul.nav-tabs{
0831 > li{
0832 background-color:transparent;
0833 margin-bottom: 0px ;
0834 > a{
0835 .pling-nav-tabs-a;
0836 }
0837 > a:hover{
0838 .pling-nav-tabs-a;
0839 color: @pling-nav-tabs-active-color;
0840 svg{
0841 fill:@pling-nav-tabs-active-color;
0842 }
0843 }
0844 > a:focus{
0845 .pling-nav-tabs-a;
0846 }
0847 svg{
0848 fill:@pling-nav-tabs-color;
0849 }
0850
0851 &.active{
0852 > a {
0853 .pling-nav-tabs-a;
0854 color: @pling-nav-tabs-active-color;
0855 border-bottom-color: @pling-nav-tabs-active-color;
0856 font-weight: bold;
0857 }
0858 > a:hover{
0859 .pling-nav-tabs-a;
0860 color: @pling-nav-tabs-active-color;
0861 border-bottom-color: @pling-nav-tabs-active-color;
0862 font-weight: bold;
0863
0864 }
0865 > a:focus{
0866 .pling-nav-tabs-a;
0867 color: @pling-nav-tabs-active-color;
0868 border-bottom-color: @pling-nav-tabs-active-color;
0869 font-weight: bold;
0870 }
0871 svg {
0872 fill: @pling-nav-tabs-active-color;
0873 }
0874
0875 }
0876 }
0877 }
0878 }
0879
0880
0881
0882 /** pling nav tabs end**/
0883
0884 /** FOOTER **/
0885
0886 footer {
0887 width: 100%;
0888 float: left;
0889 padding: 12px 0;
0890 border-bottom: 5px solid #2673b0;
0891 border-top: 1px solid darkgray;
0892 background-color: gainsboro;
0893 font-size: 9pt;
0894
0895 h3 {
0896 font-weight: normal;
0897 }
0898
0899 h3#footer-heading {
0900 font-size: 1.3em;
0901 margin: 0;
0902 }
0903
0904 nav#footer-nav {
0905
0906 ul {
0907 margin-top: 1em;
0908 list-style: none;
0909 padding: 0;
0910 margin-right: 1em;
0911 float: left;
0912 width: auto;
0913 margin-bottom: .2em;
0914
0915 li {
0916 display: inline-block;
0917 margin-right: 0;
0918 font-size: 1em;
0919
0920 a {
0921 color: #666;
0922 font-weight: 400;
0923 }
0924 }
0925
0926 li + li {
0927 margin-left: 10px;
0928 }
0929 }
0930 }
0931
0932 h3#footer-social-heading {
0933 color: #666;
0934 font-size: 1em;
0935 margin: 0 0 .4em 0;
0936 }
0937
0938 #footer-social {
0939 float: right;
0940 a {
0941 width: 30px;
0942 display: block;
0943 float: left;
0944 }
0945 a + a {
0946 margin-left:2px;
0947 }
0948 }
0949
0950 section.wrapper {
0951
0952 .pull-left {
0953 padding: 0;
0954 }
0955
0956 .pull-right {
0957 padding: 0;
0958 }
0959 }
0960
0961 }
0962
0963 /** /FOOTER **/
0964
0965 /** HOME PAGE **/
0966
0967 body.home-page {
0968
0969 main {
0970
0971 section.wrapper {
0972
0973 .container {
0974 padding: 150px 0;
0975 height: auto;
0976 float: none;
0977 max-width: 95%;
0978 width: 95%;
0979 }
0980
0981 &#intro {
0982
0983 .container {
0984 padding-bottom: 50px;
0985
0986 article {
0987 text-align: center;
0988 width: 100%;
0989
0990 > * {
0991 margin-bottom: 40px;
0992 }
0993
0994 h2 {
0995 font-size: 40px;
0996 font-weight: 700;
0997 margin-bottom: 20px;
0998 }
0999
1000 h3 {
1001 font-size: 30px;
1002 font-weight: 700;
1003 margin-top: 2px;
1004 }
1005
1006 p {
1007 margin-bottom: 0;
1008 text-align: center;
1009 }
1010
1011 }
1012
1013 }
1014
1015 }
1016
1017 }
1018
1019 section#cat-list {
1020 border-top: 1px solid #cdd7dd;
1021 }
1022
1023 .card-wrapper {
1024 position: relative;
1025 max-width: 960px;
1026 margin: auto;
1027 margin-bottom: 2rem;
1028 background: white;
1029
1030 .card-item {
1031 position: absolute;
1032 padding: 1rem;
1033 width: 31.4%;
1034 border: 1px solid gray;
1035 border-radius: 7px;
1036
1037 .category {
1038 a.title {
1039 font-size: 14pt;
1040 font-weight: 600;
1041 min-height: 30px;
1042 line-height: 30px;
1043 padding-right: 30px;
1044
1045 span.label {
1046 padding: 2px 3px;
1047 }
1048 }
1049 }
1050
1051 div {
1052
1053 a.title {
1054 font-size: 11pt;
1055 min-height: 20px;
1056 line-height: 20px;
1057 padding-right: 5px;
1058
1059 span.label {
1060 font-size: 7pt;
1061 font-weight: 300;
1062 vertical-align: top;
1063 margin-left: 5px;
1064 padding: 1px 3px;
1065 }
1066 }
1067 }
1068 }
1069 }
1070
1071 }
1072
1073 }
1074
1075 .card-item {
1076 border: 1px solid gray;
1077 }
1078
1079 .card-item .category > a.title {
1080 color: #444444;
1081 }
1082
1083 .card-item div > a.title {
1084 color: #6a6a6a;
1085 }
1086
1087 #indeximages {
1088 /* Prevent vertical gaps */
1089 line-height: 0;
1090 -webkit-column-count: 20;
1091 -webkit-column-gap: 0px;
1092 -moz-column-count: 20;
1093 -moz-column-gap: 0px;
1094 column-count: 20;
1095 column-gap: 0px;
1096 }
1097
1098 #indeximages img {
1099 /* Just in case there are inline attributes */
1100 width: 100% !important;
1101 height: auto !important;
1102 opacity: 1;
1103 }
1104
1105 @media (max-width: 1920px) {
1106 #indeximages {
1107 -moz-column-count: 20;
1108 -webkit-column-count: 20;
1109 column-count: 20;
1110 }
1111 }
1112
1113 @media (max-width: 1200px) {
1114 #indeximages {
1115 -moz-column-count: 15;
1116 -webkit-column-count: 4;
1117 column-count: 4;
1118 }
1119 }
1120 @media (max-width: 1000px) {
1121 #indeximages {
1122 -moz-column-count: 12;
1123 -webkit-column-count: 3;
1124 column-count: 3;
1125 }
1126 }
1127 @media (max-width: 800px) {
1128 #indeximages {
1129 -moz-column-count: 9;
1130 -webkit-column-count: 2;
1131 column-count: 2;
1132 }
1133 }
1134 @media (max-width: 400px) {
1135 #indeximages {
1136 -moz-column-count: 7;
1137 -webkit-column-count: 1;
1138 column-count: 1;
1139 }
1140 }
1141
1142
1143 /** /HOME PAGE **/
1144
1145 /** BROWSE PAGE **/
1146
1147 #products-wrapper {
1148 padding-top: 20px;
1149 }
1150
1151 /*
1152 .explore-products {
1153 padding-left: 30px;
1154
1155 ul.nav-tabs {
1156 border-bottom: 0;
1157 margin-bottom: -2px !important;
1158
1159 li.active {
1160 padding-bottom: 0;
1161
1162 a {
1163 border-bottom: 0;
1164
1165 span {
1166 height: 30px;
1167 background: white;
1168 border-radius: 2px 2px 0 0;
1169 border-bottom: 0;
1170 }
1171
1172 }
1173 }
1174
1175 li {
1176 margin: 0;
1177 margin-right: 5px;
1178 top: 2px;
1179
1180 &.right {
1181 float: right;
1182 }
1183
1184 &.active {
1185 padding-bottom: 0;
1186
1187 a {
1188 border-bottom: 0;
1189
1190 span {
1191 height: 30px;
1192 background: white;
1193 border-radius: 2px 2px 0 0;
1194 border-bottom: 0;
1195 }
1196
1197 }
1198 }
1199
1200 a {
1201 margin: 0;
1202 padding: 0;
1203 -webkit-border-radius: 3px;
1204 -moz-border-radius: 3px;
1205 border-radius: 3px;
1206 -webkit-background-clip: padding-box;
1207 -moz-background-clip: padding;
1208 background-clip: padding-box;
1209 border: 1px solid #ccc;
1210
1211 span {
1212 display: block;
1213 padding: 5px;
1214 font-size: 12px;
1215 font-weight: bold;
1216 height: 23px;
1217 line-height: 1;
1218 background: #e8e8e8;
1219 border: 1px solid white;
1220 -webkit-border-radius: 2px;
1221 -moz-border-radius: 2px;
1222 border-radius: 2px;
1223 -webkit-background-clip: padding-box;
1224 -moz-background-clip: padding;
1225 background-clip: padding-box;
1226 }
1227 }
1228 }
1229 }
1230
1231 .product-list {
1232 width: 100%;
1233 float: left;
1234 padding: 0 10px;
1235 border: 1px solid #ccc;
1236 background-color: white;
1237 .border_radius(0 0 5px 5px);
1238
1239 .explore-product {
1240 padding: 10px 0;
1241 font-size: 12px;
1242 border-top: 1px solid #ccc;
1243 .explore-product-imgcolumn
1244 {
1245 padding-left: 5px;
1246 padding-right: 5px;
1247 }
1248 .explore-product-image {
1249 max-width: 95%;
1250 max-height: 167px;
1251 }
1252 img{
1253 max-width: 100%;
1254 }
1255 .contentLeft
1256 {
1257 float: left;
1258 padding-right: 0px;
1259 width: 270px;
1260 img{
1261 max-width: 167px;
1262 max-height: 167px;
1263 }
1264
1265 div.productimg
1266 {
1267 width: 167px;
1268 height: 167px;
1269 }
1270 }
1271 .rownum {
1272 font-size: large;
1273 color: graytext;
1274 width: 90px;
1275 float:left;
1276 }
1277
1278 .explore-product-details {
1279 padding-left: 0px;
1280
1281 h3 {
1282 margin: 0 0 10px 0;
1283 font-size: 16px;
1284 height: 20px;
1285 font-weight: bold;
1286 color: #2673b0;
1287 span.version
1288 {
1289 font-size: smaller;
1290 padding-left: 20px;
1291 }
1292 }
1293 .categoryname
1294 {
1295 font-weight: bold;
1296 }
1297 .productInfo
1298 {
1299 padding-top: 15px;
1300 span.cntSupporters
1301 {
1302 padding-right: 20px;
1303 }
1304 }
1305 }
1306
1307 .explore-product-plings {
1308 padding: 0;
1309
1310 .rating {
1311 width: 50%;
1312
1313 }
1314
1315 .progress {
1316 margin-bottom: 10px;
1317 padding: 3px;
1318 opacity:0;
1319 margin-bottom: 0;
1320 height:12px;
1321 opacity:1.0;
1322 background-color: transparent;
1323 box-shadow: none;
1324 padding:2px;
1325
1326 .bar {
1327 width: 4px;
1328 max-width: 100%;
1329 height: 14px;
1330 background-color: #2673b0;
1331 .border_radius(5px);
1332 .box_shadow(inset 0 6px 0 rgba(255,255,255,0.2));
1333
1334 &.no-goal {
1335 width: 50%;
1336 opacity: 0;
1337 }
1338
1339 }
1340 }
1341
1342 .collected {
1343 span {
1344 display: block;
1345 width: 100%;
1346 float: left;
1347 }
1348 }
1349 }
1350
1351 &:first-of-type {
1352 border-top:0;
1353 }
1354
1355 }
1356
1357 }
1358
1359 .explore-footer {
1360 width: 100%;
1361 text-align: center;
1362
1363 .projectPaginationControl {
1364 width: auto;
1365 display: table;
1366 margin: 0 auto;
1367
1368 ul#pagination-digg {
1369 padding: 0;
1370 list-style-type: none;
1371 margin: 20px 0;
1372 height: auto;
1373 overflow: hidden;
1374
1375 li {
1376 float: left;
1377 font-size: 16px;
1378 font-weight: normal;
1379 margin: 0 4px;
1380 }
1381 }
1382
1383 }
1384
1385 }
1386 }
1387 */
1388
1389 /* .explore-products css cleanup*/
1390 .explore-products {
1391 padding-left: 30px;
1392 padding-right: 30px;
1393 margin-top: -10px;
1394 /*
1395 .nav-tabs{
1396 > li{
1397 background-color:@contentbgcolor;
1398 > a{
1399 border: 0;
1400 color: #777;
1401 font-size: 13px;
1402 }
1403 > a:hover{
1404 border: 0;
1405 color: #222;
1406 background-color:@contentbgcolor;
1407 }
1408 &.right {
1409 float: right;
1410 }
1411 }
1412 > li.active{
1413 > a {
1414 background-color: @contentbgcolor;
1415 border: 0px;
1416 border-bottom: 3px solid #2673b0;
1417 color: #2673b0;
1418 font-weight: bold;
1419 }
1420 }
1421 }
1422 */
1423
1424
1425 .product-list {
1426 width: 100%;
1427 float: left;
1428 padding: 0 10px;
1429 .border_radius(0 0 5px 5px);
1430
1431 .explore-product {
1432 padding: 10px 0;
1433 font-size: 12px;
1434 border-top: 1px solid #ccc;
1435 .rownum{
1436 font-size: 12px;
1437 float:left;
1438 }
1439 .explore-product-imgcolumn
1440 {
1441 padding-left: 5px;
1442 padding-right: 5px;
1443 }
1444 .imageContainer{
1445 height:167px;
1446 display:flex;
1447 justify-content: center;
1448 align-items: center;
1449 }
1450 .explore-product-image {
1451 max-width: 95%;
1452 max-height: 167px;
1453 }
1454
1455 .contentLeft
1456 {
1457 float: left;
1458 padding-right: 0px;
1459 width: 270px;
1460 img{
1461 max-width: 167px;
1462 max-height: 167px;
1463 }
1464
1465 div.productimg
1466 {
1467 width: 167px;
1468 height: 167px;
1469 }
1470 }
1471
1472
1473 .explore-product-details {
1474 padding-left: 20px;
1475
1476 h3 {
1477 font-size: 24px;
1478 font-weight: bold;
1479 color: #2673b0;
1480 span.version
1481 {
1482 font-size: smaller;
1483 padding-left: 20px
1484 }
1485 }
1486 .title{
1487 display: block;
1488 margin-bottom: 8px;
1489 .username{
1490 padding-left: 20px;
1491 }
1492 }
1493 .description{
1494 display: block;
1495 margin-bottom: 8px;
1496 }
1497 .packagetypes{
1498 display: block;
1499 float: left;
1500 .packagetypeos{
1501 width: 100px;
1502 float: left;
1503 }
1504 }
1505 .productInfo
1506 {
1507 clear: left;
1508 padding-top: 5px;
1509 span.cntSupporters
1510 {
1511 padding-right: 20px;
1512 }
1513 }
1514 }
1515
1516 .explore-product-plings {
1517 padding: 0;
1518
1519 .plinged{
1520 width: 50%;
1521 text-align: center;
1522 }
1523 .rating {
1524 width: 50%;
1525
1526 }
1527
1528 .progress {
1529 margin-bottom: 10px;
1530 padding: 3px;
1531 opacity:0;
1532 margin-bottom: 0;
1533 height:12px;
1534 opacity:1.0;
1535 background-color: transparent;
1536 box-shadow: none;
1537 padding:2px;
1538
1539 .bar {
1540 width: 4px;
1541 max-width: 100%;
1542 height: 14px;
1543 background-color: #2673b0;
1544 .border_radius(5px);
1545 .box_shadow(inset 0 6px 0 rgba(255,255,255,0.2));
1546
1547 &.no-goal {
1548 width: 50%;
1549 opacity: 0;
1550 }
1551
1552 }
1553 }
1554
1555 .collected {
1556 span {
1557 display: block;
1558 width: 100%;
1559 float: left;
1560 }
1561 }
1562 }
1563
1564 &:first-of-type {
1565 border-top:0;
1566 }
1567
1568 }
1569
1570 }
1571
1572 .explore-footer {
1573 width: 100%;
1574 text-align: center;
1575
1576 .projectPaginationControl {
1577 width: auto;
1578 display: table;
1579 margin: 0 auto;
1580
1581 ul#pagination-digg {
1582 padding: 0;
1583 list-style-type: none;
1584 margin: 20px 0;
1585 height: auto;
1586 overflow: hidden;
1587
1588 li {
1589 float: left;
1590 font-size: 16px;
1591 font-weight: normal;
1592 margin: 0 4px;
1593 }
1594 }
1595
1596 }
1597
1598 }
1599 }
1600 aside#explore-sidebar {
1601 padding-left: 0;
1602 margin-bottom: 20px;
1603 }
1604
1605 /** /BROWSE PAGE **/
1606
1607 /** COMMUNITY PAGE **/
1608
1609 main#community-page {
1610
1611 .head-wrap {
1612 padding-top: 1em;
1613 height: auto;
1614 background-size: cover;
1615 position: relative;
1616
1617 .wrapper {
1618 width: 95%;
1619 }
1620
1621 .page-title {
1622 height: 3em;
1623 position: relative;
1624 margin-bottom: 2em;
1625
1626 .center {
1627 position: absolute;
1628 top: 0;
1629 left: 0;
1630 width: 100%;
1631 height: 3em;
1632 text-align: center;
1633
1634 > div {
1635 background: rgba(246,246,246,0.86);
1636 width: auto;
1637 display: table;
1638 float: none;
1639 margin: 0 auto;
1640
1641 >h1 {
1642 margin: 0 .5em;
1643 }
1644 }
1645 }
1646
1647 hr {
1648 margin-top: 20px;
1649 margin-bottom: 20px;
1650 border: 0;
1651 border-top: 1px solid #eee;
1652 border-bottom: 1px solid white;
1653 float: left;
1654 width: 100%;
1655 }
1656
1657 }
1658
1659 }
1660
1661 .banner {
1662 margin: 0 auto;
1663 float: none;
1664 background: white;
1665 border: 1px solid #e4e4e4;
1666 padding: 0;
1667 -webkit-border-radius: 10px;
1668 -moz-border-radius: 10px;
1669 border-radius: 10px;
1670 -webkit-background-clip: padding-box;
1671 -moz-background-clip: padding;
1672 background-clip: padding-box;
1673 text-align: center;
1674
1675 .top {
1676 padding: 1em;
1677 font-size: 1em;
1678
1679 .large {
1680 font-size: 2em;
1681 }
1682 }
1683
1684 .bottom {
1685 padding: 1em;
1686 background: rgba(231,231,231,0.4);
1687 border-top: 1px solid #e4e4e4;
1688 .border_radius(0 0 9px 9px);
1689
1690 a {
1691 margin-right: 5px;
1692 }
1693
1694 }
1695 }
1696
1697 .body-wrap {
1698 background: white;
1699 position: relative;
1700
1701 .wrapper {
1702 width: 70%;
1703 }
1704
1705 #user-lists {
1706 padding-top: 1em;
1707 #community-tabs{
1708 margin-bottom:20px;
1709 text-align:center;
1710
1711 .pling-nav-tabs{
1712 .nav-tabs {
1713 text-align:center;
1714 }
1715 .nav-tabs > li, .nav-pills > li {
1716 float:none;
1717 display:inline-block;
1718 }
1719
1720 }
1721 }
1722
1723 #communityPanels{
1724 .toplistmemberx
1725 {
1726 .explore-product:first-child
1727 {
1728 border-top: 1px solid #ccc;
1729 }
1730 }
1731 .paging{
1732 display: block;
1733 float: right;
1734 }
1735 .btnshowmore{
1736 display: none;
1737 }
1738 .explore-products{
1739 width: 800px;
1740 }
1741 .rowproduct{
1742 align-items: center;
1743 justify-content: center;
1744 }
1745 .rank{
1746 font-size: 33px;
1747 line-height: 33px;
1748 letter-spacing: normal;
1749 text-align: center;
1750 font-weight: 700;
1751 letter-spacing: -1px;
1752 }
1753 .product-list
1754 {
1755 background-color: #F5F5F5;
1756 border: 1px solid #e4e4e4;
1757 border-radius: 10px;
1758 }
1759
1760 figure.mostplingedcreators img
1761 {
1762 width: 100%;
1763 border: 1px solid #dbdbdb;
1764 -webkit-border-radius: 999px;
1765 -moz-border-radius: 999px;
1766 border-radius: 999px;
1767 -webkit-background-clip: padding-box;
1768 -moz-background-clip: padding;
1769 background-clip: padding-box;
1770 }
1771 }
1772
1773 .list{
1774 display:block;
1775 margin:auto;
1776 padding-right: 15px;
1777 padding-left: 15px;
1778
1779 display:flex;
1780 flex-wrap: wrap;
1781 align-items: center;
1782 justify-content: center;
1783
1784 .u-wrap{
1785 float: left;
1786 width: 100%;
1787 padding: 0.3em;
1788 border: 0.35em solid #dee0e0;
1789 border-radius: 5px;
1790 height: 14em;
1791 margin-bottom: 1em;
1792 background: white;
1793 width: 115px;
1794 height: 200px;
1795 margin-right: 10px;
1796 -webkit-transition: all 0.2s ease-out;
1797 -moz-transition: all 0.2s ease-out;
1798 -ms-transition: all 0.2s ease-out;
1799 -o-transition: all 0.2s ease-out;
1800 position: relative;
1801 text-align: center;
1802 figure {
1803 float: left;
1804 padding: .25em;
1805 border: 1px solid #dbdbdb;
1806 background: #f6f6f6;
1807 .border_radius(999px);
1808 img{
1809 width: 100%;
1810 border: 1px solid #dbdbdb;
1811 -webkit-border-radius: 999px;
1812 -moz-border-radius: 999px;
1813 border-radius: 999px;
1814 -webkit-background-clip: padding-box;
1815 -moz-background-clip: padding;
1816 background-clip: padding-box;
1817
1818 }
1819 }
1820 h3{
1821 font-size: 13px;
1822 font-weight: bold;
1823 word-wrap: break-word;
1824 line-height: 20px;
1825 height: 20px;
1826 padding: 0;
1827 margin: 0;
1828 }
1829 span.small {
1830 font-size: 13px;
1831 color: #444;
1832 position: absolute;
1833 bottom: 5px;
1834 right: 5px;
1835 }
1836 div.projecttitle{
1837 font-size: 11px;
1838 }
1839 span.rank {
1840 font-size: 14px;
1841 position: absolute;
1842 bottom: 5px;
1843 left: 5px;
1844 color: #444;
1845 font-weight: bold;
1846 }
1847
1848
1849 }
1850 }
1851
1852
1853
1854
1855 }
1856 }
1857
1858 }
1859
1860 /** /COMMUNITY PAGE **/
1861
1862 /** PRODUCT PAGE **/
1863
1864 #product-page-content {
1865 padding: 0;
1866
1867 #product-main-img {
1868
1869 #product-title-div {
1870 padding-left: 30px;
1871 min-height:105px;
1872 padding-top: 20px;
1873 display: flex;
1874 .product-title{
1875 flex:0 0 80%;
1876 font-size: 25px;
1877 color: #2673b0;
1878 font-weight: bold;
1879 padding-bottom: 15px;
1880 }
1881 .product-title-right{
1882 flex:1;
1883
1884 }
1885 img.logo {
1886 max-height: 85px;
1887 max-width: 85px;
1888 float: left;
1889 padding-right: 15px;
1890 border-radius: 0px;
1891 }
1892 .product-logo-container {
1893 float: left;
1894 width: 95px;
1895 }
1896
1897 .product_category {
1898 font-size: small;
1899 display: block;
1900 font-weight: normal;
1901 }
1902 .topics{
1903 padding-right: 20px;
1904 float: right;
1905
1906 .topic-tag
1907 {
1908 display: inline-block;
1909 padding: 0.3em 0.9em;
1910 margin: 0 0.5em 0.5em 0;
1911 white-space: nowrap;
1912 background-color: #f1f8ff;
1913 border-radius: 3px;
1914 }
1915 .usertagslabelcat{
1916 background-color: #f1f1f1;
1917 }
1918 .topic-tag-link
1919 {
1920 &:hover {
1921 text-decoration: none;
1922 background-color: #def;
1923 }
1924 }
1925 .btn-link{
1926 display: inline-block;
1927 padding: 0;
1928 font-size: inherit;
1929 color: #0366d6;
1930 text-decoration: none;
1931 white-space: nowrap;
1932 cursor: pointer;
1933 -webkit-user-select: none;
1934 -moz-user-select: none;
1935 -ms-user-select: none;
1936 user-select: none;
1937 background-color: transparent;
1938 border: 0;
1939 -webkit-appearance: none;
1940 -moz-appearance: none;
1941 appearance: none;
1942 float: right;
1943 padding-top: 5px;
1944 padding-left: 10px;
1945 }
1946 .topic-tags-saved{
1947 display: none;
1948 color: #0366d6;
1949 float: left;
1950 padding-top: 5px;
1951 padding-left: 10px;
1952 .fa-check{
1953 color: green;
1954 }
1955 }
1956 }
1957
1958 span.source{
1959 color:#4e4e4e;
1960 }
1961 div.projectdetailRating{
1962 float: right;
1963 width:140px;
1964 z-index: 100;
1965
1966
1967 }
1968
1969 div.projectdtailHeart{
1970 float: right;
1971
1972 margin-right: 5px;
1973 width: 80px;
1974
1975 .container-pling{
1976 position: relative;
1977 width: 80px;
1978 .partialbuttonfollowproject{
1979 text-align: center;
1980 width: 80px;
1981 height: 30px;
1982 }
1983 .partialbuttonplingproject
1984 {
1985 text-align: center;
1986 }
1987
1988 }
1989 }
1990
1991
1992 div.projectdtailHeart{
1993 float: right;
1994 z-index: 100;
1995 margin-right: 5px;
1996 width: 50px;
1997
1998 .container-pling{
1999 position: relative;
2000 width: 50px;
2001 .partialbuttonfollowproject{
2002 text-align: center;
2003 width: 45px;
2004 height: 45px;
2005 }
2006 .partialbuttonplingproject
2007 {
2008 text-align: center;
2009 }
2010
2011 }
2012 }
2013 .heartproject{
2014 position:relative;
2015 color:#8e44ad;
2016 font-size: 45px;
2017 display: block;
2018 }
2019
2020 div.heartnumber{
2021 z-index: 3;
2022 position: relative;
2023 top: -32px;
2024 display: block;
2025 margin: auto;
2026 color: #fff;
2027 }
2028
2029 .heartgrey{
2030 position: relative;
2031 color: #C8C8C8;
2032 font-size: 45px;
2033 display: block;
2034 }
2035
2036 /*
2037 .heartproject{
2038
2039 color:#8e44ad;
2040 font-size: 25px;
2041 display: block;
2042 float: right;
2043 }
2044
2045 .heartgrey{
2046 position:relative;
2047 color:#C8C8C8;
2048 font-size: 25px;
2049 display: block;
2050 float: right;
2051 }
2052 div.heartnumber{
2053
2054 }
2055
2056 */
2057
2058 span.plingcircle{
2059 width: 30px;
2060 height: 30px;
2061 background-color: #fff;
2062 border: 3px solid #C8C8C8;
2063 border-radius: 50%;
2064 display: inline-block;
2065 font-size: 17px;
2066 text-align: center;
2067 color: #C8C8C8;
2068 font-weight: bold;
2069 transform: rotate(345deg);
2070
2071 }
2072 span.active{
2073 border: 3px solid #EE6E09;
2074 color: #EE6E09;
2075 }
2076
2077 div.plingtext{
2078
2079 }
2080
2081 div.heartnumberpurple{
2082 color: #8e44ad;
2083
2084 }
2085
2086
2087 }
2088 }
2089
2090 #product-tabs-container {
2091 padding-top: 30px;
2092
2093 #product-actions {
2094 margin-top:25px;
2095 margin-right: 10px;
2096 }
2097 }
2098
2099 #product-tabs {
2100 font-size: 10pt;
2101 padding-left: 25px;
2102 }
2103
2104 /*
2105 ul.nav-tabs {
2106 padding: 0 15px;
2107 border-bottom: 0;
2108 width: auto;
2109 float: left;
2110
2111 li {
2112 float: left;
2113 margin-bottom: -1px;
2114
2115 a {
2116 color: white;
2117 background-color: #21659b;
2118 .border_radius(10px 10px 0 0);
2119 }
2120
2121 }
2122
2123 li.active,
2124 li:hover,
2125 li:focus {
2126 a {
2127 border-color: #21659b;
2128 background-color: #2673b0;
2129 }
2130 }
2131
2132 }
2133 */
2134 #product-panels {
2135 background: none repeat scroll 0 0 #fff;
2136 height: auto;
2137 overflow: hidden;
2138 /* border-top: 2px solid #21659b;*/
2139 border-radius: 0px;
2140 padding: 15px;
2141 float: left;
2142 width: 100%;
2143 margin: 0;
2144
2145 .tab-pane {
2146
2147 width: 100%;
2148 float: left;
2149 background-color: white;
2150 padding: 4px;
2151
2152 h3 {
2153 color: #2673b0;
2154 margin-bottom: 20px;
2155 margin-top: 0;
2156 }
2157
2158 .panel-grey-part {
2159 padding: 15px;
2160 background-color: #f3f3f3;
2161 color: #2673b0;
2162 border-left: 1px solid #e5e5e5;
2163 }
2164
2165 &#about-panel {
2166
2167 #product-about {
2168 padding: 20px 10px 10px 10px;
2169 .gitlab-readme{
2170 img{
2171 max-width: 100%;
2172 }
2173
2174 }
2175 article {
2176 padding-top: 15px;
2177 }
2178 article.lastchangelog{
2179 padding-top: 50px;
2180 }
2181
2182 }
2183
2184 #product-discussion {
2185
2186
2187
2188 }
2189
2190 }
2191
2192 &#donations-panel {
2193
2194 #comments {
2195 width: 100%;
2196 float: left;
2197 padding: 15px;
2198 }
2199
2200 .list#supporters {
2201 padding: 15px;
2202 }
2203
2204 }
2205
2206 &#ratings-panel2{
2207 .userimg {
2208 border-radius: 50%;
2209 border: 1px solid #ccc;
2210 width: 40px;
2211 height: 40px;
2212 }
2213 }
2214
2215 &#ratings-panel{
2216 .productRating-rows-inactive{
2217 color: #ddd ;
2218 display: none;
2219 }
2220 .userimg{
2221 border-radius: 50%;
2222 border: 1px solid #ccc;
2223 width: 40px;
2224 height: 40px;
2225 }
2226 span.o-thumbs-up{
2227 color:green;
2228 padding-left:10px;
2229 padding-top:10px
2230 }
2231 span.o-thumbs-down{
2232 color:red;
2233 padding-left:10px;
2234 padding-top:10px
2235 }
2236 }
2237
2238 }
2239 #files-panel{
2240 padding-top: 30px;
2241 table.table-ocs-file{
2242 td{
2243 padding: 3px;
2244 vertical-align: middle;
2245 padding-left: 8px;
2246 }
2247 th{
2248 padding-right: 3px;
2249 }
2250 }
2251 .btn{
2252 padding: 3px 5px;
2253 }
2254 }
2255 #updates-panel{
2256 span.product-update-date{
2257 padding-left: 10px;
2258 }
2259 }
2260 #gitlabissues-panel{
2261
2262 span.date{
2263 font-size: 10pt;
2264 }
2265 span.title{
2266 font: 12pt Trebuchet MS,sans-serif;
2267 display: block;
2268 padding-bottom: 10px;
2269 }
2270 span.showmore{
2271 font-size: 10pt;
2272 }
2273 }
2274
2275 }
2276
2277
2278
2279 }
2280 span.page-views {
2281 float: left;
2282 font-size: 12px;
2283 padding: 5px 15px 5px 0px;
2284 color: #2673b0;
2285 }
2286
2287
2288 #product-maker {
2289 background-color: #f1f1f1;
2290
2291 .project-share-new {
2292 padding-bottom: 10px;
2293 padding-top: 10px;
2294
2295 >.row {
2296 padding-left: 30px;
2297 }
2298
2299 .prod-user {
2300 margin-top: 10px;
2301
2302 .product-maker-thumbnail {
2303 float: right;
2304 .supporter-badge{
2305 position: absolute;
2306 left: 0px;
2307 bottom: 0px;
2308 background: #EE6E09;
2309 text-align: center;
2310 /*border-radius: 15px 15px 15px 15px;*/
2311 color: #fff;
2312 /*padding: 2px 5px;*/
2313 font-size: 10px;
2314 border-radius: 999px;
2315 padding: 2px 2px;
2316 &.inactive{
2317 background: #ccc;
2318 }
2319 }
2320 }
2321
2322 .product-maker-summary {
2323 float:right;
2324 padding-right: 20px;
2325 }
2326 }
2327
2328 .prod-info {
2329 font-size: 12px;
2330
2331 padding-bottom: 10px;
2332
2333 > span {
2334 width: 100%;
2335 float: left;
2336 padding-left: 15px;
2337 }
2338
2339
2340 }
2341
2342 .prod-download {
2343
2344 > a {
2345 position: relative;
2346 display: block;
2347 float: left;
2348 color:#2673b0;
2349 .gradient_color(#E8E8E8, #D6D6D6);
2350 .box_shadow(inset 0 0 0 1px rgba(154, 154, 154, 0.45));
2351 padding: 10px;
2352 .border_radius(5px);
2353 height: 50px;
2354 font-size: 16px;
2355 line-height: 30px;
2356 padding-left: 15px;
2357 margin-right: 5px;
2358 margin-bottom: 10px;
2359 .glyphicon {
2360 font-size: 30px;
2361 margin: 0;
2362 position: absolute;
2363 height: 30px;
2364 width: 30px;
2365 display: block;
2366 top: 10px;
2367 left: 10px;
2368 }
2369
2370 .txt {
2371 float: left;
2372 width: 100%;
2373 height: 30px;
2374
2375 > span {
2376 text-transform: capitalize;
2377 }
2378 }
2379 }
2380 }
2381
2382 #donation-box {
2383 margin: 0 -10px;
2384 }
2385 }
2386
2387 /*
2388 div.projectdtailHeart{
2389 .container-like{
2390 position: relative;
2391 width: 80px;
2392 height: 30px;
2393 float: left;
2394
2395
2396 .heartproject{
2397 position:relative;
2398 color:#8e44ad;
2399 font-size: 30px;
2400 display: block;
2401 float: right;
2402 }
2403
2404 .heartgrey{
2405 position:relative;
2406 color:#C8C8C8;
2407 font-size: 30px;
2408 display: block;
2409 float: right;
2410
2411 }
2412 .likelabel{
2413 line-height: 29px;
2414 }
2415
2416 div.heartnumber{
2417 z-index: 3;
2418 position: relative;
2419 top: -24px;
2420 display: block;
2421 color:#fff;
2422 text-align: center;
2423 }
2424 div.heartnumberpurple{
2425 color: #8e44ad;
2426
2427 }
2428 }
2429
2430 .container-pling{
2431 position: relative;
2432 .partialbuttonfollowproject{
2433 text-align: center;
2434 width: 45px;
2435 height: 45px;
2436 }
2437 .partialbuttonplingproject
2438 {
2439 text-align: center;
2440 }
2441 }
2442 }
2443
2444 */
2445
2446
2447 }
2448
2449 .prod-widget-box {
2450 border: 1px solid #ccd4d8 !important;
2451 font-size: 10pt;
2452 padding: 5px;
2453 margin-bottom: 10px !important;
2454 width: 95% !important;
2455
2456 .product-row {
2457
2458 .product-thumbnail {
2459 width: 75px;
2460 height: 77px;
2461 margin: 7px;
2462 padding: 10px;
2463 position: relative;
2464
2465 img {
2466 border-radius: 5px;
2467 border: 1px solid #b2b2b2;
2468 height: 75px;
2469 width: 75px;
2470 }
2471 }
2472 }
2473
2474 #pling-box {
2475
2476 .donation-box {
2477 padding-top: 10px;
2478 padding-bottom: 15px;
2479 width: 100%;
2480 height: auto;
2481
2482 >div {
2483 height: auto;
2484 }
2485 }
2486 }
2487
2488 #comments {
2489
2490 figure {
2491 width: 40px;
2492 height: auto;
2493 text-align: center;
2494 border-top: 1px solid #f5f5f5;
2495 padding: 0 0 15px 0;
2496 float: left;
2497
2498 img {
2499 margin: 0 auto;
2500 width: 70%;
2501 }
2502 }
2503 }
2504
2505 &.details
2506 {
2507 span{
2508
2509 line-height: 1.65em;
2510 font-size: 8.25pt;
2511 }
2512 span.title
2513 {
2514 font: 12pt Trebuchet MS,sans-serif;
2515 display: block;
2516 padding-bottom: 10px;
2517 }
2518 span.value
2519 {
2520 font-size: 9pt;
2521 }
2522 }
2523 }
2524
2525 #product-donate {
2526 display: none;
2527 width:550px;
2528 height:300px;
2529 font-size: 13px;
2530 }
2531
2532 /** /PRODUCT PAGE **/
2533
2534 /** REGISTER **/
2535
2536 main#reg-page {
2537 width: 100%;
2538 height: 100%;
2539
2540 .form-control-feedback {
2541 line-height: 40px;
2542 }
2543
2544
2545 section#register-wrap {
2546 position: absolute;
2547 top: 150px;
2548 left: 50%;
2549 margin-left: -290px;
2550 width: 580px;
2551
2552 input[type="text"],
2553 input[type="password"] {
2554 border-width: 1px;
2555 height: 41px;
2556 margin: 4px 0;
2557 width: 100%;
2558 float: none;
2559 padding: 0 5px;
2560 .border_radius(4px);
2561 .box_shadow(inset 0 1px 1px rgba(0,0,0,0.15));
2562 }
2563
2564 input[type="checkbox"] {
2565 height: 20px;
2566 width: auto;
2567 }
2568
2569 label {
2570 font-size: 12px;
2571 }
2572
2573 button#login {
2574 margin-top: 8px;
2575 width: 120px;
2576 }
2577
2578 #register {
2579 width: 100%;
2580 margin: auto;
2581 background: #f5f5f5;
2582 padding: 10px;
2583 border-radius: 5px;
2584 /*@media(max-width:800px){
2585 max-height: 400px;
2586 overflow-y: auto;
2587 }*/
2588
2589 /*@media(max-width:550px){
2590
2591 max-height: 300px;
2592 overflow-y: auto;
2593 }*/
2594
2595 /*@media(max-width:350px){
2596
2597 max-height: 200px;
2598 overflow-y: auto;
2599 }*/
2600 h3 {
2601 text-align: center;
2602 font-weight: 400;
2603 position: relative;
2604 margin: 10px 0 13px 0;
2605 }
2606
2607 #register-box {
2608 padding-left: 0;
2609 padding-right: 0;
2610 min-height: 373px;
2611
2612 #register-form-box {
2613 background-color: white;
2614 margin-bottom: 0;
2615 width: 373px;
2616 }
2617 }
2618
2619 #social-register {
2620 padding-top: 20px;
2621 padding-right: 15px;
2622 padding-left: 30px;
2623 float: right;
2624
2625 #social-login-elements {
2626 margin-bottom: 91px;
2627 }
2628
2629 > div {
2630 float: left;
2631 width: 100%;
2632 }
2633
2634 form {
2635
2636 button {
2637 background-image: url(../img/bg_sheet.png);
2638 font-size: 14px;
2639 display: block;
2640 font-weight: 300;
2641 color: white;
2642 width: 140px;
2643 height: 41px;
2644 margin: 0;
2645 border: none;
2646 text-align: left;
2647 text-indent: 10px;
2648 padding-left: 41px;
2649 }
2650
2651 button.facebook {
2652 background-position: 0 -189px;
2653 margin-top: 4px;
2654 }
2655
2656 button.twitter {
2657 background-position: 0 -232px;
2658 margin-top: 7px;
2659 }
2660
2661 }
2662
2663 .bottom {
2664
2665 .small {
2666 margin-bottom: 6px;
2667 text-align: center;
2668 }
2669
2670 .login2 a {
2671 width: 100%;
2672 }
2673
2674 }
2675
2676 }
2677 }
2678
2679 #login-form-box {
2680 background-color: white;
2681 margin-bottom: 0;
2682 position: absolute;
2683 top: 0;
2684 bottom: 0;
2685 }
2686
2687 }
2688
2689 #thumbs {
2690 z-index: -1;
2691 width: 100%;
2692 min-height: 1000px;
2693 overflow: hidden;
2694 position: relative;
2695 background: rgba(0,0,0,1);
2696
2697 div.thumb {
2698 width: 5.5555%;
2699 max-height: 100px;
2700 padding: 0;
2701 /*height: auto;*/
2702 float: left;
2703 background: rgba(0,0,0,0.8);
2704
2705 a {
2706 float: left;
2707 width: 100%;
2708 height: auto;
2709 display: block;
2710 position: relative;
2711
2712 > span {
2713 width: 100%;
2714 height: 100%;
2715 display: block;
2716 position: absolute;
2717 top: 0;
2718 left: 0;
2719 background: rgba(0,0,0,0.8);
2720 -webkit-transition: all 0.2s ease-out;
2721 -moz-transition: all 0.2s ease-out;
2722 -ms-transition: all 0.2s ease-out;
2723 -o-transition: all 0.2s ease-out;
2724 }
2725
2726 img {
2727 width: 100%;
2728 height: auto;
2729 }
2730 }
2731
2732 }
2733
2734 }
2735
2736 }
2737
2738 .login-popup {
2739 position: relative;
2740 background: white;
2741 padding: 0;
2742 width: 420px;
2743 margin: 0 auto;
2744
2745 .login-popup-form {
2746 background: #fff;
2747 border-radius: 10px;
2748 padding: 20px;
2749 float: left;
2750 margin: 0;
2751 width: 440px;
2752
2753 .login-form-container {
2754 position: relative;
2755
2756 form {
2757 margin: 0;
2758
2759 input,
2760 textarea,
2761 select {
2762 border: 1px solid #bdc3c7;
2763 padding: 0;
2764 border-radius: 5px;
2765 }
2766
2767 .inputbox {
2768 border: 1px solid #eaedf2;
2769 border-radius: 3px;
2770 height: 40px;
2771 padding: 10px 0 10px 32px;
2772 width: 100%;
2773 outline: none;
2774 margin-bottom: 10px;
2775 font-family: inherit;
2776 }
2777
2778 .email {
2779 background: #eaedf2 url(../img/email.png) 10px 15px no-repeat;
2780 }
2781
2782 .password {
2783 background: #eaedf2 url(../img/password.png) 10px 10px no-repeat;
2784 }
2785
2786 .container-checkbox-remember-me {
2787 height: 20px;
2788 clear: both;
2789 margin-bottom: 10px;
2790
2791 input {
2792 height: 20px;
2793 margin: 0 5px;
2794 float: left;
2795 width: auto;
2796 }
2797
2798 label {
2799 display: inline-block;
2800 font-weight: bold;
2801 font-size: 13px;
2802 float: left;
2803 }
2804
2805 }
2806
2807
2808
2809 }
2810 }
2811
2812 .login-form-links {
2813 position: absolute;
2814 bottom: 10px;
2815 right: 20px;
2816 font-size: 13px;
2817
2818 a {
2819 font-size: 13px;
2820 }
2821 }
2822
2823 }
2824
2825 p {
2826 font-size: 15px;
2827 margin-bottom: 0;
2828 text-align: left;
2829 }
2830
2831 .social {
2832 margin: 20px 0 15px;
2833
2834 a {
2835 color: #fff;
2836 text-decoration: none;
2837 font-weight: bold;
2838 border-radius: 4px 4px 4px 4px;
2839 margin-right: 10px;
2840 float: left;
2841 height: 40px;
2842 }
2843 }
2844
2845
2846 }
2847
2848 /** /REGISTER **/
2849
2850 /** USER ADMIN PAGE **/
2851
2852 .user-admin-page {
2853 position: relative;
2854
2855 .head-wrap {
2856 padding-top: 1em;
2857 height: auto;
2858 background-size: cover;
2859 position: relative;
2860 padding-bottom: 1.9em;
2861
2862 .about-me-header {
2863 figure {
2864 width: 6.9em;
2865 height: 6.9em;
2866 padding: .3em;
2867 border: 1px solid #dbdbdb;
2868 background: white;
2869 position: absolute;
2870 z-index: 10;
2871 .border_radius(999px);
2872
2873 img {
2874 width: 100%;
2875 height: 100%;
2876 .border_radius(999px);
2877 }
2878 }
2879
2880 .user-menu {
2881 position: relative;
2882 height: auto;
2883 background: white;
2884 float: left;
2885 margin-top: 1.5em;
2886 padding: .5em 2em .5em 8em;
2887 .border_radius(50px 0 0 50px);
2888
2889 .intro {
2890 margin-top: 0;
2891 }
2892 }
2893
2894 }
2895 }
2896
2897 .body-wrap {
2898 background: white;
2899 position: relative;
2900
2901 .product-page {
2902 padding-top: 1em;
2903 }
2904 /*
2905 ul.nav-tabs {
2906
2907 li {
2908
2909 a {
2910 padding: .7em 1em;
2911 font-size: .9em;
2912 height: 2.95em;
2913 color: #2673b0;
2914
2915 &.active {
2916 color: #21659b;
2917 }
2918 }
2919 }
2920 }
2921 */
2922 }
2923
2924 .my-products-page, .my-payments-page {
2925 padding-bottom: 2em;
2926
2927 span.payouthistory-icon
2928 {
2929 width: 15px;
2930 height: 15px;
2931 background-image: url(../img/line-chart.svg);
2932 background-size: 13px;
2933 background-position: bottom left;
2934 cursor: pointer;
2935 background-repeat: no-repeat;
2936 float: left;
2937 }
2938 .my-products-heading {
2939 padding-bottom: 20px;
2940 margin-bottom: 20px;
2941 margin-top: 20px;
2942 border-bottom: 1px solid #c1c1c1;
2943 float: left;
2944 width: 100%;
2945
2946 .num-products {
2947 margin-top: 35px;
2948 }
2949 }
2950
2951 .my-products-list {
2952 float: left;
2953 width: 100%;
2954 }
2955
2956 .my-product-item {
2957 margin-bottom: 20px;
2958
2959 figure {
2960 height: auto;
2961 padding: 0;
2962
2963 img.explore-product-image {
2964 width: 101px;
2965 height: auto;
2966 padding-top: 10px;
2967 }
2968 }
2969
2970 article {
2971
2972 >div {
2973 float: left;
2974 width: 100%;
2975 }
2976
2977 .title {
2978 margin-bottom: 10px;
2979
2980 h3 {
2981 margin: 0;
2982 padding: 0;
2983 }
2984 }
2985
2986 .info {
2987 ul {
2988 list-style-type: none;
2989 padding: 0;
2990 margin: 0;
2991
2992 li {
2993 float: left;
2994 width: auto;
2995 font-size: 12px;
2996
2997 span+span {
2998 margin-left: 5px;
2999 font-weight: bold;
3000 }
3001 }
3002
3003 li + li {
3004 margin-left: 15px;
3005 }
3006 }
3007 }
3008
3009 .text {
3010 font-size: 12px;
3011 margin: 5px 0 10px 0;
3012
3013 p {
3014 margin: 0;
3015 }
3016 }
3017
3018
3019 .buttons {
3020 a.btn.btn-native {
3021 color: white;
3022 font-size: 12px;
3023 padding: 3px 6px;
3024 }
3025 a.btn.pling-danger{
3026 background-color: #C82333;
3027 }
3028 }
3029 }
3030 }
3031
3032 .my-product-divider {
3033 border-bottom: 1px solid rgb(193, 193, 193);
3034 margin-bottom: 20px;
3035 width: 97%;
3036 margin-left: 15px;
3037 }
3038
3039 #my-earnings-list {
3040
3041 ul.nav-tabs {
3042 top: 0;
3043 position: relative;
3044 margin: 0;
3045 border-radius: 5px 5px 0 0;
3046 padding: 10px;
3047 padding-bottom: 0;
3048
3049 > li {
3050
3051 > a {
3052 padding: .7em 1em;
3053 font-size: .9em;
3054 height: 2.95em;
3055 color: #2673b0;
3056 }
3057 }
3058 }
3059
3060 #my-earnings-tabs {
3061 padding: 10px;
3062 border: 1px solid #ddd;
3063 border-radius: 0 0 5px 5px;
3064
3065 .tab-pane {
3066 font-weight: bold;
3067
3068 .row {
3069 margin: 0;
3070
3071 h3 {
3072 margin: 5px 0;
3073 }
3074 }
3075 }
3076 }
3077
3078 }
3079
3080 }
3081
3082 }
3083
3084 .modal-ppload {
3085
3086 .content-modal {
3087 width: 950px;
3088 }
3089 }
3090
3091 /** /USER ADMIN PAGE **/
3092
3093 /** MEMENER PAGE **/
3094
3095 .about-me-page {
3096
3097 div.catgroupseperator
3098 {
3099 display: block;
3100 line-height: 80px;
3101 font-size: 20px;
3102 clear: both;
3103 color: #777;
3104 }
3105
3106 .my-fav-list{
3107 width: 100%;
3108 .totaldownloads{
3109 margin:0;
3110 padding: 20px;
3111 text-align: right;
3112 }
3113 .smaller{
3114 font-size: smaller;
3115 }
3116 .row{
3117 border-bottom:1px solid #ccc;
3118 padding-top:15px;
3119 padding-bottom:15px;
3120 }
3121
3122 .rating{
3123 width: 80px !important;
3124 font-size: 10pt;
3125 }
3126 .downloadhistory-image{
3127 width: 50px;
3128 height: 50px;
3129 float: left;
3130 margin-right: 15px;
3131 }
3132 .nowrap{
3133 white-space: nowrap;
3134 }
3135 i.voteup{
3136 color: #409540;
3137 font-size: 20px;
3138 padding-left:5px;
3139 padding-right:5px;
3140 }
3141 i.votedown{
3142 color: #C9302C;
3143 font-size: 20px;
3144 padding-left:5px;
3145 padding-right:5px;
3146 }
3147
3148 .newusers{
3149
3150 .u-wrap{
3151 float: left;
3152 width: 100%;
3153 padding: 0.3em;
3154 border: 0.35em solid #dee0e0;
3155 border-radius: 5px;
3156 height: 14em;
3157 margin-bottom: 1em;
3158 background: white;
3159 width: 115px;
3160 height: 200px;
3161 margin-right: 10px;
3162 -webkit-transition: all 0.2s ease-out;
3163 -moz-transition: all 0.2s ease-out;
3164 -ms-transition: all 0.2s ease-out;
3165 -o-transition: all 0.2s ease-out;
3166 position: relative;
3167 figure img{
3168 width: 100%;
3169 border: 1px solid #dbdbdb;
3170 -webkit-border-radius: 999px;
3171 -moz-border-radius: 999px;
3172 border-radius: 999px;
3173 -webkit-background-clip: padding-box;
3174 -moz-background-clip: padding;
3175 background-clip: padding-box;
3176
3177 }
3178 h3{
3179 font-size: 13px;
3180 font-weight: bold;
3181 word-wrap: break-word;
3182 line-height: 20px;
3183 height: 20px;
3184 padding: 0;
3185 margin: 0;
3186 }
3187 div.small {
3188 font-size: 13px;
3189 color: #444;
3190 position: absolute;
3191 bottom: 5px;
3192 right: 5px;
3193 img.plingactivesmall{
3194 width: 20px;
3195 height:20px;
3196 }
3197 .cntplings{
3198 line-height: 20px;
3199 }
3200 }
3201
3202 }
3203 }
3204 }
3205
3206 > .head-wrap {
3207 padding-top: 1em;
3208 height: auto;
3209 background-size: cover;
3210 position: relative;
3211 padding-bottom: 1em;
3212
3213 .page-title {
3214 height: 3em;
3215 position: relative;
3216 margin-bottom: 2em;
3217 margin-top: 2em;
3218
3219 .center {
3220 position: absolute;
3221 top: 0;
3222 left: 0;
3223 width: 100%;
3224 height: 3em;
3225 text-align: center;
3226
3227 > div {
3228 background: #f6f6f6;
3229 width: auto;
3230 display: table;
3231 float: none;
3232 margin: 0 auto;
3233
3234 > h1 {
3235 margin: 0 0.5em;
3236 }
3237 }
3238 }
3239
3240 hr {
3241 margin-top: 20px;
3242 margin-bottom: 20px;
3243 border: 0;
3244 border-top: 1px solid #eee;
3245 border-bottom: 1px solid white;
3246 float: left;
3247 width: 100%;
3248 }
3249 }
3250 }
3251
3252 .header {
3253 height: auto;
3254 position: relative;
3255 margin-bottom: 3em;
3256
3257 > div.col-lg-8 {
3258 padding-right: 5px;
3259 padding-left: 0;
3260 }
3261
3262 > div.col-lg-4 {
3263 padding-right: 0;
3264 padding-left: 5px;
3265 }
3266 .about {
3267 display: none;
3268
3269 .well {
3270 background-color: white;
3271 padding: 1em;
3272 height: 22.5em;
3273
3274 h2 {
3275 font-size: 1.4em;
3276 margin: 0;
3277 min-height: 1.4em;
3278 line-height: 1.2em;
3279 border-bottom: 1px solid #dbdbdb;
3280 font-weight: normal;
3281 }
3282
3283 article {
3284 border-top: 1px solid #f5f5f5;
3285 padding-top: 0.5em;
3286 width: 100%;
3287 float: left;
3288 overflow: hidden;
3289 height: 18.5em;
3290
3291 > .scroll-pane {
3292 height: 18em;
3293 }
3294 }
3295
3296 }
3297
3298 }
3299
3300 .summary {
3301 float: none;
3302 margin: 0 auto;
3303
3304 article {
3305 padding: 0;
3306 background-color: white;
3307 height: auto;
3308 float: left;
3309
3310 .about-title {
3311 padding: 1em;
3312 height: 8.9em;
3313 padding-left: 8.9em;
3314 position: relative;
3315 background: rgba(246, 246, 246, 0.45);
3316 border-bottom: 1px solid #e1e1e1;
3317 float: left;
3318 width: 100%;
3319 position:relative;
3320 figure {
3321 width: 6.9em;
3322 height: 6.9em;
3323 padding: 0.3em;
3324 border: 1px solid #dbdbdb;
3325 background: white;
3326 position: absolute;
3327 top: 1em;
3328 left: 1em;
3329 display:inline-block;
3330 .border_radius(999px);
3331
3332 img {
3333 width: 100%;
3334 height: 100%;
3335 .border_radius(999px);
3336 }
3337
3338 }
3339 .btnSupportMe
3340 {
3341 position:absolute;
3342 right: 0;
3343 top:0;
3344 }
3345
3346 .supporter-badge{
3347 position: absolute;
3348 left: 0px;
3349 bottom: 0px;
3350 background: #EE6E09;
3351 text-align: center;
3352 /*border-radius: 30px 30px 30px 30px;*/
3353 color: #fff;
3354 /*padding: 5px 10px;*/
3355 font-size: 16px;
3356 border-radius: 999px;
3357 padding: 5px 5px;
3358 &.inactive{
3359 background: #ccc;
3360 }
3361 }
3362 .mod-badge{
3363 display: block;
3364 text-align: center;
3365 padding-top: 3px;
3366 font-size: small;
3367 }
3368
3369 h1 {
3370 margin: 1.5em 0 0 0;
3371 font-size: 1.5em;
3372 min-height: 1.7em;
3373 line-height: 1em;
3374 }
3375 }
3376
3377 .about-content {
3378 padding: 1em;
3379 float: left;
3380
3381 > div {
3382 float: left;
3383 width: 100%;
3384
3385 span {
3386 float: left;
3387 display: block;
3388 line-height: 1.25em;
3389 }
3390
3391 span.glyphicon {
3392 color: #939292;
3393 margin-right: 0.25em;
3394 font-size: 1.25em;
3395 }
3396
3397 span + span {
3398 line-height: 1.65em;
3399 }
3400
3401 &.social-icons {
3402
3403 a {
3404 font-size: 1.35em;
3405 height: 1em;
3406 width: 1em;
3407 display: block;
3408 float: left;
3409
3410 img {
3411 width: 100%;
3412 height: 100%;
3413 vertical-align: top;
3414 }
3415 }
3416
3417 a + a {
3418 margin-left: 0.25em;
3419 }
3420 }
3421 }
3422
3423 div + div {
3424 margin-top: 0.25em;
3425 }
3426 }
3427
3428 .about-footer {
3429 float: left;
3430 width: 100%;
3431 padding: 1em;
3432
3433 .info-div {
3434 width: 100%;
3435 float: left;
3436 }
3437
3438 .info-div + .info-div {
3439 margin-top: 5px;
3440 }
3441
3442 .social-share {
3443
3444 .social + .social {
3445 margin-left: 0.5em;
3446 }
3447 }
3448
3449
3450
3451 > .pull-right {
3452
3453 em.report-icon {
3454 height: 1.5em;
3455 width: 1.5em;
3456 margin-top: 0.5em;
3457 background-size: cover;
3458 }
3459 }
3460 }
3461 }
3462 }
3463 }
3464
3465 .about-me-details {
3466 padding-left: 0;
3467 padding-right: .5em;
3468
3469 .tab-content{
3470 padding-top: 20px;
3471 }
3472
3473 h3.about-me-heading {
3474 font-size: 1.5em;
3475 margin: 0;
3476 min-height: 1.9em;
3477 line-height: 1.9em;
3478 border-bottom: 1px solid #dbdbdb;
3479 font-weight: normal;
3480 }
3481
3482 article {
3483 padding-top: 0.5em;
3484 padding-bottom: 1.5em;
3485 width: 100%;
3486 float: left;
3487 }
3488
3489
3490 .my-products-list {
3491
3492 h3 {
3493 width: 100%;
3494 margin-bottom: 20px;
3495 }
3496
3497 .cat-title {
3498 padding: 0 5px;
3499 position: relative;
3500 height: 2em;
3501 margin-bottom: 1em;
3502 margin-top: 1.1em;
3503
3504 > div {
3505 position: absolute;
3506 top: 0;
3507 left: 1em;
3508 background: white;
3509 height: 2em;
3510 width: auto;
3511 padding: 0 0.5em;
3512
3513 > h2 {
3514 margin: 0;
3515 }
3516 }
3517
3518 hr {
3519 float: left;
3520 width: 100%;
3521 margin-top: 1em;
3522 margin-bottom: 1em;
3523 border-bottom: 1px solid #F9F9F9;
3524 }
3525 }
3526 .mini-card {
3527 width: 14.28571%;
3528 margin-bottom: 10px;
3529
3530 p {
3531 img {
3532 vertical-align: baseline;
3533 }
3534 }
3535 }
3536 }
3537
3538
3539
3540
3541 }
3542
3543 aside {
3544
3545 .details {
3546 float: left;
3547 width: 100%;
3548 height: auto;
3549 padding: 0.5em;
3550
3551 h3 {
3552 line-height: 2em;
3553 font-size: 1em;
3554 margin: 0;
3555 color: #a3a2a2;
3556 border-bottom: 1px solid #e1e1e1;
3557 }
3558
3559 .box-content {
3560 padding: 0.5em 0 0 0;
3561 border-top: 1px solid #ededed;
3562
3563 > div {
3564 width: 100%;
3565 float: left;
3566 height: auto;
3567 margin-top: 0.5em;
3568
3569 .label {
3570 float: left;
3571 padding: 0;
3572 min-height: 1.5em;
3573 line-height: 1.3em;
3574 img.accounts_icon
3575 {
3576 padding-top:2px;
3577 width: 20px;
3578
3579 }
3580 em, span {
3581 font-size: 1.7em;
3582 float: left;
3583 display: inline-block;
3584 color: #AAA;
3585 }
3586
3587 em {
3588 display: block;
3589 width: 1em;
3590 height: 1em;
3591 background-size: cover;
3592
3593 &.fb-link {
3594 background-image: url('../img/social_icons/fb.png');
3595 background-size: 100%;
3596 background-repeat: no-repeat;
3597 background-position: center;
3598 }
3599
3600 &.tw-link {
3601 background-image: url('../img/social_icons/tw.png');
3602 background-size: 100%;
3603 background-repeat: no-repeat;
3604 background-position: center;
3605 }
3606
3607 &.gp-link {
3608 background-image: url('../img/social_icons/g_plus.png');
3609 background-size: 100%;
3610 background-repeat: no-repeat;
3611 background-position: center;
3612 }
3613
3614 &.gt-link {
3615 background-image: url('../img/social_icons/github.png');
3616 background-size: 100%;
3617 background-repeat: no-repeat;
3618 background-position: center;
3619 }
3620
3621 &.email-link {
3622 background-image: url('../img/email.png');
3623 background-size: 100%;
3624 background-repeat: no-repeat;
3625 background-position: center;
3626 }
3627
3628 }
3629
3630 }
3631
3632 .text {
3633 width: 90%;
3634 float: right;
3635 font-size: 1em;
3636 min-height: 1.5em;
3637 line-height: 1.3em;
3638 }
3639 }
3640 }
3641 }
3642 }
3643 }
3644
3645 /**-- MINI CARDS --**/
3646
3647 .mini-card {
3648 padding: 0 2px;
3649 width: 14.28571%;
3650 margin-bottom: 10px;
3651
3652 .u-wrap {
3653 float: left;
3654 width: 100%;
3655 border: 2px solid #DEE0E0;
3656 .border_radius(5px);
3657 height: 15em;
3658 margin-bottom: 4px;
3659 background: white;
3660 .transition();
3661
3662 a {
3663 float: left;
3664 width: 100%;
3665 height: 100%;
3666 display: block;
3667 position: relative;
3668 }
3669
3670 figure {
3671 width: 100%;
3672 float: left;
3673 height: 120px;
3674
3675 img {
3676 width: 100%;
3677 height: 120px;
3678 .border_radius(3px 3px 0 0);
3679 }
3680 }
3681
3682 .rating {
3683 font-size: 11px;
3684 position: absolute;
3685 right: 10px;
3686 bottom: 10px;
3687 }
3688
3689 .u-content {
3690 width: 100%;
3691 float: left;
3692 padding: 3px;
3693 height: 5.5em;
3694 position: relative;
3695 overflow: hidden;
3696
3697 .productCategory {
3698 color: #4e4e4e;
3699 display: block;
3700 font-size: 11px;
3701 }
3702
3703 > h3 {
3704 font-size: 12px;
3705 word-wrap: break-word;
3706 width: 100%;
3707 margin: 2px 0 4px 0;
3708 }
3709
3710 > p {
3711 font-size: 15px;
3712 position: absolute;
3713 bottom: 0;
3714 right: 3px;
3715 width: 100%;
3716 margin: 0;
3717 color: black;
3718 font-weight: bold;
3719 text-align: right;
3720 color: #444;
3721 }
3722 }
3723
3724 &:hover {
3725 border-color:#DEE0E0;
3726 background: rgba(246,246,246,1);
3727
3728 figure {
3729 background: white;
3730 }
3731 }
3732 }
3733
3734 @media(max-width:800px){
3735 width: 16.6666667%;
3736
3737 .u-wrap {
3738 height:12em;
3739 }
3740 }
3741
3742 @media(max-width:550px){
3743 width: 20%;
3744
3745 .u-wrap {
3746 height: 14em;
3747 }
3748 }
3749
3750 @media(max-width:350px){
3751 width: 33.333333%;
3752
3753 .u-wrap {
3754 height:16em;
3755 }
3756 }
3757 }
3758
3759 .product-card {
3760 width: 10%;
3761 height: auto;
3762 padding: 0 3px;
3763 margin-bottom: 10px;
3764 height: auto;
3765
3766 > a {
3767 display: block;
3768 float: left;
3769 width: 100%;
3770 height: auto;
3771 //height: 100%;
3772 position: relative;
3773
3774 .card {
3775 //width: 100%;
3776 //height: 100%;
3777 //position: absolute;
3778 //padding-top: 3px;
3779
3780 > .border {
3781 position: absolute;
3782 top: 0;
3783 left: 0;
3784 width: 100%;
3785 //height: 3px;
3786 background-color: @newblue;
3787 }
3788
3789 > .p-wrap {
3790 width: 100%;
3791 height: 8.25em;
3792 border: 2px solid #c5ced5;
3793 //border-top: 0;
3794 background-color: white;
3795 .border_radius(5px);
3796
3797 > figure {
3798 width: 100%;
3799 height: 3.5em;
3800 overflow: hidden;
3801 display: block;
3802 float: left;
3803 border-bottom:1px solid #c5ced5;
3804
3805 > img {
3806 height: 100%;
3807 width: 100%;
3808 }
3809 }
3810
3811 > .content {
3812 width: 100%;
3813 float: left;
3814 padding: 0.25em;
3815 font-size: 1em;
3816 height: 3.5em;
3817
3818 > h3 {
3819 font-size: .7em;
3820 margin: 0;
3821 color: #34495e;
3822 display: block;
3823 width: 100%;
3824 height: 100%;
3825 overflow: hidden;
3826 word-break: break-word;
3827 }
3828 }
3829
3830 > .footer {
3831 float: left;
3832 width: 100%;
3833 height: 1em;
3834 line-height: 1em;
3835 font-size: 1em;
3836 text-align: right;
3837 padding: 0 0.1em;
3838 background-color: #f5f5f5;
3839 .border_radius(3px);
3840 //border-top: 1px solid #c5ced5;
3841
3842 > p {
3843 font-weight: bold;
3844 font-size: 0.75em;
3845 color: #a7a7a7;
3846 }
3847 }
3848 }
3849 }
3850
3851 > .empty-card {
3852 width: 100%;
3853 //height: 100%;
3854 }
3855 }
3856
3857 @media(max-width:800px){
3858 width: 16.6666667%;
3859 }
3860
3861 @media(max-width:550px){
3862 width: 20%;
3863 }
3864
3865 @media(max-width:350px){
3866 width: 33.333333%;
3867 }
3868 }
3869
3870 /**-- MINI CARDS --**/
3871
3872 /** /MEMBER PAGE **/
3873
3874 /** ADD PRODUCT PAGE **/
3875
3876 .wizard {
3877 > .content {
3878 > .body {
3879 position: inherit;
3880
3881 input.error,
3882 select.error,
3883 textarea.error {
3884 background: none repeat scroll 0 0 #fbe3e4;
3885 border: 1px solid #fbc2c4;
3886 color: #8a1f11;
3887 }
3888 }
3889 }
3890
3891 > .steps {
3892
3893 li {
3894
3895 a {
3896 background: #eee none repeat scroll 0 0;
3897 color: #aaa;
3898 cursor: default;
3899
3900 &:hover {
3901 cursor: pointer;
3902 }
3903 }
3904 }
3905
3906 > ul {
3907
3908 > li {
3909 width: 20%;
3910 }
3911 }
3912 }
3913
3914 }
3915
3916 /** STEP 1 **/
3917
3918 .add-product-top {
3919 width: 100%;
3920 margin: 20px 0 100px 0;
3921 padding: 0 15px;
3922
3923 h1 {
3924 margin-bottom: 0;
3925 font-size: 2em;
3926 }
3927
3928 ul.steps {
3929 width: auto;
3930 margin-bottom: 0;
3931
3932 li {
3933 float: left;
3934 display: inline-block;
3935 list-style: none;
3936 margin: 0;
3937 color: #bdc3c7;
3938 border-bottom: 2px solid #bdc3c7;
3939 padding: 1em 2.5em;
3940 font-size: 1em;
3941 width: auto;
3942 }
3943
3944 li.active {
3945 color: @newblue;
3946 border-bottom: 2px solid @newblue;
3947 }
3948 }
3949 }
3950
3951 .add-product-container {
3952 padding-bottom: 40px;
3953
3954 > form {
3955 width: 50%;
3956 margin: 0 auto;
3957
3958 .field {
3959
3960 label {
3961 width: 100%;
3962 }
3963
3964 input, textarea {
3965 width: 100%;
3966 }
3967
3968 select {
3969 height: 35px;
3970 width: 48%;
3971 }
3972
3973 select + select {
3974 float: right;
3975 }
3976 }
3977
3978 button + button {
3979 margin-right: 10px;
3980 }
3981 }
3982 }
3983
3984 .add-product-form {
3985 margin: auto;
3986 }
3987
3988 .mandatory {
3989 top: 2px;
3990 left: -240px;
3991 width: 220px;
3992 text-align: right;
3993 }
3994
3995 .bold-font {
3996 font-size: 18px;
3997 font-weight: bold;
3998 }
3999
4000 .field-missing-container {
4001 top: 26px;
4002 right: -240px;
4003 width: 230px;
4004 }
4005
4006 .field-missing-left {
4007 margin-top: 6px;
4008 float: left;
4009 width: 8px;
4010 height: 22px;
4011 background: url(../img/field-missing-left.png);
4012 }
4013
4014 .field-missing {
4015 float: left;
4016 background: #fadbd8;
4017 border-radius: 5px;
4018 color: #e74c3c;
4019 padding: 12px;
4020 max-width: 190px;
4021 word-break: normal;
4022 word-wrap: break-word;
4023 }
4024
4025 .add-more {
4026 right: 10px;
4027 }
4028
4029 a.add-more:hover {
4030 text-decoration: underline;
4031 }
4032
4033 .icon-plus {
4034 margin-left: 5px;
4035 width: 15px;
4036 height: 15px;
4037 background: url(../img/icon-plus.png);
4038 }
4039
4040 .product-gallery {
4041 margin-bottom: 30px;
4042
4043 .product-image {
4044 float: left;
4045 margin: 5px 5px 0 0;
4046
4047 img {
4048 max-width: 110px;
4049 max-height: 110px;
4050 overflow: hidden;
4051 border-radius: 5px;
4052 border: 3px solid @newblue;
4053
4054 &:hover {
4055 border: 3px solid #bdc3c7;
4056 }
4057 }
4058
4059 .image {
4060 width: 110px;
4061 height: 77px;
4062 overflow: hidden;
4063 border-radius: 5px;
4064 border: 3px solid @newblue;
4065 background-size: 110px;
4066 background-position: center center;
4067 }
4068 .image:hover {
4069 border: 3px solid #bdc3c7;
4070 }
4071 .icon-check {
4072 width: 20px;
4073 height: 20px;
4074 background: url(../img/icon-check.png);
4075 }
4076
4077 .icon-cross {
4078 display: none;
4079 width: 20px;
4080 height: 20px;
4081 background: url(../img/icon-cross.png);
4082 right: 0;
4083 cursor: pointer;
4084 }
4085 }
4086
4087 .upload-image-container {
4088
4089 .upload-image {
4090 float: left;
4091 cursor: pointer;
4092 width: 116px;
4093 height: 83px;
4094 background: url(../img/icon-upload.png);
4095 background-position: 0px -15px;
4096 margin: 5px 0 0 -5px;
4097 .border_radius(10px);
4098 }
4099
4100 .upload-image:hover {
4101 background: url(../img/icon-upload-hover.png);
4102 background-position: 0px -15px;
4103 }
4104 }
4105 }
4106
4107 input.product-picture,
4108 input.title-picture,
4109 input.gallery-picture {
4110 opacity: 0;
4111 margin-bottom: 0;
4112 height: 0;
4113 width: 0;
4114 position: absolute;
4115 }
4116
4117 #product-picture-container,
4118 #title-picture-container {
4119 max-width: 110px;
4120 max-height: 110px;
4121 overflow: hidden;
4122 }
4123
4124 img#product-picture-preview,
4125 img#title-picture-preview {
4126 display: none;
4127 margin-top: 20px;
4128 }
4129
4130 #embed-code {
4131 margin-top: 20px;
4132 }
4133
4134 /** /STEP 1 **/
4135
4136 /** /STEP 2 **/
4137
4138 .add-page-preview {
4139
4140 background: rgba(46, 49, 51, 0.8);
4141 color: white;
4142 position: fixed;
4143 margin-top: 0;
4144 width: 100%;
4145 z-index: 1;
4146
4147 > .container {
4148 padding-bottom: 20px;
4149 }
4150
4151 .add-product-mid {
4152
4153 > .left {
4154 width: 100%;
4155 }
4156 }
4157 }
4158
4159 .preview-container > .row-fluid {
4160 margin-top: 220px;
4161 }
4162
4163 .preview-title {
4164 font-size: 18px;
4165 margin: 0 60px 0 15px;
4166 padding-top: 15px;
4167 }
4168
4169 .preview-explanation {
4170 padding-top: 18px;
4171 }
4172
4173 .add-page-preview .add-product-top {
4174 border-bottom: 1px solid #393d3f;
4175 margin-bottom: 10px;
4176 }
4177
4178 .add-page-preview ul.steps {
4179 margin-bottom: 0;
4180 }
4181
4182 .paypal-label {
4183 font-size: 17px;
4184 margin: 15px 60px 0 30px;
4185 }
4186
4187 .icon-paypal {
4188 width: 40px;
4189 height: 40px;
4190 background: url(../img/icon-paypal.png);
4191 margin: -10px 30px 0 0;
4192 }
4193
4194 .preview-inputs {
4195 padding: 10px 0;
4196 border-bottom: 1px solid #393d3f;
4197 }
4198
4199 .preview-buttons {
4200 padding: 20px 0 0 0;
4201 }
4202
4203 .preview-buttons .btn.right {
4204 margin-left: 10px;
4205 }
4206
4207 input.preview-input {
4208 margin-left: 20px;
4209 width: 250px;
4210 height: 35px;
4211 }
4212
4213 /** /STEP 2 **/
4214
4215 /** /ADD PRODUCT PAGE **/
4216
4217 /** SETTINGS PAGE **/
4218
4219 .settings-page {
4220 > .about-me {
4221 float: left;
4222 width: 100%;
4223 margin-bottom: 40px;
4224 }
4225
4226 .settings-options {
4227 padding: 0;
4228 }
4229 }
4230
4231 /** main settings panel **/
4232
4233 .settings-main {
4234 padding-right: 0;
4235 margin-bottom: 40px;
4236
4237 .panel {
4238
4239 .panel-heading {
4240 position: relative;
4241
4242 h4 {
4243
4244 a {
4245 font-size: 1.2em;
4246 padding: 0.5em 0.5em;
4247
4248 &:hover {
4249 text-decoration:none;
4250 color: @newblue;
4251 }
4252 }
4253 }
4254
4255 span.glyphicon-chevron-down {
4256 position: absolute;
4257 top: 50%;
4258 margin-top: -0.5em;
4259 right: 0.5em;
4260 .rotate(0deg);
4261 .transition();
4262 }
4263
4264 &.active {
4265
4266 span.glyphicon-chevron-down {
4267 .rotate(180deg);
4268 }
4269 }
4270 }
4271
4272 .panel-body {
4273 padding: 0.5em;
4274
4275 > form {
4276 padding: 0.5em;
4277 margin-bottom: 0;
4278
4279 > .row {
4280
4281 > div {
4282
4283 input[type="text"],
4284 input[type="password"],
4285 textarea {
4286 width: 100%;
4287 padding: 0 5px;
4288 }
4289
4290 textarea.about {
4291 padding: 0.5em 1em 0.5em 0.5em;
4292 }
4293 }
4294
4295 .btn.pull-right {
4296 margin-right: 15px;
4297 }
4298
4299 }
4300
4301 > hr {
4302 margin-top: 1em;
4303 margin-bottom: 1em;
4304 border: 0;
4305 border-top: 1px solid #eee;
4306 border-bottom: 1px solid white;
4307 }
4308 }
4309 }
4310 }
4311
4312 ul.errors, ul li.text-error {
4313 color: #b94a48;
4314 list-style-type: none;
4315 font-size: 0.8em;
4316 padding: 0;
4317 display: inline-block;
4318 }
4319
4320 input.input-error, textarea.input-error {
4321 border: 1px solid #b94a48;
4322 }
4323
4324 .form-success {
4325 color: #48B96C;
4326 }
4327
4328 .section-body {
4329 padding: 15px 15px 0 15px;
4330 display: none;
4331 border-bottom: 1px solid #bdc3c7;
4332
4333 .row:last-of-type {
4334 margin: 0 0 15px 0;
4335 }
4336
4337 hr {
4338 display: block;
4339 height: 0;
4340 border-top: 1px solid #bdc3c7;
4341 padding: 0 1em;
4342 width: 100%;
4343 margin: 10px 0 20px -15px;
4344 }
4345
4346 .row,
4347 .field {
4348
4349 input[type="text"],
4350 input[type="password"],
4351 textarea {
4352 width: 100%;
4353 }
4354 }
4355 }
4356
4357 #form-profile {
4358
4359 textarea.about {
4360 height: 228px;
4361 }
4362 }
4363
4364 #form-picture,#form-picture-background {
4365
4366 .image-preview {
4367 display: block;
4368 padding: 0px;
4369 margin: 10px auto;
4370 width: 100%;
4371 max-width: 200px;
4372 height: auto;
4373
4374 > img {
4375 width: 100%;
4376 height: auto;
4377 }
4378 }
4379
4380 .image-info {
4381 margin: 22px 0 0 -20px;
4382 padding: 0px 0 0 35px;
4383 border-left: 1px solid #bdc3c7;
4384 height: 200px;
4385
4386 p {
4387 margin-bottom: 30px;
4388 }
4389 }
4390 }
4391
4392 #form-website {
4393
4394 .clipboard-copy {
4395 background: rgba(8, 165, 193, 0.49);
4396 padding: 7px;
4397 position: relative;
4398 padding-right: 230px;
4399 margin-bottom: 20px;
4400 border-radius: 7px;
4401
4402 .btn-purple {
4403 position: absolute;
4404 top: 0px;
4405 right: 0px;
4406 padding: 7px 35px;
4407 }
4408
4409 .clipboard-code {
4410 margin: 0;
4411 width: 100%;
4412 color: white;
4413 background: 0;
4414 padding: 0;
4415 box-shadow: none;
4416 font-size: 16px;
4417 }
4418 }
4419 }
4420
4421 #form-newsletter {
4422
4423 .newsletter-label {
4424 margin: 5px 10px 0 0;
4425 }
4426
4427 #newsletter {
4428 height: 14px;
4429 float: left;
4430 width: auto;
4431 margin: 7px 0 0 0;
4432 cursor: pointer;
4433 }
4434 }
4435
4436 #add-profile-picture {
4437 width: 100%;
4438 max-width: 200px;
4439 }
4440 }
4441
4442 /** /main setting panel **/
4443
4444 /** side bar **/
4445
4446 .profile-summary {
4447 padding: 15px;
4448 background: #FDFDFD;
4449
4450 .profile-image-container {
4451 width: 123px;
4452 height: 123px;
4453 margin: auto;
4454 border: 1px solid #ccc;
4455 padding: 0.25em;
4456 background: white;
4457 .border_radius(123px);
4458
4459 .profile-image {
4460
4461 img {
4462 width: 100%;
4463 height: 100%;
4464 border: 1px solid #ccc;
4465 .border_radius(123px);
4466
4467 }
4468 }
4469 }
4470
4471 .profile-name {
4472 font-size: 20px;
4473 margin-bottom: 45px;
4474 }
4475
4476 .last-active {
4477 font-size: 12px;
4478 margin-top: 5px;
4479 }
4480 }
4481
4482 /** /sidebar **/
4483
4484 #overlays {
4485
4486 .clipboard-copy {
4487 background: #ebf5fb;
4488 padding-left: 10px;
4489 margin-bottom: 20px;
4490
4491 .clipboard-code {
4492 margin: 10px 0;
4493 }
4494 }
4495 }
4496
4497 div.image {
4498 display: inline-block;
4499 margin-left: 5px;
4500 width: 17px;
4501 height: 17px;
4502 }
4503
4504 div.image.checked {
4505 background: url(/theme/flatui/img/icon-check-round-green.png) no-repeat;
4506 }
4507
4508 div.image.unchecked {
4509 background: url(/theme/flatui/img/icon-question-round.png) no-repeat;
4510 }
4511
4512 input.product-picture, input.title-picture, input.gallery-picture {
4513 opacity: 0;
4514 margin-bottom: 0;
4515 height: 0;
4516 width: 0;
4517 position: absolute;
4518 }
4519
4520 /** RESPONSIVE FIX **/
4521
4522 @media (max-width: 767px) {
4523 .settings-main {
4524 padding-left: 0;
4525 }
4526 }
4527
4528 /** /RESPONSIVE FIX **/
4529
4530 /** /SETTINGS PAGE **/
4531
4532
4533
4534 /*==================*/
4535 /* STATIC PAGES */
4536 /*==================*/
4537
4538 .static-container {
4539 margin-top: 0px;
4540 margin-bottom: 0px;
4541 max-width: 970px;
4542
4543 hr:first-of-type {
4544 height: 0px;
4545 border-bottom: 1px solid #ecf0f1;
4546 margin: 40px auto;
4547 }
4548
4549 .static-heading {
4550
4551 h1.page-title {
4552 color: #34495e;
4553 font-weight: bold;
4554 font-size: 32px;
4555 }
4556
4557 }
4558
4559 .static-content {
4560 margin-bottom: 50px;
4561
4562 h3 {
4563 color: @newblue;
4564 font-size: 1.5em;
4565 margin: 10px 0;
4566 font-weight: normal;
4567 }
4568 }
4569 }
4570
4571 /**-- FAQ PAGE -------------------**/
4572
4573 #top-content {
4574 position: relative;
4575
4576 > .left {
4577 padding-left: 0;
4578 padding-right: 15px;
4579 width: 50%;
4580 }
4581
4582 > .right {
4583 padding-right: 0;
4584 padding-left: 15px;
4585 width: 50%;
4586 }
4587
4588 h4 {
4589 line-height: 1.4em;
4590 font-size: 1.3em;
4591 text-align: justify;
4592 margin-top: 0;
4593 }
4594
4595 h3 {
4596 position: absolute;
4597 bottom: 1em;
4598 left: 0;
4599 width: 50%;
4600 text-align: center;
4601 font-size: 2em;
4602 }
4603 }
4604
4605 .panel-group {
4606
4607 h3 {
4608 margin-bottom: 10px;
4609 font-weight: normal;
4610 }
4611
4612 .panel {
4613
4614 .panel-heading {
4615 padding: 0;
4616
4617 a {
4618 padding: 10px 15px;
4619 width: 100%;
4620 display: block;
4621 }
4622 }
4623 }
4624 }
4625
4626 /**-- /FAQ PAGE -------------------**/
4627
4628 /**-- TEAM PAGE ---------------------------**/
4629
4630 section {
4631 float: left;
4632 width: 100%;
4633
4634 &.top {
4635 border-bottom: 1px solid #eeeeee;
4636 margin-bottom: 40px;
4637
4638 h1.page-title {
4639 font-size: 45px;
4640 height: 45px;
4641 line-height: 45px;
4642 margin-bottom: 40px;
4643 }
4644
4645 p {
4646 font-weight: bold;
4647 }
4648 }
4649
4650 &.team-members {
4651 text-align: center;
4652 margin-bottom: 40px;
4653
4654 .row {
4655 width: 100%;
4656 float: right;
4657
4658 .team-member {
4659 float: left;
4660 width: 104px;
4661
4662 figure {
4663 margin: 0 0 10px 0;
4664 width: 104px;
4665 height: 104px;
4666
4667 img {
4668 width: 104px;
4669 height: 104px;
4670 }
4671 }
4672
4673 .info {
4674 width: 150%;
4675 margin-left: -25%;
4676
4677 h3 {
4678 font-size: 14px;
4679 height: 15px;
4680 line-height: 15px;
4681 margin: 3px 0px;
4682 font-weight: bold;
4683 color: #34495e;
4684 }
4685 }
4686 }
4687
4688 .team-member + .team-member {
4689 margin-left: 208px;
4690 }
4691 }
4692
4693 .row + .row {
4694 margin-top: 30px;
4695 }
4696 }
4697 }
4698
4699 /**-- /TEAM PAGE ---------------------------**/
4700
4701 /**-- TERMS & CONDITIONS -------------------**/
4702
4703 .term {
4704
4705 .term-description {
4706 margin: 0;
4707
4708 ol {
4709
4710 li + li {
4711 margin-top: 5px;
4712 }
4713 }
4714 }
4715 }
4716
4717 /**-- /TERMS & CONDITIONS -------------------**/
4718
4719 /** MODALS **/
4720
4721 .content-modal {
4722
4723 .modal-header {
4724
4725 h3 {
4726 text-align: center;
4727 color: #2673b0;
4728 }
4729 }
4730 }
4731
4732 .clipboard-copy {
4733
4734 .clipboard-code {
4735 margin-bottom: 10px;
4736 float: left;
4737 background: #2673b0;
4738 color: white;
4739 padding: 10px 5px;
4740 border-radius: 5px;
4741 box-shadow: inset 1px 1px 1px rgba(0,0,0,0.15);
4742 font-size: 13px;
4743 width: 100%;
4744 }
4745 }
4746
4747 .code-embed-modal {
4748
4749 .content-modal {
4750
4751 .modal-body {
4752
4753 .demo-code {
4754 //display: none;
4755 }
4756
4757 textarea {
4758 width: 100%;
4759 border-width: 1px;
4760 height: 100px;
4761 }
4762 }
4763 }
4764 }
4765
4766 #files-panel {
4767 font-size: 10pt;
4768 }
4769
4770 #comments-frame {
4771
4772 > h3 {
4773 margin: 45px 0 30px 0;
4774 }
4775
4776 .comment-row {
4777 width: 100%;
4778 float: left;
4779 padding-bottom: 15px;
4780 }
4781
4782 .comment-row + .comment-row {
4783 padding-top: 15px;
4784 }
4785
4786 .comment {
4787 width: 100%;
4788 padding-left: 55px;
4789 float: left;
4790 position: relative;
4791 font-size: 12px;
4792
4793 .supporter-thumbnail {
4794 @size: 50px;
4795 width: @size;
4796 height: @size;
4797 padding: 0;
4798 margin: 0;
4799 position: absolute;
4800 top: 0px;
4801 left: 0px;
4802
4803 img {
4804 width: 100%;
4805 height: 100%;
4806 }
4807 }
4808
4809 .comment-content {
4810 width: 100%;
4811 padding-right: 0;
4812 padding-left: 0;
4813
4814 .popover-title {
4815 padding: 0;
4816 margin-bottom: 5px;
4817 font-weight: bold;
4818 background: white;
4819 border-bottom: 0;
4820 font-weight: normal;
4821
4822 span {
4823 font-size: 11px;
4824 }
4825
4826 span.name {
4827 font-weight: bold;
4828 font-size: 13px;
4829 }
4830
4831 span.amount {
4832 font-size: 12px;
4833 }
4834
4835 span.lightgrey {
4836 margin-left: 15px;
4837 }
4838 }
4839
4840 .popover-content {
4841 overflow: hidden;
4842 padding: 0;
4843 min-height: 28px;
4844
4845 p {
4846 margin-bottom: 0;
4847 }
4848 }
4849
4850 .maker-comment-container {
4851 padding: 0;
4852 margin-top: 15px;
4853
4854 &.maker-form {
4855 display: none;
4856 position: relative;
4857 padding-left: 8%;
4858
4859 .glyphicon {
4860 position: absolute;
4861 top: 4px;
4862 left: 7%;
4863 cursor: pointer;
4864 z-index: 100;
4865 }
4866
4867 .maker-comment {
4868 margin-top: 5px;
4869 background: #f7f7f7;
4870 }
4871
4872 .popover-content {
4873 height: auto;
4874 overflow: hidden;
4875 background: #f7f7f7;
4876 border-radius: 4px;
4877 border: 0;
4878 padding-top: 4px;
4879 padding-right: 4px;
4880 padding-bottom: 4px;
4881 padding-left: 12%;
4882 }
4883
4884 textarea {
4885 border-width: 1px;
4886 margin-bottom: 5px;
4887 }
4888 }
4889 }
4890
4891 .maker-comment {
4892 width: 100%;
4893 float: none;
4894 padding: 0;
4895 position: relative;
4896 border: 0;
4897
4898 .supporter-thumbnail {
4899 width: 38px;
4900
4901 a {
4902 width: 38px;
4903 height: 38px;
4904 }
4905 }
4906
4907 .content {
4908 padding-left: 43px;
4909
4910 .popover-content {
4911 margin-bottom: 0;
4912 }
4913 }
4914 }
4915 }
4916
4917 a.show-maker-reply {
4918 position: absolute;
4919 bottom: 1px;
4920 right: 0px;
4921 display: block;
4922 cursor: pointer;
4923 color: white;
4924 font-size: 0.8em;
4925 padding: 0.2em 0.4em;
4926 .border_radius(4px 0 4px 0);
4927 }
4928 }
4929 }
4930
4931 .modal.report-product {
4932
4933 .modal-dialog {
4934
4935 .modal-content {
4936 padding: 10px 10px 0 10px;
4937
4938 #product-report {
4939
4940 button.small {
4941 border:none;
4942 background: transparent;
4943 color: #2673b0;
4944 }
4945 }
4946 }
4947 }
4948 }
4949
4950 /*-- WIDGET MODAL --*/
4951
4952 #modal-widget {
4953
4954 .content-modal {
4955 width: 770px;
4956
4957 .modal-body {
4958 overflow: hidden;
4959 height: auto;
4960
4961 hr {
4962 float: left;
4963 width: 100%;
4964 }
4965 }
4966
4967 #configuration-options {
4968 width: 50%;
4969 float: left;
4970 padding-right: 10px;
4971
4972 .tab-content {
4973
4974 .tab-pane {
4975 padding: 10px 0;
4976
4977 .field {
4978 font-size: 12px;
4979
4980 label {
4981 width: 35%;
4982 float: left;
4983 height: 25px;
4984 line-height: 25px;
4985 }
4986
4987 input[type="text"]{
4988 float: right;
4989 width: 65%;
4990 border-width: 1px;
4991 height: 25px;
4992 line-height: 25px;
4993 border-radius: 3px;
4994 .box_shadow(inset 0 1px 1px rgba(0,0,0,0.15));
4995 }
4996
4997 input[type="radio"]{
4998 width: auto;
4999 float: left;
5000 margin: 7px 3px 5px 0;
5001 }
5002
5003 span {
5004 float: left;
5005 height: 25px;
5006 line-height: 25px;
5007 display: inline-block;
5008 }
5009
5010 span + input[type="radio"]{
5011 margin-left: 15px;
5012 }
5013
5014 input[type="checkbox"]{
5015 float: left;
5016 margin: 7px 0;
5017 width: auto;
5018 }
5019
5020 textarea {
5021 width: 65%;
5022 border-width: 1px;
5023 border-radius: 3px;
5024 padding: 2px 10px;
5025 height: 100px;
5026 margin-bottom: 5px;
5027 }
5028 }
5029 }
5030 }
5031
5032 #colors-config {
5033
5034 }
5035
5036 }
5037
5038 #widget-preview {
5039 width: 50%;
5040 padding-left: 10px;
5041 float: left;
5042
5043 #pling-widget {
5044 width: 100%;
5045 padding: 8px;
5046 font-size: 12px;
5047 background-color: @newblue;
5048 .border_radius(8px);
5049
5050 .widget-header {
5051 width: 100%;
5052 margin-bottom: 5px;
5053
5054 h3 {
5055 margin: 0;
5056 font-size: 18px;
5057 margin-bottom: 0 !important;
5058 }
5059 }
5060
5061 .widget-body {
5062 background-color: white;
5063 padding: 5px;
5064 margin-bottom: 5px;
5065 border: 1px solid rgba(68, 68, 68, 0.2);
5066 .border_radius(5px);
5067 .box_shadow(inset 0 1px 4px rgba(0,0,0,0.15));
5068
5069 .product-funding-info {
5070 width: 100%;
5071 position: relative;
5072
5073 .goal-range-number {
5074 width: 100%;
5075 height: 20px;
5076 line-height: 20px;
5077
5078 span {
5079 display: block;
5080 float: left;
5081 }
5082
5083 span + span {
5084 float: right;
5085
5086 &.unlimited {
5087 font-size: 27px;
5088 }
5089 }
5090 }
5091
5092 .achieved-amount {
5093 width: 100%;
5094 height: 20px;
5095 padding: 3px;
5096 background: rgba(204, 204, 204, 0.19);
5097 .border_radius(4px);
5098 .box_shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
5099
5100 .bar {
5101 width: 4px;
5102 max-width: 100%;
5103 height: 14px;
5104 background-color: @newblue;
5105 .border_radius(2px);
5106 .box_shadow(inset 0 6px 0 rgba(255, 255, 255, 0.2));
5107
5108 &.no-goal {
5109 width: 50%;
5110 }
5111 }
5112 }
5113
5114 .money-raised {
5115 width: 100%;
5116 height: 20px;
5117 line-height: 20px;
5118 }
5119
5120
5121 &.with-goal {
5122 padding-right:25%;
5123
5124 .percentage {
5125 position: absolute;
5126 top: 0;
5127 right: 0;
5128 width: 25%;
5129 height: 60px;
5130 line-height: 60px;
5131 text-align: center;
5132 font-size: 22px;
5133 }
5134 }
5135 }
5136
5137 .widget-text {
5138 margin-top: 10px;
5139 }
5140
5141 .supporters {
5142 width: 100%;
5143 height: auto;
5144 overflow: hidden;
5145 margin-top: 10px;
5146
5147 .supporter {
5148 width: 12.5%;
5149 height: auto;
5150 float: left;
5151 padding: 2px;
5152 clear: none;
5153 border-bottom: 0;
5154
5155 figure {
5156 width: 100%;
5157 height: auto;
5158
5159 img {
5160 width: 100%;
5161 height: auto;
5162 .border_radius(100%);
5163 }
5164 }
5165 }
5166 }
5167
5168 .comments {
5169 height: auto;
5170 overflow: hidden;
5171 width: 100%;
5172 margin-top: 10px;
5173
5174 .comment {
5175 position: relative;
5176 width: 100%;
5177 min-height: 42px;
5178 padding-left: 15%;
5179
5180 figure {
5181 position: absolute;
5182 top: 0;
5183 left: 0;
5184 width: 15%;
5185 height: auto;
5186
5187 img {
5188 width: 100%;
5189 height: auto;
5190 }
5191 }
5192
5193 .content {
5194 width: 100%;
5195
5196 .info {
5197 width: 100%;
5198 height: 12px;
5199 line-height: 12px;
5200 margin-bottom: 5px;
5201 }
5202
5203 .text {
5204 width: 100%;
5205 font-size: 11px;
5206 line-height: 11px;
5207 }
5208 }
5209 }
5210
5211 .comment + .comment {
5212 margin-top: 5px;
5213 }
5214 }
5215 }
5216
5217 .widget-footer {
5218 width: 100%;
5219 height: auto;
5220 overflow: hidden;
5221
5222 .button {
5223 float: left;
5224 }
5225
5226 .pay-secure {
5227 float: left;
5228 padding-left: 10px;
5229 color: white;
5230 width: 100px;
5231 }
5232
5233 .powered-by {
5234 float: right;
5235
5236 a.pling-logo {
5237 display: block;
5238 background-image: url('../img/new/pling-logo-large.png');
5239 height: 34px;
5240 width: 63px;
5241 background-size: contain;
5242
5243 &.grey {
5244 background-image: url('../img/new/logo.png');
5245 }
5246
5247 &.icon {
5248 width: 34px;
5249 background-image: url('../img/new/box-logo.png');
5250 }
5251 }
5252 }
5253 }
5254 }
5255 }
5256 }
5257 }
5258
5259 /*-- /. MODAL --*/
5260
5261 /*-- CODE EMBED --*/
5262
5263 .code-embed-modal {
5264
5265 .content-modal {
5266 width: 400px;
5267
5268 .modal-body {
5269
5270 textarea {
5271 width: 100%;
5272 border-width: 1px;
5273 height: 100px;
5274 }
5275 }
5276 }
5277 }
5278
5279 /*-- /CODE EMBED --*/
5280
5281 /** /MODALS **/
5282
5283
5284 /**-- SUPPORTER BOX ---------------------------*/
5285
5286 body.body-external {
5287 margin: 0;
5288 padding-top: 0;
5289 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
5290 }
5291
5292 .supporter-box-container {
5293 width: 100%;
5294 height: auto;
5295 float: left;
5296 border:1px solid #999999;
5297 .box_sizing();
5298
5299
5300 figure {
5301 float: left;
5302 margin: 0;
5303 padding: 0;
5304 }
5305
5306 div {
5307 float: left;
5308 }
5309
5310 > div {
5311 width: 100%;
5312 height: auto;
5313 padding: 7px;
5314 .box_sizing();
5315 }
5316
5317 .supporter-box-top {
5318 background-color: #e5e5e5;
5319 position: relative;
5320
5321 .title {
5322 float: left;
5323 width: 50%;
5324 > a {
5325 font-size: 16px;
5326 color: #39568c;
5327 text-decoration: none;
5328 .transition();
5329
5330 &:hover {
5331 text-decoration:underline;
5332 color: #428bca;
5333 }
5334 }
5335 }
5336
5337 figure {
5338 position: absolute;
5339 top: 7px;
5340 right: 7px;
5341 width: 102px;
5342 height: 68px;
5343 border:inset 1px #999999;
5344
5345 a {
5346 width: 100%;
5347 height: 100%;
5348 display: block;
5349 overflow: hidden;
5350
5351 img {
5352 width: 100%;
5353 }
5354 }
5355 }
5356 }
5357
5358 .supporter-box-body {
5359
5360 > div {
5361 width: 100%;
5362 float: left;
5363 .box_sizing();
5364 }
5365
5366 .info {
5367 height: 30px;
5368 padding-left: 35px;
5369 position: relative;
5370 margin-bottom: 10px;
5371
5372 > em {
5373 position: absolute;
5374 left: 0;
5375 top: 0;
5376 }
5377
5378 > span {
5379 display: block;
5380 width: 100%;
5381 height: 15px;
5382 line-height: 15px;
5383 font-size: 13px;
5384 float: left;
5385 color: black;
5386 }
5387
5388 span + span {
5389 color: #1e4483;
5390 }
5391 }
5392
5393 .supporters {
5394 width: 102%;
5395
5396 figure {
5397 width: 30px;
5398 height: 30px;
5399 margin: 0px 3.5px 3.5px 0px;
5400
5401 a {
5402 display: block;
5403 width: 100%;
5404 height: 100%;
5405 overflow: hidden;
5406 .border_radius(3px);
5407
5408 img {
5409 width: 100%;
5410 }
5411 }
5412 }
5413 }
5414 }
5415 }
5416
5417 /**-- /SUPPORTER BOX ---------------------------*/
5418
5419
5420
5421 /*------ WIDGET --------------------*/
5422
5423 #configuration-options {
5424 width: 60%;
5425 float: left;
5426 padding-right: 10px;
5427
5428 ul.nav-tabs {
5429 padding: 0;
5430 background-color: white;
5431
5432
5433 li {
5434 a {
5435 padding: 5px;
5436 }
5437 }
5438 }
5439
5440 .tab-content {
5441
5442 .tab-pane {
5443 padding: 10px 0;
5444
5445 textarea {
5446 width: 65%;
5447 border-width: 1px;
5448 border-radius: 3px;
5449 padding: 0 5px;
5450 height: 100px;
5451 margin-bottom: 5px;
5452 .box_shadow(inset 0 1px 1px rgba(0,0,0,0.15));
5453 }
5454
5455 .field {
5456 font-size: 12px;
5457
5458 label {
5459 width: 35%;
5460 float: left;
5461 height: 25px;
5462 line-height: 25px;
5463 }
5464
5465 input[type="text"],
5466 input.color-input {
5467 padding: 0 5px;
5468 float: right;
5469 width: 65%;
5470 border-width: 1px;
5471 height: 25px;
5472 line-height: 25px;
5473 border-radius: 3px;
5474 .box_shadow(inset 0 1px 1px rgba(0,0,0,0.15));
5475 }
5476
5477 input[type="radio"]{
5478 width: auto;
5479 float: left;
5480 margin: 7px 3px 5px 0;
5481 }
5482
5483 span {
5484 float: left;
5485 height: 25px;
5486 line-height: 25px;
5487 display: inline-block;
5488 }
5489
5490 span + input[type="radio"]{
5491 margin-left: 15px;
5492 }
5493
5494 input[type="checkbox"]{
5495 float: left;
5496 margin: 7px 0;
5497 width: auto;
5498 }
5499 }
5500 }
5501 }
5502
5503 #colors-config {
5504
5505 }
5506 }
5507
5508 #pling-widget {
5509 width: 100%;
5510 max-width: 400px;
5511 padding: 8px;
5512 font-size: 12px;
5513 background-color: @newblue;
5514 .border_radius(8px);
5515
5516 .widget-header {
5517 width: 100%;
5518 margin-bottom: 5px;
5519
5520 h3 {
5521 margin: 0;
5522 font-size: 18px;
5523 }
5524 }
5525
5526 .widget-body {
5527 background-color: white;
5528 padding: 5px;
5529 margin-bottom: 5px;
5530 border: 1px solid rgba(68, 68, 68, 0.2);
5531 .border_radius(5px);
5532 .box_shadow(inset 0 1px 4px rgba(0,0,0,0.15));
5533
5534
5535 .donation-amount {
5536 line-height: 34px;
5537 margin: 0 0 5px 0;
5538 overflow: hidden;
5539
5540 .support-with {
5541 width: 25%;
5542 height: 34px;
5543 float: left;
5544 }
5545
5546 .donation-amount-number {
5547 width: 50%;
5548 float: left;
5549 position: relative;
5550
5551 span.glyphicon {
5552 position: absolute;
5553 top: 11px;
5554 left: 0;
5555 }
5556
5557 input[type="text"] {
5558 padding: 0 10px;
5559 float: right;
5560 width: 100%;
5561 border-width: 1px;
5562 height: 24px;
5563 line-height: 24px;
5564 border-radius: 3px;
5565 margin: 5px 0;
5566 border-right: 0;
5567 .box_shadow(inset 0 1px 1px rgba(0,0,0,0.15));
5568 }
5569 }
5570
5571 .button {
5572 width: 25%;
5573 float: right;
5574
5575 button {
5576 float: left;
5577 margin-top: 5px;
5578 padding: 0;
5579 width: 100%;
5580 text-align: center;
5581 height: 24px;
5582 }
5583 }
5584
5585 .payment-providers {
5586 width: 100%;
5587 float: left;
5588 margin: 5px 0;
5589
5590 .pay-with {
5591 width: 25%;
5592 height: 34px;
5593 float: left;
5594 }
5595
5596 .input-group {
5597 width: 37%;
5598 float: left;
5599 display: block;
5600
5601 .input-group-addon {
5602 width: 20%;
5603 float: left;
5604 padding: 8px 16px 4px 0;
5605 border: 0;
5606 background: transparent;
5607 margin-top: 3px;
5608
5609 input[type="radio"] {
5610 width: auto;
5611 }
5612 }
5613
5614 .payment-icon {
5615 width: 70%;
5616 float: left;
5617 height: 34px;
5618 display: block;
5619
5620 img {
5621 max-width: 100%;
5622 height: 20px;
5623 width: auto;
5624 margin-top: 7px;
5625 }
5626 }
5627 }
5628 }
5629
5630 }
5631
5632 .product-funding-info {
5633 width: 100%;
5634 position: relative;
5635
5636 .goal-range-number {
5637 width: 100%;
5638 height: 20px;
5639 line-height: 20px;
5640 display: none;
5641
5642 span {
5643 display: block;
5644 float: left;
5645 }
5646
5647 span + span {
5648 float: right;
5649
5650 &.unlimited {
5651 font-size: 27px;
5652 }
5653 }
5654 }
5655
5656 .achieved-amount {
5657 width: 100%;
5658 height: 20px;
5659 padding: 3px;
5660 background: rgba(204, 204, 204, 0.19);
5661 display: none;
5662 .border_radius(4px);
5663 .box_shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
5664
5665 .bar {
5666 width: 4px;
5667 max-width: 100%;
5668 height: 14px;
5669 background-color: @newblue;
5670 .border_radius(2px);
5671 .box_shadow(inset 0 6px 0 rgba(255, 255, 255, 0.2));
5672
5673 &.no-goal {
5674 width: 50%;
5675 }
5676 }
5677 }
5678
5679 .money-raised {
5680 width: 100%;
5681 height: 20px;
5682 line-height: 20px;
5683 }
5684
5685 &.with-goal {
5686
5687 .percentage {
5688 position: absolute;
5689 top: 0;
5690 right: 0;
5691 width: 25%;
5692 height: 60px;
5693 line-height: 60px;
5694 text-align: center;
5695 font-size: 22px;
5696 }
5697
5698 .goal-range-number {
5699 padding-right: 25%;
5700 display: block;
5701 }
5702
5703 .achieved-amount {
5704 width: 75%;
5705 display: block;
5706 }
5707 }
5708 }
5709
5710 .widget-text {
5711 margin-top: 10px;
5712 }
5713
5714 .supporters {
5715 width: 100%;
5716 height: auto;
5717 overflow: hidden;
5718 margin-top: 5px;
5719 padding-top: 5px;
5720 border-top: 1px solid #ddd;
5721
5722 .supporter {
5723 width: 12.5%;
5724 height: auto;
5725 float: left;
5726 padding: 2px;
5727 clear: none;
5728 border-bottom: 0;
5729
5730 figure {
5731 width: 100%;
5732 height: auto;
5733
5734 img {
5735 width: 100%;
5736 height: auto;
5737 }
5738 }
5739 }
5740 }
5741
5742 .comments {
5743 height: auto;
5744 overflow: hidden;
5745 width: 100%;
5746 margin-top: 5px;
5747 padding-top: 5px;
5748 border-top: 1px solid #ddd;
5749
5750 .comment {
5751 position: relative;
5752 width: 100%;
5753 min-height: 42px;
5754 padding-left: 15%;
5755
5756 figure {
5757 position: absolute;
5758 top: 0;
5759 left: 0;
5760 width: 15%;
5761 height: 100%;
5762 text-align: center;
5763
5764 img {
5765 width: auto;
5766 height: 100%;
5767 float: left;
5768 }
5769 }
5770
5771 .content {
5772 width: 100%;
5773 padding-left: 5%;
5774
5775 .info {
5776 width: 100%;
5777 height: 12px;
5778 line-height: 12px;
5779 margin-bottom: 5px;
5780 }
5781
5782 .text {
5783 width: 100%;
5784 font-size: 11px;
5785 line-height: 11px;
5786 }
5787 }
5788 }
5789
5790 .comment + .comment {
5791 margin-top: 5px;
5792 }
5793 }
5794 }
5795
5796 .widget-footer {
5797 width: 100%;
5798 height: auto;
5799 overflow: hidden;
5800
5801 .donation-amount {
5802 padding-bottom: 10px;
5803 color: white;
5804 font-size: 14px;
5805 }
5806
5807 .button {
5808 float: left;
5809 }
5810
5811 .pay-secure {
5812 float: left;
5813 //padding-left: 10px;
5814 color: white;
5815 width: 100px;
5816
5817 a {
5818 color: white;
5819 }
5820 }
5821
5822 .powered-by {
5823 float: right;
5824 a.opendesktop-logo
5825 {
5826 display: block;
5827 background-image: url('/images/system/storeLogo.png');
5828 height: 34px;
5829 width: 63px;
5830 background-size: contain;
5831 background-repeat:no-repeat;
5832 }
5833 a.pling-logo {
5834 display: block;
5835 background-image: url('../img/new/pling-logo-large.png');
5836 height: 34px;
5837 width: 63px;
5838 background-size: contain;
5839
5840 &.grey {
5841 background-image: url('../img/new/logo.png');
5842 }
5843
5844 &.icon {
5845 width: 34px;
5846 background-image: url('../img/new/box-logo.png');
5847 }
5848 }
5849 }
5850 }
5851 }
5852
5853 /** preview area **/
5854
5855 #widget-preview {
5856 width: 40%;
5857 padding-left: 10px;
5858 float: left;
5859 }
5860
5861 /** /preview area **/
5862
5863 /** in modal **/
5864
5865 #widget-code-modal {
5866 width: 800px;
5867 height: auto;
5868 overflow: hidden;
5869
5870 .modal-body {
5871 height: auto;
5872 overflow: hidden;
5873
5874 article {
5875 width: 100%;
5876 float: left;
5877
5878 #configuration-options {
5879
5880 ul.nav-tabs {
5881 float: left;
5882 width: 100%;
5883 background-color: #F3F3F3;
5884 border-bottom: 1px solid #e5e5e5;
5885 position: relative;
5886 top: 0;
5887
5888 li {
5889 border-bottom: 1px solid #e5e5e5;
5890 .transition(0);
5891
5892 a {
5893 margin: 0;
5894 background-color: transparent;
5895 border: 0;
5896 color: @newblue;
5897 border-bottom: 3px solid #f3f3f3;
5898 .transition(0);
5899 }
5900
5901 &.active {
5902 border-color: @newblue;
5903 a {
5904 border-color: @newblue;
5905 }
5906 }
5907 }
5908 }
5909 }
5910 }
5911 }
5912 }
5913
5914 /** /in modal **/
5915
5916 /** in iframe **/
5917
5918 .body-external {
5919
5920 .supporter-box-container {
5921 border: 0;
5922 text-align: center;
5923
5924 #pling-widget {
5925 text-align: left;
5926 float: none;
5927 height: auto;
5928 overflow: hidden;
5929 }
5930 }
5931 }
5932
5933 /** /in iframe **/
5934
5935 /*------ /WIDGET --------------------*/
5936
5937 /***** index-pling *******/
5938
5939 #mainpage
5940 {
5941 background-image: url(/images/system/1-opendesktop-bg.png);
5942 background-repeat:no-repeat;
5943 background-attachment:fixed;
5944 background-position:0px 0px;
5945 background-size: 100% 100%;
5946 width: 100% !important;
5947 margin-top: 15px;
5948 }
5949 #mainpage .wrapper
5950 {
5951 padding-top: 100px;
5952 }
5953
5954 #mainpage .card-wrapper
5955 {
5956 border-radius:10px;
5957 padding:5px;
5958 }
5959
5960 #mainpage .card-wrapper
5961 {
5962 a.title
5963 {
5964 display:block;
5965 }
5966
5967
5968 img.logo
5969 {
5970 height:45px;
5971 margin-right:10px;
5972 margin-bottom:5px;
5973 }
5974
5975 .domainobj
5976 {
5977 margin: 15px;
5978 border-bottom:1px solid #ccc;
5979 }
5980 }
5981
5982
5983 #indeximages
5984 {
5985 height:400px;
5986 width: 100%;
5987 overflow: hidden;
5988 }
5989 #indeximages a
5990 {
5991 cursor: default;
5992 }
5993
5994 .socialrow
5995 {
5996 border-bottom:1px solid #ccd4d8 ;
5997 padding-top: 5px;
5998 padding-bottom: 10px;
5999 overflow: hidden;
6000 .avatar{
6001 width:55px;
6002 display: block;
6003 float: left;
6004 img{
6005 width:48px;
6006 height: 48px;
6007 border-radius:10px;
6008 }
6009 }
6010 span{
6011 display: block;
6012 }
6013 span.date{
6014 font-size: small;
6015 padding-top: 5px;
6016 }
6017 &:last-child
6018 {
6019 border-bottom:0px solid #ccd4d8 ;
6020 }
6021 }
6022 .commentstore
6023 {
6024 border-bottom:1px solid #ccd4d8 ;
6025 padding-top: 5px;
6026 padding-bottom: 5px;
6027 overflow: hidden;
6028 p{
6029 margin: 0;
6030 }
6031 .userinfo img
6032 {
6033 border-radius: 50%;
6034 width: 42px;
6035 height: 42px;
6036 float: right;
6037
6038 }
6039 .userinfo
6040 {
6041 float: right;
6042 }
6043 .info
6044 {
6045 display: block;
6046 }
6047 }
6048
6049 .commentstore:last-child
6050 {
6051 border-bottom:none;
6052 }
6053
6054 /*product detail popover*/
6055 div.profile-img-product
6056 {
6057 width: 200px;
6058 height: 160px;
6059 }
6060 img.imgpopover
6061 {
6062 max-width: 200px;
6063 max-height: 160px;
6064 display: block;
6065 margin: auto;
6066 }
6067
6068 /*aboutme tab comments*/
6069 #my-comments-tabs-content {
6070 font-size: 11pt;
6071 width: 100%;
6072 .rownomargin
6073 {
6074 margin:0;
6075 }
6076 .rownopadding
6077 {
6078 padding: 0;
6079 }
6080 .category
6081 {
6082 display: block;
6083 font-size: smaller;
6084 }
6085 .createat
6086 {
6087 font-size: smaller;
6088 color: #888;
6089 }
6090 .productrow
6091 {
6092 padding-bottom: 5px;
6093 padding-top: 5px;
6094 border-bottom: 1px solid #ccd4d8;
6095
6096 font-size: small;
6097 .project-image{
6098 width: 50px;
6099 height: 50px;
6100 float: left;
6101 margin-right: 15px;
6102 }
6103 }
6104 .productrow:last-child {
6105 border-bottom: none;
6106 }
6107 .row
6108 {
6109 margin-top: 10px;
6110 }
6111 .rating
6112 {
6113 width: 80px;
6114 }
6115 .time
6116 {
6117 font-size: smaller;
6118 }
6119 .cntComments
6120 {
6121 font-size: smaller;
6122 display: block;
6123 padding-top: 5px;
6124
6125 }
6126 .productimg
6127 {
6128 width:50px;
6129 height:50px;
6130 }
6131 .commenttext{
6132 padding-left: 20px;
6133
6134 }
6135 }
6136
6137 .user-admin-page
6138 {
6139 .commentText
6140 {
6141 font-size: smaller;
6142 }
6143 .commentTime
6144 {
6145 font-size: smaller;
6146 padding-left: 20px;
6147 }
6148 .title
6149 {
6150 font-weight: bold;
6151 color:#37628D;
6152 padding-top: 10px;
6153 padding-bottom: 10px;
6154 }
6155
6156 .topics{
6157 padding-right: 20px;
6158
6159 .topic-tag
6160 {
6161 display: inline-block;
6162 padding: 0.3em 0.9em;
6163 margin: 0 0.5em 0.5em 0;
6164 white-space: nowrap;
6165 background-color: #f1f8ff;
6166 border-radius: 3px;
6167 }
6168 .usertagslabelcat{
6169 background-color: #f1f1f1;
6170 }
6171 .topic-tag-link
6172 {
6173 &:hover {
6174 text-decoration: none;
6175 background-color: #def;
6176 }
6177
6178 }
6179 .btn-link{
6180 display: inline-block;
6181 padding: 0;
6182 font-size: inherit;
6183 color: #0366d6;
6184 text-decoration: none;
6185 white-space: nowrap;
6186 cursor: pointer;
6187 -webkit-user-select: none;
6188 -moz-user-select: none;
6189 -ms-user-select: none;
6190 user-select: none;
6191 background-color: transparent;
6192 border: 0;
6193 -webkit-appearance: none;
6194 -moz-appearance: none;
6195 appearance: none;
6196 padding-bottom:10px;
6197 }
6198 }
6199
6200 .my-downloadshistory-list{
6201 width: 1100px;
6202 .totaldownloads{
6203 margin:0;
6204 padding: 20px;
6205 text-align: right;
6206 }
6207 .smaller{
6208 font-size: smaller;
6209 }
6210 .header{
6211 border-top:1px solid #ccc;
6212 padding-top:15px;
6213 padding-bottom:15px;
6214 }
6215 .subheader{
6216 background-color: #ddd
6217 }
6218 .paddingLeft80{
6219 padding-left: 80px;
6220 }
6221 .marginLeft80{
6222 margin-left: 80px;
6223 }
6224
6225 button.voting{
6226 line-height: 10px;
6227 }
6228 button.voting span{
6229 font-size: 10px;
6230 }
6231
6232 .rating{
6233 width: 80px !important;
6234 font-size: 10pt;
6235 }
6236 .downloadhistory-image{
6237 width: 50px;
6238 height: 50px;
6239 float: left;
6240 margin-right: 15px;
6241 }
6242 .nowrap{
6243 white-space: nowrap;
6244 }
6245 }
6246 }
6247
6248 .col-container
6249 {
6250
6251 span.cnt
6252 {
6253 padding-right: 5px;
6254 display: inline-block;
6255 font-weight: bold;
6256 }
6257 .stat
6258 {
6259 padding-top: 15px;
6260 padding-left: 15px;
6261 font-size: 12px;
6262 }
6263
6264 .info
6265 {
6266
6267 padding-left: 15px;
6268
6269 }
6270 .statContent
6271 {
6272 padding-top: 15px;
6273 padding-left: 15px;
6274 font-size: 12px;
6275 }
6276 }
6277
6278 /** plings **/
6279
6280 main#plings-page{
6281 .wrapper{
6282 width:700px;
6283 padding:20px;
6284 /*max-height: 700px;
6285 overflow: auto;
6286 */
6287 .title{
6288 background-color:#ccc;
6289 height: 30px;
6290 }
6291 .label{
6292 padding-top: 10px;
6293 padding-left: 0px;
6294 }
6295 .row:not(:first-child):hover{
6296 background-color: #eef;
6297 }
6298
6299 .depth0 {
6300 padding-left: 0px;
6301 }
6302
6303 .depth1 {
6304 padding-left: 20px;
6305 }
6306 .depth2 {
6307 padding-left: 40px;
6308 }
6309 .depth3 {
6310 padding-left: 60px;
6311 }
6312 .depth4 {
6313 padding-left: 80px;
6314 }
6315 .depth5 {
6316 padding-left: 100px;
6317 }
6318 .factor {
6319 padding-right: 10px;
6320 }
6321 }
6322 }
6323 /** plings END**/
6324
6325 /* new look test */
6326
6327 #product-page-content {
6328 .sidebar-left{
6329 padding-right: 15px;
6330 padding-left: 15px;
6331 min-width: 200px;
6332 padding-top: 20px;
6333 }
6334
6335 .tag-element {
6336 background-clip: padding-box;
6337 background-color: #eeeeee;
6338 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
6339 background-repeat: repeat-x;
6340 background-size: 100% 19px;
6341 border: 1px solid #aaa;
6342 border-radius: 3px;
6343 box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
6344 color: #333;
6345 line-height: 25px !important;
6346 margin: 3px 3px 3px 0;
6347 max-width: 100%;
6348 padding: 0 10px;
6349 position: relative;
6350 display: inline-block;
6351 }
6352 }
6353
6354 #carouselContainer{
6355 .carousel-indicators {
6356 z-index: 31;
6357 background-color: transparent;
6358 height: 20px;
6359 bottom: -30px;
6360 & .active{
6361 background-color: #E2E2E2;
6362 }
6363 li{
6364 border: 1px solid #C4D7EF;
6365 }
6366 }
6367 iframe{
6368 border: 0px;
6369 }
6370 }
6371
6372 /*update member page*/
6373 #email-collapse{
6374 .group-list {
6375 list-style: outside none none;
6376 > li:first-child {
6377 border-top: 0 none;
6378 border-top: 1px solid #ddd;
6379 }
6380 > li {
6381 border-bottom: 1px solid #e5e5e5;
6382 display: block;
6383 line-height: 30px;
6384 margin-left: -10px;
6385 padding: 5px 10px;
6386 }
6387
6388 }
6389
6390 .css-truncate-target {
6391 max-width: 300px;
6392 display: inline-block;
6393 text-overflow: ellipsis;
6394 vertical-align: top;
6395 white-space: nowrap;
6396 }
6397 .email-actions {
6398 float: right;
6399 form {
6400 display: inline;
6401 }
6402 }
6403
6404 span.label.default {
6405 background-color: #6cc644;
6406 border-radius: 3px;
6407 color: #fff;
6408 margin-left: 4px;
6409 padding: 4px 6px;
6410 }
6411 span.label.attention {
6412 background-color: #c64f0d;
6413 border-radius: 3px;
6414 color: #fff;
6415 margin-left: 4px;
6416 padding: 4px 6px;
6417 }
6418 .btn {
6419 line-height: 20px;
6420 padding: 4px 12px;
6421 }
6422
6423 }
6424 .user-admin-page
6425 {
6426 .body-wrap{
6427 .well{
6428 min-height: 20px;
6429 padding: 20px;
6430 margin-bottom: 20px;
6431 background-color: transparent;
6432 border: 0px;
6433 border-radius: 0px;
6434 -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.05);
6435 box-shadow: inset 0 0px 0px rgba(0,0,0,.05);
6436 }
6437 }
6438 }
6439
6440 .profile-menu{
6441 li{
6442 a{
6443 width: 100%;
6444 }
6445 }
6446 }
6447
6448
6449 // grid layout 19.06
6450 .grid-container{
6451 padding-top: 10px;
6452 .flex-container{
6453 font-size: 10pt !important;
6454 .explore-product-grid{
6455 width: 200px;
6456 padding: 0px;
6457 margin: 20px;
6458 border: 1px solid #dedede;
6459 border-radius: 2px;
6460 margin: 10px 10px 10px 10px;
6461 position: relative;
6462
6463 /*background: url(../img/app-container-bg.png) repeat-x;*/
6464
6465 figure{
6466 /*height: 167px;*/
6467
6468 opacity: 1;
6469 display: block;
6470 transition: .5s ease;
6471 backface-visibility: hidden;
6472
6473 }
6474
6475
6476 .explore-product-image{
6477
6478 /*
6479 max-width: 95%;
6480 height: 167px;
6481 */
6482 width: 170px;
6483 height: 120px;
6484
6485 }
6486 .explore-product-desc{
6487 background: linear-gradient(#fff, #EDEDED);
6488 padding:0px 10px 5px 10px;
6489 border-bottom-left-radius: 2px;
6490 border-bottom-right-radius: 2px;
6491 }
6492 .explore-product-plings {
6493 padding: 0;
6494 padding-top: 5px;
6495 width: 100px;
6496 margin:0 auto;
6497 font-size: 10px;
6498 .rating {
6499 width: 100%;
6500
6501 }
6502
6503 .progress {
6504 margin-bottom: 10px;
6505 padding: 3px;
6506 opacity:0;
6507 margin-bottom: 0;
6508 height:12px;
6509 opacity:1.0;
6510 background-color: transparent;
6511 box-shadow: none;
6512 padding:2px;
6513
6514 .bar {
6515 width: 4px;
6516 max-width: 100%;
6517 height: 14px;
6518 background-color: #2673b0;
6519 .border_radius(5px);
6520 .box_shadow(inset 0 6px 0 rgba(255,255,255,0.2));
6521
6522 &.no-goal {
6523 width: 50%;
6524 opacity: 0;
6525 }
6526
6527 }
6528 }
6529
6530 .collected {
6531 span {
6532 display: block;
6533 width: 100%;
6534 float: left;
6535 font-size: 12px;
6536 }
6537 }
6538 }
6539
6540 .explore-product-details {
6541
6542
6543 span.version
6544 {
6545 font-size: smaller;
6546 padding-left: 20px;
6547 }
6548 span.title{
6549 display: block;
6550 font-size: smaller;
6551 line-height: 1.5;
6552 }
6553
6554
6555 }
6556 }
6557 }
6558 }
6559
6560
6561 /* mobile settings */
6562 @media (max-width: 400px) {
6563 #explore-content{
6564 .GridFlex{
6565 .sidebar-left{
6566 flex: 0 0 100%;
6567 }
6568 }
6569 }
6570 .metamenu{
6571 height: 100%;
6572 .sitelogo{
6573 display:block;
6574 width:100%;
6575 height:30px;
6576 font-size:20px;
6577 img.logo{
6578 width: 30px;
6579 height: 30px;
6580 }
6581 }
6582
6583 }
6584 }
6585
6586 #ratings-panel{
6587 .bbtn{
6588 display: inline-block;
6589 padding: 6px 12px;
6590 margin-bottom: 0;
6591 font-size: 14px;
6592 font-weight: 400;
6593 line-height: 1.42857143;
6594 text-align: center;
6595 white-space: nowrap;
6596 vertical-align: middle;
6597 -ms-touch-action: manipulation;
6598 touch-action: manipulation;
6599 cursor: pointer;
6600 -webkit-user-select: none;
6601 -moz-user-select: none;
6602 -ms-user-select: none;
6603 user-select: none;
6604 background-image: none;
6605 border: 1px solid #adadad;
6606 border-radius: 4px;
6607 margin-right:10px;
6608 }
6609
6610 .activeRating{
6611 border: 2px solid #2673B0;
6612 }
6613 .bbtn:focus{
6614 color: #333;
6615 background-color: transparent;
6616 border-color: #2673B0
6617 }
6618 }
6619
6620 #plings-panel,#likes-panel{
6621 .u-wrap{
6622 float: left;
6623 padding: 0.3em;
6624 border: 0.35em solid #dee0e0;
6625 border-radius: 5px;
6626 height: 14em;
6627 margin-bottom: 1em;
6628 background: white;
6629 width: 115px;
6630 height: 200px;
6631 margin-right: 10px;
6632 -webkit-transition: all 0.2s ease-out;
6633 -moz-transition: all 0.2s ease-out;
6634 -ms-transition: all 0.2s ease-out;
6635 -o-transition: all 0.2s ease-out;
6636 position:relative;
6637 text-align: center;
6638 font-size: small;
6639 img{
6640 width: 100%;
6641 border: 1px solid #dbdbdb;
6642 -webkit-border-radius: 999px;
6643 -moz-border-radius: 999px;
6644 border-radius: 999px;
6645 -webkit-background-clip: padding-box;
6646 -moz-background-clip: padding;
6647 background-clip: padding-box;
6648 }
6649 div.username{
6650 max-width: 100px;
6651 overflow: hidden;
6652 padding:5px;
6653 }
6654 div.bottom-title{
6655 position: absolute;
6656 right: 2px;
6657 bottom: 0;
6658 }
6659
6660 }
6661
6662 }
6663
6664 .tooltipuserplingscontainer{
6665 .user{
6666 display: block;
6667 float: left;
6668 text-align: center;
6669 width: 60px;
6670 overflow: hidden;
6671 img{
6672 width:40px;
6673 height:40px;
6674 border:1px solid #ccc;
6675 border-radius: 999px;
6676 }
6677 .caption{
6678 display: block;
6679 }
6680 }
6681 }
6682
6683
6684 #affiliates-panel {
6685 .u-wrap {
6686 float: left;
6687 padding: .3em;
6688 border: .35em solid #dee0e0;
6689 border-radius: 5px;
6690 height: 14em;
6691 margin-bottom: 1em;
6692 background: #fff;
6693 width: 115px;
6694 height: 200px;
6695 margin-right: 10px;
6696 -webkit-transition: all .2s ease-out;
6697 -moz-transition: all .2s ease-out;
6698 -ms-transition: all .2s ease-out;
6699 -o-transition: all .2s ease-out;
6700 position: relative;
6701
6702 figure img {
6703 width: 100%;
6704 border: 1px solid #dbdbdb;
6705 -webkit-border-radius: 999px;
6706 -moz-border-radius: 999px;
6707 border-radius: 999px;
6708 -webkit-background-clip: padding-box;
6709 -moz-background-clip: padding;
6710 background-clip: padding-box;
6711 }
6712
6713 h3 {
6714 font-size: 13px;
6715 font-weight: 700;
6716 word-wrap: break-word;
6717 line-height: 20px;
6718 height: 20px;
6719 padding: 0;
6720 margin: 0;
6721 }
6722 span.small {
6723 position: absolute;
6724 bottom: 5px;
6725 left:5px;
6726 }
6727 }
6728
6729 }
6730
6731 .containerduplicates
6732 {
6733
6734 background-color:#fff;
6735 min-height:300px;min-width:1000px; max-height:500px; overflow:auto;
6736 .row{
6737 border-bottom:1px solid #ddd;
6738
6739 }
6740 }
6741
6742 /*
6743 * Rating Begin
6744 */
6745 .rating-label
6746 {
6747 padding: .0em 1em 0em;
6748 color: #fff;
6749 border-radius: .25em;
6750 font-weight: 700;
6751 font-size: 90%;
6752 cursor: pointer;
6753
6754 &-highlight{
6755 border: 1px solid #2185D0;
6756 }
6757 }
6758
6759 #productRelationshipPanel{
6760 .react-autosuggest__inputContainer{
6761 padding-bottom: 10px;
6762 }
6763 .react-autosuggest__suggestions-container--open
6764 {
6765 width: 200px;
6766 }
6767 .react-autosuggest__input
6768 {
6769 width:200px;
6770 padding-left: 20px
6771 }
6772 .suggestionsContainer
6773 {
6774 display: flex;
6775 padding: 3px 5px;
6776 .description{
6777 display: flex;
6778 margin-left: 10px;
6779 text-align: left;
6780 flex-flow: column;
6781 span{
6782 line-height: 20px;
6783 }
6784 span.small{
6785 font-size: small;
6786 }
6787 }
6788 }
6789 }
6790
6791 #productRatingContainer2
6792 {
6793 .mini-card
6794 {
6795 @media(max-width:550px){
6796 width: 50%;
6797
6798 }
6799 }
6800 }
6801
6802
6803
6804 /*******************************************************/
6805 /*************** DARK THEME ****************************/
6806 /*******************************************************/
6807
6808
6809 @black:#121212;
6810 @black2:#232323;
6811 @black3:#343434;
6812 @black4:#454545;
6813
6814
6815 .user-settings-item-title {
6816 width:80px !important;
6817 }
6818
6819 #metaheader {
6820
6821 #metaheader-nav {
6822
6823 .metamenu-theme-dark {
6824 #site-header-search-form #search-form input[type="text"] {
6825 background-color: @black4 !important;
6826 }
6827 #user-login-menu-container .user-dropdown .dropdown-menu .user-settings-item {
6828 border-bottom: 1px solid #454545 !important;
6829 }
6830 #user-context-menu-container .user-dropdown .dropdown-menu li a span,
6831 #about-menu-container .user-dropdown .dropdown-menu li a span,
6832 #development-app-menu-container .user-dropdown .dropdown-menu li a span {
6833 color:white !important;
6834 }
6835
6836 #development-app-menu-container .user-dropdown .dropdown-menu li:hover a {
6837 background-color: @black3 !important;
6838 color: white !important;
6839 }
6840
6841
6842 &.metamenu {
6843 background-color: @black3 !important;
6844 color: white !important;
6845
6846 a {
6847 color: white;
6848 }
6849 }
6850
6851 ul.metaheader-menu {
6852
6853 >li>a {
6854 color: white !important;
6855
6856 &:hover {
6857 background-color: @black4 !important;
6858 }
6859 }
6860
6861 >li.active {
6862 background-color: @black !important;
6863 }
6864
6865 >li .dropdown-menu::before {
6866 border-bottom-color:@black2 !important;
6867 }
6868
6869 }
6870
6871 #user-login-menu-container .user-dropdown .dropdown-menu #user-info-section {
6872 background-color: @black2;
6873
6874 .user-details #user-details-username,
6875 .user-details #user-details-email {
6876 color: white;
6877
6878 b {
6879 color: white;
6880 }
6881 }
6882 }
6883
6884 #user-login-menu-container .user-dropdown .dropdown-menu li.buttons {
6885 background-color: @black2;
6886
6887 ul li {
6888 &:hover {
6889 background-color: @black3;
6890 }
6891 }
6892 }
6893
6894 #user-login-menu-container .user-dropdown .dropdown-menu #user-info-menu-item,
6895 #user-login-menu-container .user-dropdown .dropdown-menu .user-info-payout {
6896 border-bottom: 1px solid @black3;
6897 }
6898
6899 .user-dropdown .dropdown-menu li.buttons .btn {
6900 color: white !important;
6901 background-color: @black3 !important;
6902 border: 1px solid @black4 !important;
6903
6904 &:hover {
6905 background: @black4 !important;
6906 }
6907 }
6908
6909 .dropdown-menu {
6910 background-color: @black2 !important;
6911
6912 li {
6913
6914 a {
6915
6916 color: white !important;
6917 }
6918 }
6919
6920 li>a:hover,
6921 .active>a,
6922 .active>a:hover {
6923 background-color: @black3 !important;
6924 color: white !important;
6925 }
6926
6927 .user-settings-item {
6928 background-color: @black2 !important;
6929 border-color: @black3 !important;
6930 }
6931 }
6932
6933 .dropdown-menu li>a:hover, .dropdown-menu .active>a, .dropdown-menu .active>a:hover {
6934 background-color: @black3 !important;
6935 color: white !important;
6936 }
6937
6938 ul.metaheader-menu>li>a:active, ul.metaheader-menu>li>a:hover {
6939 background-color: @black4 !important;
6940 color: white !important;
6941 }
6942
6943 #user-login-menu-container .user-dropdown .dropdown-menu .user-settings-item {
6944 background-color: @black2 !important;
6945
6946 span {
6947 display: inline-block;
6948 color: white;
6949 }
6950 }
6951
6952 #development-app-menu-container .user-dropdown .dropdown-menu li {
6953 border: 1px solid transparent;
6954 &:hover {
6955 color: white;
6956 background-color: @black2;
6957 border-color: transparent !important;
6958 }
6959 }
6960
6961 }
6962
6963 }
6964
6965 .react-autosuggest__suggestions-container--open {
6966 background-color:@black2;
6967 border-color: @black4;
6968
6969 .react-autosuggest__suggestion--highlighted {
6970 background-color: @black3 !important;
6971 }
6972 }
6973 }
6974
6975 .dark-theme {
6976
6977 background-color: @black;
6978 color: #eaeaea !important;
6979
6980 #site-header {
6981 background: @black2 !important;
6982 color: white !important;
6983 }
6984
6985 #site-header #siter-header-pling .pling-section-header .supporter-container.open .dropdown-menu {
6986 background-color: @black !important;
6987 }
6988
6989 #site-header #siter-header-pling .pling-section-header .supporter-container.open .dropdown-menu::before {
6990 border-bottom-color: @black !important;
6991 }
6992
6993 #explore-content {
6994
6995 #category-tree #category-tree-header a {
6996 background-color: @black3;
6997 color: white;
6998 }
6999 }
7000
7001 #category-tree-container ul li a {
7002 color: white !important;
7003 }
7004
7005 .startpage-store .sidebar-left {
7006 background-color: @black;
7007 border-right: @black2;
7008 }
7009
7010 .startpage-store .sidebar-right {
7011 background-color: @black;
7012 border-left: @black2;
7013 }
7014
7015 #explore-content .sidebar-right-info {
7016 background-color:@black2;
7017 }
7018
7019 #explore-content .downloadDiv {
7020 background-color: transparent !important;
7021 }
7022
7023 #featureProductsContainer .feature_container .main_container {
7024 border: 1px solid @black3;
7025 background-color:@black2;
7026 }
7027
7028 #carousel-module-container .product-carousel.two .product-carousel-container .product-carousel-slider .product-carousel-item .product-carousel-item-wrapper {
7029 border: 1px solid @black3;
7030 background-color: @black2;
7031 }
7032
7033 #carousel-module-container .product-carousel.two .product-carousel-container .product-carousel-slider .product-carousel-item figure {
7034 border-bottom: 1px solid @black3;
7035 background: white;
7036 border-radius: 3px 3px 0 0;
7037 }
7038
7039 #carousel-module-container .product-carousel.two .product-carousel-container .product-carousel-slider .product-carousel-item .product-info span {
7040 color: white;
7041 }
7042
7043 #carousel-module-container .product-carousel .product-carousel-wrapper .carousel-arrow.disabled {
7044 background-color: @black2 !important;
7045 }
7046
7047 #carousel-module-container .product-carousel .product-carousel-wrapper .carousel-arrow {
7048 background-color: @black3 !important;
7049 border-color: @black4 !important;
7050 }
7051
7052 #carousel-module-container .product-carousel .product-carousel-wrapper .carousel-arrow.active,
7053 #carousel-module-container .product-carousel .product-carousel-wrapper .carousel-arrow:hover {
7054 background-color: @black4 !important;
7055 }
7056
7057
7058 .blockContainer {
7059 background: @black2;
7060 border: 1px solid @black3;
7061
7062 .header {
7063 border-bottom: 1px solid @black3 !important;
7064 }
7065
7066 .productrow {
7067 border-bottom: 1px solid @black3 !important;
7068 }
7069 }
7070
7071 #explore-content .bgwhite {
7072 background-color: @black3;
7073 border: @black4;
7074 }
7075
7076 .prod-widget-box {
7077 border: 1px solid @black4 !important;
7078 }
7079
7080 .commentstore {
7081 border-bottom: 1px solid @black4 !important;
7082 }
7083
7084 .startpage-store .sidebar-right #blogJson,
7085 .startpage-store .sidebar-right #rss-feeds,
7086 .startpage-store .sidebar-right #lastcomments {
7087 border: 1px solid @black4 !important;
7088 }
7089
7090 footer {
7091 background-color: @black2 !important;
7092 border-top: 1px solid @black3 !important;
7093 }
7094
7095 footer nav#footer-nav ul li {
7096 color: white !important;
7097 }
7098 footer nav#footer-nav ul li a,
7099 footer nav#footer-nav ul li span {
7100 color: white !important;
7101 }
7102
7103 .pling-nav-tabs ul.nav-tabs>li>a {
7104 color: white;
7105 }
7106
7107 .nav-tabs {
7108 border-bottom: 1px solid @black4 !important;
7109 }
7110
7111 .explore-products .product-list .explore-product {
7112 border-top: 1px solid #454545;
7113 }
7114
7115 #category-tree #category-tree-header a {
7116 background-color: @black2;
7117 }
7118
7119 #media-slider .swiper-wrapper .slide-item.image {
7120 background-color: @black !important;
7121 max-height: 100%;
7122 }
7123
7124 #product-page-content #product-main-img #product-title-div span.source {
7125 color: white;
7126 }
7127
7128 #product-page-content #product-panels {
7129 background: none repeat scroll 0 0 transparent;
7130
7131 .tab-pane {
7132 background-color: transparent;
7133 }
7134 }
7135
7136 textarea {
7137 color: #333 !important;
7138 }
7139
7140 #product-maker {
7141 background-color: @black !important;
7142 color: white !important;
7143
7144 .amount_predefined input {
7145 color: white !important;
7146 }
7147 }
7148
7149 .popover {
7150 background-color: @black3 !important;
7151 }
7152
7153 #product-browse-container #product-browse-item-list .product-browse-item .wrapper {
7154 background-color: @black3;
7155 }
7156
7157 #plings-panel .u-wrap, #likes-panel .u-wrap {
7158 background-color: @black2;
7159 border-color: @black3;
7160 }
7161
7162 .about-me-page .header .summary article {
7163 background-color: @black2;
7164 border-color: @black4;
7165 }
7166
7167 .about-me-page .header .summary article .about-title {
7168 background-color: @black3;
7169 border-bottom: 1px solid @black4;
7170 }
7171
7172 .about-me-page .header .summary article .about-title figure {
7173 border-color: @black4;
7174 }
7175
7176
7177 .about-me-page aside .details {
7178 float: left;
7179 width: 100%;
7180 height: auto;
7181 padding: .5em;
7182 background-color:@black2;
7183 word-break: break-all;
7184 border-color: @black4;
7185 }
7186
7187 .about-me-page aside .details h3 {
7188 color: white;
7189 border-color: #454545;
7190 }
7191
7192 .mini-card .u-wrap {
7193 border: 2px solid @black4;
7194 background-color: @black2;
7195 }
7196
7197 .mini-card .u-wrap:hover {
7198 border-color: #454545;
7199 background: #343434;
7200 }
7201
7202 .mini-card .u-wrap a {
7203 color: white;
7204 }
7205
7206 .mini-card .u-wrap .u-content .productCategory {
7207 color: white;
7208 }
7209
7210 #home-main-container .middle .panelContainer {
7211 background: #232323 !important;
7212 border: 1px solid #343434 !important;
7213 color:#c3c3c3 !important;
7214 }
7215
7216 #home-main-container .middle .panelContainer div.title {
7217 color: white;
7218 border-color: @black3 !important;
7219 }
7220
7221 #home-main-container .middle .panelContainer ul li+li,
7222 #home-main-container .middle .panelContainer ol li+li {
7223 color: #cccccc;
7224 border-color: @black4;
7225 }
7226
7227 #home-main-container .top {
7228 color: white;
7229 }
7230
7231 #home-main-container .top .personal-container-top ul#personal-links-container li {
7232 border: 1px solid #454545;
7233
7234 &:hover {
7235 background-color: @black4 !important;
7236 }
7237 }
7238
7239 #home-main-container .top .personal-container-top ul#personal-links-container li a span {
7240 color: white;
7241 }
7242
7243 input, textarea, select, option {
7244 background-color: @black3 !important;
7245 border-color: @black4 !important;
7246 color: white !important;
7247 }
7248
7249 #media-slider {
7250 background-color: transparent !important;
7251 }
7252
7253 #book-reader-wrapper #book-pager div span {
7254 margin-right: 5px;
7255 color: black;
7256 }
7257
7258 .user-admin-page .body-wrap {
7259 background-color: @black !important;
7260 color: white !important;
7261 }
7262
7263 .panel {background-color: @black2 !important;}
7264
7265 #home-main-container a,
7266 #home-main-container .middle .panelContainer ul li .title,
7267 #home-main-container .middle .panelContainer ol li .title,
7268 #home-main-container .middle .panelContainer ul li .info-row,
7269 #home-main-container .middle .panelContainer ol li .info-row {
7270 color: #cccccc;
7271 }
7272
7273 #home-main-container a {
7274 color: #efefef;
7275 text-decoration: none;
7276 cursor: pointer;
7277 }
7278
7279 .wizard>.content {
7280 background-color: transparent;
7281 }
7282
7283 .wizard>.content>.body {
7284 padding: 2.5% 0;
7285 }
7286
7287 .user-admin-page .head-wrap .about-me-header .user-menu {
7288 background-color: @black3 !important;
7289 border-color: @black4 !important;
7290 }
7291
7292 .user-admin-page .head-wrap .about-me-header figure {
7293 background-color: @black3 !important;
7294 border-color: @black4 !important ;
7295 }
7296
7297 .socialrow {
7298 border-color: @black4;
7299 }
7300
7301 .about-me-page .header .summary article .about-title figure {
7302 background-color: @black4;
7303 }
7304
7305 #my-comments-tabs-content .productrow {
7306 background-color: @black4;
7307 }
7308
7309 #pling-section-content .pling-section-header {
7310 background-color:@black2;
7311 }
7312
7313 #pling-section-content .pling-section-detail .pling-section-detail-right .support-container {
7314 background-color: @black3;
7315 border-color: @black4;
7316 margin-bottom: 20px;
7317
7318 h5 {
7319 color: white !important;
7320 }
7321
7322 .tiers, .tier-container {
7323 border-color: @black4 !important;
7324 }
7325 }
7326
7327 .x-donation-widget {
7328 border-color: @black3;
7329
7330 .tabs-footer {
7331 background-color: black;
7332 }
7333 }
7334
7335 .popover-title {
7336 background-color: @black2 !important;
7337 }
7338
7339 .popover.top>.arrow::after {
7340 border-color: @black2 !important;
7341 // background-color: @black2 !important;
7342 }
7343 .modal-content {
7344 background-color: @black3 !important;
7345 }
7346
7347 .alert-warning {
7348 background-color: @black3 !important;
7349 border-color: @black4 !important;
7350 color: white !important;
7351 }
7352
7353 @media (max-width: 767px) {
7354 #product-page-content #product-page-view #product-main-img #product-title-div .product-title-right {
7355 border: 0 !important;
7356 }
7357 }
7358 }