Changed all static inline style to CSS classes

This commit is contained in:
10G Meow 2022-02-23 11:52:09 +00:00 committed by N Pex
parent 128b19ef8f
commit d9aac824ef
27 changed files with 179 additions and 112 deletions

View file

@ -3,21 +3,9 @@
<transition name="slow-fade">
<div
v-if="mounted"
style="
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
background-color: black;
align-items: center;
justify-content: center;
padding: 40px;
"
class="text-center d-flex flex-column"
class="text-center d-flex flex-column goodbye-wrapper"
>
<div v-if="roomWasPurged" style="width: 28px">
<div v-if="roomWasPurged">
<v-img src="@/assets/icons/trash.svg" />
</div>
<h2 v-if="roomWasPurged" class="white--text mt-2 mb-8">
@ -51,16 +39,7 @@
<transition name="slow-fade">
<div
v-if="mounted"
style="
position: fixed;
top: 24px;
right: 24px;
z-index: 101;
padding: 10px 20px;
height: 50px;
border-radius: 25px;
background-color: #242424;
"
class="goodbye-profile"
>
<div class="d-inline-block me-2 white--text">
{{ $t("profile_info_popup.you_are") }}
@ -157,22 +136,44 @@ export default {
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
@import "@/assets/css/chat.scss";
.author {
font-size: 80%;
}
.author {
font-size: 80%;
}
.close {
position: absolute;
bottom: 40px;
}
.close {
position: absolute;
bottom: 40px;
}
.slow-fade-enter-active,
.slow-fade-leave-active {
transition: opacity 2.5s;
}
.slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
.slow-fade-enter-active,
.slow-fade-leave-active {
transition: opacity 2.5s;
}
.slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.goodbye-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
background-color: black;
align-items: center;
justify-content: center;
padding: 40px;
}
.goodbye-profile {
position: fixed;
top: 24px;
right: 24px;
z-index: 101;
padding: 10px 20px;
height: 50px;
border-radius: 25px;
background-color: #242424;
}
</style>