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