helios.less 22 KB

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