Files: e875995b3285440296b82b811ebcba99145cfd56 / style.css
3413 bytesRaw
1 | body { |
2 | margin: 0; |
3 | background: black; |
4 | font-family: sans-serif; |
5 | color: #f5f5f5; |
6 | font-size: 14px; |
7 | line-height: 20px; |
8 | } |
9 | |
10 | #screen { |
11 | position: absolute; |
12 | top: 35px; |
13 | bottom: 0px; |
14 | left: 0px; |
15 | right: 0px; |
16 | } |
17 | |
18 | .hyperscroll { |
19 | width: 100%; |
20 | } |
21 | |
22 | .header { |
23 | padding-bottom: .7em; |
24 | border-bottom: 1px solid #252525; |
25 | } |
26 | |
27 | h1, h2, h3, h4, h5, h6 { |
28 | font-size: 1.2em; |
29 | margin-top: .35ex; |
30 | } |
31 | |
32 | hr { |
33 | border: solid #222; |
34 | clear: both; |
35 | border-width: 1px 0 0; |
36 | height: 0; |
37 | margin-bottom: .9em; |
38 | } |
39 | |
40 | p { |
41 | word-break: break-word; |
42 | margin-top: .35ex; |
43 | margin-bottom: 10px; |
44 | } |
45 | |
46 | a { |
47 | color: cyan; |
48 | text-decoration: none; |
49 | } |
50 | |
51 | a:hover, a:focus { |
52 | color: violet; |
53 | text-decoration: underline; |
54 | } |
55 | |
56 | .navbar { |
57 | background: #1b1b1b; |
58 | *background: linear-gradient(#222, #111); |
59 | border-bottom: 1px solid #252525; |
60 | } |
61 | |
62 | .navbar { |
63 | width: 100%; |
64 | position: fixed; |
65 | z-index: 1000; |
66 | margin: 0; |
67 | padding-top: .3em; |
68 | padding-bottom: .3em; |
69 | left: 0; right: 0; |
70 | top: 0; |
71 | } |
72 | |
73 | .navbar .internal { |
74 | max-width: 97%; |
75 | margin-left: auto; |
76 | margin-right: auto; |
77 | } |
78 | |
79 | .navbar li { |
80 | margin-top: .3em; |
81 | float: left; |
82 | margin-right: .6em; |
83 | margin-left: .3em; |
84 | list-style-type: none; |
85 | } |
86 | |
87 | .navbar li.right { |
88 | padding-left: .4em; |
89 | padding-right: .4em; |
90 | margin-top: .3em; |
91 | margin-right: 1.7em; |
92 | float: right; |
93 | list-style-type: none; |
94 | background: #333; |
95 | border-radius: 100%; |
96 | } |
97 | |
98 | .content { |
99 | max-width: 760px; |
100 | margin-left: auto; |
101 | margin-right: auto; |
102 | } |
103 | |
104 | .message, .message > *, .navbar, .navbar > * { |
105 | animation: fadein .5s; |
106 | } |
107 | |
108 | @keyframes fadein { |
109 | from { opacity: 0; } |
110 | to { opacity: 1; } |
111 | } |
112 | |
113 | .messageContent { |
114 | display: block; |
115 | margin: .6em; |
116 | background: #111; |
117 | padding: .7em; |
118 | border-radius: 3px; |
119 | border: 1px solid #252525; |
120 | } |
121 | |
122 | .submessage { |
123 | margin-left: 2em; |
124 | } |
125 | |
126 | .message img, .message video { |
127 | max-width: 100%; |
128 | } |
129 | |
130 | .avatar--small img { |
131 | vertical-align: top; |
132 | width: 1.4em; |
133 | height: 1.4em; |
134 | margin-right: .2em; |
135 | } |
136 | |
137 | .avatar--medium img { |
138 | float: left; |
139 | vertical-align: top; |
140 | width: 10em; |
141 | height: 10em; |
142 | margin-right: .5em; |
143 | margin-bottom: .5em; |
144 | } |
145 | |
146 | .right { |
147 | float: right; |
148 | margin-right: .25em; |
149 | } |
150 | |
151 | .emoji { |
152 | padding: .2em; |
153 | *float: left; |
154 | width: 1em; |
155 | vertical-align: top; |
156 | } |
157 | |
158 | pre { |
159 | width: 100%; |
160 | display: block; |
161 | } |
162 | |
163 | code { |
164 | display: inline-block; |
165 | vertical-align: bottom; |
166 | } |
167 | |
168 | code, pre { |
169 | overflow: auto; |
170 | word-break: break-all; |
171 | word-wrap: break-word; |
172 | white-space: pre; |
173 | white-space: -moz-pre-wrap; |
174 | white-space: pre-wrap; |
175 | white-space: pre\9; |
176 | color: violet; |
177 | } |
178 | |
179 | .compose, textarea, input { |
180 | font-family: sans-serif; |
181 | font-size: 14px; |
182 | line-height: 20px; |
183 | background: #111; |
184 | color: #ccc; |
185 | border: none; |
186 | border-radius: 3px; |
187 | } |
188 | |
189 | textarea { |
190 | width: 100%; |
191 | height: 200px; |
192 | } |
193 | |
194 | .compose:hover { |
195 | background: #141414; |
196 | } |
197 | |
198 | .compose:focus { |
199 | outline: none; |
200 | } |
201 | |
202 | button {margin: 0; margin-top: -.2em;} |
203 | |
204 | .btn { |
205 | display: inline-block; |
206 | *display: inline; |
207 | padding: 2px 6px; |
208 | margin-bottom: 0; |
209 | margin-right: .2em; |
210 | font-size: 14px; |
211 | line-height: 20px; |
212 | color: #d5d5d5; |
213 | text-align: center; |
214 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); |
215 | vertical-align: middle; |
216 | cursor: pointer; |
217 | background-color: #222; |
218 | border: 1px solid #222; |
219 | border-radius: 4px; |
220 | } |
221 | |
222 | |
223 | .btn:hover, |
224 | .btn:focus, |
225 | .btn:active, |
226 | .btn.active, |
227 | .btn.disabled, |
228 | .btn[disabled] { |
229 | color: white; |
230 | background-color: black; |
231 | } |
232 | |
233 | .btn:active, |
234 | .btn.active { |
235 | background-color: #111; |
236 | } |
237 | |
238 | .btn:first-child { |
239 | *margin-left: 0; |
240 | } |
241 | |
242 |
Built with git-ssb-web