logo

pleroma-fe

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

mention_link.scss (2026B)

    

  1. .MentionLink {
  2.   position: relative;
  3.   white-space: normal;
  4.   display: inline;
  5.   word-break: normal;
  7.   & .new,
  8.   & .original {
  9.     display: inline;
  10.     border-radius: 2px;
  11.   }
  13.   .mention-avatar {
  14.     border-radius: var(--roundness);
  15.     width: 1.5em;
  16.     height: 1.5em;
  17.     vertical-align: middle;
  18.     user-select: none;
  19.     margin-right: 0.2em;
  20.   }
  22.   .full {
  23.     position: absolute;
  24.     display: inline-block;
  25.     pointer-events: none;
  26.     opacity: 0;
  27.     top: 100%;
  28.     left: 0;
  29.     height: 100%;
  30.     word-wrap: normal;
  31.     white-space: nowrap;
  32.     transition: opacity 0.2s ease;
  33.     z-index: 1;
  34.     margin-top: 0.25em;
  35.     padding: 0.5em;
  36.     user-select: all;
  37.   }
  39.   & .short.-with-tooltip,
  40.   & .you {
  41.     user-select: none;
  42.   }
  44.   & .short,
  45.   & .full {
  46.     white-space: nowrap;
  47.   }
  49.   .shortName {
  50.     white-space: normal;
  51.   }
  53.   .new {
  54.     &.-you {
  55.       .shortName {
  56.         font-weight: 600;
  57.       }
  58.     }
  60.     &.-has-selection {
  61.       --color: var(--selectionText);
  62.       --link: var(--selectionText);
  64.       background-color: var(--selectionBackground);
  65.     }
  67.     .at {
  68.       color: var(--link);
  69.       opacity: 0.8;
  70.       display: inline-block;
  71.       line-height: 1;
  72.       padding: 0 0.1em;
  73.       vertical-align: -25%;
  74.       margin: 0;
  75.     }
  77.     &.-striped {
  78.       & .shortName {
  79.         background-image:
  80.           repeating-linear-gradient(
  81.             135deg,
  82.             var(--____highlight-tintColor),
  83.             var(--____highlight-tintColor) 5px,
  84.             var(--____highlight-tintColor2) 5px,
  85.             var(--____highlight-tintColor2) 10px
  86.           );
  87.       }
  88.     }
  90.     &.-solid {
  91.       .shortName {
  92.         background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
  93.       }
  94.     }
  96.     &.-side {
  97.       .shortName {
  98.         box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
  99.       }
  100.     }
  101.   }
  103.   .serverName.-faded {
  104.     color: var(--linkFaint);
  105.   }
  106. }
  108. .mention-link-popover {
  109.   max-width: 70ch;
  110.   max-height: 20rem;
  111.   overflow: hidden;
  112. }