Mercurial Hosting > chat

comparison src/chat.css @ 27:809193524522

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
responsive
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 06 Nov 2024 16:01:42 -0700
parents af41be2dcdec
children e2b7f6393dab
comparison
equal deleted inserted replaced
26:5bdbbd0a65e1 27:809193524522
1 div[content] { 1 div[content] {
2 margin-bottom: 0; 2 margin-bottom: 0;
3 display: flex; 3 display: flex;
4 height: calc(100vh - 32px); 4 height: calc(100vh - 32px);
5 margin-left: calc(3% - 8px);
6 margin-right: 0;
7 } 5 }
8 6
9 div[chats] { 7 div[chats] {
10 width: 250px;
11 padding-right: 8px;
12 flex-shrink: 0;
13 overflow-y: auto; 8 overflow-y: auto;
14 } 9 }
15 10
16 div[chats] > div { 11 div[chats] > div {
17 margin-top: 2px; 12 margin-top: 2px;
28 div[chats] > div[selected] { 23 div[chats] > div[selected] {
29 background-color: LightBlue; 24 background-color: LightBlue;
30 } 25 }
31 26
32 div[posts] { 27 div[posts] {
33 padding-left: 8px;
34 border-left: 1px solid;
35 width: 100%; 28 width: 100%;
36 display: flex; 29 display: flex;
37 flex-direction: column; 30 flex-direction: column;
38 } 31 }
39 32
106 99
107 dialog textarea { 100 dialog textarea {
108 width: 600px; 101 width: 600px;
109 max-width: 80vw; 102 max-width: 80vw;
110 } 103 }
104
105
106 @media (min-width: 700px) {
107 div[content] {
108 margin-left: calc(3% - 8px);
109 margin-right: 0;
110 }
111
112 div[chats] {
113 width: 250px;
114 padding-right: 8px;
115 flex-shrink: 0;
116 }
117
118 div[posts] {
119 padding-left: 8px;
120 border-left: 1px solid;
121 }
122
123 div[top] img {
124 display: none;
125 }
126 }
127
128 @media (max-width: 699px) {
129 div[content][show="chats"] div[posts],
130 div[content][show="posts"] div[chats] {
131 display: none;
132 }
133
134 div[chats] {
135 width: 100%;
136 }
137
138 div[content][show="posts"] {
139 margin-right: 0;
140 }
141
142 div[top] h3 {
143 display: flex;
144 gap: 6px;
145 }
146 }