ThatHurleyGuy/frontend
1
0
Fork 0
forked from vikunja/frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(attachments): layout and coloring in dark mode

Browse Source
This commit is contained in:
kolaente 2023-09-29 09:28:51 +02:00
parent 3988a3f9f8
commit 0b1c8ed4dd
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/tasks/partials/attachments.vue
View File

@ -37,8 +37,8 @@
> >
<div class="filename"> <div class="filename">
{{ a.file.name }} {{ a.file.name }}
<span <span
v-if="task.coverImageAttachmentId === a.id" v-if="task.coverImageAttachmentId === a.id"
class="is-task-cover" class="is-task-cover"
> >
{{ $t('task.attachment.usedAsCover') }} {{ $t('task.attachment.usedAsCover') }}
@ -115,18 +115,20 @@
</x-button> </x-button>
<!-- Dropzone --> <!-- Dropzone -->
<div <Teleport to="body">
:class="{ hidden: !isOverDropZone }" <div
class="dropzone" :class="{ hidden: !isOverDropZone }"
v-if="editEnabled" class="dropzone"
> v-if="editEnabled"
<div class="drop-hint"> >
<div class="icon"> <div class="drop-hint">
<icon icon="cloud-upload-alt"/> <div class="icon">
<icon icon="cloud-upload-alt"/>
</div>
<div class="hint">{{ $t('task.attachment.drop') }}</div>
</div> </div>
<div class="hint">{{ $t('task.attachment.drop') }}</div>
</div> </div>
</div> </Teleport>
<!-- Delete modal --> <!-- Delete modal -->
<modal <modal
@ -323,7 +325,7 @@ async function setCoverImage(attachment: IAttachment | null) {
.dropzone { .dropzone {
position: fixed; position: fixed;
background: rgba(250, 250, 250, 0.8); background: hsla(var(--grey-100-hsl), 0.8);
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -356,11 +358,11 @@ async function setCoverImage(attachment: IAttachment | null) {
.hint { .hint {
margin: .5rem auto 2rem; margin: .5rem auto 2rem;
border-radius: 2px; border-radius: $radius;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
background: var(--primary); background: var(--primary);
padding: 1rem; padding: 1rem;
color: var(--white); color: $white; // Should always be white because of the background, regardless of the theme
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
} }