-
@@ -344,146 +346,139 @@ function readPromo() {
opacity: 1;
}
- > .info {
- display: flex;
- align-items: center;
- padding: 16px 32px 8px 32px;
- line-height: 24px;
- font-size: 90%;
- white-space: pre;
- color: #f6c177;
-
- > i {
- margin-right: 4px;
- }
-
- > .hide {
- margin-left: auto;
- color: inherit;
- }
- }
-
- > .info + .article {
- padding-top: 8px;
- }
-
> .reply-to {
- opacity: 0.7;
- padding-bottom: 0;
+ & + .note-context {
+ .line::before {
+ content: "";
+ display: block;
+ margin-bottom: -10px;
+ width: 2px;
+ background-color: var(--accentDarken);
+ margin-inline: auto;
+ }
+ }
}
- > .renote {
+ .note-context {
+ padding: 0 32px 0 32px;
display: flex;
- align-items: center;
- padding: 16px 32px 8px 32px;
- line-height: 28px;
- white-space: pre;
- color: var(--renote);
-
- > .avatar {
- flex-shrink: 0;
- display: inline-block;
- width: 28px;
- height: 28px;
- margin: 0 8px 0 0;
- border-radius: 6px;
+ &:first-child {
+ margin-top: 20px;
}
-
- > i {
- margin-right: 4px;
+ > :not(.line) {
+ width: 0;
+ flex-grow: 1;
+ position: relative;
+ margin-bottom: -10px;
+ line-height: 28px;
}
+ > .line {
+ width: var(--avatarSize);
+ display: flex;
+ margin-right: 14px;
+ margin-top: 0;
+ flex-grow: 0;
+ }
+
+ > div > i {
+ position: absolute;
+ right: 100%;
+ }
+ > .info {
+ display: flex;
+ align-items: center;
+ font-size: 90%;
+ white-space: pre;
+ color: #f6c177;
- > span {
- overflow: hidden;
- flex-shrink: 1;
- text-overflow: ellipsis;
- white-space: nowrap;
+ > i {
+ margin-right: 4px;
+ }
- > .name {
- font-weight: bold;
+ > .hide {
+ margin-left: auto;
+ color: inherit;
}
}
- > .info {
- margin-left: auto;
- font-size: 0.9em;
- > .time {
- flex-shrink: 0;
- color: inherit;
+ > .renote {
+ display: flex;
+ align-items: center;
+ white-space: pre;
+ color: var(--renote);
- > .dropdownIcon {
- margin-right: 4px;
+
+ > i {
+ margin-right: 4px;
+ }
+
+ > span {
+ overflow: hidden;
+ flex-shrink: 1;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ > .name {
+ font-weight: bold;
+ }
+ }
+
+ > .info {
+ margin-left: auto;
+ font-size: 0.9em;
+ display: flex;
+
+ > .time {
+ flex-shrink: 0;
+ color: inherit;
+ display: inline-flex;
+ align-items: center;
+ > .dropdownIcon {
+ margin-right: 4px;
+ }
}
}
}
- }
- > .renote + .article {
- padding-top: 8px;
+ & + .article {
+ padding-top: 10px !important;
+ }
+
}
> .article {
- padding: 28px 32px 18px;
+ padding: 28px 32px 16px;
cursor: pointer;
- display: grid;
- align-items: center;
- grid-template-columns: 58px;
@media (pointer: coarse) {
cursor: default;
}
- > .avatar {
- flex-shrink: 0;
- display: block;
- margin: 0 14px 8px 0;
- grid-row: 1 / span 2;
- width: 48px;
- height: 48px;
- position: relative;
- top: 0;
- left: 0;
+ .header-container {
+ display: flex;
+ > .avatar {
+ flex-shrink: 0;
+ display: block;
+ margin: 0 14px 0 0;
+ width: var(--avatarSize);
+ height: var(--avatarSize);
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+ > .header {
+ width: 0;
+ flex-grow: 1;
+ }
}
-
> .main {
flex: 1;
min-width: 0;
- display: contents;
-
- > header.header {
- display: contents;
-
- > .name, .info {
- grid-row: 1;
- }
- }
-
- > :not(.ticker) {
- grid-column: 1 / span 3;
- width: 100%;
- max-width: 100%;
- }
-
- > .name, .info {
- grid-row: 1;
- }
-
- > .ticker {
- grid-row: 2;
- align-self: flex-start;
- margin-left: auto;
- }
-
- > .ticker {
- font-size: 0.9em;
- }
> .body {
- margin-top: .2em;
+ margin-top: .7em;
overflow: hidden;
- margin-inline: -100px;
- padding-inline: 100px;
> .cw {
cursor: default;
@@ -520,7 +515,11 @@ function readPromo() {
position: relative;
max-height: 9em;
overflow: hidden;
-
+ > .text {
+ max-height: 9em;
+ mask: linear-gradient(black calc(100% - 64px), transparent);
+ -webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
+ }
> .fade {
display: block;
position: absolute;
@@ -528,7 +527,6 @@ function readPromo() {
left: 0;
width: 100%;
height: 64px;
- background: linear-gradient(0deg, var(--panel), var(--X15));
> span {
display: inline-block;
@@ -569,6 +567,10 @@ function readPromo() {
}
}
+ > .files {
+ margin-top: .4em;
+ margin-bottom: .4em;
+ }
> .url-preview {
margin-top: 8px;
}
@@ -595,15 +597,18 @@ function readPromo() {
}
> .footer {
+ display: flex;
+ flex-wrap: wrap;
> .button {
margin: 0;
padding: 8px;
opacity: 0.7;
-
- &:not(:last-child) {
- margin-right: 16px;
+ flex-grow: 1;
+ max-width: 3.5em;
+ min-width: max-content;
+ &:first-of-type {
+ margin-left: -.5em;
}
-
&:hover {
color: var(--fgHighlighted);
}
@@ -628,67 +633,31 @@ function readPromo() {
&.max-width_500px {
font-size: 0.9em;
-
- > .article {
- > .avatar {
- width: 50px;
- height: 50px;
- }
- }
}
&.max-width_450px {
- > .renote {
- padding: 8px 16px 0 16px;
+ --avatarSize: 46px;
+ > .note-context {
+ padding-inline: 16px;
+ margin-top: 0;
+ > :not(.line) {
+ margin-top: 10px;
+ }
}
-
- > .info {
- padding: 8px 16px 0 16px;
- }
-
> .article {
- padding: 14px 16px 9px;
+ padding: 16px 16px 9px;
- > .avatar {
- margin: 0 10px 8px 0;
- width: 46px;
- height: 46px;
+ > .main > .header-container > .avatar {
+ margin-right: 10px;
// top: calc(14px + var(--stickyTop, 0px));
}
}
}
- &.max-width_350px {
- > .article {
- > .main {
- > .footer {
- > .button {
- &:not(:last-child) {
- margin-right: 18px;
- }
- }
- }
- }
- }
- }
+
&.max-width_300px {
- > .article {
- > .avatar {
- width: 44px;
- height: 44px;
- }
-
- > .main {
- > .footer {
- > .button {
- &:not(:last-child) {
- margin-right: 12px;
- }
- }
- }
- }
- }
+ --avatarSize: 40px;
}
}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 7f2d52ea0..dd6187d7e 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -54,9 +54,7 @@
-
-
@@ -338,14 +336,12 @@ if (appearNote.replyId) {
&:hover > .article > .main > .footer > .button {
opacity: 1;
}
-
> .reply-to {
- opacity: 0.7;
- padding-bottom: 0;
+ margin-bottom: -16px;
}
> .reply-to-more {
- opacity: 0.7;
+ // opacity: 0.7;
cursor: pointer;
@media (pointer: coarse) {
@@ -416,21 +412,26 @@ if (appearNote.replyId) {
> .avatar {
display: block;
flex-shrink: 0;
- width: 52px;
- height: 52px;
+ width: var(--avatarSize);
+ height: var(--avatarSize);
}
> .body {
+ width: 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
- padding-left: 16px;
+ padding-left: 14px;
font-size: 0.95em;
> .top {
+ display: flex;
+ align-items: center;
> .name {
font-weight: bold;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
> .is-bot {
@@ -557,7 +558,7 @@ if (appearNote.replyId) {
> .reply, .reply-to, .reply-to-more {
transition: background-color 0.25s ease-in-out;
-
+
&:hover {
background-color: var(--panelHighlight);
}
@@ -568,18 +569,18 @@ if (appearNote.replyId) {
}
&.max-width_450px {
+
+ > .reply-to-more:first-child {
+ padding-top: 14px;
+ }
> .renote {
padding: 8px 16px 0 16px;
}
> .article {
padding: 16px;
-
- > .header {
- > .avatar {
- width: 50px;
- height: 50px;
- }
+ > .header > .body {
+ padding-left: 10px;
}
}
}
@@ -602,12 +603,6 @@ if (appearNote.replyId) {
font-size: 0.825em;
> .article {
- > .header {
- > .avatar {
- width: 50px;
- height: 50px;
- }
- }
> .main {
> .footer {
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 7be4b0042..835611a43 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -1,16 +1,23 @@