.redactor-layer pre {
background-color: rgb(255, 255, 255) !important;
- box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 2px;
color: rgb(68, 68, 68) !important;
- font-family: Consolas, 'Courier New', monospace;
+ font-family: Consolas, "Courier New", monospace;
margin: 1em 0;
padding: 10px 20px;
position: relative;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
-
+
&:not(.redactorCalcHeight)::before,
&.woltlabHtml::before {
color: $wcfContentLink;
display: block;
font-family: $wcfFontFamily;
margin-bottom: 20px;
-
+
@include wcfFontHeadline;
}
-
+
&.woltlabHtml {
&::before {
margin-bottom: 30px;
}
-
+
&::after {
color: $wcfContentDimmedText;
content: attr(data-description);
font-family: $wcfFontFamily;
position: absolute;
top: 32px;
-
+
@include wcfFontSmall;
}
}
.codeBox {
background-color: $wcfContentBackground;
- box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 2px;
clear: both;
margin: 1em 0;
padding: 10px;
position: relative;
-
+
&.collapsed {
.codeBoxCode {
max-height: 200px;
overflow: hidden;
}
-
+
> .toggleButton {
bottom: 0;
left: 0;
position: absolute;
right: 0;
z-index: 1;
-
+
&::before {
- background-image: linear-gradient(to top, opacify($wcfContentBackground, .9), transparentize($wcfContentBackground, 1));
+ background-image: linear-gradient(
+ to top,
+ opacify($wcfContentBackground, 0.9),
+ transparentize($wcfContentBackground, 1)
+ );
content: "";
height: 60px;
left: 0;
}
}
}
-
+
.codeBoxHeader {
position: sticky;
top: 50px;
padding: 10px 10px 10px;
margin: -10px -10px 0;
background-color: $wcfContentBackground;
-
+
align-items: center;
display: flex;
-
+
/* required to avoid layout jumping caused by the dynamically added 24px button */
min-height: 24px;
-
+
> .codeBoxHeadline {
flex: 1 1 auto;
padding: 0 10px;
-
+
@include wcfFontHeadline;
}
}
-
+
.codeBoxCode {
position: relative;
padding-left: 7ch;
-
+
> code {
display: block;
overflow-x: auto;
- font-family: Consolas, 'Courier New', monospace;
-
+ font-family: Consolas, "Courier New", monospace;
+
.codeBoxLine {
display: block;
-
+
> a {
margin-left: -7ch;
overflow: hidden;
white-space: nowrap;
/* No one has line numbers greater than 999999 */
width: 6ch;
-
+
&::before {
content: attr(title);
}
}
-
+
> span {
white-space: pre-wrap;
word-break: break-all;
}
-
+
&:target {
background-color: rgba(255, 255, 102, 1);
}
}
}
}
-
+
> .toggleButton {
- background-color: opacify($wcfContentBackground, .9);
+ background-color: opacify($wcfContentBackground, 0.9);
cursor: pointer;
display: block;
padding: 10px 20px 0 10px;
text-align: center;
-
+
@include wcfFontSmall;
}
}
position: static;
}
-
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=autoloader */
/**
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
-
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
- color: slategray;
- }
-
- .token.punctuation {
- color: #999;
- }
-
- .namespace {
- opacity: .7;
- }
-
- .token.property,
- .token.tag,
- .token.boolean,
- .token.number,
- .token.constant,
- .token.symbol,
- .token.deleted {
- color: #905;
- }
-
- .token.selector,
- .token.attr-name,
- .token.string,
- .token.char,
- .token.builtin,
- .token.inserted {
- color: #690;
- }
-
- .token.operator,
- .token.entity,
- .token.url,
- .language-css .token.string,
- .style .token.string {
- color: #9a6e3a;
- background: hsla(0, 0%, 100%, .5);
- }
-
- .token.atrule,
- .token.attr-value,
- .token.keyword {
- color: #07a;
- }
-
- .token.function,
- .token.class-name {
- color: #DD4A68;
- }
-
- .token.regex,
- .token.important,
- .token.variable {
- color: #e90;
- }
-
- .token.important,
- .token.bold {
- font-weight: 600;
- }
- .token.italic {
- font-style: italic;
- }
-
- .token.entity {
- cursor: help;
- }
-
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: #999;
+}
+
+.namespace {
+ opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #9a6e3a;
+ background: hsla(0, 0%, 100%, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #07a;
+}
+
+.token.function,
+.token.class-name {
+ color: #dd4a68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: 600;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}