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         padding: 10px;
  52         position: relative;
  53
  54         &.collapsed {
  55                 .codeBoxCode {
  56                         max-height: 200px;
  57                         overflow: hidden;
  58                 }
  59
  60                 > .toggleButton {
  61                         bottom: 0;
  62                         left: 0;
  63                         padding-bottom: 10px;
  64                         position: absolute;
  65                         right: 0;
  66                         z-index: 1;
  67
  68                         &::before {
  69                                 background-image: linear-gradient(to top, opacify($wcfContentBackground, .9), transparentize($wcfContentBackground, 1));
  70                                 content: "";
  71                                 height: 60px;
  72                                 left: 0;
  73                                 pointer-events: none;
  74                                 position: absolute;
  75                                 right: 0;
  76                                 top: -60px;
  77                         }
  78                 }
  79         }
  80
  81         .codeBoxHeader {
  82                 position: sticky;
  83                 top: 50px;
  84                 z-index: 1;
  85                 padding: 10px 10px 10px;
  86                 margin: -10px -10px 0;
  87                 background-color: $wcfContentBackground;
  88
  89                 align-items: center;
  90                 display: flex;
  91
  92                 /* required to avoid layout jumping caused by the dynamically added 24px button */
  93                 min-height: 24px;
  94
  95                 > .codeBoxHeadline {
  96                         flex: 1 1 auto;
  97                         padding: 0 10px;
  98
  99                         @include wcfFontHeadline;
 100                 }
 101         }
 102
 103         .codeBoxCode {
 104                 position: relative;
 105                 padding-left: 7ch;
 106
 107                 > code {
 108                         display: block;
 109                         overflow-x: auto;
 110                         font-family: Consolas, 'Courier New', monospace;
 111
 112                         .codeBoxLine {
 113                                 > a {
 114                                         margin-left: -7ch;
 115                                         overflow: hidden;
 116                                         position: absolute;
 117                                         text-align: right;
 118                                         text-overflow: ellipsis;
 119                                         white-space: nowrap;
 120                                         /* No one has line numbers greater than 999999 */
 121                                         width: 6ch;
 122
 123                                         &::before {
 124                                                 content: attr(title);
 125                                         }
 126                                 }
 127
 128                                 > span {
 129                                         white-space: pre-wrap;
 130                                         word-break: break-all;
 131                                 }
 132
 133                                 &:target {
 134                                         background-color: rgba(255, 255, 102, 1);
 135                                 }
 136                         }
 137                 }
 138         }
 139
 140         > .toggleButton {
 141                 background-color: opacify($wcfContentBackground, .9);
 142                 cursor: pointer;
 143                 display: block;
 144                 padding: 10px 20px 0 10px;
 145                 text-align: center;
 146
 147                 @include wcfFontSmall;
 148         }
 149 }
 150
 151 .anchorFixedHeader:not(.disableAnchorFixedHeader):target .codeBoxHeader {
 152         top: -30px; /* see wsc31.scss */
 153 }
 154
 155
 156 /* PrismJS 1.15.0
 157 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=autoloader */
 158 /**
 159  * prism.js default theme for JavaScript, CSS and HTML
 160  * Based on dabblet (http://dabblet.com)
 161  * @author Lea Verou
 162  */
 163
 164  .token.comment,
 165  .token.prolog,
 166  .token.doctype,
 167  .token.cdata {
 168          color: slategray;
 169  }
 170
 171  .token.punctuation {
 172          color: #999;
 173  }
 174
 175  .namespace {
 176          opacity: .7;
 177  }
 178
 179  .token.property,
 180  .token.tag,
 181  .token.boolean,
 182  .token.number,
 183  .token.constant,
 184  .token.symbol,
 185  .token.deleted {
 186          color: #905;
 187  }
 188
 189  .token.selector,
 190  .token.attr-name,
 191  .token.string,
 192  .token.char,
 193  .token.builtin,
 194  .token.inserted {
 195          color: #690;
 196  }
 197
 198  .token.operator,
 199  .token.entity,
 200  .token.url,
 201  .language-css .token.string,
 202  .style .token.string {
 203          color: #9a6e3a;
 204          background: hsla(0, 0%, 100%, .5);
 205  }
 206
 207  .token.atrule,
 208  .token.attr-value,
 209  .token.keyword {
 210          color: #07a;
 211  }
 212
 213  .token.function,
 214  .token.class-name {
 215          color: #DD4A68;
 216  }
 217
 218  .token.regex,
 219  .token.important,
 220  .token.variable {
 221          color: #e90;
 222  }
 223
 224  .token.important,
 225  .token.bold {
 226          font-weight: 600;
 227  }
 228  .token.italic {
 229          font-style: italic;
 230  }
 231
 232  .token.entity {
 233          cursor: help;
 234  }
 235