@openui5/sap.ui.demokit/src/sap/ui/demokit/themes/base/CodeViewer.less

OpenUI5 UI Library sap.ui.demokit

pre.sapUiCodeViewer {
	background-color:rgb(240,240,240);
	font-family: "Courier New", Courier, monospace;
	font-size: 0.9rem;
	line-height: 1.2em;
	font-weight: bold;
	-moz-tab-size: 2;
	tab-size: 2;
	padding: 0.5em 2em;
	border: 1px dotted #888;
	overflow-x: auto;
}

pre.sapUiCodeViewer.editable {
	background-color:white !important;
}

/* styles from google-code-prettify */
@import "../../js/google-code-prettify/prettify.css";

@media screen {
	.str{color:rgb(42,0,255)}						/* string literal */
	.kwd{color:rgb(127,0,85);font-weight:bold} 		/* keyword */
	.com{color:rgb(63,127,95)}						/* comment */
	.tag{color:rgb(127,159,191)}					/* JSDOC tags */
}

/* make code changes appear yellow in the demokit (tutorials), they are marked with the emphasis tag in dita */
pre.codeblock .emphasis {
	background-color: #ffff00;
}

html.sap-combi .sapUiCodeViewerRO * {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: all;
}

.sapUiCodeViewerRO ol {
	position: relative;
	z-index: 0;
	counter-reset: item;
	padding: 0 0;
}

.sapUiCodeViewerRO ol li {
	color: #999999;
	display: block;
	position: relative;
	left: 2px;
}

.sapUiCodeViewerRO ol li:before {
	content: counter(item, decimal-leading-zero);
	counter-increment: item;
	color: #999999;
	// not select line numbers when copy the code
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 0 16px 0 -28px;
}

.sapUiCodeViewerRO ol:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: -28px;
	bottom: 0;
	width: 28px;
	z-index: -1;
	background: lightgoldenrodyellow;
}

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
	.sapUiCodeViewerRO & {
		list-style-type: decimal;
	}
}

li.L1,li.L3,li.L5,li.L7,li.L9 {
	.sapUiCodeViewerRO & {
		background: transparent;
	}
}