155 lines
No EOL
1.9 KiB
CSS
155 lines
No EOL
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
.btn-style {
|
|
@apply
|
|
w-[100px]
|
|
h-[32px]
|
|
border-1
|
|
border-gray-500
|
|
rounded-3xl
|
|
bg-gray-500
|
|
text-white
|
|
cursor-pointer
|
|
shadow-[0_2px_0_0_black]
|
|
transition-all
|
|
hover:bg-blue-200
|
|
active:bg-gray-400
|
|
active:translate-y-[1px]
|
|
active:shadow-[0_2px_0_0_black];
|
|
}
|
|
|
|
.send-btn-style {
|
|
@apply
|
|
w-[50px]
|
|
h-[50px]
|
|
border-1
|
|
border-gray-500
|
|
rounded-3xl
|
|
hover:bg-blue-200
|
|
bg-red-100
|
|
text-red-700
|
|
cursor-pointer
|
|
shadow-[0_2px_0_0_black]
|
|
transition-all
|
|
active:bg-gray-400
|
|
active:translate-y-[1px]
|
|
active:shadow-[0_2px_0_0_black];;
|
|
}
|
|
|
|
|
|
.chatbox-style {
|
|
@apply
|
|
w-[650px]
|
|
h-[300px] /* increase height if needed */
|
|
p-[8px]
|
|
border-1
|
|
border-black
|
|
shadow-2xl
|
|
text-left
|
|
text-gray-700
|
|
bg-white
|
|
rounded-3xl
|
|
overflow-y-auto
|
|
whitespace-pre-line
|
|
flex
|
|
flex-col
|
|
mx-auto;
|
|
}
|
|
|
|
.chat-window-style {
|
|
@apply
|
|
w-[400px]
|
|
h-[50px]
|
|
p-[10px]
|
|
border-1 border-black
|
|
shadow-sm
|
|
flex-1
|
|
rounded-3xl
|
|
focus:bg-blue-300
|
|
hover:bg-blue-200
|
|
bg-white
|
|
text-gray-800;
|
|
}
|
|
|
|
.displaybox {
|
|
@apply
|
|
fixed
|
|
inset-0
|
|
flex
|
|
items-center
|
|
justify-center
|
|
bg-[#43536b];
|
|
|
|
}
|
|
|
|
.mainboxDisplay {
|
|
@apply
|
|
fixed
|
|
top-1/2
|
|
left-1/2
|
|
-translate-x-1/2
|
|
-translate-y-1/2
|
|
bg-gray-200 w-[850px]
|
|
p-6 rounded-xl
|
|
shadow-2xl
|
|
text-center z-50;
|
|
}
|
|
|
|
.mainboxDisplay button {
|
|
@apply
|
|
cursor-pointer
|
|
}
|
|
|
|
.title {
|
|
@apply
|
|
text-6xl
|
|
font-bold
|
|
text-gray-800
|
|
}
|
|
|
|
.ping-box {
|
|
@apply
|
|
w-[150px]
|
|
ml-2 border-1
|
|
border-gray-500
|
|
bg-white
|
|
rounded-2xl
|
|
p-2
|
|
shadow-md
|
|
flex flex-col
|
|
gap-1
|
|
h-[350px];
|
|
}
|
|
|
|
.ping-title {
|
|
@apply
|
|
text-sm
|
|
font-semibold
|
|
text-blue-800;
|
|
}
|
|
|
|
div-buddies-list {
|
|
@apply
|
|
text-black
|
|
whitespace-pre-wrap;
|
|
|
|
}
|
|
|
|
p {
|
|
@apply
|
|
text-black
|
|
}
|
|
|
|
div-test {
|
|
@apply
|
|
text-red-800
|
|
text-right;
|
|
|
|
}
|
|
|
|
div-notlog {
|
|
@apply
|
|
text-red-800
|
|
text-3xl
|
|
text-center;
|
|
} |