logo

mastofe

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

stream_entries.scss (6465B)

    

  1. .activity-stream {
  2.   clear: both;
  3.   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  5.   .entry {
  6.     background: $simple-background-color;
  8.     .detailed-status.light,
  9.     .status.light,
  10.     .more.light {
  11.       border-bottom: 1px solid $ui-secondary-color;
  12.       animation: none;
  13.     }
  15.     &:last-child {
  16.       &,
  17.       .detailed-status.light,
  18.       .status.light {
  19.         border-bottom: 0;
  20.         border-radius: 0 0 4px 4px;
  21.       }
  22.     }
  24.     &:first-child {
  25.       &,
  26.       .detailed-status.light,
  27.       .status.light {
  28.         border-radius: 4px 4px 0 0;
  29.       }
  31.       &:last-child {
  32.         &,
  33.         .detailed-status.light,
  34.         .status.light {
  35.           border-radius: 4px;
  36.         }
  37.       }
  38.     }
  40.     @media screen and (max-width: 740px) {
  41.       &,
  42.       .detailed-status.light,
  43.       .status.light {
  44.         border-radius: 0 !important;
  45.       }
  46.     }
  47.   }
  49.   &.with-header {
  50.     .entry {
  51.       &:first-child {
  52.         &,
  53.         .detailed-status.light,
  54.         .status.light {
  55.           border-radius: 0;
  56.         }
  58.         &:last-child {
  59.           &,
  60.           .detailed-status.light,
  61.           .status.light {
  62.             border-radius: 0 0 4px 4px;
  63.           }
  64.         }
  65.       }
  66.     }
  67.   }
  69.   .media-gallery__gifv__label {
  70.     bottom: 9px;
  71.   }
  73.   .status.light {
  74.     padding: 14px 14px 14px (48px + 14px * 2);
  75.     position: relative;
  76.     min-height: 48px;
  77.     cursor: default;
  79.     .status__header {
  80.       font-size: 15px;
  82.       .status__meta {
  83.         float: right;
  84.         font-size: 14px;
  86.         .status__relative-time {
  87.           color: $ui-primary-color;
  88.         }
  89.       }
  90.     }
  92.     .status__display-name {
  93.       display: block;
  94.       max-width: 100%;
  95.       padding-right: 25px;
  96.       color: $ui-base-color;
  97.     }
  99.     .status__avatar {
  100.       position: absolute;
  101.       left: 14px;
  102.       top: 14px;
  103.       width: 48px;
  104.       height: 48px;
  106.       & > div {
  107.         width: 48px;
  108.         height: 48px;
  109.       }
  111.       img {
  112.         display: block;
  113.         border-radius: 4px;
  114.       }
  115.     }
  117.     .display-name {
  118.       display: block;
  119.       max-width: 100%;
  120.       overflow: hidden;
  121.       white-space: nowrap;
  122.       text-overflow: ellipsis;
  124.       strong {
  125.         font-weight: 500;
  126.         color: $ui-base-color;
  128.         @each $lang in $cjk-langs {
  129.           &:lang(#{$lang}) {
  130.             font-weight: 700;
  131.           }
  132.         }
  133.       }
  135.       span {
  136.         font-size: 14px;
  137.         color: $ui-primary-color;
  138.       }
  139.     }
  141.     .status__content {
  142.       color: $ui-base-color;
  144.       a {
  145.         color: $ui-highlight-color;
  146.       }
  148.       a.status__content__spoiler-link {
  149.         color: $primary-text-color;
  150.         background: $ui-base-color;
  152.         &:hover {
  153.           background: lighten($ui-base-color, 8%);
  154.         }
  155.       }
  156.     }
  157.   }
  159.   .detailed-status.light {
  160.     padding: 14px;
  161.     background: $simple-background-color;
  162.     cursor: default;
  164.     .detailed-status__display-name {
  165.       display: block;
  166.       overflow: hidden;
  167.       margin-bottom: 15px;
  169.       & > div {
  170.         float: left;
  171.         margin-right: 10px;
  172.       }
  174.       .display-name {
  175.         display: block;
  176.         max-width: 100%;
  177.         overflow: hidden;
  178.         white-space: nowrap;
  179.         text-overflow: ellipsis;
  181.         strong {
  182.           font-weight: 500;
  183.           color: $ui-base-color;
  185.           @each $lang in $cjk-langs {
  186.             &:lang(#{$lang}) {
  187.               font-weight: 700;
  188.             }
  189.           }
  190.         }
  192.         span {
  193.           font-size: 14px;
  194.           color: $ui-primary-color;
  195.         }
  196.       }
  197.     }
  199.     .avatar {
  200.       width: 48px;
  201.       height: 48px;
  203.       img {
  204.         display: block;
  205.         border-radius: 4px;
  206.       }
  207.     }
  209.     .status__content {
  210.       color: $ui-base-color;
  212.       a {
  213.         color: $ui-highlight-color;
  214.       }
  216.       a.status__content__spoiler-link {
  217.         color: $primary-text-color;
  218.         background: $ui-base-color;
  220.         &:hover {
  221.           background: lighten($ui-base-color, 8%);
  222.         }
  223.       }
  224.     }
  226.     .detailed-status__meta {
  227.       margin-top: 15px;
  228.       color: $ui-primary-color;
  229.       font-size: 14px;
  230.       line-height: 18px;
  232.       a {
  233.         color: inherit;
  234.       }
  236.       span > span {
  237.         font-weight: 500;
  238.         font-size: 12px;
  239.         margin-left: 6px;
  240.         display: inline-block;
  241.       }
  242.     }
  244.     .status-card {
  245.       border-color: lighten($ui-secondary-color, 4%);
  246.       color: darken($ui-primary-color, 4%);
  248.       &:hover {
  249.         background: lighten($ui-secondary-color, 4%);
  250.       }
  251.     }
  253.     .status-card__title,
  254.     .status-card__description {
  255.       color: $ui-base-color;
  256.     }
  258.     .status-card__image {
  259.       background: $ui-secondary-color;
  260.     }
  261.   }
  263.   .media-spoiler {
  264.     background: $ui-base-color;
  265.     color: $ui-primary-color;
  266.   }
  268.   .pre-header {
  269.     padding: 14px 0;
  270.     padding-left: (48px + 14px * 2);
  271.     padding-bottom: 0;
  272.     margin-bottom: -4px;
  273.     color: $ui-primary-color;
  274.     font-size: 14px;
  275.     position: relative;
  277.     .pre-header__icon {
  278.       position: absolute;
  279.       left: (48px + 14px * 2 - 30px);
  280.     }
  282.     .status__display-name.muted strong {
  283.       color: $ui-primary-color;
  284.     }
  285.   }
  287.   .open-in-web-link {
  288.     text-decoration: none;
  290.     &:hover {
  291.       text-decoration: underline;
  292.     }
  293.   }
  295.   .more {
  296.     color: $classic-primary-color;
  297.     display: block;
  298.     padding: 14px;
  299.     text-align: center;
  301.     &:not(:hover) {
  302.       text-decoration: none;
  303.     }
  304.   }
  305. }
  307. .embed {
  308.   .activity-stream {
  309.     box-shadow: none;
  311.     .entry {
  313.       .detailed-status.light {
  314.         display: flex;
  315.         flex-wrap: wrap;
  316.         justify-content: space-between;
  317.         align-items: flex-start;
  319.         .detailed-status__display-name {
  320.           flex: 1;
  321.           margin: 0 5px 15px 0;
  322.         }
  324.         .button.button-secondary.logo-button {
  325.           flex: 0 auto;
  326.           font-size: 14px;
  328.           svg {
  329.             width: 20px;
  330.             height: auto;
  331.             vertical-align: middle;
  332.             margin-right: 5px;
  334.             path:first-child {
  335.               fill: $ui-primary-color;
  336.             }
  338.             path:last-child {
  339.               fill: $simple-background-color;
  340.             }
  341.           }
  343.           &:active,
  344.           &:focus,
  345.           &:hover {
  346.             svg path:first-child {
  347.               fill: lighten($ui-primary-color, 4%);
  348.             }
  349.           }
  350.         }
  352.         .status__content,
  353.         .detailed-status__meta {
  354.           flex: 100%;
  355.         }
  356.       }
  357.     }
  358.   }
  359. }