mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-30 15:58:07 +09:00
Code

Added border around upload media in the compose form

Browse Source
This commit is contained in:
Niléane 2024-01-30 00:31:32 +01:00
parent 59d67e9e19
commit f944836237
No known key found for this signature in database
3 changed files with 27 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
TangerineUI-cherry.css
View File

@ -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;
}
@ -2704,7 +2710,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 +2723,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 +2744,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),

25
TangerineUI-purple.css
View File

@ -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;
}
@ -2704,7 +2710,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 +2723,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 +2744,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),

25
TangerineUI.css
View File

@ -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;
}
@ -2704,7 +2710,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 +2723,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 +2744,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),