-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
174 lines (114 loc) · 9.57 KB
/
style.css
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
:root {
--top: 1vw;
--greymain: hsl(220, 8%, 23%);
--greysecondary: hsl(218, 8%, 27%);
--greytertiary: hsl(217, 8%, 19%);
--greyquaternary: hsl(223, 7%, 20%);
--greyquinary: hsl(220, 7%, 17%);
--greysenary: hsl(216, 7%, 14%);
--greyseptenary: hsl(220, 5%, 35%);
--greyoctonary: hsl(0, 2%, 56%);
--transparent: hsla(0, 0%, 100%, 0);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--blurplemain: hsl(235, 86%, 77%);
--blurplesecondary: hsl(235, 77%, 63%);
--blurpletertiary: hsl(233, 64%, 57%);
--blurplequaternary: hsl(238, 68%, 54%);
--blurplequinary: hsl(238, 64%, 50%);
--posfix: translate(-50%, -50%);
--middle: 50%;
}
body {
margin: 0;
scrollbar-width: none;
overflow-x: hidden;
font-family: 'Inter', sans-serif;
background-color: var(--greysenary);
color: var(--white);
}
body::-webkit-scrollbar {
display: none;
}
section {
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 29vh;
}
ul li {
padding: .1vw;
margin: .5vw;
border-radius: .1vw;
cursor: pointer;
font-size: calc(.5vw + .5vh + .5vmin);
}
#message { display: flex; flex-direction: column; justify-content: left; align-items: left; border-radius: .2vw; padding: 1vw; padding-top: 0px; top: 1vw; position: relative; height: 100%; width: 96.5%; transition: .3s; margin-top: 1.5vh; }
#message-head { margin-top: 0; margin-left: 7vw; }
#useravi { width: 3.7vw; height: 3.7vw; border-radius: 50%; margin-left: 1.5vw; margin-top: 3vh; position: absolute; }
#timestamp { font-size: 1vw; color: var(--greyseptenary); }
#timestampHint { font-size: 1vw; color: var(--white); width: fit-content; height: fit-content; padding: .8vw; border-radius: .2vw; background-color: var(--greysenary); position: relative; left: -15vw; top: -6vh; opacity: 100%; box-shadow: 0 0 1vw var(--greysenary); opacity: 0; pointer-events: none; transition: .3s; z-index: 99999; }
.attachment { margin-top: 0vh; margin-left: 2vw; width: 20vw; height: 20vw; border-radius: .2vw; background-color: var(--greyquaternary); }
#timestamp:hover #timestampHint { opacity: 100%; }
#timestampHintArrow { font-size: 1vw; color: var(--greysenary); width: 1vw; height: 1vw; border-radius: .2vw; background-color: var(--greysenary); position: absolute; left: 50%; top: 80%; opacity: 100%; transform: rotate(45deg); z-index: -1; }
#message-content { margin-top: -.8vh; margin-left: 7vw; }
.rainbow { background-image: linear-gradient(100deg, #FF0000, #CCFF00, #00FF66, #0066FF, #CC00FF); background-size: 100%; background-repeat: repeat; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; white-space: wrap; }
#footer { bottom: 0; position: relative; height: 11vh; width: 100%; background-color: var(--greymain); }
#containerDisplay { height: 100%; width: 100%; position: fixed; z-index: 1; }
#columnContainerServers { height: 100%; width: 50px; position: absolute; left: 0; top: 1.3vw; background-color: var(--greysenary); z-index: -1; }
#containerServer { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: var(--transparent); }
#containerList { width: 20vw; height: 100%; background-color: var(--greyquaternary); position: absolute; }
#username { position: fixed; top: 89vh; left: 0vw; transform: var(--posfix); z-index: 99999; bottom: 3vh; left: 2vw; background-color: var(--greyquinary); width: 14vw; height: 6vh; border-radius: .4vw; margin-left: 6.4vw; margin-top: 5vh; }
#usernameInput { width: 12.2vw; height: 4vh; position: relative; top: 38%; left: 50%; transform: var(--posfix); background-color: var(--transparent); z-index: 4; color: var(--white); border: none; border-radius: .4vw; font-size: 1vw; letter-spacing: .08vw; }
#usernameInput:focus { outline: none; }
#avatar { position: fixed; top: 79vh; left: 0vw; transform: var(--posfix); z-index: 99999; bottom: 3vh; left: 2vw; background-color: var(--greyquinary); width: 14vw; height: 6vh; border-radius: .4vw; margin-left: 6.4vw; margin-top: 5vh; }
#avatarInput { width: 12.2vw; height: 4vh; position: relative; top: 38%; left: 50%; transform: var(--posfix); background-color: var(--transparent); z-index: 4; color: var(--white); border: none; border-radius: .4vw; font-size: 1vw; letter-spacing: .08vw;}
#avatarInput:hover { cursor: pointer; }
#containerListHeader { width: 20vw; height: 8vh; background-color: var(--greyquaternary); position: absolute; box-shadow: 0px .1vw .5vw var(--greysenary); top: 0; }
#serverName { font-size: 20px; position: relative; top: 25%; left: 56%; transform: var(--posfix); }
#containerListBody { width: 83%; height: 100%; position: fixed; background-color: var(--greymain); top: 0; right: 0; }
#containerHeader { width: 83%; background-color: var(--greymain); position: fixed; right: 0; height: 8vh; box-shadow: .1vw .1vw .5vw var(--greysenary); }
#coverBar { width: 2vw; height: 10vh; position: fixed; left: 20%; top: 20%; background-color: var(--greymain); }
#messageHeader { top: 0; width: 80vw; height: 0vh; position: fixed; background-color: var(--greymain); }
#severBody { width: 83%; height: 100vh; right: 0; bottom: 0vw; background-color: var(--transparent); position: fixed; box-shadow: 1px 1px 5px var(--greysenary); overflow-y: scroll; padding-bottom: 200px; scrollbar-width: none; scroll-padding: 50px 0 0 50px; }
#severBody::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: var(--transparent);
}
#severBody::-webkit-scrollbar {
width: 0.5vw;
background-color: #40444b;
scroll-padding: 50px 0 0 50px;
}
#severBody::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(177, 50, 50, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: var(--greysenary);
}
#messageBody { width: 83%; height: 3vh; position: fixed; bottom: 0; right: 0; background-color: var(--blurplesecondary); opacity: 50%; overflow-y: scroll; padding-bottom: 5vh; scrollbar-width: none; margin-top: 1.5vh; }
#messagesHeader { top: 0; width: 83%; height: 31vh; position: relative; }
#messageFooter { bottom: 0; position: fixed; height: 8vh; width: 100vw; background-color: var(--greymain); }
#messagesContainer { bottom: 1.5vw; right: 2vw; width: 79.2vw; height: calc(0.5vw + 5vh); background-color: var(--greysecondary); position: fixed; border-radius: .4vw; }
#messagesFooter { bottom: 0; position: relative; height: 11vh; width: calc(50vw + 50vh); background-color: var(--transparent); }
#inputContainer { width: calc(30vw + 30vh); height: 4vh; position: fixed; background-color: var(--transparent); opacity: 50%; margin-top: 0.5vw; margin-left: 3vw; border-radius: .8vw; }
#warning { position: absolute; z-index: 2; left: -3vw; bottom: -3.5vh; background-color: var(--transparent); pointer-events: none; width: fit-content; height: fit-content; color: rgba(255, 84, 84, 0.911); font-size: calc(.5vw + 1vh); font-weight: 300; }
#messageInput { width: inherit; height: inherit; background-color: var(--transparent); position: fixed; border-radius: .8vw; outline: none; border: none; resize: none; overflow: hidden; font-size: calc(.5vw + 1.7vh); padding-left: .5vw; padding-top: .5vh; color: var(--white); font-weight: 100; }
#buttonContainer { height: inherit; width: 5vw; right: 2vw; position: fixed; background-color: var(--transparent) }
#messageSend { position: fixed; z-index: 2; right: 3vw; bottom: calc(1.2vw + 1.1vh); background-color: var(--transparent); transition: .3s; pointer-events: all; width: 5vh; height: 5vh; border-radius: 100%; }
#messageButton { position: absolute; z-index: 3; left: 0vw; top: 0vh; transition: .3s; offset-position: 0; background-color: var(--transparent); letter-spacing: 2px; opacity: 20%; width: 130%; height: 130%; }
#sendVector { transition: .3s; pointer-events: none; }
#messageAttach { position: fixed; z-index: 2; right: 5.5vw; bottom: 4.5vh; background-color: var(--transparent); transition: .3s; pointer-events: all; width: 2.4vh; height: 2.4vh; border-radius: 0%; border: none; font-size: 0vw; }
#messageAttach::-webkit-file-upload-button { display: none; }
#messageAttach::file-selector-button { opacity: 0%; left: -20%; position: absolute; width: 2.4vh; height: 2.4vh; }
#messageAttach::-webkit-input-placeholder { display: none; }
/*#949cf7*/
#messageInput:focus { outline: none; }
#message:hover { background-color: var(--greytertiary); }