diff --git a/src/components/RefFigure.vue b/src/components/RefFigure.vue index f8e9ec5..e6b752f 100644 --- a/src/components/RefFigure.vue +++ b/src/components/RefFigure.vue @@ -4,6 +4,7 @@ import { nsfwKey, showModalKey } from '@/keys' import RefToggle from '@/components/RefToggle.vue' interface Props { + cornerText?: boolean polaroidBorder?: boolean dropshadow?: boolean nsfw?: boolean @@ -18,7 +19,13 @@ defineProps() @@ -93,6 +96,40 @@ defineProps() } } + &__border--cornertext { + position: relative; + } + + &__border--cornertext img, + &__border--cornertext &__cencor { + margin: 1rem 0; + border-radius: 1rem; + filter: drop-shadow(0 0 0.625rem black); + } + + &__border--cornertext &__meta { + position: absolute; + bottom: 0; + right: 0; + + background-color: rgba(0, 0, 0, 0.7); + + font-size: 0.75rem; + + margin: 0 0 1.35rem 0; + border-radius: 1em 0 1rem 0; + padding: 0.25rem 0.75rem; + + .caption, + .copyright { + display: inline; + } + + .caption { + margin: 0 0.125rem 0 0; + } + } + &__border--polaroid &__meta { font-family: 'Permanent Marker', fantasy; color: var(--color-figure-polaroid-text);