git ssb

0+

ev / minbase



Commit 3ee0398629a78832c2fbe78831ce756faeaeca74

Browse Files

only show edit dialog on messages you own

Ev Bogue committed on 3/25/2018, 11:27:24 PM
Parent: e79b60cf3dad85b6ef8589856a512ebd338c257f

Files changed

modules/post.jschanged
style.csschanged
style.css.jsonchanged
modules/post.jsView
@@ -4,9 +4,9 @@
44 …
55 … var pull = require('pull-stream')
66 …
77 … var query = require('./scuttlebot').query
8-var self_id = require('./../keys')
8 …+var id = require('./../keys').id
99 … var timestamp = require('./helpers').timestamp
1010 …
1111 … exports.gives = 'message_content'
1212 …
@@ -16,37 +16,47 @@
1616 … return function (data) {
1717 … if(!data.value.content || !data.value.content.text) return
1818 … if(data.value.content.type === 'edit') return
1919 …
20- var root = data.value.content.root
21- var re = !root ? null : h('span', 're: ', messageLink(root))
22- console.log(data)
20 …+ function re (data) {
21 …+ var root = data.value.content.root
22 …+ if (root)
23 …+ return h('span', 're: ', messageLink(root))
24 …+ }
2325 …
2426 … var meta = {
2527 … type: 'edit',
2628 … edited: data.key
2729 … }
2830 …
29- var editor = h('div.editor', api.message_compose(meta, {text: data.value.content.text}))
31 …+ var original = data
3032 …
31- var message = h('div', re, h('div.innercontent', h('span.edited', 'Unedited'), markdown(data.value.content.text), editor))
33 …+ function getEditor (data) {
34 …+ if (data.value.author == id) {
35 …+ return h('span.editor', api.message_compose(meta, {text: data.value.content.text}))
36 …+ } else { return h('span.editor','')}
37 …+ }
3238 …
39 …+ var message = h('div', re(data), h('div.innercontent', h('span.edited', 'Unedited'), markdown(data.value.content.text)))
40 …+
3341 … pull(query({query: [{$filter: { value: { author: data.value.author, content: {type: 'edit', edited: data.key}}}}], limit: 100}),
3442 … pull.collect(function (err, data){
3543 … if(data[0]) {
36- for (var i = 0; i < data.length; i++) {
44 …+ var fin = data.length
45 …+ for (var i = 0; i < fin; i++) {
3746 … edited = data[i]
38- console.log(edited.key)
3947 … message.appendChild(
4048 … h('div.innercontent',
4149 … h('span.edited',
4250 … 'Edited ',
4351 … timestamp(edited)),
44- markdown(edited.value.content.text),
45- api.message_compose(meta, {text: edited.value.content.text})
52 …+ markdown(edited.value.content.text)
4653 … )
4754 … )
4855 … }
56 …+ message.appendChild(getEditor(data[fin - 1]))
57 …+ } else {
58 …+ message.appendChild(getEditor(original))
4959 … }
5060 … })
5161 … )
5262 …
style.cssView
@@ -312,9 +312,9 @@
312312 … width: 100%;
313313 … display: none;
314314 … }
315315 …
316-.message .innercontent:last-child {
316 …+.message .innercontent:nth-last-child(2) {
317317 … display: block;
318318 … }
319319 …
320320 … .message_meta > * {
style.css.jsonView
@@ -1,1 +1,1 @@
1-"/* functional */\n\nhtml, body {\n margin: 0;\n font-size: 14px; line-height: 20px;\n color: #333;\n}\n\np {\n margin-bottom: 10px;\n}\n\na {\n color: #0088cc;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #005580;\n text-decoration: underline;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom; \n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\ncode, pre {\n font-size: 12px;\n color: #333333;\n}\n\ncode {\n color: #d14;\n background-color: #f7f7f9;\n}\n\npre {\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 20px;\n background-color: #f5f5f5;\n border: 1px solid #ccc;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n \n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.screen {\n background: #f7f7f9;\n}\n\ninput, textarea {\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n transition: border linear 0.2s, box-shadow linear 0.2s;\n border: 1px solid #eee;\n color: #555;\n border-radius: 4px;\n}\n\ninput {\n width: 206px;\n height: 20px;\n padding: 4px 6px;\n font-size: 14px;\n line-height: 20px;\n color: #555555;\n vertical-align: middle;\n}\n\ninput.search {\n margin-right: 5px;\n height: 14px;\n width: 96px;\n background: #f5f5f5; \n}\n\nbutton.btn-search {\n margin-right: 1em;\n}\n\n.message, .message > * {\n animation: fadein .5s;\n}\n\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .message-confirm {\n display: block;\n position: relative;\n flex-basis: 0;\n border: 1px solid #eee;\n max-width: 100%;\n padding: .5em;\n margin-top: .25em;\n margin-bottom: .25em;\n background: white;\n border-radius: 4px;\n}\n\n.title {\n border-bottom: 1px solid #eee;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .1;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 645px; \n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n padding-right: .6em;\n padding-left: .3em;\n list-style-type: none;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\np {\n margin-top: .35ex;\n}\n\nhr {\n border: solid #eee;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n.screen {\n width: 100%;\n position: absolute;\n top: 2.7em; bottom: 0;\n left: 0; right: 0;\n overflow-y: hidden;\n}\n\n@media only screen and (max-width: 500px) {\n .screen {\n top: 4em;\n }\n}\n\n.column {\n display: flex;\n flex-direction: column;\n min-height:0px;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n min-height:0px;\n}\n\n.end {\n justify-content: flex-end;\n}\n\n.wrap {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.no-shrink {\n flex-shrink: 0;\n}\n\n.expand {\n justify-content: space-between;\n}\n\n.scroll-y {\n overflow-y: auto;\n min-height: 0px;\n}\n\n.scroll-x {\n overflow-x: auto;\n min-width: 0px;\n}\n\n.wide {\n width: 100%;\n}\n\n/* scrolling feeds, threads */\n\n.scroller {\n width: 100%;\n flex: 1;\n}\n\n.scroller__content {\n max-width: 640px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.scroller__wrapper {\n width: 100%;\n}\n\n\n/* compose */\n\n.compose {\n max-width: 640px;\n margin-left: auto;\n margin-right: auto;\n margin-top: 1.5em;\n}\n\n.theme {\n height: 20em;\n width: 100%;\n}\n\ntextarea {\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n transition: border linear 0.2s, box-shadow linear 0.2s;\n padding: 4px 6px;\n font-size: 1em;\n margin: 0;\n margin-bottom: .3em;\n border-radius: 4px; \n}\n\ntextarea:focus, {\n border-color: rgba(82, 168, 236, 0.8);\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);\n}\n\n/* messages */\n\n\n.message_content {\n margin-top: 5px;\n padding-top: 3px;\n}\n\n.message_content > span, .message_content > div {\n width: 100%;\n}\n\n.message_content--mini div > span {\n display: inline-block;\n}\n\n.message_meta {\n margin-left: auto;\n}\n\n.edited {\n float: right;\n}\n\n.message .innercontent {\n width: 100%;\n display: none;\n}\n\n.message .innercontent:last-child {\n display: block;\n}\n\n.message_meta > * {\n margin-left: .5ex;\n}\n\n.message_actions {\n margin-left: auto;\n margin-top: auto;\n}\n\n.message img {\n max-width: 98%;\n border: 1px solid #ccc;\n padding: 4px;\n}\n\n.message > .title > .avatar {\n margin-left: 0;\n}\n\n.message_content {\n padding: .5ex;\n}\n\n.actions > :not(:last-child) {\n padding-right: 5px;\n}\n\n.emoji {\n height: 14px;\n width: 14px;\n vertical-align: top;\n border: none;\n padding: 0;\n}\n\nimg.emoji {\n border: none;\n padding: none;\n}\n\n\n/* -- suggest box */\n\n.suggest-box > * {\n display: block;\n}\n\n.suggest-box ul {\n padding: 0;\n list-style-type: none;\n padding-left: 0;\n margin: 0;\n}\n\n.suggest-box .selected {\n background: #ddd;\n}\n\n.suggest-box {\n width: max-content;\n background: white;\n}\n\n/* emoji */\n\n.suggest-box img {\n height: 20px;\n width: 20px;\n}\n\n/* avatar */\n\n.avatar--profile {\n float: left;\n}\n\n.avatar--profile img {\n border: none;\n width: 5em;\n height: 5em;\n margin-right: 5px;\n vertical-align: top;\n border-radius: 4px;\n}\n\n.avatar--thumbnail {\n float: left;\n}\n\n.avatar--thumbnail img {\n border: none;\n width: 2.5em;\n height: 2.5em;\n vertical-align: top;\n margin-right: .5ex;\n margin-bottom: .1ex;\n border-radius: 4px;\n}\n\n.avatar--tiny {\n width: 26px;\n height: 26px;\n border-radius: 2px;\n}\n\n.profile {\n padding: .5ex;\n}\n\n.profile__info {\n margin-left: .5em;\n}\n\n/* lightbox - used in message-confirm */\n\n.lightbox {\n margin-top: 5em;\n margin-bottom: 3em;\n width: 90%;\n max-width: 600px;\n z-index: 5;\n margin-left: auto;\n margin-right: auto;\n}\n\n.lightbox .message-confirm {\n box-shadow: 0px 0px 1500px 1500px rgba(0, 0, 0, 0.1); \n}\n\n/* searchprompt */\n\nform.search {\n float: right;\n}\n\n.header__profile {\n margin: .7em;\n}\n\n/* gitssb */\n\n.git-table-wrapper {\n max-height: 12em;\n overflow: auto;\n word-break: break-all;\n margin: 1em 0;\n}\n\n.git-table-wrapper table {\n width: 100%;\n}\n\n/* aesthetic */\n\nbody, input, button, p, li, h1, h2, h3, h4, h5, h6, textarea {\n font-family: \"Source Sans Pro\", sans-serif;\n}\n\n\n.btn {\n margin-right: 4px;\n display: inline-block;\n *display: inline;\n padding: 4px 12px;\n margin-bottom: 0;\n *margin-left: .3em;\n font-size: 14px;\n line-height: 20px;\n color: #333333;\n text-align: center;\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #f5f5f5;\n *background-color: #e6e6e6;\n background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));\n background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);\n background-repeat: repeat-x;\n border: 1px solid #cccccc;\n *border: 0;\n border-color: #e6e6e6 #e6e6e6 #bfbfbf;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n border-bottom-color: #b3b3b3;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n *zoom: 1;\n -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: #333333;\n background-color: #e6e6e6;\n *background-color: #d9d9d9;\n}\n\n.btn:active,\n.btn.active {\n background-color: #cccccc \\9;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n.btn:hover,\n.btn:focus {\n color: #333333;\n text-decoration: none;\n background-position: 0 -15px;\n -webkit-transition: background-position 0.1s linear;\n -moz-transition: background-position 0.1s linear;\n -o-transition: background-position 0.1s linear;\n transition: background-position 0.1s linear;\n}\n\n.btn:focus {\n outline: thin dotted #333;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: -2px;\n}\n\n.btn.active,\n.btn:active {\n background-image: none;\n outline: 0;\n -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.btn-primary {\n color: #ffffff;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n background-color: #006dcc;\n *background-color: #0044cc;\n background-image: -moz-linear-gradient(top, #0088cc, #0044cc);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));\n background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);\n background-image: -o-linear-gradient(top, #0088cc, #0044cc);\n background-image: linear-gradient(to bottom, #0088cc, #0044cc);\n background-repeat: repeat-x;\n border-color: #0044cc #0044cc #002a80;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n}\n\n.btn-primary:hover,\n.btn-primary:focus,\n.btn-primary:active,\n.btn-primary.active,\n.btn-primary.disabled,\n.btn-primary[disabled] {\n color: #ffffff;\n background-color: #0044cc;\n *background-color: #003bb3;\n}\n\n.btn-primary:active,\n.btn-primary.active {\n background-color: #003399 \\9;\n}\n\n.btn-success {\n color: #ffffff;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n background-color: #5bb75b;\n *background-color: #51a351;\n background-image: -moz-linear-gradient(top, #62c462, #51a351);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));\n background-image: -webkit-linear-gradient(top, #62c462, #51a351);\n background-image: -o-linear-gradient(top, #62c462, #51a351);\n background-image: linear-gradient(to bottom, #62c462, #51a351);\n background-repeat: repeat-x;\n border-color: #51a351 #51a351 #387038;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n}\n\n.btn-success:hover,\n.btn-success:focus,\n.btn-success:active,\n.btn-success.active,\n.btn-success.disabled,\n.btn-success[disabled] {\n color: #ffffff;\n background-color: #51a351;\n *background-color: #499249;\n}\n\n.btn-success:active,\n.btn-success.active {\n background-color: #408140 \\9;\n}\n\n.btn-danger {\n color: #ffffff;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n background-color: #da4f49;\n *background-color: #bd362f;\n background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));\n background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);\n background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);\n background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);\n background-repeat: repeat-x;\n border-color: #bd362f #bd362f #802420;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n}\n\n.btn-danger:hover,\n.btn-danger:focus,\n.btn-danger:active,\n.btn-danger.active,\n.btn-danger.disabled,\n.btn-danger[disabled] {\n color: #ffffff;\n background-color: #bd362f;\n *background-color: #a9302a;\n}\n\n.btn-danger:active,\n.btn-danger.active {\n background-color: #942a25 \\9;\n}\n\n\n"
1 …+"/* functional */\n\nhtml, body {\n margin: 0;\n font-size: 14px; line-height: 20px;\n color: #333;\n}\n\np {\n margin-bottom: 10px;\n}\n\na {\n color: #0088cc;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #005580;\n text-decoration: underline;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom; \n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\ncode, pre {\n font-size: 12px;\n color: #333333;\n}\n\ncode {\n color: #d14;\n background-color: #f7f7f9;\n}\n\npre {\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 20px;\n background-color: #f5f5f5;\n border: 1px solid #ccc;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n \n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.screen {\n background: #f7f7f9;\n}\n\ninput, textarea {\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n transition: border linear 0.2s, box-shadow linear 0.2s;\n border: 1px solid #eee;\n color: #555;\n border-radius: 4px;\n}\n\ninput {\n width: 206px;\n height: 20px;\n padding: 4px 6px;\n font-size: 14px;\n line-height: 20px;\n color: #555555;\n vertical-align: middle;\n}\n\ninput.search {\n margin-right: 5px;\n height: 14px;\n width: 96px;\n background: #f5f5f5; \n}\n\nbutton.btn-search {\n margin-right: 1em;\n}\n\n.message, .message > * {\n animation: fadein .5s;\n}\n\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .message-confirm {\n display: block;\n position: relative;\n flex-basis: 0;\n border: 1px solid #eee;\n max-width: 100%;\n padding: .5em;\n margin-top: .25em;\n margin-bottom: .25em;\n background: white;\n border-radius: 4px;\n}\n\n.title {\n border-bottom: 1px solid #eee;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .1;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 645px; \n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n padding-right: .6em;\n padding-left: .3em;\n list-style-type: none;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\np {\n margin-top: .35ex;\n}\n\nhr {\n border: solid #eee;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n.screen {\n width: 100%;\n position: absolute;\n top: 2.7em; bottom: 0;\n left: 0; right: 0;\n overflow-y: hidden;\n}\n\n@media only screen and (max-width: 500px) {\n .screen {\n top: 4em;\n }\n}\n\n.column {\n display: flex;\n flex-direction: column;\n min-height:0px;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n min-height:0px;\n}\n\n.end {\n justify-content: flex-end;\n}\n\n.wrap {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.no-shrink {\n flex-shrink: 0;\n}\n\n.expand {\n justify-content: space-between;\n}\n\n.scroll-y {\n overflow-y: auto;\n min-height: 0px;\n}\n\n.scroll-x {\n overflow-x: auto;\n min-width: 0px;\n}\n\n.wide {\n width: 100%;\n}\n\n/* scrolling feeds, threads */\n\n.scroller {\n width: 100%;\n flex: 1;\n}\n\n.scroller__content {\n max-width: 640px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.scroller__wrapper {\n width: 100%;\n}\n\n\n/* compose */\n\n.compose {\n max-width: 640px;\n margin-left: auto;\n margin-right: auto;\n margin-top: 1.5em;\n}\n\n.theme {\n height: 20em;\n width: 100%;\n}\n\ntextarea {\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n transition: border linear 0.2s, box-shadow linear 0.2s;\n padding: 4px 6px;\n font-size: 1em;\n margin: 0;\n margin-bottom: .3em;\n border-radius: 4px; \n}\n\ntextarea:focus, {\n border-color: rgba(82, 168, 236, 0.8);\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);\n}\n\n/* messages */\n\n\n.message_content {\n margin-top: 5px;\n padding-top: 3px;\n}\n\n.message_content > span, .message_content > div {\n width: 100%;\n}\n\n.message_content--mini div > span {\n display: inline-block;\n}\n\n.message_meta {\n margin-left: auto;\n}\n\n.edited {\n float: right;\n}\n\n.message .innercontent {\n width: 100%;\n display: none;\n}\n\n.message .innercontent:nth-last-child(2) {\n display: block;\n}\n\n.message_meta > * {\n margin-left: .5ex;\n}\n\n.message_actions {\n margin-left: auto;\n margin-top: auto;\n}\n\n.message img {\n max-width: 98%;\n border: 1px solid #ccc;\n padding: 4px;\n}\n\n.message > .title > .avatar {\n margin-left: 0;\n}\n\n.message_content {\n padding: .5ex;\n}\n\n.actions > :not(:last-child) {\n padding-right: 5px;\n}\n\n.emoji {\n height: 14px;\n width: 14px;\n vertical-align: top;\n border: none;\n padding: 0;\n}\n\nimg.emoji {\n border: none;\n padding: none;\n}\n\n\n/* -- suggest box */\n\n.suggest-box > * {\n display: block;\n}\n\n.suggest-box ul {\n padding: 0;\n list-style-type: none;\n padding-left: 0;\n margin: 0;\n}\n\n.suggest-box .selected {\n background: #ddd;\n}\n\n.suggest-box {\n width: max-content;\n background: white;\n}\n\n/* emoji */\n\n.suggest-box img {\n height: 20px;\n width: 20px;\n}\n\n/* avatar */\n\n.avatar--profile {\n float: left;\n}\n\n.avatar--profile img {\n border: none;\n width: 5em;\n height: 5em;\n margin-right: 5px;\n vertical-align: top;\n border-radius: 4px;\n}\n\n.avatar--thumbnail {\n float: left;\n}\n\n.avatar--thumbnail img {\n border: none;\n width: 2.5em;\n height: 2.5em;\n vertical-align: top;\n margin-right: .5ex;\n margin-bottom: .1ex;\n border-radius: 4px;\n}\n\n.avatar--tiny {\n width: 26px;\n height: 26px;\n border-radius: 2px;\n}\n\n.profile {\n padding: .5ex;\n}\n\n.profile__info {\n margin-left: .5em;\n}\n\n/* lightbox - used in message-confirm */\n\n.lightbox {\n margin-top: 5em;\n margin-bottom: 3em;\n width: 90%;\n max-width: 600px;\n z-index: 5;\n margin-left: auto;\n margin-right: auto;\n}\n\n.lightbox .message-confirm {\n box-shadow: 0px 0px 1500px 1500px rgba(0, 0, 0, 0.1); \n}\n\n/* searchprompt */\n\nform.search {\n float: right;\n}\n\n.header__profile {\n margin: .7em;\n}\n\n/* gitssb */\n\n.git-table-wrapper {\n max-height: 12em;\n overflow: auto;\n word-break: break-all;\n margin: 1em 0;\n}\n\n.git-table-wrapper table {\n width: 100%;\n}\n\n/* aesthetic */\n\nbody, input, button, p, li, h1, h2, h3, h4, h5, h6, textarea {\n font-family: \"Source Sans Pro\", sans-serif;\n}\n\n\n.btn {\n margin-right: 4px;\n display: inline-block;\n *display: inline;\n padding: 4px 12px;\n margin-bottom: 0;\n *margin-left: .3em;\n font-size: 14px;\n line-height: 20px;\n color: #333333;\n text-align: center;\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #f5f5f5;\n *background-color: #e6e6e6;\n background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));\n background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);\n background-repeat: repeat-x;\n border: 1px solid #cccccc;\n *border: 0;\n border-color: #e6e6e6 #e6e6e6 #bfbfbf;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n border-bottom-color: #b3b3b3;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n *zoom: 1;\n -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: #333333;\n background-color: #e6e6e6;\n *background-color: #d9d9d9;\n}\n\n.btn:active,\n.btn.active {\n background-color: #cccccc \\9;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n.btn:hover,\n.btn:focus {\n color: #333333;\n text-decoration: none;\n background-position: 0 -15px;\n -webkit-transition: background-position 0.1s linear;\n -moz-transition: background-position 0.1s linear;\n -o-transition: background-position 0.1s linear;\n transition: background-position 0.1s linear;\n}\n\n.btn:focus {\n outline: thin dotted #333;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: -2px;\n}\n\n.btn.active,\n.btn:active {\n background-image: none;\n outline: 0;\n -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.btn-primary {\n color: #ffffff;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n background-color: #006dcc;\n *background-color: #0044cc;\n background-image: -moz-linear-gradient(top, #0088cc, #0044cc);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));\n background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);\n background-image: -o-linear-gradient(top, #0088cc, #0044cc);\n background-image: linear-gradient(to bottom, #0088cc, #0044cc);\n background-repeat: repeat-x;\n border-color: #0044cc #0044cc #002a80;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n}\n\n.btn-primary:hover,\n.btn-primary:focus,\n.btn-primary:active,\n.btn-primary.active,\n.btn-primary.disabled,\n.btn-primary[disabled] {\n color: #ffffff;\n background-color: #0044cc;\n *background-color: #003bb3;\n}\n\n.btn-primary:active,\n.btn-primary.active {\n background-color: #003399 \\9;\n}\n\n.btn-success {\n color: #ffffff;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n background-color: #5bb75b;\n *background-color: #51a351;\n background-image: -moz-linear-gradient(top, #62c462, #51a351);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));\n background-image: -webkit-linear-gradient(top, #62c462, #51a351);\n background-image: -o-linear-gradient(top, #62c462, #51a351);\n background-image: linear-gradient(to bottom, #62c462, #51a351);\n background-repeat: repeat-x;\n border-color: #51a351 #51a351 #387038;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n}\n\n.btn-success:hover,\n.btn-success:focus,\n.btn-success:active,\n.btn-success.active,\n.btn-success.disabled,\n.btn-success[disabled] {\n color: #ffffff;\n background-color: #51a351;\n *background-color: #499249;\n}\n\n.btn-success:active,\n.btn-success.active {\n background-color: #408140 \\9;\n}\n\n.btn-danger {\n color: #ffffff;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n background-color: #da4f49;\n *background-color: #bd362f;\n background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));\n background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);\n background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);\n background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);\n background-repeat: repeat-x;\n border-color: #bd362f #bd362f #802420;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n}\n\n.btn-danger:hover,\n.btn-danger:focus,\n.btn-danger:active,\n.btn-danger.active,\n.btn-danger.disabled,\n.btn-danger[disabled] {\n color: #ffffff;\n background-color: #bd362f;\n *background-color: #a9302a;\n}\n\n.btn-danger:active,\n.btn-danger.active {\n background-color: #942a25 \\9;\n}\n\n\n"

Built with git-ssb-web