☰

jsbin dark theme and tweaks

jsbin dark theme and tweaks.

  1. // ==UserScript==
  2. // @name         jsbin dark theme and tweaks
  3. // @namespace    yuze
  4. // @version      0.2
  5. // @description  jsbin dark theme and tweaks.
  6. // @author       yuze
  7. // @match        https://jsbin.com/*
  8. // @run-at       document-idle
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. $('body').append(`
  13. <style>
  14. /* BEGIN visibility tweaks */
  15. .bsaapi main{
  16.     height: calc(100% + 40px);
  17.     margin-top: -40px;
  18. }
  19. .stretch{
  20.     border: 0px solid black !important;
  21. }
  22. #control{
  23.     margin-top: 17px;
  24.     transition: 256ms;
  25.     opacity: 0;
  26.     background: #1E1E1E !important;
  27.     border: none;
  28.     box-shadow: 0px 32px 32px rgba(0,0,0,0.1314), 0 8px 12px rgba(0,0,0,0.18)
  29. }
  30. #control:hover{
  31.     margin-top: 40px;
  32.     position: fixed;
  33.     opacity: 1;
  34. }
  35. #toppanel img{
  36.      opacity: 0;
  37. }
  38. #toppanel img:hover{
  39.      opacity: 1;
  40. }
  41. .label, .label.menu{
  42.     z-index:9;
  43.     padding-bottom: 6px;
  44. }
  45. .label .options{
  46.     position: fixed;
  47.     bottom: 12px;
  48.     right: 12px;
  49. }
  50. .name a, .name{
  51.     color: gainsboro !important;
  52.     font-weight: bold !important;
  53. }
  54. .card{
  55.     transition: 256ms;
  56.     opacity: 0;
  57.     bottom: 48px;
  58. }
  59. .card:hover{
  60.     opacity: 1;
  61. }
  62. button {
  63.     transition: 314ms;
  64.     background: #007ACC !important;
  65.     border: 0;
  66.     color: white !important;
  67.     padding: 6px 12px;
  68.     opacity: 0;
  69. }
  70. button:hover {
  71.     opacity: 1;
  72. }
  73. #bin .editbox .CodeMirror pre, .CodeMirror-linenumber {
  74.     font-family: 'SFMono-Regular', Consolas, monospace !important;
  75.     font-size: 15px;
  76.     line-height: 22px;
  77.     font-weight: normal !important;
  78. }
  79. #live{
  80.     margin-top: -31px;
  81. }
  82. /* END visibility tweaks */
  83.  
  84. /* BEGIN console theme */
  85.  
  86. .stretch.console.panel, .CodeMirror-gutter{
  87.     color: #D4D4D4 !important;
  88.     background-color: rgb(30, 30, 30) !important;
  89. }
  90.  
  91. li.true, li.true .str{
  92.     border-color: #3C3C3C !important;
  93.     color: #6A9955 !important;
  94. }
  95. li.error{
  96.     border-color: #5B0000 !important;
  97.     border-bottom: 1px solid #5B0000 !important;
  98.     padding-bottom: 8px !important;
  99.     color: #FE7F7F !important;
  100.     background: #280000 !important;
  101. }
  102. li.true .kwd, li.true .lit{
  103.     color: #9980FF !important;
  104. }
  105. li.true .typ{
  106.     color: #569CD6 !important;
  107. }
  108. li.true .pun, li.true .pln{
  109.     color: #D4D4D4 !important;
  110. }
  111. li.true .com{
  112.     color: #D7BA7D !important;
  113. }
  114. .CodeMirror-lint-mark-warning {
  115.     background-image: none;
  116.     border-bottom: 1px dotted #569CD6 !important;
  117. }
  118.  
  119. /* END console theme */
  120.  
  121. /* BEGIN theme */
  122.  
  123.  
  124.  
  125. .CodeMirror { background-color: rgb(30, 30, 30); color: #D4D4D4 !important; }
  126. div.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: #264F78 !important; }
  127. .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #264F78 !important; }
  128. .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #264F78 !important; }
  129. .CodeMirror-gutters { background-color: rgb(30, 30, 30); border-right: 0px; }
  130. .CodeMirror-guttermarker { color: #ac4142 !important; }
  131. .CodeMirror-guttermarker-subtle { color: #505050 !important; }
  132. .CodeMirror-linenumber { color: #505050 !important; }
  133. .CodeMirror-cursor { border-left: 2px solid #b0b0b0 !important; }
  134.  
  135. .CodeMirror-highlight-line, .CodeMirror-highlight-line .CodeMirror-linenumber, .CodeMirror-highlight-line-background { background: #311B92 !important; }
  136.  
  137. span.cm-comment { color: #6A9955 !important; }
  138. span.cm-atom { color: #D4D4D4 !important; }
  139. span.cm-number { color: #B5CEA8 !important; }
  140.  
  141. span.cm-property, span.cm-attribute, span.cm-operator { color: #D4D4D4 !important; }
  142. span.cm-keyword { color: #569CD6 !important; }
  143. span.cm-string { color: #CE9178 !important; }
  144.  
  145. span.cm-variable { color: #D4D4D4 !important; }
  146. span.cm-builtin { color: #d7ba7d !important; }
  147. span.cm-meta { color: #3e9cd6 !important; }
  148. span.cm-qualifier { color: #d7ba7d !important; }
  149. span.cm-variable-2 { color: #D4D4D4 !important; }
  150. span.cm-def { color: #D4D4D4 !important; }
  151. span.cm-bracket { color: #6D6D6D !important; }
  152. span.cm-tag { color: #569CD6 !important; }
  153. span.cm-link { color: #D7BA7D !important; }
  154. span.cm-error { background: #280000 !important; color: #FE7F7F !important; }
  155.  
  156. .CodeMirror-activeline-gutter, .CodeMirror-activeline-background { background-color: rgb(45, 45, 45); }
  157. .CodeMirror-lint-mark-error {
  158.     background-image: none;
  159.     border-bottom: 1px dotted #af2d2d !important;
  160. }
  161.  
  162. /* END theme */
  163.  
  164. .CodeMirror-vscrollbar::-webkit-scrollbar,
  165. .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
  166. #console::-webkit-scrollbar,
  167. #console::-webkit-scrollbar-thumb{
  168.   width: 16px;
  169.   background-clip: padding-box;
  170.     color: #2d2d2d;
  171.   border: 5px solid #1e1e1e;
  172. }
  173.  
  174. .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
  175. #console::-webkit-scrollbar-thumb{        
  176.   box-shadow: inset 0 0 0 10px;
  177. }
  178.  
  179. #cursor {
  180.     color: #5b9dff;
  181. }
  182.  
  183. </style>
  184. `)
  185.  
  186.  
  187. window.addEventListener('load', keyListener)
  188.  
  189. function keyListener() {
  190.    window.addEventListener('keydown', keyActions)
  191. }
  192.  
  193. function keyActions(e) {
  194.     if ( e.ctrlKey && e.key == 'l' ) {
  195.         e.preventDefault()
  196.         clearconsole.click()
  197.     }
  198.         if ( e.altKey && e.key == '1' ) {
  199.         $('#panels').children().eq(0)[0].click()
  200.     }
  201.             if ( e.altKey && e.key == '2' ) {
  202.         $('#panels').children().eq(1)[0].click()
  203.     }
  204.             if ( e.altKey && e.key == '3' ) {
  205.         $('#panels').children().eq(2)[0].click()
  206.     }
  207.             if ( e.altKey && e.key == '4' ) {
  208.         $('#panels').children().eq(3)[0].click()
  209.     }
  210.             if ( e.altKey && e.key == '5' ) {
  211.         $('#panels').children().eq(4)[0].click()
  212.     }
  213. }