From 1b204012eaf3fcc262689a070424c618d8d3a917 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 6 Mar 2022 18:38:57 -0500
Subject: [PATCH] Make media modal buttons larger
---
src/components/media_modal/media_modal.vue | 20 +++++++++++---------
1 file changed, 11 insertions(+), 9 deletions(-)
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 2d00d7fb..708a43c6 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -115,9 +115,10 @@
<script src="./media_modal.js"></script>
<style lang="scss">
-$modal-view-button-icon-height: 30px;
-$modal-view-button-icon-width: 32px;
-$modal-view-button-icon-margin: 6px;
+$modal-view-button-icon-height: 3em;
+$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
+$modal-view-button-icon-width: 3em;
+$modal-view-button-icon-margin: 0.5em;
.modal-view.media-modal-view {
z-index: 1001;
@@ -226,6 +227,8 @@ $modal-view-button-icon-margin: 6px;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+ height: $modal-view-button-icon-height;
+ width: $modal-view-button-icon-width;
.button-icon {
position: absolute;
@@ -243,15 +246,14 @@ $modal-view-button-icon-margin: 6px;
position: absolute;
display: block;
top: 50%;
- margin-top: -50px;
- width: 70px;
- height: 100px;
+ margin-top: $modal-view-button-icon-half-height;
+ width: $modal-view-button-icon-width;
+ height: $modal-view-button-icon-height;
.arrow-icon {
position: absolute;
- top: 35px;
- font-size: 14px;
- line-height: 30px;
+ top: 0;
+ line-height: $modal-view-button-icon-height;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);