API tools faq
paste
nillbug

app_body.less

nillbug
May 8th, 2019
804
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.21 KB | None | 0 0
raw download clone embed print report
  1. // ######################################### MAIN BODY #################################
  2. //p-body
  3.  
  4. .node + .node{
  5.   border-top: 1px solid @xf-borderColor;
  6. }
  7. .p-body{
  8.   position: relative;
  9.   &:before{
  10.    content: '';
  11.     position: absolute;
  12.     left: 0;
  13.     top: 0;
  14.     width: 100%;
  15.     height: 50px;
  16.     background-color: #f5f5f5;
  17.     z-index: -1;
  18.   }
  19.   .p-body-inner{
  20.     overflow: hidden;
  21.     background: #f5f5f5;
  22.     .p-body-header{
  23.       margin: 0 0 10px;
  24.       .p-title{
  25.         h1{
  26.           font-size: 20px;
  27.           color: #000000;
  28.           font-weight: 600;
  29.           display: flex;
  30.           align-items: center;
  31.           .label{
  32.             color: #f5f5f5 !important;
  33.             font-size: 11px;
  34.             line-height: 20px;
  35.             border-radius: 2px;
  36.             padding: 0 5px;
  37.           }
  38.         }
  39.       }
  40.       .p-description{
  41.         ul{
  42.           li+li+li{
  43.             display: none;
  44.           }
  45.         }
  46.       }
  47.     }
  48.     .p-body-main{
  49.       .p-body-content{
  50.         transition: all 600ms;
  51.         &.edit-padd{
  52.          transition: all 600ms;
  53.           padding-right: 0;
  54.           display: inline-block;
  55.         }
  56.         .p-body-pageContent{
  57.           .block{
  58.             .block-container{
  59.               border: 1px solid @xf-borderColor;
  60.               .block-body{
  61.                 .node{
  62.                   .node-body{
  63.                     .node-icon{
  64.                       padding: 9px 0 9px 10px;
  65.                       i{
  66.                         &:before{
  67.                          text-shadow: none;
  68.                         }
  69.                       }
  70.                     }
  71.                     .node-main{
  72.                       padding: 8px 10px;
  73.                       .node-title{
  74.                         font-size: 13px;
  75.                         line-height: 13px;
  76.                         a{
  77.                           font-weight: 600;
  78.                           line-height: 13px;
  79.                           &:hover{
  80.                            text-decoration: none;
  81.                           }
  82.                         }
  83.                       }
  84.                       .node-meta{
  85.                         font-size: 11px;
  86.                         margin-top: 4px;
  87.                         display: flex;
  88.                         flex-flow: row wrap;
  89.                         .node-statsMeta{
  90.                           display: block;
  91.                           dl{
  92.                             display: inline-block;
  93.                             width: auto;
  94.                             margin-right: 10px;
  95.                             dt{
  96.                               display: inline-block;
  97.                               color: @xf-textColor;
  98.                               font-size: 11px;
  99.                             }
  100.                             dd{
  101.                               display: inline-block;
  102.                               font-size: 11px;
  103.                               color: @xf-textColor;
  104.                             }
  105.                           }
  106.                         }
  107.                       }
  108.                     }
  109.  
  110.                     .node-stats{
  111.                       display: none;
  112.                     }
  113.                     .node-subNodesFlat{
  114.                       .node-subNodeFlatList{
  115.                         li{
  116.                           margin: 0;
  117.                           a{
  118.                             font-size: 11px;
  119.                             color: @xf-paletteColor3;
  120.                             padding: 7px 15px;
  121.                             display: inline-block;
  122.                             border-radius: 2px;
  123.                             position: relative;
  124.                             font-weight: 600;
  125.                             border: 1px solid transparent;
  126.                             &:hover{
  127.                              text-decoration: none;
  128.                               color: @xf-BrvColor1;
  129.                               background: @xf-paletteAccent2;
  130.                               &:before{
  131.                                color: @xf-BrvColor1 !important;
  132.                               }
  133.                             }
  134.                             &.subNodeLink{
  135.                              &.subNodeLink--unread{
  136.                                &:before{
  137.                                  color: @xf-paletteColor3;
  138.                                 }
  139.                               }
  140.                               &:before{
  141.                                content: '\f111';
  142.                                 font-family: "Font Awesome 5 Pro";
  143.                                 text-shadow: none;
  144.                                 font-size: 5px;
  145.                                 font-weight: 900;
  146.                                 position: absolute;
  147.                                 left: 6px;
  148.                                 top: 52%;
  149.                                 transform: translateY(-50%);
  150.                                 color: @xf-paletteColor3;
  151.                               }
  152.                             }
  153.                           }
  154.                         }
  155.                       }
  156.                     }
  157.                     .node-extra{
  158.                       .node-extra-row{
  159.                         .node-extra-title{
  160.                           font-weight: 600;
  161.                           padding-left: 25px;
  162.                           position: relative;
  163.                           &:before{
  164.                            content: '';
  165.                             position: absolute;
  166.                             left: 0;
  167.                             top: 50%;
  168.                             transform: translateY(-50%);
  169.                             background-image: url("{{ base_url() }}styles/brivium/potassium/extra/thread.png");
  170.                             width: 18px;
  171.                             height: 18px;
  172.                           }
  173.                         }
  174.                         li{
  175.                           font-size: 11px;
  176.                         }
  177.                         .node-extra-user{
  178.                           a{
  179.                             color: @xf-paletteColor3;
  180.                             font-size: 11px;
  181.                           }
  182.                         }
  183.                       }
  184.                       .node-extra-placeholder{
  185.                         font-size: 11px;
  186.                       }
  187.                     }
  188.                   }
  189.                   &.node--forum{
  190.                    &.node--read{
  191.                      .node-icon{
  192.                        i{
  193.                          &:before{
  194.                            content: '';
  195.                             display: inline-block;
  196.                             background-image: url("{{ base_url() }}styles/brivium/potassium/extra/node-read.png");
  197.                             width: 30px;
  198.                             height: 25px;
  199.                             background-repeat: no-repeat;
  200.                             background-position: center;
  201.                           }
  202.                         }
  203.                       }
  204.                     }
  205.                     &.node--unread{
  206.                      .node-icon{
  207.                        i{
  208.                          &:before{
  209.                            content: '';
  210.                             display: inline-block;
  211.                             background-image: url("{{ base_url() }}styles/brivium/potassium/extra/node-unread.png");
  212.                             width: 30px;
  213.                             height: 25px;
  214.                             background-repeat: no-repeat;
  215.                             background-position: center;
  216.                           }
  217.                         }
  218.                       }
  219.                     }
  220.                   }
  221.                   &.node--link{
  222.                    .node-icon{
  223.                      i{
  224.                        &:before{
  225.                          content: '';
  226.                           display: inline-block;
  227.                           background-image: url("{{ base_url() }}styles/brivium/potassium/extra/link.png");
  228.                           width: 26px;
  229.                           height: 30px;
  230.                           background-repeat: no-repeat;
  231.                           background-position: center;
  232.                         }
  233.                       }
  234.                     }
  235.                   }
  236.                   &.node--page{
  237.                    .node-icon{
  238.                      i{
  239.                        &:before{
  240.                          content: '';
  241.                           display: inline-block;
  242.                           background-image: url("{{ base_url() }}styles/brivium/potassium/extra/page.png");
  243.                           width: 26px;
  244.                           height: 30px;
  245.                           background-repeat: no-repeat;
  246.                           background-position: center;
  247.                         }
  248.                       }
  249.                     }
  250.                   }
  251.                   &.node--category{
  252.                    &.node--read{
  253.                      .node-icon{
  254.                        i{
  255.                          &:before{
  256.                            content: '';
  257.                             display: inline-block;
  258.                             background-image: url("{{ base_url() }}styles/brivium/potassium/extra/node-read.png");
  259.                             width: 30px;
  260.                             height: 25px;
  261.                             background-repeat: no-repeat;
  262.                             background-position: center;
  263.                           }
  264.                         }
  265.                       }
  266.                     }
  267.                     .node--unread{
  268.                       .node-icon{
  269.                         i{
  270.                           &:before{
  271.                            content: '';
  272.                             display: inline-block;
  273.                             background-image: url("{{ base_url() }}styles/brivium/potassium/extra/node-unread.png");
  274.                             width: 30px;
  275.                             height: 25px;
  276.                             background-repeat: no-repeat;
  277.                             background-position: center;
  278.                           }
  279.                         }
  280.                       }
  281.                     }
  282.                   }
  283.                 }
  284.               }
  285.               .block-filterBar{
  286.                 .filterBar{
  287.                   .filterBar-menuTrigger{
  288.                     font-size: 14px;
  289.                     color: @xf-BrvColor1;
  290.                     &:hover{
  291.                      background-color: transparent;
  292.                       text-decoration: underline;
  293.                     }
  294.                   }
  295.                 }
  296.               }
  297.             }
  298.           }
  299.         }
  300.       }
  301.     }
  302.     .p-body-sidebar{
  303.       transition: all 500ms;
  304.       &.hide{
  305.        transition: all 500ms;
  306.         visibility: hidden;
  307.         transform: translateX(265px);
  308.       }
  309.       .contentRow-faderContent{
  310.         white-space: nowrap;
  311.         word-wrap: normal;
  312.         text-overflow: ellipsis;
  313.       }
  314.       .avatar{
  315.         width: 45px;
  316.         height: 45px;
  317.         border-radius: 50%;
  318.         &.structItem-secondaryIcon{
  319.          width: 20px;
  320.           height: 20px;
  321.           font-size: 12px;
  322.           span{
  323.             line-height: 20px;
  324.           }
  325.         }
  326.         span{
  327.           font-size: 20px;
  328.           line-height: 45px;
  329.         }
  330.       }
  331.       .comment-avatar{
  332.         .avatar{
  333.           width: 24px;
  334.           height: 24px;
  335.           span{
  336.             line-height: 24px;
  337.           }
  338.         }
  339.       }
  340.       .block{
  341.         &.member-visitor{
  342.          display: inline-block;
  343.           width: 100%;
  344.           .content-inner{
  345.             text-align: left;
  346.             padding: 10px 15px;
  347.             border-radius: 3px;
  348.             background-image: url("https://i.imgur.com/YZWVk48.png");
  349.             background-position: center;
  350.             background-size: cover;
  351.             background-repeat: no-repeat;
  352.             position: relative;
  353.             display: flex;
  354.             flex-wrap: wrap;
  355.             justify-content: space-between;
  356.             align-items: center;
  357.             .contentRow-figure{
  358.               .member-avarta{
  359.                 position: relative;
  360.                 &:before{
  361.                  content: '';
  362.                   width: 78px;
  363.                   height: 78px;
  364.                   position: absolute;
  365.                   left: -3px;
  366.                   top: -3px;
  367.                   border-radius: 100%;
  368.                   background-color: rgba(255,255,255,.9);
  369.                 }
  370.                 .avatar{
  371.                   width: 72px;
  372.                   height: 72px;
  373.                   position: relative;
  374.                   span{
  375.                     position: absolute;
  376.                     top: 50%;
  377.                     left: 50%;
  378.                     transform: translate(-50%, -50%);
  379.                   }
  380.                 }
  381.               }
  382.             }
  383.             .contentRow-main{
  384.               border-radius: 0 0 3px 3px;
  385.               .member-role{
  386.                 .contentRow-header{
  387.                   margin-bottom: 5px;
  388.                   a{
  389.                     font-size: 14px;
  390.                     font-weight: 600;
  391.                     color: @xf-BrvColor1;
  392.                   }
  393.                 }
  394.                 .contentRow-lesser{
  395.                   color: @xf-BrvColor1;
  396.                   font-size: 12px;
  397.                   display: none;
  398.                 }
  399.               }
  400.               .contentRow-minor{
  401.                 font-size: 12px;
  402.                 color: @xf-BrvColor1;
  403.                 dl{
  404.                   margin: 3px 0;
  405.                   dt{
  406.                     color: @xf-BrvColor1;
  407.                   }
  408.                 }
  409.               }
  410.             }
  411.           }
  412.         }
  413.         &[data-widget-definition="new_profile_posts"]{
  414.          .block-body{
  415.            padding: 10px 0;
  416.             .block-row{
  417.               .contentRow{
  418.  
  419.                 .contentRow-main{
  420.                   >a{
  421.                     font-size: 13px;
  422.                     font-weight: 600;
  423.                     margin-bottom: 5px;
  424.                     display: inline-block;
  425.                   }
  426.                   .contentRow-minor{
  427.                     font-size: 12px;
  428.                     a{
  429.                       font-size: 11px;
  430.                     }
  431.                   }
  432.                 }
  433.               }
  434.             }
  435.           }
  436.         }
  437.         .block-container{
  438.           border: 1px solid @xf-borderColor;
  439.           .block-minorHeader{
  440.             padding: 10px 10px 10px 40px;
  441.             position: relative;
  442.             text-transform: capitalize;
  443.             position: relative;
  444.             .block-control{
  445.               position: absolute;
  446.               right: 5px;
  447.               top: 50%;
  448.               transform: translateY(-50%);
  449.               font-size: 18px;
  450.               cursor: pointer;
  451.               width: 20px;
  452.               height: 21px;
  453.               text-align: center;
  454.               line-height: 20px;
  455.             }
  456.             &:before{
  457.              position: absolute;
  458.               left: 10px;
  459.               top: 50%;
  460.               transform: translateY(-50%);
  461.               background-image: url("{{ base_url() }}styles/brivium/potassium/extra/grid.png");
  462.               width: 16px;
  463.               height: 16px;
  464.             }
  465.             &.block-staff{
  466.              &:before{
  467.                 background-image: url("{{ base_url() }}styles/brivium/potassium/extra/ico-staff.png");
  468.                 width: 20px;
  469.                 height: 20px;
  470.               }
  471.             }
  472.             &.block-member{
  473.              &:before{
  474.                background-image: url("{{ base_url() }}styles/brivium/potassium/extra/ico-member.png");
  475.                 width: 21px;
  476.                 height: 21px;
  477.               }
  478.             }
  479.             &.block-sidebarbirthday{
  480.              &:before{
  481.                background-image: url("{{ base_url() }}styles/brivium/potassium/extra/bday.png");
  482.                 width: 24px;
  483.                 height: 24px;
  484.               }
  485.             }
  486.             &.block-forum-static{
  487.              &:before{
  488.                background-image: url("{{ base_url() }}styles/brivium/potassium/extra/ico-chart.png");
  489.                 width: 20px;
  490.                 height: 20px;
  491.               }
  492.             }
  493.             &.block-share{
  494.              &:before{
  495.                background-image: url("{{ base_url() }}styles/brivium/potassium/extra/ico-global.png");
  496.                 width: 20px;
  497.                 height: 20px;
  498.               }
  499.             }
  500.           }
  501.           .block-footer{
  502.             padding: 10px;
  503.           }
  504.           .block-body{
  505.             font-size: 12px;
  506.             background: @xf-BrvColor1;
  507.             &.staff-content{
  508.              padding: 10px 0;
  509.               li{
  510.                 &:last-child{
  511.                  .contentRow{
  512.                    border-bottom: none;
  513.                     padding-bottom: 0;
  514.                   }
  515.                 }
  516.                 .contentRow{
  517.                   border-bottom: 1px solid @xf-borderColor;
  518.                   padding-bottom: 13px;
  519.                   .contentRow-main{
  520.                     .username{
  521.                       font-size: 13px;
  522.                       margin-top: 5px;
  523.                       display: inline-block;
  524.                     }
  525.                     .contentRow-minor{
  526.                       font-size: 12px;
  527.                       margin-top: 3px;
  528.                     }
  529.                   }
  530.                 }
  531.               }
  532.             }
  533.             &.member-content{
  534.              padding: 10px 0;
  535.             }
  536.             &.post-content{
  537.              padding: 10px 0;
  538.               li{
  539.                 .contentRow{
  540.                   .contentRow-main{
  541.                     >a{
  542.                       font-size: 13px;
  543.                       font-weight: 600;
  544.                       margin-bottom: 5px;
  545.                       display: inline-block;
  546.                     }
  547.                     .contentRow-minor{
  548.                       font-size: 12px;
  549.                       a{
  550.                         font-size: 11px;
  551.                       }
  552.                     }
  553.                   }
  554.                 }
  555.               }
  556.             }
  557.             &.forum-static-content{
  558.              padding: 10px;
  559.             }
  560.             dl{
  561.               margin: 4px 0;
  562.               color: #a7a7aa;
  563.               dt{
  564.                 color: inherit;
  565.               }
  566.               dd{
  567.                 color: @xf-linkColor;
  568.               }
  569.             }
  570.           }
  571.         }
  572.       }
  573.     }
  574.   }
  575. }
  576.  
  577. //end
  578.  
  579.  
  580.  
  581. .p-body
  582. {
  583.     display: flex;
  584.     align-items: stretch;
  585.     flex-grow: 1;
  586.     min-height: 1px; // IE11 workaround - related to #139187
  587. }
  588.  
  589. .p-body-inner
  590. {
  591.     display: flex;
  592.     flex-direction: column;
  593.     width: 100%;
  594.  
  595.     .m-pageWidth();
  596.     .m-pageInset();
  597.     .m-clearFix();
  598.  
  599.     padding-top: 15px;
  600.     padding-left: @xf-elementSpacer;
  601.     padding-right: @xf-elementSpacer;
  602.     padding-bottom: @xf-elementSpacer;
  603. }
  604.  
  605. .p-body-header
  606. {
  607.     margin-bottom: ((@xf-elementSpacer) / 2);
  608. }
  609.  
  610. .p-body-main
  611. {
  612.     display: table;
  613.     table-layout: fixed;
  614.     width: 100%;
  615.     margin-bottom: auto;
  616.     min-height: 1px; // IE11 workaround - related to #139187
  617. }
  618.  
  619. .p-body-content
  620. {
  621.     display: table-cell;
  622.     vertical-align: top;
  623.  
  624.     .p-body-main--withSideNav &
  625.     {
  626.         padding-left: @xf-sidebarSpacer;
  627.     }
  628.  
  629.     .p-body-main--withSidebar &
  630.     {
  631.         padding-right: @xf-sidebarSpacer;
  632.     }
  633. }
  634.  
  635. .p-body-pageContent
  636. {
  637.     > .tabs--standalone:first-child
  638.     {
  639.         margin-bottom: (@xf-elementSpacer) / 2;
  640.     }
  641. }
  642.  
  643. .p-body-sideNav
  644. {
  645.     display: table-cell;
  646.     vertical-align: top;
  647.     width: @xf-sidebarWidth;
  648. }
  649.  
  650. .p-body-sideNavTrigger
  651. {
  652.     display: none;
  653. }
  654.  
  655. .p-body-sidebar
  656. {
  657.     display: table-cell;
  658.     vertical-align: top;
  659.     width: @xf-sidebarWidth;
  660.  
  661.     .contentRow-figure .avatar--m
  662.     {
  663.         // make these avatars a bit smaller in the sidebar so the content has more space
  664.         .m-avatarSize(@avatar-m * 2 / 3);
  665.     }
  666. }
  667.  
  668. .p-body-content,
  669. .p-body-pageContent,
  670. .p-body-sideNav,
  671. .p-body-sideNavContent,
  672. .p-body-sidebar
  673. {
  674.     > :first-child
  675.     {
  676.         margin-top: 0;
  677.     }
  678.  
  679.     > :last-child
  680.     {
  681.         margin-bottom: 0;
  682.     }
  683. }
  684.  
  685. @media (max-width: @xf-responsiveWide)
  686. {
  687.     .p-body-main,
  688.     .p-body-content
  689.     {
  690.         display: block;
  691.     }
  692.  
  693.     .p-body-sideNav
  694.     {
  695.         display: block;
  696.         width: auto;
  697.     }
  698.  
  699.     .p-body-sideNavTrigger
  700.     {
  701.         margin-bottom: ((@xf-elementSpacer) / 2);
  702.         text-align: center;
  703.  
  704.         .button:before
  705.         {
  706.             .m-faBase();
  707.             font-size: 120%;
  708.             vertical-align: middle;
  709.             display: inline-block;
  710.             margin: -4px 6px -4px 0;
  711.             .m-faContent(@fa-var-bars, .88em);
  712.         }
  713.  
  714.         .has-js &
  715.         {
  716.             display: block;
  717.         }
  718.     }
  719.  
  720.     .has-js .p-body-sideNavInner:not(.offCanvasMenu)
  721.     {
  722.         display: none;
  723.  
  724.         .m-transitionFadeDown();
  725.     }
  726.  
  727.     .has-no-js .p-body-sideNavInner
  728.     {
  729.         margin-bottom: @xf-elementSpacer;
  730.     }
  731.  
  732.     .p-body-sidebar
  733.     {
  734.         display: flex;
  735.         flex-wrap: wrap;
  736.         align-items: stretch;
  737.         margin: (@xf-elementSpacer) -((@xf-pageEdgeSpacer) / 2) -(@xf-elementSpacer);
  738.         width: auto;
  739.  
  740.         > *
  741.         {
  742.             margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
  743.             min-width: @xf-sidebarWidth;
  744.             flex: 1 1 @xf-sidebarWidth;
  745.  
  746.             &:last-child
  747.             {
  748.                 margin-bottom: @xf-elementSpacer;
  749.             }
  750.         }
  751.  
  752.         // add an invisible block to ensure that the last row has the correct widths
  753.         &:after
  754.         {
  755.             display: block;
  756.             content: '';
  757.             height: 0;
  758.             margin: 0 ((@xf-pageEdgeSpacer) / 2);
  759.             min-width: @xf-sidebarWidth;
  760.             flex: 1 1 @xf-sidebarWidth;
  761.         }
  762.  
  763.         .block-container
  764.         {
  765.             display: flex;
  766.             flex-direction: column;
  767.             height: 100%;
  768.  
  769.             .block-footer
  770.             {
  771.                 margin-top: auto;
  772.             }
  773.         }
  774.     }
  775.  
  776.     .p-body-main--withSideNav,
  777.     .p-body-main--withSidebar
  778.     {
  779.         .p-body-content { padding: 0; }
  780.     }
  781. }
  782.  
  783. @media (max-width: @xf-responsiveEdgeSpacerRemoval)
  784. {
  785.     .p-body-sideNavContent
  786.     {
  787.         // this is likely to contain blocks that overflow the container so account for that
  788.         margin: 0 -@xf-pageEdgeSpacer;
  789.         padding: 0 @xf-pageEdgeSpacer;
  790.  
  791.         .offCanvasMenu &
  792.         {
  793.             margin: 0;
  794.             padding: 0;
  795.         }
  796.     }
  797.  
  798.     .p-body-sidebar
  799.     {
  800.         display: block;
  801.         margin-left: 0;
  802.         margin-right: 0;
  803.  
  804.         > *
  805.         {
  806.             margin-left: 0;
  807.             margin-right: 0;
  808.             min-width: 0;
  809.         }
  810.     }
  811. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!