Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 1 | :root { |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 2 | --main-color: #1f1f1f; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 3 | --secondary-color: white; |
Adrien Béraud | 5e9e19b | 2021-04-22 01:38:53 -0400 | [diff] [blame] | 4 | --third-color: #8b8b8b; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 5 | --main-text-color: #3e5869; |
6 | --secondary-text-color: #b0c7d6; | ||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 7 | --send-message-form: #f5f5f5; |
Adrien Béraud | cfacc22 | 2021-05-30 13:37:00 -0400 | [diff] [blame] | 8 | --scroll-bar-bg-color: #04000000; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 9 | } |
10 | |||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 11 | html, |
12 | body { | ||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 13 | height: 100%; |
14 | margin: 0; | ||||
15 | padding: 0; | ||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 16 | font-family: "Open Sans", sans-serif; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 17 | font-weight: 200; |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 18 | color: #3e5869; |
Adrien Béraud | cfacc22 | 2021-05-30 13:37:00 -0400 | [diff] [blame] | 19 | --scroll-bar-bg-color: rgba(0,0,0,0.2); |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 20 | } |
21 | |||||
22 | #root { | ||||
23 | height: 100%; | ||||
24 | } | ||||
25 | |||||
26 | .app { | ||||
27 | display: grid; | ||||
28 | height: 100%; | ||||
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 29 | grid-template-columns: 320px 1fr; |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 30 | grid-template-rows: 40px 50px 1fr; |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 31 | grid-template-areas: |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 32 | "h m" |
33 | "n m" | ||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 34 | "r m"; |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 35 | } |
36 | |||||
37 | .messenger { | ||||
38 | grid-area: m; | ||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 39 | display: flex; |
40 | flex-direction: column; | ||||
Adrien Béraud | 0561d3c | 2021-05-02 11:23:54 -0400 | [diff] [blame] | 41 | overflow: hidden; |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 42 | } |
43 | |||||
44 | .conversation-header { | ||||
45 | grid-area: h; | ||||
Adrien Béraud | 0561d3c | 2021-05-02 11:23:54 -0400 | [diff] [blame] | 46 | display: flex; |
47 | align-items: center; | ||||
48 | padding-right: 8px; | ||||
49 | |||||
50 | .title, .subtitle { | ||||
51 | overflow: hidden; | ||||
52 | text-overflow: ellipsis; | ||||
53 | } | ||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 54 | } |
55 | |||||
56 | .send-message-form { | ||||
57 | margin: 0 16px 16px 8px; | ||||
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 58 | } |
59 | |||||
60 | .MuiContainer-root { | ||||
61 | padding-bottom: 32px; | ||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 62 | } |
63 | |||||
64 | .login { | ||||
65 | background-color: var(--main-color); | ||||
66 | } | ||||
67 | |||||
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 68 | .main-search { |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 69 | grid-area: n; |
70 | } | ||||
71 | |||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 72 | /* REST OF CSS */ |
73 | |||||
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 74 | .main-search-input { |
75 | padding: 8px; | ||||
76 | background-color: var(--secondary-color); | ||||
77 | width: 100%; | ||||
78 | } | ||||
79 | |||||
80 | .rooms-list { | ||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 81 | grid-area: r; |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 82 | overflow-y: scroll; |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 83 | |
84 | .MuiListItemText-primary, | ||||
85 | .MuiListItemText-secondary { | ||||
86 | overflow: hidden; | ||||
87 | text-overflow: ellipsis; | ||||
88 | } | ||||
Adrien Béraud | cfacc22 | 2021-05-30 13:37:00 -0400 | [diff] [blame] | 89 | |
90 | scrollbar-color: var(--scroll-bar-bg-color) transparent; | ||||
91 | scrollbar-width: thin; | ||||
92 | } | ||||
93 | ::-webkit-scrollbar { | ||||
94 | -webkit-appearance: none; | ||||
95 | width: 8px; | ||||
96 | } | ||||
97 | ::-webkit-scrollbar-thumb { | ||||
98 | background-color: var(--scroll-bar-bg-color); | ||||
99 | border-radius: 4px; | ||||
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 100 | } |
101 | |||||
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 102 | .list-placeholder { |
103 | margin: 32px auto; | ||||
104 | width: 256px; | ||||
105 | text-align: center; | ||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 106 | |
107 | .subtitle { | ||||
108 | color: #a0a0a0; | ||||
109 | } | ||||
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 110 | } |
111 | |||||
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 112 | .message-list { |
113 | flex: 1; | ||||
114 | height: 100%; | ||||
115 | overflow: auto; | ||||
116 | display: flex; | ||||
117 | flex-direction: column-reverse; | ||||
118 | padding: 16px 32px; | ||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 119 | |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 120 | .conversation-event { |
121 | margin: 8px auto; | ||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 122 | |
Adrien Béraud | abba2e5 | 2021-04-24 21:39:56 -0400 | [diff] [blame] | 123 | .inline-avatar { |
124 | display: inline-block; | ||||
125 | vertical-align: middle; | ||||
126 | margin: 16px; | ||||
127 | } | ||||
128 | } | ||||
129 | |||||
130 | .message { | ||||
131 | margin: 8px 0; | ||||
132 | |||||
133 | .message-avatar { | ||||
134 | display: inline-block; | ||||
135 | vertical-align: middle; | ||||
136 | } | ||||
137 | .message-username { | ||||
138 | font-size: 11px; | ||||
139 | font-weight: bold; | ||||
140 | color: var(--secondary-color); | ||||
141 | opacity: 0.9; | ||||
142 | margin-bottom: 6px; | ||||
143 | } | ||||
144 | .message-text { | ||||
145 | background: var(--third-color); | ||||
146 | color: var(--secondary-color); | ||||
147 | display: inline; | ||||
148 | padding: 8px 16px; | ||||
149 | border-radius: 16px; | ||||
150 | margin: 8px; | ||||
151 | } | ||||
152 | } | ||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 153 | } |
154 | |||||
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 155 | .send-message-card { |
156 | border-radius: 8px; | ||||
157 | margin: 16px; | ||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 158 | } |
159 | |||||
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 160 | .help-text { |
161 | position: absolute; | ||||
162 | top: 10px; | ||||
163 | } |