fix: tweak colors for blurhash sensitive media button/text (#1389)

This commit is contained in:
Nolan Lawson 2019-08-17 14:33:57 -07:00 committed by GitHub
parent 77bb784efd
commit aca1067568
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 2 deletions

View file

@ -7,7 +7,8 @@
class="status-sensitive-media-button"
aria-label="Hide sensitive media" >
<div class="svg-wrapper">
<SvgIcon className="status-sensitive-media-svg" href="#fa-eye-slash" />
<SvgIcon className={sensitiveMediaIconClass}
href="#fa-eye-slash" />
</div>
</button>
{:else}
@ -22,7 +23,7 @@
</div>
</div>
<div class="svg-wrapper">
<SvgIcon className="status-sensitive-media-svg" href="#fa-eye" />
<SvgIcon className={sensitiveMediaIconClass} href="#fa-eye" />
</div>
</button>
{/if}
@ -126,6 +127,7 @@
background: var(--mask-bg);
padding: 10px;
border-radius: 6px;
color: var(--blurhash-sensitive-text-color);
}
.status-sensitive-media-container .svg-wrapper {
@ -164,6 +166,11 @@
fill: var(--deemphasized-text-color);
background: var(--mask-opaque-bg);
}
:global(.status-sensitive-media-container.status-sensitive-media-hidden
.status-sensitive-media-svg.status-sensitive-media-svg-transparent) {
fill: var(--blurhash-sensitive-text-color);
background: var(--mask-bg);
}
</style>
<script>
import MediaAttachments from './MediaAttachments.html'
@ -206,6 +213,10 @@
customWarningClass: ({ canUseBlurhash }) => classname(
'status-sensitive-media-warning',
canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque'
),
sensitiveMediaIconClass: ({ canUseBlurhash }) => classname(
'status-sensitive-media-svg',
canUseBlurhash && 'status-sensitive-media-svg-transparent'
)
},
methods: {

View file

@ -127,4 +127,6 @@
--focal-bg-drag: #{rgba($toast-bg, 0.9)};
--focal-bg-hover: #{lighten(rgba($toast-bg, 0.8), 5%)};
--focal-color: #{$secondary-text-color};
--blurhash-sensitive-text-color: #{lighten($deemphasized-color, 40%)};
}

View file

@ -48,4 +48,6 @@
--toast-anchor-color: #{$anchor-color};
--length-indicator-color: var(--action-button-fill-color);
--blurhash-sensitive-text-color: #{lighten($deemphasized-color, 15%)};
}