jsbin dark theme and tweaks.
// ==UserScript==
// @name jsbin dark theme and tweaks
// @namespace yuze
// @version 0.2
// @description jsbin dark theme and tweaks.
// @author yuze
// @match https://jsbin.com/*
// @run-at document-idle
// @grant none
// ==/UserScript==
$('body').append(`
<style>
/* BEGIN visibility tweaks */
.bsaapi main{
height: calc(100% + 40px);
margin-top: -40px;
}
.stretch{
border: 0px solid black !important;
}
#control{
margin-top: 17px;
transition: 256ms;
opacity: 0;
background: #1E1E1E !important;
border: none;
box-shadow: 0px 32px 32px rgba(0,0,0,0.1314), 0 8px 12px rgba(0,0,0,0.18)
}
#control:hover{
margin-top: 40px;
position: fixed;
opacity: 1;
}
#toppanel img{
opacity: 0;
}
#toppanel img:hover{
opacity: 1;
}
.label, .label.menu{
z-index:9;
padding-bottom: 6px;
}
.label .options{
position: fixed;
bottom: 12px;
right: 12px;
}
.name a, .name{
color: gainsboro !important;
font-weight: bold !important;
}
.card{
transition: 256ms;
opacity: 0;
bottom: 48px;
}
.card:hover{
opacity: 1;
}
button {
transition: 314ms;
background: #007ACC !important;
border: 0;
color: white !important;
padding: 6px 12px;
opacity: 0;
}
button:hover {
opacity: 1;
}
#bin .editbox .CodeMirror pre, .CodeMirror-linenumber {
font-family: 'SFMono-Regular', Consolas, monospace !important;
font-size: 15px;
line-height: 22px;
font-weight: normal !important;
}
#live{
margin-top: -31px;
}
/* END visibility tweaks */
/* BEGIN console theme */
.stretch.console.panel, .CodeMirror-gutter{
color: #D4D4D4 !important;
background-color: rgb(30, 30, 30) !important;
}
li.true, li.true .str{
border-color: #3C3C3C !important;
color: #6A9955 !important;
}
li.error{
border-color: #5B0000 !important;
border-bottom: 1px solid #5B0000 !important;
padding-bottom: 8px !important;
color: #FE7F7F !important;
background: #280000 !important;
}
li.true .kwd, li.true .lit{
color: #9980FF !important;
}
li.true .typ{
color: #569CD6 !important;
}
li.true .pun, li.true .pln{
color: #D4D4D4 !important;
}
li.true .com{
color: #D7BA7D !important;
}
.CodeMirror-lint-mark-warning {
background-image: none;
border-bottom: 1px dotted #569CD6 !important;
}
/* END console theme */
/* BEGIN theme */
.CodeMirror { background-color: rgb(30, 30, 30); color: #D4D4D4 !important; }
div.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: #264F78 !important; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #264F78 !important; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #264F78 !important; }
.CodeMirror-gutters { background-color: rgb(30, 30, 30); border-right: 0px; }
.CodeMirror-guttermarker { color: #ac4142 !important; }
.CodeMirror-guttermarker-subtle { color: #505050 !important; }
.CodeMirror-linenumber { color: #505050 !important; }
.CodeMirror-cursor { border-left: 2px solid #b0b0b0 !important; }
.CodeMirror-highlight-line, .CodeMirror-highlight-line .CodeMirror-linenumber, .CodeMirror-highlight-line-background { background: #311B92 !important; }
span.cm-comment { color: #6A9955 !important; }
span.cm-atom { color: #D4D4D4 !important; }
span.cm-number { color: #B5CEA8 !important; }
span.cm-property, span.cm-attribute, span.cm-operator { color: #D4D4D4 !important; }
span.cm-keyword { color: #569CD6 !important; }
span.cm-string { color: #CE9178 !important; }
span.cm-variable { color: #D4D4D4 !important; }
span.cm-builtin { color: #d7ba7d !important; }
span.cm-meta { color: #3e9cd6 !important; }
span.cm-qualifier { color: #d7ba7d !important; }
span.cm-variable-2 { color: #D4D4D4 !important; }
span.cm-def { color: #D4D4D4 !important; }
span.cm-bracket { color: #6D6D6D !important; }
span.cm-tag { color: #569CD6 !important; }
span.cm-link { color: #D7BA7D !important; }
span.cm-error { background: #280000 !important; color: #FE7F7F !important; }
.CodeMirror-activeline-gutter, .CodeMirror-activeline-background { background-color: rgb(45, 45, 45); }
.CodeMirror-lint-mark-error {
background-image: none;
border-bottom: 1px dotted #af2d2d !important;
}
/* END theme */
.CodeMirror-vscrollbar::-webkit-scrollbar,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
#console::-webkit-scrollbar,
#console::-webkit-scrollbar-thumb{
width: 16px;
background-clip: padding-box;
color: #2d2d2d;
border: 5px solid #1e1e1e;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
#console::-webkit-scrollbar-thumb{
box-shadow: inset 0 0 0 10px;
}
#cursor {
color: #5b9dff;
}
</style>
`)
window.addEventListener('load', keyListener)
function keyListener() {
window.addEventListener('keydown', keyActions)
}
function keyActions(e) {
if ( e.ctrlKey && e.key == 'l' ) {
e.preventDefault()
clearconsole.click()
}
if ( e.altKey && e.key == '1' ) {
$('#panels').children().eq(0)[0].click()
}
if ( e.altKey && e.key == '2' ) {
$('#panels').children().eq(1)[0].click()
}
if ( e.altKey && e.key == '3' ) {
$('#panels').children().eq(2)[0].click()
}
if ( e.altKey && e.key == '4' ) {
$('#panels').children().eq(3)[0].click()
}
if ( e.altKey && e.key == '5' ) {
$('#panels').children().eq(4)[0].click()
}
}