23 lines
1.5 KiB
Svelte
23 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
let { compact = false }: { compact?: boolean } = $props();
|
|
</script>
|
|
|
|
<aside class="moderation-disclosure" class:compact aria-label="Automated safety review">
|
|
<span aria-hidden="true">i</span>
|
|
<p>
|
|
This submission may receive automated safety review.
|
|
<a href="/terms#privacy">TERMS & PRIVACY →</a>
|
|
</p>
|
|
</aside>
|
|
|
|
<style>
|
|
.moderation-disclosure{display:flex;align-items:flex-start;gap:8px;margin:8px 0;padding:8px 9px;border:1px solid var(--shd-border-soft);background:var(--shd-surface);color:var(--shd-text-muted)}
|
|
.moderation-disclosure>span{flex:0 0 20px;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--shd-border-strong);color:var(--shd-orange);font-size:var(--shd-type-telemetry);font-weight:900}
|
|
.moderation-disclosure p{margin:0;font-size:var(--shd-type-telemetry);line-height:1.5}
|
|
.moderation-disclosure a{display:inline-block;margin-left:4px;color:var(--shd-orange);font-weight:900;letter-spacing:.4px}
|
|
.moderation-disclosure a:hover{text-decoration:underline}
|
|
.moderation-disclosure a:focus-visible{outline:2px solid var(--shd-orange);outline-offset:3px}
|
|
.moderation-disclosure.compact{align-items:center;margin:0;padding:0;border:0;background:transparent}.moderation-disclosure.compact>span{display:none}.moderation-disclosure.compact p{color:var(--shd-text-dim)}.moderation-disclosure.compact a{color:var(--shd-text-muted)}
|
|
@media(max-width:650px){.moderation-disclosure{padding:10px}.moderation-disclosure a{display:block;min-height:44px;margin:4px 0 0;padding-top:8px}}
|
|
</style>
|