Warning, /webapps/ocs-webserver/httpdocs/theme/react/assets/less/community.less is written in an unsupported language. File is not indexed.
0001 out: ../css/community.css, sourcemap: true, compress: true
0002 @import "elements.less";
0003
0004 #community-page {
0005 font-size: 14px;
0006
0007 .ajax-loader {
0008 height: 24px;
0009 width: 24px;
0010 background-image: url('../img/ajax-loader.gif');
0011 background-position: center center;
0012 background-repeat: no-repeat;
0013 }
0014
0015 #community-page-header {
0016 text-align: center;
0017 width: 100%;
0018 float: left;
0019 margin-bottom: 20px;
0020
0021 h1 {
0022 margin-bottom: 40px;
0023 }
0024
0025 #community-page-header-banner {
0026 display: table;
0027 margin: 0 auto;
0028 float: none;
0029 background: #fff;
0030 border: 1px solid #e4e4e4;
0031 padding: 0;
0032 border-radius: 10px;
0033
0034 #header-banner-top {
0035 padding: 1em;
0036 font-size: 1em;
0037
0038 .header-banner-row {
0039 margin-bottom: 10px;
0040
0041 p {
0042 margin: 0;
0043 font-size: 2em;
0044 }
0045
0046 span {
0047 font-size: 12px;
0048 }
0049 }
0050
0051 p {
0052
0053 }
0054 }
0055
0056 #header-banner-bottom {
0057 padding: 1em;
0058 background: rgba(231,231,231,.4);
0059 border-top: 1px solid #e4e4e4;
0060 border-radius: 0 0 9px 9px;
0061
0062 .center {
0063 font-size: 14px;
0064 .btn {
0065 margin-right: 10px;
0066 }
0067 }
0068 }
0069 }
0070 }
0071
0072 #community-page-tabs-container {
0073 width: 100%;
0074 float: left;
0075
0076 #tabs-menu {
0077 float: left;
0078 width:100%;
0079 border-bottom: 1px solid #ddd;
0080 margin-bottom: 20px;
0081 text-align: center;
0082
0083 .tab-menu-item {
0084 .transition();
0085 border-bottom: 2px solid transparent;
0086 padding: 0 10px;
0087 margin-bottom: -1px;
0088 float: none;
0089 display: inline-block;
0090
0091 a {
0092 .transition();
0093 font-size: 13px;
0094 padding: 10px 15px;
0095 cursor: pointer;
0096 display: block;
0097 color:#777;
0098 }
0099
0100 &:hover {
0101 a {
0102 color: #2673b0;
0103 }
0104 }
0105 &.active {
0106 a {
0107 color: #2673b0;
0108 font-weight: bold;
0109 }
0110 border-bottom-color: #2673b0;
0111 }
0112 }
0113 }
0114
0115 #tabs-content {
0116 float: left;
0117 width: 100%;
0118
0119 .community-tab {
0120 float: left;
0121 width: 100%;
0122
0123 ul,ol {
0124 list-style-type: none;
0125
0126 .list-item {
0127 .list-item-template {
0128 width: 100%;
0129 height: 100%;
0130 display: block;
0131 .user {
0132 figure {
0133 float: left;
0134 padding: .25em;
0135 border: 1px solid #dbdbdb;
0136 background: #f6f6f6;
0137 -webkit-border-radius: 999px;
0138 -moz-border-radius: 999px;
0139 border-radius: 999px;
0140 -webkit-background-clip: padding-box;
0141 -moz-background-clip: padding;
0142 background-clip: padding-box;
0143 width: 96px;
0144 height: 96px;
0145
0146 img {
0147 vertical-align: middle;
0148 width: 100%;
0149 border: 1px solid #dbdbdb;
0150 -webkit-border-radius: 999px;
0151 -moz-border-radius: 999px;
0152 border-radius: 999px;
0153 -webkit-background-clip: padding-box;
0154 -moz-background-clip: padding;
0155 background-clip: padding-box;
0156 }
0157 }
0158 }
0159 }
0160 }
0161 }
0162
0163 &.card-list-display {
0164
0165 ul, ol {
0166 margin: auto;
0167 padding-right: 15px;
0168 padding-left: 15px;
0169 display: flex;
0170 flex-wrap: wrap;
0171 align-items: center;
0172 justify-content: center;
0173
0174 li {
0175 width: 115px;
0176 height: 200px;
0177 margin-right: 5px;
0178 float: left;
0179 width: 100%;
0180 padding: .3em;
0181 border: .35em solid #dee0e0;
0182 border-radius: 5px;
0183 height: 14em;
0184 margin-bottom: 1em;
0185 background: #fff;
0186 width: 115px;
0187 height: 200px;
0188 margin-right: 10px;
0189 position: relative;
0190 text-align: center;
0191 .transition();
0192
0193 .user-display-container {
0194 float: left;
0195 width: 100%;
0196 height: 100%;
0197 position: relative;
0198
0199 .user {
0200
0201 span.username {
0202 font-size: 13px;
0203 font-weight: 700;
0204 word-wrap: break-word;
0205 line-height: 20px;
0206 height: 20px;
0207 padding: 0;
0208 margin: 0;
0209 display: block;
0210 width: 100%;
0211 float: left;
0212 }
0213
0214 span.user-created {
0215 color: #333;
0216 display: block;
0217 position: absolute;
0218 left: 0;
0219 bottom: 0;
0220 width: 100%;
0221 font-size: 13px;
0222 text-align: right;
0223 }
0224 }
0225 }
0226 }
0227 }
0228
0229 &#most-pling-product-tab {
0230 .list-item {
0231 .list-ranking {
0232 display: none;
0233 }
0234 .project {
0235 figure {
0236 width: 100%;
0237 height: 80px;
0238 display: block;
0239 position: absolute;
0240 top: 0;
0241 left: 0;
0242 overflow: hidden;
0243
0244 img {
0245 width: 100%;
0246 height: auto;
0247 }
0248 }
0249 .project-info {
0250 display: none;
0251 }
0252 }
0253 .user-display-container {
0254 margin-top: 55px;
0255 width: 100%;
0256 height: 100%;
0257 position: relative;
0258
0259 figure {
0260 width: 50px;
0261 height: 50px;
0262 }
0263
0264 .user-created {
0265 display: none;
0266 }
0267 }
0268 .score-container {
0269 position: absolute;
0270 bottom: 5px;
0271 right: 5px;
0272 font-size: 12px;
0273
0274 img {
0275 width: 15px;
0276 height: 15px;
0277 margin-right: 5px;
0278 }
0279 }
0280 }
0281 }
0282
0283 &#score-tab {
0284 ol,ul {
0285 .list-item {
0286 .scored-wrapper {
0287 width: 100%;
0288 height: 100%;
0289
0290 .user {
0291 height: auto;
0292 .user-created {
0293 display: none;
0294 }
0295 }
0296
0297 .list-ranking {
0298 position: absolute;
0299 bottom: 0;
0300 left: 0;
0301 width: 100%;
0302
0303 .rank {
0304 float: left;
0305 font-size: 30px;
0306 font-size: 33px;
0307 line-height: 33px;
0308 letter-spacing: normal;
0309 text-align: center;
0310 font-weight: 700;
0311 letter-spacing: -1px;
0312 padding: 5px;
0313 }
0314
0315 .sum-plings {
0316 font-size: 13px;
0317 color: #444;
0318 position: absolute;
0319 bottom: 5px;
0320 right: 5px;
0321 }
0322 }
0323 }
0324 }
0325 }
0326 }
0327 }
0328
0329 &.top-list-display {
0330
0331 ul, ol {
0332 background-color: #F5F5F5;
0333 border: 1px solid #e4e4e4;
0334 border-radius: 10px;
0335 width: 100%;
0336 float: left;
0337 padding: 0 10px;
0338
0339 .list-item {
0340 align-items: center;
0341 justify-content: center;
0342 display: flex;
0343 flex-wrap: wrap;
0344 padding: 10px 0;
0345 border-top: 1px solid #ccc;
0346
0347 .list-item-template {
0348 width: auto;
0349 height: auto;
0350 }
0351
0352 .creator-wrapper {
0353 display: flex;
0354
0355 .list-ranking,
0356 .user-display-container,
0357 .score-container {
0358 display: flex;
0359 flex-direction: column;
0360 padding: 0 15px;
0361 }
0362
0363 .list-ranking {
0364 font-size: 33px;
0365 line-height: 33px;
0366 letter-spacing: normal;
0367 text-align: center;
0368 font-weight: 700;
0369 letter-spacing: -1px;
0370 padding: 30px 0;
0371 width: 50px;
0372 }
0373
0374 .user {
0375 figure {
0376 padding: 0;
0377 border: 0;
0378 }
0379 .username {
0380 padding: 40px 30px 0;
0381 display: block;
0382 float: left;
0383 width: 170px;
0384 font-size: 12px;
0385 color: #4e4e4e;
0386 }
0387 .user-created {
0388 display: none;
0389 }
0390 }
0391
0392 .score-container {
0393 font-size: 12px;
0394 display: block;
0395 padding-top: 40px;
0396 img {
0397 width: 15px;
0398 height: 15px;
0399 margin-right: 5px;
0400 }
0401 }
0402 }
0403
0404 &:first-of-type {
0405 border-top: 0;
0406 }
0407 }
0408 }
0409
0410 &#most-pling-creators-tab {
0411 width: 100%;
0412 max-width: 800px;
0413 display: table;
0414 margin: 0 auto;
0415 float: none;
0416 }
0417
0418 &#most-pling-product-tab {
0419 width: 100%;
0420 max-width: 800px;
0421 display: table;
0422 margin: 0 auto;
0423 float: none;
0424
0425 .list-item {
0426
0427 .list-item-template {
0428 width: 100%;
0429
0430 .creator-wrapper {
0431 width: 100%;
0432 display: block;
0433
0434 .left-side-section {
0435 float: left;
0436 display: flex;
0437
0438 .list-ranking {
0439 padding: 37px 0;
0440 }
0441
0442 .project {
0443 position: relative;
0444 padding-left: 118px;
0445
0446 figure {
0447 height: 108px;
0448 width: 108px;
0449 margin-right: 10px;
0450 position: absolute;
0451 top:0;
0452 left: 0;
0453
0454 img {
0455 width: 100%;
0456 height: 100%;
0457 }
0458 }
0459
0460 .project-info {
0461 padding: 30px 10px 0;
0462 max-width: 340px;
0463
0464 .project-title {
0465 font-size: 24px;
0466 margin: 0;
0467 }
0468
0469 .cat-title {
0470 color: #4e4e4e;
0471 font-size: 12px;
0472 font-weight: bold;
0473 }
0474 }
0475 }
0476 }
0477 .right-side-section {
0478 float: right;
0479 display: flex;
0480 }
0481 .user {
0482
0483 figure {
0484 display: none;
0485 }
0486 .username {
0487 margin-top: 55px;
0488 padding-top: 0;
0489 color: #2673b0;
0490 font-weight: bold;
0491 .by {
0492 font-weight: bold;
0493 margin-right: 5px;
0494 color: #4e4e4e;
0495 }
0496 }
0497 }
0498 .score-container {
0499 margin-top: 55px;
0500 padding-top: 0;
0501 .score {
0502 cursor: pointer;
0503 }
0504 }
0505 }
0506 }
0507 }
0508 }
0509
0510 &#score-tab {
0511 width: 100%;
0512 max-width: 800px;
0513 display: table;
0514 margin: 0 auto;
0515 float: none;
0516
0517 .list-item {
0518 .scored-wrapper {
0519 height: 100%;
0520 display: flex;
0521 padding-left: 50px;
0522 padding-right: 50px;
0523 position: relative;
0524 width: 100%;
0525 .user {
0526 .username {
0527 font-size: 12px;
0528 color: #4e4e4e;
0529 padding: 40px 30px 0;
0530 display: flex;
0531 }
0532 .user-created {
0533 display: none;
0534 }
0535 }
0536 .list-ranking {
0537 .rank {
0538 position: absolute;
0539 left: 0;
0540 height: 100%;
0541 float: left;
0542 font-size: 30px;
0543 font-size: 33px;
0544 line-height: 33px;
0545 letter-spacing: normal;
0546 text-align: center;
0547 font-weight: 700;
0548 letter-spacing: -1px;
0549 padding-top: 30px;
0550 }
0551
0552 .sum-plings {
0553 position: absolute;
0554 top: 0;
0555 right:0;
0556 padding-top: 40px;
0557 font-size: 12px;
0558 }
0559 }
0560 }
0561 }
0562 }
0563 }
0564 }
0565 }
0566 }
0567
0568 #loading-container {
0569 width: 100%;
0570 padding: 20px 0;
0571 text-align: center;
0572
0573 .ajax-loader {
0574 margin: 0 auto;
0575 width: auto;
0576 }
0577 }
0578
0579 @userHoverColor:#f1f1f1;
0580
0581 .user-display-container {
0582 position: relative;
0583 .user-hover-display {
0584 position: absolute;
0585 width: 225px;
0586 height: 160px;
0587 padding-left: 8px;
0588 left:0px;
0589 z-index: 100;
0590 top: -70px;
0591 color: #333;
0592
0593 &::before {
0594 content: "";
0595 display: block;
0596 position: absolute;
0597 bottom: 50%;
0598 left: 1px;
0599 width: 0;
0600 height: 0;
0601 border-style: solid;
0602 border-width: 8px 8px 8px 0;
0603 border-color: transparent @userHoverColor transparent transparent;
0604 margin-top: 4px;
0605 }
0606
0607 .user-hover-info {
0608 width: 100%;
0609 height: 100%;
0610 border-radius: 5px;
0611 background-color: @userHoverColor;
0612 padding: 10px;
0613 border: 1px solid darken(@userHoverColor,5%);
0614 font-size: 12px;
0615 text-align: left;
0616
0617 > span {
0618 display: block;
0619 float: left;
0620 width: 100%;
0621 height: 20px;
0622
0623 &.username {
0624 border-bottom: 1px solid #ccc;
0625 margin-bottom: 5px;
0626 }
0627
0628 .glyphicon-heart {
0629 color: purple;
0630 }
0631 }
0632 }
0633
0634 &:hover {
0635 color: #333;
0636 }
0637
0638 &.loading-user {
0639 padding: 50px 170px 65px 8px;
0640 }
0641 }
0642 }
0643
0644 .score-container {
0645
0646 position: relative;
0647
0648 .score-hover-container {
0649 position: absolute;
0650 width: 230px;
0651 height: auto;
0652 padding-left: 8px;
0653 left:100%;
0654 z-index: 100;
0655 color: #333;
0656 top: -17px;
0657
0658 &::before {
0659 content: "";
0660 display: block;
0661 position: absolute;
0662 bottom: 50%;
0663 left: 1px;
0664 width: 0;
0665 height: 0;
0666 border-style: solid;
0667 border-width: 8px 8px 8px 0;
0668 border-color: transparent @userHoverColor transparent transparent;
0669 margin-top: 4px;
0670 }
0671
0672 .score-users-display {
0673 width: auto;
0674 max-width: 230px;
0675 height: auto;
0676 border-radius: 5px;
0677 background-color: @userHoverColor;
0678 padding: 10px;
0679 border: 1px solid darken(@userHoverColor,5%);
0680 font-size: 12px;
0681 text-align: left;
0682 float: left;
0683
0684 .score-user {
0685 float: left;
0686 padding: 5px;
0687 max-width: 50px;
0688
0689 figure {
0690 width: 40px;
0691 height: 40px;
0692 border-radius: 100%;
0693 overflow: hidden;
0694 margin-right: 0;
0695 display: table;
0696 margin: 0 auto;
0697 margin-bottom: 5px;
0698 border: 1px solid #ccc;
0699
0700 img {
0701 width: 100% !important;
0702 height: 100% !important;
0703 margin-right: 0 !important;
0704 }
0705 }
0706
0707 span {
0708 text-align: center;
0709 display: block;
0710 width: 100%;
0711 text-align: center;
0712 display: block;
0713 width: 100%;
0714 font-size: 10px;
0715 overflow: hidden;
0716 height: 14px;
0717 }
0718 }
0719 }
0720 }
0721 }
0722 }