| OLD | NEW |
| (Empty) |
| 1 @import "bootstrap-compass"; | |
| 2 @import "bootstrap-variables"; | |
| 3 @import "bootstrap"; | |
| 4 | |
| 5 $sidebar-width: 200px; | |
| 6 $content-background: white; | |
| 7 $sidebar-background: #eee; | |
| 8 | |
| 9 html, body { | |
| 10 min-height: 100%; | |
| 11 } | |
| 12 | |
| 13 #wrapper { | |
| 14 padding-top: 50px; | |
| 15 position: absolute; | |
| 16 top: 0; | |
| 17 bottom: 0; | |
| 18 left: 0; | |
| 19 right: 0; | |
| 20 } | |
| 21 | |
| 22 #lower-wrapper { | |
| 23 min-height: 100%; | |
| 24 position: relative; | |
| 25 } | |
| 26 | |
| 27 #content { | |
| 28 height: 100%; | |
| 29 padding: 1em; | |
| 30 | |
| 31 margin-left: $sidebar-width; | |
| 32 background: $content-background; | |
| 33 } | |
| 34 | |
| 35 #sidebar { | |
| 36 position: absolute; | |
| 37 top: 0px; | |
| 38 left: 0px; | |
| 39 width: $sidebar-width; | |
| 40 background: $sidebar-background; | |
| 41 height: 100%; | |
| 42 | |
| 43 padding: 5px; | |
| 44 | |
| 45 .panel-heading { | |
| 46 padding: 3px 5px; | |
| 47 | |
| 48 .panel-title { | |
| 49 font-size: 12px; | |
| 50 font-weight: 200; | |
| 51 } | |
| 52 } | |
| 53 } | |
| 54 | |
| 55 .navbar { | |
| 56 margin-top: -50px; | |
| 57 } | |
| 58 | |
| 59 img { | |
| 60 box-shadow: 2px 2px 5px gray; | |
| 61 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQC
AAAAAA6mKC9AAAAAXNSR0IArs4c6QAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB
3RJTUUH3gUBEi4DGRAQYgAAAB1JREFUGNNjfMoAAVJQmokBDdBHgPE/lPFsYN0BABdaAwN6tehMAAAAA
ElFTkSuQmCC"); | |
| 62 } | |
| 63 | |
| 64 h1 { | |
| 65 font-size: 18px; | |
| 66 } | |
| 67 | |
| 68 h2 { | |
| 69 font-size: 16px; | |
| 70 } | |
| 71 | |
| 72 .waiting, .waiting * { | |
| 73 cursor: wait; | |
| 74 } | |
| 75 | |
| 76 .iframe textarea { | |
| 77 resize: none; | |
| 78 } | |
| 79 | |
| 80 template { | |
| 81 display: none; | |
| 82 } | |
| 83 | |
| 84 code { | |
| 85 color: green; | |
| 86 } | |
| 87 | |
| 88 code { | |
| 89 padding: 0; | |
| 90 } | |
| 91 | |
| 92 .tries { | |
| 93 margin: 1em; | |
| 94 float: left; | |
| 95 } | |
| 96 | |
| 97 #tryHistory { | |
| 98 position: absolute; | |
| 99 top: 3em; | |
| 100 right: 10px; | |
| 101 width: 75px; | |
| 102 | |
| 103 .tries { | |
| 104 float: none; | |
| 105 } | |
| 106 } | |
| 107 | |
| 108 #chooseList { | |
| 109 display: flex; | |
| 110 flex-flow: row wrap; | |
| 111 } | |
| 112 | |
| 113 .action-buttons { | |
| 114 padding: 10px 0; | |
| 115 } | |
| 116 | |
| 117 .show { | |
| 118 display: block !important; | |
| 119 } | |
| 120 | |
| 121 .image-wrapper { | |
| 122 display: none; | |
| 123 } | |
| 124 | |
| 125 #chooseSource { | |
| 126 display: none; | |
| 127 } | |
| 128 | |
| 129 #selectedSource { | |
| 130 display: none; | |
| 131 } | |
| 132 | |
| 133 #sourceCode { | |
| 134 display: none; | |
| 135 margin-top: 10px; | |
| 136 } | |
| 137 | |
| 138 #gitInfo { | |
| 139 font-size: 70%; | |
| 140 } | |
| 141 | |
| 142 #output-wrapper { | |
| 143 display: none; | |
| 144 } | |
| 145 | |
| 146 .compile-error { | |
| 147 cursor: pointer; | |
| 148 } | |
| 149 | |
| 150 /* CodeMirror customization */ | |
| 151 | |
| 152 .CodeMirror .error { | |
| 153 background: #f88; | |
| 154 } | |
| 155 | |
| 156 .CodeMirror-lines, | |
| 157 .CodeMirror-scroll | |
| 158 { | |
| 159 background-color: #eee; | |
| 160 } | |
| 161 | |
| 162 .CodeMirror { | |
| 163 border: solid gray 1px; | |
| 164 height: auto; | |
| 165 } | |
| 166 | |
| 167 /* Make the code editor automatically resize */ | |
| 168 | |
| 169 .CodeMirror-scroll { | |
| 170 overflow-y: hidden; | |
| 171 overflow-x: auto; | |
| 172 } | |
| 173 | |
| 174 /* Twitter Bootstrap customization */ | |
| 175 | |
| 176 .navbar { | |
| 177 border: none; | |
| 178 } | |
| 179 | |
| 180 .navbar-brand { | |
| 181 padding: 0; | |
| 182 | |
| 183 img { | |
| 184 height: 50px; | |
| 185 box-shadow: none; | |
| 186 background: none; | |
| 187 } | |
| 188 } | |
| OLD | NEW |