Fantasy-Chat/style.css at main · LUCIFER3944/Fantasy-Chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif; /* Changed font to Arial */
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #070707; /* Darker background color */
    color: white;
    padding: 10px 0; /* Added padding for spacing */
}

.leader {
    display: flex;
    align-items: flex-start; /* Align items at the start */
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Center icons vertically */
    align-items: center;
    width: 80px; /* Reduced width */
    height: 100vh;
    background-color: #030303; /* Darker background color */
}

.sidebar h5 {
    margin: 10px 0; /* Added margin for spacing between icons */
    cursor: pointer; /* Add cursor pointer for interaction */
}

.sidebar h5:hover {
    background-color: #E45353; /* Lighter red on hover */
    border-radius: 50%; /* Circular hover effect */
    color: white; /* Change text color on hover */
}

.contact {
    display: flex;
    flex-direction: column;
}

.profile {
    display: flex;
    align-items: center;
    padding: 10px; /* Added padding for spacing */
    border-bottom: 1px solid #ccc; /* Separating lines between profiles */
     cursor: pointer;        /*  mouse pointer */
}
.profile :hover{
    padding: 2px;
}

.profile img {
    width: 50px; /* Increased image size */
    border-radius: 50%; /* Circular image */
    margin-right: 10px; /* Added margin for spacing */
}

.profile-box {
    flex-grow: 1; /* Allow text to grow */
}

.chat-box {
    flex-grow: 1; /* Allow chat box to grow */
    background-color: #F2F2F2; /* Light gray background for chat */
    padding: 20px; /* Added padding for spacing */
    margin-left: 20px; /* Added margin for spacing */
    border-radius: 10px;
    overflow-y: auto; /* Add vertical scroll when content exceeds height */
    max-height: 720px; /* Set maximum height for the chat box */
}


.message-input {
    width: calc(100% - 80px); /* Adjusted width to fit container */
    padding: 10px; /* Added padding for spacing */
    margin-bottom: 10px; /* Added margin for spacing */
    border: 1px solid #ccc; /* Added border */
    border-radius: 5px; /* Rounded corners */
}

.send-button {
    background-color: #007BFF; /* Blue send button */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.send-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
.sent-message {
    align-self: flex-end; /* Align sent messages to the right */
    text-align: right; /* Right-align message content */
}

.received-message {
    align-self: flex-start; /* Align received messages to the left */
    text-align: left; /* Left-align message content */
}

.message-content {
    max-width: 70%; /* Limit message width */
    padding: 8px 12px; /* Add padding to message content */
    border-radius: 10px; /* Rounded corners for message bubbles */
    background-color: #DCF8C6; /* Light green background for received messages */
    margin: 4px; /* Add margin between messages */
}

.sent-message .message-content {
    background-color: #E5E5EA; /* Light gray background for sent messages */
}
profile:hover{color: whitesmoke;
    background-color: #0056b3;
    cursor:grab;
    animation:hover-effect 0.3s ease-in-out;

}
@keyframes hover-effect{
    0%{
        transform: scale(1);
        box-shadow: 0 0 10px rqba(0,0,0,0,5);
    }
    100%{
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
}