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