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                                 display: block;
 114
 115                                 > a {
 116                                         margin-left: -7ch;
 117                                         overflow: hidden;
 118                                         position: absolute;
 119                                         text-align: right;
 120                                         text-overflow: ellipsis;
 121                                         white-space: nowrap;
 122                                         /* No one has line numbers greater than 999999 */
 123                                         width: 6ch;
 124
 125                                         &::before {
 126                                                 content: attr(title);
 127                                         }
 128                                 }
 129
 130                                 > span {
 131                                         white-space: pre-wrap;
 132                                         word-break: break-all;
 133                                 }
 134
 135                                 &:target {
 136                                         background-color: rgba(255, 255, 102, 1);
 137                                 }
 138                         }
 139                 }
 140         }
 141
 142         > .toggleButton {
 143                 background-color: opacify($wcfContentBackground, .9);
 144                 cursor: pointer;
 145                 display: block;
 146                 padding: 10px 20px 0 10px;
 147                 text-align: center;
 148
 149                 @include wcfFontSmall;
 150         }
 151 }
 152
 153 .anchorFixedHeader:not(.disableAnchorFixedHeader):target .codeBoxHeader {
 154         top: -30px; /* see wsc31.scss */
 155 }
 156
 157 .dialogContent .codeBox .codeBoxHeader {
 158         /* Prevent the header being sticky inside dialogs, which doesn't really work.  */
 159         position: static;
 160 }
 161
 162
 163 /* PrismJS 1.15.0
 164 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=autoloader */
 165 /**
 166  * prism.js default theme for JavaScript, CSS and HTML
 167  * Based on dabblet (http://dabblet.com)
 168  * @author Lea Verou
 169  */
 170
 171  .token.comment,
 172  .token.prolog,
 173  .token.doctype,
 174  .token.cdata {
 175          color: slategray;
 176  }
 177
 178  .token.punctuation {
 179          color: #999;
 180  }
 181
 182  .namespace {
 183          opacity: .7;
 184  }
 185
 186  .token.property,
 187  .token.tag,
 188  .token.boolean,
 189  .token.number,
 190  .token.constant,
 191  .token.symbol,
 192  .token.deleted {
 193          color: #905;
 194  }
 195
 196  .token.selector,
 197  .token.attr-name,
 198  .token.string,
 199  .token.char,
 200  .token.builtin,
 201  .token.inserted {
 202          color: #690;
 203  }
 204
 205  .token.operator,
 206  .token.entity,
 207  .token.url,
 208  .language-css .token.string,
 209  .style .token.string {
 210          color: #9a6e3a;
 211          background: hsla(0, 0%, 100%, .5);
 212  }
 213
 214  .token.atrule,
 215  .token.attr-value,
 216  .token.keyword {
 217          color: #07a;
 218  }
 219
 220  .token.function,
 221  .token.class-name {
 222          color: #DD4A68;
 223  }
 224
 225  .token.regex,
 226  .token.important,
 227  .token.variable {
 228          color: #e90;
 229  }
 230
 231  .token.important,
 232  .token.bold {
 233          font-weight: 600;
 234  }
 235  .token.italic {
 236          font-style: italic;
 237  }
 238
 239  .token.entity {
 240          cursor: help;
 241  }
 242