wcfsetup/install/files/style/bbcode/code.scss

   1 .redactor-layer pre {
   2         background-color: rgb(255, 255, 255) !important;
   3         box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
   4         border-radius: 2px;
   5         color: rgb(68, 68, 68) !important;
   6         font-family: Consolas, 'Courier New', monospace;
   7         margin: 1em 0;
   8         padding: 10px 20px;
   9         position: relative;
  10         white-space: pre-wrap;
  11         word-break: break-all;
  12         word-wrap: break-word;
  13
  14         &:not(.redactorCalcHeight)::before,
  15         &.woltlabHtml::before {
  16                 color: $wcfContentLink;
  17                 content: attr(data-title);
  18                 cursor: pointer;
  19                 display: block;
  20                 font-family: $wcfFontFamily;
  21                 margin-bottom: 20px;
  22
  23                 @include wcfFontHeadline;
  24         }
  25
  26         &.woltlabHtml {
  27                 &::before {
  28                         margin-bottom: 30px;
  29                 }
  30
  31                 &::after {
  32                         color: $wcfContentDimmedText;
  33                         content: attr(data-description);
  34                         cursor: pointer;
  35                         display: block;
  36                         font-family: $wcfFontFamily;
  37                         position: absolute;
  38                         top: 32px;
  39
  40                         @include wcfFontSmall;
  41                 }
  42         }
  43 }
  44
  45 .codeBox {
  46         background-color: $wcfContentBackground;
  47         box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  48         border-radius: 2px;
  49         clear: both;
  50         margin: 1em 0;
  51         overflow: hidden;
  52         padding: 10px;
  53         position: relative;
  54
  55         &.collapsed {
  56                 max-height: 200px;
  57
  58                 > .toggleButton {
  59                         bottom: 0;
  60                         box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, .9);
  61                         left: 0;
  62                         padding-bottom: 10px;
  63                         position: absolute;
  64                         right: 0;
  65                         z-index: 1;
  66                 }
  67         }
  68
  69         > div {
  70                 > .codeBoxHeader {
  71                         align-items: center;
  72                         display: flex;
  73
  74                         /* required to avoid layout jumping caused by the dynamically added 24px button */
  75                         min-height: 24px;
  76
  77                         > .codeBoxHeadline {
  78                                 flex: 1 1 auto;
  79                                 padding: 0 10px;
  80
  81                                 @include wcfFontHeadline;
  82                         }
  83                 }
  84
  85                 > .codeBoxCode {
  86                         padding-left: 7ch;
  87
  88                         > code {
  89                                 display: block;
  90                                 overflow-x: auto;
  91                                 font-family: Consolas, 'Courier New', monospace;
  92
  93                                 .codeBoxLine {
  94                                         > a {
  95                                                 margin-left: -7ch;
  96                                                 overflow: hidden;
  97                                                 position: absolute;
  98                                                 text-align: right;
  99                                                 text-overflow: ellipsis;
 100                                                 white-space: nowrap;
 101                                                 /* No one has line numbers greater than 999999 */
 102                                                 width: 6ch;
 103
 104                                                 &::before {
 105                                                         content: attr(title);
 106                                                 }
 107                                         }
 108
 109                                         > span {
 110                                                 white-space: pre-wrap;
 111                                                 word-break: break-all;
 112                                         }
 113
 114                                         &:target {
 115                                                 background-color: rgba(255, 255, 102, 1);
 116                                         }
 117                                 }
 118                         }
 119                 }
 120         }
 121
 122         > .toggleButton {
 123                 background-color: opacify($wcfContentBackground, .9);
 124                 cursor: pointer;
 125                 display: block;
 126                 padding: 10px 20px 0 10px;
 127                 text-align: center;
 128
 129                 @include wcfFontSmall;
 130         }
 131 }
 132
 133
 134 /* PrismJS 1.15.0
 135 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=autoloader */
 136 /**
 137  * prism.js default theme for JavaScript, CSS and HTML
 138  * Based on dabblet (http://dabblet.com)
 139  * @author Lea Verou
 140  */
 141
 142  .token.comment,
 143  .token.prolog,
 144  .token.doctype,
 145  .token.cdata {
 146          color: slategray;
 147  }
 148
 149  .token.punctuation {
 150          color: #999;
 151  }
 152
 153  .namespace {
 154          opacity: .7;
 155  }
 156
 157  .token.property,
 158  .token.tag,
 159  .token.boolean,
 160  .token.number,
 161  .token.constant,
 162  .token.symbol,
 163  .token.deleted {
 164          color: #905;
 165  }
 166
 167  .token.selector,
 168  .token.attr-name,
 169  .token.string,
 170  .token.char,
 171  .token.builtin,
 172  .token.inserted {
 173          color: #690;
 174  }
 175
 176  .token.operator,
 177  .token.entity,
 178  .token.url,
 179  .language-css .token.string,
 180  .style .token.string {
 181          color: #9a6e3a;
 182          background: hsla(0, 0%, 100%, .5);
 183  }
 184
 185  .token.atrule,
 186  .token.attr-value,
 187  .token.keyword {
 188          color: #07a;
 189  }
 190
 191  .token.function,
 192  .token.class-name {
 193          color: #DD4A68;
 194  }
 195
 196  .token.regex,
 197  .token.important,
 198  .token.variable {
 199          color: #e90;
 200  }
 201
 202  .token.important,
 203  .token.bold {
 204          font-weight: bold;
 205  }
 206  .token.italic {
 207          font-style: italic;
 208  }
 209
 210  .token.entity {
 211          cursor: help;
 212  }
 213