Warning, /webapps/ocs-webserver/httpdocs/theme/react/assets/less/home-main-container.less is written in an unsupported language. File is not indexed.
0001 //out: ../css/home-main-container.css, sourcemap: true, compress: true
0002
0003 #home-main-container{
0004 display: flex;
0005 flex-wrap: wrap;
0006 display: -webkit-flex; /* Safari */
0007 -webkit-flex-wrap: wrap; /* Safari 6.1+ */
0008 list-style: none;
0009 margin:0;
0010 padding: 0;
0011 font-family: Verdana,"Bitstream Vera Sans",Arial,Helvetica,Sans,"Bitstream Vera Serif";
0012 color: #706c64;
0013 font-size: 8pt;
0014 line-height: 16px;
0015 a{
0016 color:#444;
0017 text-decoration: none;
0018 cursor: pointer;
0019 }
0020 .top{
0021 display: flex;
0022 flex: 0 0 100%;
0023 color:#3D3D3E;
0024 padding-top: 20px;
0025 min-height: 250px;
0026 padding-bottom:20px;
0027 justify-content:center;
0028 border-top:1px solid #706C64;
0029 a{
0030 color:#2673b0;
0031 text-decoration: none;
0032 cursor: pointer;
0033 &:hover,&:focus
0034 {
0035 color: #23527c;
0036 }
0037 }
0038 .introduction{
0039 margin: 0px;
0040 line-height: 1.5;
0041 color: inherit;
0042 text-align: center;
0043 width: 100%;
0044 text-align: center;
0045 .introduction-head{
0046 width: 90%;
0047 max-width: 1200px;
0048 display: block;
0049 margin: 0 auto;
0050 .intro-menu{
0051 display: inline-block;
0052 width: 100%;
0053 padding-bottom: 5px;
0054 }
0055 .intro-desc{
0056 h1{
0057 font-size: 28px;
0058 }
0059 h4{
0060 font-size: 18px;
0061 }
0062 width: 550px;
0063 display: block;
0064 margin: 0 auto;
0065
0066 .lightbox {
0067 /** Default lightbox to hidden */
0068 display: none;
0069
0070 /** Position and style */
0071 position: fixed;
0072 z-index: 999;
0073 width: 100%;
0074 height: 100%;
0075 text-align: center;
0076 top: 0;
0077 left: 0;
0078 background: rgba(0,0,0,0.8);
0079 img {
0080 /** Pad the lightbox image */
0081 max-width: 90%;
0082 max-height: 80%;
0083 margin-top: 2%;
0084 }
0085 &:target {
0086 /** Remove default browser outline */
0087 outline: none;
0088 /** Unhide lightbox **/
0089 display: block;
0090 }
0091 }
0092 .lightbox-container {
0093 color: #333;
0094
0095 max-width: 480px;
0096 margin: 60px auto 0 auto;
0097 background: #fff;
0098 padding: 40px;
0099 border-radius: 6px;
0100 background: #fff url(../img/home/opendesktop-logo-mono.png) no-repeat 280px center;
0101 h2{
0102 text-align: left;
0103 }
0104 ul li {
0105 padding: 0;
0106 width: auto;
0107 float: none;
0108 text-align: left;
0109 &:before {
0110 content: " ";
0111 display: inline-block;
0112 width: 12px;
0113 height: 6px;
0114 background: #D1D3DF;
0115 margin-right: 12px;
0116 margin-bottom: 4px;
0117 border-radius: 4px;
0118 }
0119 }
0120 }
0121 }
0122 ul{
0123 list-style: none;
0124 padding-left: 0px;
0125 font-size: 20px;
0126 width: 100%;
0127 li{
0128 padding: 15px;
0129 display: block;
0130 color: #706C64;
0131 /*padding: 15px;*/
0132 width: 50%;
0133 float: left;
0134 text-align: center;
0135 padding-bottom: 0px;
0136 .showmore{
0137 font-size: 18px;
0138
0139 }
0140 a{
0141 display: block;
0142 width: 100%;
0143 font-size: 1.5rem;
0144 &:hover{
0145 opacity:.8;
0146 }
0147 }
0148
0149 span.link-image{
0150
0151 padding-top: 34px;
0152 padding-bottom: 34px;
0153 display: block;
0154 cursor: pointer;
0155 background-repeat: no-repeat;
0156 background-size: cover;
0157 border-radius: 6px;
0158 color: #fff;
0159 font-size: 1.4rem;
0160 font-weight: bold;
0161 text-decoration: none;
0162 text-shadow: 2px 4px 4px rgba(0,0,0,0.6);
0163 }
0164 span.link-code
0165 {
0166 background-image: url(../img/home/code-block-background.jpg);
0167 }
0168 span.link-publish
0169 {
0170
0171 background-image: url(../img/home/publish-block-background.jpg);
0172
0173 }
0174 span.link-community
0175 {
0176 background-image: url(../img/home/community-block-background.jpg);
0177 }
0178 span.link-personal
0179 {
0180 background-image: url(../img/home/personal-block-background.jpg);
0181 }
0182
0183 .arrowbox{
0184 position: relative;
0185 &:after, &:before
0186 {
0187 top: 100%;
0188 left: 50%;
0189 border: solid transparent;
0190 content: " ";
0191 height: 0;
0192 width: 0;
0193 position: absolute;
0194 pointer-events: none;
0195 }
0196 &:after {
0197 border-color: rgba(136, 183, 213, 0);
0198 border-top-color: #F7F7F7;
0199 border-width: 20px;
0200 margin-left: -20px;
0201 }
0202 &:before {
0203 border-color: rgba(194, 225, 245, 0);
0204 border-top-color: #F7F7F7;
0205 border-width: 26px;
0206 margin-left: -26px;
0207 }
0208 }
0209 }
0210 }
0211 }
0212 .introduction-detail
0213 {
0214 display: block;
0215 width: 100%;
0216 clear:both;
0217
0218 background: url(../img/home/showmore-bg-light-2.jpg) #f2f2f2;
0219 background-repeat: repeat;
0220 background-size: auto;
0221
0222 background-repeat: no-repeat;
0223 border: 0;
0224 font-size: 1.25rem !important;
0225 margin: 0;
0226 font-weight: 400 !important;
0227 line-height: 1.5;
0228 text-rendering: optimizelegibility;
0229 .detail{
0230 min-height: 200px;
0231 //width: 66.66667%;
0232 width: 90%;
0233 max-width: 1200px;
0234 min-height: 270px;
0235 display: block;
0236 margin: 0 auto;
0237 padding: 60px 0;
0238 animation: fadeEffect 1s; /* Fading effect takes 1 second */
0239 position: relative;
0240 h2{
0241 font-size: 3.8rem;
0242 margin: .2em 0;
0243 }
0244 a{
0245 color: #1F95EA;
0246 display: block;
0247 font-size: 1.4rem;
0248 }
0249 .icon-container
0250 {
0251 display: block;
0252 float: left;
0253 .icon{
0254 background-size: 140px;
0255 background-repeat: no-repeat;
0256 width: 140px;
0257 height: 140px;
0258 }
0259 margin-right: 48px;
0260 }
0261 .description{
0262 text-align: left;
0263 margin-left: 120px;
0264 font-size: 2rem !important;
0265 line-height: 1.5;
0266 }
0267 .arrow-down {
0268 background: url(../img/home/indicator-arrow.png) no-repeat;
0269 width: 56px;
0270 height: 26px;
0271 position: absolute;
0272 top: 0;
0273 -webkit-animation: mover 1s infinite alternate;
0274 animation: mover 1s infinite alternate;
0275 }
0276 }
0277 .detail-code
0278 {
0279 .icon{
0280 background-image: url(../img/home/code-icon-rnd.png);
0281 }
0282 .arrow-down {
0283 left: 125px;
0284 }
0285
0286 }
0287 .detail-publish{
0288 .icon{
0289 background-image: url(../img/home/publish-icon-rnd.png);
0290 }
0291 .arrow-down {
0292 left: 425px;
0293 }
0294 }
0295 .detail-community{
0296 .icon{
0297 background-image: url(../img/home/community-icon-rnd.png);
0298 }
0299 .arrow-down {
0300 left: 725px;
0301 }
0302 }
0303 .detail-personal{
0304 .icon{
0305 background-image: url(../img/home/personal-icon-rnd.png);
0306 }
0307 .arrow-down {
0308 left: 1025px;
0309 }
0310 }
0311 }
0312 }
0313 .personal-container-top{
0314 text-align: center;
0315 .userinfo{
0316 text-align: center;
0317 .image-profile{
0318 border-radius: 999px;
0319 width: 100px;
0320 height: 100px;
0321 }
0322 }
0323 ul#personal-links-container
0324 {
0325
0326 list-style: none;
0327 li {
0328 height: auto;
0329 width: 86px;
0330 border: 1px solid white;
0331 margin: 5px 20px 10px 20px;;
0332 float: left;
0333 box-sizing: border-box;
0334 a {
0335 display: block;
0336 width: 100%;
0337 padding: 0;
0338 height: auto;
0339 float: left;
0340
0341 &:hover {
0342 background-color: white ;
0343 }
0344
0345 .icon {
0346 width: 55px;
0347 height: 55px;
0348 margin: 5px auto;
0349 background-size: 50px;
0350 background-position: center center;
0351 background-repeat: no-repeat;
0352 width: 100%;
0353 }
0354
0355 span {
0356 float: left;
0357 width: 100%;
0358 text-align: center;
0359 display: block;
0360 color:rgba(0,0,0,0.87);
0361 font-size: 13px;
0362 }
0363
0364 &:active {
0365 background-color: white;
0366 }
0367 }
0368 &#docs-link-item {
0369 a {
0370 .icon {
0371 background-image: url(../img/logo-docs.png);
0372 background-size: 45px;
0373 }
0374 }
0375 }
0376
0377 &#storage-link-item {
0378 a {
0379 .icon {
0380 background-image: url(../img/logo-storage.png);
0381 background-size: 45px;
0382 }
0383 }
0384 }
0385
0386 &#messages-link-item {
0387 a {
0388 .icon {
0389 background-image: url(../img/pms.png);
0390 background-size: 45px;
0391 }
0392 }
0393 }
0394
0395 &#contacts-link-item {
0396 a {
0397 .icon {
0398 background-image: url(../img/logo-contacts.png);
0399 background-size: 45px;
0400 }
0401 }
0402 }
0403 &#mail-link-item{
0404 a {
0405 .icon {
0406 background-image: url(../img/secure-mail.png);
0407 background-size: 45px;
0408 }
0409 }
0410 }
0411 &#maps-link-item{
0412 a {
0413 .icon {
0414 background-image: url(../img/map.png);
0415 background-size: 45px;
0416 }
0417 }
0418 }
0419 &#mastodon-link-item{
0420 a {
0421 .icon {
0422 background-image: url(../img/logo-mastodon.png);
0423 background-size: 45px;
0424 }
0425 }
0426 }
0427 &#calendar-link-item {
0428 a {
0429 .icon {
0430 background-image: url(../img/logo-calendar.png);
0431 background-size: 45px;
0432 }
0433 }
0434 }
0435
0436 &#music-link-item {
0437 a {
0438 .icon {
0439 background-image: url(../img/logo-music.png);
0440 background-size: 45px;
0441 }
0442 }
0443 }
0444 &#chat-link-item {
0445
0446 a {
0447 .icon {
0448 background-image: url(../img/chat.png);
0449 background-size: 45px;
0450 }
0451 }
0452 }
0453 &#pling-link-item{
0454 a {
0455 .icon {
0456 background-image: url(../img/logo-pling.png);
0457 background-size: 45px;
0458 }
0459 }
0460 }
0461 &#opencode-link-item{
0462 a {
0463 .icon {
0464 background-image: url(../img/logo-opencode.png);
0465 background-size: 45px;
0466 }
0467 }
0468 }
0469
0470
0471
0472 }
0473
0474 }
0475 }
0476 }
0477
0478 .middle{
0479 flex:1;
0480 display: flex;
0481 flex-direction: row;
0482 flex-wrap: wrap;
0483 justify-content: center;
0484 max-width: 1420px;
0485 margin: 0 auto;
0486 .placeholder{
0487 width: 25%;
0488 margin: 0px 5px 5px 0;
0489 }
0490 .panelContainer{
0491 border: 1px solid #ccc;
0492 border-radius: 5px;
0493 background-image: url(../img/home/back3.jpg);
0494 padding: 8px;
0495 margin: 0px 5px 5px 0;
0496 width:320px;
0497 div.title{
0498 color: #888888;
0499 font-size:11pt;
0500 font-weight: bold;
0501 border-bottom: 1px solid #ccc;
0502 height: 20px;
0503 padding-left: 5px;
0504 margin-bottom: 10px;
0505
0506 color: #888888;
0507 font-size: 9pt;
0508
0509 }
0510 .chatUser
0511 {
0512 width: 100%;
0513 display: inline-block;
0514 min-height: 45px;
0515 line-height: 42px;
0516 padding-left: 15px;
0517 img{
0518 width: 42px;
0519 height: 42px;
0520 border-radius: 100%;
0521 display: block;
0522 float: left;
0523 }
0524 .name{
0525 margin-left: 50px;
0526 display: block;
0527 }
0528
0529 }
0530
0531 ul, ol {
0532 list-style: none;
0533 padding-left: 5px;
0534 li {
0535 padding: 5px 0px;
0536 &.chatMember{
0537 a{
0538 font-size: 9pt;
0539 font-weight: bold;
0540 }
0541 }
0542 .productrow
0543 {
0544 padding-bottom: 5px;
0545 padding-top: 5px;
0546 font-size: small;
0547
0548 .rating
0549 {
0550 width: 60px;
0551 }
0552 .time
0553 {
0554 font-size: smaller;
0555 }
0556 .cntComments
0557 {
0558 font-size: smaller;
0559 display: block;
0560 padding-top: 5px;
0561
0562 }
0563 .defaultProjectAvatar{
0564 width: 50px;
0565 height: 50px;
0566 color: #3B658A;
0567 line-height: 50px;
0568 text-align: center;
0569 background-color: #e8eaf6;
0570 }
0571 .productimg
0572 {
0573 width:50px;
0574 height:50px;
0575 }
0576 .product-user{
0577 width: 42px;
0578 height: 42px;
0579 border-radius: 100%;
0580 }
0581 .commenttext{
0582 padding-left: 20px;
0583
0584 }
0585 .product-info {
0586 span {
0587 display: block;
0588 float: left;
0589 width: 100%;
0590 line-height: 14px;
0591 height: auto;
0592
0593 &.product-info-title {
0594 color: #444444;
0595 font-size: 10pt;
0596 font-weight: bold;
0597 display: block;
0598 }
0599 &.product-info-date{
0600 padding-top: 10px;
0601 }
0602
0603
0604 &.product-info-user {
0605 color: #666;
0606 }
0607 }
0608 }
0609 .score-info {
0610 text-align: center;
0611 width: 80%;
0612 .score-number {
0613 width: 100%;
0614 text-align: center;
0615 margin-bottom: 0px;
0616 font-size: 8pt;
0617 }
0618
0619 .score-bar-container {
0620 width: 100%;
0621 height: 10px;
0622 background: #ccc;
0623 margin-bottom: 5px;
0624
0625 .score-bar {
0626 height: 9px;
0627 background-color: #30c830;
0628 border-bottom: 1px solid darken( #30c830,5%);
0629 }
0630 }
0631 }
0632 }
0633 .cm-content{
0634 min-height: 60px;
0635 .cm-userinfo {
0636
0637 float: right;
0638 width: 80px;
0639 text-align: center;
0640 padding: 3px;
0641
0642 img {
0643 width: 42px;
0644 height: 42px;
0645 border-radius: 100%;
0646 }
0647
0648 .username {
0649 display: block;
0650 text-align: center;
0651 overflow: hidden;
0652 white-space: nowrap;
0653 text-overflow: ellipsis;
0654 font-size: small;
0655
0656 }
0657 }
0658 }
0659 .title, .info-row {
0660 display: block;
0661 width: 100%;
0662 color: #777777;
0663 }
0664
0665 .title {
0666 color: #444444;
0667 font-size: 10pt;
0668 font-weight: bold;
0669 }
0670
0671 .content {
0672 font-size: 13px;
0673 line-height: 1;
0674 }
0675
0676 .info-row {
0677 /*overflow: auto;
0678 */
0679
0680 span {
0681 /*
0682 float: left;
0683 display: inline-block;
0684 font-size: 12px;
0685 */
0686
0687 &.comment-counter {
0688 float: right;
0689 }
0690 }
0691 }
0692 }
0693
0694 li + li {
0695 border-top:1px solid #ccc;
0696 }
0697 }
0698
0699 }
0700
0701 }
0702
0703
0704 }
0705
0706 @keyframes fadeEffect {
0707 from {opacity: 0;}
0708 to {opacity: 1;}
0709 }
0710
0711 @-webkit-keyframes mover {
0712 0% { transform: translateY(0); }
0713 100% { transform: translateY(-10px); }
0714 }
0715
0716 @keyframes mover {
0717 0% { transform: translateY(0); }
0718 100% { transform: translateY(-10px); }
0719 }
0720 // Small devices (landscape phones, 576px and up)
0721 @media only screen and (min-width: 576px) {
0722 .arrow-down { display: none; }
0723 }
0724
0725 // Medium devices (tablets, 768px and up)
0726 @media only screen and (min-width: 768px) {
0727 .arrow-down { display: none; }
0728
0729 }
0730
0731 // Large devices (desktops, 992px and up)
0732 @media only screen and (min-width: 992px) {
0733 #home-main-container .top .introduction .introduction-head ul li { width: 25%; }
0734 .arrow-down { display: block; }
0735 }
0736
0737 // Extra large devices (large desktops, 1200px and up)
0738 @media only screen and (min-width: 1200px) {
0739 #home-main-container .top .introduction .introduction-head ul li { width: 25%; }
0740 .arrow-down { display: block; }
0741 }