logo

pleroma-fe

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

notification.scss (1665B)

    

  1. // TODO Copypaste from Status, should unify it somehow
  2. .Notification {
  3.   border-bottom: 1px solid;
  4.   border-color: var(--border);
  5.   word-wrap: break-word;
  6.   word-break: break-word;
  8.   &.Status {
  9.     /* stylelint-disable-next-line declaration-no-important */
  10.     background-color: transparent !important;
  11.   }
  13.   --emoji-size: 14px;
  15.   &:hover {
  16.     --_still-image-img-visibility: visible;
  17.     --_still-image-canvas-visibility: hidden;
  18.     --_still-image-label-visibility: hidden;
  19.   }
  21.   &.-muted {
  22.     padding: 0.25em 0.6em;
  23.     height: 1.2em;
  24.     line-height: 1.2em;
  25.     text-overflow: ellipsis;
  26.     overflow: hidden;
  27.     display: flex;
  28.     flex-wrap: nowrap;
  30.     & .status-username,
  31.     & .mute-thread,
  32.     & .mute-words {
  33.       word-wrap: normal;
  34.       word-break: normal;
  35.       white-space: nowrap;
  36.     }
  38.     & .status-username,
  39.     & .mute-words {
  40.       text-overflow: ellipsis;
  41.       overflow: hidden;
  42.     }
  44.     .status-username {
  45.       font-weight: normal;
  46.       flex: 0 1 auto;
  47.       margin-right: 0.2em;
  48.       font-size: smaller;
  49.     }
  51.     .mute-thread {
  52.       flex: 0 0 auto;
  53.     }
  55.     .mute-words {
  56.       flex: 1 0 5em;
  57.       margin-left: 0.2em;
  59.       &::before {
  60.         content: " ";
  61.       }
  62.     }
  64.     .unmute {
  65.       flex: 0 0 auto;
  66.       margin-left: auto;
  67.       display: block;
  68.     }
  69.   }
  71.   .type-icon {
  72.     margin: 0 0.1em;
  73.   }
  75.   &.-type--repeat .type-icon {
  76.     color: var(--cGreen);
  77.   }
  79.   &.-type--follow .type-icon {
  80.     color: var(--cBlue);
  81.   }
  83.   &.-type--follow-request .type-icon {
  84.     color: var(--cBlue);
  85.   }
  87.   &.-type--like .type-icon {
  88.     color: var(--cOrange);
  89.   }
  91.   &.-type--move .type-icon {
  92.     color: var(--cBlue);
  93.   }
  94. }