diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss index 7f3a4c9..b6fb54e 100644 --- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss +++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss @@ -36,6 +36,7 @@ --color-accent-fg: #ffffff; --color-lines: #e1dde4; + --color-lines-translucent: rgba(0, 0, 0, .15); --color-confirm: #79bd9a; --color-confirm-bg: rgba(121, 189, 154, 0.3); @@ -68,6 +69,7 @@ --color-accent-fg: #ffffff; --color-lines: #343434; + --color-lines-translucent: rgba(255, 255, 255, .15); } } :root { @@ -1382,6 +1384,10 @@ body.app-body { .app-body .display-name { color: var(--color-content-fg); } +.app-body .compose-form__upload__thumbnail { + outline-offset: -1px; + outline: 1px solid var(--color-lines-translucent); +} .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } @@ -1962,7 +1968,6 @@ body.app-body { border-top: 1px solid var(--color-lines); } .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, -.app-body .scrollable > div:last-child > .status__wrapper, .app-body .scrollable > div > article:last-child > div > .status__wrapper, .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); @@ -2704,7 +2709,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .media-gallery__item-thumbnail img { border-radius: 8px; - outline: 1px solid rgba(0, 0, 0, .15); + outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } .app-body .media-gallery__gifv::after, @@ -2717,7 +2722,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu left: 0; bottom: 0; right: 0; - border: 1px solid rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines-translucent); z-index: 1; } .app-body .media-gallery__gifv:is(:active, :hover)::after { @@ -2738,20 +2743,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: all .2s; } .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { - outline: 1px solid rgba(0, 0, 0, 0.15); -} -@media (prefers-color-scheme: dark) { - .app-body .media-gallery__preview { - outline-color: rgba(255, 255, 255, .05); - } - .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview, - .app-body .media-gallery__item-thumbnail img { - outline-color: rgba(255, 255, 255, .15); - } - .app-body .media-gallery__gifv::after, - .app-body .video-player::after { - border-color: rgba(255, 255, 255, .1); - } + outline: 1px solid var(--color-lines-translucent); } .app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label:is(:focus, :hover), @@ -4438,7 +4430,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .item-list .column-subheading { color: var(--color-fg-muted); - border: 1px solid var(--color-lines); border-top: 0; border-bottom: 0; } @@ -4496,8 +4487,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .item-list .column-link { margin-left: 0; width: 100%; - border-left: 1px solid var(--color-lines); - border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); background-color: var(--color-content-bg); box-sizing: border-box; @@ -4507,8 +4496,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); } .app-body .item-list article:last-child .column-link { - border-bottom: 1px solid var(--color-lines); - border-radius: 0 0 8px 8px; + border-bottom: 0; } @media screen and (max-width:889px) { .app-body .item-list .column-link { @@ -4848,6 +4836,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } +.app-body .privacy-dropdown__option .icon-info-circle path { + fill: var(--color-content-fg); +} +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path { + fill: var(--color-accent-fg); +} .app-body .dropdown-animation { animation: fadein-short .2s 1; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss index 2ccc288..42c31f5 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss @@ -36,6 +36,7 @@ --color-accent-fg: #ffffff; --color-lines: #e1dde4; + --color-lines-translucent: rgba(0, 0, 0, .15); --color-confirm: #79bd9a; --color-confirm-bg: rgba(121, 189, 154, 0.3); @@ -68,6 +69,7 @@ --color-accent-fg: #ffffff; --color-lines: #343434; + --color-lines-translucent: rgba(255, 255, 255, .15); } } :root { @@ -1382,6 +1384,10 @@ body.app-body { .app-body .display-name { color: var(--color-content-fg); } +.app-body .compose-form__upload__thumbnail { + outline-offset: -1px; + outline: 1px solid var(--color-lines-translucent); +} .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } @@ -1962,7 +1968,6 @@ body.app-body { border-top: 1px solid var(--color-lines); } .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, -.app-body .scrollable > div:last-child > .status__wrapper, .app-body .scrollable > div > article:last-child > div > .status__wrapper, .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); @@ -2704,7 +2709,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .media-gallery__item-thumbnail img { border-radius: 8px; - outline: 1px solid rgba(0, 0, 0, .15); + outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } .app-body .media-gallery__gifv::after, @@ -2717,7 +2722,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu left: 0; bottom: 0; right: 0; - border: 1px solid rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines-translucent); z-index: 1; } .app-body .media-gallery__gifv:is(:active, :hover)::after { @@ -2738,20 +2743,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: all .2s; } .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { - outline: 1px solid rgba(0, 0, 0, 0.15); -} -@media (prefers-color-scheme: dark) { - .app-body .media-gallery__preview { - outline-color: rgba(255, 255, 255, .05); - } - .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview, - .app-body .media-gallery__item-thumbnail img { - outline-color: rgba(255, 255, 255, .15); - } - .app-body .media-gallery__gifv::after, - .app-body .video-player::after { - border-color: rgba(255, 255, 255, .1); - } + outline: 1px solid var(--color-lines-translucent); } .app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label:is(:focus, :hover), @@ -4438,7 +4430,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .item-list .column-subheading { color: var(--color-fg-muted); - border: 1px solid var(--color-lines); border-top: 0; border-bottom: 0; } @@ -4496,8 +4487,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .item-list .column-link { margin-left: 0; width: 100%; - border-left: 1px solid var(--color-lines); - border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); background-color: var(--color-content-bg); box-sizing: border-box; @@ -4507,8 +4496,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); } .app-body .item-list article:last-child .column-link { - border-bottom: 1px solid var(--color-lines); - border-radius: 0 0 8px 8px; + border-bottom: 0; } @media screen and (max-width:889px) { .app-body .item-list .column-link { @@ -4848,6 +4836,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } +.app-body .privacy-dropdown__option .icon-info-circle path { + fill: var(--color-content-fg); +} +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path { + fill: var(--color-accent-fg); +} .app-body .dropdown-animation { animation: fadein-short .2s 1; diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss index be6f7d1..79d51d3 100644 --- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss +++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss @@ -36,6 +36,7 @@ --color-accent-fg: #ffffff; --color-lines: #e1dde4; + --color-lines-translucent: rgba(0, 0, 0, .15); --color-confirm: #79bd9a; --color-confirm-bg: rgba(121, 189, 154, 0.3); @@ -68,6 +69,7 @@ --color-accent-fg: #ffffff; --color-lines: #343434; + --color-lines-translucent: rgba(255, 255, 255, .15); } } :root { @@ -1382,6 +1384,10 @@ body.app-body { .app-body .display-name { color: var(--color-content-fg); } +.app-body .compose-form__upload__thumbnail { + outline-offset: -1px; + outline: 1px solid var(--color-lines-translucent); +} .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } @@ -1962,7 +1968,6 @@ body.app-body { border-top: 1px solid var(--color-lines); } .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, -.app-body .scrollable > div:last-child > .status__wrapper, .app-body .scrollable > div > article:last-child > div > .status__wrapper, .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); @@ -2704,7 +2709,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .media-gallery__item-thumbnail img { border-radius: 8px; - outline: 1px solid rgba(0, 0, 0, .15); + outline: 1px solid var(--color-lines-translucent); outline-offset: -1px; } .app-body .media-gallery__gifv::after, @@ -2717,7 +2722,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu left: 0; bottom: 0; right: 0; - border: 1px solid rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines-translucent); z-index: 1; } .app-body .media-gallery__gifv:is(:active, :hover)::after { @@ -2738,20 +2743,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: all .2s; } .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { - outline: 1px solid rgba(0, 0, 0, 0.15); -} -@media (prefers-color-scheme: dark) { - .app-body .media-gallery__preview { - outline-color: rgba(255, 255, 255, .05); - } - .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview, - .app-body .media-gallery__item-thumbnail img { - outline-color: rgba(255, 255, 255, .15); - } - .app-body .media-gallery__gifv::after, - .app-body .video-player::after { - border-color: rgba(255, 255, 255, .1); - } + outline: 1px solid var(--color-lines-translucent); } .app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label:is(:focus, :hover), @@ -4438,7 +4430,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .item-list .column-subheading { color: var(--color-fg-muted); - border: 1px solid var(--color-lines); border-top: 0; border-bottom: 0; } @@ -4496,8 +4487,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .item-list .column-link { margin-left: 0; width: 100%; - border-left: 1px solid var(--color-lines); - border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); background-color: var(--color-content-bg); box-sizing: border-box; @@ -4507,8 +4496,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); } .app-body .item-list article:last-child .column-link { - border-bottom: 1px solid var(--color-lines); - border-radius: 0 0 8px 8px; + border-bottom: 0; } @media screen and (max-width:889px) { .app-body .item-list .column-link { @@ -4848,6 +4836,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } +.app-body .privacy-dropdown__option .icon-info-circle path { + fill: var(--color-content-fg); +} +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path { + fill: var(--color-accent-fg); +} .app-body .dropdown-animation { animation: fadein-short .2s 1;