| OLD | NEW |
|---|
| (Empty) |
| 1 /* Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file */ | |
| 2 /* for details. All rights reserved. Use of this source code is governed by a */ | |
| 3 /* BSD-style license that can be found in the LICENSE file. */ | |
| 4 | |
| 5 html { | |
| 6 height: 100%; | |
| 7 width: 100%; | |
| 8 } | |
| 9 | |
| 10 body { | |
| 11 background: #fff; | |
| 12 margin: 0 0 0 0; | |
| 13 height: 100%; | |
| 14 width: 100%; | |
| 15 overflow: hidden; | |
| 16 -webkit-tap-highlight-color: rgba(0,0,0,0.00); | |
| 17 font-family: arial , sans-serif; | |
| 18 } | |
| 19 | |
| 20 h3 { | |
| 21 text-align: center; | |
| 22 } | |
| 23 | |
| 24 .shell { | |
| 25 position: absolute; | |
| 26 top: 5px; | |
| 27 left: 5px; | |
| 28 right: 5px; | |
| 29 bottom: 5px; | |
| 30 } | |
| 31 | |
| 32 .editor { | |
| 33 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; | |
| 34 color: hsl(220, 20%, 30%); | |
| 35 background: white; /*hsl(220, 20%, 95%);*/ | |
| 36 margin: 0; | |
| 37 padding: 0; | |
| 38 overflow: auto; | |
| 39 position: absolute; | |
| 40 cursor: text; | |
| 41 top: 0px; | |
| 42 left: 0px; | |
| 43 right: 50.3%; /* Should be 50% + Npx */ | |
| 44 | |
| 45 /* TODO(jimhug): When can be selected and unselected, make graceful. */ | |
| 46 transition: all 0.25s ease-in-out; | |
| 47 -webkit-transition: all 0.25s ease-in-out; | |
| 48 -moz-transition: all 0.25s ease-in-out; | |
| 49 | |
| 50 box-shadow: 0 0 5px rgba(0, 0, 255, 1); | |
| 51 -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1); | |
| 52 -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1); | |
| 53 border: 1px solid rgba(0,0,255, 0.8); | |
| 54 border-radius: 4px; | |
| 55 } | |
| 56 | |
| 57 .output { | |
| 58 position: absolute; | |
| 59 top: 0px; | |
| 60 left: 50.3%; | |
| 61 right: 0px; | |
| 62 margin: 0; | |
| 63 padding: 0; | |
| 64 | |
| 65 /* TODO(jimhug): When can be selected and unselected, make graceful. */ | |
| 66 transition: all 0.25s ease-in-out; | |
| 67 -webkit-transition: all 0.25s ease-in-out; | |
| 68 -moz-transition: all 0.25s ease-in-out; | |
| 69 | |
| 70 box-shadow: 0 0 5px rgba(128, 128, 0, 1); | |
| 71 -webkit-box-shadow: 0 0 5px rgba(128, 128, 0, 1); | |
| 72 -moz-box-shadow: 0 0 5px rgba(128, 128, 0, 1); | |
| 73 border: 1px solid rgba(128, 128, 0, 0.8); | |
| 74 border-radius: 4px; | |
| 75 } | |
| 76 | |
| 77 .repl { | |
| 78 position: absolute; | |
| 79 left: 0px; | |
| 80 bottom: 0px; | |
| 81 right: 50.3%; | |
| 82 margin: 0; | |
| 83 padding: 0; | |
| 84 | |
| 85 color: green; | |
| 86 overflow: hidden; | |
| 87 | |
| 88 /* TODO(jimhug): When can be selected and unselected, make graceful. */ | |
| 89 transition: all 0.25s ease-in-out; | |
| 90 -webkit-transition: all 0.25s ease-in-out; | |
| 91 -moz-transition: all 0.25s ease-in-out; | |
| 92 | |
| 93 box-shadow: 0 0 5px rgba(0, 128, 0, 1); | |
| 94 -webkit-box-shadow: 0 0 5px rgba(0, 128, 0, 1); | |
| 95 -moz-box-shadow: 0 0 5px rgba(0, 128, 0, 1); | |
| 96 border: 1px solid rgba(0, 128, 0, 0.8); | |
| 97 border-radius: 4px; | |
| 98 } | |
| 99 | |
| 100 .message { | |
| 101 margin: 3px; | |
| 102 border-bottom: 1px solid hsl(220, 20%, 75%); | |
| 103 color: hsl(220, 20%, 30%); | |
| 104 cursor: pointer; | |
| 105 overflow: auto; | |
| 106 } | |
| 107 | |
| 108 .message:hover { | |
| 109 color: hsl(220, 20%, 0%); | |
| 110 text-decoration: underline; | |
| 111 } | |
| 112 | |
| 113 .errors { | |
| 114 position: absolute; | |
| 115 left: 50.3%; | |
| 116 bottom: 0px; | |
| 117 right: 0px; | |
| 118 margin: 0; | |
| 119 padding: 0; | |
| 120 | |
| 121 color: red; | |
| 122 | |
| 123 /* TODO(jimhug): When can be selected and unselected, make graceful. */ | |
| 124 transition: all 0.25s ease-in-out; | |
| 125 -webkit-transition: all 0.25s ease-in-out; | |
| 126 -moz-transition: all 0.25s ease-in-out; | |
| 127 | |
| 128 box-shadow: 0 0 5px rgba(128, 0, 0, 1); | |
| 129 -webkit-box-shadow: 0 0 5px rgba(128, 0, 0, 1); | |
| 130 -moz-box-shadow: 0 0 5px rgba(128, 0, 0, 1); | |
| 131 border: 1px solid rgba(128, 0, 0, 0.8); | |
| 132 border-radius: 4px; | |
| 133 } | |
| 134 | |
| 135 .output iframe { | |
| 136 margin: 0; | |
| 137 padding: 0; | |
| 138 width: 100%; | |
| 139 height: 100%; | |
| 140 border: none; | |
| 141 } | |
| 142 | |
| 143 .code { | |
| 144 white-space: pre; | |
| 145 position: absolute; | |
| 146 /* TODO(jimhug): Useful for debugging. */ | |
| 147 outline: 1px dotted rgba(0, 0, 0, 0.2); | |
| 148 } | |
| 149 | |
| 150 /* Syntax highlighting. */ | |
| 151 /* Note: these correspond to the constants in classify.dart. */ | |
| 152 .code .e { color: hsl( 0, 100%, 70%); } /* Error */ | |
| 153 .code .c { color: hsl(220, 20%, 65%); } /* Comment */ | |
| 154 .code .i { color: hsl(220, 20%, 20%); } /* Identifier */ | |
| 155 .code .k { color: hsl(220, 100%, 50%); } /* Keyword */ | |
| 156 .code .p { color: hsl(220, 20%, 50%); } /* Punctuation */ | |
| 157 .code .o { color: hsl(220, 40%, 50%); } /* Operator */ | |
| 158 .code .s { color: hsl( 40, 90%, 40%); } /* String */ | |
| 159 .code .n { color: hsl( 30, 70%, 50%); } /* Number */ | |
| 160 .code .t { color: hsl(180, 40%, 40%); } /* Type Name */ | |
| 161 .code .r { color: hsl(200, 100%, 50%); } /* Special Identifier */ | |
| 162 .code .a { color: hsl(220, 100%, 45%); } /* Arrow */ | |
| 163 | |
| 164 /* Interpolated expressions within strings. */ | |
| 165 .code .si { | |
| 166 background: hsl(40, 100%, 93%); | |
| 167 } | |
| 168 | |
| 169 /* Remove the background on strings themselves - this makes not | |
| 170 interpolated strings look much better - unsure about nesting...*/ | |
| 171 .code .s.si { background: rgba(255,255,255,0); } | |
| 172 .code .i.si { color: hsl(40, 30%, 30%); } | |
| 173 .code .p.si { color: hsl(40, 60%, 40%); } | |
| 174 | |
| 175 | |
| 176 .hiddenTextArea { | |
| 177 z-index: -1000; | |
| 178 position: absolute; | |
| 179 top: 0px; | |
| 180 left: 0px; | |
| 181 width: 0px; | |
| 182 height: 0px; | |
| 183 opacity: 0; | |
| 184 } | |
| 185 | |
| 186 .cursorDiv { | |
| 187 position: absolute; | |
| 188 width: 100%; | |
| 189 z-index: 10; | |
| 190 top: 0px; | |
| 191 left: 0px; | |
| 192 } | |
| 193 | |
| 194 .cursor { | |
| 195 background: black; | |
| 196 width: 1px; | |
| 197 opacity: .9; | |
| 198 position: absolute; | |
| 199 } | |
| 200 | |
| 201 /* TODO(jimhug): Play with prettier versions of this using canvas. */ | |
| 202 .selection { | |
| 203 position: absolute; | |
| 204 background: rgba(0,120,255, 0.25); | |
| 205 } | |
| 206 | |
| 207 .blink { | |
| 208 -webkit-animation-name: fade; | |
| 209 -webkit-animation-iteration-count: infinite; | |
| 210 -webkit-animation-direction: normal; | |
| 211 -webkit-animation-timing-function: linear; | |
| 212 -webkit-animation-duration: 1.0s; | |
| 213 /* This is reset on each move to keep cursor visible when moving. */ | |
| 214 -webkit-animation-delay: 300ms; | |
| 215 } | |
| 216 | |
| 217 | |
| 218 @-webkit-keyframes fade { | |
| 219 0% { opacity: .9; } | |
| 220 10% { opacity: 0; } | |
| 221 50% { opacity: 0; } | |
| 222 60% { opacity: .9; } | |
| 223 100% { opacity: .9; } | |
| 224 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 8889031:
move tip to utils so it can be picked up in the SDK (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart