diff options
| author | Tusooa Zhu <tusooa@kazv.moe> | 2022-03-06 18:38:57 -0500 |
|---|---|---|
| committer | Tusooa Zhu <tusooa@kazv.moe> | 2022-03-13 12:02:03 -0400 |
| commit | 1b204012eaf3fcc262689a070424c618d8d3a917 (patch) | |
| tree | 62f85ccaf04182630ae183cbba02a063fff8b946 /src/components/media_modal/media_modal.vue | |
| parent | b67a557a8c674ee5875784ca588e5cb2228f2a73 (diff) | |
Make media modal buttons larger
Diffstat (limited to 'src/components/media_modal/media_modal.vue')
| -rw-r--r-- | src/components/media_modal/media_modal.vue | 20 |
1 files 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); |