separate status scss into another file

src/components/status/status.scss

@@ -0,0 +1,434 @@
+
+@import '../../_variables.scss';
+
+$status-margin: 0.75em;
+
+.status-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-pin {
+  padding: $status-margin $status-margin 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.media-left {
+  margin-right: $status-margin;
+}
+
+.status-el {
+  border-left-width: 0px;
+  min-width: 0;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+
+  border-left: 4px $fallback--cRed;
+  border-left: 4px var(--cRed, $fallback--cRed);
+
+  &_focused {
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedPost, $fallback--lightBg);
+    color: $fallback--text;
+    color: var(--selectedPostText, $fallback--text);
+    --lightText: var(--selectedPostLightText, $fallback--light);
+    --faint: var(--selectedPostFaintText, $fallback--faint);
+    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
+    --postLink: var(--selectedPostPostLink, $fallback--faint);
+    --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
+    --icon: var(--selectedPostIcon, $fallback--icon);
+  }
+
+  .timeline & {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+  }
+
+  .media-body {
+    flex: 1;
+    padding: 0;
+  }
+
+  .status-usercard {
+    margin-bottom: $status-margin;
+  }
+
+  .user-name {
+    white-space: nowrap;
+    font-size: 14px;
+    overflow: hidden;
+    flex-shrink: 0;
+    max-width: 85%;
+    font-weight: bold;
+
+    img.emoji {
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+      object-fit: contain
+    }
+  }
+
+  .status-favicon {
+    height: 18px;
+    width: 18px;
+    margin-right: 0.4em;
+  }
+
+  .media-heading {
+    padding: 0;
+    vertical-align: bottom;
+    flex-basis: 100%;
+    margin-bottom: 0.5em;
+
+    small {
+      font-weight: lighter;
+    }
+
+    .heading-name-row {
+      padding: 0;
+      display: flex;
+      justify-content: space-between;
+      line-height: 18px;
+
+      a {
+        display: inline-block;
+        word-break: break-all;
+      }
+
+      .name-and-account-name {
+        display: flex;
+        min-width: 0;
+      }
+
+      .user-name {
+        flex-shrink: 1;
+        margin-right: 0.4em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .account-name {
+        min-width: 1.6em;
+        margin-right: 0.4em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1 1 0;
+      }
+    }
+
+    .heading-right {
+      display: flex;
+      flex-shrink: 0;
+    }
+
+    .timeago {
+      margin-right: 0.2em;
+    }
+
+    .heading-reply-row {
+      position: relative;
+      align-content: baseline;
+      font-size: 12px;
+      line-height: 18px;
+      max-width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: stretch;
+
+      > .reply-to-and-accountname > a {
+        overflow: hidden;
+        max-width: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        word-break: break-all;
+      }
+    }
+
+    .reply-to-and-accountname {
+      display: flex;
+      height: 18px;
+      margin-right: 0.5em;
+      max-width: 100%;
+      .icon-reply {
+        transform: scaleX(-1);
+      }
+    }
+
+    .reply-info {
+      display: flex;
+    }
+
+    .reply-to-popover {
+      min-width: 0;
+    }
+
+    .reply-to {
+      display: flex;
+    }
+
+    .reply-to-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin: 0 0.4em 0 0.2em;
+    }
+
+    .strikethrough {
+      text-decoration: line-through;
+    }
+
+    .replies-separator {
+      margin-left: 0.4em;
+    }
+
+    .replies {
+      line-height: 18px;
+      font-size: 12px;
+      display: flex;
+      flex-wrap: wrap;
+      & > * {
+        margin-right: 0.4em;
+      }
+    }
+
+    .reply-link {
+      height: 17px;
+    }
+  }
+
+  .retweet-info {
+    padding: 0.4em $status-margin;
+    margin: 0;
+
+    .avatar.still-image {
+      border-radius: $fallback--avatarAltRadius;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      margin-left: 28px;
+      width: 20px;
+      height: 20px;
+    }
+
+    .media-body {
+      font-size: 1em;
+      line-height: 22px;
+
+      display: flex;
+      align-content: center;
+      flex-wrap: wrap;
+
+      .user-name {
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        img {
+          width: 14px;
+          height: 14px;
+          vertical-align: middle;
+          object-fit: contain
+        }
+      }
+
+      i {
+        padding: 0 0.2em;
+      }
+
+      a {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+.status-fadein {
+  animation-duration: 0.4s;
+  animation-name: fadein;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.status-conversation {
+  border-left-style: solid;
+}
+
+.status-actions {
+  position: relative;
+  width: 100%;
+  display: flex;
+  margin-top: $status-margin;
+
+  > * {
+    max-width: 4em;
+    flex: 1;
+  }
+}
+
+.button-icon.icon-reply {
+  &:not(.button-icon-disabled):hover,
+  &.button-icon-active {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+}
+
+.button-icon.icon-reply {
+  &:not(.button-icon-disabled) {
+    cursor: pointer;
+  }
+}
+
+.status:hover .animated.avatar {
+  canvas {
+    display: none;
+  }
+  img {
+    visibility: visible;
+  }
+}
+
+.status {
+  display: flex;
+  padding: $status-margin;
+  &.is-retweet {
+    padding-top: 0;
+  }
+}
+
+.status-conversation:last-child {
+  border-bottom: none;
+}
+
+.muted {
+  padding: .25em .6em;
+  height: 1.2em;
+  line-height: 1.2em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+
+  .username, .mute-thread, .mute-words {
+    word-wrap: normal;
+    word-break: normal;
+    white-space: nowrap;
+  }
+
+  .username, .mute-words {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .username {
+    flex: 0 1 auto;
+    margin-right: .2em;
+  }
+
+  .mute-thread {
+    flex: 0 0 auto;
+  }
+
+  .mute-words {
+    flex: 1 0 5em;
+    margin-left: .2em;
+    &::before {
+      content: ' '
+    }
+  }
+
+  .unmute {
+    flex: 0 0 auto;
+    margin-left: auto;
+    display: block;
+    margin-left: auto;
+  }
+}
+
+.reply-body {
+  flex: 1;
+}
+
+.favs-repeated-users {
+  margin-top: $status-margin;
+
+  .stats {
+    width: 100%;
+    display: flex;
+    line-height: 1em;
+
+    .stat-count {
+      margin-right: $status-margin;
+      user-select: none;
+
+      &:hover .stat-title {
+        text-decoration: underline;
+      }
+
+      .stat-title {
+        color: var(--faint, $fallback--faint);
+        font-size: 12px;
+        text-transform: uppercase;
+        position: relative;
+      }
+
+      .stat-number {
+        font-weight: bolder;
+        font-size: 16px;
+        line-height: 1em;
+      }
+    }
+
+    .avatar-row {
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 1px;
+        left: 0;
+        background-color: var(--faint, $fallback--faint);
+      }
+    }
+  }
+}
+
+@media all and (max-width: 800px) {
+  .status-el {
+    .retweet-info {
+      .avatar.still-image {
+        margin-left: 20px;
+      }
+    }
+  }
+  .status {
+    max-width: 100%;
+  }
+
+  .status .avatar.still-image {
+    width: 40px;
+    height: 40px;
+
+    &.avatar-compact {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}

src/components/status/status.vue

@@ -375,439 +375,4 @@
 </template>
 
 <script src="./status.js" ></script>
-<style lang="scss">
+<style src="./status.css" lang="scss"></style>
-@import '../../_variables.scss';
-
-$status-margin: 0.75em;
-
-.status-body {
-  flex: 1;
-  min-width: 0;
-}
-
-.status-pin {
-  padding: $status-margin $status-margin 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.media-left {
-  margin-right: $status-margin;
-}
-
-.status-el {
-  border-left-width: 0px;
-  min-width: 0;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-
-  border-left: 4px $fallback--cRed;
-  border-left: 4px var(--cRed, $fallback--cRed);
-
-  &_focused {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedPost, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedPostText, $fallback--text);
-    --lightText: var(--selectedPostLightText, $fallback--light);
-    --faint: var(--selectedPostFaintText, $fallback--faint);
-    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
-    --postLink: var(--selectedPostPostLink, $fallback--faint);
-    --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
-    --icon: var(--selectedPostIcon, $fallback--icon);
-  }
-
-  .timeline & {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-  }
-
-  .media-body {
-    flex: 1;
-    padding: 0;
-  }
-
-  .status-usercard {
-    margin-bottom: $status-margin;
-  }
-
-  .user-name {
-    white-space: nowrap;
-    font-size: 14px;
-    overflow: hidden;
-    flex-shrink: 0;
-    max-width: 85%;
-    font-weight: bold;
-
-    img.emoji {
-      width: 14px;
-      height: 14px;
-      vertical-align: middle;
-      object-fit: contain
-    }
-  }
-
-  .status-favicon {
-    height: 18px;
-    width: 18px;
-    margin-right: 0.4em;
-  }
-
-  .media-heading {
-    padding: 0;
-    vertical-align: bottom;
-    flex-basis: 100%;
-    margin-bottom: 0.5em;
-
-    small {
-      font-weight: lighter;
-    }
-
-    .heading-name-row {
-      padding: 0;
-      display: flex;
-      justify-content: space-between;
-      line-height: 18px;
-
-      a {
-        display: inline-block;
-        word-break: break-all;
-      }
-
-      .name-and-account-name {
-        display: flex;
-        min-width: 0;
-      }
-
-      .user-name {
-        flex-shrink: 1;
-        margin-right: 0.4em;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .account-name {
-        min-width: 1.6em;
-        margin-right: 0.4em;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex: 1 1 0;
-      }
-    }
-
-    .heading-right {
-      display: flex;
-      flex-shrink: 0;
-    }
-
-    .timeago {
-      margin-right: 0.2em;
-    }
-
-    .heading-reply-row {
-      position: relative;
-      align-content: baseline;
-      font-size: 12px;
-      line-height: 18px;
-      max-width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: stretch;
-
-      > .reply-to-and-accountname > a {
-        overflow: hidden;
-        max-width: 100%;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-break: break-all;
-      }
-    }
-
-    .reply-to-and-accountname {
-      display: flex;
-      height: 18px;
-      margin-right: 0.5em;
-      max-width: 100%;
-      .icon-reply {
-        transform: scaleX(-1);
-      }
-    }
-
-    .reply-info {
-      display: flex;
-    }
-
-    .reply-to-popover {
-      min-width: 0;
-    }
-
-    .reply-to {
-      display: flex;
-    }
-
-    .reply-to-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin: 0 0.4em 0 0.2em;
-    }
-
-    .strikethrough {
-      text-decoration: line-through;
-    }
-
-    .replies-separator {
-      margin-left: 0.4em;
-    }
-
-    .replies {
-      line-height: 18px;
-      font-size: 12px;
-      display: flex;
-      flex-wrap: wrap;
-      & > * {
-        margin-right: 0.4em;
-      }
-    }
-
-    .reply-link {
-      height: 17px;
-    }
-  }
-
-  .retweet-info {
-    padding: 0.4em $status-margin;
-    margin: 0;
-
-    .avatar.still-image {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      margin-left: 28px;
-      width: 20px;
-      height: 20px;
-    }
-
-    .media-body {
-      font-size: 1em;
-      line-height: 22px;
-
-      display: flex;
-      align-content: center;
-      flex-wrap: wrap;
-
-      .user-name {
-        font-weight: bold;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        img {
-          width: 14px;
-          height: 14px;
-          vertical-align: middle;
-          object-fit: contain
-        }
-      }
-
-      i {
-        padding: 0 0.2em;
-      }
-
-      a {
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-.status-fadein {
-  animation-duration: 0.4s;
-  animation-name: fadein;
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.status-conversation {
-  border-left-style: solid;
-}
-
-.status-actions {
-  position: relative;
-  width: 100%;
-  display: flex;
-  margin-top: $status-margin;
-
-  > * {
-    max-width: 4em;
-    flex: 1;
-  }
-}
-
-.button-icon.icon-reply {
-  &:not(.button-icon-disabled):hover,
-  &.button-icon-active {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
-  }
-}
-
-.button-icon.icon-reply {
-  &:not(.button-icon-disabled) {
-    cursor: pointer;
-  }
-}
-
-.status:hover .animated.avatar {
-  canvas {
-    display: none;
-  }
-  img {
-    visibility: visible;
-  }
-}
-
-.status {
-  display: flex;
-  padding: $status-margin;
-  &.is-retweet {
-    padding-top: 0;
-  }
-}
-
-.status-conversation:last-child {
-  border-bottom: none;
-}
-
-.muted {
-  padding: .25em .6em;
-  height: 1.2em;
-  line-height: 1.2em;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: flex;
-  flex-wrap: nowrap;
-
-  .username, .mute-thread, .mute-words {
-    word-wrap: normal;
-    word-break: normal;
-    white-space: nowrap;
-  }
-
-  .username, .mute-words {
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .username {
-    flex: 0 1 auto;
-    margin-right: .2em;
-  }
-
-  .mute-thread {
-    flex: 0 0 auto;
-  }
-
-  .mute-words {
-    flex: 1 0 5em;
-    margin-left: .2em;
-    &::before {
-      content: ' '
-    }
-  }
-
-  .unmute {
-    flex: 0 0 auto;
-    margin-left: auto;
-    display: block;
-    margin-left: auto;
-  }
-}
-
-.reply-body {
-  flex: 1;
-}
-
-.favs-repeated-users {
-  margin-top: $status-margin;
-
-  .stats {
-    width: 100%;
-    display: flex;
-    line-height: 1em;
-
-    .stat-count {
-      margin-right: $status-margin;
-      user-select: none;
-
-      &:hover .stat-title {
-        text-decoration: underline;
-      }
-
-      .stat-title {
-        color: var(--faint, $fallback--faint);
-        font-size: 12px;
-        text-transform: uppercase;
-        position: relative;
-      }
-
-      .stat-number {
-        font-weight: bolder;
-        font-size: 16px;
-        line-height: 1em;
-      }
-    }
-
-    .avatar-row {
-      flex: 1;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      align-items: center;
-
-      &::before {
-        content: '';
-        position: absolute;
-        height: 100%;
-        width: 1px;
-        left: 0;
-        background-color: var(--faint, $fallback--faint);
-      }
-    }
-  }
-}
-
-@media all and (max-width: 800px) {
-  .status-el {
-    .retweet-info {
-      .avatar.still-image {
-        margin-left: 20px;
-      }
-    }
-  }
-  .status {
-    max-width: 100%;
-  }
-
-  .status .avatar.still-image {
-    width: 40px;
-    height: 40px;
-
-    &.avatar-compact {
-      width: 32px;
-      height: 32px;
-    }
-  }
-}
-
-</style>