logo

pleroma-fe

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

status.scss (6727B)

    

  1. .Status {
  2.   min-width: 0;
  3.   white-space: normal;
  4.   word-wrap: break-word;
  5.   word-break: break-word;
  7.   &:hover {
  8.     --_still-image-img-visibility: visible;
  9.     --_still-image-canvas-visibility: hidden;
  10.     --_still-image-label-visibility: hidden;
  11.   }
  13.   .gravestone {
  14.     padding: var(--status-margin);
  15.     display: flex;
  17.     .deleted-text {
  18.       margin: 0.5em 0;
  19.       align-items: center;
  20.     }
  21.   }
  23.   .status-container {
  24.     display: flex;
  25.     padding: var(--status-margin);
  27.     > * {
  28.       min-width: 0;
  29.     }
  31.     &.-repeat {
  32.       padding-top: 0;
  33.     }
  34.   }
  36.   .pin {
  37.     padding: var(--status-margin) var(--status-margin) 0;
  38.     display: flex;
  39.     align-items: center;
  40.     justify-content: flex-end;
  41.   }
  43.   ._misclick-prevention & {
  44.     pointer-events: none;
  46.     .attachments {
  47.       pointer-events: initial;
  48.       cursor: initial;
  49.     }
  50.   }
  52.   .left-side {
  53.     margin-right: var(--status-margin);
  54.   }
  56.   .right-side {
  57.     flex: 1;
  58.     min-width: 0;
  59.   }
  61.   .usercard {
  62.     margin-bottom: var(--status-margin);
  63.   }
  65.   .status-username {
  66.     white-space: nowrap;
  67.     overflow: hidden;
  68.     max-width: 85%;
  69.     font-weight: bold;
  70.     flex-shrink: 1;
  71.     margin-right: 0.4em;
  72.     text-overflow: ellipsis;
  74.     --_still_image-label-scale: 0.25;
  75.     --emoji-size: 14px;
  76.   }
  78.   .status-favicon {
  79.     height: 18px;
  80.     width: 18px;
  81.     margin-right: 0.4em;
  82.   }
  84.   .status-heading {
  85.     margin-bottom: 0.5em;
  86.   }
  88.   .heading-name-row {
  89.     display: flex;
  90.     justify-content: space-between;
  91.     line-height: 1.3;
  93.     a {
  94.       display: inline-block;
  95.       word-break: break-all;
  96.     }
  97.   }
  99.   .account-name {
  100.     min-width: 1.6em;
  101.     margin-right: 0.4em;
  102.     white-space: nowrap;
  103.     overflow: hidden;
  104.     text-overflow: ellipsis;
  105.     flex: 1 1 0;
  106.   }
  108.   .heading-left {
  109.     display: flex;
  110.     min-width: 0;
  111.   }
  113.   .heading-right {
  114.     display: flex;
  115.     flex-shrink: 0;
  117.     .button-unstyled {
  118.       padding: 5px;
  119.       margin: -5px;
  120.     }
  122.     .svg-inline--fa {
  123.       margin-left: 0.25em;
  124.     }
  125.   }
  127.   .glued-label {
  128.     display: inline-flex;
  129.     white-space: nowrap;
  130.   }
  132.   .timeago {
  133.     margin-right: 0.2em;
  134.   }
  136.   & .heading-reply-row,
  137.   & .heading-edited-row {
  138.     position: relative;
  139.     align-content: baseline;
  140.     font-size: 0.85em;
  141.     margin-top: 0.2em;
  142.     line-height: 130%;
  143.     max-width: 100%;
  144.     align-items: stretch;
  145.   }
  147.   & .reply-to-popover,
  148.   & .reply-to-no-popover,
  149.   & .mentions {
  150.     min-width: 0;
  151.     margin-right: 0.4em;
  152.     flex-shrink: 0;
  153.   }
  155.   .reply-glued-label {
  156.     margin-right: 0.5em;
  157.   }
  159.   .reply-to-popover {
  160.     .reply-to:hover::before {
  161.       content: "";
  162.       display: block;
  163.       position: absolute;
  164.       bottom: 0;
  165.       width: 100%;
  166.       border-bottom: 1px solid var(--faint);
  167.       pointer-events: none;
  168.     }
  170.     .faint-link:hover {
  171.       // override default
  172.       text-decoration: none;
  173.     }
  175.     &.-strikethrough {
  176.       .reply-to::after {
  177.         content: "";
  178.         display: block;
  179.         position: absolute;
  180.         top: 50%;
  181.         width: 100%;
  182.         border-bottom: 1px solid var(--faint);
  183.         pointer-events: none;
  184.       }
  185.     }
  186.   }
  188.   & .mentions,
  189.   & .reply-to {
  190.     white-space: nowrap;
  191.     position: relative;
  192.   }
  194.   & .mentions-text,
  195.   & .reply-to-text {
  196.     color: var(--faint);
  197.     overflow: hidden;
  198.     text-overflow: ellipsis;
  199.     white-space: nowrap;
  200.   }
  202.   .mentions-line {
  203.     display: inline;
  204.   }
  206.   .replies {
  207.     margin-top: 0.25em;
  208.     line-height: 1.3;
  209.     font-size: 0.85em;
  210.     display: flex;
  211.     flex-wrap: wrap;
  213.     & > * {
  214.       margin-right: 0.4em;
  215.     }
  216.   }
  218.   .reply-link {
  219.     height: 17px;
  220.   }
  222.   .repeat-info {
  223.     padding: 0.4em var(--status-margin);
  225.     .repeat-icon {
  226.       color: var(--cGreen);
  227.     }
  228.   }
  230.   .repeater-avatar {
  231.     border-radius: var(--roundness);
  232.     margin-left: 28px;
  233.     width: 20px;
  234.     height: 20px;
  235.   }
  237.   .repeater-name {
  238.     text-overflow: ellipsis;
  239.     margin-right: 0;
  241.     .emoji {
  242.       width: 14px;
  243.       height: 14px;
  244.       vertical-align: middle;
  245.       object-fit: contain;
  246.     }
  247.   }
  249.   .status-fadein {
  250.     animation-duration: 0.4s;
  251.     animation-name: fadein;
  252.   }
  254.   @keyframes fadein {
  255.     from {
  256.       opacity: 0;
  257.     }
  259.     to {
  260.       opacity: 1;
  261.     }
  262.   }
  264.   .status-actions {
  265.     position: relative;
  266.     width: 100%;
  267.     display: flex;
  268.     margin-top: var(--status-margin);
  270.     > * {
  271.       max-width: 4em;
  272.       flex: 1;
  273.     }
  274.   }
  276.   .muted {
  277.     padding: 0.25em 0.6em;
  278.     height: 1.2em;
  279.     line-height: 1.2em;
  280.     text-overflow: ellipsis;
  281.     overflow: hidden;
  282.     display: flex;
  283.     flex-wrap: nowrap;
  285.     & .status-username,
  286.     & .mute-thread,
  287.     & .mute-words {
  288.       word-wrap: normal;
  289.       word-break: normal;
  290.       white-space: nowrap;
  291.     }
  293.     & .status-username,
  294.     & .mute-words {
  295.       text-overflow: ellipsis;
  296.       overflow: hidden;
  297.     }
  299.     .status-username {
  300.       font-weight: normal;
  301.       flex: 0 1 auto;
  302.       margin-right: 0.2em;
  303.       font-size: smaller;
  304.     }
  306.     .mute-thread {
  307.       flex: 0 0 auto;
  308.     }
  310.     .mute-words {
  311.       flex: 1 0 5em;
  312.       margin-left: 0.2em;
  314.       &::before {
  315.         content: " ";
  316.       }
  317.     }
  319.     .unmute {
  320.       flex: 0 0 auto;
  321.       margin-left: auto;
  322.       display: block;
  323.     }
  324.   }
  326.   .reply-form {
  327.     padding-top: 0;
  328.     padding-bottom: 0;
  329.   }
  331.   .reply-body {
  332.     flex: 1;
  333.   }
  335.   .favs-repeated-users {
  336.     margin-top: var(--status-margin);
  337.   }
  339.   .stats {
  340.     width: 100%;
  341.     display: flex;
  342.     line-height: 1em;
  343.   }
  345.   .avatar-row {
  346.     flex: 1;
  347.     position: relative;
  348.     display: flex;
  349.     align-items: center;
  350.     overflow: hidden;
  352.     &::before {
  353.       content: "";
  354.       position: absolute;
  355.       height: 100%;
  356.       width: 1px;
  357.       left: 0;
  358.       background-color: var(--textFaint);
  359.     }
  360.   }
  362.   .stat-count {
  363.     margin-right: var(--status-margin);
  364.     user-select: none;
  366.     .stat-title {
  367.       color: var(--textFaint);
  368.       font-size: 0.85em;
  369.       text-transform: uppercase;
  370.       position: relative;
  371.     }
  373.     .stat-number {
  374.       font-weight: bolder;
  375.       font-size: 1.1em;
  376.       line-height: 1em;
  377.     }
  379.     &:hover .stat-title {
  380.       text-decoration: underline;
  381.     }
  382.   }
  384.   @media all and (max-width: 800px) {
  385.     .repeater-avatar {
  386.       margin-left: 20px;
  387.     }
  389.     .post-avatar {
  390.       width: 40px;
  391.       height: 40px;
  393.       // TODO define those other way somehow?
  394.       // stylelint-disable rscss/class-format
  395.       &.-compact {
  396.         width: 32px;
  397.         height: 32px;
  398.       }
  399.     }
  400.   }
  402.   .quoted-status {
  403.     margin-top: 0.5em;
  404.     border: 1px solid var(--border);
  405.     border-radius: var(--roundness);
  407.     &.-unavailable-prompt {
  408.       padding: 0.5em;
  409.     }
  410.   }
  412.   .display-quoted-status-button {
  413.     margin: 0.5em;
  415.     &-icon {
  416.       color: inherit;
  417.     }
  418.   }
  419. }