helios.less 22 KB

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