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