Styling for sensitive media overlay
This commit is contained in:
parent
c51894a8a6
commit
3242b7deaf
3 changed files with 84 additions and 3 deletions
|
|
@ -1934,8 +1934,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
}
|
}
|
||||||
.app-body .media-gallery__preview,
|
.app-body .media-gallery__preview,
|
||||||
.app-body .video-player {
|
.app-body .video-player {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-secondary-bg);
|
||||||
}
|
}
|
||||||
|
.app-body .media-gallery__preview {
|
||||||
|
outline: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
outline-offset: -1px;
|
||||||
|
height: calc(100% - 1px);
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all .2s;
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button:hover + .media-gallery__item > .media-gallery__preview {
|
||||||
|
outline: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button__overlay__label,
|
||||||
|
.app-body .spoiler-button__overlay__label:is(:focus, :hover),
|
||||||
|
.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label {
|
||||||
|
backdrop-filter: none;
|
||||||
|
-webkit-backdrop-filter: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--color-content-fg);
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button__overlay__label > span:first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-body .media-gallery__gifv__label {
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 📊 Polls */
|
/* 📊 Polls */
|
||||||
.app-body .poll__chart,
|
.app-body .poll__chart,
|
||||||
|
|
|
||||||
|
|
@ -1933,8 +1933,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
}
|
}
|
||||||
.app-body .media-gallery__preview,
|
.app-body .media-gallery__preview,
|
||||||
.app-body .video-player {
|
.app-body .video-player {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-secondary-bg);
|
||||||
}
|
}
|
||||||
|
.app-body .media-gallery__preview {
|
||||||
|
outline: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
outline-offset: -1px;
|
||||||
|
height: calc(100% - 1px);
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all .2s;
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button:hover + .media-gallery__item > .media-gallery__preview {
|
||||||
|
outline: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button__overlay__label,
|
||||||
|
.app-body .spoiler-button__overlay__label:is(:focus, :hover),
|
||||||
|
.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label {
|
||||||
|
backdrop-filter: none;
|
||||||
|
-webkit-backdrop-filter: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--color-content-fg);
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button__overlay__label > span:first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-body .media-gallery__gifv__label {
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 📊 Polls */
|
/* 📊 Polls */
|
||||||
.app-body .poll__chart,
|
.app-body .poll__chart,
|
||||||
|
|
|
||||||
|
|
@ -1933,8 +1933,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
}
|
}
|
||||||
.app-body .media-gallery__preview,
|
.app-body .media-gallery__preview,
|
||||||
.app-body .video-player {
|
.app-body .video-player {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-secondary-bg);
|
||||||
}
|
}
|
||||||
|
.app-body .media-gallery__preview {
|
||||||
|
outline: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
outline-offset: -1px;
|
||||||
|
height: calc(100% - 1px);
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all .2s;
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button:hover + .media-gallery__item > .media-gallery__preview {
|
||||||
|
outline: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button__overlay__label,
|
||||||
|
.app-body .spoiler-button__overlay__label:is(:focus, :hover),
|
||||||
|
.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label {
|
||||||
|
backdrop-filter: none;
|
||||||
|
-webkit-backdrop-filter: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--color-content-fg);
|
||||||
|
}
|
||||||
|
.app-body .spoiler-button__overlay__label > span:first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-body .media-gallery__gifv__label {
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 📊 Polls */
|
/* 📊 Polls */
|
||||||
.app-body .poll__chart,
|
.app-body .poll__chart,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue