diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/css/extra.css | 31 | ||||
-rw-r--r-- | public/css/github-extract.css | 41 | ||||
-rw-r--r-- | public/css/index.css | 74 | ||||
-rw-r--r-- | public/css/markdown.css | 38 | ||||
-rw-r--r-- | public/js/index.js | 15 | ||||
-rw-r--r-- | public/js/lib/appState.js | 3 | ||||
-rw-r--r-- | public/js/lib/editor/ui-elements.js | 1 | ||||
-rw-r--r-- | public/views/hackmd/header.ejs | 5 |
8 files changed, 197 insertions, 11 deletions
diff --git a/public/css/extra.css b/public/css/extra.css index 169a1a5a..1b132901 100644 --- a/public/css/extra.css +++ b/public/css/extra.css @@ -179,6 +179,11 @@ border-left: 1px solid black; } +.night .ui-toc-dropdown .nav>li>a:focus, .night .ui-toc-dropdown .nav>li>a:hover{ + color: white; + border-left-color: white; +} + .ui-toc-dropdown[dir='rtl'] .nav>li>a:focus,.ui-toc-dropdown[dir='rtl'] .nav>li>a:hover { padding-right: 19px; border-left: none; @@ -192,6 +197,10 @@ background-color: transparent; border-left: 2px solid black; } +.night .ui-toc-dropdown .nav>.active:focus>a,.night .ui-toc-dropdown .nav>.active:hover>a,.night .ui-toc-dropdown .nav>.active>a { + color: white; + border-left: 2px solid white; +} .ui-toc-dropdown[dir='rtl'] .nav>.active:focus>a,.ui-toc-dropdown[dir='rtl'] .nav>.active:hover>a,.ui-toc-dropdown[dir='rtl'] .nav>.active>a { padding-right: 18px; @@ -216,6 +225,10 @@ font-weight: 400; } +.night .ui-toc-dropdown .nav > li > a{ + color: #aaa; +} + .ui-toc-dropdown[dir='rtl'] .nav .nav>li>a { padding-right: 30px; } @@ -350,13 +363,23 @@ small .dropdown a:focus, small .dropdown a:hover { } .unselectable { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; -o-user-select: none; user-select: none; } +.night .navbar{ + background: #333; + border-bottom-color: #333; + color: #eee; +} + +.night .navbar a{ + color: #eee; +} + @media print { div, table, img, pre, blockquote { page-break-inside: avoid !important; @@ -364,4 +387,4 @@ small .dropdown a:focus, small .dropdown a:hover { a[href]:after { font-size: 12px !important; } -}
\ No newline at end of file +} diff --git a/public/css/github-extract.css b/public/css/github-extract.css index 4d2650d4..7f7058a0 100644 --- a/public/css/github-extract.css +++ b/public/css/github-extract.css @@ -68,6 +68,9 @@ color: #777; border-left: 0.25em solid #ddd; } +.night .markdown-body blockquote{ + color: #bcbcbc; +} .markdown-body blockquote>:first-child { margin-top: 0; @@ -107,6 +110,15 @@ line-height: 1.25; } +.night .markdown-body h1, +.night .markdown-body h2, +.night .markdown-body h3, +.night .markdown-body h4, +.night .markdown-body h5, +.night .markdown-body h6 { + color: #ddd; +} + .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, @@ -118,6 +130,15 @@ visibility: hidden; } +.night .markdown-body h1 .octicon-link, +.night .markdown-body h2 .octicon-link, +.night .markdown-body h3 .octicon-link, +.night .markdown-body h4 .octicon-link, +.night .markdown-body h5 .octicon-link, +.night .markdown-body h6 .octicon-link { + color: #fff; +} + .markdown-body h1:hover .anchor, .markdown-body h2:hover .anchor, .markdown-body h3:hover .anchor, @@ -180,6 +201,8 @@ color: #777 } + + .markdown-body ul, .markdown-body ol { padding-left: 2em @@ -246,11 +269,19 @@ background-color: #fff; border-top: 1px solid #ccc; } +.night .markdown-body table tr { + background-color: #5f5f5f; +} .markdown-body table tr:nth-child(2n) { background-color: #f8f8f8; } +.night .markdown-body table tr:nth-child(2n){ + + background-color: #4f4f4f; +} + .markdown-body img { max-width: 100%; box-sizing: content-box; @@ -370,6 +401,14 @@ border-radius: 3px; } +.night .markdown-body code, +.night .markdown-body tt { + + color: #eee; + background-color: rgba(230, 230, 230, 0.36); + +} + .markdown-body code::before, .markdown-body code::after, .markdown-body tt::before, @@ -512,4 +551,4 @@ margin: 0.31em 0 0.2em -1.3em !important; vertical-align: middle; cursor: default !important; -}
\ No newline at end of file +} diff --git a/public/css/index.css b/public/css/index.css index 8f483aa7..b00eba41 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -10,6 +10,16 @@ body { padding-top: 51px; /*overflow: hidden;*/ } + +.night a, +.night .open-files-container li.selected a { + color: #5EB7E0; +} + +body.night{ + background: #333 !important; +} + .CodeMirror { font-family: "Source Code Pro", Consolas, monaco, monospace; letter-spacing: 0.025em; @@ -117,6 +127,11 @@ body { margin-left: 0; margin-right: 0; } + +.night .ui-content{ + background-color: #333; +} + .ui-edit-area { height: 100%; /*padding-left: 15px;*/ @@ -144,6 +159,12 @@ body { .ui-edit-area .ui-sync-toggle:active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125), 2px 0px 2px #e7e7e7; } + +.night .ui-edit-area .ui-resizable-handle.ui-resizable-e{ + background: #3c3c3c; + box-shadow: 3px 0px 6px #353535; +} + .ui-view-area { /*overflow-y: scroll;*/ -webkit-overflow-scrolling: touch; @@ -154,6 +175,13 @@ body { padding-right: 15px; } } + +.night .ui-view-area{ + background: #333; + color: #ededed; +} + + .ui-scrollable { height: 100%; overflow-x: hidden; @@ -238,12 +266,32 @@ body { .navbar-nav > li > a { cursor: pointer; } + +.night .navbar-default .navbar-nav > li > a:focus, +.night .navbar-default .navbar-nav > li > a:hover, +.night .navbar-default .navbar-brand:focus, +.night .navbar-default .navbar-brand:hover{ + color: #fff; +} + +.night .navbar-default .navbar-nav > .open > a, +.night .navbar-default .navbar-nav > .open > a:focus, +.night .navbar-default .navbar-nav > .open > a:hover { + color: white; + background: #000; + +} .dropdown-menu > li > a { cursor: pointer; text-overflow: ellipsis; max-width: calc(100vw - 30px); overflow: hidden; } + +.night .dropdown-menu{ + background: #222; +} + .dropdown-menu.CodeMirror-other-cursor { transition: none; } @@ -276,8 +324,8 @@ div[contenteditable]:empty:not(:focus):before{ max-height: 40vh; overflow: auto; } -.dropdown-menu.list::-webkit-scrollbar { - display: none; +.dropdown-menu.list::-webkit-scrollbar { + display: none; } .dropdown-menu .emoji { margin-bottom: 0 !important; @@ -292,6 +340,16 @@ div[contenteditable]:empty:not(:focus):before{ background: inherit; } +.night .navbar .btn-default{ + background-color: #333; + border-color: #565656; + color: #eee; +} + +.night .btn.btn-default.ui-view.active{ + background: #202020; +} + .btn-file { position: relative; overflow: hidden; @@ -312,6 +370,12 @@ div[contenteditable]:empty:not(:focus):before{ display: block; } +.night .btn.focus, +.night .btn:focus, +.night .btn:hover{ + color: #fff; +} + .info-label { width: 36%; text-align: right; @@ -481,8 +545,8 @@ div[contenteditable]:empty:not(:focus):before{ border: 1px solid #2893ef; } -.status-bar .indent-width-input::-webkit-inner-spin-button, -.status-bar .indent-width-input::-webkit-outer-spin-button { +.status-bar .indent-width-input::-webkit-inner-spin-button, +.status-bar .indent-width-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @@ -524,4 +588,4 @@ div[contenteditable]:empty:not(:focus):before{ .CodeMirror { height: auto !important; } -}
\ No newline at end of file +} diff --git a/public/css/markdown.css b/public/css/markdown.css index ad3a655f..6741729d 100644 --- a/public/css/markdown.css +++ b/public/css/markdown.css @@ -69,6 +69,12 @@ border-collapse: inherit !important; } +.night .markdown-body .gist table tr:nth-child(2n){ + + background-color: #ddd; + +} + .markdown-body code[data-gist-id] { background: none; padding: 0; @@ -93,6 +99,7 @@ .markdown-body code[data-gist-id] table tr { background: unset; + } /*fixed style for rtl in pre and code*/ @@ -121,6 +128,16 @@ white-space: inherit; } +.night .markdown-body pre.graphviz .graph > polygon{ + fill: #333; +} + +.night .markdown-body pre.mermaid .titleText, +.night .markdown-body pre.mermaid text, +.night .markdown-body pre.mermaid .sectionTitle{ + fill: white; +} + .markdown-body pre.flow-chart > code, .markdown-body pre.sequence-diagram > code, .markdown-body pre.graphviz > code, @@ -138,6 +155,27 @@ height: 100%; } +.night .markdown-body .abc path{ + fill: #eee; +} + +.night .markdown-body .abc path.note_selected{ + fill: ##4DD0E1; +} + +.night tspan{ + fill: #fefefe; +} + +.night pre rect{ + fill: transparent; +} + +.night pre.flow-chart rect, +.night pre.flow-chart path{ + stroke: white; +} + .markdown-body pre > code.wrap { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ diff --git a/public/js/index.js b/public/js/index.js index b336af90..5ff716fd 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1633,6 +1633,10 @@ ui.toolbar.view.click(function () { ui.toolbar.both.click(function () { changeMode(modeType.both) }) + +ui.toolbar.night.click(function () { + toggleNightMode() +}) // permission // freely ui.infobar.permission.freely.click(function () { @@ -1666,6 +1670,17 @@ $('.ui-delete-modal-confirm').click(function () { socket.emit('delete') }) +function toggleNightMode () { + var $body = $('body') + var isActive = ui.toolbar.night.hasClass('active') + if (isActive) { + $body.removeClass('night') + appState.nightMode = false + } else { + $body.addClass('night') + appState.nightMode = true + } +} function emitPermission (_permission) { if (_permission !== permission) { socket.emit('permission', _permission) diff --git a/public/js/lib/appState.js b/public/js/lib/appState.js index fb8030e1..87aaf737 100644 --- a/public/js/lib/appState.js +++ b/public/js/lib/appState.js @@ -2,7 +2,8 @@ import modeType from './modeType' let state = { syncscroll: true, - currentMode: modeType.view + currentMode: modeType.view, + nightMode: false } export default state diff --git a/public/js/lib/editor/ui-elements.js b/public/js/lib/editor/ui-elements.js index 0d330d77..88a1e3ca 100644 --- a/public/js/lib/editor/ui-elements.js +++ b/public/js/lib/editor/ui-elements.js @@ -37,6 +37,7 @@ export const getUIElements = () => ({ edit: $('.ui-edit'), view: $('.ui-view'), both: $('.ui-both'), + night: $('.ui-night'), uploadImage: $('.ui-upload-image') }, infobar: { diff --git a/public/views/hackmd/header.ejs b/public/views/hackmd/header.ejs index 80df2c77..b87f21fa 100644 --- a/public/views/hackmd/header.ejs +++ b/public/views/hackmd/header.ejs @@ -96,6 +96,11 @@ <input type="radio" name="mode" autocomplete="off"><i class="fa fa-pencil"></i> </label> </div> + <div class="btn-group" data-toggle="buttons"> + <label class="btn ui-night" title="<%= __('Night Theme') %>"> + <input type="checkbox" name="night"><i class="fa fa-moon-o"></i> + </label> + </div> <span class="btn btn-link btn-file ui-help" title="<%= __('Help') %>" data-toggle="modal" data-target=".help-modal"> <i class="fa fa-question-circle"></i> </span> |