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