moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make media modal buttons larger

This commit is contained in:
Tusooa Zhu 2022-03-06 18:38:57 -05:00
parent b67a557a8c
commit 1b204012ea
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/media_modal/media_modal.vue
View File

@ -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);