mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-27 14:28:14 +09:00
Code

Refined the appearance of thread lines

Browse Source
This commit is contained in:
Niléane 2023-12-08 04:19:18 +01:00
parent 8a258268cb
commit 483e3b2643
No known key found for this signature in database
3 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
TangerineUI-cherry.css
View File

@ -1267,6 +1267,9 @@ body.app-body {
.app-body .status__avatar { .app-body .status__avatar {
margin-bottom: -10px; margin-bottom: -10px;
z-index: 2; z-index: 2;
border-radius: 50%;
box-shadow: 0 0 0 7px var(--color-content-bg);
transition: box-shadow .3s;
} }
.app-body .reply-indicator__content, .app-body .reply-indicator__content,
.app-body .status__content { .app-body .status__content {
@ -1378,7 +1381,7 @@ body.app-body {
} }
/* Threaded line, actually */ /* Threaded line, actually */
.app-body .status__line { .app-body .status__line {
margin-inline-start: 5px; margin-inline-start: 6px;
border-inline-start: 2px solid var(--color-accent); border-inline-start: 2px solid var(--color-accent);
-webkit-border-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent);
opacity: .6; opacity: .6;
@ -1413,6 +1416,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) { .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) {
background: var(--color-content-bg-focus); background: var(--color-content-bg-focus);
} }
.app-body .status__wrapper:has(.status__content:hover) .status__avatar {
box-shadow: 0 0 0 7px var(--color-content-bg-focus);
}
}
.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
box-shadow: 0 0 0 7px var(--color-content-bg-focus);
} }
/* 👁️ Post detailed view */ /* 👁️ Post detailed view */

11
TangerineUI-purple.css
View File

@ -1266,6 +1266,9 @@ body.app-body {
.app-body .status__avatar { .app-body .status__avatar {
margin-bottom: -10px; margin-bottom: -10px;
z-index: 2; z-index: 2;
border-radius: 50%;
box-shadow: 0 0 0 7px var(--color-content-bg);
transition: box-shadow .3s;
} }
.app-body .reply-indicator__content, .app-body .reply-indicator__content,
.app-body .status__content { .app-body .status__content {
@ -1377,7 +1380,7 @@ body.app-body {
} }
/* Threaded line, actually */ /* Threaded line, actually */
.app-body .status__line { .app-body .status__line {
margin-inline-start: 5px; margin-inline-start: 6px;
border-inline-start: 2px solid var(--color-accent); border-inline-start: 2px solid var(--color-accent);
-webkit-border-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent);
opacity: .6; opacity: .6;
@ -1412,6 +1415,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) { .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) {
background: var(--color-content-bg-focus); background: var(--color-content-bg-focus);
} }
.app-body .status__wrapper:has(.status__content:hover) .status__avatar {
box-shadow: 0 0 0 7px var(--color-content-bg-focus);
}
}
.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
box-shadow: 0 0 0 7px var(--color-content-bg-focus);
} }
/* 👁️ Post detailed view */ /* 👁️ Post detailed view */

11
TangerineUI.css
View File

@ -1266,6 +1266,9 @@ body.app-body {
.app-body .status__avatar { .app-body .status__avatar {
margin-bottom: -10px; margin-bottom: -10px;
z-index: 2; z-index: 2;
border-radius: 50%;
box-shadow: 0 0 0 7px var(--color-content-bg);
transition: box-shadow .3s;
} }
.app-body .reply-indicator__content, .app-body .reply-indicator__content,
.app-body .status__content { .app-body .status__content {
@ -1377,7 +1380,7 @@ body.app-body {
} }
/* Threaded line, actually */ /* Threaded line, actually */
.app-body .status__line { .app-body .status__line {
margin-inline-start: 5px; margin-inline-start: 6px;
border-inline-start: 2px solid var(--color-accent); border-inline-start: 2px solid var(--color-accent);
-webkit-border-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent);
opacity: .6; opacity: .6;
@ -1412,6 +1415,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) { .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) {
background: var(--color-content-bg-focus); background: var(--color-content-bg-focus);
} }
.app-body .status__wrapper:has(.status__content:hover) .status__avatar {
box-shadow: 0 0 0 7px var(--color-content-bg-focus);
}
}
.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
box-shadow: 0 0 0 7px var(--color-content-bg-focus);
} }
/* 👁️ Post detailed view */ /* 👁️ Post detailed view */