helios.less 22 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088
  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. clear: both;
  5. visibility: hidden;
  6. line-height: 0;
  7. height: 0;
  8. }
  9. .clearfix {
  10. display: inline-block;
  11. }
  12. html[xmlns] .clearfix {
  13. display: block;
  14. }
  15. * html .clearfix {
  16. height: 1%;
  17. }
  18. body.navigation .CodeMirror pre {
  19. cursor: pointer !important;
  20. }
  21. body[id="helios"] {
  22. font-size: 11px;
  23. font-family: "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
  24. background: #eee url(squared_metal.png) repeat;
  25. a {
  26. cursor: pointer;
  27. }
  28. i {
  29. opacity: 1;
  30. }
  31. [class^="icon-"], [class*=" icon-"] {
  32. margin-top: 0;
  33. }
  34. .CodeMirror {
  35. position: absolute;
  36. height: 100%;
  37. width: 100%;
  38. font-family: Consolas, "Liberation Mono", Courier, monospace;
  39. line-height: 16px;
  40. font-size: 13px;
  41. .CodeMirror-gutter.stops {
  42. width: 20px;
  43. }
  44. .highlighted.CodeMirror-linebackground {
  45. background-color: #ffffaa;
  46. }
  47. .CodeMirror-gutter-elt .stop {
  48. width: 16px;
  49. height: 16px;
  50. background: url('arrowRight.png');
  51. margin-left: 2px;
  52. }
  53. }
  54. .CodeMirror-hints {
  55. border-radius: 0;
  56. font-family: "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
  57. font-size: 11px;
  58. line-height: 1em;
  59. padding: 0;
  60. max-height: 120px;
  61. }
  62. .CodeMirror-hint {
  63. border-radius: 0;
  64. padding: 0 10px;
  65. }
  66. .state {
  67. position: absolute;
  68. right: 15px;
  69. top: 10px;
  70. width: 16px;
  71. height: 16px;
  72. }
  73. .state.modified {
  74. background: transparent url('modified.png') 50% 50% no-repeat;
  75. }
  76. .editor {
  77. position: absolute;
  78. top: 0;
  79. bottom: 23px;
  80. left: 0;
  81. right: 0;
  82. }
  83. .hl_widget {
  84. &:focus {
  85. outline: 0 none;
  86. }
  87. }
  88. .buttons_bar {
  89. position: absolute;
  90. bottom: 0;
  91. right: 0;
  92. left: 0;
  93. z-index: 2;
  94. padding: 0px 25px;
  95. height: 21px;
  96. line-height: 18px;
  97. border-top: 1px solid #999;
  98. text-align: right;
  99. .button {
  100. height: 17px;
  101. font-size: 12px;
  102. min-width: 0;
  103. }
  104. }
  105. .btn, .btn-group > .btn, .btn-group > .dropdown-menu {
  106. padding: 2px 8px;
  107. }
  108. .navbar-fixed-top {
  109. font-size: 11px;
  110. line-height: 16px;
  111. ul {
  112. width: 100%;
  113. }
  114. }
  115. .navbar-fixed-top a span,
  116. .dialog .nav a span {
  117. padding: 1px;
  118. padding-left: 18px;
  119. background-position: center left;
  120. background-repeat: no-repeat;
  121. background-position: 0px center;
  122. height: 22px;
  123. }
  124. .navbar-fixed-top i.close {
  125. width: 14px;
  126. height: 16px;
  127. margin-left: 4px;
  128. background-image: url('close.gif');
  129. margin-right: 0;
  130. background-position: center left;
  131. margin-top: 4px;
  132. }
  133. .navbar-fixed-top a,
  134. .dialog .nav a {
  135. span.references {
  136. background-image: url('references.png')
  137. }
  138. span.browser {
  139. background-image: url('browser.png')
  140. }
  141. span.sunit {
  142. background-image: url('test.png')
  143. }
  144. span.workspace {
  145. background-image: url('workspace.png')
  146. }
  147. span.debugger {
  148. background-image: url('debugger.png')
  149. }
  150. span.inspector {
  151. background-image: url('inspector.png')
  152. }
  153. }
  154. .navbar-fixed-top .navbar-inner {
  155. min-height: 24px;
  156. border-bottom: 1px solid #666;
  157. box-shadow: inset 0px 2px 2px #aaa;
  158. background: #bababa;
  159. }
  160. .navbar .nav {
  161. > li {
  162. line-height: 16px;
  163. text-align: center;
  164. max-width: 300px;
  165. }
  166. }
  167. .new_tab {
  168. width: 20px;
  169. height: 24px;
  170. line-height: 24px;
  171. border-right: 0 none;
  172. position: absolute;
  173. top: 0px;
  174. right: 0px;
  175. z-index: 2000;
  176. a {
  177. color: #444;
  178. &:hover {
  179. text-decoration: none;
  180. }
  181. }
  182. .dropdown-menu {
  183. left: auto;
  184. float: right;
  185. right: 0;
  186. }
  187. }
  188. .dropdown-menu {
  189. min-width: 0;
  190. text-align: left;
  191. }
  192. .navbar .nav > li > a {
  193. line-height: 22px;
  194. padding: 0px 8px;
  195. font-size: 11px;
  196. border-right: 1px solid #777;
  197. text-shadow: #ddd 0px 1px 0px;
  198. color: #222;
  199. span {
  200. display: block;
  201. overflow: hidden;
  202. }
  203. }
  204. .nav > li > a:hover {
  205. background: transparent;
  206. }
  207. .navbar .nav > li > a:hover {
  208. color: #333;
  209. background-image: linear-gradient(top, #cfcfcf, #c0c0c0);
  210. background-image: -webkit-linear-gradient(top, #cfcfcf, #c0c0c0);
  211. background-image: -moz-linear-gradient(top, #cfcfcf, #c0c0c0);
  212. background-image: -o-linear-gradient(top, #cfcfcf, #c0c0c0);
  213. text-shadow: 0 1px 0 #ddd;
  214. box-shadow: 0 0 0;
  215. }
  216. .navbar .nav > .active > a,
  217. .navbar .nav > .active > a:hover,
  218. .navbar .nav > .active > a:focus,
  219. .navbar .nav .ui-sortable-helper a {
  220. color: #444;
  221. background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
  222. background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
  223. background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
  224. background-image: -o-linear-gradient(top, #dfdfdf, #d0d0d0);
  225. text-shadow: 0 1px 0 #ddd;
  226. box-shadow: 0 0 0;
  227. }
  228. .navbar .nav .ui-sortable-helper a {
  229. border-left: 1px solid #777;
  230. }
  231. .navbar-fixed-top i {
  232. opacity: 0.4;
  233. margin-right: 5px;
  234. height: 12px;
  235. margin-top: 0;
  236. }
  237. .navbar-fixed-top .active i {
  238. opacity: 0.6;
  239. }
  240. .nav-pills.nav-stacked > li > a {
  241. border-radius: 0;
  242. -webkit-border-radius: 0;
  243. -moz-border-radius: 0;
  244. padding: 2px 2px 1px 4px;
  245. margin: 0;
  246. font-size: 11px;
  247. color: #111;
  248. white-space: nowrap;
  249. }
  250. [class^="icon-"], [class*=" icon-"] {
  251. margin-right: 2px;
  252. }
  253. .dropdown-menu {
  254. border-radius: 0;
  255. padding: 0;
  256. margin: 3px;
  257. }
  258. .nav-pills > .active > a {
  259. background-color: #ddd;
  260. color: #fff;
  261. text-shadow: 0 0 0;
  262. }
  263. .focused .nav-pills {
  264. background-color: #f3f7fb;
  265. }
  266. .focused .nav-pills > .active > a,
  267. .nav-pills > .active > a:hover,
  268. .dropdown-menu li > a:hover,
  269. .dropdown-menu li > a:focus,
  270. .dropdown-submenu:hover > a,
  271. .dropdown-menu .active > a,
  272. .dropdown-menu .active > a:hover,
  273. .CodeMirror-hint-active {
  274. background: rgba(95, 159, 228, 0.62);
  275. color: #fff;
  276. text-shadow: 0 0 0;
  277. }
  278. .welcome {
  279. position: fixed;
  280. top: 0;
  281. bottom: 0;
  282. left: 50%;
  283. margin-left: -170px;
  284. width: 340px;
  285. margin-top: 60px;
  286. text-shadow: 0 1px 0 #fafafa;
  287. color: #666;
  288. font-size: 14px;
  289. h2 {
  290. text-align: center;
  291. color: #666;
  292. }
  293. button {
  294. background: #eee;
  295. margin: 10px;
  296. padding: 20px;
  297. height: auto;
  298. width: 150px;
  299. }
  300. }
  301. .sunit.status {
  302. &.success {
  303. background: #43d443;
  304. }
  305. &.failure {
  306. background: #ecd443;
  307. }
  308. &.error {
  309. background: #e56f3b;
  310. }
  311. }
  312. .tool_container {
  313. position: absolute;
  314. top: 23px;
  315. bottom: 0;
  316. left: 0;
  317. right: 0;
  318. }
  319. .transcript textarea {
  320. width: 100%;
  321. height: 100%;
  322. margin: 0;
  323. padding: 0;
  324. border: 0;
  325. }
  326. .tool_container .panes {
  327. position: relative;
  328. height: 100%;
  329. width: 100%;
  330. overflow: hidden;
  331. }
  332. .tool_container .panes .pane {
  333. position: absolute;
  334. overflow: auto;
  335. top: 0;
  336. left: 0;
  337. right: 0;
  338. bottom: 0;
  339. background: #fefefe;
  340. }
  341. .tool_container .multi_pane {
  342. position: relative;
  343. height: 100%;
  344. width: auto;
  345. overflow-x: auto;
  346. }
  347. .tool_container .multi_pane .pane {
  348. height: 100%;
  349. max-width: 300px;
  350. border-right: 1px solid #888;
  351. }
  352. .tool_container .panes .pane > div {
  353. height: 100%;
  354. position: relative;
  355. }
  356. .tool_container .panes.horizontal > .pane {
  357. min-height: 50px;
  358. }
  359. .tool_container .panes.horizontal > .pane {
  360. top: 50%;
  361. }
  362. .tool_container .panes.horizontal > .pane:first-child {
  363. top: 0;
  364. bottom: 50%;
  365. }
  366. .tool_container .panes.vertical > .pane {
  367. left: 50%;
  368. }
  369. .tool_container .panes.vertical > .pane:first-child {
  370. left: 0;
  371. right: 50%;
  372. }
  373. .tool_container .splitter {
  374. position: absolute;
  375. border-width: 0;
  376. z-index: 10;
  377. }
  378. .tool_container .splitter.vertical {
  379. width: 5px;
  380. left: 50%;
  381. margin-left: -1px;
  382. border-left: 1px solid #888;
  383. height: 100%;
  384. float: left;
  385. cursor: ew-resize;
  386. }
  387. .tool_container .splitter.horizontal {
  388. top: 50%;
  389. height: 5px;
  390. margin-top: -1px;
  391. width: 100%;
  392. border-top: 1px solid #888;
  393. cursor: ns-resize;
  394. }
  395. .tool_container .panes .pane .nav-pills {
  396. position: absolute;
  397. overflow-y: auto;
  398. top: 17px;
  399. bottom: 17px;
  400. width: 100%;
  401. margin: 0;
  402. }
  403. .tool_container .pane .nav-pills i {
  404. display: inline-block;
  405. width: 16px;
  406. height: 16px;
  407. margin-right: 4px;
  408. background-image: none;
  409. background-position: top left;
  410. line-height: 14px;
  411. vertical-align: text-top;
  412. }
  413. .tool_container .pane .nav-pills i.announcement {
  414. background-image: url('announcement.png');
  415. }
  416. .tool_container .pane .nav-pills i.class {
  417. background-image: url('class.png');
  418. }
  419. .tool_container .pane .nav-pills i.collection {
  420. background-image: url('collection.png');
  421. }
  422. .tool_container .pane .nav-pills i.test {
  423. background-image: url('test.png');
  424. }
  425. .tool_container .pane .nav-pills i.exception {
  426. background-image: url('exception.png');
  427. }
  428. .tool_container .pane .nav-pills i.widget {
  429. background-image: url('widget.png');
  430. }
  431. .tool_container .pane .nav-pills i.magnitude {
  432. background-image: url('magnitude.png');
  433. }
  434. .tool_container .pane .nav-pills i.package {
  435. background-image: url('package.png');
  436. }
  437. .tool_container .pane .nav-pills i.package_dirty {
  438. background-image: url('package-dirty.png');
  439. }
  440. .tool_container .pane .nav-pills i.private {
  441. background-image: url('private.png');
  442. }
  443. .tool_container .pane .nav-pills i.extension {
  444. background-image: url('extension.png');
  445. }
  446. .tool_container .pane .nav-pills i.initialization {
  447. background-image: url('initialization.png');
  448. }
  449. .tool_container .pane .nav-pills i.package {
  450. background-image: url('package.png');
  451. }
  452. .tool_container .pane .nav-pills i.override {
  453. background-image: url('resources/override.png ');
  454. }
  455. .tool_container .pane .nav-pills i.overridden {
  456. background-image: url('overridden.png');
  457. }
  458. .tool_container .pane .nav-pills i.override-overridden {
  459. background-image: url('override-overridden.png');
  460. }
  461. .tool_container .pane .nav-pills i.warning {
  462. background-image: url('warning.gif');
  463. }
  464. .tool_container .pane .nav-pills i.uncommented {
  465. background-image: url('uncommented.png');
  466. }
  467. .tool_container .list-label {
  468. font-size: 11px;
  469. border-radius: 0;
  470. border-bottom: 1px solid #999;
  471. border-top: 1px solid #eee;
  472. background-color: #eee;
  473. background-image: -webkit-linear-gradient(top, #eee, #ddd);
  474. background-image: -moz-linear-gradient(top, #eee, #ddd);
  475. background-image: -o-linear-gradient(top, #eee, #ddd);
  476. background-image: linear-gradient(top, #eee, #ddd);
  477. color: #444;
  478. font-weight: bold;
  479. text-shadow: 0 0 0;
  480. padding-left: 4px;
  481. line-height: 14px;
  482. height: 15px;
  483. text-shadow: 0 1px 0 #eee;
  484. }
  485. .tool_container .list-label .btn-group.cog {
  486. position: absolute;
  487. top: 0;
  488. right: 0;
  489. padding: 0;
  490. margin: 0;
  491. }
  492. .tool_container .list-label .btn-group.open .dropdown-toggle {
  493. box-shadow: 0 0 0;
  494. border: 0;
  495. }
  496. .tool_container .list-label .btn-group > .dropdown-menu {
  497. padding: 0;
  498. font-size: 11px;
  499. }
  500. .tool_container .list-label .btn-group.cog i {
  501. margin-top: 1px;
  502. }
  503. .tool_container .list-label .cog .btn.dropdown-toggle {
  504. padding: 0;
  505. margin: 0;
  506. line-height: 12px;
  507. border: 0;
  508. background: transparent;
  509. }
  510. .tool_container .panes .pane .pane_actions {
  511. position: absolute;
  512. overflow: hidden;
  513. width: 100%;
  514. height: 16px;
  515. bottom: 0;
  516. padding: 0;
  517. margin: 0;
  518. }
  519. .tool_container .pane_actions, .tool_container .buttons_bar {
  520. background: #dadada;
  521. border-top: 1px solid #666;
  522. background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
  523. background-image: -moz-linear-gradient(top, #dadada, #bdbdbd);
  524. background-image: -o-linear-gradient(top, #dadada, #bdbdbd);
  525. background-image: linear-gradient(top, #dadada, #bdbdbd);
  526. }
  527. .tool_container .panes .pane .pane_actions .info {
  528. padding: 10px 5px 5px;
  529. font-weight: bold;
  530. color: #666;
  531. line-height: 20px;
  532. }
  533. .tool_container .panes .pane .pane_actions .btn-group {
  534. display: inline;
  535. margin-left: 5px;
  536. }
  537. .tool_container .panes .pane .pane_actions label {
  538. display: inline-block;
  539. padding-left: 30px;
  540. font-size: 11px;
  541. line-height: 16px;
  542. vertical-align: top;
  543. text-shadow: #ddd 0px 1px 0px;
  544. color: #222;
  545. }
  546. .tool_container .panes .pane .pane_actions label input {
  547. float: none;
  548. vertical-align: top;
  549. margin-top: 2px;
  550. margin-right: 5px;
  551. }
  552. .tool_container .panes .pane .pane_actions .btn {
  553. background: transparent;
  554. border: 0;
  555. font-size: 11px;
  556. line-height: 16px;
  557. padding: 0 5px;
  558. margin: 0;
  559. border-radius: 0;
  560. box-shadow: 0 0 0;
  561. vertical-align: top;
  562. /* min-width: 50px; */
  563. }
  564. .tool_container .panes .pane .pane_actions .btn:hover {
  565. background-color: #bbb;
  566. }
  567. .tool_container .panes .pane .pane_actions .btn-group .btn:hover {
  568. background-color: transparent;
  569. }
  570. .tool_container .panes .pane .pane_actions .btn-group .btn.active {
  571. text-shadow: #ddd 0px 1px 0px;
  572. color: #222;
  573. background: #bbb;
  574. background-image: linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
  575. background-image: -webkit-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
  576. background-image: -moz-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
  577. background-image: -o-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
  578. }
  579. .tool_container .panes .pane .class_side .nav-pills {
  580. font-weight: bold;
  581. background: #ffd
  582. }
  583. .key_helper {
  584. z-index: 2001;
  585. position: fixed;
  586. top: 120px;
  587. left: 50%;
  588. width: 400px;
  589. max-height: 300px;
  590. margin-left: -200px;
  591. background: white;
  592. box-shadow: 0 0 6px #aaa;
  593. border: 1px solid #aaa;
  594. font-size: 11px;
  595. transition: all .5s;
  596. -webkit-transition: all .5s;
  597. -moz-transition: all .5s;
  598. -o-transition: all .5s;
  599. -ms-transition: all .5s;
  600. .command {
  601. padding: 0;
  602. display: inline-block;
  603. width: 50%;
  604. strong {
  605. display: inline-block;
  606. min-width: 1.4em;
  607. text-align: left;
  608. }
  609. }
  610. #binding-helper-main {
  611. display: block;
  612. padding: 5px;
  613. background: #eee;
  614. }
  615. .label {
  616. padding: 1px 4px;
  617. font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
  618. background: transparent;
  619. color: #0E4561;
  620. text-shadow: none;
  621. border: 0 none;
  622. }
  623. .action {
  624. padding: 0 0.5em 0 5px;
  625. color: inherit;
  626. font-weight: bold;
  627. }
  628. .selected {
  629. background-image: linear-gradient(top, #ccc, #bbb);
  630. background-image: -moz-linear-gradient(top, #ccc, #bbb);
  631. background-image: -o-linear-gradient(top, #ccc, #bbb);
  632. background-image: -webkit-linear-gradient(top, #ccc, #bbb);
  633. height: 28px;
  634. padding: 0 8px;
  635. font-weight: bold;
  636. font-size: 18px;
  637. line-height: 28px;
  638. text-shadow: 0 1px 0 #fff;
  639. display: block;
  640. border-bottom: 1px solid #aaa;
  641. }
  642. .close {
  643. font-size: 14px;
  644. line-height: 28px;
  645. opacity: 0.6;
  646. position: absolute;
  647. top: 0;
  648. right: 4px;
  649. }
  650. .close:hover {
  651. opacity: 0.8;
  652. }
  653. input {
  654. outline: none;
  655. font-size: 11px;
  656. padding: 2px 8px;
  657. background: #fff;
  658. border: 1px solid #a1a1a1;
  659. border-radius: 12px;
  660. box-shadow: inset 0 0px 2px 0px #aaa;
  661. margin: 2px 4px;
  662. line-height: 1em;
  663. }
  664. .error .help-inline,
  665. .error input {
  666. color: #B91010;
  667. font-weight: bold;
  668. }
  669. // .typeahead.dropdown-menu {
  670. // position: fixed !important;
  671. // top: auto !important;
  672. // bottom: 30px !important;
  673. // }
  674. #cog-helper {
  675. position: fixed;
  676. bottom: 2px;
  677. right: 2px;
  678. z-index: 1000;
  679. opacity: 0.6;
  680. transition: all .5s;
  681. -webkit-transition: all .5s;
  682. -moz-transition: all .5s;
  683. -o-transition: all .5s;
  684. -ms-transition: all .5s;
  685. }
  686. #cog-helper:hover {
  687. opacity: 1;
  688. }
  689. }
  690. #helper {
  691. z-index: 300;
  692. top: 50%;
  693. position: absolute;
  694. left: 50%;
  695. margin-left: -220px;
  696. margin-top: -35px;
  697. width: 400px;
  698. text-align: center;
  699. color: #ddd;
  700. font-size: 18px;
  701. font-weight: bold;
  702. text-shadow: 0 -1px 0 #111;
  703. padding: 20px;
  704. background: rgba(0, 0, 0, 0.6);
  705. border-radius: 40px;
  706. }
  707. #overlay {
  708. z-index: 2000;
  709. background: transparent;
  710. position: fixed;
  711. top: 0;
  712. left: 0;
  713. right: 0;
  714. bottom: 0;
  715. }
  716. .growl {
  717. position: fixed;
  718. top: 10px;
  719. right: 10px;
  720. margin: 0;
  721. z-index: 2001;
  722. width: 200px;
  723. height:auto;
  724. padding: 15px;
  725. background-image: -webkit-linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
  726. background-image: -moz-linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
  727. background-image: -o-linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
  728. background-image: linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
  729. border: 1px solid #aaa;
  730. border-radius: 8px;
  731. box-shadow: 0 0 3px #ccc;
  732. font-weight: bold;
  733. text-shadow: 0px 2px 1px #fff;
  734. }
  735. .confirmation, .dialog {
  736. z-index: 2001;
  737. background: rgba(243, 243, 243, 0.9);
  738. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
  739. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
  740. background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
  741. background-image: linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
  742. padding: 20px;
  743. width: 250px;
  744. position: fixed;
  745. top: -500px;
  746. left: 50%;
  747. margin-left: -135px;
  748. box-shadow: 0 0 6px #333;
  749. transition: top .2s;
  750. -webkit-transition: top .2s;
  751. -moz-transition: top .2s;
  752. -o-transition: top .2s;
  753. .head {
  754. display: block;
  755. }
  756. .hl_widget {
  757. .form-actions {
  758. padding: 0;
  759. border: 0;
  760. }
  761. }
  762. .nav {
  763. border: 1px solid #999;
  764. span {
  765. font-size: 11px;
  766. font-weight: normal;
  767. }
  768. }
  769. .title {
  770. font-size: 16px;
  771. margin-bottom: 15px;
  772. }
  773. &.large {
  774. width: 400px;
  775. margin-left: -220px;
  776. textarea {
  777. width: 385px;
  778. height: 200px;
  779. }
  780. }
  781. textarea {
  782. display: block;
  783. width: 235px;
  784. }
  785. input[type="text"] {
  786. margin: 5px 0;
  787. width: 390px;
  788. }
  789. .progress {
  790. height: 5px;
  791. .bar {
  792. background-color: #e9eaf5;
  793. background-image: -webkit-linear-gradient(top, #B1BDD5, #8999b8);
  794. background-image: -moz-linear-gradient(top, #B1BDD5, #8999b8);
  795. background-image: -o-linear-gradient(top, #B1BDD5, #8999b8);
  796. background-image: linear-gradient(top, #B1BDD5, #8999b8);
  797. }
  798. }
  799. span {
  800. font-size: 13px;
  801. font-weight: bold;
  802. }
  803. .buttons {
  804. text-align: right;
  805. margin-top: 20px;
  806. }
  807. &.active {
  808. top: 0;
  809. }
  810. }
  811. .button {
  812. border-radius: 3px !important;
  813. background: #ccc;
  814. border: 1px solid #9B9B9B;
  815. height: 20px;
  816. border-radius: 5px;
  817. min-width: 68px;
  818. padding: 0 10px;
  819. text-align: center;
  820. margin: 0;
  821. margin-left: 10px;
  822. background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, .04) 50.5%, rgba(0, 0, 0, .04) 100%) #fff;
  823. background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, .04) 50.5%, rgba(0, 0, 0, .04) 100%) #fff;
  824. background: -o-linear-gradient(bottom, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, .04) 50.5%, rgba(0, 0, 0, .04) 100%) #fff;
  825. background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, .04) 50.5%, rgba(0, 0, 0, .04) 100%) #fff;
  826. background: linear-gradient(bottom, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, .04) 50.5%, rgba(0, 0, 0, .04) 100%) #fff;
  827. font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
  828. }
  829. .button.default {
  830. border-top: 1px solid #535273;
  831. border: 1px solid #4F4D67;
  832. border-bottom: 1px solid #4B4B58;
  833. background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, .3) 50.5%, rgba(255, 255, 255, .45) 95%, rgba(255, 255, 255, .8) 100%) #b1bdd5;
  834. background: -moz-linear-gradient(bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, .3) 50.5%, rgba(255, 255, 255, .45) 95%, rgba(255, 255, 255, .8) 100%) #b1bdd5;
  835. background: -o-linear-gradient(bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, .3) 50.5%, rgba(255, 255, 255, .45) 95%, rgba(255, 255, 255, .8) 100%) #b1bdd5;
  836. background: -ms-linear-gradient(bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, .3) 50.5%, rgba(255, 255, 255, .45) 95%, rgba(255, 255, 255, .8) 100%) #b1bdd5;
  837. background: linear-gradient(bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, .3) 50.5%, rgba(255, 255, 255, .45) 95%, rgba(255, 255, 255, .8) 100%) #b1bdd5;
  838. -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
  839. -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
  840. box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
  841. }
  842. .button:hover {
  843. cursor: pointer;
  844. border: 1px solid rgba(0, 0, 0, .6);
  845. }
  846. .button:active {
  847. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
  848. -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
  849. box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
  850. }
  851. .button:focus {
  852. outline: 0;
  853. border-color: #08C;
  854. box-shadow: 0 0 5px #08C;
  855. }
  856. .doc {
  857. background: white;
  858. }
  859. .doc code .doc pre, .doc p, .doc div {
  860. font-size: 13px;
  861. }
  862. .doc code {
  863. padding: 1px 4px;
  864. }
  865. .doc .head {
  866. background: #666;
  867. padding: 10px;
  868. font-size: 22px;
  869. color: white;
  870. }
  871. .focused .doc .head {
  872. background: #08c;
  873. }
  874. .doc .button {
  875. float: right;
  876. }
  877. .doc .markdown,
  878. .doc .inheritance {
  879. padding: 10px;
  880. }
  881. .doc h1 {
  882. font-size: 22px;
  883. margin: 0 10px;
  884. border-bottom: 1px solid #666;
  885. }
  886. .doc h2 {
  887. font-size: 16px;
  888. }
  889. .transcript_container .list-label {
  890. height: 16px;
  891. position: absolute;
  892. top: 0;
  893. right: 0;
  894. left: 0;
  895. }
  896. .transcript {
  897. position: absolute;
  898. top: 17px;
  899. bottom: 0;
  900. left: 0;
  901. right: 0;
  902. }
  903. .transcript textarea {
  904. width: 100%;
  905. height: 100%;
  906. margin: 0;
  907. padding: 0;
  908. border: 0;
  909. }
  910. .hl_debugger {
  911. .tool_container {
  912. top: 53px;
  913. }
  914. .head {
  915. position: absolute;
  916. top: 23px;
  917. width: 100%;
  918. background: #08c url(debugger.png) 10px center no-repeat;
  919. border-bottom: 1px solid white;
  920. h2 {
  921. font-size: 14px;
  922. line-height: 30px;
  923. padding: 0 30px;
  924. margin: 0;
  925. color: white;
  926. }
  927. }
  928. }
  929. .progress {
  930. border-radius: 0;
  931. }
  932. }