Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Clean up CSS a bit

Browse source
This commit is contained in:
shpuld 2019-02-19 18:33:40 +02:00
parent a20974faac
commit 4e0f934301
1 changed files with 69 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
src/components/media_modal/media_modal.vue
View file

@ -8,8 +8,22 @@
:controls="true" :controls="true"
@click.stop.native=""> @click.stop.native="">
</VideoAttachment> </VideoAttachment>
<button :title="$t('media_modal.previous')" class="modal-view-button-arrow modal-view-button-arrow--prev" v-if="canNavigate" @click.stop.prevent="goPrev"></button> <button
<button :title="$t('media_modal.next')" class="modal-view-button-arrow modal-view-button-arrow--next" v-if="canNavigate" @click.stop.prevent="goNext"></button> :title="$t('media_modal.previous')"
class="modal-view-button-arrow modal-view-button-arrow--prev"
v-if="canNavigate"
@click.stop.prevent="goPrev"
>
<i class="icon-left-open arrow-icon" />
</button>
<button
:title="$t('media_modal.next')"
class="modal-view-button-arrow modal-view-button-arrow--next"
v-if="canNavigate"
@click.stop.prevent="goNext"
>
<i class="icon-right-open arrow-icon" />
</button>
</div> </div>
</template> </template>
@ -30,71 +44,19 @@
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
&-button-arrow { &:hover {
position: absolute; .modal-view-button-arrow {
display: block; opacity: 0.75;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
opacity: 0;
box-shadow: none;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
&::before { &:focus,
position: absolute; &:hover {
top: 35px; outline: none;
height: 30px; box-shadow: none;
width: 32px; }
font-family: "fontello";
font-size: 14px;
line-height: 30px;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&:hover,
&:focus {
outline: none;
box-shadow: none;
}
&#{&}#{&} {
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
} }
&--prev {
left: 0;
&::before {
left: 6px;
content: '\e80e';
}
}
&--next {
right: 0;
&::before {
right: 6px;
content: '\e80d';
}
}
}
&:hover {
.modal-view-button-arrow {
opacity: .75;
}
} }
} }
@ -103,4 +65,49 @@
max-height: 90%; max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
} }
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
opacity: 0;
box-shadow: none;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
.arrow-icon {
position: absolute;
top: 35px;
height: 30px;
width: 32px;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&--prev {
left: 0;
.arrow-icon {
left: 6px;
}
}
&--next {
right: 0;
.arrow-icon {
right: 6px;
}
}
}
</style> </style>