-
RN:
@@ -345,83 +346,105 @@ 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: -15px;
+ 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: 16px;
}
-
- > i {
- margin-right: 4px;
+ > :not(.line) {
+ width: 0;
+ flex-grow: 1;
+ position: relative;
+ margin-bottom: -15px;
}
+ > .line {
+ width: var(--avatar-size);
+ display: flex;
+ margin-right: 14px;
+ margin-top: 0;
+ flex-grow: 0;
+ }
+
+ > div > i {
+ position: absolute;
+ right: 100%;
+ }
+ > .info {
+ display: flex;
+ align-items: center;
+ line-height: 24px;
+ 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;
+ line-height: 28px;
+ 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;
+
+ > .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;
+ }
+
}
> .article {
@@ -437,9 +460,9 @@ function readPromo() {
> .avatar {
flex-shrink: 0;
display: block;
- margin: 0 14px 8px 0;
- width: 48px;
- height: 48px;
+ margin: 0 14px 0 0;
+ width: var(--avatar-size);
+ height: var(--avatar-size);
position: relative;
top: 0;
left: 0;
@@ -454,10 +477,8 @@ function readPromo() {
min-width: 0;
> .body {
- margin-top: .2em;
+ margin-top: .7em;
overflow: hidden;
- margin-inline: -100px;
- padding-inline: 100px;
> .cw {
cursor: default;
@@ -606,31 +627,19 @@ function readPromo() {
&.max-width_500px {
font-size: 0.9em;
-
- > .article {
- > .avatar {
- width: 50px;
- height: 50px;
- }
- }
+ // --avatar-size: 50px;
}
&.max-width_450px {
- > .renote {
- padding: 8px 16px 0 16px;
+ --avatar-size: 46px;
+ > .note-context {
+ padding-inline: 16px;
}
-
- > .info {
- padding: 8px 16px 0 16px;
- }
-
> .article {
padding: 14px 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));
}
}
@@ -651,11 +660,8 @@ function readPromo() {
}
&.max-width_300px {
+ --avatar-size: 40px;
> .article {
- > .avatar {
- width: 44px;
- height: 44px;
- }
> .main {
> .footer {
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index cfa56a019d..ff277c3cf0 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -340,12 +340,11 @@ if (appearNote.replyId) {
}
> .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,8 +415,8 @@ if (appearNote.replyId) {
> .avatar {
display: block;
flex-shrink: 0;
- width: 52px;
- height: 52px;
+ width: var(--avatar-size);
+ height: var(--avatar-size);
}
> .body {
@@ -425,7 +424,7 @@ if (appearNote.replyId) {
display: flex;
flex-direction: column;
justify-content: center;
- padding-left: 16px;
+ padding-left: 14px;
font-size: 0.95em;
> .top {
@@ -574,12 +573,8 @@ if (appearNote.replyId) {
> .article {
padding: 16px;
-
- > .header {
- > .avatar {
- width: 50px;
- height: 50px;
- }
+ > .header > .body {
+ padding-left: 10px;
}
}
}
@@ -602,12 +597,6 @@ if (appearNote.replyId) {
font-size: 0.825em;
> .article {
- > .header {
- > .avatar {
- width: 50px;
- height: 50px;
- }
- }
> .main {
> .footer {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index c876c45857..bde41e13c7 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,7 +1,10 @@
-
+
+
+
+
@@ -56,11 +59,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 033d0b6741..9a66999bbf 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -4,6 +4,7 @@
--radius: 12px;
--marginFull: 16px;
--marginHalf: 10px;
+ --avatar-size: 48px;
--margin: var(--marginFull);