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;

  10. 

  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.   }

  22. 

  23.   @media screen and (max-width: 740px) {

  24.     border-radius: 0;

  25.     box-shadow: none;

  26.   }

  27. 

  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.   }

  36. 

  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.   }

  47. 

  48.   &.compact {

  49.     padding: 30px 0;

  50.     border-radius: 4px;

  51. 

  52.     .avatar {

  53.       margin-bottom: 0;

  54. 

  55.       img {

  56.         object-fit: cover;

  57.       }

  58.     }

  59.   }

  60. 

  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;

  74. 

  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.   }

  84. 

  85.   .avatar {

  86.     width: 120px;

  87.     margin: 0 auto;

  88.     position: relative;

  89.     z-index: 2;

  90. 

  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.   }

  99. 

  100.   .roles {

  101.     margin-bottom: 30px;

  102.     padding: 0 15px;

  103.   }

  104. 

  105.   .details-counters {

  106.     margin-top: 30px;

  107.     display: flex;

  108.     flex-direction: row;

  109.     width: 100%;

  110.   }

  111. 

  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;

  123. 

  124.     a {

  125.       display: block;

  126.     }

  127. 

  128.     &:last-child {

  129.       border-right: 0;

  130.     }

  131. 

  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.     }

  143. 

  144.     &.active {

  145.       &::after {

  146.         border-bottom: 4px solid $ui-highlight-color;

  147.         opacity: 1;

  148.       }

  149.     }

  150. 

  151.     &:hover {

  152.       &::after {

  153.         opacity: 1;

  154.         transition-duration: 100ms;

  155.       }

  156.     }

  157. 

  158.     a {

  159.       text-decoration: none;

  160.       color: inherit;

  161.     }

  162. 

  163.     .counter-label {

  164.       font-size: 12px;

  165.       display: block;

  166.       margin-bottom: 5px;

  167.     }

  168. 

  169.     .counter-number {

  170.       font-weight: 500;

  171.       font-size: 18px;

  172.       color: $primary-text-color;

  173.       font-family: sans-serif;

  174.     }

  175.   }

  176. 

  177.   .bio {

  178.     font-size: 14px;

  179.     line-height: 18px;

  180.     padding: 0 15px;

  181.     color: $ui-secondary-color;

  182.   }

  183. 

  184.   @media screen and (max-width: 480px) {

  185.     display: block;

  186. 

  187.     .card__bio {

  188.       max-width: none;

  189.     }

  190. 

  191.     .name,

  192.     .roles {

  193.       text-align: center;

  194.       margin-bottom: 15px;

  195.     }

  196. 

  197.     .bio {

  198.       margin-bottom: 15px;

  199.     }

  200.   }

  201. }

  202. 

  203. .card,

  204. .account-grid-card {

  205.   .controls {

  206.     position: absolute;

  207.     top: 15px;

  208.     left: 15px;

  209.     z-index: 2;

  210. 

  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;

  217. 

  218.       .fa {

  219.         font-weight: 400;

  220.         margin-right: 5px;

  221.       }

  222. 

  223.       &:hover,

  224.       &:active,

  225.       &:focus {

  226.         color: $white;

  227.       }

  228.     }

  229.   }

  230. }

  231. 

  232. .account-grid-card .controls {

  233.   left: auto;

  234.   right: 15px;

  235. }

  236. 

  237. .pagination {

  238.   padding: 30px 0;

  239.   text-align: center;

  240.   overflow: hidden;

  241. 

  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.   }

  255. 

  256.   .current {

  257.     background: $simple-background-color;

  258.     border-radius: 100px;

  259.     color: $ui-base-color;

  260.     cursor: default;

  261.     margin: 0 10px;

  262.   }

  263. 

  264.   .gap {

  265.     cursor: default;

  266.   }

  267. 

  268.   .older,

  269.   .newer {

  270.     text-transform: uppercase;

  271.     color: $ui-secondary-color;

  272.   }

  273. 

  274.   .older {

  275.     float: left;

  276.     padding-left: 0;

  277. 

  278.     .fa {

  279.       display: inline-block;

  280.       margin-right: 5px;

  281.     }

  282.   }

  283. 

  284.   .newer {

  285.     float: right;

  286.     padding-right: 0;

  287. 

  288.     .fa {

  289.       display: inline-block;

  290.       margin-left: 5px;

  291.     }

  292.   }

  293. 

  294.   .disabled {

  295.     cursor: default;

  296.     color: lighten($ui-base-color, 10%);

  297.   }

  298. 

  299.   @media screen and (max-width: 700px) {

  300.     padding: 30px 20px;

  301. 

  302.     .page {

  303.       display: none;

  304.     }

  305. 

  306.     .newer,

  307.     .older {

  308.       display: inline-block;

  309.     }

  310.   }

  311. }

  312. 

  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;

  324. 

  325.   @media screen and (max-width: 740px) {

  326.     border-radius: 0;

  327.     box-shadow: none;

  328.   }

  329. 

  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;

  338. 

  339.     @media screen and (max-width: 740px) {

  340.       width: calc(100% - 10px);

  341.     }

  342. 

  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;

  351. 

  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.     }

  364. 

  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.     }

  373. 

  374.     .avatar {

  375.       width: 80px;

  376.       height: 80px;

  377. 

  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.     }

  387. 

  388.     .name {

  389.       padding: 15px;

  390.       padding-top: 10px;

  391.       padding-left: 15px + 80px + 15px;

  392. 

  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;

  400. 

  401.         &:hover {

  402.           .display_name {

  403.             text-decoration: underline;

  404.           }

  405.         }

  406.       }

  407.     }

  408. 

  409.     .display_name {

  410.       font-size: 16px;

  411.       display: block;

  412.       text-overflow: ellipsis;

  413.       overflow: hidden;

  414.     }

  415. 

  416.     .username {

  417.       color: lighten($ui-base-color, 34%);

  418.       font-size: 14px;

  419.       font-weight: 400;

  420.     }

  421. 

  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. }

  433. 

  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. }

  446. 

  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);

  453. 

  454.   .detailed-status__display-name {

  455.     display: block;

  456.     overflow: hidden;

  457.     margin-bottom: 15px;

  458. 

  459.     &:last-child {

  460.       margin-bottom: 0;

  461.     }

  462. 

  463.     & > div {

  464.       float: left;

  465.       margin-right: 10px;

  466.       width: 48px;

  467.       height: 48px;

  468.     }

  469. 

  470.     .avatar {

  471.       display: block;

  472.       border-radius: 4px;

  473.     }

  474. 

  475.     .display-name {

  476.       display: block;

  477.       max-width: 100%;

  478.       overflow: hidden;

  479.       white-space: nowrap;

  480.       text-overflow: ellipsis;

  481.       cursor: default;

  482. 

  483.       strong {

  484.         font-weight: 500;

  485.         color: $ui-base-color;

  486. 

  487.         @each $lang in $cjk-langs {

  488.           &:lang(#{$lang}) {

  489.             font-weight: 700;

  490.           }

  491.         }

  492.       }

  493. 

  494.       span {

  495.         font-size: 14px;

  496.         color: $ui-primary-color;

  497.       }

  498.     }

  499. 

  500.     &:hover {

  501.       .display-name {

  502.         strong {

  503.           text-decoration: none;

  504.         }

  505.       }

  506.     }

  507.   }

  508. 

  509.   .account__header__content {

  510.     font-size: 14px;

  511.     color: $ui-base-color;

  512.   }

  513. }

  514. 

  515. .activity-stream-tabs {

  516.   background: $simple-background-color;

  517.   border-bottom: 1px solid $ui-secondary-color;

  518.   position: relative;

  519.   z-index: 2;

  520. 

  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;

  528. 

  529.     &:hover,

  530.     &:active,

  531.     &:focus {

  532.       color: lighten($ui-highlight-color, 8%);

  533.     }

  534. 

  535.     &.active {

  536.       color: $ui-base-color;

  537.       cursor: default;

  538.     }

  539.   }

  540. }

  541. 

  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);

  553. 

  554.   &.moderator {

  555.     color: $success-green;

  556.     background-color: rgba($success-green, 0.1);

  557.     border-color: rgba($success-green, 0.5);

  558.   }

  559. 

  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. }

  566. 

  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%);

  574. 

  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.   }

  583. 

  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.   }

  592. 

  593.   td {

  594.     color: $ui-primary-color;

  595.     text-align: center;

  596.     width: 100%;

  597.     padding-left: 0;

  598.   }

  599. 

  600.   a {

  601.     color: $ui-highlight-color;

  602.     text-decoration: none;

  603. 

  604.     &:hover,

  605.     &:focus,

  606.     &:active {

  607.       text-decoration: underline;

  608.     }

  609.   }

  610. 

  611.   tr {

  612.     &:last-child {

  613.       th,

  614.       td {

  615.         border-bottom: 0;

  616.       }

  617.     }

  618.   }

  619. }