Upgraded to Redactor II 2.0.0

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / bbcode / code.scss

.redactor-editor 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);
	border-radius: 2px;
	color: rgb(68, 68, 68) !important;
	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 {
		color: $wcfContentLink;
		content: attr(data-title);
		cursor: pointer;
		display: block;
		font-family: $wcfFontFamily;
		margin-bottom: 20px;
		
		@include wcfFontHeadline;
	}
}

.codeBox {
	background-color: $wcfContentBackground;
	box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
	border-radius: 2px;
	clear: both;
	margin: 1em 0;
	overflow: hidden;
	padding: 10px;
	position: relative;
	
	&.collapsed {
		max-height: 200px;
		
		> .toggleButton {
			bottom: 0;
			box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, .9);
			left: 0;
			padding-bottom: 10px;
			position: absolute;
			right: 0;
			z-index: 1;
		}
	}
	
	> div {
		> .codeBoxHeader {
			align-items: center;
			display: flex;
			
			> .codeBoxHeadline {
				flex: 1 1 auto;
				padding: 0 10px;
				
				@include wcfFontHeadline;
			}
			
			> .codeBoxPlainSource {
				flex: 0 0 auto;
				margin-left: 10px;
			}
		}
		
		> ol {
			margin: 20px 0 0 3.4em !important;
			position: relative;
			
			&::before {
				border-right: 1px solid $wcfContentBorderInner;
				bottom: 0;
				content: "";
				left: -5px;
				position: absolute;
				top: 0;
			}
			
			> li {
				font-family: Consolas, 'Courier New', monospace;
				padding-left: 5px;
				position: relative;
				white-space: pre-wrap;
				word-break: break-all;
				word-wrap: break-word;
				z-index: 1;
				
				.lineAnchor {
					bottom: 0;
					left: -3.4em;
					position: absolute;
					top: 0;
					width: 3.4em;
				}
			}
		}
	}
	
	.codeBoxJumpAnchor:target {
		height: 100%;
		pointer-events: none;
		position: absolute;
		width: 100%;
		z-index: -1;
		
		&::after {
			background-color: rgba(255, 255, 102, 1);
			bottom: 0;
			content: "";
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
		}
		
		@include screen-md-down {
			top: -52px;
			
			&::after {
				top: 52px;
			}
		}
		
		@include screen-lg {
			top: -50px;
			
			&::after {
				top: 50px;
			}
		}
	}
	
	> .toggleButton {
		background-color: opacify($wcfContentBackground, .9);
		cursor: pointer;
		display: block;
		padding: 10px 20px 0 10px;
		text-align: center;
		
		@include wcfFontSmall;
	}
}

/* ############## Code Styles ############## */

/* -- -- -- Code Box -- -- -- */

.codeBox .hlQuotes {
	color: red;
}

.codeBox .hlComments,
.codeBox .hlOperators {
	color: green;
}

.codeBox .hlKeywords1 {
	color: blue;
}

.codeBox .hlKeywords2 {
	color: darkred;
}

.codeBox .hlKeywords3 {
	color: darkviolet;
}

.codeBox .hlKeywords4 {
	color: darkgoldenrod;
}

.codeBox .hlKeywords5 {
	color: crimson;
}

.codeBox .hlNumbers {
	color: darkorange;
}

/* -- -- -- Code Highlighters -- -- -- */

/* DIFF */

.diffHighlighter .hlComments {
	color: darkviolet;
}

.diffHighlighter .hlRemoved {
	color: red;
}

.diffHighlighter .hlAdded {
	color: green;
}

/* PHP */

.phpHighlighter .hlKeywords2 {
	color: green;
}

.phpHighlighter .hlComments {
	color: darkgoldenrod;
}

/* CSS */

.cssHighlighter .hlComments {
	color: #236e26;
}

.cssHighlighter .hlColors {
	color: #751116;
}

.cssHighlighter .hlNumbers,
.sqlHighlighter .hlNumbers {
	color: #1906fd;
}

.cssHighlighter .hlKeywords1 {
	color: #87154f;
}

.cssHighlighter .hlKeywords2 {
	color: #994509;
}

.cssHighlighter .hlKeywords3,
.cssHighlighter .hlKeywords4 {
	color: inherit;
}

/* SQL */

.sqlHighlighter .hlKeywords1 {
	color: #663821;
}

.sqlHighlighter .hlKeywords2 {
	color: #871550;
}