applications/storybook/.storybook/prismjs.css

   1 /* prism */
   2 /**
   3  * prism.js default theme for JavaScript, CSS and HTML
   4  * Based on dabblet (http://dabblet.com)
   5  * @author Lea Verou
   6  */
   7 code {
   8     display: inline-block !important;
   9     font-size: 1.1em !important;
  10     padding: 0.25em !important;
  11     border-radius: 5px !important;
  12     background: #f6f7fa !important !important;
  13     line-height: 1 !important;
  14 }
  15
  16 code[class*='language-'],
  17 pre[class*='language-'] {
  18     width: 100% !important;
  19     color: black !important;
  20     text-shadow: 0 1px white !important;
  21     font-family: Consolas, Monaco, monospace !important;
  22     text-align: left !important;
  23     /*white-space: pre !important;*/
  24     word-spacing: normal !important;
  25     font-size: 1.6rem !important;
  26     -moz-tab-size: 4 !important;
  27     -o-tab-size: 4 !important;
  28     tab-size: 4 !important;
  29     -webkit-hyphens: none !important;
  30     -moz-hyphens: none !important;
  31     -ms-hyphens: none !important;
  32     hyphens: none !important;
  33     border-radius: 5px !important;
  34 }
  35
  36 [dir='rtl'] code[class*='language-'],
  37 [dir='rtl'] pre[class*='language-'] {
  38     text-align: right !important;
  39 }
  40
  41 [dir='ltr'] code[class*='language-'],
  42 [dir='ltr'] pre[class*='language-'] {
  43     text-align: left !important;
  44 }
  45
  46 /* Code blocks */
  47 pre[class*='language-'] {
  48     padding: 1em !important;
  49     margin: 0.5em 0 !important;
  50     overflow: auto !important;
  51 }
  52
  53 pre[class*='language-'].m-0 {
  54     margin: 0 !important;
  55 }
  56
  57 :not(pre) > code[class*='language-'],
  58 pre[class*='language-'] {
  59     background: #f6f7fa !important;
  60 }
  61
  62 /* Inline code */
  63 :not(pre) > code[class*='language-'] {
  64     padding: 0.1em !important;
  65     border-radius: 0.3em !important;
  66     font-size: 0.8em !important;
  67 }
  68
  69 .token.comment,
  70 .token.prolog,
  71 .token.doctype,
  72 .token.cdata {
  73     color: #344559 !important;
  74 }
  75
  76 .token.punctuation {
  77     color: #4a4646 !important !important;
  78 }
  79
  80 .namespace {
  81     opacity: 0.7 !important;
  82 }
  83
  84 .token.property,
  85 .token.tag,
  86 .token.boolean,
  87 .token.number,
  88 .token.function,
  89 .token.class-name,
  90 .token.constant {
  91     color: #905 !important;
  92 }
  93
  94 .token.selector,
  95 .token.attr-name,
  96 .token.string {
  97     color: #085300 !important;
  98 }
  99
 100 .token.operator,
 101 .token.entity,
 102 .token.url,
 103 .language-css .token.string,
 104 .style .token.string {
 105     color: #803c24 !important !important;
 106     background: rgba(255, 255, 255, 0.5) !important;
 107 }
 108
 109 .token.atrule,
 110 .token.attr-value,
 111 .token.keyword {
 112     color: #0227a9 !important;
 113 }
 114
 115 .token.regex,
 116 .token.important {
 117     color: #e90 !important;
 118 }
 119
 120 .token.important {
 121     font-weight: bold !important;
 122 }
 123
 124 .token.entity {
 125     cursor: help !important;
 126 }
 127
 128 @media (prefers-color-scheme: dark) {
 129     code {
 130         background: #262a33 !important;
 131     }
 132
 133     code[class*='language-'],
 134     pre[class*='language-'] {
 135         color: #ccc !important;
 136         background: none !important;
 137         font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
 138         text-shadow: none !important;
 139         font-size: 1.4rem !important;
 140         text-align: left !important;
 141         white-space: pre !important;
 142         word-spacing: normal !important;
 143         word-break: normal !important;
 144         word-wrap: normal !important;
 145         line-height: 1.5 !important;
 146         -moz-tab-size: 4 !important;
 147         -o-tab-size: 4 !important;
 148         tab-size: 4 !important;
 149         -webkit-hyphens: none !important;
 150         -moz-hyphens: none !important;
 151         -ms-hyphens: none !important;
 152         hyphens: none !important;
 153     }
 154
 155     /* Code blocks */
 156     pre[class*='language-'] {
 157         padding: 1em !important;
 158         margin: 0.5em 0 !important;
 159         overflow: auto !important;
 160     }
 161
 162     :not(pre) > code[class*='language-'],
 163     pre[class*='language-'] {
 164         background: #2d2d2d !important;
 165     }
 166
 167     /* Inline code */
 168     :not(pre) > code[class*='language-'] {
 169         padding: 0.1em !important;
 170         border-radius: 0.3em !important;
 171         white-space: normal !important;
 172     }
 173
 174     .token.comment,
 175     .token.block-comment,
 176     .token.prolog,
 177     .token.doctype,
 178     .token.cdata {
 179         color: #999 !important;
 180     }
 181
 182     .token.punctuation {
 183         color: #ccc !important;
 184     }
 185
 186     .token.tag,
 187     .token.attr-name,
 188     .token.namespace,
 189     .token.deleted {
 190         color: #e2777a !important;
 191     }
 192
 193     .token.function-name {
 194         color: #6196cc !important;
 195     }
 196
 197     .token.boolean,
 198     .token.number,
 199     .token.function {
 200         color: #f08d49 !important;
 201     }
 202
 203     .token.property,
 204     .token.class-name,
 205     .token.constant,
 206     .token.symbol {
 207         color: #f8c555 !important;
 208     }
 209
 210     .token.selector,
 211     .token.important,
 212     .token.atrule,
 213     .token.keyword,
 214     .token.builtin {
 215         color: #cc99cd !important;
 216     }
 217
 218     .token.string,
 219     .token.char,
 220     .token.attr-value,
 221     .token.regex,
 222     .token.variable {
 223         color: #7ec699 !important;
 224     }
 225
 226     .token.operator,
 227     .token.entity,
 228     .token.url {
 229         color: #67cdcc !important;
 230     }
 231
 232     .token.important,
 233     .token.bold {
 234         font-weight: bold !important;
 235     }
 236
 237     .token.italic {
 238         font-style: italic !important;
 239     }
 240
 241     .token.entity {
 242         cursor: help !important;
 243     }
 244
 245     .token.inserted {
 246         color: green !important;
 247     }
 248 }