skyquake/framework/widgets/JSONViewer/JSONViewer.scss

   1 .JSONViewer {
   2         max-width: 640px;
   3         /*
   4         copied from node_modules/prismjs/themes/prismjs.css
   5 */
   6         :not(pre) > code[class*="language-"],
   7         pre[class*="language-"] {
   8                 font-size: 12px;
   9                 /* border: 1px solid rgba(220, 220, 220, 0.5);*/
  10                 border-radius: 4px;
  11                 background-color: rgba(255, 255, 255, .25);
  12                 overflow:auto;
  13         }
  14
  15         /* Inline code */
  16         :not(pre) > code[class*="language-"] {
  17                 padding: .1em;
  18         }
  19
  20         .token.comment,
  21         .token.prolog,
  22         .token.doctype,
  23         .token.cdata {
  24                 color: slategray;
  25         }
  26
  27         .token.punctuation {
  28                 color: #333;
  29         }
  30
  31         .namespace {
  32                 opacity: .7;
  33         }
  34
  35         .token.property,
  36         .token.tag,
  37         .token.boolean,
  38         .token.number,
  39         .token.constant,
  40         .token.symbol,
  41         .token.deleted {
  42                 color: #905;
  43         }
  44
  45         .token.selector,
  46         .token.attr-name,
  47         .token.string,
  48         .token.char,
  49         .token.builtin,
  50         .token.inserted {
  51                 color: #df5000;
  52         }
  53
  54         .token.operator,
  55         .token.entity,
  56         .token.url,
  57         .language-css .token.string,
  58         .style .token.string {
  59                 color: #a67f59;
  60                 background: none !important;
  61         }
  62
  63         .token.atrule,
  64         .token.attr-value,
  65         .token.keyword {
  66                 color: #07a;
  67         }
  68
  69         .token.function {
  70                 color: #DD4A68;
  71         }
  72
  73         .token.regex,
  74         .token.important,
  75         .token.variable {
  76                 color: #e90;
  77         }
  78
  79         .token.important,
  80         .token.bold {
  81                 font-weight: bold;
  82         }
  83         .token.italic {
  84                 font-style: italic;
  85         }
  86
  87         .token.entity {
  88                 cursor: help;
  89         }
  90 }
  91
  92 .composerPopout {
  93         background-color: #f1f1f1;
  94         h1 {
  95                         height: 51px;
  96                         line-height: 51px;
  97                         margin-left: 80px;
  98                         padding-left: 118px;
  99                         position: absolute;
 100                         left: 0;
 101                         text-transform: uppercase;
 102                         font-size: 1.625rem;
 103                         font-weight: normal;
 104         }
 105 }