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