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