From 6fc2c39eda766cffc7ef5c9e1d3d3cbce8ab7590 Mon Sep 17 00:00:00 2001 From: Edoardo Odorico Date: Thu, 28 Dec 2017 19:21:52 +0100 Subject: :sparkles: Implemented dark theme. Signed-off-by: Edoardo Odorico --- public/css/extra.css | 31 +++++++++++++++--- public/css/github-extract.css | 41 +++++++++++++++++++++++- public/css/index.css | 74 ++++++++++++++++++++++++++++++++++++++++--- public/css/markdown.css | 38 ++++++++++++++++++++++ 4 files changed, 174 insertions(+), 10 deletions(-) (limited to 'public/css') 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 */ -- cgit v1.2.3