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

77
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,7 +44,29 @@
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 {
.modal-view-button-arrow {
opacity: 0.75;
&:focus,
&:hover {
outline: none;
box-shadow: none;
}
&:hover {
opacity: 1;
}
}
}
}
.modal-image {
max-width: 90%;
max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
}
.modal-view-button-arrow {
position: absolute; position: absolute;
display: block; display: block;
top: 50%; top: 50%;
@ -47,12 +83,11 @@
cursor: pointer; cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1); transition: opacity 333ms cubic-bezier(.4,0,.22,1);
&::before { .arrow-icon {
position: absolute; position: absolute;
top: 35px; top: 35px;
height: 30px; height: 30px;
width: 32px; width: 32px;
font-family: "fontello";
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
color: #FFF; color: #FFF;
@ -60,47 +95,19 @@
background-color: rgba(0,0,0,.3); background-color: rgba(0,0,0,.3);
} }
&:hover,
&:focus {
outline: none;
box-shadow: none;
}
&#{&}#{&} {
&:hover {
opacity: 1;
}
}
&--prev { &--prev {
left: 0; left: 0;
.arrow-icon {
&::before {
left: 6px; left: 6px;
content: '\e80e';
} }
} }
&--next { &--next {
right: 0; right: 0;
.arrow-icon {
&::before {
right: 6px; right: 6px;
content: '\e80d';
} }
} }
} }
&:hover {
.modal-view-button-arrow {
opacity: .75;
}
}
}
.modal-image {
max-width: 90%;
max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
}
</style> </style>