.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;
- overflow: hidden;
padding: 10px;
position: relative;
-
+
&.collapsed {
- max-height: 200px;
-
+ .codeBoxCode {
+ max-height: 200px;
+ overflow: hidden;
+ }
+
> .toggleButton {
bottom: 0;
- box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, .9);
left: 0;
padding-bottom: 10px;
position: absolute;
right: 0;
z-index: 1;
+
+ &::before {
+ background-image: linear-gradient(
+ to top,
+ opacify($wcfContentBackground, 0.9),
+ transparentize($wcfContentBackground, 1)
+ );
+ content: "";
+ height: 60px;
+ left: 0;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ top: -60px;
+ }
}
}
-
- > div {
- > .codeBoxHeader {
- 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;
- }
+
+ .codeBoxHeader {
+ position: sticky;
+ top: 50px;
+ z-index: 1;
+ 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 {
- padding-left: 7ch;
-
- > code {
+ }
+
+ .codeBoxCode {
+ position: relative;
+ padding-left: 7ch;
+
+ > code {
+ display: block;
+ overflow-x: auto;
+ font-family: Consolas, "Courier New", monospace;
+
+ .codeBoxLine {
display: block;
- overflow-x: auto;
- font-family: Consolas, 'Courier New', monospace;
-
- .codeBoxLine {
- > a {
- margin-left: -7ch;
- overflow: hidden;
- position: absolute;
- text-align: right;
- text-overflow: ellipsis;
- 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);
+
+ > a {
+ margin-left: -7ch;
+ overflow: hidden;
+ position: absolute;
+ text-align: right;
+ text-overflow: ellipsis;
+ 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;
}
}
+.anchorFixedHeader:not(.disableAnchorFixedHeader):target .codeBoxHeader {
+ top: -30px; /* see wsc31.scss */
+}
+
+.dialogContent .codeBox .codeBoxHeader {
+ /* Prevent the header being sticky inside dialogs, which doesn't really work. */
+ 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: bold;
- }
- .token.italic {
- font-style: italic;
- }
-
- .token.entity {
- cursor: help;
- }
-
\ No newline at end of file
+
+.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;
+}