imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Convert chat to tailwind

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-05 00:01:45 +02:00
parent 5dd8664c34
commit 5e9814fe92
1 changed files with 3 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/gui/Chat.vue
View File

@ -1,43 +1,15 @@
<template>
<div class="chat-wrapper">
<input placeholder="Type something..." />
<div class="chat-wrapper w-full h-full flex justify-start items-center">
<input class="max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.chat-wrapper {
width: 100%;
height: 100px;
display: flex;
justify-content: flex-start;
align-items: center;
input {
max-width: 750px;
width: 100%;
height: 51px;
border-radius: 8px;
font-size: 1.2rem;
padding: 0 24px;
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: $gray-2;
background-image: url('/assets/icons/submit-icon.svg');
background-repeat: no-repeat;
background-size: 30px;
// @TODO: find Tailwind alternative as calc() doesnt work
background-position: calc(100% - 25px) center;
&::after {
content: '';
position: absolute;
left: 500px;
width: 30px;
height: 30px;
}
}
}
</style>