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