1
0

amber.css 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
  1. body.amberBody {
  2. margin-bottom: 350px;
  3. }
  4. #amberTabs, #amber .amber_tabs {
  5. margin: 0;
  6. padding: 0;
  7. background: url("../images/sprite.amber.png") #DBD9C9 0 -27px;
  8. height: 22px;
  9. width: 100%;
  10. list-style: none;
  11. font-weight: bold;
  12. }
  13. #amberTabs li, #amber .amber_tabs li {
  14. padding: 0 1px;
  15. cursor: pointer;
  16. color: #565656;
  17. max-width: 200px;
  18. float:left;
  19. }
  20. #amber li {
  21. line-height: 14px;
  22. }
  23. #amber .ltab, #amber .rtab, #amber .mtab {
  24. height: 22px;
  25. float: left;
  26. }
  27. #amber .ltab, #amber .rtab {
  28. width: 8px;
  29. }
  30. #amber .rtab {
  31. margin-right: 1px;
  32. }
  33. #amber .mtab {
  34. line-height: 20px;
  35. }
  36. #amberTabs li:hover .ltab,
  37. #amber .amber_tabs li:hover .ltab {
  38. background: url("../images/sprite.amber.png") -16px -96px;
  39. }
  40. #amberTabs li:hover .mtab,
  41. #amber .amber_tabs li:hover .mtab {
  42. background: url("../images/sprite.amber.png") 0 -73px;
  43. }
  44. #amberTabs li:hover .rtab,
  45. #amber .amber_tabs li:hover .rtab {
  46. background: url("../images/sprite.amber.png") -24px -96px;
  47. }
  48. #amberTabs li.selected,
  49. #amber .amber_tabs li.selected {
  50. color: #111;
  51. }
  52. #amberTabs li.selected .ltab,
  53. #amber .amber_tabs li.selected .ltab {
  54. background: url("../images/sprite.amber.png") 0px -96px;
  55. }
  56. #amberTabs li.selected .mtab,
  57. #amber .amber_tabs li.selected .mtab {
  58. background: url("../images/sprite.amber.png") 0 -50px;
  59. }
  60. #amberTabs li.selected .rtab,
  61. #amber .amber_tabs li.selected .rtab {
  62. background: url("../images/sprite.amber.png") -8px -96px;
  63. }
  64. #amberTabs li .close {
  65. margin-right: 5px;
  66. color: #aaa;
  67. }
  68. #amber {
  69. position: fixed;
  70. bottom: 0;
  71. left: 0;
  72. right: 0;
  73. height: 350px;
  74. z-index: 1000;
  75. }
  76. #amber, #amber button, #amber input, #amber select {
  77. font-family: Lucida Grande, Tahoma, sans-serif;
  78. font-size: 11px;
  79. }
  80. #amber #logo {
  81. position: absolute;
  82. top: 3px;
  83. left: 8px;
  84. width: 22px;
  85. height: 20px;
  86. background: url("../images/tinylogo.amber.png") top left no-repeat;
  87. }
  88. #amber #amber_toolbar {
  89. height: 27px;
  90. background: url("../images/sprite.amber.png") 0 0;
  91. }
  92. #amber #amber_toolbar input {
  93. margin-left: 50px;
  94. width: 250px;
  95. margin-top: 5px;
  96. }
  97. #amber #amber_toolbar #amber_close {
  98. position: absolute;
  99. right: 4px;
  100. top: 6px;
  101. width: 16px;
  102. height: 16px;
  103. background: url('../images/off.amber.png');
  104. cursor: pointer;
  105. }
  106. #amber #amber_toolbar #amber_close:hover {
  107. background: url('../images/offHover.amber.png');
  108. }
  109. #amber .ui-resizable-handle {
  110. background-color: transparent;
  111. top: 0;
  112. cursor: row-resize;
  113. height: 5px;
  114. left: 0;
  115. position: absolute;
  116. right: 0;
  117. width: auto !important;
  118. }
  119. .amberTool {
  120. width: 100%;
  121. color: #333;
  122. line-height: 1.3em;
  123. padding: 0;
  124. margin: 0;
  125. position: absolute;
  126. bottom: 0;
  127. left: 0;
  128. top: 49px;
  129. z-index: 1000;
  130. background: white;
  131. }
  132. .amberTool .amber_box {
  133. width: 100%;
  134. margin: 0;
  135. position: absolute;
  136. top: 0;
  137. bottom: 27px;
  138. }
  139. .amberTool .amber_buttons {
  140. position: absolute;
  141. bottom: 0;
  142. left: 0;
  143. right: 0;
  144. height: 27px;
  145. line-height: 27px;
  146. background: url("../images/sprite.amber.png") 0 0 repeat;
  147. }
  148. .amberTool .amber_buttons .right {
  149. float: right;
  150. }
  151. .amberTool .important {
  152. font-weight: bold;
  153. }
  154. .amberTool button {
  155. border: 1px solid transparent;
  156. background: transparent;
  157. padding: 2px 4px;
  158. margin-left: 4px;
  159. cursor: pointer;
  160. }
  161. .amberTool button:hover {
  162. border-top: 1px solid #fff;
  163. border-left: 1px solid #fff;
  164. border-right: 1px solid #bbb;
  165. border-bottom: 1px solid #bbb;
  166. }
  167. .amberTool button:active {
  168. border-top: 1px solid #bbb;
  169. border-left: 1px solid #bbb;
  170. border-right: 1px solid #fff;
  171. border-bottom: 1px solid #fff;
  172. background: #ddd;
  173. }
  174. .amberTool select, #amber input {
  175. border-top: 1px solid #bbb;
  176. border-left: 1px solid #bbb;
  177. border-right: 1px solid #fff;
  178. border-bottom: 1px solid #fff;
  179. background: #fff;
  180. display: inline;
  181. margin-top: 0;
  182. margin-bottom: 0;
  183. padding-top: 0;
  184. padding-bottom: 0;
  185. height: 14px;
  186. line-height: normal;
  187. box-shadow: none;
  188. outline: none;
  189. vertical-align:baseline;
  190. }
  191. .amberTool select {
  192. height:18px;
  193. width: auto;
  194. }
  195. .amberTool li {
  196. margin: 0;
  197. padding: 0;
  198. }
  199. .amberTool .source {
  200. height: 100%;
  201. }
  202. .amberTool textarea,
  203. .amberTool input {
  204. border: 0 none;
  205. font-family: "DejaVu Sans", Helvetica, sans-serif;
  206. line-height: 1.3em;
  207. font-size: 11px;
  208. position: relative;
  209. padding: 0;
  210. }
  211. .amberTool .CodeMirror {
  212. border: 0 none;
  213. font-family: "DejaVu Sans", Helvetica, sans-serif;
  214. font-size: 11px;
  215. line-height: 1.3em;
  216. height: 100%;
  217. background: white;
  218. }
  219. .amberTool .CodeMirror-scroll {
  220. height: 100%;
  221. }
  222. .amberTool .CodeMirror-scroll pre {
  223. font-family: "DejaVu Sans", Helvetica, sans-serif;
  224. }
  225. .amberTool .amber_clear {
  226. clear: both;
  227. }
  228. .amberTool .amber_transcript,
  229. .amberTool .amber_workspace {
  230. width: 100%;
  231. height: 100%;
  232. }
  233. .amberTool .amber_packagesButtons {
  234. position: absolute;
  235. top: 149px;
  236. left: 0;
  237. z-index: 1;
  238. }
  239. .amberTool .amber_column {
  240. width: 25%;
  241. padding: 0;
  242. margin: 0;
  243. float: left;
  244. outline: 1px solid #aaa;
  245. border: 0 none;
  246. height: 150px;
  247. overflow-y: auto;
  248. background: #fff;
  249. color: #111;
  250. position: absolute;
  251. top: 0;
  252. }
  253. .amberTool .amber_column.classes {
  254. left: 25%
  255. }
  256. .amberTool .amber_column.classes ul {
  257. margin-left: 0;
  258. }
  259. .amberTool .amber_column.classes ul li {
  260. padding-left: 10px;
  261. margin-left: 0;
  262. }
  263. .amberTool .amber_column.protocols {
  264. left: 50%
  265. }
  266. .amberTool .amber_column.methods {
  267. left: 75%
  268. }
  269. .amberTool .amber_column li {
  270. list-style-type: none;
  271. padding-left: 5px;
  272. cursor: pointer;
  273. color: #111;
  274. font-weight: bold;
  275. }
  276. .amberTool .amber_column li.selected {
  277. background: #c5c5c5;
  278. color: #222;
  279. }
  280. .amberTool .amber_column li:hover {
  281. background: #08c;
  282. color: white;
  283. }
  284. #amber .amberTool .amber_tabs {
  285. top: 150px;
  286. position: absolute;
  287. }
  288. #amber .amberTool .amber_tabs.amber_browser {
  289. padding-left: 25%;
  290. }
  291. .amberTool .amber_sourceCode {
  292. position: absolute;
  293. top: 172px;
  294. bottom: 0;
  295. left: 0;
  296. right: 0;
  297. }
  298. .amberTool .amber_sourceCode textarea.source {
  299. width: 100%;
  300. height: 100%;
  301. }
  302. /* Debugger & inspector */
  303. .amberTool .amber_box .label {
  304. width: 100%;
  305. font-weight: bold;
  306. text-align: center;
  307. position: absolute;
  308. line-height: 1.5em;
  309. font-size: 16px;
  310. color: red;
  311. background: url("../images/sprite.amber.png") top left repeat;
  312. height: 27px;
  313. }
  314. .amberTool .amber_box .amber_column.debugger {
  315. top: 178px;
  316. }
  317. .amberTool .amber_box .amber_column.debugger.contexts {
  318. top: 27px;
  319. width: 100%;
  320. }
  321. .amberTool .amber_sourceCode.debugger {
  322. width: 60%;
  323. top: 178px;
  324. }
  325. .amberTool .amber_box .amber_column.debugger.variables {
  326. width: 10%;
  327. left: 60%;
  328. bottom: 0;
  329. position: absolute;
  330. height: auto;
  331. }
  332. .amberTool .amber_box .amber_column.debugger.inspector {
  333. width: 30%;
  334. left: 70%;
  335. bottom: 0;
  336. position: absolute;
  337. height: auto;
  338. }
  339. .amberTool .amber_button.debugger.inspect {
  340. position: absolute;
  341. left: 60%;
  342. }
  343. .amberTool .amber_column.value {
  344. left: 25%;
  345. width: 75%;
  346. }
  347. .amberTool .amber_buttons.inspector {
  348. position: absolute;
  349. top: 150px;
  350. }
  351. /* ReferencesBrowser */
  352. .amberTool .amber_box .implementors {
  353. width: 100%
  354. }
  355. .amberTool .amber_box .amber_column.implementors,
  356. .amberTool .amber_box .amber_column.senders,
  357. .amberTool .amber_box .amber_column.referenced_classes,
  358. .amberTool .amber_box .amber_column.matches {
  359. top: 20px;
  360. height: auto;
  361. bottom: 0;
  362. width: 25%;
  363. }
  364. .amberTool .amber_box .amber_column.senders {
  365. left: 25%
  366. }
  367. .amberTool .amber_box .amber_column.referenced_classes {
  368. left: 50%
  369. }
  370. .amberTool .amber_box .amber_column.matches {
  371. left: 75%
  372. }
  373. .amberTool .amber_box .amber_column.implementors .column_label,
  374. .amberTool .amber_box .amber_column.senders .column_label,
  375. .amberTool .amber_box .amber_column.referenced_classes .column_label,
  376. .amberTool .amber_box .amber_column.matches .column_label {
  377. background: #dbdbdb
  378. }
  379. .amberTool .amber_box .amber_column.implementors .column_label:hover,
  380. .amberTool .amber_box .amber_column.senders .column_label:hover,
  381. .amberTool .amber_box .amber_column.referenced_classes .column_label:hover,
  382. .amberTool .amber_box .amber_column.matches .column_label:hover {
  383. font-weight: bold;
  384. color: #000;
  385. cursor: default
  386. }
  387. .amberTool .classes .commented {
  388. color: #33337F;
  389. }
  390. /* SUnit TestRunner */
  391. .amberTool .amber_column.sunit.packages,
  392. .amberTool .amber_column.sunit.classes {
  393. height: 100%
  394. }
  395. .amberTool .amber_column.sunit.classes li.all,
  396. .amberTool .amber_column.sunit.categories li.all {
  397. background: #e3e3e3;
  398. font-weight: bold
  399. }
  400. .amberTool .amber_column.sunit.classes li.all:hover ,
  401. .amberTool .amber_column.sunit.categories li.all:hover {
  402. background: #0088CC;
  403. font-weight: bold
  404. }
  405. .amberTool .sunit.status {
  406. position: absolute;
  407. left: 50%;
  408. width: 50%;
  409. outline: 1px solid #aaa;
  410. background: white;
  411. height: 40px
  412. }
  413. .amberTool .sunit.status.success {
  414. background: #43d443;
  415. }
  416. .amberTool .sunit.status.failure {
  417. background: #ecd443;
  418. }
  419. .amberTool .sunit.status.error {
  420. background: #e56f3b;
  421. }
  422. .amberTool .progress_bar {
  423. position: absolute;
  424. left: 50%;
  425. width: 50%;
  426. top: 40px;
  427. background: white;
  428. outline: 1px solid #aaa;
  429. min-height: 20px
  430. }
  431. .amberTool .progress_bar div {
  432. background: #0088CC;
  433. min-height: 20px;
  434. }
  435. .amberTool .amber_column.results.sunit {
  436. left: 50%;
  437. height: auto;
  438. width: 50%;
  439. top: 62px;
  440. bottom: 0;
  441. }
  442. .amberTool .amber_column.sunit.results .errors {
  443. color: red;
  444. }
  445. /*.amberTool .amber_column.sunit.results ul {padding: 0; margin: 0}*/
  446. /* Code mirror overrides */
  447. .CodeMirror pre {
  448. line-height: 14px;
  449. }