From 1df5eae211191fe3c51b539553ab0a8619eb34cb Mon Sep 17 00:00:00 2001 From: Noot Fang Date: Wed, 1 Jan 2020 17:50:41 +1100 Subject: [PATCH 1/7] add dark html --- MarkdownView.xcodeproj/project.pbxproj | 9 + MarkdownView/MarkdownView.swift | 14 +- MarkdownView/index_dark.html | 13 ++ MarkdownView/main_dark.css | 259 +++++++++++++++++++++++++ 4 files changed, 293 insertions(+), 2 deletions(-) create mode 100644 MarkdownView/index_dark.html create mode 100644 MarkdownView/main_dark.css diff --git a/MarkdownView.xcodeproj/project.pbxproj b/MarkdownView.xcodeproj/project.pbxproj index 645a8e1..64a2b86 100644 --- a/MarkdownView.xcodeproj/project.pbxproj +++ b/MarkdownView.xcodeproj/project.pbxproj @@ -7,6 +7,8 @@ objects = { /* Begin PBXBuildFile section */ + 7D3D278923BC75DC0059D330 /* main_dark.css in Resources */ = {isa = PBXBuildFile; fileRef = 7D3D278823BC75DC0059D330 /* main_dark.css */; }; + 7D3D278B23BC763C0059D330 /* index_dark.html in Resources */ = {isa = PBXBuildFile; fileRef = 7D3D278A23BC763C0059D330 /* index_dark.html */; }; FC9CC4C51EC43FA90013238C /* index.html in Resources */ = {isa = PBXBuildFile; fileRef = FC9CC4BD1EC43FA90013238C /* index.html */; }; FC9CC4C61EC43FA90013238C /* main.css in Resources */ = {isa = PBXBuildFile; fileRef = FC9CC4BE1EC43FA90013238C /* main.css */; }; FC9CC4C71EC43FA90013238C /* main.js in Resources */ = {isa = PBXBuildFile; fileRef = FC9CC4BF1EC43FA90013238C /* main.js */; }; @@ -15,6 +17,8 @@ /* End PBXBuildFile section */ /* Begin PBXFileReference section */ + 7D3D278823BC75DC0059D330 /* main_dark.css */ = {isa = PBXFileReference; lastKnownFileType = text.css; path = main_dark.css; sourceTree = ""; }; + 7D3D278A23BC763C0059D330 /* index_dark.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = index_dark.html; sourceTree = ""; }; FC9CC4BD1EC43FA90013238C /* index.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; name = index.html; path = webassets/dist/index.html; sourceTree = SOURCE_ROOT; }; FC9CC4BE1EC43FA90013238C /* main.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; name = main.css; path = webassets/dist/main.css; sourceTree = SOURCE_ROOT; }; FC9CC4BF1EC43FA90013238C /* main.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; name = main.js; path = webassets/dist/main.js; sourceTree = SOURCE_ROOT; }; @@ -67,6 +71,8 @@ children = ( FC9CC4BD1EC43FA90013238C /* index.html */, FC9CC4BE1EC43FA90013238C /* main.css */, + 7D3D278A23BC763C0059D330 /* index_dark.html */, + 7D3D278823BC75DC0059D330 /* main_dark.css */, FC9CC4BF1EC43FA90013238C /* main.js */, ); name = Assets; @@ -125,6 +131,7 @@ developmentRegion = English; hasScannedForEncodings = 0; knownRegions = ( + English, en, ); mainGroup = FCA0500B1EC41211001DAD5F; @@ -144,6 +151,8 @@ files = ( FC9CC4C61EC43FA90013238C /* main.css in Resources */, FC9CC4C51EC43FA90013238C /* index.html in Resources */, + 7D3D278B23BC763C0059D330 /* index_dark.html in Resources */, + 7D3D278923BC75DC0059D330 /* main_dark.css in Resources */, FC9CC4C71EC43FA90013238C /* main.js in Resources */, ); runOnlyForDeploymentPostprocessing = 0; diff --git a/MarkdownView/MarkdownView.swift b/MarkdownView/MarkdownView.swift index fbca772..fd57fc2 100644 --- a/MarkdownView/MarkdownView.swift +++ b/MarkdownView/MarkdownView.swift @@ -6,9 +6,13 @@ import WebKit - Note: [How to get height of entire document with javascript](https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript) */ + open class MarkdownView: UIView { private var webView: WKWebView? + + + var isDarkUIStyle = false fileprivate var intrinsicContentHeight: CGFloat? { didSet { @@ -53,10 +57,16 @@ open class MarkdownView: UIView { let bundle = Bundle(for: MarkdownView.self) + var htmlName = "index" + + if isDarkUIStyle { + htmlName = "index_dark" + } + let htmlURL: URL? = - bundle.url(forResource: "index", + bundle.url(forResource: htmlName, withExtension: "html") ?? - bundle.url(forResource: "index", + bundle.url(forResource: htmlName, withExtension: "html", subdirectory: "MarkdownView.bundle") diff --git a/MarkdownView/index_dark.html b/MarkdownView/index_dark.html new file mode 100644 index 0000000..3dd4170 --- /dev/null +++ b/MarkdownView/index_dark.html @@ -0,0 +1,13 @@ + + + + + + + + + + +
+ + diff --git a/MarkdownView/main_dark.css b/MarkdownView/main_dark.css new file mode 100644 index 0000000..f8a5555 --- /dev/null +++ b/MarkdownView/main_dark.css @@ -0,0 +1,259 @@ + +body{ + background: #000; + font-family: Georgia, Palatino, serif; + color: #EEE; + line-height: 1; + padding: 30px; + margin:auto; + max-width:42em; +} +h1, h2, h3, h4 { + font-weight: 400; +} +h1, h2, h3, h4, h5, p { + margin-bottom: 24px; + padding: 0; +} +h1 { + font-size: 48px; +} +h2 { + font-size: 36px; + margin: 24px 0 6px; +} +h3 { + font-size: 24px; +} +h4 { + font-size: 21px; +} +h5 { + font-size: 18px; +} +a { + color: #61BFC1; + margin: 0; + padding: 0; + text-decoration: none; + vertical-align: baseline; +} +a:hover { + text-decoration: underline; +} +a:visited { + color: #466B6C; +} +ul, ol { + padding: 0; + margin: 0; +} +li { + line-height: 24px; +} +li ul, li ul { + margin-left: 24px; +} +p, ul, ol { + font-size: 16px; + line-height: 24px; + max-width: 540px; +} +pre { + padding: 0px 24px; + max-width: 800px; + white-space: pre-wrap; +} +code { + font-family: Consolas, Monaco, Andale Mono, monospace; + line-height: 1.5; + font-size: 13px; +} +aside { + display: block; + float: right; + width: 390px; +} +blockquote { + border-left:.5em solid #eee; + padding: 0 2em; + margin-left:0; + max-width: 476px; +} +blockquote cite { + font-size:14px; + line-height:20px; + color:#bfbfbf; +} +blockquote cite:before { + content: '\2014 \00A0'; +} + +blockquote p { + color: #666; + max-width: 460px; +} +hr { + width: 540px; + text-align: left; + margin: 0 auto 0 0; + color: #999; +} + +/* Code below this line is copyright Twitter Inc. */ + +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, input { + line-height: normal; + *overflow: visible; +} +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +input[type=checkbox], input[type=radio] { + cursor: pointer; +} +/* override default chrome & firefox settings */ +input:not([type="image"]), textarea { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +label, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: normal; + margin-bottom: 18px; +} +input[type=checkbox], input[type=radio] { + cursor: pointer; + margin-bottom: 0; +} +input[type=text], +input[type=password], +textarea, +select { + display: inline-block; + width: 210px; + padding: 4px; + font-size: 13px; + font-weight: normal; + line-height: 18px; + height: 18px; + color: #808080; + border: 1px solid #ccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +select, input[type=file] { + height: 27px; + line-height: 27px; +} +textarea { + height: auto; +} + +/* grey out placeholders */ +:-moz-placeholder { + color: #bfbfbf; +} +::-webkit-input-placeholder { + color: #bfbfbf; +} + +input[type=text], +input[type=password], +select, +textarea { + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); +} +input[type=text]:focus, input[type=password]:focus, textarea:focus { + outline: none; + border-color: rgba(82, 168, 236, 0.8); + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); +} + +/* buttons */ +button { + display: inline-block; + padding: 4px 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 18px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-color: #0064cd; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(top, #049cdb, #0064cd); + background-image: -ms-linear-gradient(top, #049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); + background-image: -o-linear-gradient(top, #049cdb, #0064cd); + background-image: linear-gradient(top, #049cdb, #0064cd); + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border: 1px solid #004b9a; + border-bottom-color: #003f81; + -webkit-transition: 0.1s linear all; + -moz-transition: 0.1s linear all; + transition: 0.1s linear all; + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +button:hover { + color: #fff; + background-position: 0 -15px; + text-decoration: none; +} +button:active { + -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} +button::-moz-focus-inner { + padding: 0; + border: 0; +} From 0033f50663cba07c7419cf3964b901fe6dea34d1 Mon Sep 17 00:00:00 2001 From: Noot Fang Date: Wed, 1 Jan 2020 17:53:17 +1100 Subject: [PATCH 2/7] update version --- MarkdownView/Info.plist | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MarkdownView/Info.plist b/MarkdownView/Info.plist index ad178db..37c786d 100644 --- a/MarkdownView/Info.plist +++ b/MarkdownView/Info.plist @@ -9,13 +9,13 @@ CFBundleIdentifier $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion - 6.0 + 6.1 CFBundleName $(PRODUCT_NAME) CFBundlePackageType FMWK CFBundleShortVersionString - 1.5.0 + 1.5.1 CFBundleVersion $(CURRENT_PROJECT_VERSION) NSPrincipalClass From 243d594e0c14f022350241915ccbea5b8cc7666f Mon Sep 17 00:00:00 2001 From: Noot Fang Date: Wed, 1 Jan 2020 17:57:20 +1100 Subject: [PATCH 3/7] update public --- MarkdownView/MarkdownView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MarkdownView/MarkdownView.swift b/MarkdownView/MarkdownView.swift index fd57fc2..32e8a6b 100644 --- a/MarkdownView/MarkdownView.swift +++ b/MarkdownView/MarkdownView.swift @@ -12,7 +12,7 @@ open class MarkdownView: UIView { private var webView: WKWebView? - var isDarkUIStyle = false + public var isDarkUIStyle = false fileprivate var intrinsicContentHeight: CGFloat? { didSet { From 83171822e144d0c9590d499e7554bb2b4e1fe5e9 Mon Sep 17 00:00:00 2001 From: Noot Fang Date: Wed, 1 Jan 2020 18:06:04 +1100 Subject: [PATCH 4/7] update --- MarkdownView/Info.plist | 2 +- webassets/dist/index_dark.html | 13 ++ webassets/dist/main_dark.css | 259 +++++++++++++++++++++++++++++++++ 3 files changed, 273 insertions(+), 1 deletion(-) create mode 100644 webassets/dist/index_dark.html create mode 100644 webassets/dist/main_dark.css diff --git a/MarkdownView/Info.plist b/MarkdownView/Info.plist index 37c786d..d8a316b 100644 --- a/MarkdownView/Info.plist +++ b/MarkdownView/Info.plist @@ -15,7 +15,7 @@ CFBundlePackageType FMWK CFBundleShortVersionString - 1.5.1 + 1.5.2 CFBundleVersion $(CURRENT_PROJECT_VERSION) NSPrincipalClass diff --git a/webassets/dist/index_dark.html b/webassets/dist/index_dark.html new file mode 100644 index 0000000..3dd4170 --- /dev/null +++ b/webassets/dist/index_dark.html @@ -0,0 +1,13 @@ + + + + + + + + + + +
+ + diff --git a/webassets/dist/main_dark.css b/webassets/dist/main_dark.css new file mode 100644 index 0000000..f8a5555 --- /dev/null +++ b/webassets/dist/main_dark.css @@ -0,0 +1,259 @@ + +body{ + background: #000; + font-family: Georgia, Palatino, serif; + color: #EEE; + line-height: 1; + padding: 30px; + margin:auto; + max-width:42em; +} +h1, h2, h3, h4 { + font-weight: 400; +} +h1, h2, h3, h4, h5, p { + margin-bottom: 24px; + padding: 0; +} +h1 { + font-size: 48px; +} +h2 { + font-size: 36px; + margin: 24px 0 6px; +} +h3 { + font-size: 24px; +} +h4 { + font-size: 21px; +} +h5 { + font-size: 18px; +} +a { + color: #61BFC1; + margin: 0; + padding: 0; + text-decoration: none; + vertical-align: baseline; +} +a:hover { + text-decoration: underline; +} +a:visited { + color: #466B6C; +} +ul, ol { + padding: 0; + margin: 0; +} +li { + line-height: 24px; +} +li ul, li ul { + margin-left: 24px; +} +p, ul, ol { + font-size: 16px; + line-height: 24px; + max-width: 540px; +} +pre { + padding: 0px 24px; + max-width: 800px; + white-space: pre-wrap; +} +code { + font-family: Consolas, Monaco, Andale Mono, monospace; + line-height: 1.5; + font-size: 13px; +} +aside { + display: block; + float: right; + width: 390px; +} +blockquote { + border-left:.5em solid #eee; + padding: 0 2em; + margin-left:0; + max-width: 476px; +} +blockquote cite { + font-size:14px; + line-height:20px; + color:#bfbfbf; +} +blockquote cite:before { + content: '\2014 \00A0'; +} + +blockquote p { + color: #666; + max-width: 460px; +} +hr { + width: 540px; + text-align: left; + margin: 0 auto 0 0; + color: #999; +} + +/* Code below this line is copyright Twitter Inc. */ + +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, input { + line-height: normal; + *overflow: visible; +} +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +input[type=checkbox], input[type=radio] { + cursor: pointer; +} +/* override default chrome & firefox settings */ +input:not([type="image"]), textarea { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +label, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: normal; + margin-bottom: 18px; +} +input[type=checkbox], input[type=radio] { + cursor: pointer; + margin-bottom: 0; +} +input[type=text], +input[type=password], +textarea, +select { + display: inline-block; + width: 210px; + padding: 4px; + font-size: 13px; + font-weight: normal; + line-height: 18px; + height: 18px; + color: #808080; + border: 1px solid #ccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +select, input[type=file] { + height: 27px; + line-height: 27px; +} +textarea { + height: auto; +} + +/* grey out placeholders */ +:-moz-placeholder { + color: #bfbfbf; +} +::-webkit-input-placeholder { + color: #bfbfbf; +} + +input[type=text], +input[type=password], +select, +textarea { + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); +} +input[type=text]:focus, input[type=password]:focus, textarea:focus { + outline: none; + border-color: rgba(82, 168, 236, 0.8); + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); +} + +/* buttons */ +button { + display: inline-block; + padding: 4px 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 18px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-color: #0064cd; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(top, #049cdb, #0064cd); + background-image: -ms-linear-gradient(top, #049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); + background-image: -o-linear-gradient(top, #049cdb, #0064cd); + background-image: linear-gradient(top, #049cdb, #0064cd); + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border: 1px solid #004b9a; + border-bottom-color: #003f81; + -webkit-transition: 0.1s linear all; + -moz-transition: 0.1s linear all; + transition: 0.1s linear all; + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +button:hover { + color: #fff; + background-position: 0 -15px; + text-decoration: none; +} +button:active { + -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} +button::-moz-focus-inner { + padding: 0; + border: 0; +} From abc6ac8d8b9a30b270da79cf34fcfaa1131bca2e Mon Sep 17 00:00:00 2001 From: Noot Fang Date: Thu, 2 Jan 2020 17:16:52 +1100 Subject: [PATCH 5/7] update dark css --- MarkdownView/main_dark.css | 441 ++++++++++++++++++++----------------- 1 file changed, 238 insertions(+), 203 deletions(-) diff --git a/MarkdownView/main_dark.css b/MarkdownView/main_dark.css index f8a5555..b2507fd 100644 --- a/MarkdownView/main_dark.css +++ b/MarkdownView/main_dark.css @@ -1,259 +1,294 @@ - -body{ - background: #000; - font-family: Georgia, Palatino, serif; - color: #EEE; - line-height: 1; - padding: 30px; - margin:auto; - max-width:42em; -} -h1, h2, h3, h4 { - font-weight: 400; -} -h1, h2, h3, h4, h5, p { - margin-bottom: 24px; - padding: 0; -} -h1 { - font-size: 48px; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} +audio, +canvas, +video { + display: inline-block; } -h2 { - font-size: 36px; - margin: 24px 0 6px; +audio:not([controls]) { + display: none; + height: 0; } -h3 { - font-size: 24px; +[hidden] { + display: none; } -h4 { - font-size: 21px; +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } -h5 { - font-size: 18px; +body { + margin: 0; } -a { - color: #61BFC1; - margin: 0; - padding: 0; - text-decoration: none; - vertical-align: baseline; +a:focus { + outline: thin dotted; } +a:active, a:hover { - text-decoration: underline; + outline: 0; } -a:visited { - color: #466B6C; +h1 { + font-size: 2em; +} +abbr[title] { + border-bottom: 1px dotted; } -ul, ol { - padding: 0; - margin: 0; +b, +strong { + font-weight: bold; } -li { - line-height: 24px; +dfn { + font-style: italic; } -li ul, li ul { - margin-left: 24px; +mark { + background: #ff0; + color: #000; } -p, ul, ol { - font-size: 16px; - line-height: 24px; - max-width: 540px; +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; } pre { - padding: 0px 24px; - max-width: 800px; - white-space: pre-wrap; + white-space: pre-wrap; + word-wrap: break-word; } -code { - font-family: Consolas, Monaco, Andale Mono, monospace; - line-height: 1.5; - font-size: 13px; +q { + quotes: "\201C" "\201D" "\2018" "\2019"; } -aside { - display: block; - float: right; - width: 390px; +small { + font-size: 80%; } -blockquote { - border-left:.5em solid #eee; - padding: 0 2em; - margin-left:0; - max-width: 476px; +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -blockquote cite { - font-size:14px; - line-height:20px; - color:#bfbfbf; +sup { + top: -0.5em; } -blockquote cite:before { - content: '\2014 \00A0'; +sub { + bottom: -0.25em; } - -blockquote p { - color: #666; - max-width: 460px; +img { + border: 0; } -hr { - width: 540px; - text-align: left; - margin: 0 auto 0 0; - color: #999; +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; + padding: 0; } - -/* Code below this line is copyright Twitter Inc. */ - button, input, select, textarea { + font-family: inherit; font-size: 100%; margin: 0; - vertical-align: baseline; - *vertical-align: middle; } -button, input { +button, +input { line-height: normal; - *overflow: visible; -} -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; } button, -input[type="button"], +html input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; -webkit-appearance: button; -} -input[type=checkbox], input[type=radio] { cursor: pointer; } -/* override default chrome & firefox settings */ -input:not([type="image"]), textarea { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; +button[disabled], +input[disabled] { + cursor: default; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; } - input[type="search"] { -webkit-appearance: textfield; - -webkit-box-sizing: content-box; -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; box-sizing: content-box; } +input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -label, -input, -select, +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} textarea { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; - line-height: normal; - margin-bottom: 18px; + overflow: auto; + vertical-align: top; } -input[type=checkbox], input[type=radio] { - cursor: pointer; - margin-bottom: 0; +table { + border-collapse: collapse; + border-spacing: 0; } -input[type=text], -input[type=password], -textarea, -select { - display: inline-block; - width: 210px; - padding: 4px; - font-size: 13px; - font-weight: normal; - line-height: 18px; - height: 18px; - color: #808080; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -select, input[type=file] { - height: 27px; - line-height: 27px; +@import url(//fonts.googleapis.com/css?family=PT+Sans); +@import url(//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700); +html { + font-family: 'PT Sans', sans-serif; } -textarea { - height: auto; +pre, +code { + font-family: monospace, sans-serif; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'PT Sans Narrow', sans-serif; + font-weight: 700; +} +html { + background-color: #000; + color: #EEE; + margin: 1em; } - -/* grey out placeholders */ -:-moz-placeholder { - color: #bfbfbf; +code { + padding: 2px; } -::-webkit-input-placeholder { - color: #bfbfbf; +a { + color: #b58900; } - -input[type=text], -input[type=password], -select, -textarea { - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -} -input[type=text]:focus, input[type=password]:focus, textarea:focus { - outline: none; - border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); +a:visited { + color: #cb4b16; +} +a:hover { + color: #cb4b16; +} +h1 { + color: #d33682; +} +h2, +h3, +h4, +h5, +h6 { + color: #859900; +} +pre { +/* background-color: #002b36;*/ +/* color: #839496;*/ + border: 1pt solid #586e75; + padding: 1em; + box-shadow: 5pt 5pt 8pt #073642; } +pre code { -/* buttons */ -button { - display: inline-block; - padding: 4px 14px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - background-color: #0064cd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(top, #049cdb, #0064cd); - background-image: -ms-linear-gradient(top, #049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); - background-image: -o-linear-gradient(top, #049cdb, #0064cd); - background-image: linear-gradient(top, #049cdb, #0064cd); - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border: 1px solid #004b9a; - border-bottom-color: #003f81; - -webkit-transition: 0.1s linear all; - -moz-transition: 0.1s linear all; - transition: 0.1s linear all; - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -button:hover { - color: #fff; - background-position: 0 -15px; - text-decoration: none; -} -button:active { - -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -} -button::-moz-focus-inner { - padding: 0; - border: 0; +} +h1 { + font-size: 2.8em; +} +h2 { + font-size: 2.4em; +} +h3 { + font-size: 1.8em; +} +h4 { + font-size: 1.4em; +} +h5 { + font-size: 1.3em; +} +h6 { + font-size: 1.15em; +} +.tag { + background-color: #073642; + color: #d33682; + padding: 0 0.2em; +} +.todo, +.next, +.done { + color: #002b36; + background-color: #dc322f; + padding: 0 0.2em; +} +.tag { + -webkit-border-radius: 0.35em; + -moz-border-radius: 0.35em; + border-radius: 0.35em; +} +.TODO { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #2aa198; +} +.NEXT { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.ACTIVE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.DONE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #859900; +} +.WAITING { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #cb4b16; +} +.HOLD { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #d33682; +} +.NOTE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #d33682; +} +.CANCELLED { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #859900; } From 43277913451fe73bfed1a6cc3b82944cb3658b2e Mon Sep 17 00:00:00 2001 From: Noot Fang Date: Thu, 2 Jan 2020 17:17:15 +1100 Subject: [PATCH 6/7] update dark css --- MarkdownView/Info.plist | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MarkdownView/Info.plist b/MarkdownView/Info.plist index d8a316b..6b56d2b 100644 --- a/MarkdownView/Info.plist +++ b/MarkdownView/Info.plist @@ -15,7 +15,7 @@ CFBundlePackageType FMWK CFBundleShortVersionString - 1.5.2 + 1.5.3 CFBundleVersion $(CURRENT_PROJECT_VERSION) NSPrincipalClass From e36406689e31a0cffc849048c46137d1fde97dd2 Mon Sep 17 00:00:00 2001 From: Noot Fang Date: Thu, 2 Jan 2020 17:19:19 +1100 Subject: [PATCH 7/7] update asset --- webassets/dist/main_dark.css | 441 +++++++++++++++++++---------------- 1 file changed, 238 insertions(+), 203 deletions(-) diff --git a/webassets/dist/main_dark.css b/webassets/dist/main_dark.css index f8a5555..b2507fd 100644 --- a/webassets/dist/main_dark.css +++ b/webassets/dist/main_dark.css @@ -1,259 +1,294 @@ - -body{ - background: #000; - font-family: Georgia, Palatino, serif; - color: #EEE; - line-height: 1; - padding: 30px; - margin:auto; - max-width:42em; -} -h1, h2, h3, h4 { - font-weight: 400; -} -h1, h2, h3, h4, h5, p { - margin-bottom: 24px; - padding: 0; -} -h1 { - font-size: 48px; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} +audio, +canvas, +video { + display: inline-block; } -h2 { - font-size: 36px; - margin: 24px 0 6px; +audio:not([controls]) { + display: none; + height: 0; } -h3 { - font-size: 24px; +[hidden] { + display: none; } -h4 { - font-size: 21px; +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } -h5 { - font-size: 18px; +body { + margin: 0; } -a { - color: #61BFC1; - margin: 0; - padding: 0; - text-decoration: none; - vertical-align: baseline; +a:focus { + outline: thin dotted; } +a:active, a:hover { - text-decoration: underline; + outline: 0; } -a:visited { - color: #466B6C; +h1 { + font-size: 2em; +} +abbr[title] { + border-bottom: 1px dotted; } -ul, ol { - padding: 0; - margin: 0; +b, +strong { + font-weight: bold; } -li { - line-height: 24px; +dfn { + font-style: italic; } -li ul, li ul { - margin-left: 24px; +mark { + background: #ff0; + color: #000; } -p, ul, ol { - font-size: 16px; - line-height: 24px; - max-width: 540px; +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; } pre { - padding: 0px 24px; - max-width: 800px; - white-space: pre-wrap; + white-space: pre-wrap; + word-wrap: break-word; } -code { - font-family: Consolas, Monaco, Andale Mono, monospace; - line-height: 1.5; - font-size: 13px; +q { + quotes: "\201C" "\201D" "\2018" "\2019"; } -aside { - display: block; - float: right; - width: 390px; +small { + font-size: 80%; } -blockquote { - border-left:.5em solid #eee; - padding: 0 2em; - margin-left:0; - max-width: 476px; +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -blockquote cite { - font-size:14px; - line-height:20px; - color:#bfbfbf; +sup { + top: -0.5em; } -blockquote cite:before { - content: '\2014 \00A0'; +sub { + bottom: -0.25em; } - -blockquote p { - color: #666; - max-width: 460px; +img { + border: 0; } -hr { - width: 540px; - text-align: left; - margin: 0 auto 0 0; - color: #999; +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; + padding: 0; } - -/* Code below this line is copyright Twitter Inc. */ - button, input, select, textarea { + font-family: inherit; font-size: 100%; margin: 0; - vertical-align: baseline; - *vertical-align: middle; } -button, input { +button, +input { line-height: normal; - *overflow: visible; -} -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; } button, -input[type="button"], +html input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; -webkit-appearance: button; -} -input[type=checkbox], input[type=radio] { cursor: pointer; } -/* override default chrome & firefox settings */ -input:not([type="image"]), textarea { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; +button[disabled], +input[disabled] { + cursor: default; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; } - input[type="search"] { -webkit-appearance: textfield; - -webkit-box-sizing: content-box; -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; box-sizing: content-box; } +input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -label, -input, -select, +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} textarea { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; - line-height: normal; - margin-bottom: 18px; + overflow: auto; + vertical-align: top; } -input[type=checkbox], input[type=radio] { - cursor: pointer; - margin-bottom: 0; +table { + border-collapse: collapse; + border-spacing: 0; } -input[type=text], -input[type=password], -textarea, -select { - display: inline-block; - width: 210px; - padding: 4px; - font-size: 13px; - font-weight: normal; - line-height: 18px; - height: 18px; - color: #808080; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -select, input[type=file] { - height: 27px; - line-height: 27px; +@import url(//fonts.googleapis.com/css?family=PT+Sans); +@import url(//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700); +html { + font-family: 'PT Sans', sans-serif; } -textarea { - height: auto; +pre, +code { + font-family: monospace, sans-serif; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'PT Sans Narrow', sans-serif; + font-weight: 700; +} +html { + background-color: #000; + color: #EEE; + margin: 1em; } - -/* grey out placeholders */ -:-moz-placeholder { - color: #bfbfbf; +code { + padding: 2px; } -::-webkit-input-placeholder { - color: #bfbfbf; +a { + color: #b58900; } - -input[type=text], -input[type=password], -select, -textarea { - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -} -input[type=text]:focus, input[type=password]:focus, textarea:focus { - outline: none; - border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); +a:visited { + color: #cb4b16; +} +a:hover { + color: #cb4b16; +} +h1 { + color: #d33682; +} +h2, +h3, +h4, +h5, +h6 { + color: #859900; +} +pre { +/* background-color: #002b36;*/ +/* color: #839496;*/ + border: 1pt solid #586e75; + padding: 1em; + box-shadow: 5pt 5pt 8pt #073642; } +pre code { -/* buttons */ -button { - display: inline-block; - padding: 4px 14px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - background-color: #0064cd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(top, #049cdb, #0064cd); - background-image: -ms-linear-gradient(top, #049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); - background-image: -o-linear-gradient(top, #049cdb, #0064cd); - background-image: linear-gradient(top, #049cdb, #0064cd); - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border: 1px solid #004b9a; - border-bottom-color: #003f81; - -webkit-transition: 0.1s linear all; - -moz-transition: 0.1s linear all; - transition: 0.1s linear all; - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -button:hover { - color: #fff; - background-position: 0 -15px; - text-decoration: none; -} -button:active { - -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -} -button::-moz-focus-inner { - padding: 0; - border: 0; +} +h1 { + font-size: 2.8em; +} +h2 { + font-size: 2.4em; +} +h3 { + font-size: 1.8em; +} +h4 { + font-size: 1.4em; +} +h5 { + font-size: 1.3em; +} +h6 { + font-size: 1.15em; +} +.tag { + background-color: #073642; + color: #d33682; + padding: 0 0.2em; +} +.todo, +.next, +.done { + color: #002b36; + background-color: #dc322f; + padding: 0 0.2em; +} +.tag { + -webkit-border-radius: 0.35em; + -moz-border-radius: 0.35em; + border-radius: 0.35em; +} +.TODO { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #2aa198; +} +.NEXT { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.ACTIVE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.DONE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #859900; +} +.WAITING { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #cb4b16; +} +.HOLD { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #d33682; +} +.NOTE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #d33682; +} +.CANCELLED { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + foreground-color: #859900; }