git ssb

main-window.jsView
		@@ -18,8 +18,9 @@
18	18	overrideConfig(config),
19	19	addCommand('app.navigate', setView),
20	20	require('./modules'),
21	21	require('./plugs'),
	22	+ require('patch-settings'),
22	23	require('patchcore'),
23	24	require('./overrides')
24	25	)
25	26
		@@ -36,9 +37,10 @@
36	37	'app.sync.externalHandler': 'first',
37	38	'app.html.progressNotifier': 'first',
38	39	'profile.sheet.edit': 'first',
39	40	'app.navigate': 'first',
40		- 'channel.obs.subscribed': 'first'
	41	+ 'channel.obs.subscribed': 'first',
	42	+ 'settings.obs.get': 'first',
41	43	}))
42	44
43	45	setupContextMenuAndSpellCheck(api.config.sync.load())
44	46
		@@ -64,10 +66,18 @@
64	66	watch(pendingCount, count => {
65	67	electron.remote.app.setBadgeCount(count)
66	68	})
67	69
68		- insertCss(require('./styles'))
69	70
	71	+ watch(api.settings.obs.get('patchwork.theme', 'light'), name => {
	72	+ Array.from(document.head.children)
	73	+ .filter(c => c.tagName == 'STYLE')
	74	+ .forEach(c => c.innerText = '')
	75	+
	76	+ const theme = require('./styles')[name]
	77	+ insertCss(theme)
	78	+ })
	79	+
70	80	var container = h(`MainWindow -${process.platform}`, [
71	81	h('div.top', [
72	82	h('span.history', [
73	83	h('a', {
		@@ -84,9 +94,10 @@
84	94	tab('Private', '/private'),
85	95	dropTab('More', [
86	96	getSubscribedChannelMenu,
87	97	['Gatherings', '/gatherings'],
88		- ['Extended Network', '/all']
	98	+ ['Extended Network', '/all'],
	99	+ ['Settings', '/settings']
89	100	])
90	101	]),
91	102	h('span.appTitle', [
92	103	h('span.title', 'Patchwork'),

modules/page/html/render/settings.jsView
		@@ -1,0 +1,52 @@
	1	+var { h, computed } = require('mutant')
	2	+var nest = require('depnest')
	3	+
	4	+var themeNames = Object.keys(require('../../../../styles'))
	5	+
	6	+exports.needs = nest({
	7	+ 'settings.obs.get': 'first',
	8	+ 'settings.sync.set': 'first',
	9	+})
	10	+
	11	+exports.gives = nest('page.html.render')
	12	+
	13	+exports.create = function (api) {
	14	+ return nest('page.html.render', function channel (path) {
	15	+ if (path !== '/settings') return
	16	+
	17	+ const currentTheme = api.settings.obs.get('patchwork.theme')
	18	+
	19	+ var prepend = [
	20	+ h('PageHeading', [
	21	+ h('h1', [
	22	+ h('strong', 'Settings')
	23	+ ]),
	24	+ ])
	25	+ ]
	26	+
	27	+ return h('Scroller', { style: { overflow: 'auto' } }, [
	28	+ h('div.wrapper', [
	29	+ h('section.prepend', prepend),
	30	+ h('section.content', [
	31	+ h('section', [
	32	+ h('h2', 'Theme'),
	33	+ computed(currentTheme, currentTheme => {
	34	+ return themeNames.map(name => {
	35	+ const style = currentTheme == name
	36	+ ? { 'margin-right': '1rem', 'border-color': 'teal' }
	37	+ : { 'margin-right': '1rem' }
	38	+
	39	+ return h('button', {
	40	+ 'ev-click': () => api.settings.sync.set({
	41	+ patchwork: {theme: name}
	42	+ }),
	43	+ style
	44	+ }, name)
	45	+ })
	46	+ })
	47	+ ])
	48	+ ])
	49	+ ])
	50	+ ])
	51	+ })
	52	+}

package.jsonView
		@@ -35,8 +35,9 @@
35	35	"moment": "^2.18.1",
36	36	"mutant": "^3.21.2",
37	37	"mutant-pull-reduce": "^1.1.0",
38	38	"obv": "0.0.1",
	39	+ "patch-settings": "^1.0.1",
39	40	"patchcore": "~1.8.2",
40	41	"pull-abortable": "^4.1.0",
41	42	"pull-defer": "^0.2.2",
42	43	"pull-file": "~1.0.0",

styles/index.jsView
		@@ -1,20 +1,4 @@
1		-var fs = require('fs')
2		-var path = require('path')
3		-var compile = require('micro-css')
4		-var result = ''
5		-var additional = ''
6		-
7		-fs.readdirSync(__dirname).forEach(function (file) {
8		- if (/\.mcss$/i.test(file)) {
9		- result += fs.readFileSync(path.resolve(__dirname, file), 'utf8') + '\n'
10		- }
11		-
12		- if (/\.css$/i.test(file)) {
13		- additional += fs.readFileSync(path.resolve(__dirname, file), 'utf8') + '\n'
14		- }
15		-})
16		-
17		-const flatpickr = require.resolve('flatpickr/dist/flatpickr.css')
18		-additional += fs.readFileSync(flatpickr) + '\n'
19		-
20		-module.exports = compile(result) + additional
	1	+module.exports = {
	2	+ light: require('./light'),
	3	+ // dark: require('./dark')
	4	+}

styles/about-image.mcssView
		@@ -1,11 +1,0 @@
1		-AboutImage {
2		- display: block
3		- width: 400px;
4		- padding: 5px;
5		- background: white;
6		- box-shadow: 0 0 10px #AAA;
7		- margin: 20px auto;
8		- img {
9		- width: 100%
10		- }
11		-}

styles/all-channels.mcssView
		@@ -1,83 +1,0 @@
1		-AllChannels {
2		- display: flex;
3		- flex-wrap: wrap;
4		- justify-content: center;
5		- overflow-y: auto
6		- padding: 10px;
7		-
8		- a.channel {
9		- display: flex;
10		- padding: 8px 10px;
11		- font-size: 110%;
12		- margin: 4px;
13		- background: rgba(255, 255, 255, 0.66);
14		- color: #333;
15		- border-radius: 5px;
16		- position: relative
17		- transition: background-color 0.2s
18		- width: 200px;
19		- overflow: hidden;
20		- text-overflow: ellipsis;
21		-
22		- background-repeat: no-repeat
23		- background-position: right
24		-
25		- -subscribed {
26		- background-image: svg(subscribed)
27		- span.name {
28		- font-weight: bold
29		- }
30		- }
31		-
32		- @svg subscribed {
33		- width: 20px
34		- height: 12px
35		- content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
36		- }
37		-
38		- :hover {
39		- background: rgba(255, 255, 255, 0.4);
40		- text-decoration: none;
41		- a {
42		- transition: opacity 0.05s
43		- opacity: 1
44		- }
45		- }
46		-
47		- span.name {
48		- flex: 1
49		- white-space: nowrap;
50		- min-width: 0;
51		- }
52		-
53		- a {
54		- display: inline
55		- opacity: 0;
56		- font-size: 80%;
57		- background-color: rgb(112, 112, 112);
58		- transition: opacity 0.2s, background-color 0.4s
59		- padding: 9px 10px;
60		- color: white;
61		- border-radius: 4px;
62		- font-weight: bold;
63		- margin: -8px -10px -8px 4px;
64		- border-top-left-radius: 0;
65		- border-bottom-left-radius: 0;
66		- border-left: 2px solid rgba(255, 255, 255, 0.9);
67		- text-decoration: none
68		-
69		- -subscribe {
70		- :hover {
71		- background-color: rgb(112, 184, 212);
72		- }
73		- }
74		-
75		- -unsubscribe {
76		- :hover {
77		- background: rgb(212, 112, 112);
78		- }
79		- }
80		- }
81		- }
82		-}
83		-}

styles/light/about-image.mcssView
		@@ -1,0 +1,11 @@
	1	+AboutImage {
	2	+ display: block
	3	+ width: 400px;
	4	+ padding: 5px;
	5	+ background: white;
	6	+ box-shadow: 0 0 10px #AAA;
	7	+ margin: 20px auto;
	8	+ img {
	9	+ width: 100%
	10	+ }
	11	+}

styles/light/all-channels.mcssView
		@@ -1,0 +1,83 @@
	1	+AllChannels {
	2	+ display: flex;
	3	+ flex-wrap: wrap;
	4	+ justify-content: center;
	5	+ overflow-y: auto
	6	+ padding: 10px;
	7	+
	8	+ a.channel {
	9	+ display: flex;
	10	+ padding: 8px 10px;
	11	+ font-size: 110%;
	12	+ margin: 4px;
	13	+ background: rgba(255, 255, 255, 0.66);
	14	+ color: #333;
	15	+ border-radius: 5px;
	16	+ position: relative
	17	+ transition: background-color 0.2s
	18	+ width: 200px;
	19	+ overflow: hidden;
	20	+ text-overflow: ellipsis;
	21	+
	22	+ background-repeat: no-repeat
	23	+ background-position: right
	24	+
	25	+ -subscribed {
	26	+ background-image: svg(subscribed)
	27	+ span.name {
	28	+ font-weight: bold
	29	+ }
	30	+ }
	31	+
	32	+ @svg subscribed {
	33	+ width: 20px
	34	+ height: 12px
	35	+ content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
	36	+ }
	37	+
	38	+ :hover {
	39	+ background: rgba(255, 255, 255, 0.4);
	40	+ text-decoration: none;
	41	+ a {
	42	+ transition: opacity 0.05s
	43	+ opacity: 1
	44	+ }
	45	+ }
	46	+
	47	+ span.name {
	48	+ flex: 1
	49	+ white-space: nowrap;
	50	+ min-width: 0;
	51	+ }
	52	+
	53	+ a {
	54	+ display: inline
	55	+ opacity: 0;
	56	+ font-size: 80%;
	57	+ background-color: rgb(112, 112, 112);
	58	+ transition: opacity 0.2s, background-color 0.4s
	59	+ padding: 9px 10px;
	60	+ color: white;
	61	+ border-radius: 4px;
	62	+ font-weight: bold;
	63	+ margin: -8px -10px -8px 4px;
	64	+ border-top-left-radius: 0;
	65	+ border-bottom-left-radius: 0;
	66	+ border-left: 2px solid rgba(255, 255, 255, 0.9);
	67	+ text-decoration: none
	68	+
	69	+ -subscribe {
	70	+ :hover {
	71	+ background-color: rgb(112, 184, 212);
	72	+ }
	73	+ }
	74	+
	75	+ -unsubscribe {
	76	+ :hover {
	77	+ background: rgb(212, 112, 112);
	78	+ }
	79	+ }
	80	+ }
	81	+ }
	82	+}
	83	+}

styles/light/avatar.mcssView
		@@ -1,0 +1,4 @@
	1	+Avatar {
	2	+ background-image: linear-gradient(172deg, rgb(247, 247, 247), rgba(0,0,0,0))
	3	+ width: 45px
	4	+}

styles/light/base.mcssView
		@@ -1,0 +1,99 @@
	1	+html, body {
	2	+ background: #f5f5f5
	3	+ margin: 0
	4	+ font: caption
	5	+ overflow: hidden
	6	+ height: 100%
	7	+ font-size: 12px
	8	+ -webkit-user-select: none
	9	+ color: #2b2b2b
	10	+}
	11	+
	12	+body {
	13	+ display: flex
	14	+ flex-direction: column
	15	+ line-height: 1.2
	16	+}
	17	+
	18	+h1 {
	19	+ font-size: 200%
	20	+ margin: 4px 0
	21	+ font-weight: normal
	22	+ flex: 1
	23	+}
	24	+
	25	+select {
	26	+ font-size: 80%
	27	+ display: inline-block
	28	+ padding: 2px 4px
	29	+ height: 18px
	30	+ border: 1px solid #A9A9A9
	31	+ background: #666 svg(dropArrow) no-repeat right
	32	+ -webkit-appearance: none
	33	+ color: #FFF
	34	+ padding-right: 12px
	35	+ border-radius: 0
	36	+
	37	+ :hover {
	38	+ background-image: svg(dropArrow -active)
	39	+ }
	40	+
	41	+ @svg dropArrow {
	42	+ width: 12px
	43	+ height: 6px
	44	+ content: "<path d='M2,0 L10,0 L6,6 Z' />"
	45	+
	46	+ path {
	47	+ fill: #888
	48	+ }
	49	+
	50	+ -active {
	51	+ path {
	52	+ fill: #DDD
	53	+ }
	54	+ }
	55	+ }
	56	+}
	57	+
	58	+input {
	59	+ [type='text'] {
	60	+ font-size: 80%
	61	+ display: inline-block
	62	+ padding: 2px 4px
	63	+ height: 18px
	64	+ border: 1px solid #A9A9A9
	65	+ background: #333
	66	+ color: #FFF
	67	+ padding-right: 12px
	68	+ border-radius: 0
	69	+ }
	70	+}
	71	+
	72	+::-webkit-file-upload-button {
	73	+ font-family: inherit
	74	+}
	75	+
	76	+a {
	77	+ color: #286bc3
	78	+ text-decoration: none
	79	+
	80	+ code {
	81	+ color: #8EC1FC
	82	+ }
	83	+
	84	+ :hover {
	85	+ text-decoration: underline
	86	+ }
	87	+}
	88	+
	89	+* + h1 {
	90	+ margin-top: 16px
	91	+}
	92	+
	93	+* {
	94	+ box-sizing:border-box
	95	+}
	96	+
	97	+input, textarea, keygen, select, button {
	98	+ font-family: '.SFNSText-Regular', sans-serif
	99	+}

styles/light/button.mcssView
		@@ -1,0 +1,62 @@
	1	+button {
	2	+ color: #5f5f5f;
	3	+ padding: 3px 6px;
	4	+ background: white;
	5	+ border: 2px solid #DDD;
	6	+ border-radius: 4px;
	7	+ font-size: 130%
	8	+ cursor: pointer
	9	+
	10	+ :hover {
	11	+ color: black
	12	+ border-color: #8B8B8B
	13	+ }
	14	+
	15	+ :focus {
	16	+ outline: 1px dotted rgba(255, 255, 255, 0.45)
	17	+ }
	18	+
	19	+ :active {
	20	+ background-color: #DDD !important
	21	+ }
	22	+
	23	+ [disabled] {
	24	+ color: #999797 !important;
	25	+ background: #e3e2e2 !important;
	26	+ border-color: #DDD !important;
	27	+ }
	28	+
	29	+ -add {
	30	+ color: #6a7e6a;
	31	+ background-color: #ecfff0;
	32	+ border-color: #8ba289;
	33	+ }
	34	+
	35	+ -pub {
	36	+ color: #6a7e6a;
	37	+ background-color: #ecfff0;
	38	+ border-color: #8ba289;
	39	+ }
	40	+
	41	+ -save {
	42	+ border-color: #a7c7a6;
	43	+ background-color: #eeffee;
	44	+ color: #255D24;
	45	+
	46	+ :active {
	47	+ background-color: #c6e0c5 !important
	48	+ }
	49	+
	50	+ :hover {
	51	+ border-color: #3ac737;
	52	+ background-color: #d4ffd4;
	53	+ color: #21921f;
	54	+ }
	55	+ }
	56	+
	57	+ -full {
	58	+ display: block
	59	+ width: 100%
	60	+ margin: 15px 0
	61	+ }
	62	+}

styles/light/channel-list.mcssView
		@@ -1,0 +1,79 @@
	1	+ChannelList {
	2	+ a.channel {
	3	+ display: flex;
	4	+ padding: 8px 10px;
	5	+ font-size: 110%;
	6	+ margin: 4px 0;
	7	+ background: rgba(255, 255, 255, 0.66);
	8	+ color: #333;
	9	+ border-radius: 5px;
	10	+ position: relative
	11	+ transition: background-color 0.2s
	12	+ max-width: 250px;
	13	+
	14	+ background-repeat: no-repeat
	15	+ background-position: right
	16	+
	17	+ -more {
	18	+ color: #658aaf;
	19	+ background: rgb(255, 255, 255);
	20	+ }
	21	+
	22	+ -subscribed {
	23	+ background-image: svg(subscribed)
	24	+ span.name {
	25	+ font-weight: bold
	26	+ }
	27	+ }
	28	+
	29	+ @svg subscribed {
	30	+ width: 20px
	31	+ height: 12px
	32	+ content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
	33	+ }
	34	+
	35	+ :hover {
	36	+ background: rgba(255, 255, 255, 0.4);
	37	+ text-decoration: none;
	38	+ a {
	39	+ transition: opacity 0.05s
	40	+ opacity: 1
	41	+ }
	42	+ }
	43	+
	44	+ span.name {
	45	+ flex: 1
	46	+ white-space: nowrap;
	47	+ min-width: 0;
	48	+ }
	49	+
	50	+ a {
	51	+ display: inline
	52	+ opacity: 0;
	53	+ font-size: 80%;
	54	+ background-color: rgb(112, 112, 112);
	55	+ transition: opacity 0.2s, background-color 0.4s
	56	+ padding: 9px 10px;
	57	+ color: white;
	58	+ border-radius: 4px;
	59	+ font-weight: bold;
	60	+ margin: -8px -10px -8px 4px;
	61	+ border-top-left-radius: 0;
	62	+ border-bottom-left-radius: 0;
	63	+ border-left: 2px solid rgba(255, 255, 255, 0.9);
	64	+ text-decoration: none
	65	+
	66	+ -subscribe {
	67	+ :hover {
	68	+ background-color: rgb(112, 184, 212);
	69	+ }
	70	+ }
	71	+
	72	+ -unsubscribe {
	73	+ :hover {
	74	+ background: rgb(212, 112, 112);
	75	+ }
	76	+ }
	77	+ }
	78	+ }
	79	+}

styles/light/compose.mcssView
		@@ -1,0 +1,97 @@
	1	+Compose {
	2	+ display: flex
	3	+ flex-direction: column
	4	+ flex-shrink: 0
	5	+ max-width: 700px
	6	+ width: 100%
	7	+
	8	+ margin: 20px auto;
	9	+ border: 1px solid gainsboro
	10	+ background: white
	11	+
	12	+ textarea {
	13	+ resize: vertical
	14	+ font-size: 120%
	15	+ background: transparent
	16	+ border: none
	17	+ padding: 10px
	18	+ [disabled] {
	19	+ color: #AAA;
	20	+ background: #ebf7ee;
	21	+ }
	22	+ }
	23	+
	24	+ section.actions {
	25	+ display: flex
	26	+ flex-direction: row
	27	+ align-items: baseline
	28	+ justify-content: space-between
	29	+ background: #fafafa
	30	+
	31	+ padding: .4rem
	32	+
	33	+ input[type="file"] {
	34	+ padding: .5rem 0
	35	+
	36	+ width: 95px
	37	+ height: 29px
	38	+
	39	+ color: transparent
	40	+
	41	+ :hover {
	42	+ ::before {
	43	+ color: black
	44	+ border-color: #8B8B8B
	45	+ }
	46	+ }
	47	+
	48	+ ::-webkit-file-upload-button {
	49	+ display: none
	50	+ }
	51	+
	52	+ ::before {
	53	+ color: #5f5f5f;
	54	+ padding: 3px 6px;
	55	+ background: white;
	56	+ border: 2px solid #DDD;
	57	+ border-radius: 4px;
	58	+ cursor: pointer
	59	+ padding-top: .3rem
	60	+ content: '📎 Attach File'
	61	+ font-size: 1rem
	62	+ outline: none
	63	+ white-space: nowrap
	64	+ -webkit-user-select: none
	65	+ }
	66	+
	67	+ :active, :focus {
	68	+ outline: none
	69	+ box-shadow: none
	70	+ }
	71	+ }
	72	+ }
	73	+
	74	+ -expanded {
	75	+ textarea {
	76	+ height: 200px
	77	+ transition: height .15s ease-out
	78	+ border-bottom: 1px solid gainsboro
	79	+ }
	80	+
	81	+ section.actions {
	82	+ display: flex
	83	+ }
	84	+ }
	85	+
	86	+ -contracted {
	87	+ textarea {
	88	+ height: 50px
	89	+ transition: height .15s ease-in
	90	+ }
	91	+
	92	+ section.actions {
	93	+ display: none
	94	+ }
	95	+ }
	96	+
	97	+}

styles/light/feed-event.mcssView
		@@ -1,0 +1,56 @@
	1	+FeedEvent {
	2	+ display: flex
	3	+ flex-direction: column
	4	+ background: white
	5	+ box-shadow: 0 2px 4px rgba(0,0,0,0.1)
	6	+ max-width: 700px
	7	+ width: 100%
	8	+ margin: 25px auto
	9	+
	10	+ :empty {
	11	+ margin-bottom: -25px
	12	+ }
	13	+
	14	+ -new {
	15	+ box-shadow: 0px 0px 2px #ffc800;
	16	+ background: #fffdf7;
	17	+ }
	18	+
	19	+ div + div {
	20	+ border-top: 1px solid #EEE
	21	+ }
	22	+
	23	+ div {
	24	+ flex: 1
	25	+ }
	26	+
	27	+ a.full {
	28	+ display: block;
	29	+ padding: 10px;
	30	+ background: #f3fafd;
	31	+ border-top: 1px solid #bbc9d2;
	32	+ border-bottom: 1px solid #bbc9d2;
	33	+ text-align: center;
	34	+ }
	35	+
	36	+ div.replies {
	37	+ font-size: 100%
	38	+ display: flex
	39	+ flex-direction: column
	40	+ div {
	41	+ flex: 1
	42	+ margin: 0
	43	+ }
	44	+
	45	+ div + div {
	46	+ border-top: 1px solid #EEE
	47	+ }
	48	+ }
	49	+
	50	+ div.meta {
	51	+ font-size: 100%
	52	+ padding: 10px 20px
	53	+ opacity: 0.8
	54	+ }
	55	+
	56	+}

styles/light/gathering-card.mcssView
		@@ -1,0 +1,58 @@
	1	+GatheringCard {
	2	+ border: 1px solid #DDD
	3	+ padding: 10px
	4	+ margin-bottom: 10px
	5	+
	6	+ a.image {
	7	+ display: block
	8	+ margin-top: 10px
	9	+ height: 300px
	10	+ background-size: cover
	11	+ background-repeat: no-repeat
	12	+ background-position: center
	13	+ }
	14	+
	15	+ div.attending {
	16	+ margin: 10px 0
	17	+ padding-top: 10px;
	18	+
	19	+ div.title {
	20	+ font-size: 90%;
	21	+ color: #555;
	22	+ font-weight: bold;
	23	+ margin-bottom: 10px;
	24	+ }
	25	+ div.attendees {
	26	+ margin: 0 5px
	27	+ a {
	28	+ margin-right: 4px
	29	+ img {
	30	+ height: 45px
	31	+ width: 45px
	32	+ }
	33	+ }
	34	+ }
	35	+ div.actions {
	36	+ margin-top: 10px
	37	+ button + button {
	38	+ margin-left: 5px
	39	+ }
	40	+ }
	41	+ }
	42	+
	43	+ div.title {
	44	+ font-size: 200%
	45	+ button {
	46	+ float: right;
	47	+ font-size: 60%;
	48	+ }
	49	+ }
	50	+ div.time {
	51	+ color: #555
	52	+ font-size: 120%
	53	+ }
	54	+ div.description {
	55	+ border-top: 3px solid #CCC;
	56	+ margin-top: 10px;
	57	+ }
	58	+}

styles/light/gathering-editor.mcssView
		@@ -1,0 +1,35 @@
	1	+GatheringEditor {
	2	+ display: flex
	3	+ flex-direction: column
	4	+ input.date {
	5	+ background: white;
	6	+ font-size: 150%;
	7	+ color: #333;
	8	+ padding: 10px;
	9	+ height: auto;
	10	+ margin-top: 10px;
	11	+ }
	12	+ div.banner {
	13	+ margin-top: 10px
	14	+ border: 1px solid #AAA
	15	+ box-shadow: none
	16	+ height: 250px
	17	+ width: 100%
	18	+ background-position: center
	19	+ background-repeat: no-repeat
	20	+ background-size: cover
	21	+ }
	22	+ input {
	23	+ border: 1px solid #CCC
	24	+ font-size: 150%
	25	+ padding: 10px
	26	+ }
	27	+ textarea {
	28	+ resize: vertical
	29	+ margin-top: 10px
	30	+ border: 1px solid #CCC
	31	+ padding: 10px
	32	+ font-size: 120%
	33	+ flex: 1
	34	+ }
	35	+}

styles/light/image-input.mcssView
		@@ -1,0 +1,43 @@
	1	+ImageInput {
	2	+ position: relative
	3	+ width: 200px;
	4	+ padding: 5px;
	5	+ background: white;
	6	+ box-shadow: 0 0 10px #AAA;
	7	+ transition: box-shadow 0.2s
	8	+
	9	+ img {
	10	+ width: 100%
	11	+ background-image: linear-gradient(172deg, rgb(247, 247, 247), rgba(0,0,0,0))
	12	+ }
	13	+ input {
	14	+ cursor: pointer
	15	+ opacity: 0
	16	+ position: absolute
	17	+ width: 100%
	18	+ height: 100%
	19	+ top: 0
	20	+ left: 0
	21	+ }
	22	+
	23	+ span {
	24	+ position: absolute
	25	+ left: 0
	26	+ right: 0
	27	+ bottom: 0
	28	+ margin: 15px
	29	+ background: #444
	30	+ padding: 4px 8px
	31	+ border-radius: 5px
	32	+ transition: opacity 0.2s
	33	+ opacity: 0.5
	34	+ color: white
	35	+ }
	36	+
	37	+ :hover {
	38	+ box-shadow: 0 0 10px #393939;
	39	+ span {
	40	+ opacity: 1
	41	+ }
	42	+ }
	43	+}

styles/light/index.jsView
		@@ -1,0 +1,20 @@
	1	+var fs = require('fs')
	2	+var path = require('path')
	3	+var compile = require('micro-css')
	4	+var result = ''
	5	+var additional = ''
	6	+
	7	+fs.readdirSync(__dirname).forEach(function (file) {
	8	+ if (/\.mcss$/i.test(file)) {
	9	+ result += fs.readFileSync(path.resolve(__dirname, file), 'utf8') + '\n'
	10	+ }
	11	+
	12	+ if (/\.css$/i.test(file)) {
	13	+ additional += fs.readFileSync(path.resolve(__dirname, file), 'utf8') + '\n'
	14	+ }
	15	+})
	16	+
	17	+const flatpickr = require.resolve('flatpickr/dist/flatpickr.css')
	18	+additional += fs.readFileSync(flatpickr) + '\n'
	19	+
	20	+module.exports = compile(result) + additional

styles/light/loading.mcssView
		@@ -1,0 +1,92 @@
	1	+Loading {
	2	+ height: 25%
	3	+ display: flex
	4	+ align-items: center
	5	+ justify-content: center
	6	+ whitespace: no-wrap
	7	+
	8	+ span.info {
	9	+ overflow: hidden
	10	+ white-space: nowrap
	11	+ text-overflow: ellipsis
	12	+ }
	13	+
	14	+ -inline {
	15	+ height: 16px
	16	+ width: 16px
	17	+ display: inline-block
	18	+ margin: -3px 3px
	19	+
	20	+ ::before {
	21	+ display: block
	22	+ height: 16px
	23	+ width: 16px
	24	+ }
	25	+ }
	26	+
	27	+ -small {
	28	+ ::before {
	29	+ height: 30px
	30	+ width: 30px
	31	+ }
	32	+ }
	33	+
	34	+ -large {
	35	+ height: 25vh
	36	+ ::before {
	37	+ height: 100px
	38	+ width: 100px
	39	+ }
	40	+ ::after {
	41	+ color: #CCC;
	42	+ content: 'Loading...'
	43	+ font-size: 200%
	44	+ }
	45	+ }
	46	+
	47	+ -search {
	48	+ height: 200px
	49	+
	50	+ ::before {
	51	+ height: 100px
	52	+ width: 100px
	53	+ }
	54	+ ::after {
	55	+ color: #CCC;
	56	+ content: 'Seaching...'
	57	+ font-size: 200%
	58	+ }
	59	+ }
	60	+
	61	+ ::before {
	62	+ content: ' '
	63	+ height: 50px
	64	+ width: 50px
	65	+ background-image: svg(waitingIcon)
	66	+ background-repeat: no-repeat
	67	+ background-position: center
	68	+ background-size: contain
	69	+ animation: spin 3s infinite linear
	70	+ }
	71	+}
	72	+
	73	+@svg waitingIcon {
	74	+ width: 30px
	75	+ height: 30px
	76	+ content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />"
	77	+
	78	+ circle {
	79	+ stroke: #CCC
	80	+ stroke-width: 3px
	81	+ fill: none
	82	+ }
	83	+}
	84	+
	85	+@keyframes spin {
	86	+ 0% {
	87	+ transform: rotate(0deg);
	88	+ }
	89	+ 100% {
	90	+ transform: rotate(360deg);
	91	+ }
	92	+}

styles/light/main-window.mcssView
		@@ -1,0 +1,307 @@
	1	+MainWindow {
	2	+ height: 100%
	3	+ display: flex
	4	+ flex-direction: column
	5	+
	6	+ -darwin {
	7	+ div.top {
	8	+ padding-left: 70px
	9	+ span.appTitle {
	10	+ span.title {
	11	+ visibility: visible
	12	+ }
	13	+ }
	14	+ }
	15	+ }
	16	+
	17	+ div.top {
	18	+ display: flex;
	19	+ align-items: center;
	20	+ background: #fff;
	21	+ padding: 6px;
	22	+ border-bottom: 2px solid #e4edff;
	23	+ box-shadow: 0 0 3px #7f7f7f;
	24	+ position: relative;
	25	+ z-index: 100
	26	+
	27	+ span {
	28	+ input.search {
	29	+ padding: 4px 8px;
	30	+ border-radius: 3px;
	31	+ border: 0 none;
	32	+ background: #ffffff;
	33	+ color: #656565;
	34	+ font-size: 120%;
	35	+ width: 180px;
	36	+ box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
	37	+ :focus {
	38	+ outline: 0;
	39	+ box-shadow: inset 0 0 0px 1px #286bc3
	40	+ }
	41	+ }
	42	+ }
	43	+
	44	+ span.history {
	45	+ padding-left: 6px
	46	+ height: 26px;
	47	+ display: inline-block
	48	+ a {
	49	+ cursor: pointer;
	50	+ text-decoration: none !important
	51	+ display: inline-block
	52	+ width: 28px
	53	+ height: 100%
	54	+ border-radius: 2px
	55	+ background: svg(backArrow) no-repeat center
	56	+ opacity: 0.4
	57	+ -active {
	58	+ opacity: 1
	59	+ }
	60	+ :hover {
	61	+ background-color: #E8E8E8
	62	+ }
	63	+ }
	64	+
	65	+ a + a {
	66	+ transform: rotate(180deg)
	67	+ }
	68	+
	69	+ @svg backArrow {
	70	+ width: 14px
	71	+ height: 14px
	72	+ content: '<g stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 7h11M7 13L1 7l6-6"/></g>'
	73	+
	74	+ path {
	75	+ stroke: #979797
	76	+ }
	77	+
	78	+ -active {
	79	+ path {
	80	+ fill: #DDD
	81	+ }
	82	+ }
	83	+ }
	84	+ }
	85	+
	86	+ span.nav {
	87	+ display: inline-block
	88	+ a {
	89	+ padding: 4px 10px;
	90	+ border-radius: 3px;
	91	+ background: #f3f3f3;
	92	+ color: #656565;
	93	+ font-size: 120%;
	94	+ font-weight: 200;
	95	+ cursor: pointer;
	96	+ margin-left: 8px;
	97	+ text-decoration: none !important
	98	+
	99	+ :hover {
	100	+ color: black
	101	+ background: #E8E8E8
	102	+ }
	103	+
	104	+ -selected {
	105	+ background: #d2d2d2
	106	+ color: black
	107	+ :hover {
	108	+ background: #d2d2d2
	109	+ }
	110	+ }
	111	+
	112	+ -drop {
	113	+
	114	+ :after {
	115	+ background-image: svg(dropArrow)
	116	+ background-repeat: no-repeat;
	117	+ background-position: center right;
	118	+ width: 10px;
	119	+ height: 14px;
	120	+ display: inline-block;
	121	+ content: ' ';
	122	+ margin-left: 6px;
	123	+ margin-right: -6px;
	124	+ border-left: 1px solid #d2d2d2;
	125	+ padding-left: 5px;
	126	+ margin-bottom: -2px;
	127	+ }
	128	+ }
	129	+
	130	+ -add {
	131	+ border-color: #498849
	132	+ background-color: #255D24
	133	+ text-shadow: 1px 1px 1px #000
	134	+ color: white
	135	+
	136	+ :active {
	137	+ background-color: #1F331F !important
	138	+ }
	139	+
	140	+ :hover {
	141	+ background-color: #356D34
	142	+ border-color: #4CB54C
	143	+ }
	144	+ }
	145	+ }
	146	+ }
	147	+
	148	+ span.appTitle {
	149	+ flex: 1;
	150	+ text-align: center;
	151	+ font-size: 20px;
	152	+ color: #757575;
	153	+ letter-spacing: 1px;
	154	+ font-weight: 200;
	155	+ -webkit-app-region: drag;
	156	+ position: relative
	157	+
	158	+ span.title {
	159	+ visibility: hidden
	160	+ }
	161	+
	162	+ div.info {
	163	+ display: block
	164	+ position: absolute;
	165	+ top: 0;
	166	+ bottom: 0;
	167	+ left: 0;
	168	+ right: 0;
	169	+ background: white;
	170	+ margin-top: -3px;
	171	+ opacity: 1;
	172	+ transition: opacity 0.1s;
	173	+ max-height: 25px;
	174	+ padding: 0 10px;
	175	+ font-size: 13px;
	176	+ letter-spacing: 0;
	177	+ [hidden] {
	178	+ opacity: 0
	179	+ }
	180	+ }
	181	+ }
	182	+ }
	183	+
	184	+ div.info {
	185	+ a.message {
	186	+ display: block;
	187	+ padding: 10px;
	188	+ background: #deffde;
	189	+ transition: color 0.2s, background-color 0.2s;
	190	+ color: #217720;
	191	+
	192	+ a.ignore {
	193	+ float: right
	194	+ border-radius: 10px
	195	+ padding: 2px 5px
	196	+ margin-top: -2px
	197	+ :hover {
	198	+ text-decoration: none
	199	+ background: #c0c0c0
	200	+ color: white
	201	+ }
	202	+ }
	203	+
	204	+ :hover {
	205	+ text-decoration: none
	206	+ background: #c0ffae
	207	+ }
	208	+ }
	209	+
	210	+ div.status {
	211	+ padding: 5px
	212	+ background: #7c7c7c
	213	+ color: white
	214	+ (svg) {
	215	+ width: 20px
	216	+ height: 20px
	217	+ }
	218	+ }
	219	+
	220	+ [hidden] {
	221	+ display: block
	222	+ max-height: 0
	223	+ animation: none
	224	+ }
	225	+
	226	+ max-height: 100px
	227	+ box-shadow: 0 0 3px #616161
	228	+ overflow: hidden
	229	+ transition: 0.5s max-height
	230	+ animation: 0.5s slide-in
	231	+ position: relative
	232	+ z-index: 1
	233	+ }
	234	+
	235	+ div.main {
	236	+ flex: 1
	237	+ position: relative
	238	+
	239	+ div.view {
	240	+
	241	+ position: absolute
	242	+ top: 0
	243	+ bottom: 0
	244	+ left: 0
	245	+ right: 0
	246	+
	247	+ [hidden] {
	248	+ visibility: hidden
	249	+ }
	250	+
	251	+ display: flex
	252	+ flex-direction: column
	253	+
	254	+ div {
	255	+ -webkit-user-select: text
	256	+ }
	257	+ }
	258	+ }
	259	+
	260	+ div.bottom {
	261	+ position: relative
	262	+ box-shadow: 0 0 3px #222
	263	+ background: #222
	264	+ align-items: center
	265	+ display: flex
	266	+ padding: 5px
	267	+
	268	+ audio {
	269	+ color: #EEE
	270	+
	271	+ ::-webkit-media-controls-panel {
	272	+ background: transparent
	273	+ }
	274	+
	275	+ ::-webkit-media-controls-current-time-display {
	276	+ color: inherit
	277	+ }
	278	+
	279	+ width: 100%
	280	+ }
	281	+ }
	282	+}
	283	+
	284	+@keyframes slide-in {
	285	+ 0% {
	286	+ max-height: 0
	287	+ }
	288	+ 100% {
	289	+ max-height: 100px
	290	+ }
	291	+}
	292	+
	293	+@svg dropArrow {
	294	+ width: 12px
	295	+ height: 6px
	296	+ content: "<path d='M2,0 L10,0 L6,6 Z' />"
	297	+
	298	+ path {
	299	+ fill: #888
	300	+ }
	301	+
	302	+ -active {
	303	+ path {
	304	+ fill: #DDD
	305	+ }
	306	+ }
	307	+}

styles/light/markdown.mcssView
		@@ -1,0 +1,67 @@
	1	+Markdown {
	2	+ word-break: break-word
	3	+ (img) {
	4	+ -pending {
	5	+ border: 1px solid #DDD
	6	+ background-color: #EEE
	7	+ width: 120px
	8	+ height: 40px
	9	+ background-image: svg(fetching)
	10	+ background-position: center
	11	+ background-repeat: no-repeat
	12	+
	13	+ @svg fetching {
	14	+ width: 100px
	15	+ height: 20px
	16	+ content: '<text x='0' y='12'>Fetching image...</text>'
	17	+ text {
	18	+ font: caption
	19	+ font-size: 12px
	20	+ }
	21	+ }
	22	+ }
	23	+ }
	24	+
	25	+ (table) {
	26	+ margin: 10px 0
	27	+ border-collapse: collapse
	28	+ (th) {
	29	+ text-align: left
	30	+ border-bottom: 1px solid #DDD
	31	+ padding: 3px
	32	+ }
	33	+ (td) {
	34	+ padding: 3px
	35	+ }
	36	+ }
	37	+
	38	+ (blockquote) {
	39	+ margin: 1rem 0;
	40	+ padding: 5px 20px;
	41	+ border-left: 4px gainsboro solid;
	42	+ background: #fafafa;
	43	+ color: #7c7c7c;
	44	+ }
	45	+ (hr) {
	46	+ border: none;
	47	+ border-top: 1px solid #7e7e7e;
	48	+ }
	49	+ (pre) {
	50	+ overflow: auto;
	51	+ padding: 10px;
	52	+ background: #fbfbfb;
	53	+ border: 1px solid #EEE;
	54	+ max-height: 300px;
	55	+ }
	56	+ (ul) {
	57	+ (p) {
	58	+ margin: 0;
	59	+ }
	60	+ }
	61	+ (img.emoji) {
	62	+ width: 1.5em;
	63	+ height: 1.5em;
	64	+ align-content: center;
	65	+ margin-bottom: -0.3em;
	66	+ }
	67	+}

styles/light/message.mcssView
		@@ -1,0 +1,233 @@
	1	+Message {
	2	+ display: flex
	3	+ flex-direction: column
	4	+ background: white
	5	+ position: relative
	6	+ font-size: 120%
	7	+ line-height: 1.4
	8	+ flex-shrink: 0
	9	+
	10	+ (highlight) {
	11	+ background-color: yellow
	12	+ }
	13	+
	14	+ :focus {
	15	+ z-index: 1
	16	+ }
	17	+
	18	+ -data {
	19	+ header {
	20	+ div.main {
	21	+ font-size: 80%
	22	+ a.avatar {
	23	+ img {
	24	+ width: 25px
	25	+ }
	26	+ }
	27	+ }
	28	+ }
	29	+ (pre) {
	30	+ overflow: auto
	31	+ max-height: 200px
	32	+ }
	33	+ }
	34	+
	35	+ -mini {
	36	+ header {
	37	+ font-size: 100%
	38	+ margin-bottom: 15px
	39	+ div.main {
	40	+ a.avatar {
	41	+ img {
	42	+ width: 40px
	43	+ height: 40px
	44	+ }
	45	+ }
	46	+ }
	47	+ }
	48	+ }
	49	+
	50	+ -reply {
	51	+ header {
	52	+ font-size: 100%
	53	+ div.meta {
	54	+ a.channel {
	55	+ display: none;
	56	+ }
	57	+ span.private {
	58	+ (img) {
	59	+ width: 40px
	60	+ height: 40px
	61	+ }
	62	+ }
	63	+ }
	64	+ div.main {
	65	+ a.avatar {
	66	+ img {
	67	+ width: 40px
	68	+ height: 40px
	69	+ }
	70	+ }
	71	+ }
	72	+ }
	73	+ }
	74	+
	75	+ -new {
	76	+ box-shadow: 0 0 1px #ffc600;
	77	+ z-index: 1;
	78	+ }
	79	+
	80	+ header {
	81	+ font-size: 120%
	82	+ margin: 15px 20px 0
	83	+ display: flex
	84	+
	85	+ div.mini {
	86	+ flex: 1
	87	+ }
	88	+
	89	+ div.main {
	90	+ display: flex
	91	+ flex: 1
	92	+
	93	+ a.avatar {
	94	+ img {
	95	+ width: 50px
	96	+ height: 50px
	97	+ }
	98	+ }
	99	+
	100	+ div.main {
	101	+ div.name {
	102	+ a {
	103	+ color: #444
	104	+ font-weight: bold
	105	+ }
	106	+ }
	107	+ div.meta {
	108	+ font-size: 90%
	109	+ }
	110	+ margin-left: 10px
	111	+ }
	112	+ }
	113	+
	114	+ div.meta {
	115	+ display: flex;
	116	+ flex-direction: column-reverse;
	117	+ align-items: flex-end;
	118	+ justify-content: flex-end;
	119	+
	120	+ span.flag {
	121	+ width: 12px
	122	+ height: 12px
	123	+
	124	+ background-repeat: no-repeat
	125	+ background-position: center
	126	+ display: inline-block
	127	+ vertical-align: middle;
	128	+ margin-top: -3px;
	129	+
	130	+ -new {
	131	+ background-image: svg(new)
	132	+ }
	133	+
	134	+ @svg new {
	135	+ width: 12px
	136	+ height: 12px
	137	+ content: "<circle cx='6' stroke='none' fill='#ffcf04' cy='6' r='5' />"
	138	+ }
	139	+ }
	140	+
	141	+ em {
	142	+ display: inline-block
	143	+ padding: 4px
	144	+ }
	145	+
	146	+ a.channel {
	147	+ font-weight: bold;
	148	+ }
	149	+
	150	+ a.likes {
	151	+ color: #286bc3;
	152	+ font-size:90%;
	153	+ }
	154	+
	155	+ span.private {
	156	+ display: inline-block;
	157	+ margin: -3px -3px 3px 4px;
	158	+ border: 4px solid #525050;
	159	+ position: relative;
	160	+
	161	+ a {
	162	+ display: inline-block
	163	+
	164	+ img {
	165	+ margin: 0
	166	+ vertical-align: bottom
	167	+ border: none
	168	+ }
	169	+ }
	170	+
	171	+ :after {
	172	+ content: 'private';
	173	+ position: absolute;
	174	+ background: #525050;
	175	+ bottom: 0;
	176	+ left: -1px;
	177	+ font-size: 10px;
	178	+ padding: 2px 4px 0 2px;
	179	+ border-top-right-radius: 5px;
	180	+ color: white;
	181	+ font-weight: bold;
	182	+ pointer-events: none;
	183	+ white-space: nowrap
	184	+ }
	185	+ }
	186	+ }
	187	+ }
	188	+
	189	+ section {
	190	+ margin: 0
	191	+ padding: 0 20px
	192	+ (img) {
	193	+ max-width: 100%
	194	+ }
	195	+ }
	196	+
	197	+ a.backlink {
	198	+ display: block;
	199	+ border-top: 1px solid #EEE;
	200	+ padding: 10px 15px;
	201	+ background: #ffffff;
	202	+ color: #8f8f8f;
	203	+ margin-top: -1px;
	204	+ font-size: 9pt;
	205	+
	206	+ :hover {
	207	+ text-decoration: none
	208	+ color: #777
	209	+ }
	210	+ }
	211	+
	212	+ footer {
	213	+ margin: 5px 0 20px;
	214	+ padding: 0 20px
	215	+
	216	+ div.actions {
	217	+ a {
	218	+ opacity: 0.4
	219	+ transition: opacity 0.2s
	220	+ font-weight: bold
	221	+ color: #333
	222	+
	223	+ :hover {
	224	+ opacity: 1
	225	+ text-decoration: none;
	226	+ }
	227	+ }
	228	+ a + a {
	229	+ margin-left: 25px;
	230	+ }
	231	+ }
	232	+ }
	233	+}

styles/light/notifier.mcssView
		@@ -1,0 +1,24 @@
	1	+Notifier {
	2	+ padding: 10px;
	3	+ display: block;
	4	+ background: rgb(214, 228, 236);
	5	+ border-bottom: 1px solid rgb(187, 201, 210);
	6	+ text-align: center;
	7	+ animation: 0.5s slide-in;
	8	+
	9	+ :hover {
	10	+ background: rgb(220, 242, 255);
	11	+ }
	12	+
	13	+ position: relative
	14	+
	15	+ -loader {
	16	+ background: rgb(255, 239, 217);
	17	+ border-bottom: 1px solid rgb(228, 220, 195);
	18	+ color: #10100c !important;
	19	+
	20	+ :hover {
	21	+ background: rgb(245, 229, 207);
	22	+ }
	23	+ }
	24	+}

styles/light/page-heading.mcssView
		@@ -1,0 +1,9 @@
	1	+PageHeading {
	2	+ display: flex
	3	+ max-width: 700px;
	4	+ margin: 10px auto;
	5	+
	6	+ h1 {
	7	+ flex: 1
	8	+ }
	9	+}

styles/light/picker.mcssView
		@@ -1,0 +1,78 @@
	1	+Picker {
	2	+ a {
	3	+ padding: 6px;
	4	+ display: inline-block;
	5	+ background: #fff;
	6	+ margin: 3px;
	7	+ border: 1px solid #EEE;
	8	+ color: #222;
	9	+ vertical-align: top;
	10	+
	11	+ -add {
	12	+ padding: 0 5px
	13	+ font-size: 20px
	14	+ border-color: #DDD
	15	+ background: #EEE
	16	+ }
	17	+
	18	+ :hover {
	19	+ border-color: #deb250;
	20	+ color: #deb250;
	21	+ background: #faf3e8;
	22	+ text-decoration: none
	23	+ }
	24	+
	25	+ img {
	26	+ width: 50px
	27	+ height: 50px
	28	+ display: block
	29	+ }
	30	+
	31	+ -self {
	32	+ border-color: #b3d6bd;
	33	+ background: #fbfffb;
	34	+ color: #719a68;
	35	+ }
	36	+
	37	+ -assigned {
	38	+ padding: 4px;
	39	+ border: 2px solid #ffa800;
	40	+ box-shadow: 0px 1px 2px #ff8d00;
	41	+ color: #a8702a;
	42	+ font-weight: bold;
	43	+ }
	44	+ }
	45	+
	46	+ span.add {
	47	+ position: relative
	48	+ display: inline-block;
	49	+ border: 1px solid #DDD
	50	+ background: #EEE
	51	+ margin: 3px;
	52	+ color: #222;
	53	+ vertical-align: top;
	54	+ :hover {
	55	+ border-color: #deb250;
	56	+ color: #deb250;
	57	+ background: #faf3e8;
	58	+ }
	59	+ ::before {
	60	+ font-size: 30px;
	61	+ content: '+';
	62	+ position: absolute;
	63	+ top: 13px;
	64	+ left: 0;
	65	+ right: 0;
	66	+ text-align: center;
	67	+ }
	68	+ input[type="file"] {
	69	+ height: 62px
	70	+ width: 62px
	71	+ display: block
	72	+ cursor: pointer
	73	+ opacity: 0
	74	+ }
	75	+ }
	76	+
	77	+
	78	+}

styles/light/profile-editor.mcssView
		@@ -1,0 +1,24 @@
	1	+ProfileEditor {
	2	+ display: flex
	3	+ div.side {
	4	+ margin-right: 10px
	5	+ }
	6	+ div.main {
	7	+ flex: 1
	8	+ display: flex
	9	+ flex-direction: column
	10	+ input {
	11	+ border: 1px solid #CCC
	12	+ font-size: 150%
	13	+ padding: 10px
	14	+ }
	15	+ textarea {
	16	+ resize: vertical
	17	+ margin-top: 10px
	18	+ border: 1px solid #CCC
	19	+ padding: 10px
	20	+ font-size: 150%
	21	+ flex: 1
	22	+ }
	23	+ }
	24	+}

styles/light/profile-header.mcssView
		@@ -1,0 +1,36 @@
	1	+ProfileHeader {
	2	+ display: flex;
	3	+ width: 100%;
	4	+ max-width: 700px;
	5	+ margin: 20px auto;
	6	+
	7	+ div.image {
	8	+ width: 200px;
	9	+ max-height: 200px;
	10	+ padding: 5px;
	11	+ background: white;
	12	+ box-shadow: 0 0 10px #AAA;
	13	+ margin-right: 20px;
	14	+ img {
	15	+ width: 100%
	16	+ }
	17	+ }
	18	+
	19	+ div.main {
	20	+ flex: 1
	21	+ div.title {
	22	+ display: flex
	23	+ h1 {
	24	+ flex: 1
	25	+ }
	26	+ }
	27	+ section {
	28	+ -description {
	29	+ font-size: 120%
	30	+ max-height: 350px
	31	+ overflow: auto
	32	+ -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
	33	+ }
	34	+ }
	35	+ }
	36	+}

styles/light/profile-link.mcssView
		@@ -1,0 +1,4 @@
	1	+ProfileLink {
	2	+ font-weight: bold
	3	+ color: black
	4	+}

styles/light/profile-list.mcssView
		@@ -1,0 +1,78 @@
	1	+ProfileList {
	2	+ a.profile {
	3	+ display: flex;
	4	+ padding: 4px;
	5	+ font-size: 110%;
	6	+ margin: 4px 0;
	7	+ background: rgba(255, 255, 255, 0.74);
	8	+ border-radius: 5px;
	9	+ position: relative
	10	+ text-decoration: none
	11	+ transition: background-color 0.2s
	12	+
	13	+ background-repeat: no-repeat
	14	+ background-position: right
	15	+
	16	+ -following {
	17	+ background-image: svg(following)
	18	+ }
	19	+
	20	+ -connected {
	21	+ background-image: svg(connected)
	22	+ }
	23	+
	24	+ @svg connected {
	25	+ width: 20px
	26	+ height: 12px
	27	+ content: "<circle cx='6' stroke='none' fill='green' cy='6' r='5' />"
	28	+ }
	29	+
	30	+ @svg following {
	31	+ width: 20px
	32	+ height: 12px
	33	+ content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
	34	+ }
	35	+
	36	+ :hover {
	37	+ background-color: rgba(255, 255, 255, 0.4);
	38	+ }
	39	+
	40	+ div.avatar {
	41	+ img {
	42	+ width: 40px
	43	+ height: 40px
	44	+ display: block
	45	+ }
	46	+ }
	47	+
	48	+ div.main {
	49	+ display: flex
	50	+ flex-direction: column
	51	+ flex: 1
	52	+ margin-left: 10px
	53	+ justify-content: center
	54	+ min-width: 0px
	55	+ div.name {
	56	+ white-space: nowrap
	57	+ font-weight: bold
	58	+ font-size: 110%
	59	+ color: #636363
	60	+ -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0))
	61	+ }
	62	+ }
	63	+
	64	+ div.progress {
	65	+ display: flex
	66	+ flex-direction: column
	67	+ svg {
	68	+ transition: opacity 0.2s
	69	+ opacity: 0
	70	+ -pending {
	71	+ opacity: 1
	72	+ }
	73	+ width: 20px
	74	+ flex: 1
	75	+ }
	76	+ }
	77	+ }
	78	+}

styles/light/scroller.mcssView
		@@ -1,0 +1,17 @@
	1	+Scroller {
	2	+ display: flex
	3	+ flex-direction: column
	4	+
	5	+ overflow: auto
	6	+ width: 100%
	7	+ height: 100%
	8	+ min-height: 0px
	9	+
	10	+ div.wrapper {
	11	+ flex: 1
	12	+ width: 100%
	13	+ max-width: 700px
	14	+ margin-left: auto
	15	+ margin-right: auto
	16	+ }
	17	+}

styles/light/search-page.mcssView
		@@ -1,0 +1,7 @@
	1	+SearchPage {
	2	+ section.content {
	3	+ div.result {
	4	+ margin: 10px 0
	5	+ }
	6	+ }
	7	+}

styles/light/sheet.mcssView
		@@ -1,0 +1,43 @@
	1	+Sheet {
	2	+ position: fixed;
	3	+ max-height: 80vh;
	4	+ max-width: 700px;
	5	+ margin: auto;
	6	+ top: 38px;
	7	+ left: 0;
	8	+ right: 0;
	9	+ width: 80vw;
	10	+ background: #f8f8f8;
	11	+ border: 2px solid #9c9a9a;
	12	+ box-shadow: 0 0 40px rgba(0,0,0,0.5);
	13	+ border-bottom-left-radius: 4px;
	14	+ border-bottom-right-radius: 4px;
	15	+ display: flex
	16	+ flex-direction: column
	17	+ z-index: 50
	18	+
	19	+ section {
	20	+ overflow-y: auto
	21	+ flex: 1
	22	+ }
	23	+
	24	+ footer {
	25	+ flex-shrink: 0;
	26	+ min-height: 20px;
	27	+ display: flex;
	28	+ justify-content: flex-end;
	29	+ padding: 10px;
	30	+ position: relative
	31	+ border-top: 1px solid #DDD
	32	+
	33	+ div.info {
	34	+ flex: 1
	35	+ padding: 8px
	36	+ font-size: 13px
	37	+ }
	38	+
	39	+ button {
	40	+ margin-left: 10px
	41	+ }
	42	+ }
	43	+}

styles/light/split-view.mcssView
		@@ -1,0 +1,35 @@
	1	+SplitView {
	2	+ display: flex
	3	+ flex: 3
	4	+ div.main {
	5	+ display: flex
	6	+ flex-direction: column
	7	+ flex: 1
	8	+ overflow-y: auto
	9	+ }
	10	+ div.side {
	11	+ width: 280px;
	12	+ padding: 20px;
	13	+ background: linear-gradient(81deg, #d6ecff, rgb(248, 253, 253));
	14	+ border-right: 1px solid #dcdcdc;
	15	+ overflow-y: auto;
	16	+
	17	+ -right {
	18	+ border: none
	19	+ border-left: 1px solid #dcdcdc
	20	+ background: linear-gradient(100deg, #ffffff, #f9ecca);
	21	+ }
	22	+
	23	+ h2 {
	24	+ margin-top: 20px
	25	+ margin-bottom: 8px
	26	+ color: #527b90;
	27	+ text-shadow: 0px 0px 3px #fff;
	28	+ font-weight: normal;
	29	+ span.sub {
	30	+ font-weight: normal
	31	+ font-size: 90%
	32	+ }
	33	+ }
	34	+ }
	35	+}

styles/light/suggest-box.mcssView
		@@ -1,0 +1,50 @@
	1	+SuggestBox {
	2	+ width: max-content;
	3	+ max-height: 50vh;
	4	+ overflow-y: auto;
	5	+ background-color: #fff;
	6	+ border: 1px gainsboro solid;
	7	+ z-index: 1000
	8	+
	9	+ padding: .2rem .5rem;
	10	+ margin-top: .35rem;
	11	+
	12	+ ul {
	13	+ list-style-type: none;
	14	+ padding: 0;
	15	+
	16	+ li {
	17	+ display: flex;
	18	+ align-items: center;
	19	+
	20	+ padding-right: .2rem;
	21	+ margin-bottom: .2rem;
	22	+ cursor: pointer
	23	+
	24	+ img {
	25	+ height: 36px;
	26	+ width: 36px;
	27	+ padding: .2rem;
	28	+ }
	29	+
	30	+ strong {
	31	+ flex-grow: 1;
	32	+ margin-left: .5rem;
	33	+ font-weight: 300;
	34	+ }
	35	+
	36	+ small {
	37	+ font-family: monospace;
	38	+ margin-left: .5rem;
	39	+ padding-right: .2rem;
	40	+ font-size: 1rem;
	41	+ }
	42	+ }
	43	+
	44	+ li.selected {
	45	+ color: #fff;
	46	+ background: #0caaf9;
	47	+ }
	48	+ }
	49	+
	50	+}

styles/light/thread.mcssView
		@@ -1,0 +1,24 @@
	1	+Thread {
	2	+ flex: 1
	3	+ max-width: 700px
	4	+ width: 100%
	5	+ margin: 10px auto
	6	+
	7	+ div.messages {
	8	+ div + div {
	9	+ border-top: 1px solid #EEE
	10	+ }
	11	+
	12	+ a.full {
	13	+ display: block;
	14	+ padding: 10px;
	15	+ background: #daecd6;
	16	+ border-top: 1px solid #bbc9d2;
	17	+ border-bottom: 1px solid #bbc9d2;
	18	+ text-align: center;
	19	+ color: #759053;
	20	+ }
	21	+
	22	+ box-shadow: 0 2px 4px rgba(0,0,0,0.1)
	23	+ }
	24	+}

styles/light/toggle-button.mcssView
		@@ -1,0 +1,42 @@
	1	+ToggleButton {
	2	+ font-size: 90%;
	3	+ background: rgb(112, 112, 112);
	4	+ border: 2px solid #313131;
	5	+ transition: opacity 0.2s;
	6	+ opacity: 0.6;
	7	+ padding: 6px 12px;
	8	+ color: white;
	9	+ border-radius: 4px;
	10	+ font-weight: bold;
	11	+ text-decoration: none;
	12	+ display: block;
	13	+
	14	+ -subscribe {
	15	+ background-color: rgb(88, 171, 204);
	16	+ border-color: #20699c;
	17	+ }
	18	+
	19	+ -unsubscribe {
	20	+ background-repeat: no-repeat
	21	+ background-position: right
	22	+ background-image: svg(subscribed)
	23	+ padding-right: 25px
	24	+ }
	25	+
	26	+ -disabled {
	27	+ cursor: default
	28	+ opacity: 0.4 !important
	29	+ text-decoration: none !important
	30	+ }
	31	+
	32	+ :hover {
	33	+ opacity: 1
	34	+ text-decoration: none
	35	+ }
	36	+
	37	+ @svg subscribed {
	38	+ width: 20px
	39	+ height: 12px
	40	+ content: "<circle cx='6' stroke='#FFF' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#FFF'/>"
	41	+ }
	42	+}

styles/avatar.mcssView
		@@ -1,4 +1,0 @@
1		-Avatar {
2		- background-image: linear-gradient(172deg, rgb(247, 247, 247), rgba(0,0,0,0))
3		- width: 45px
4		-}

styles/base.mcssView
		@@ -1,99 +1,0 @@
1		-html, body {
2		- background: #f5f5f5
3		- margin: 0
4		- font: caption
5		- overflow: hidden
6		- height: 100%
7		- font-size: 12px
8		- -webkit-user-select: none
9		- color: #2b2b2b
10		-}
11		-
12		-body {
13		- display: flex
14		- flex-direction: column
15		- line-height: 1.2
16		-}
17		-
18		-h1 {
19		- font-size: 200%
20		- margin: 4px 0
21		- font-weight: normal
22		- flex: 1
23		-}
24		-
25		-select {
26		- font-size: 80%
27		- display: inline-block
28		- padding: 2px 4px
29		- height: 18px
30		- border: 1px solid #A9A9A9
31		- background: #666 svg(dropArrow) no-repeat right
32		- -webkit-appearance: none
33		- color: #FFF
34		- padding-right: 12px
35		- border-radius: 0
36		-
37		- :hover {
38		- background-image: svg(dropArrow -active)
39		- }
40		-
41		- @svg dropArrow {
42		- width: 12px
43		- height: 6px
44		- content: "<path d='M2,0 L10,0 L6,6 Z' />"
45		-
46		- path {
47		- fill: #888
48		- }
49		-
50		- -active {
51		- path {
52		- fill: #DDD
53		- }
54		- }
55		- }
56		-}
57		-
58		-input {
59		- [type='text'] {
60		- font-size: 80%
61		- display: inline-block
62		- padding: 2px 4px
63		- height: 18px
64		- border: 1px solid #A9A9A9
65		- background: #333
66		- color: #FFF
67		- padding-right: 12px
68		- border-radius: 0
69		- }
70		-}
71		-
72		-::-webkit-file-upload-button {
73		- font-family: inherit
74		-}
75		-
76		-a {
77		- color: #286bc3
78		- text-decoration: none
79		-
80		- code {
81		- color: #8EC1FC
82		- }
83		-
84		- :hover {
85		- text-decoration: underline
86		- }
87		-}
88		-
89		-* + h1 {
90		- margin-top: 16px
91		-}
92		-
93		-* {
94		- box-sizing:border-box
95		-}
96		-
97		-input, textarea, keygen, select, button {
98		- font-family: '.SFNSText-Regular', sans-serif
99		-}

styles/button.mcssView
		@@ -1,62 +1,0 @@
1		-button {
2		- color: #5f5f5f;
3		- padding: 3px 6px;
4		- background: white;
5		- border: 2px solid #DDD;
6		- border-radius: 4px;
7		- font-size: 130%
8		- cursor: pointer
9		-
10		- :hover {
11		- color: black
12		- border-color: #8B8B8B
13		- }
14		-
15		- :focus {
16		- outline: 1px dotted rgba(255, 255, 255, 0.45)
17		- }
18		-
19		- :active {
20		- background-color: #DDD !important
21		- }
22		-
23		- [disabled] {
24		- color: #999797 !important;
25		- background: #e3e2e2 !important;
26		- border-color: #DDD !important;
27		- }
28		-
29		- -add {
30		- color: #6a7e6a;
31		- background-color: #ecfff0;
32		- border-color: #8ba289;
33		- }
34		-
35		- -pub {
36		- color: #6a7e6a;
37		- background-color: #ecfff0;
38		- border-color: #8ba289;
39		- }
40		-
41		- -save {
42		- border-color: #a7c7a6;
43		- background-color: #eeffee;
44		- color: #255D24;
45		-
46		- :active {
47		- background-color: #c6e0c5 !important
48		- }
49		-
50		- :hover {
51		- border-color: #3ac737;
52		- background-color: #d4ffd4;
53		- color: #21921f;
54		- }
55		- }
56		-
57		- -full {
58		- display: block
59		- width: 100%
60		- margin: 15px 0
61		- }
62		-}

styles/channel-list.mcssView
		@@ -1,79 +1,0 @@
1		-ChannelList {
2		- a.channel {
3		- display: flex;
4		- padding: 8px 10px;
5		- font-size: 110%;
6		- margin: 4px 0;
7		- background: rgba(255, 255, 255, 0.66);
8		- color: #333;
9		- border-radius: 5px;
10		- position: relative
11		- transition: background-color 0.2s
12		- max-width: 250px;
13		-
14		- background-repeat: no-repeat
15		- background-position: right
16		-
17		- -more {
18		- color: #658aaf;
19		- background: rgb(255, 255, 255);
20		- }
21		-
22		- -subscribed {
23		- background-image: svg(subscribed)
24		- span.name {
25		- font-weight: bold
26		- }
27		- }
28		-
29		- @svg subscribed {
30		- width: 20px
31		- height: 12px
32		- content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
33		- }
34		-
35		- :hover {
36		- background: rgba(255, 255, 255, 0.4);
37		- text-decoration: none;
38		- a {
39		- transition: opacity 0.05s
40		- opacity: 1
41		- }
42		- }
43		-
44		- span.name {
45		- flex: 1
46		- white-space: nowrap;
47		- min-width: 0;
48		- }
49		-
50		- a {
51		- display: inline
52		- opacity: 0;
53		- font-size: 80%;
54		- background-color: rgb(112, 112, 112);
55		- transition: opacity 0.2s, background-color 0.4s
56		- padding: 9px 10px;
57		- color: white;
58		- border-radius: 4px;
59		- font-weight: bold;
60		- margin: -8px -10px -8px 4px;
61		- border-top-left-radius: 0;
62		- border-bottom-left-radius: 0;
63		- border-left: 2px solid rgba(255, 255, 255, 0.9);
64		- text-decoration: none
65		-
66		- -subscribe {
67		- :hover {
68		- background-color: rgb(112, 184, 212);
69		- }
70		- }
71		-
72		- -unsubscribe {
73		- :hover {
74		- background: rgb(212, 112, 112);
75		- }
76		- }
77		- }
78		- }
79		-}

styles/compose.mcssView
		@@ -1,97 +1,0 @@
1		-Compose {
2		- display: flex
3		- flex-direction: column
4		- flex-shrink: 0
5		- max-width: 700px
6		- width: 100%
7		-
8		- margin: 20px auto;
9		- border: 1px solid gainsboro
10		- background: white
11		-
12		- textarea {
13		- resize: vertical
14		- font-size: 120%
15		- background: transparent
16		- border: none
17		- padding: 10px
18		- [disabled] {
19		- color: #AAA;
20		- background: #ebf7ee;
21		- }
22		- }
23		-
24		- section.actions {
25		- display: flex
26		- flex-direction: row
27		- align-items: baseline
28		- justify-content: space-between
29		- background: #fafafa
30		-
31		- padding: .4rem
32		-
33		- input[type="file"] {
34		- padding: .5rem 0
35		-
36		- width: 95px
37		- height: 29px
38		-
39		- color: transparent
40		-
41		- :hover {
42		- ::before {
43		- color: black
44		- border-color: #8B8B8B
45		- }
46		- }
47		-
48		- ::-webkit-file-upload-button {
49		- display: none
50		- }
51		-
52		- ::before {
53		- color: #5f5f5f;
54		- padding: 3px 6px;
55		- background: white;
56		- border: 2px solid #DDD;
57		- border-radius: 4px;
58		- cursor: pointer
59		- padding-top: .3rem
60		- content: '📎 Attach File'
61		- font-size: 1rem
62		- outline: none
63		- white-space: nowrap
64		- -webkit-user-select: none
65		- }
66		-
67		- :active, :focus {
68		- outline: none
69		- box-shadow: none
70		- }
71		- }
72		- }
73		-
74		- -expanded {
75		- textarea {
76		- height: 200px
77		- transition: height .15s ease-out
78		- border-bottom: 1px solid gainsboro
79		- }
80		-
81		- section.actions {
82		- display: flex
83		- }
84		- }
85		-
86		- -contracted {
87		- textarea {
88		- height: 50px
89		- transition: height .15s ease-in
90		- }
91		-
92		- section.actions {
93		- display: none
94		- }
95		- }
96		-
97		-}

styles/feed-event.mcssView
		@@ -1,56 +1,0 @@
1		-FeedEvent {
2		- display: flex
3		- flex-direction: column
4		- background: white
5		- box-shadow: 0 2px 4px rgba(0,0,0,0.1)
6		- max-width: 700px
7		- width: 100%
8		- margin: 25px auto
9		-
10		- :empty {
11		- margin-bottom: -25px
12		- }
13		-
14		- -new {
15		- box-shadow: 0px 0px 2px #ffc800;
16		- background: #fffdf7;
17		- }
18		-
19		- div + div {
20		- border-top: 1px solid #EEE
21		- }
22		-
23		- div {
24		- flex: 1
25		- }
26		-
27		- a.full {
28		- display: block;
29		- padding: 10px;
30		- background: #f3fafd;
31		- border-top: 1px solid #bbc9d2;
32		- border-bottom: 1px solid #bbc9d2;
33		- text-align: center;
34		- }
35		-
36		- div.replies {
37		- font-size: 100%
38		- display: flex
39		- flex-direction: column
40		- div {
41		- flex: 1
42		- margin: 0
43		- }
44		-
45		- div + div {
46		- border-top: 1px solid #EEE
47		- }
48		- }
49		-
50		- div.meta {
51		- font-size: 100%
52		- padding: 10px 20px
53		- opacity: 0.8
54		- }
55		-
56		-}

styles/gathering-card.mcssView
		@@ -1,58 +1,0 @@
1		-GatheringCard {
2		- border: 1px solid #DDD
3		- padding: 10px
4		- margin-bottom: 10px
5		-
6		- a.image {
7		- display: block
8		- margin-top: 10px
9		- height: 300px
10		- background-size: cover
11		- background-repeat: no-repeat
12		- background-position: center
13		- }
14		-
15		- div.attending {
16		- margin: 10px 0
17		- padding-top: 10px;
18		-
19		- div.title {
20		- font-size: 90%;
21		- color: #555;
22		- font-weight: bold;
23		- margin-bottom: 10px;
24		- }
25		- div.attendees {
26		- margin: 0 5px
27		- a {
28		- margin-right: 4px
29		- img {
30		- height: 45px
31		- width: 45px
32		- }
33		- }
34		- }
35		- div.actions {
36		- margin-top: 10px
37		- button + button {
38		- margin-left: 5px
39		- }
40		- }
41		- }
42		-
43		- div.title {
44		- font-size: 200%
45		- button {
46		- float: right;
47		- font-size: 60%;
48		- }
49		- }
50		- div.time {
51		- color: #555
52		- font-size: 120%
53		- }
54		- div.description {
55		- border-top: 3px solid #CCC;
56		- margin-top: 10px;
57		- }
58		-}

styles/gathering-editor.mcssView
		@@ -1,35 +1,0 @@
1		-GatheringEditor {
2		- display: flex
3		- flex-direction: column
4		- input.date {
5		- background: white;
6		- font-size: 150%;
7		- color: #333;
8		- padding: 10px;
9		- height: auto;
10		- margin-top: 10px;
11		- }
12		- div.banner {
13		- margin-top: 10px
14		- border: 1px solid #AAA
15		- box-shadow: none
16		- height: 250px
17		- width: 100%
18		- background-position: center
19		- background-repeat: no-repeat
20		- background-size: cover
21		- }
22		- input {
23		- border: 1px solid #CCC
24		- font-size: 150%
25		- padding: 10px
26		- }
27		- textarea {
28		- resize: vertical
29		- margin-top: 10px
30		- border: 1px solid #CCC
31		- padding: 10px
32		- font-size: 120%
33		- flex: 1
34		- }
35		-}

styles/image-input.mcssView
		@@ -1,43 +1,0 @@
1		-ImageInput {
2		- position: relative
3		- width: 200px;
4		- padding: 5px;
5		- background: white;
6		- box-shadow: 0 0 10px #AAA;
7		- transition: box-shadow 0.2s
8		-
9		- img {
10		- width: 100%
11		- background-image: linear-gradient(172deg, rgb(247, 247, 247), rgba(0,0,0,0))
12		- }
13		- input {
14		- cursor: pointer
15		- opacity: 0
16		- position: absolute
17		- width: 100%
18		- height: 100%
19		- top: 0
20		- left: 0
21		- }
22		-
23		- span {
24		- position: absolute
25		- left: 0
26		- right: 0
27		- bottom: 0
28		- margin: 15px
29		- background: #444
30		- padding: 4px 8px
31		- border-radius: 5px
32		- transition: opacity 0.2s
33		- opacity: 0.5
34		- color: white
35		- }
36		-
37		- :hover {
38		- box-shadow: 0 0 10px #393939;
39		- span {
40		- opacity: 1
41		- }
42		- }
43		-}

styles/loading.mcssView
		@@ -1,92 +1,0 @@
1		-Loading {
2		- height: 25%
3		- display: flex
4		- align-items: center
5		- justify-content: center
6		- whitespace: no-wrap
7		-
8		- span.info {
9		- overflow: hidden
10		- white-space: nowrap
11		- text-overflow: ellipsis
12		- }
13		-
14		- -inline {
15		- height: 16px
16		- width: 16px
17		- display: inline-block
18		- margin: -3px 3px
19		-
20		- ::before {
21		- display: block
22		- height: 16px
23		- width: 16px
24		- }
25		- }
26		-
27		- -small {
28		- ::before {
29		- height: 30px
30		- width: 30px
31		- }
32		- }
33		-
34		- -large {
35		- height: 25vh
36		- ::before {
37		- height: 100px
38		- width: 100px
39		- }
40		- ::after {
41		- color: #CCC;
42		- content: 'Loading...'
43		- font-size: 200%
44		- }
45		- }
46		-
47		- -search {
48		- height: 200px
49		-
50		- ::before {
51		- height: 100px
52		- width: 100px
53		- }
54		- ::after {
55		- color: #CCC;
56		- content: 'Seaching...'
57		- font-size: 200%
58		- }
59		- }
60		-
61		- ::before {
62		- content: ' '
63		- height: 50px
64		- width: 50px
65		- background-image: svg(waitingIcon)
66		- background-repeat: no-repeat
67		- background-position: center
68		- background-size: contain
69		- animation: spin 3s infinite linear
70		- }
71		-}
72		-
73		-@svg waitingIcon {
74		- width: 30px
75		- height: 30px
76		- content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />"
77		-
78		- circle {
79		- stroke: #CCC
80		- stroke-width: 3px
81		- fill: none
82		- }
83		-}
84		-
85		-@keyframes spin {
86		- 0% {
87		- transform: rotate(0deg);
88		- }
89		- 100% {
90		- transform: rotate(360deg);
91		- }
92		-}

styles/main-window.mcssView
		@@ -1,307 +1,0 @@
1		-MainWindow {
2		- height: 100%
3		- display: flex
4		- flex-direction: column
5		-
6		- -darwin {
7		- div.top {
8		- padding-left: 70px
9		- span.appTitle {
10		- span.title {
11		- visibility: visible
12		- }
13		- }
14		- }
15		- }
16		-
17		- div.top {
18		- display: flex;
19		- align-items: center;
20		- background: #fff;
21		- padding: 6px;
22		- border-bottom: 2px solid #e4edff;
23		- box-shadow: 0 0 3px #7f7f7f;
24		- position: relative;
25		- z-index: 100
26		-
27		- span {
28		- input.search {
29		- padding: 4px 8px;
30		- border-radius: 3px;
31		- border: 0 none;
32		- background: #ffffff;
33		- color: #656565;
34		- font-size: 120%;
35		- width: 180px;
36		- box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
37		- :focus {
38		- outline: 0;
39		- box-shadow: inset 0 0 0px 1px #286bc3
40		- }
41		- }
42		- }
43		-
44		- span.history {
45		- padding-left: 6px
46		- height: 26px;
47		- display: inline-block
48		- a {
49		- cursor: pointer;
50		- text-decoration: none !important
51		- display: inline-block
52		- width: 28px
53		- height: 100%
54		- border-radius: 2px
55		- background: svg(backArrow) no-repeat center
56		- opacity: 0.4
57		- -active {
58		- opacity: 1
59		- }
60		- :hover {
61		- background-color: #E8E8E8
62		- }
63		- }
64		-
65		- a + a {
66		- transform: rotate(180deg)
67		- }
68		-
69		- @svg backArrow {
70		- width: 14px
71		- height: 14px
72		- content: '<g stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 7h11M7 13L1 7l6-6"/></g>'
73		-
74		- path {
75		- stroke: #979797
76		- }
77		-
78		- -active {
79		- path {
80		- fill: #DDD
81		- }
82		- }
83		- }
84		- }
85		-
86		- span.nav {
87		- display: inline-block
88		- a {
89		- padding: 4px 10px;
90		- border-radius: 3px;
91		- background: #f3f3f3;
92		- color: #656565;
93		- font-size: 120%;
94		- font-weight: 200;
95		- cursor: pointer;
96		- margin-left: 8px;
97		- text-decoration: none !important
98		-
99		- :hover {
100		- color: black
101		- background: #E8E8E8
102		- }
103		-
104		- -selected {
105		- background: #d2d2d2
106		- color: black
107		- :hover {
108		- background: #d2d2d2
109		- }
110		- }
111		-
112		- -drop {
113		-
114		- :after {
115		- background-image: svg(dropArrow)
116		- background-repeat: no-repeat;
117		- background-position: center right;
118		- width: 10px;
119		- height: 14px;
120		- display: inline-block;
121		- content: ' ';
122		- margin-left: 6px;
123		- margin-right: -6px;
124		- border-left: 1px solid #d2d2d2;
125		- padding-left: 5px;
126		- margin-bottom: -2px;
127		- }
128		- }
129		-
130		- -add {
131		- border-color: #498849
132		- background-color: #255D24
133		- text-shadow: 1px 1px 1px #000
134		- color: white
135		-
136		- :active {
137		- background-color: #1F331F !important
138		- }
139		-
140		- :hover {
141		- background-color: #356D34
142		- border-color: #4CB54C
143		- }
144		- }
145		- }
146		- }
147		-
148		- span.appTitle {
149		- flex: 1;
150		- text-align: center;
151		- font-size: 20px;
152		- color: #757575;
153		- letter-spacing: 1px;
154		- font-weight: 200;
155		- -webkit-app-region: drag;
156		- position: relative
157		-
158		- span.title {
159		- visibility: hidden
160		- }
161		-
162		- div.info {
163		- display: block
164		- position: absolute;
165		- top: 0;
166		- bottom: 0;
167		- left: 0;
168		- right: 0;
169		- background: white;
170		- margin-top: -3px;
171		- opacity: 1;
172		- transition: opacity 0.1s;
173		- max-height: 25px;
174		- padding: 0 10px;
175		- font-size: 13px;
176		- letter-spacing: 0;
177		- [hidden] {
178		- opacity: 0
179		- }
180		- }
181		- }
182		- }
183		-
184		- div.info {
185		- a.message {
186		- display: block;
187		- padding: 10px;
188		- background: #deffde;
189		- transition: color 0.2s, background-color 0.2s;
190		- color: #217720;
191		-
192		- a.ignore {
193		- float: right
194		- border-radius: 10px
195		- padding: 2px 5px
196		- margin-top: -2px
197		- :hover {
198		- text-decoration: none
199		- background: #c0c0c0
200		- color: white
201		- }
202		- }
203		-
204		- :hover {
205		- text-decoration: none
206		- background: #c0ffae
207		- }
208		- }
209		-
210		- div.status {
211		- padding: 5px
212		- background: #7c7c7c
213		- color: white
214		- (svg) {
215		- width: 20px
216		- height: 20px
217		- }
218		- }
219		-
220		- [hidden] {
221		- display: block
222		- max-height: 0
223		- animation: none
224		- }
225		-
226		- max-height: 100px
227		- box-shadow: 0 0 3px #616161
228		- overflow: hidden
229		- transition: 0.5s max-height
230		- animation: 0.5s slide-in
231		- position: relative
232		- z-index: 1
233		- }
234		-
235		- div.main {
236		- flex: 1
237		- position: relative
238		-
239		- div.view {
240		-
241		- position: absolute
242		- top: 0
243		- bottom: 0
244		- left: 0
245		- right: 0
246		-
247		- [hidden] {
248		- visibility: hidden
249		- }
250		-
251		- display: flex
252		- flex-direction: column
253		-
254		- div {
255		- -webkit-user-select: text
256		- }
257		- }
258		- }
259		-
260		- div.bottom {
261		- position: relative
262		- box-shadow: 0 0 3px #222
263		- background: #222
264		- align-items: center
265		- display: flex
266		- padding: 5px
267		-
268		- audio {
269		- color: #EEE
270		-
271		- ::-webkit-media-controls-panel {
272		- background: transparent
273		- }
274		-
275		- ::-webkit-media-controls-current-time-display {
276		- color: inherit
277		- }
278		-
279		- width: 100%
280		- }
281		- }
282		-}
283		-
284		-@keyframes slide-in {
285		- 0% {
286		- max-height: 0
287		- }
288		- 100% {
289		- max-height: 100px
290		- }
291		-}
292		-
293		-@svg dropArrow {
294		- width: 12px
295		- height: 6px
296		- content: "<path d='M2,0 L10,0 L6,6 Z' />"
297		-
298		- path {
299		- fill: #888
300		- }
301		-
302		- -active {
303		- path {
304		- fill: #DDD
305		- }
306		- }
307		-}

styles/markdown.mcssView
		@@ -1,67 +1,0 @@
1		-Markdown {
2		- word-break: break-word
3		- (img) {
4		- -pending {
5		- border: 1px solid #DDD
6		- background-color: #EEE
7		- width: 120px
8		- height: 40px
9		- background-image: svg(fetching)
10		- background-position: center
11		- background-repeat: no-repeat
12		-
13		- @svg fetching {
14		- width: 100px
15		- height: 20px
16		- content: '<text x='0' y='12'>Fetching image...</text>'
17		- text {
18		- font: caption
19		- font-size: 12px
20		- }
21		- }
22		- }
23		- }
24		-
25		- (table) {
26		- margin: 10px 0
27		- border-collapse: collapse
28		- (th) {
29		- text-align: left
30		- border-bottom: 1px solid #DDD
31		- padding: 3px
32		- }
33		- (td) {
34		- padding: 3px
35		- }
36		- }
37		-
38		- (blockquote) {
39		- margin: 1rem 0;
40		- padding: 5px 20px;
41		- border-left: 4px gainsboro solid;
42		- background: #fafafa;
43		- color: #7c7c7c;
44		- }
45		- (hr) {
46		- border: none;
47		- border-top: 1px solid #7e7e7e;
48		- }
49		- (pre) {
50		- overflow: auto;
51		- padding: 10px;
52		- background: #fbfbfb;
53		- border: 1px solid #EEE;
54		- max-height: 300px;
55		- }
56		- (ul) {
57		- (p) {
58		- margin: 0;
59		- }
60		- }
61		- (img.emoji) {
62		- width: 1.5em;
63		- height: 1.5em;
64		- align-content: center;
65		- margin-bottom: -0.3em;
66		- }
67		-}

styles/message.mcssView
		@@ -1,233 +1,0 @@
1		-Message {
2		- display: flex
3		- flex-direction: column
4		- background: white
5		- position: relative
6		- font-size: 120%
7		- line-height: 1.4
8		- flex-shrink: 0
9		-
10		- (highlight) {
11		- background-color: yellow
12		- }
13		-
14		- :focus {
15		- z-index: 1
16		- }
17		-
18		- -data {
19		- header {
20		- div.main {
21		- font-size: 80%
22		- a.avatar {
23		- img {
24		- width: 25px
25		- }
26		- }
27		- }
28		- }
29		- (pre) {
30		- overflow: auto
31		- max-height: 200px
32		- }
33		- }
34		-
35		- -mini {
36		- header {
37		- font-size: 100%
38		- margin-bottom: 15px
39		- div.main {
40		- a.avatar {
41		- img {
42		- width: 40px
43		- height: 40px
44		- }
45		- }
46		- }
47		- }
48		- }
49		-
50		- -reply {
51		- header {
52		- font-size: 100%
53		- div.meta {
54		- a.channel {
55		- display: none;
56		- }
57		- span.private {
58		- (img) {
59		- width: 40px
60		- height: 40px
61		- }
62		- }
63		- }
64		- div.main {
65		- a.avatar {
66		- img {
67		- width: 40px
68		- height: 40px
69		- }
70		- }
71		- }
72		- }
73		- }
74		-
75		- -new {
76		- box-shadow: 0 0 1px #ffc600;
77		- z-index: 1;
78		- }
79		-
80		- header {
81		- font-size: 120%
82		- margin: 15px 20px 0
83		- display: flex
84		-
85		- div.mini {
86		- flex: 1
87		- }
88		-
89		- div.main {
90		- display: flex
91		- flex: 1
92		-
93		- a.avatar {
94		- img {
95		- width: 50px
96		- height: 50px
97		- }
98		- }
99		-
100		- div.main {
101		- div.name {
102		- a {
103		- color: #444
104		- font-weight: bold
105		- }
106		- }
107		- div.meta {
108		- font-size: 90%
109		- }
110		- margin-left: 10px
111		- }
112		- }
113		-
114		- div.meta {
115		- display: flex;
116		- flex-direction: column-reverse;
117		- align-items: flex-end;
118		- justify-content: flex-end;
119		-
120		- span.flag {
121		- width: 12px
122		- height: 12px
123		-
124		- background-repeat: no-repeat
125		- background-position: center
126		- display: inline-block
127		- vertical-align: middle;
128		- margin-top: -3px;
129		-
130		- -new {
131		- background-image: svg(new)
132		- }
133		-
134		- @svg new {
135		- width: 12px
136		- height: 12px
137		- content: "<circle cx='6' stroke='none' fill='#ffcf04' cy='6' r='5' />"
138		- }
139		- }
140		-
141		- em {
142		- display: inline-block
143		- padding: 4px
144		- }
145		-
146		- a.channel {
147		- font-weight: bold;
148		- }
149		-
150		- a.likes {
151		- color: #286bc3;
152		- font-size:90%;
153		- }
154		-
155		- span.private {
156		- display: inline-block;
157		- margin: -3px -3px 3px 4px;
158		- border: 4px solid #525050;
159		- position: relative;
160		-
161		- a {
162		- display: inline-block
163		-
164		- img {
165		- margin: 0
166		- vertical-align: bottom
167		- border: none
168		- }
169		- }
170		-
171		- :after {
172		- content: 'private';
173		- position: absolute;
174		- background: #525050;
175		- bottom: 0;
176		- left: -1px;
177		- font-size: 10px;
178		- padding: 2px 4px 0 2px;
179		- border-top-right-radius: 5px;
180		- color: white;
181		- font-weight: bold;
182		- pointer-events: none;
183		- white-space: nowrap
184		- }
185		- }
186		- }
187		- }
188		-
189		- section {
190		- margin: 0
191		- padding: 0 20px
192		- (img) {
193		- max-width: 100%
194		- }
195		- }
196		-
197		- a.backlink {
198		- display: block;
199		- border-top: 1px solid #EEE;
200		- padding: 10px 15px;
201		- background: #ffffff;
202		- color: #8f8f8f;
203		- margin-top: -1px;
204		- font-size: 9pt;
205		-
206		- :hover {
207		- text-decoration: none
208		- color: #777
209		- }
210		- }
211		-
212		- footer {
213		- margin: 5px 0 20px;
214		- padding: 0 20px
215		-
216		- div.actions {
217		- a {
218		- opacity: 0.4
219		- transition: opacity 0.2s
220		- font-weight: bold
221		- color: #333
222		-
223		- :hover {
224		- opacity: 1
225		- text-decoration: none;
226		- }
227		- }
228		- a + a {
229		- margin-left: 25px;
230		- }
231		- }
232		- }
233		-}

styles/notifier.mcssView
		@@ -1,24 +1,0 @@
1		-Notifier {
2		- padding: 10px;
3		- display: block;
4		- background: rgb(214, 228, 236);
5		- border-bottom: 1px solid rgb(187, 201, 210);
6		- text-align: center;
7		- animation: 0.5s slide-in;
8		-
9		- :hover {
10		- background: rgb(220, 242, 255);
11		- }
12		-
13		- position: relative
14		-
15		- -loader {
16		- background: rgb(255, 239, 217);
17		- border-bottom: 1px solid rgb(228, 220, 195);
18		- color: #10100c !important;
19		-
20		- :hover {
21		- background: rgb(245, 229, 207);
22		- }
23		- }
24		-}

styles/page-heading.mcssView
		@@ -1,9 +1,0 @@
1		-PageHeading {
2		- display: flex
3		- max-width: 700px;
4		- margin: 10px auto;
5		-
6		- h1 {
7		- flex: 1
8		- }
9		-}

styles/picker.mcssView
		@@ -1,78 +1,0 @@
1		-Picker {
2		- a {
3		- padding: 6px;
4		- display: inline-block;
5		- background: #fff;
6		- margin: 3px;
7		- border: 1px solid #EEE;
8		- color: #222;
9		- vertical-align: top;
10		-
11		- -add {
12		- padding: 0 5px
13		- font-size: 20px
14		- border-color: #DDD
15		- background: #EEE
16		- }
17		-
18		- :hover {
19		- border-color: #deb250;
20		- color: #deb250;
21		- background: #faf3e8;
22		- text-decoration: none
23		- }
24		-
25		- img {
26		- width: 50px
27		- height: 50px
28		- display: block
29		- }
30		-
31		- -self {
32		- border-color: #b3d6bd;
33		- background: #fbfffb;
34		- color: #719a68;
35		- }
36		-
37		- -assigned {
38		- padding: 4px;
39		- border: 2px solid #ffa800;
40		- box-shadow: 0px 1px 2px #ff8d00;
41		- color: #a8702a;
42		- font-weight: bold;
43		- }
44		- }
45		-
46		- span.add {
47		- position: relative
48		- display: inline-block;
49		- border: 1px solid #DDD
50		- background: #EEE
51		- margin: 3px;
52		- color: #222;
53		- vertical-align: top;
54		- :hover {
55		- border-color: #deb250;
56		- color: #deb250;
57		- background: #faf3e8;
58		- }
59		- ::before {
60		- font-size: 30px;
61		- content: '+';
62		- position: absolute;
63		- top: 13px;
64		- left: 0;
65		- right: 0;
66		- text-align: center;
67		- }
68		- input[type="file"] {
69		- height: 62px
70		- width: 62px
71		- display: block
72		- cursor: pointer
73		- opacity: 0
74		- }
75		- }
76		-
77		-
78		-}

styles/profile-editor.mcssView
		@@ -1,24 +1,0 @@
1		-ProfileEditor {
2		- display: flex
3		- div.side {
4		- margin-right: 10px
5		- }
6		- div.main {
7		- flex: 1
8		- display: flex
9		- flex-direction: column
10		- input {
11		- border: 1px solid #CCC
12		- font-size: 150%
13		- padding: 10px
14		- }
15		- textarea {
16		- resize: vertical
17		- margin-top: 10px
18		- border: 1px solid #CCC
19		- padding: 10px
20		- font-size: 150%
21		- flex: 1
22		- }
23		- }
24		-}

styles/profile-header.mcssView
		@@ -1,36 +1,0 @@
1		-ProfileHeader {
2		- display: flex;
3		- width: 100%;
4		- max-width: 700px;
5		- margin: 20px auto;
6		-
7		- div.image {
8		- width: 200px;
9		- max-height: 200px;
10		- padding: 5px;
11		- background: white;
12		- box-shadow: 0 0 10px #AAA;
13		- margin-right: 20px;
14		- img {
15		- width: 100%
16		- }
17		- }
18		-
19		- div.main {
20		- flex: 1
21		- div.title {
22		- display: flex
23		- h1 {
24		- flex: 1
25		- }
26		- }
27		- section {
28		- -description {
29		- font-size: 120%
30		- max-height: 350px
31		- overflow: auto
32		- -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
33		- }
34		- }
35		- }
36		-}

styles/profile-link.mcssView
		@@ -1,4 +1,0 @@
1		-ProfileLink {
2		- font-weight: bold
3		- color: black
4		-}

styles/profile-list.mcssView
		@@ -1,78 +1,0 @@
1		-ProfileList {
2		- a.profile {
3		- display: flex;
4		- padding: 4px;
5		- font-size: 110%;
6		- margin: 4px 0;
7		- background: rgba(255, 255, 255, 0.74);
8		- border-radius: 5px;
9		- position: relative
10		- text-decoration: none
11		- transition: background-color 0.2s
12		-
13		- background-repeat: no-repeat
14		- background-position: right
15		-
16		- -following {
17		- background-image: svg(following)
18		- }
19		-
20		- -connected {
21		- background-image: svg(connected)
22		- }
23		-
24		- @svg connected {
25		- width: 20px
26		- height: 12px
27		- content: "<circle cx='6' stroke='none' fill='green' cy='6' r='5' />"
28		- }
29		-
30		- @svg following {
31		- width: 20px
32		- height: 12px
33		- content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
34		- }
35		-
36		- :hover {
37		- background-color: rgba(255, 255, 255, 0.4);
38		- }
39		-
40		- div.avatar {
41		- img {
42		- width: 40px
43		- height: 40px
44		- display: block
45		- }
46		- }
47		-
48		- div.main {
49		- display: flex
50		- flex-direction: column
51		- flex: 1
52		- margin-left: 10px
53		- justify-content: center
54		- min-width: 0px
55		- div.name {
56		- white-space: nowrap
57		- font-weight: bold
58		- font-size: 110%
59		- color: #636363
60		- -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0))
61		- }
62		- }
63		-
64		- div.progress {
65		- display: flex
66		- flex-direction: column
67		- svg {
68		- transition: opacity 0.2s
69		- opacity: 0
70		- -pending {
71		- opacity: 1
72		- }
73		- width: 20px
74		- flex: 1
75		- }
76		- }
77		- }
78		-}

styles/scroller.mcssView
		@@ -1,17 +1,0 @@
1		-Scroller {
2		- display: flex
3		- flex-direction: column
4		-
5		- overflow: auto
6		- width: 100%
7		- height: 100%
8		- min-height: 0px
9		-
10		- div.wrapper {
11		- flex: 1
12		- width: 100%
13		- max-width: 700px
14		- margin-left: auto
15		- margin-right: auto
16		- }
17		-}

styles/search-page.mcssView
		@@ -1,7 +1,0 @@
1		-SearchPage {
2		- section.content {
3		- div.result {
4		- margin: 10px 0
5		- }
6		- }
7		-}

styles/sheet.mcssView
		@@ -1,43 +1,0 @@
1		-Sheet {
2		- position: fixed;
3		- max-height: 80vh;
4		- max-width: 700px;
5		- margin: auto;
6		- top: 38px;
7		- left: 0;
8		- right: 0;
9		- width: 80vw;
10		- background: #f8f8f8;
11		- border: 2px solid #9c9a9a;
12		- box-shadow: 0 0 40px rgba(0,0,0,0.5);
13		- border-bottom-left-radius: 4px;
14		- border-bottom-right-radius: 4px;
15		- display: flex
16		- flex-direction: column
17		- z-index: 50
18		-
19		- section {
20		- overflow-y: auto
21		- flex: 1
22		- }
23		-
24		- footer {
25		- flex-shrink: 0;
26		- min-height: 20px;
27		- display: flex;
28		- justify-content: flex-end;
29		- padding: 10px;
30		- position: relative
31		- border-top: 1px solid #DDD
32		-
33		- div.info {
34		- flex: 1
35		- padding: 8px
36		- font-size: 13px
37		- }
38		-
39		- button {
40		- margin-left: 10px
41		- }
42		- }
43		-}

styles/split-view.mcssView
		@@ -1,35 +1,0 @@
1		-SplitView {
2		- display: flex
3		- flex: 3
4		- div.main {
5		- display: flex
6		- flex-direction: column
7		- flex: 1
8		- overflow-y: auto
9		- }
10		- div.side {
11		- width: 280px;
12		- padding: 20px;
13		- background: linear-gradient(81deg, #d6ecff, rgb(248, 253, 253));
14		- border-right: 1px solid #dcdcdc;
15		- overflow-y: auto;
16		-
17		- -right {
18		- border: none
19		- border-left: 1px solid #dcdcdc
20		- background: linear-gradient(100deg, #ffffff, #f9ecca);
21		- }
22		-
23		- h2 {
24		- margin-top: 20px
25		- margin-bottom: 8px
26		- color: #527b90;
27		- text-shadow: 0px 0px 3px #fff;
28		- font-weight: normal;
29		- span.sub {
30		- font-weight: normal
31		- font-size: 90%
32		- }
33		- }
34		- }
35		-}

styles/suggest-box.mcssView
		@@ -1,50 +1,0 @@
1		-SuggestBox {
2		- width: max-content;
3		- max-height: 50vh;
4		- overflow-y: auto;
5		- background-color: #fff;
6		- border: 1px gainsboro solid;
7		- z-index: 1000
8		-
9		- padding: .2rem .5rem;
10		- margin-top: .35rem;
11		-
12		- ul {
13		- list-style-type: none;
14		- padding: 0;
15		-
16		- li {
17		- display: flex;
18		- align-items: center;
19		-
20		- padding-right: .2rem;
21		- margin-bottom: .2rem;
22		- cursor: pointer
23		-
24		- img {
25		- height: 36px;
26		- width: 36px;
27		- padding: .2rem;
28		- }
29		-
30		- strong {
31		- flex-grow: 1;
32		- margin-left: .5rem;
33		- font-weight: 300;
34		- }
35		-
36		- small {
37		- font-family: monospace;
38		- margin-left: .5rem;
39		- padding-right: .2rem;
40		- font-size: 1rem;
41		- }
42		- }
43		-
44		- li.selected {
45		- color: #fff;
46		- background: #0caaf9;
47		- }
48		- }
49		-
50		-}

styles/thread.mcssView
		@@ -1,24 +1,0 @@
1		-Thread {
2		- flex: 1
3		- max-width: 700px
4		- width: 100%
5		- margin: 10px auto
6		-
7		- div.messages {
8		- div + div {
9		- border-top: 1px solid #EEE
10		- }
11		-
12		- a.full {
13		- display: block;
14		- padding: 10px;
15		- background: #daecd6;
16		- border-top: 1px solid #bbc9d2;
17		- border-bottom: 1px solid #bbc9d2;
18		- text-align: center;
19		- color: #759053;
20		- }
21		-
22		- box-shadow: 0 2px 4px rgba(0,0,0,0.1)
23		- }
24		-}

styles/toggle-button.mcssView
		@@ -1,42 +1,0 @@
1		-ToggleButton {
2		- font-size: 90%;
3		- background: rgb(112, 112, 112);
4		- border: 2px solid #313131;
5		- transition: opacity 0.2s;
6		- opacity: 0.6;
7		- padding: 6px 12px;
8		- color: white;
9		- border-radius: 4px;
10		- font-weight: bold;
11		- text-decoration: none;
12		- display: block;
13		-
14		- -subscribe {
15		- background-color: rgb(88, 171, 204);
16		- border-color: #20699c;
17		- }
18		-
19		- -unsubscribe {
20		- background-repeat: no-repeat
21		- background-position: right
22		- background-image: svg(subscribed)
23		- padding-right: 25px
24		- }
25		-
26		- -disabled {
27		- cursor: default
28		- opacity: 0.4 !important
29		- text-decoration: none !important
30		- }
31		-
32		- :hover {
33		- opacity: 1
34		- text-decoration: none
35		- }
36		-
37		- @svg subscribed {
38		- width: 20px
39		- height: 12px
40		- content: "<circle cx='6' stroke='#FFF' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#FFF'/>"
41		- }
42		-}

Matt McKegg / patchwork

Commit 3760ba269d2d39bd1e3564406bb087bd35c1fd8e

add theme picker, extract current theme as "light" theme

Files changed

main-window.js	changed
modules/page/html/render/settings.js	added
package.json	changed
styles/index.js	changed
styles/about-image.mcss	deleted
styles/all-channels.mcss	deleted
styles/light/about-image.mcss	added
styles/light/all-channels.mcss	added
styles/light/avatar.mcss	added
styles/light/base.mcss	added
styles/light/button.mcss	added
styles/light/channel-list.mcss	added
styles/light/compose.mcss	added
styles/light/feed-event.mcss	added
styles/light/gathering-card.mcss	added
styles/light/gathering-editor.mcss	added
styles/light/image-input.mcss	added
styles/light/index.js	added
styles/light/loading.mcss	added
styles/light/main-window.mcss	added
styles/light/markdown.mcss	added
styles/light/message.mcss	added
styles/light/notifier.mcss	added
styles/light/page-heading.mcss	added
styles/light/picker.mcss	added
styles/light/profile-editor.mcss	added
styles/light/profile-header.mcss	added
styles/light/profile-link.mcss	added
styles/light/profile-list.mcss	added
styles/light/scroller.mcss	added
styles/light/search-page.mcss	added
styles/light/sheet.mcss	added
styles/light/split-view.mcss	added
styles/light/suggest-box.mcss	added
styles/light/thread.mcss	added
styles/light/toggle-button.mcss	added
styles/avatar.mcss	deleted
styles/base.mcss	deleted
styles/button.mcss	deleted
styles/channel-list.mcss	deleted
styles/compose.mcss	deleted
styles/feed-event.mcss	deleted
styles/gathering-card.mcss	deleted
styles/gathering-editor.mcss	deleted
styles/image-input.mcss	deleted
styles/loading.mcss	deleted
styles/main-window.mcss	deleted
styles/markdown.mcss	deleted
styles/message.mcss	deleted
styles/notifier.mcss	deleted
styles/page-heading.mcss	deleted
styles/picker.mcss	deleted
styles/profile-editor.mcss	deleted
styles/profile-header.mcss	deleted
styles/profile-link.mcss	deleted
styles/profile-list.mcss	deleted
styles/scroller.mcss	deleted
styles/search-page.mcss	deleted
styles/sheet.mcss	deleted
styles/split-view.mcss	deleted
styles/suggest-box.mcss	deleted
styles/thread.mcss	deleted
styles/toggle-button.mcss	deleted