Mercurial Hosting > chat

comparison src/chat.css @ 34:62d04ca486dd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
UI
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 12 Nov 2024 16:08:24 -0700
parents e2b7f6393dab
children 27c41f22d2a9
comparison
equal deleted inserted replaced
33:e2b7f6393dab 34:62d04ca486dd
26 26
27 div[posts] { 27 div[posts] {
28 width: 100%; 28 width: 100%;
29 display: flex; 29 display: flex;
30 flex-direction: column; 30 flex-direction: column;
31 justify-content: space-between;
31 } 32 }
32 33
33 div[posts] > * { 34 div[posts] > * {
34 padding-right: 3vw; 35 padding-right: 3vw;
35 } 36 }
47 div[post] { 48 div[post] {
48 margin-top: 16px; 49 margin-top: 16px;
49 margin-bottom: 16px; 50 margin-bottom: 16px;
50 } 51 }
51 52
53 [intro] {
54 text-align: center;
55 }
56
57 div[who] {
58 display: flex;
59 justify-content: space-between;
60 }
61
62 span[right] {
63 font-size: 12px;
64 color: grey;
65 }
66
52 span[pulldown] { 67 span[pulldown] {
53 position: relative; 68 position: relative;
69 visibility: hidden;
54 } 70 }
55 71
56 span[pulldown] > div { 72 span[pulldown] > div {
57 display: none; 73 display: none;
58 top: 0; 74 top: 0;
59 left: 100%; 75 right: 100%;
60 z-index: 2; 76 z-index: 2;
61 position: absolute; 77 position: absolute;
62 border: 1px solid #cccccc; 78 border: 1px solid #cccccc;
63 border-radius: 4px; 79 border-radius: 4px;
64 text-align: left; 80 text-align: left;
78 color: #ffffff; 94 color: #ffffff;
79 background-color: #428bca; 95 background-color: #428bca;
80 } 96 }
81 97
82 div[text] { 98 div[text] {
83 white-space-collapse: preserve; 99 white-space: pre-wrap;
84 } 100 }
85 101
86 div[input] { 102 div[input] {
87 padding-top: 1em; 103 padding-top: 1em;
88 padding-bottom: 1em; 104 padding-bottom: 1em;
104 120
105 span[online] { 121 span[online] {
106 display: inline-block; 122 display: inline-block;
107 aspect-ratio: 1; 123 aspect-ratio: 1;
108 background-color: grey; 124 background-color: grey;
109 height: 1em; 125 height: 0.6em;
110 border-radius: 50%; 126 border-radius: 50%;
111 margin-left: 4px; 127 margin-left: 4px;
112 margin-bottom: -2px;
113 } 128 }
114 129
115 130
116 @media (min-width: 700px) { 131 @media (min-width: 700px) {
117 div[content] { 132 div[content] {
125 flex-shrink: 0; 140 flex-shrink: 0;
126 } 141 }
127 142
128 div[posts] { 143 div[posts] {
129 padding-left: 8px; 144 padding-left: 8px;
130 border-left: 1px solid; 145 border-left: 1px solid grey;
131 } 146 }
132 147
133 div[top] img { 148 div[top] img {
134 display: none; 149 display: none;
135 } 150 }