diff options
| author | Julien Veyssier <eneiluj@posteo.net> | 2022-08-23 12:49:59 +0300 |
|---|---|---|
| committer | Julien Veyssier <eneiluj@posteo.net> | 2022-09-06 15:44:53 +0300 |
| commit | 4a73e1365e538d7970ec70550ae55f88a376b3c6 (patch) | |
| tree | b89d1a473a475b711411696b5842db217facf091 | |
| parent | 0497a9e4c72740c5cb6d827982d58b4b1cb41cf6 (diff) | |
improve media file style
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
| -rw-r--r-- | src/nodes/ImageView.vue | 33 |
1 files changed, 22 insertions, 11 deletions
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue index ce8ae1e04..db5409ae5 100644 --- a/src/nodes/ImageView.vue +++ b/src/nodes/ImageView.vue @@ -40,12 +40,14 @@ :src="imageUrl" class="image__main" @load="onLoaded"> - <span class="name"> - {{ alt }} - </span> - <span class="size"> - {{ attachmentMetadata.size }} - </span> + <div class="metadata"> + <span class="name"> + {{ alt }} + </span> + <span class="size"> + {{ attachmentMetadata.size }} + </span> + </div> </div> <div v-else> <img v-show="loaded" @@ -343,14 +345,23 @@ export default { .media { display: flex; align-items: center; + justify-content: center; img { - width: 32px; - height: 32px; + width: 40px; + height: 40px; } - .name { - flex-grow: 1; - text-align: left; + .metadata { margin-left: 8px; + display: flex; + flex-direction: column; + align-items: start; + span { + line-height: 20px; + font-weight: normal; + &.size { + color: var(--color-text-maxcontrast); + } + } } } |