diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index d64a639..c95ce41 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -43,13 +43,13 @@ --color-secondary-bg: #1e162b; --color-secondary-separator: #26232e; - --color-content-bg: #1a1a1a; + --color-content-bg: #111111; --color-content-fg: #f2f2f2; --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: #22212f; --color-content-secondary-separator: rgba(64, 62, 89, 0.4); - --color-content-bg-focus: #222222; + --color-content-bg-focus: #1b1b1b; --color-accent: #7a7af9; --color-accent-focus: #5a47ff; @@ -988,6 +988,12 @@ body.layout-single-column { width: 0; height: 14px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .status--in-thread .status__line { + border-color: var(--color-accent); + opacity: .3; + } +} .layout-single-column .status__line.status__line--full { height: 100%; } @@ -1122,6 +1128,7 @@ body.layout-single-column { .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; + transition: all .1s; } .layout-single-column .hashtag-bar .link-button { font-size: 80%; @@ -1148,6 +1155,16 @@ body.layout-single-column { .layout-single-column .hashtag-bar a:hover span { text-decoration: none; } +@media (prefers-color-scheme: dark) { + .layout-single-column .hashtag-bar a, + .layout-single-column .hashtag-bar .link-button { + color: var(--color-accent); + } + .layout-single-column .hashtag-bar a:hover, + .layout-single-column .hashtag-bar .link-button:hover { + color: var(--color-content-fg); + } +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { diff --git a/TangerineUI.css b/TangerineUI.css index a505aa0..e53e263 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -43,13 +43,13 @@ --color-secondary-bg: #282015; --color-secondary-separator: #25201c; - --color-content-bg: #1a1a1a; + --color-content-bg: #111111; --color-content-fg: #f2f2f2; --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: #292623; --color-content-secondary-separator: rgba(77, 73, 70, 0.4); - --color-content-bg-focus: #222222; + --color-content-bg-focus: #1b1b1b; --color-accent: #e68933; --color-accent-focus: #ffa047; @@ -988,6 +988,12 @@ body.layout-single-column { width: 0; height: 14px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .status--in-thread .status__line { + border-color: var(--color-accent); + opacity: .3; + } +} .layout-single-column .status__line.status__line--full { height: 100%; } @@ -1122,6 +1128,7 @@ body.layout-single-column { .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; + transition: all .1s; } .layout-single-column .hashtag-bar .link-button { font-size: 80%; @@ -1148,6 +1155,16 @@ body.layout-single-column { .layout-single-column .hashtag-bar a:hover span { text-decoration: none; } +@media (prefers-color-scheme: dark) { + .layout-single-column .hashtag-bar a, + .layout-single-column .hashtag-bar .link-button { + color: var(--color-accent); + } + .layout-single-column .hashtag-bar a:hover, + .layout-single-column .hashtag-bar .link-button:hover { + color: var(--color-content-fg); + } +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index d64a639..c95ce41 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -43,13 +43,13 @@ --color-secondary-bg: #1e162b; --color-secondary-separator: #26232e; - --color-content-bg: #1a1a1a; + --color-content-bg: #111111; --color-content-fg: #f2f2f2; --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: #22212f; --color-content-secondary-separator: rgba(64, 62, 89, 0.4); - --color-content-bg-focus: #222222; + --color-content-bg-focus: #1b1b1b; --color-accent: #7a7af9; --color-accent-focus: #5a47ff; @@ -988,6 +988,12 @@ body.layout-single-column { width: 0; height: 14px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .status--in-thread .status__line { + border-color: var(--color-accent); + opacity: .3; + } +} .layout-single-column .status__line.status__line--full { height: 100%; } @@ -1122,6 +1128,7 @@ body.layout-single-column { .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; + transition: all .1s; } .layout-single-column .hashtag-bar .link-button { font-size: 80%; @@ -1148,6 +1155,16 @@ body.layout-single-column { .layout-single-column .hashtag-bar a:hover span { text-decoration: none; } +@media (prefers-color-scheme: dark) { + .layout-single-column .hashtag-bar a, + .layout-single-column .hashtag-bar .link-button { + color: var(--color-accent); + } + .layout-single-column .hashtag-bar a:hover, + .layout-single-column .hashtag-bar .link-button:hover { + color: var(--color-content-fg); + } +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index a505aa0..e53e263 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -43,13 +43,13 @@ --color-secondary-bg: #282015; --color-secondary-separator: #25201c; - --color-content-bg: #1a1a1a; + --color-content-bg: #111111; --color-content-fg: #f2f2f2; --color-content-fg-bold: #ffffff; --color-content-fg-muted: #737373; --color-content-secondary-bg: #292623; --color-content-secondary-separator: rgba(77, 73, 70, 0.4); - --color-content-bg-focus: #222222; + --color-content-bg-focus: #1b1b1b; --color-accent: #e68933; --color-accent-focus: #ffa047; @@ -988,6 +988,12 @@ body.layout-single-column { width: 0; height: 14px; } +@media (prefers-color-scheme: dark) { + .layout-single-column .status--in-thread .status__line { + border-color: var(--color-accent); + opacity: .3; + } +} .layout-single-column .status__line.status__line--full { height: 100%; } @@ -1122,6 +1128,7 @@ body.layout-single-column { .layout-single-column .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; + transition: all .1s; } .layout-single-column .hashtag-bar .link-button { font-size: 80%; @@ -1148,6 +1155,16 @@ body.layout-single-column { .layout-single-column .hashtag-bar a:hover span { text-decoration: none; } +@media (prefers-color-scheme: dark) { + .layout-single-column .hashtag-bar a, + .layout-single-column .hashtag-bar .link-button { + color: var(--color-accent); + } + .layout-single-column .hashtag-bar a:hover, + .layout-single-column .hashtag-bar .link-button:hover { + color: var(--color-content-fg); + } +} /* ⭐ Action bar */ .layout-single-column .status__action-bar {