logo

pleroma-fe

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

status.scss (6582B)

    

  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: 1em;
  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: grid;
  268.     grid-template-columns: 1fr;
  269.     grid-auto-columns: 1fr;
  270.     grid-auto-flow: column;
  271.     margin-top: var(--status-margin);
  272.   }
  274.   .muted {
  275.     padding: 0.25em 0.6em;
  276.     height: 1.2em;
  277.     line-height: 1.2em;
  278.     text-overflow: ellipsis;
  279.     overflow: hidden;
  280.     display: flex;
  281.     flex-wrap: nowrap;
  282.     gap: 1ex;
  284.     & .status-username,
  285.     & .mute-reason {
  286.       word-wrap: normal;
  287.       word-break: normal;
  288.       white-space: nowrap;
  289.       text-overflow: ellipsis;
  290.       overflow: hidden;
  291.     }
  293.     .status-username {
  294.       font-weight: normal;
  295.       flex: 0 1 auto;
  296.       margin-right: 0.2em;
  297.       font-size: smaller;
  298.       display: flex;
  299.     }
  301.     .unmute {
  302.       flex: 0 0 auto;
  303.       margin-left: auto;
  304.       display: block;
  305.     }
  306.   }
  308.   .reply-form {
  309.     padding-top: 0;
  310.     padding-bottom: 0;
  311.   }
  313.   .reply-body {
  314.     flex: 1;
  315.   }
  317.   .favs-repeated-users {
  318.     margin-top: var(--status-margin);
  319.   }
  321.   .stats {
  322.     width: 100%;
  323.     display: flex;
  324.     line-height: 1em;
  325.   }
  327.   .avatar-row {
  328.     flex: 1;
  329.     position: relative;
  330.     display: flex;
  331.     align-items: center;
  332.     overflow: hidden;
  334.     &::before {
  335.       content: "";
  336.       position: absolute;
  337.       height: 100%;
  338.       width: 1px;
  339.       left: 0;
  340.       background-color: var(--textFaint);
  341.     }
  342.   }
  344.   .stat-count {
  345.     margin-right: var(--status-margin);
  346.     user-select: none;
  348.     .stat-title {
  349.       color: var(--textFaint);
  350.       font-size: 0.85em;
  351.       text-transform: uppercase;
  352.       position: relative;
  353.     }
  355.     .stat-number {
  356.       font-weight: bolder;
  357.       font-size: 1.1em;
  358.       line-height: 1em;
  359.       color: var(--text);
  360.     }
  362.     &:hover .stat-title {
  363.       text-decoration: underline;
  364.     }
  365.   }
  367.   @media all and (max-width: 800px) {
  368.     .repeater-avatar {
  369.       margin-left: 20px;
  370.     }
  372.     .post-avatar {
  373.       width: 40px;
  374.       height: 40px;
  376.       // TODO define those other way somehow?
  377.       // stylelint-disable rscss/class-format
  378.       &.-compact {
  379.         width: 32px;
  380.         height: 32px;
  381.       }
  382.     }
  383.   }
  385.   .quoted-status {
  386.     margin-top: 0.5em;
  387.     border: 1px solid var(--border);
  388.     border-radius: var(--roundness);
  390.     &.-unavailable-prompt {
  391.       padding: 0.5em;
  392.     }
  393.   }
  395.   .display-quoted-status-button {
  396.     margin: 0.5em;
  398.     &-icon {
  399.       color: inherit;
  400.     }
  401.   }
  402. }