logo

pleroma-fe

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

notifications.scss (2947B)

    

  1. .Notifications {
  2.   &:not(.minimal) {
  3.     // a bit of a hack to allow scrolling below notifications
  4.     padding-bottom: 15em;
  5.   }
  7.   .loadmore-error {
  8.     color: var(--text);
  9.   }
  11.   .notification {
  12.     position: relative;
  14.     .notification-overlay {
  15.       position: absolute;
  16.       top: 0;
  17.       right: 0;
  18.       left: 0;
  19.       bottom: 0;
  20.       pointer-events: none;
  21.     }
  23.     &.unseen {
  24.       .notification-overlay {
  25.         background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
  26.       }
  27.     }
  28.   }
  29. }
  31. /* stylelint-disable-next-line no-descending-specificity */
  32. .notification {
  33.   box-sizing: border-box;
  35.   /* TODO cleanup this */
  36.   .Status {
  37.     flex: 1;
  38.   }
  40.   &:hover .animated.Avatar {
  41.     canvas {
  42.       display: none;
  43.     }
  45.     img {
  46.       visibility: visible;
  47.     }
  48.   }
  50.   &:last-child .Notification {
  51.     border-bottom: none;
  52.   }
  54.   .non-mention {
  55.     display: flex;
  56.     flex: 1;
  57.     flex-wrap: nowrap;
  58.     padding: 0.6em;
  59.     min-width: 0;
  61.     .avatar-container {
  62.       width: 32px;
  63.       height: 32px;
  64.     }
  65.   }
  67.   .follow-request-accept {
  68.     &:hover {
  69.       color: var(--text);
  70.     }
  71.   }
  73.   .follow-request-reject {
  74.     &:hover {
  75.       color: var(--cRed);
  76.     }
  77.   }
  79.   .follow-text,
  80.   .move-text {
  81.     padding: 0.5em 0;
  82.     overflow-wrap: break-word;
  83.     display: flex;
  84.     justify-content: space-between;
  86.     .follow-name {
  87.       display: block;
  88.       max-width: 100%;
  89.       overflow: hidden;
  90.       text-overflow: ellipsis;
  91.       white-space: nowrap;
  92.     }
  93.   }
  95.   time {
  96.     white-space: nowrap;
  97.   }
  99.   .notification-right {
  100.     flex: 1;
  101.     padding-left: 0.8em;
  102.     min-width: 0;
  104.     .timeago {
  105.       min-width: 3em;
  106.       text-align: right;
  107.     }
  109.     .timeago-link {
  110.       margin-right: 0.2em;
  111.     }
  113.     .expand-icon {
  114.       .svg-inline--fa {
  115.         margin-left: 0.25em;
  116.       }
  117.     }
  118.   }
  120.   .emoji-reaction-emoji {
  121.     font-size: 1.3em;
  122.     max-width: 1.25em;
  123.     height: 1.25em;
  124.     width: auto;
  125.   }
  127.   .emoji-reaction-emoji-image {
  128.     vertical-align: middle;
  129.     object-fit: contain;
  130.   }
  132.   .notification-details {
  133.     min-width: 0;
  134.     word-wrap: break-word;
  135.     line-height: var(--post-line-height);
  136.     position: relative;
  137.     overflow: hidden;
  138.     width: 100%;
  139.     flex: 1 1 0;
  140.     display: flex;
  141.     flex-wrap: nowrap;
  142.     justify-content: space-between;
  144.     .name-and-action {
  145.       flex: 1;
  146.       overflow: hidden;
  147.       text-overflow: ellipsis;
  148.     }
  150.     .username {
  151.       font-weight: bolder;
  152.       max-width: 100%;
  153.       text-overflow: ellipsis;
  154.       white-space: nowrap;
  155.     }
  157.     .timeago {
  158.       margin-right: 0.2em;
  159.     }
  161.     .status-content {
  162.       margin: 0;
  163.       max-height: 300px;
  164.     }
  166.     h1 {
  167.       word-break: break-all;
  168.       margin: 0 0 0.3em;
  169.       padding: 0;
  170.       font-size: 1em;
  171.       line-height: 1.5;
  173.       small {
  174.         font-weight: lighter;
  175.       }
  176.     }
  178.     p {
  179.       margin: 0;
  180.       margin-top: 0;
  181.       margin-bottom: 0.3em;
  182.     }
  183.   }
  184. }