Friendica threads lack a visual thread that ties the discussions together.
This can be created using CSS. Here is a draft. Perhaps someone will take up this idea, improve it and incorporate it into the scheme.:root {
--border-color: $border_color;
--thread-level-1-color: #fff; /* Sehr, sehr helles Grau */
--thread-level-1-hover-color: #e0e0e0; /* Sehr helles Grau */
--thread-level-2-color: #fafafb; /* Sehr helles Grau */
--thread-level-2-hover-color: #f0f0f0; /* Helles Grau */
--thread-level-3-color: #e6f7ff; /* Hellblau */
--thread-level-3-hover-color: #b3efff; /* Helles Blau */
--thread-level-4-color: #e6ffed; /* Hellgrün */
--thread-level-4-hover-color: #b3ffd9; /* Helles Grün */
--thread-level-5-color: #fff2e6; /* Hellorange */
--thread-level-5-hover-color: #ffd9b3; /* Helles Orange */
--thread-level-6-color: #f9e6ff; /* Hellviolett */
--thread-level-6-hover-color: #e6b3ff; /* Helles Violett */
--thread-level-7-color: #ffe6e6; /* Hellrot */
--thread-level-7-hover-color: #ffb3b3; /* Helles Rot */
--thread-level-8-color: #f5f5f5; /* Helles Grau */
--thread-level-8-hover-color: #d5d5d5; /* Mittleres Grau */
--thread-level-9-color: #e5e5e5; /* Mittleres Grau */
--thread-level-9-hover-color: #c9c9c9; /* Dunkelgrau */
}
/* Thread mit einem durchgehenden Faden, der die Profilbilder verbindet */
.wall-item-container.thread_level_1,
.wall-item-container.thread_level_2,
.wall-item-container.thread_level_3,
.wall-item-container.thread_level_4,
.wall-item-container.thread_level_5,
.wall-item-container.thread_level_6,
.wall-item-container.thread_level_7,
.wall-item-container.thread_level_8,
.wall-item-container.thread_level_9 {
margin-left: 0;
}
[class*="thread_level_"]:not(.thread_level_1) {
position: relative;
border-left: 10px solid transparent;
}
.thread_level_1 {
position: relative;
border-left: 0;
}
[class*="thread_level_"]::before {
content: "";
position: absolute;
left: 28px;
top: 60px;
bottom: 15px;
width: 3px;
z-index: 1;
background-color: inherit;
}
.contact-photo-image-wrapper,
.wwto .contact-photo {
z-index: 10;
}
[class*="thread_level_"]::after {
content: "";
position: absolute;
top: 45px;
left: -8px;
width: 26px;
height: 1px;
background-color: inherit;
z-index: 1;
}
.thread_level_1::before { background-color: transparent; }
.thread_level_2::before { background-color: var(--thread-level-2-color); }
.thread_level_2:hover::before { background-color: var(--thread-level-2-hover-color); }
.thread_level_3::before { background-color: var(--thread-level-3-color); }
.thread_level_3:hover::before { background-color: var(--thread-level-3-hover-color); }
.thread_level_4::before { background-color: var(--thread-level-4-color); }
.thread_level_4:hover::before { background-color: var(--thread-level-4-hover-color); }
.thread_level_5::before { background-color: var(--thread-level-5-color); }
.thread_level_5:hover::before { background-color: var(--thread-level-5-hover-color); }
.thread_level_6::before { background-color: var(--thread-level-6-color); }
.thread_level_6:hover::before { background-color: var(--thread-level-6-hover-color); }
.thread_level_7::before { background-color: var(--thread-level-7-color); }
.thread_level_7:hover::before { background-color: var(--thread-level-7-hover-color); }
.thread_level_8::before { background-color: var(--thread-level-8-color); }
.thread_level_8:hover::before { background-color: var(--thread-level-8-hover-color); }
.thread_level_9::before { background-color: var(--thread-level-9-color); }
.thread_level_9:hover::before { background-color: var(--thread-level-9-hover-color); }
This can be created using CSS. Here is a draft. Perhaps someone will take up this idea, improve it and incorporate it into the scheme.:root {
--border-color: $border_color;
--thread-level-1-color: #fff; /* Sehr, sehr helles Grau */
--thread-level-1-hover-color: #e0e0e0; /* Sehr helles Grau */
--thread-level-2-color: #fafafb; /* Sehr helles Grau */
--thread-level-2-hover-color: #f0f0f0; /* Helles Grau */
--thread-level-3-color: #e6f7ff; /* Hellblau */
--thread-level-3-hover-color: #b3efff; /* Helles Blau */
--thread-level-4-color: #e6ffed; /* Hellgrün */
--thread-level-4-hover-color: #b3ffd9; /* Helles Grün */
--thread-level-5-color: #fff2e6; /* Hellorange */
--thread-level-5-hover-color: #ffd9b3; /* Helles Orange */
--thread-level-6-color: #f9e6ff; /* Hellviolett */
--thread-level-6-hover-color: #e6b3ff; /* Helles Violett */
--thread-level-7-color: #ffe6e6; /* Hellrot */
--thread-level-7-hover-color: #ffb3b3; /* Helles Rot */
--thread-level-8-color: #f5f5f5; /* Helles Grau */
--thread-level-8-hover-color: #d5d5d5; /* Mittleres Grau */
--thread-level-9-color: #e5e5e5; /* Mittleres Grau */
--thread-level-9-hover-color: #c9c9c9; /* Dunkelgrau */
}
/* Thread mit einem durchgehenden Faden, der die Profilbilder verbindet */
.wall-item-container.thread_level_1,
.wall-item-container.thread_level_2,
.wall-item-container.thread_level_3,
.wall-item-container.thread_level_4,
.wall-item-container.thread_level_5,
.wall-item-container.thread_level_6,
.wall-item-container.thread_level_7,
.wall-item-container.thread_level_8,
.wall-item-container.thread_level_9 {
margin-left: 0;
}
[class*="thread_level_"]:not(.thread_level_1) {
position: relative;
border-left: 10px solid transparent;
}
.thread_level_1 {
position: relative;
border-left: 0;
}
[class*="thread_level_"]::before {
content: "";
position: absolute;
left: 28px;
top: 60px;
bottom: 15px;
width: 3px;
z-index: 1;
background-color: inherit;
}
.contact-photo-image-wrapper,
.wwto .contact-photo {
z-index: 10;
}
[class*="thread_level_"]::after {
content: "";
position: absolute;
top: 45px;
left: -8px;
width: 26px;
height: 1px;
background-color: inherit;
z-index: 1;
}
.thread_level_1::before { background-color: transparent; }
.thread_level_2::before { background-color: var(--thread-level-2-color); }
.thread_level_2:hover::before { background-color: var(--thread-level-2-hover-color); }
.thread_level_3::before { background-color: var(--thread-level-3-color); }
.thread_level_3:hover::before { background-color: var(--thread-level-3-hover-color); }
.thread_level_4::before { background-color: var(--thread-level-4-color); }
.thread_level_4:hover::before { background-color: var(--thread-level-4-hover-color); }
.thread_level_5::before { background-color: var(--thread-level-5-color); }
.thread_level_5:hover::before { background-color: var(--thread-level-5-hover-color); }
.thread_level_6::before { background-color: var(--thread-level-6-color); }
.thread_level_6:hover::before { background-color: var(--thread-level-6-hover-color); }
.thread_level_7::before { background-color: var(--thread-level-7-color); }
.thread_level_7:hover::before { background-color: var(--thread-level-7-hover-color); }
.thread_level_8::before { background-color: var(--thread-level-8-color); }
.thread_level_8:hover::before { background-color: var(--thread-level-8-hover-color); }
.thread_level_9::before { background-color: var(--thread-level-9-color); }
.thread_level_9:hover::before { background-color: var(--thread-level-9-hover-color); }
1