helios-niflheim.less 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. body[id="helios"] {
  2. &.niflheim {
  3. background: #eeeeee url('/images/squared_metal-dark.png') repeat;
  4. .btn-group > .dropdown-menu {
  5. background-color: #666;
  6. border-color: #888;
  7. padding: 2px 8px;
  8. }
  9. .btn-group > .dropdown-menu a {
  10. // todo: remove
  11. /* position: absolute;*/
  12. height: 100%;
  13. // todo: remove
  14. /* width: 100%;*/
  15. }
  16. .btn-group > .dropdown-menu a {
  17. color: #fffffb;
  18. }
  19. // todo: check if it can be removed
  20. /* .navbar-fixed-top ul {
  21. width: 100%;
  22. }*/
  23. .navbar-fixed-top i.close {
  24. background-image: url('../../images/close-dark.png');
  25. }
  26. .navbar-fixed-top .navbar-inner {
  27. border-bottom: 1px solid #222;
  28. border-top: 1px solid #222;
  29. box-shadow: inset 0px 1px 0px #777;
  30. background: #4d5052;
  31. }
  32. ::-webkit-scrollbar {
  33. width: 14px;
  34. height: 14px;
  35. }
  36. ::-webkit-scrollbar-corner {
  37. background-color: transparent;
  38. }
  39. ::-webkit-scrollbar-track {
  40. background-color: transparent;
  41. }
  42. .focused ::-webkit-scrollbar-thumb {
  43. background-color: #4c4c4c;
  44. }
  45. .focused ::-webkit-scrollbar-thumb:hover {
  46. background-color: #3a3a3a;
  47. }
  48. ::-webkit-scrollbar-thumb {
  49. background-color: #585858;
  50. border: 3px solid transparent;
  51. border-radius: 9px;
  52. background-clip: content-box;
  53. }
  54. ::-webkit-scrollbar-thumb:hover {
  55. background-color: #707070;
  56. }
  57. .new_tab a b {
  58. border-top: 4px solid #a7a7a7;
  59. }
  60. .navbar .nav > li > a {
  61. border-right: 1px solid #222;
  62. box-shadow: none;
  63. }
  64. .navbar .nav > li > a:hover {
  65. color: #f00;
  66. background-image: linear-gradient(top, #666, #454648);
  67. background-image: -webkit-linear-gradient(top, #666, #454648);
  68. background-image: -moz-linear-gradient(top, #666, #454648);
  69. background-image: -o-linear-gradient(top, #666, #454648);
  70. }
  71. .navbar .nav > .active > a,
  72. .navbar .nav > .active > a:hover,
  73. .navbar .nav > .active > a:focus,
  74. .navbar .nav .ui-sortable-helper a {
  75. color: #ddd;
  76. background-image: linear-gradient(top, #666, #454648);
  77. background-image: -webkit-linear-gradient(top, #666, #454648);
  78. background-image: -moz-linear-gradient(top, #666, #454648);
  79. background-image: -o-linear-gradient(top, #666, #454648);
  80. text-shadow: none;
  81. box-shadow: inset -1px 0px 1px -1px #eee, inset 1px 1px 1px -1px #eee;
  82. border-right: 1px solid #222;
  83. }
  84. .navbar-fixed-top li.inactive{
  85. opacity: 0.6;
  86. background: #4d5052;
  87. box-shadow: none;
  88. }
  89. .navbar-fixed-top li.inactive span{
  90. text-shadow: none;
  91. color: #ccc;
  92. }
  93. .nav-pills.nav-stacked > li > a {
  94. color: #b8c4cf;
  95. }
  96. .focused .nav-pills.nav-stacked > li > a {
  97. color: #ddd;
  98. }
  99. .nav-pills > .active > a {
  100. background-color: #222B3C;
  101. color: #fffffb !important;
  102. }
  103. .focused .nav-pills {
  104. background-color: #585858;
  105. }
  106. .focused .nav-pills > .active > a,
  107. .nav-pills > .active > a:hover,
  108. .dropdown-menu li > a:hover,
  109. .dropdown-menu li > a:focus,
  110. .dropdown-submenu:hover > a,
  111. .dropdown-menu .active > a,
  112. .dropdown-menu .active > a:hover,
  113. .CodeMirror-hint-active {
  114. background: #305f9f;
  115. }
  116. .CodeMirror {
  117. position: initial;
  118. height: 100%;
  119. width: initial;
  120. }
  121. .welcome {
  122. color: #fffffb;
  123. text-shadow: none;
  124. }
  125. [class^="icon-"], body[id="helios"][class*=" icon-"]{
  126. opacity: 0.68;
  127. background-image: url("../../bower_components/bootstrap/img/glyphicons-halflings-white.png");
  128. }
  129. .welcome h2 {
  130. text-align: center;
  131. // todo: remove
  132. /* color: #666;*/
  133. }
  134. .welcome button {
  135. // todo: remove
  136. /* background: #eee;*/
  137. margin: 10px;
  138. padding: 20px;
  139. height: auto;
  140. width: 150px;
  141. }
  142. .tool_container .panes .pane {
  143. background: #444;
  144. }
  145. .tool_container .splitter.vertical {
  146. border-left: 1px solid #525252;
  147. }
  148. .tool_container .splitter.horizontal {
  149. border-top: 1px solid #666;
  150. }
  151. //todo: remove
  152. /*.tool_container .pane .nav-pills i.package {
  153. background-image: url('../images/package.png');
  154. }*/
  155. .tool_container .list-label {
  156. border-bottom: 1px solid #525252;
  157. background-image: linear-gradient(top, #585858, #323232);
  158. background-image: -webkit-linear-gradient(top, #585858, #323232);
  159. background-image: -moz-linear-gradient(top, #585858, #323232);
  160. background-image: -o-linear-gradient(top, #585858, #323232);
  161. color: #ccc;
  162. font-weight: normal;
  163. text-shadow: none;
  164. }
  165. .transcript-container .list-label {
  166. border-top: none;
  167. }
  168. .tool_container .pane_actions,
  169. .tool_container .buttons_bar {
  170. border-top: 1px solid #222;
  171. background-image: linear-gradient(top, #585858, #323232);
  172. background-image: -webkit-linear-gradient(top, #585858, #323232);
  173. background-image: -moz-linear-gradient(top, #585858, #323232);
  174. background-image: -o-linear-gradient(top, #585858, #323232);
  175. }
  176. .tool_container .panes .pane .pane_actions label {
  177. test-shadow: none;
  178. color: #d3d3d3;
  179. }
  180. .tool_container .panes .pane .pane_actions .btn {
  181. border: 1px;
  182. text-shadow: none;
  183. margin-top: -1px;
  184. color: #929292
  185. }
  186. .tool_container .panes .pane .pane_actions .btn-group .btn.active {
  187. color: #d3d3d3;
  188. text-shadow: none;
  189. box-shadow: inset 0px 0px 2px 0px #323232;
  190. border-radius: 4px;
  191. background: #666;
  192. background-image: linear-gradient(top, #454545, #252525);
  193. background-image: -webkit-linear-gradient(top, #454545, #252525);
  194. background-image: -moz-linear-gradient(top, #454545, #252525);
  195. background-image: -o-linear-gradient(top, #454545, #252525);
  196. }
  197. .tool_container .panes .pane .class_side .nav-pills {
  198. background: #38404a;
  199. }
  200. .key_helper {
  201. background: #444;
  202. box-shadow: 0 0 80px 2px #222;
  203. border: 1px solid #777;
  204. }
  205. .key_helper .command {
  206. color: #ccc;
  207. }
  208. .key_helper .command strong {
  209. display: inline-block;
  210. min-width: 1.4em;
  211. text-align: center;
  212. background-color: #eee;
  213. color: #2b658b;
  214. }
  215. .key_helper #binding-helper-main {
  216. background: #444;
  217. }
  218. .key_helper .action {
  219. vertical-align: middle;
  220. }
  221. .key_helper .selected {
  222. background-image: linear-gradient(top, #484848, #323232);
  223. background-image: -webkit-linear-gradient(top, #484848, #323232);
  224. background-image: -moz-linear-gradient(top, #585858, #323232);
  225. background-image: -o-linear-gradient(top, #585858, #323232);
  226. text-shadow: none;
  227. border-bottom: 1px solid #585858;
  228. color: #ccc
  229. }
  230. .growl {
  231. background-image: -webkit-linear-gradient(#505050, #3c3c3c);
  232. background-image: -moz-linear-gradient(#505050, #3c3c3c);
  233. background-image: -o-linear-gradient(#505050, #3c3c3c);
  234. background-image: linear-gradient(#888, #666);
  235. box-shadow: 0 0 3px #777;
  236. color: #ccc;
  237. text-shadow: none;
  238. }
  239. .button {
  240. color: #d3d3d3;
  241. border-radius: 3px !important;
  242. border: 1px solid #383838;
  243. background-image: linear-gradient(top, #454545, #252525);
  244. background-image: -webkit-linear-gradient(top, #454545, #252525);
  245. background-image: -moz-linear-gradient(top, #454545, #252525);
  246. background-image: -o-linear-gradient(top, #454545, #252525);
  247. }
  248. .button.default {
  249. color: #d3d3d3;
  250. border: 1px solid #585858;
  251. background-image: linear-gradient(top, #549ceb, #12374f);
  252. background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
  253. background-image: -moz-linear-gradient(top, #549ceb, #12374f);
  254. background-image: -o-linear-gradient(top, #549ceb, #12374f);
  255. }
  256. .dialog .button {
  257. color: #444;
  258. border-radius: 3px !important;
  259. background: #ccc;
  260. border: 1px solid #9B9B9B;
  261. height: 20px;
  262. border-radius: 5px;
  263. min-width: 68px;
  264. padding: 0 10px;
  265. text-align: center;
  266. margin: 0;
  267. margin-left: 10px;
  268. background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  269. background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  270. background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  271. background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  272. background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  273. font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
  274. }
  275. .dialog .button:hover {
  276. cursor: pointer;
  277. border: 1px solid rgba(0, 0, 0, 0.6);
  278. background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  279. background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  280. background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  281. background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  282. background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
  283. }
  284. .dialog .button.default {
  285. border-top: 1px solid #535273;
  286. border: 1px solid #4F4D67;
  287. border-bottom: 1px solid #4B4B58;
  288. background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
  289. background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
  290. background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
  291. background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
  292. background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
  293. -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
  294. -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
  295. box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
  296. }
  297. .dialog .button.default:hover {
  298. cursor: pointer;
  299. color: #d3d3d3;
  300. border: 1px solid #585858;
  301. background-image: linear-gradient(top, #549ceb, #12374f);
  302. background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
  303. background-image: -moz-linear-gradient(top, #549ceb, #12374f);
  304. background-image: -o-linear-gradient(top, #549ceb, #12374f);
  305. }
  306. .button:hover {
  307. cursor: pointer;
  308. border: 1px solid #444;
  309. background-image: linear-gradient(top, #353535, #151515);
  310. background-image: -webkit-linear-gradient(top, #353535, #151515);
  311. background-image: -moz-linear-gradient(top, #353535, #151515);
  312. background-image: -o-linear-gradient(top, #353535, #151515);
  313. }
  314. .button.default:hover {
  315. cursor: pointer;
  316. border: 1px solid #4F4D67;
  317. border-top: 1px solid #535273;
  318. border-bottom: 1px solid #4B4B58;
  319. color: #0a0000;
  320. background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
  321. background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
  322. background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
  323. background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
  324. background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
  325. -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
  326. -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
  327. box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
  328. }
  329. .doc {
  330. background: transparent;
  331. color: #ccc;
  332. }
  333. .doc code {
  334. color: #d46e69;
  335. background-color: #626262;
  336. border-color: #888;
  337. }
  338. .doc .button {
  339. background-image: linear-gradient(top, #444, #1d1d1d);
  340. background-image: -webkit-linear-gradient(top, #444, #1d1d1d);
  341. background-image: -moz-linear-gradient(top, #444, #1d1d1d);
  342. background-image: -o-linear-gradient(top, #444, #1d1d1d);
  343. }
  344. .doc .button.default {
  345. background-image: linear-gradient(top, #585858, #323232);
  346. background-image: -webkit-linear-gradient(top, #585858, #323232);
  347. background-image: -moz-linear-gradient(top, #585858, #323232);
  348. background-image: -o-linear-gradient(top, #585858, #323232);
  349. }
  350. .doc .button.default:hover {
  351. color: #ccc;
  352. background-image: linear-gradient(top, #454545, #252525);
  353. background-image: -webkit-linear-gradient(top, #454545, #252525);
  354. background-image: -moz-linear-gradient(top, #454545, #252525);
  355. background-image: -o-linear-gradient(top, #454545, #252525);
  356. }
  357. .doc .markdown > pre {
  358. background-color: #666;
  359. border: 1px solid #383838;
  360. }
  361. .doc .inheritance > a {
  362. color: #4098ed;
  363. }
  364. .doc .inheritance > a:hover {
  365. color: #4098ed;
  366. }
  367. .transcript textarea {
  368. background: #444;
  369. color: #b8c4cf;
  370. }
  371. .hl_debugger .list-label {
  372. border-top: 1px solid transparent;
  373. }
  374. }
  375. }