1$background: white !default; 2 3$line_alt1_background: $background !default; 4$line_alt2_background: $background !default; 5 6$line_highlighted_background: #e0e0e0 !default; 7$line_highlighted_number: black !default; 8 9$gutter_text: #afafaf !default; 10$gutter_border_color: #6ce26c !default; 11$gutter_border: 3px solid $gutter_border_color !default; 12 13$toolbar_collapsed_a: #00f !default; 14$toolbar_collapsed_a_hover: #f00 !default; 15$toolbar_collapsed_background: #fff !default; 16$toolbar_collapsed_border: 1px solid $gutter_border_color !default; 17 18$toolbar_a: #fff !default; 19$toolbar_a_hover: #000 !default; 20$toolbar_background: $gutter_border_color !default; 21$toolbar_border: none !default; 22 23$code_plain: black !default; 24$code_comments: #008200 !default; 25$code_string: blue !default; 26$code_keyword: #006699 !default; 27$code_preprocessor: gray !default; 28$code_variable: #aa7700 !default; 29$code_value: #009900 !default; 30$code_functions: #ff1493 !default; 31$code_constants: #0066cc !default; 32$code_script: $code_keyword !default; 33$code_script_background: none !default; 34$code_color1: gray !default; 35$code_color2: #ff1493 !default; 36$code_color3: red !default; 37 38$caption_color: $code_plain !default; 39 40// Interface elements. 41.syntaxhighlighter { 42 background-color: $background !important; 43 44 // Highlighed line number 45 .line { 46 &.alt1 { background-color: $line_alt1_background !important; } 47 &.alt2 { background-color: $line_alt2_background !important; } 48 49 // Highlighed line 50 &.highlighted { 51 &.alt1, &.alt2 { background-color: $line_highlighted_background !important; } 52 &.number { color: $line_highlighted_number !important; } 53 } 54 } 55 56 table { 57 caption { 58 color: $caption_color !important; 59 } 60 61 td.code { 62 .container { 63 textarea { 64 background: $background; 65 color: $code_plain; 66 } 67 } 68 } 69 } 70 71 // Add border to the lines 72 .gutter { 73 color: $gutter_text !important; 74 .line { 75 border-right: $gutter_border !important; 76 77 &.highlighted { 78 background-color: $gutter_border_color !important; 79 color: $background !important; 80 } 81 } 82 } 83 84 &.printing .line .content { border: none !important; } 85 86 &.collapsed { 87 overflow: visible !important; 88 89 .toolbar { 90 color: $toolbar_collapsed_a !important; 91 background: $toolbar_collapsed_background !important; 92 border: $toolbar_collapsed_border !important; 93 94 a { 95 color: $toolbar_collapsed_a !important; 96 &:hover { color: $toolbar_collapsed_a_hover !important; } 97 } 98 } 99 } 100 101 .toolbar { 102 color: $toolbar_a !important; 103 background: $toolbar_background !important; 104 border: $toolbar_border !important; 105 a { 106 color: $toolbar_a !important; 107 &:hover { color: $toolbar_a_hover !important; } 108 } 109 } 110 111 // Actual syntax highlighter colors. 112 .plain, .plain a { color: $code_plain !important; } 113 .comments, .comments a { color: $code_comments !important; } 114 .string, .string a { color: $code_string !important; } 115 .keyword { color: $code_keyword !important; } 116 .preprocessor { color: $code_preprocessor !important; } 117 .variable { color: $code_variable !important; } 118 .value { color: $code_value !important; } 119 .functions { color: $code_functions !important; } 120 .constants { color: $code_constants !important; } 121 .script { 122 font-weight: bold !important; 123 color: $code_script !important; 124 background-color: $code_script_background !important; 125 } 126 .color1, .color1 a { color: $code_color1 !important; } 127 .color2, .color2 a { color: $code_color2 !important; } 128 .color3, .color3 a { color: $code_color3 !important; } 129} 130