1.mw-highlight { 2 unicode-bidi: embed; 3 4 pre { 5 /* Use a more commonly found tab size of 4 (e.g. as used in CodeEditor) 6 instead of the browser-default value of 8 */ 7 -moz-tab-size: 4; 8 tab-size: 4; 9 // Position .linenos relative to this container. 10 // Do not put this on the main container as it is 100% 11 // and causes it to stack above floated elements (T272853) 12 position: relative; 13 } 14 15 /* Avoid displaying double borders for nested 'code' elements. 16 Before we started using the 'code' tag for inline code snippets, 17 <code><syntaxhighlight enclose=none ...>...</syntaxhighlight></code> 18 was a common pattern. Continue supporting it in existing content. */ 19 code code& { 20 background-color: transparent; 21 border: 0; 22 padding: 0; 23 } 24 25 /* The nested pre already has a background. T126010 */ 26 div& { 27 background-color: inherit; 28 } 29 30 /* 31 * Don't show a red border around syntax errors. This behavior may be useful 32 * in code editors, but it is not useful in a wiki environment, especially 33 * given the longstanding habit of using an existing, mostly-compatible lexer 34 * to highlight a language for which no lexer exists. 35 */ 36 .err { 37 border: 0; 38 } 39 40 /* Highlight background of whole lines, not just text in them */ 41 .hll { 42 display: block; 43 } 44 45 &-lines pre, 46 .content &-lines pre { // Increase specificty over mobile selectors 47 48 .mw-content-ltr& { 49 /* @noflip */ 50 padding-left: 3.5em; 51 /* @noflip */ 52 box-shadow: inset 2.75em 0 0 #f0f0f0; 53 54 .hll { 55 /* @noflip */ 56 margin-left: -3.5em; 57 /* @noflip */ 58 padding-left: 3.5em; 59 } 60 } 61 62 /* stylelint-disable-next-line no-descending-specificity */ 63 .mw-content-rtl& { 64 /* @noflip */ 65 padding-right: 3.5em; 66 /* @noflip */ 67 box-shadow: inset -2.75em 0 0 #f0f0f0; 68 69 /* stylelint-disable-next-line no-descending-specificity */ 70 .hll { 71 /* @noflip */ 72 margin-right: -3.5em; 73 /* @noflip */ 74 padding-right: 3.5em; 75 } 76 } 77 } 78 79 .linenos { 80 position: absolute; 81 box-sizing: border-box; 82 width: 2.75em; 83 background: none; 84 color: #72777d; 85 white-space: pre; 86 87 .mw-content-ltr& { 88 /* @noflip */ 89 left: 0; 90 /* @noflip */ 91 text-align: right; 92 /* @noflip */ 93 margin-right: 4px; 94 } 95 96 .mw-content-rtl& { 97 /* @noflip */ 98 right: 0; 99 /* @noflip */ 100 text-align: left; 101 /* @noflip */ 102 margin-left: 4px; 103 } 104 105 &:before { 106 content: attr( data-line ); 107 } 108 } 109 110 a:hover .linenos, 111 .hll a .linenos { 112 color: #333; 113 } 114} 115