logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

accounts.scss (11049B)

    

  1. .card {
  2.   background-color: lighten($ui-base-color, 4%);
  3.   background-size: cover;
  4.   background-position: center;
  5.   border-radius: 4px 4px 0 0;
  6.   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  7.   overflow: hidden;
  8.   position: relative;
  9.   display: flex;
  11.   &::after {
  12.     background: rgba(darken($ui-base-color, 8%), 0.5);
  13.     display: block;
  14.     content: "";
  15.     position: absolute;
  16.     left: 0;
  17.     top: 0;
  18.     width: 100%;
  19.     height: 100%;
  20.     z-index: 1;
  21.   }
  23.   @media screen and (max-width: 740px) {
  24.     border-radius: 0;
  25.     box-shadow: none;
  26.   }
  28.   .card__illustration {
  29.     padding: 60px 0;
  30.     position: relative;
  31.     flex: 1 1 auto;
  32.     display: flex;
  33.     justify-content: center;
  34.     align-items: center;
  35.   }
  37.   .card__bio {
  38.     max-width: 260px;
  39.     flex: 1 1 auto;
  40.     display: flex;
  41.     flex-direction: column;
  42.     justify-content: space-between;
  43.     background: rgba(darken($ui-base-color, 8%), 0.8);
  44.     position: relative;
  45.     z-index: 2;
  46.   }
  48.   &.compact {
  49.     padding: 30px 0;
  50.     border-radius: 4px;
  52.     .avatar {
  53.       margin-bottom: 0;
  55.       img {
  56.         object-fit: cover;
  57.       }
  58.     }
  59.   }
  61.   .name {
  62.     display: block;
  63.     font-size: 20px;
  64.     line-height: 18px * 1.5;
  65.     color: $primary-text-color;
  66.     padding: 10px 15px;
  67.     padding-bottom: 0;
  68.     font-weight: 500;
  69.     position: relative;
  70.     z-index: 2;
  71.     margin-bottom: 30px;
  72.     overflow: hidden;
  73.     text-overflow: ellipsis;
  75.     small {
  76.       display: block;
  77.       font-size: 14px;
  78.       color: $ui-highlight-color;
  79.       font-weight: 400;
  80.       overflow: hidden;
  81.       text-overflow: ellipsis;
  82.     }
  83.   }
  85.   .avatar {
  86.     width: 120px;
  87.     margin: 0 auto;
  88.     position: relative;
  89.     z-index: 2;
  91.     img {
  92.       width: 120px;
  93.       height: 120px;
  94.       display: block;
  95.       border-radius: 120px;
  96.       box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  97.     }
  98.   }
  100.   .roles {
  101.     margin-bottom: 30px;
  102.     padding: 0 15px;
  103.   }
  105.   .details-counters {
  106.     margin-top: 30px;
  107.     display: flex;
  108.     flex-direction: row;
  109.     width: 100%;
  110.   }
  112.   .counter {
  113.     width: 33.3%;
  114.     box-sizing: border-box;
  115.     flex: 0 0 auto;
  116.     color: $ui-primary-color;
  117.     padding: 5px 10px 0;
  118.     margin-bottom: 10px;
  119.     border-right: 1px solid lighten($ui-base-color, 4%);
  120.     cursor: default;
  121.     text-align: center;
  122.     position: relative;
  124.     a {
  125.       display: block;
  126.     }
  128.     &:last-child {
  129.       border-right: 0;
  130.     }
  132.     &::after {
  133.       display: block;
  134.       content: "";
  135.       position: absolute;
  136.       bottom: -10px;
  137.       left: 0;
  138.       width: 100%;
  139.       border-bottom: 4px solid $ui-primary-color;
  140.       opacity: 0.5;
  141.       transition: all 400ms ease;
  142.     }
  144.     &.active {
  145.       &::after {
  146.         border-bottom: 4px solid $ui-highlight-color;
  147.         opacity: 1;
  148.       }
  149.     }
  151.     &:hover {
  152.       &::after {
  153.         opacity: 1;
  154.         transition-duration: 100ms;
  155.       }
  156.     }
  158.     a {
  159.       text-decoration: none;
  160.       color: inherit;
  161.     }
  163.     .counter-label {
  164.       font-size: 12px;
  165.       display: block;
  166.       margin-bottom: 5px;
  167.     }
  169.     .counter-number {
  170.       font-weight: 500;
  171.       font-size: 18px;
  172.       color: $primary-text-color;
  173.       font-family: sans-serif;
  174.     }
  175.   }
  177.   .bio {
  178.     font-size: 14px;
  179.     line-height: 18px;
  180.     padding: 0 15px;
  181.     color: $ui-secondary-color;
  182.   }
  184.   @media screen and (max-width: 480px) {
  185.     display: block;
  187.     .card__bio {
  188.       max-width: none;
  189.     }
  191.     .name,
  192.     .roles {
  193.       text-align: center;
  194.       margin-bottom: 15px;
  195.     }
  197.     .bio {
  198.       margin-bottom: 15px;
  199.     }
  200.   }
  201. }
  203. .card,
  204. .account-grid-card {
  205.   .controls {
  206.     position: absolute;
  207.     top: 15px;
  208.     left: 15px;
  209.     z-index: 2;
  211.     .icon-button {
  212.       color: rgba($white, 0.8);
  213.       text-decoration: none;
  214.       font-size: 13px;
  215.       line-height: 13px;
  216.       font-weight: 500;
  218.       .fa {
  219.         font-weight: 400;
  220.         margin-right: 5px;
  221.       }
  223.       &:hover,
  224.       &:active,
  225.       &:focus {
  226.         color: $white;
  227.       }
  228.     }
  229.   }
  230. }
  232. .account-grid-card .controls {
  233.   left: auto;
  234.   right: 15px;
  235. }
  237. .pagination {
  238.   padding: 30px 0;
  239.   text-align: center;
  240.   overflow: hidden;
  242.   a,
  243.   .current,
  244.   .newer,
  245.   .older,
  246.   .page,
  247.   .gap {
  248.     font-size: 14px;
  249.     color: $primary-text-color;
  250.     font-weight: 500;
  251.     display: inline-block;
  252.     padding: 6px 10px;
  253.     text-decoration: none;
  254.   }
  256.   .current {
  257.     background: $simple-background-color;
  258.     border-radius: 100px;
  259.     color: $ui-base-color;
  260.     cursor: default;
  261.     margin: 0 10px;
  262.   }
  264.   .gap {
  265.     cursor: default;
  266.   }
  268.   .older,
  269.   .newer {
  270.     text-transform: uppercase;
  271.     color: $ui-secondary-color;
  272.   }
  274.   .older {
  275.     float: left;
  276.     padding-left: 0;
  278.     .fa {
  279.       display: inline-block;
  280.       margin-right: 5px;
  281.     }
  282.   }
  284.   .newer {
  285.     float: right;
  286.     padding-right: 0;
  288.     .fa {
  289.       display: inline-block;
  290.       margin-left: 5px;
  291.     }
  292.   }
  294.   .disabled {
  295.     cursor: default;
  296.     color: lighten($ui-base-color, 10%);
  297.   }
  299.   @media screen and (max-width: 700px) {
  300.     padding: 30px 20px;
  302.     .page {
  303.       display: none;
  304.     }
  306.     .newer,
  307.     .older {
  308.       display: inline-block;
  309.     }
  310.   }
  311. }
  313. .accounts-grid {
  314.   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  315.   background: darken($simple-background-color, 8%);
  316.   border-radius: 0 0 4px 4px;
  317.   padding: 20px 5px;
  318.   padding-bottom: 10px;
  319.   overflow: hidden;
  320.   display: flex;
  321.   flex-wrap: wrap;
  322.   z-index: 2;
  323.   position: relative;
  325.   @media screen and (max-width: 740px) {
  326.     border-radius: 0;
  327.     box-shadow: none;
  328.   }
  330.   .account-grid-card {
  331.     box-sizing: border-box;
  332.     width: 335px;
  333.     background: $simple-background-color;
  334.     border-radius: 4px;
  335.     color: $ui-base-color;
  336.     margin: 0 5px 10px;
  337.     position: relative;
  339.     @media screen and (max-width: 740px) {
  340.       width: calc(100% - 10px);
  341.     }
  343.     .account-grid-card__header {
  344.       overflow: hidden;
  345.       height: 100px;
  346.       border-radius: 4px 4px 0 0;
  347.       background-color: lighten($ui-base-color, 4%);
  348.       background-size: cover;
  349.       background-position: center;
  350.       position: relative;
  352.       &::after {
  353.         background: rgba(darken($ui-base-color, 8%), 0.5);
  354.         display: block;
  355.         content: "";
  356.         position: absolute;
  357.         left: 0;
  358.         top: 0;
  359.         width: 100%;
  360.         height: 100%;
  361.         z-index: 1;
  362.       }
  363.     }
  365.     .account-grid-card__avatar {
  366.       box-sizing: border-box;
  367.       padding: 15px;
  368.       position: absolute;
  369.       z-index: 2;
  370.       top: 100px - (40px + 2px);
  371.       left: -2px;
  372.     }
  374.     .avatar {
  375.       width: 80px;
  376.       height: 80px;
  378.       img {
  379.         display: block;
  380.         width: 80px;
  381.         height: 80px;
  382.         border-radius: 80px;
  383.         border: 2px solid $simple-background-color;
  384.         background: $simple-background-color;
  385.       }
  386.     }
  388.     .name {
  389.       padding: 15px;
  390.       padding-top: 10px;
  391.       padding-left: 15px + 80px + 15px;
  393.       a {
  394.         display: block;
  395.         color: $ui-base-color;
  396.         text-decoration: none;
  397.         text-overflow: ellipsis;
  398.         overflow: hidden;
  399.         font-weight: 500;
  401.         &:hover {
  402.           .display_name {
  403.             text-decoration: underline;
  404.           }
  405.         }
  406.       }
  407.     }
  409.     .display_name {
  410.       font-size: 16px;
  411.       display: block;
  412.       text-overflow: ellipsis;
  413.       overflow: hidden;
  414.     }
  416.     .username {
  417.       color: lighten($ui-base-color, 34%);
  418.       font-size: 14px;
  419.       font-weight: 400;
  420.     }
  422.     .account__header__content {
  423.       padding: 10px 15px;
  424.       padding-top: 15px;
  425.       color: lighten($ui-base-color, 26%);
  426.       word-wrap: break-word;
  427.       overflow: hidden;
  428.       text-overflow: ellipsis;
  429.       height: 5.5em;
  430.     }
  431.   }
  432. }
  434. .nothing-here {
  435.   width: 100%;
  436.   display: block;
  437.   color: $ui-primary-color;
  438.   font-size: 14px;
  439.   font-weight: 500;
  440.   text-align: center;
  441.   padding: 60px 0;
  442.   padding-top: 55px;
  443.   margin: 0 auto;
  444.   cursor: default;
  445. }
  447. .account-card {
  448.   padding: 14px 10px;
  449.   background: $simple-background-color;
  450.   border-radius: 4px;
  451.   text-align: left;
  452.   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  454.   .detailed-status__display-name {
  455.     display: block;
  456.     overflow: hidden;
  457.     margin-bottom: 15px;
  459.     &:last-child {
  460.       margin-bottom: 0;
  461.     }
  463.     & > div {
  464.       float: left;
  465.       margin-right: 10px;
  466.       width: 48px;
  467.       height: 48px;
  468.     }
  470.     .avatar {
  471.       display: block;
  472.       border-radius: 4px;
  473.     }
  475.     .display-name {
  476.       display: block;
  477.       max-width: 100%;
  478.       overflow: hidden;
  479.       white-space: nowrap;
  480.       text-overflow: ellipsis;
  481.       cursor: default;
  483.       strong {
  484.         font-weight: 500;
  485.         color: $ui-base-color;
  487.         @each $lang in $cjk-langs {
  488.           &:lang(#{$lang}) {
  489.             font-weight: 700;
  490.           }
  491.         }
  492.       }
  494.       span {
  495.         font-size: 14px;
  496.         color: $ui-primary-color;
  497.       }
  498.     }
  500.     &:hover {
  501.       .display-name {
  502.         strong {
  503.           text-decoration: none;
  504.         }
  505.       }
  506.     }
  507.   }
  509.   .account__header__content {
  510.     font-size: 14px;
  511.     color: $ui-base-color;
  512.   }
  513. }
  515. .activity-stream-tabs {
  516.   background: $simple-background-color;
  517.   border-bottom: 1px solid $ui-secondary-color;
  518.   position: relative;
  519.   z-index: 2;
  521.   a {
  522.     display: inline-block;
  523.     padding: 15px;
  524.     text-decoration: none;
  525.     color: $ui-highlight-color;
  526.     text-transform: uppercase;
  527.     font-weight: 500;
  529.     &:hover,
  530.     &:active,
  531.     &:focus {
  532.       color: lighten($ui-highlight-color, 8%);
  533.     }
  535.     &.active {
  536.       color: $ui-base-color;
  537.       cursor: default;
  538.     }
  539.   }
  540. }
  542. .account-role {
  543.   display: inline-block;
  544.   padding: 4px 6px;
  545.   cursor: default;
  546.   border-radius: 3px;
  547.   font-size: 12px;
  548.   line-height: 12px;
  549.   font-weight: 500;
  550.   color: $ui-secondary-color;
  551.   background-color: rgba($ui-secondary-color, 0.1);
  552.   border: 1px solid rgba($ui-secondary-color, 0.5);
  554.   &.moderator {
  555.     color: $success-green;
  556.     background-color: rgba($success-green, 0.1);
  557.     border-color: rgba($success-green, 0.5);
  558.   }
  560.   &.admin {
  561.     color: lighten($error-red, 12%);
  562.     background-color: rgba(lighten($error-red, 12%), 0.1);
  563.     border-color: rgba(lighten($error-red, 12%), 0.5);
  564.   }
  565. }
  567. .account__header__fields {
  568.   border-collapse: collapse;
  569.   padding: 0;
  570.   margin: 15px -15px -15px;
  571.   border: 0 none;
  572.   border-top: 1px solid lighten($ui-base-color, 4%);
  573.   border-bottom: 1px solid lighten($ui-base-color, 4%);
  575.   th,
  576.   td {
  577.     padding: 15px;
  578.     padding-left: 15px;
  579.     border: 0 none;
  580.     border-bottom: 1px solid lighten($ui-base-color, 4%);
  581.     vertical-align: middle;
  582.   }
  584.   th {
  585.     padding-left: 15px;
  586.     font-weight: 500;
  587.     text-align: center;
  588.     width: 94px;
  589.     color: $ui-secondary-color;
  590.     background: rgba(darken($ui-base-color, 8%), 0.5);
  591.   }
  593.   td {
  594.     color: $ui-primary-color;
  595.     text-align: center;
  596.     width: 100%;
  597.     padding-left: 0;
  598.   }
  600.   a {
  601.     color: $ui-highlight-color;
  602.     text-decoration: none;
  604.     &:hover,
  605.     &:focus,
  606.     &:active {
  607.       text-decoration: underline;
  608.     }
  609.   }
  611.   tr {
  612.     &:last-child {
  613.       th,
  614.       td {
  615.         border-bottom: 0;
  616.       }
  617.     }
  618.   }
  619. }