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