diff --git a/src/components/status/status.scss b/src/components/status/status.scss new file mode 100644 index 00000000..05edd1bf --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/status/status.vue b/src/components/status/status.vue index e1e56ec9..b1a53df6 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -375,439 +375,4 @@ </template> <script src="./status.js" ></script> -<style lang="scss"> -@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> +<style src="./status.css" lang="scss"></style>