git ssb

styles/index.jsView
		@@ -1,4 +1,4 @@
1	1	module.exports = {
2	2	light: require('./light'),
3		- // dark: require('./dark')
	3	+ dark: require('./dark')
4	4	}

styles/dark/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/dark/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: 3px;
	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: 3px;
	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/dark/avatar.mcssView
		@@ -1,0 +1,3 @@
	1	+Avatar {
	2	+ width: 45px
	3	+}

styles/dark/base.mcssView
		@@ -1,0 +1,99 @@
	1	+html, body {
	2	+ background: #434141
	3	+ margin: 0
	4	+ font: caption
	5	+ overflow: hidden
	6	+ height: 100%
	7	+ font-size: 12px
	8	+ -webkit-user-select: none
	9	+ color: #ccc
	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: #757474
	78	+ text-decoration: none
	79	+
	80	+ code {
	81	+ color: #8EC1FC
	82	+ }
	83	+
	84	+ :hover {
	85	+ color: #aaa
	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/dark/button.mcssView
		@@ -1,0 +1,70 @@
	1	+button {
	2	+ color: #5f5f5f;
	3	+ padding: 3px 6px;
	4	+ background: white;
	5	+ border: 2px solid #DDD;
	6	+ border-radius: 3px;
	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: #aaa
	37	+ background-color: #2d2c2c
	38	+ border: 0
	39	+ margin-top: 0
	40	+ padding: 10px
	41	+ transition: background-color 0.25s ease, color 0.25s ease
	42	+
	43	+ :hover {
	44	+ color: white
	45	+ background-color: #45b754
	46	+ }
	47	+ }
	48	+
	49	+ -save {
	50	+ border-color: #a7c7a6;
	51	+ background-color: #eeffee;
	52	+ color: #255D24;
	53	+
	54	+ :active {
	55	+ background-color: #c6e0c5 !important
	56	+ }
	57	+
	58	+ :hover {
	59	+ border-color: #3ac737;
	60	+ background-color: #d4ffd4;
	61	+ color: #21921f;
	62	+ }
	63	+ }
	64	+
	65	+ -full {
	66	+ display: block
	67	+ width: 100%
	68	+ margin: 0 0 15px
	69	+ }
	70	+}

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

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

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

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

styles/dark/markdown.mcssView
		@@ -1,0 +1,83 @@
	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	+
	68	+ p {
	69	+ a {
	70	+ color: #6f74e5
	71	+ :hover {
	72	+ text-decoration: underline;
	73	+ }
	74	+ [href^="@"] {
	75	+ color: #45b754
	76	+ border-bottom: 1px dotted #45b754
	77	+ :hover {
	78	+ text-decoration: none;
	79	+ }
	80	+ }
	81	+ }
	82	+ }
	83	+}

styles/dark/message.mcssView
		@@ -1,0 +1,237 @@
	1	+Message {
	2	+ display: flex
	3	+ flex-direction: column
	4	+ background: transparent
	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	+ border-radius: 3px
	96	+ width: 50px
	97	+ height: 50px
	98	+ }
	99	+ }
	100	+
	101	+ div.main {
	102	+ div.name {
	103	+ a {
	104	+ color: #757474
	105	+ font-weight: bold
	106	+
	107	+ :hover {
	108	+ color: #aaa
	109	+ }
	110	+ }
	111	+ }
	112	+ div.meta {
	113	+ font-size: 75%
	114	+ }
	115	+ margin-left: 10px
	116	+ }
	117	+ }
	118	+
	119	+ div.meta {
	120	+ display: flex;
	121	+ flex-direction: column-reverse;
	122	+ align-items: flex-end;
	123	+ justify-content: flex-end;
	124	+
	125	+ span.flag {
	126	+ width: 12px
	127	+ height: 12px
	128	+
	129	+ background-repeat: no-repeat
	130	+ background-position: center
	131	+ display: inline-block
	132	+ vertical-align: middle;
	133	+ margin-top: -3px;
	134	+
	135	+ -new {
	136	+ background-image: svg(new)
	137	+ }
	138	+
	139	+ @svg new {
	140	+ width: 12px
	141	+ height: 12px
	142	+ content: "<circle cx='6' stroke='none' fill='#ffcf04' cy='6' r='5' />"
	143	+ }
	144	+ }
	145	+
	146	+ em {
	147	+ display: inline-block
	148	+ padding: 4px
	149	+ }
	150	+
	151	+ a.channel {
	152	+ font-size: 75%;
	153	+ }
	154	+
	155	+ a.likes {
	156	+ font-size: 75%;
	157	+ }
	158	+
	159	+ span.private {
	160	+ display: inline-block;
	161	+ margin: -3px -3px 3px 4px;
	162	+ border: 4px solid #525050;
	163	+ position: relative;
	164	+
	165	+ a {
	166	+ display: inline-block
	167	+
	168	+ img {
	169	+ margin: 0
	170	+ vertical-align: bottom
	171	+ border: none
	172	+ }
	173	+ }
	174	+
	175	+ :after {
	176	+ content: 'private';
	177	+ position: absolute;
	178	+ background: #525050;
	179	+ bottom: 0;
	180	+ left: -1px;
	181	+ font-size: 10px;
	182	+ padding: 2px 4px 0 2px;
	183	+ border-top-right-radius: 5px;
	184	+ color: white;
	185	+ font-weight: bold;
	186	+ pointer-events: none;
	187	+ white-space: nowrap
	188	+ }
	189	+ }
	190	+ }
	191	+ }
	192	+
	193	+ section {
	194	+ margin: 0
	195	+ padding: 0 20px
	196	+ (img) {
	197	+ max-width: 100%
	198	+ }
	199	+ }
	200	+
	201	+ a.backlink {
	202	+ display: block;
	203	+ border-top: 1px solid #EEE;
	204	+ padding: 10px 15px;
	205	+ background: #ffffff;
	206	+ color: #8f8f8f;
	207	+ margin-top: -1px;
	208	+ font-size: 9pt;
	209	+
	210	+ :hover {
	211	+ text-decoration: none
	212	+ color: #777
	213	+ }
	214	+ }
	215	+
	216	+ footer {
	217	+ margin: 5px 0 20px;
	218	+ padding: 0 20px
	219	+
	220	+ div.actions {
	221	+ a {
	222	+ opacity: 0.4
	223	+ transition: opacity 0.2s
	224	+ font-weight: bold
	225	+ color: #333
	226	+
	227	+ :hover {
	228	+ opacity: 1
	229	+ text-decoration: none;
	230	+ }
	231	+ }
	232	+ a + a {
	233	+ margin-left: 25px;
	234	+ }
	235	+ }
	236	+ }
	237	+}

styles/dark/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/dark/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/dark/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/dark/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/dark/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/dark/profile-link.mcssView
		@@ -1,0 +1,4 @@
	1	+ProfileLink {
	2	+ font-weight: bold
	3	+ color: black
	4	+}

styles/dark/profile-list.mcssView
		@@ -1,0 +1,77 @@
	1	+ProfileList {
	2	+ a.profile {
	3	+ display: flex;
	4	+ padding: 4px;
	5	+ font-size: 110%;
	6	+ margin: 4px 0;
	7	+ background: #2d2c2c;
	8	+ border-radius: 3px;
	9	+ position: relative
	10	+ text-decoration: none
	11	+ transition: background-color 0.25s
	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='#45b754' 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: #434141;
	38	+ }
	39	+
	40	+ div.avatar {
	41	+ img {
	42	+ width: 40px
	43	+ height: 40px
	44	+ display: block
	45	+ border-radius: 3px
	46	+ }
	47	+ }
	48	+
	49	+ div.main {
	50	+ display: flex
	51	+ flex-direction: column
	52	+ flex: 1
	53	+ margin-left: 10px
	54	+ justify-content: center
	55	+ min-width: 0px
	56	+ div.name {
	57	+ white-space: nowrap
	58	+ color: #ccc
	59	+ -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0))
	60	+ }
	61	+ }
	62	+
	63	+ div.progress {
	64	+ display: flex
	65	+ flex-direction: column
	66	+ svg {
	67	+ transition: opacity 0.2s
	68	+ opacity: 0
	69	+ -pending {
	70	+ opacity: 1
	71	+ }
	72	+ width: 20px
	73	+ flex: 1
	74	+ }
	75	+ }
	76	+ }
	77	+}

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

styles/dark/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/dark/split-view.mcssView
		@@ -1,0 +1,34 @@
	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: #383736;
	14	+ border-right: 1px solid #2d2c2c;
	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: #6e6d6d;
	27	+ font-weight: lighter;
	28	+ span.sub {
	29	+ font-weight: normal
	30	+ font-size: 90%
	31	+ }
	32	+ }
	33	+ }
	34	+}

styles/dark/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/dark/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/dark/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: 3px;
	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	+}

alanz / patchwork

Commit 6ba33f474b2097e9f528370502223f8f6da3c87c

add dark theme

Files changed

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