chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
commit f944836237
No known key found for this signature in database
3 changed files with 27 additions and 48 deletions
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-accent-fg: #ffffff;
--color-lines: #e1dde4; --color-lines: #e1dde4;
--color-lines-translucent: rgba(0, 0, 0, .15);
--color-confirm: #79bd9a; --color-confirm: #79bd9a;
--color-confirm-bg: rgba(121, 189, 154, 0.3); --color-confirm-bg: rgba(121, 189, 154, 0.3);
@ -68,6 +69,7 @@
--color-accent-fg: #ffffff; --color-accent-fg: #ffffff;
--color-lines: #343434; --color-lines: #343434;
--color-lines-translucent: rgba(255, 255, 255, .15);
} }
} }
:root { :root {
@ -1382,6 +1384,10 @@ body.app-body {
.app-body .display-name { .app-body .display-name {
color: var(--color-content-fg); 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 { .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
color: #ffffff; color: #ffffff;
} }
@ -2704,7 +2710,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .media-gallery__item-thumbnail img { .app-body .media-gallery__item-thumbnail img {
border-radius: 8px; border-radius: 8px;
outline: 1px solid rgba(0, 0, 0, .15); outline: 1px solid var(--color-lines-translucent);
outline-offset: -1px; outline-offset: -1px;
} }
.app-body .media-gallery__gifv::after, .app-body .media-gallery__gifv::after,
@ -2717,7 +2723,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
border: 1px solid rgba(0, 0, 0, .15); border: 1px solid var(--color-lines-translucent);
z-index: 1; z-index: 1;
} }
.app-body .media-gallery__gifv:is(:active, :hover)::after { .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; transition: all .2s;
} }
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline: 1px solid rgba(0, 0, 0, 0.15); outline: 1px solid var(--color-lines-translucent);
}
@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);
}
} }
.app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label,
.app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay__label:is(:focus, :hover),

25
TangerineUI-purple.css
View file

@ -36,6 +36,7 @@
--color-accent-fg: #ffffff; --color-accent-fg: #ffffff;
--color-lines: #e1dde4; --color-lines: #e1dde4;
--color-lines-translucent: rgba(0, 0, 0, .15);
--color-confirm: #79bd9a; --color-confirm: #79bd9a;
--color-confirm-bg: rgba(121, 189, 154, 0.3); --color-confirm-bg: rgba(121, 189, 154, 0.3);
@ -68,6 +69,7 @@
--color-accent-fg: #ffffff; --color-accent-fg: #ffffff;
--color-lines: #343434; --color-lines: #343434;
--color-lines-translucent: rgba(255, 255, 255, .15);
} }
} }
:root { :root {
@ -1382,6 +1384,10 @@ body.app-body {
.app-body .display-name { .app-body .display-name {
color: var(--color-content-fg); 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 { .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
color: #ffffff; color: #ffffff;
} }
@ -2704,7 +2710,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .media-gallery__item-thumbnail img { .app-body .media-gallery__item-thumbnail img {
border-radius: 8px; border-radius: 8px;
outline: 1px solid rgba(0, 0, 0, .15); outline: 1px solid var(--color-lines-translucent);
outline-offset: -1px; outline-offset: -1px;
} }
.app-body .media-gallery__gifv::after, .app-body .media-gallery__gifv::after,
@ -2717,7 +2723,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
border: 1px solid rgba(0, 0, 0, .15); border: 1px solid var(--color-lines-translucent);
z-index: 1; z-index: 1;
} }
.app-body .media-gallery__gifv:is(:active, :hover)::after { .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; transition: all .2s;
} }
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline: 1px solid rgba(0, 0, 0, 0.15); outline: 1px solid var(--color-lines-translucent);
}
@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);
}
} }
.app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label,
.app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay__label:is(:focus, :hover),

25
TangerineUI.css
View file

@ -36,6 +36,7 @@
--color-accent-fg: #ffffff; --color-accent-fg: #ffffff;
--color-lines: #e1dde4; --color-lines: #e1dde4;
--color-lines-translucent: rgba(0, 0, 0, .15);
--color-confirm: #79bd9a; --color-confirm: #79bd9a;
--color-confirm-bg: rgba(121, 189, 154, 0.3); --color-confirm-bg: rgba(121, 189, 154, 0.3);
@ -68,6 +69,7 @@
--color-accent-fg: #ffffff; --color-accent-fg: #ffffff;
--color-lines: #343434; --color-lines: #343434;
--color-lines-translucent: rgba(255, 255, 255, .15);
} }
} }
:root { :root {
@ -1382,6 +1384,10 @@ body.app-body {
.app-body .display-name { .app-body .display-name {
color: var(--color-content-fg); 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 { .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
color: #ffffff; color: #ffffff;
} }
@ -2704,7 +2710,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .media-gallery__item-thumbnail img { .app-body .media-gallery__item-thumbnail img {
border-radius: 8px; border-radius: 8px;
outline: 1px solid rgba(0, 0, 0, .15); outline: 1px solid var(--color-lines-translucent);
outline-offset: -1px; outline-offset: -1px;
} }
.app-body .media-gallery__gifv::after, .app-body .media-gallery__gifv::after,
@ -2717,7 +2723,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
border: 1px solid rgba(0, 0, 0, .15); border: 1px solid var(--color-lines-translucent);
z-index: 1; z-index: 1;
} }
.app-body .media-gallery__gifv:is(:active, :hover)::after { .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; transition: all .2s;
} }
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline: 1px solid rgba(0, 0, 0, 0.15); outline: 1px solid var(--color-lines-translucent);
}
@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);
}
} }
.app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label,
.app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay__label:is(:focus, :hover),