Created
April 25, 2020 22:23
-
-
Save trailjeep/d1fe34e54fd584d47edb97a756fa085b to your computer and use it in GitHub Desktop.
Shaarli Markdown Toolbar Plugin Dark CSS (Unminified) (Ref: https://github.com/immanuelfodor/shaarli-markdown-toolbar)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.md-editor { | |
display: block; | |
border: 1px solid #888; | |
} | |
.md-editor .md-footer, | |
.md-editor > .md-header { | |
display: block; | |
padding: 6px 4px; | |
background: #333; | |
} | |
.md-editor > .md-header { | |
margin: 0; | |
} | |
.md-editor > .md-preview { | |
background: #444; | |
border-top: 1px dashed #888; | |
border-bottom: 1px dashed #ddd; | |
min-height: 10px; | |
overflow: auto; | |
} | |
.md-editor > textarea { | |
font-family: Menlo,Monaco,Consolas,"Courier New",monospace; | |
font-size: 14px; | |
outline: 0; | |
margin: 0; | |
display: block; | |
padding: 0; | |
width: 100%; | |
border: 0; | |
border-top: 1px dashed #888; | |
border-bottom: 1px dashed #888; | |
border-radius: 0; | |
box-shadow: none; | |
background: #444; | |
} | |
.md-editor > textarea:focus { | |
box-shadow: none; | |
background: #444; | |
} | |
.md-editor.active { | |
border-color: #888; | |
outline: 0; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); | |
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); | |
} | |
.md-editor .md-controls { | |
float: right; | |
padding: 3px; | |
} | |
.md-editor .md-controls .md-control { | |
right: 5px; | |
color: #bbb; | |
padding: 3px 3px 3px 10px; | |
} | |
.md-editor .md-controls .md-control:hover { | |
color: #bbb; | |
} | |
.md-editor.md-fullscreen-mode { | |
width: 100%; | |
height: 100%; | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: 99999; | |
padding: 60px 30px 15px; | |
background: #333 !important; | |
border: 0!important; | |
} | |
.md-editor.md-fullscreen-mode .md-footer { | |
display: none; | |
} | |
.md-editor.md-fullscreen-mode .md-input, | |
.md-editor.md-fullscreen-mode .md-preview { | |
margin: 0 auto!important !important; | |
height: 100%!important; | |
font-size: 20px!important; | |
padding: 20px!important !important; | |
color: #999; | |
line-height: 1.6em!important; | |
resize: none!important; | |
box-shadow: none!important; | |
background: #333!important; | |
border: 0!important; | |
} | |
.md-editor.md-fullscreen-mode .md-preview { | |
color: #bbb; | |
overflow: auto; | |
} | |
.md-editor.md-fullscreen-mode .md-input:focus, | |
.md-editor.md-fullscreen-mode .md-input:hover { | |
color: #bbb; | |
background: #444 !important; | |
} | |
.md-editor.md-fullscreen-mode .md-header { | |
background: 0 0; | |
text-align: center; | |
position: fixed; | |
width: 100%; | |
top: 20px; | |
} | |
.md-editor.md-fullscreen-mode .btn-group { | |
float: none; | |
} | |
.md-editor.md-fullscreen-mode .btn { | |
border: 0; | |
background: 0 0; | |
color: #bbb; | |
} | |
.md-editor.md-fullscreen-mode .btn.active, | |
.md-editor.md-fullscreen-mode .btn:active, | |
.md-editor.md-fullscreen-mode .btn:focus, | |
.md-editor.md-fullscreen-mode .btn:hover { | |
box-shadow: none; | |
color: #bbb; | |
} | |
.md-editor.md-fullscreen-mode .md-fullscreen-controls { | |
position: absolute; | |
top: 20px; | |
right: 20px; | |
text-align: right; | |
z-index: 1002; | |
display: block; | |
} | |
.md-editor.md-fullscreen-mode .md-fullscreen-controls a { | |
color: #b3b3b3; | |
clear: right; | |
margin: 10px; | |
width: 30px; | |
height: 30px; | |
text-align: center; | |
} | |
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover { | |
color: #333; | |
text-decoration: none; | |
} | |
.md-editor.md-fullscreen-mode .md-editor { | |
height: 100%!important; | |
position: relative; | |
} | |
.md-editor .md-fullscreen-controls { | |
display: none; | |
} | |
.md-nooverflow { | |
overflow: hidden; | |
position: fixed; | |
width: 100%; | |
} | |
.pure-g .md-editor { | |
width: 90%; | |
margin: 10px auto; | |
} | |
.pure-g .md-header.btn-toolbar { | |
text-align: left; | |
} | |
.pure-g .md-editor textarea { | |
margin-left: 1px !important; | |
width: 99.7% !important; | |
} | |
.pure-g .md-editor.md-fullscreen-mode { | |
width: 100%; | |
} | |
.pure-g .md-editor.md-fullscreen-mode .md-header.btn-toolbar { | |
text-align: center; | |
margin-top: 30px !important; | |
} | |
.pure-g .md-editor.md-fullscreen-mode .md-fullscreen-controls { | |
top: 45px; | |
right: 60px; | |
} | |
.pure-g .md-editor.md-fullscreen-mode textarea { | |
margin-top: 30px !important; | |
width: 100% !important; | |
} | |
@media only screen and (max-width: 480px) { | |
.md-editor.md-fullscreen-mode { | |
padding: 60px 15px 15px !important; | |
} | |
.md-editor.md-fullscreen-mode .md-input, | |
.md-editor.md-fullscreen-mode .md-preview { | |
padding: 20px 0 !important; | |
font-size: 15px !important; | |
} | |
} | |
@media only screen and (min-width: 481px) and (max-width: 680px) { | |
.md-editor.md-fullscreen-mode { | |
padding: 60px 22px 15px !important; | |
} | |
.md-editor.md-fullscreen-mode .md-input, | |
.md-editor.md-fullscreen-mode .md-preview { | |
padding: 20px 5px !important; | |
font-size: 17px !important; | |
} | |
} | |
@media only screen and (max-width: 680px) { | |
.md-editor.md-fullscreen-mode .md-header { | |
margin-left: -30px !important; | |
} | |
.md-editor.md-fullscreen-mode .md-control-fullscreen { | |
display: none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment