10
|
1 div[content] {
|
|
2 margin-bottom: 0;
|
|
3 display: flex;
|
|
4 height: calc(100vh - 32px);
|
|
5 margin-left: calc(3% - 8px);
|
|
6 margin-right: 0;
|
|
7 }
|
|
8
|
|
9 div[chats] {
|
|
10 width: 250px;
|
|
11 padding-right: 8px;
|
|
12 flex-shrink: 0;
|
|
13 overflow-y: auto;
|
|
14 }
|
|
15
|
|
16 div[chats] > div {
|
|
17 margin-top: 2px;
|
|
18 margin-bottom: 2px;
|
|
19 padding-top: 16px;
|
|
20 padding-bottom: 16px;
|
|
21 padding-left: 8px;
|
|
22 padding-right: 8px;
|
|
23 border-radius: 4px;
|
11
|
24 cursor: pointer;
|
10
|
25 }
|
|
26
|
|
27 div[chats] > div:hover,
|
|
28 div[chats] > div[selected] {
|
|
29 background-color: LightBlue;
|
|
30 }
|
|
31
|
|
32 div[posts] {
|
|
33 padding-left: 8px;
|
|
34 border-left: 1px solid;
|
|
35 width: 100%;
|
|
36 display: flex;
|
|
37 flex-direction: column;
|
|
38 }
|
|
39
|
|
40 div[posts] > * {
|
|
41 padding-right: 3vw;
|
|
42 }
|
|
43
|
|
44 div[top] {
|
|
45 display: flex;
|
|
46 justify-content: space-between;
|
|
47 align-items: center;
|
|
48 }
|
|
49
|
|
50 div[main] {
|
|
51 overflow-y: auto;
|
|
52 }
|
|
53
|
|
54 div[post] {
|
|
55 margin-top: 16px;
|
|
56 margin-bottom: 16px;
|
|
57 }
|
|
58
|
22
|
59 span[pulldown] {
|
|
60 position: relative;
|
|
61 }
|
|
62
|
|
63 span[pulldown] > div {
|
|
64 display: none;
|
|
65 top: 0;
|
|
66 left: 100%;
|
|
67 z-index: 2;
|
|
68 position: absolute;
|
|
69 border: 1px solid #cccccc;
|
|
70 border-radius: 4px;
|
|
71 text-align: left;
|
|
72 background-color: #eeeeee;
|
|
73 padding: 5px 0;
|
|
74 }
|
|
75
|
|
76 span[pulldown] > div > span {
|
|
77 white-space: nowrap;
|
|
78 display: block;
|
|
79 padding: 3px 16px;
|
|
80 xcolor: #333333;
|
|
81 cursor: pointer;
|
|
82 }
|
|
83
|
|
84 span[pulldown] > div > span:hover {
|
|
85 color: #ffffff;
|
|
86 background-color: #428bca;
|
|
87 }
|
|
88
|
10
|
89 div[text] {
|
|
90 white-space-collapse: preserve;
|
|
91 }
|
|
92
|
|
93 div[input] {
|
|
94 padding-top: 1em;
|
|
95 padding-bottom: 1em;
|
|
96 display: flex;
|
|
97 gap: 8px;
|
|
98 align-items: flex-end;
|
|
99 }
|
|
100
|
|
101 div[input] textarea {
|
|
102 flex-grow: 1;
|
|
103 max-height: 150px;
|
|
104 resize: none;
|
|
105 }
|
24
|
106
|
|
107 dialog textarea {
|
|
108 width: 600px;
|
|
109 max-width: 80vw;
|
|
110 }
|