Hugging Face's logo

Spaces:
tudeplom
/
chatbot
Sleeping

App Files Community
tudeplom commited on
Commit
8ed98dd
·
verified ·
1 Parent(s): 77d2a81

Update static/css/style.css

Browse files
Files changed (1) hide show
  1. static/css/style.css +86 -142
static/css/style.css CHANGED
@@ -1,142 +1,86 @@
1
- /* screen configs */
2
- * {
3
- box-sizing: border-box;
4
- padding: 0;
5
- margin: 0;
6
- }
7
-
8
- body {
9
- background-color: rgb(31, 31, 31);
10
- font-family: 'Roboto', sans-serif;
11
- overflow-x: hidden;
12
- }
13
-
14
- ul { list-style: none; }
15
-
16
- h1 {
17
- text-transform: uppercase;
18
- margin: 0 auto;
19
- padding: 20px;
20
- text-align: center;
21
- color: #3c3c3e;
22
- }
23
-
24
- /* chatbox */
25
- .chat {
26
- max-width: 100px;
27
- min-height: 400px;
28
- background-color: rgb(31, 31, 31);
29
- padding-right: 15px;
30
- padding-left: 15px;
31
-
32
- border-radius: 1rem;
33
- height: --webkit-fill-available;
34
- position: relative;
35
- float: left;
36
- }
37
-
38
- /* messages */
39
- .messages {
40
- display: flex;
41
- flex-direction: column;
42
- justify-content: space-between;
43
- height: --webkit-fill-available;
44
- font-family: 'Open Sans', sans-serif;
45
- }
46
-
47
- .message-list {
48
- padding: 2px;
49
- overflow-y: scroll;
50
- height: inherit;
51
- }
52
-
53
- .message-item {
54
- padding: 12px;
55
- border-radius: 0.75rem;
56
- margin: 20px 0;
57
- }
58
-
59
- .message-item span{
60
- font-weight: bold;
61
- text-transform: uppercase;
62
- padding: 5px;
63
- border-radius: 7px;
64
- margin-left: -5px;
65
- cursor: pointer;
66
- }
67
-
68
- .message-item:last-child {
69
- margin-bottom: 0;
70
- }
71
-
72
- .item-primary span{
73
- background-color: #282828;
74
- filter: brightness(1.3);
75
- }
76
-
77
- .item-secondary span {
78
- background-color: #d400ff;
79
- filter: brightness(1.3);
80
- }
81
-
82
- /* messages input */
83
- .message-input {
84
- display: flex;
85
- padding: 20px 0;
86
- }
87
- .message-input pre {
88
- background: #0000005c;
89
- padding: 13px;
90
- border-radius: 5px;
91
-
92
- }
93
- .message-input input {
94
- width: 100%;
95
- padding: 16px;
96
- border-radius:0.3rem;
97
- border: 1px solid #2a2a2a;
98
- background: #161616;
99
- font-size: 17px;
100
- color: #fff;
101
- }
102
-
103
- .message-input button {
104
- padding: 10px;
105
- margin-left: 10px;
106
- border-radius: 5px;
107
- border: none;
108
- cursor: pointer;
109
- background: #292929;
110
- color: #d8d8d8;
111
- font-weight: bold;
112
- }
113
- /*scroll bar*/
114
- .message-list::-webkit-scrollbar {
115
- margin-top: 0.5rem;
116
- height: 1rem;
117
- width: .5rem;
118
- top: 10px;
119
- }
120
-
121
- .message-list::-webkit-scrollbar:horizontal {
122
- height: .5rem;
123
- width: 1rem
124
- }
125
-
126
- .message-list::-webkit-scrollbar-track {
127
- background-color: transparent;
128
- border-radius: 9999px
129
- }
130
-
131
- .message-list::-webkit-scrollbar-thumb {
132
- --tw-border-opacity: 1;
133
- background-color: hsla(0, 0%, 50%, .8);
134
- border-color: rgba(255, 255, 255, 0, 0, 0);
135
- border-radius: 9999px;
136
- border-width: 1px
137
- }
138
-
139
- .message-list::-webkit-scrollbar-thumb:hover {
140
- --tw-bg-opacity: 1;
141
- background-color: rgba(150, 150, 150, var(--tw-bg-opacity))
142
- }
 
1
+ /* screen configs */
2
+ * {
3
+ box-sizing: border-box;
4
+ padding: 0;
5
+ margin: 0;
6
+ }
7
+
8
+ body {
9
+ background-color: #f4f4f4;
10
+ font-family: 'Roboto', sans-serif;
11
+ }
12
+
13
+ ul { list-style: none; }
14
+
15
+ h1 {
16
+ text-transform: uppercase;
17
+ margin: 0 auto;
18
+ padding: 20px;
19
+ text-align: center;
20
+ color: #3c3c3e;
21
+ }
22
+
23
+ /* chatbox */
24
+ .chat {
25
+ max-width: 400px;
26
+ min-height: 400px;
27
+ background-color: #fff;
28
+ padding-right: 15px;
29
+ padding-left: 15px;
30
+ margin: 20px auto;
31
+ border-radius: 1rem;
32
+ }
33
+
34
+ /* messages */
35
+ .messages {
36
+ display: flex;
37
+ flex-direction: column;
38
+ justify-content: space-between;
39
+ height: 500px;
40
+ }
41
+
42
+ .message-list {
43
+ overflow-y: scroll;
44
+ max-height: 500px;
45
+ }
46
+
47
+ .message-item {
48
+ padding: 20px;
49
+ border-radius: 0.75rem;
50
+ margin: 20px 0;
51
+ }
52
+
53
+ .message-item:last-child {
54
+ margin-bottom: 0;
55
+ }
56
+
57
+ .item-primary {
58
+ background-color: #f6f7f8;
59
+ color: #3c3c3e;
60
+ }
61
+
62
+ .item-secondary {
63
+ background-color: #5ccad7;
64
+ color: #fff;
65
+ }
66
+
67
+ /* messages input */
68
+ .message-input {
69
+ display: flex;
70
+ padding: 20px 0;
71
+ }
72
+
73
+ .message-input input {
74
+ width: 100%;
75
+ padding: 10px;
76
+ border-radius: 2rem;
77
+ border: 1px solid #a5a5a5;
78
+ }
79
+
80
+ .message-input button {
81
+ padding: 10px;
82
+ margin-left: 10px;
83
+ border-radius: 5px;
84
+ border: none;
85
+ cursor: pointer;
86
+ }