index.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
  2. @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
  3. html,
  4. body {
  5. width: 100%;
  6. height: 100%;
  7. margin: 0;
  8. padding: 0;
  9. overflow: hidden;
  10. font-family: sans-serif;
  11. }
  12. #waitDiv {
  13. position: absolute;
  14. width: 100%;
  15. height: 100%;
  16. display: flex;
  17. align-items: center;
  18. justify-content: center;
  19. background: black;
  20. opacity: 0.8;
  21. top:0px;
  22. left:0px;
  23. z-index: 10;
  24. flex-direction: column;
  25. }
  26. #waitLogo {
  27. -webkit-animation: spin1 2s infinite ease-in-out;
  28. -moz-animation: spin1 2s infinite ease-in-out;
  29. -o-animation: spin1 2s infinite ease-in-out;
  30. -ms-animation: spin1 2s infinite ease-in-out;
  31. animation: spin1 2s infinite ease-in-out;
  32. -webkit-transform-origin: 50% 50%;
  33. -moz-transform-origin: 50% 50%;
  34. -o-transform-origin: 50% 50%;
  35. transform-origin: 50% 50%;
  36. }
  37. @-webkit-keyframes spin1 {
  38. 0% { -webkit-transform: rotate(0deg);}
  39. 100% { -webkit-transform: rotate(360deg);}
  40. }
  41. @-moz-keyframes spin1 {
  42. 0% { -moz-transform: rotate(0deg);}
  43. 100% { -moz-transform: rotate(360deg);}
  44. }
  45. @-o-keyframes spin1 {
  46. 0% { -o-transform: rotate(0deg);}
  47. 100% { -o-transform: rotate(360deg);}
  48. }
  49. @-ms-keyframes spin1 {
  50. 0% { -ms-transform: rotate(0deg);}
  51. 100% { -ms-transform: rotate(360deg);}
  52. }
  53. @keyframes spin1 {
  54. 0% { transform: rotate(0deg);}
  55. 100% { transform: rotate(360deg);}
  56. }
  57. #waitTitle {
  58. text-align: center;
  59. font-size: 38px;
  60. color: #15A4FA;
  61. }
  62. .wrapper {
  63. height: calc(100% - 40px - 30px); /* nvabar top and bottom*/
  64. width: calc(100%);
  65. display: -ms-flexbox;
  66. display: flex;
  67. -ms-flex-direction: row;
  68. flex-direction: row;
  69. }
  70. .wrapper .gutter {
  71. background-color: #f7f7f7;
  72. background-repeat: no-repeat;
  73. background-position: 50%;
  74. }
  75. .wrapper .gutter.light {
  76. background-color: #f7f7f7;
  77. }
  78. .wrapper .gutter.dark {
  79. background-color: #333;
  80. }
  81. .wrapper .gutter:hover {
  82. cursor: ew-resize;
  83. }
  84. .wrapper .gutter.gutter-vertical {
  85. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
  86. }
  87. .wrapper .gutter.gutter-horizontal {
  88. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
  89. }
  90. .pbt-fade {
  91. opacity:0.5
  92. }
  93. .pbt-darken {
  94. opacity:1
  95. }
  96. .pbt-back-highlight {
  97. background-color:#CDC8F9;
  98. }
  99. .pbt-margin-decor-on {
  100. background-color: #364249;
  101. width:5px;
  102. }
  103. .pbt-back-highlight-dark {
  104. background-color:#364249;
  105. }
  106. .pbt-margin-decor-on-dark {
  107. background-color: #CDC8F9;
  108. width:5px;
  109. }
  110. #exampleList {
  111. padding-top: 5px;
  112. display: none;
  113. position: absolute;
  114. top: 40px;
  115. right: 0;
  116. width: 400px;
  117. height: calc(100% - 75px);
  118. overflow-y: auto;
  119. border-right: 1px solid #efefef;
  120. }
  121. #exampleList #exampleBanner {
  122. background-image: url("../css/pattern_ban_1.png");
  123. background-repeat: repeat;
  124. text-align: center;
  125. padding: 10px 0;
  126. margin-left: 2px;
  127. }
  128. #exampleList #exampleBanner h1 {
  129. text-align: center;
  130. font-weight: 700;
  131. color: #00aeef;
  132. font-size: 2em;
  133. margin: .67em 0;
  134. }
  135. #exampleList .horizontalSeparator {
  136. width: 80%;
  137. height: 0;
  138. display: block;
  139. border-top: 1px solid #00aeef;
  140. margin: 0 auto 20px auto;
  141. }
  142. #exampleList #filterBar {
  143. width: 80%;
  144. margin-left: 10%;
  145. }
  146. #exampleList #filterBarClear {
  147. display: none;
  148. height: 10px;
  149. margin-left: -19px;
  150. cursor: pointer;
  151. }
  152. #exampleList #noResultsContainer p {
  153. width: 100%;
  154. text-align: center;
  155. font-weight: 300;
  156. }
  157. #exampleList .categoryContainer p {
  158. margin-left: 5px;
  159. font-size: 20px;
  160. font-weight: 200;
  161. word-wrap: break-word;
  162. }
  163. #exampleList .categoryContainer .itemLine {
  164. cursor: pointer;
  165. background-color: #ebebeb;
  166. height: 120px;
  167. overflow: hidden;
  168. clear: both;
  169. margin: 5px;
  170. margin-bottom: 10px;
  171. }
  172. #exampleList .categoryContainer .itemLine img {
  173. display: inline-block;
  174. max-height: 100%;
  175. max-width: 120px;
  176. border: 0;
  177. }
  178. #exampleList .categoryContainer .itemLine .itemContent {
  179. display: inline-block;
  180. width: calc(100% - 125px);
  181. height: 100%;
  182. vertical-align: top;
  183. padding: 5px;
  184. box-sizing: border-box;
  185. }
  186. #exampleList .categoryContainer .itemLine .itemContent .itemContentLink {
  187. height: 100%;
  188. }
  189. #exampleList .categoryContainer .itemLine .itemContent .itemContentLink h3 {
  190. margin: 0;
  191. font-size: 18px;
  192. margin-bottom: 5px;
  193. text-decoration: none;
  194. }
  195. #exampleList .categoryContainer .itemLine .itemContent .itemContentLink p {
  196. margin: 0;
  197. font-size: 15px;
  198. margin-bottom: 3px;
  199. }
  200. #exampleList .categoryContainer .itemLine .itemContent .itemLineDocLink {
  201. position: relative;
  202. bottom: 20px;
  203. font-size: 15px;
  204. text-decoration: underline;
  205. color: #00aeef;
  206. }
  207. #exampleList .categoryContainer .itemLine .itemContent .itemLinePGLink {
  208. display: none;
  209. position: relative;
  210. float: right;
  211. bottom: 20px;
  212. text-align: right;
  213. font-size: 15px;
  214. text-decoration: underline;
  215. color: #00aeef;
  216. }
  217. .wrapper #jsEditor {
  218. padding-top:5px;
  219. height: calc(100% - 10px);
  220. }
  221. .wrapper #jsEditor.light {
  222. background-color: white;
  223. }
  224. .wrapper #jsEditor.dark {
  225. background-color: #1e1e1e;
  226. }
  227. .wrapper #canvasZone {
  228. height: 100%;
  229. }
  230. #renderCanvas {
  231. width: 100%;
  232. height: 100%;
  233. touch-action: none;
  234. display: block;
  235. font-size: 0;
  236. }
  237. #fpsLabel {
  238. position: absolute;
  239. right: 10px;
  240. top: 50px;
  241. cursor: default;
  242. z-index:10;
  243. background-color: #7283a0;
  244. color:white;
  245. padding:5px;
  246. border-radius: 3px;
  247. font-family: 'Montserrat';
  248. pointer-events: none;
  249. user-select: none;
  250. }
  251. .navbar {
  252. height: 40px;
  253. width: 100%;
  254. font-family: "Montserrat";
  255. font-weight: 400;
  256. -webkit-user-select: none;
  257. -moz-user-select: none;
  258. -ms-user-select: none;
  259. user-select: none;
  260. position: relative;
  261. z-index:5;
  262. line-height: 40px;
  263. }
  264. .navbar.dark {
  265. background-color: #333;
  266. box-shadow: 0 3px 10px #000;
  267. }
  268. .navbar.light {
  269. background-color: #efefef;
  270. box-shadow: 0 3px 10px #999;
  271. }
  272. .navbar .title {
  273. height: 40px;
  274. padding-left: 10px;
  275. color: #15A4FA;
  276. display: inline-block;
  277. }
  278. .navbar .version {
  279. height: 40px;
  280. display: inline-block;
  281. color: #7283a0;
  282. margin-right: 20px;
  283. }
  284. .navbar .category {
  285. height: 40px;
  286. margin: 0 15px 0 15px;
  287. display: inline-block;
  288. }
  289. .navbar .category.right {
  290. position: absolute;
  291. right: 0;
  292. top: 0;
  293. }
  294. .button {
  295. display: inline-block;
  296. height: 25px;
  297. line-height: 25px;
  298. color: white;
  299. background-color: #7283a0;
  300. margin: 0 2px 0 2px;
  301. padding: 0 10px 0 10px;
  302. font-size: 0.85em;
  303. border-radius: 3px;
  304. }
  305. .button i {
  306. margin-left: 10px;
  307. }
  308. .button:hover {
  309. cursor: pointer;
  310. background-color: #15A4FA;
  311. }
  312. .navbar .button.run {
  313. height: 30px;
  314. line-height: 30px;
  315. background-color: #15A4FA;
  316. font-size: 1.0em;
  317. }
  318. .navbar .select {
  319. position: relative;
  320. }
  321. .navbar .select .subSelect {
  322. position: relative;
  323. }
  324. .navbar .select:after {
  325. font-family: 'FontAwesome', sans-serif;
  326. content: "\00a0 \00a0 \00a0 \f078";
  327. }
  328. .navbar .select .toDisplay {
  329. border: 1px solid #7283a0;
  330. position: absolute;
  331. z-index: 10;
  332. left: 0;
  333. top: 25px;
  334. min-width: 100%;
  335. width: 150px;
  336. display: none;
  337. }
  338. .navbar .select .subSelect .toDisplaySub {
  339. border: 1px solid #7283a0;
  340. position: absolute;
  341. z-index: 10;
  342. left: 100%;
  343. top: 0;
  344. min-width: 100%;
  345. display: none;
  346. }
  347. .navbar .select .toDisplay .option {
  348. font-size: 0.9em;
  349. height: 35px;
  350. line-height: 35px;
  351. padding: 0px 5px 0px 5px;
  352. text-align: center;
  353. border-bottom : 1px solid rgba(0,0,0,0.1);
  354. }
  355. .navbar .select .toDisplay .option.light:hover {
  356. cursor: pointer;
  357. background-color: #d9d9d9;
  358. }
  359. .navbar .select .toDisplay .option.dark {
  360. background-color: #333;
  361. color: white;
  362. }
  363. .navbar .select .toDisplay .option.light {
  364. background-color: white;
  365. color: #7283a0;
  366. }
  367. .navbar .select .toDisplay .option.dark:hover {
  368. cursor: pointer;
  369. background-color: #555;
  370. }
  371. .navbar .select .toDisplayBig {
  372. border: 1px solid #7283a0;
  373. border-radius: 5px;
  374. position: absolute;
  375. z-index: 10;
  376. top: 32px;
  377. width:550px;
  378. max-height:390px;
  379. overflow-y: auto;
  380. right:0;
  381. position:absolute;
  382. font-size:0.8em;
  383. display: none;
  384. }
  385. .navbar .select .toDisplayBig.light {
  386. background-color: white;
  387. color: #15A4FA;
  388. }
  389. .navbar .select .toDisplayBig.dark {
  390. background-color: #333;
  391. color:white;
  392. }
  393. .navbar .select .toDisplayBig ul {
  394. column-count: 3;
  395. padding:0;
  396. margin:0;
  397. list-style: none;
  398. }
  399. .navbar .select .toDisplayBig ul li {
  400. padding:0 5px 0 5px;
  401. }
  402. .navbar .select .toDisplayBig ul li:hover {
  403. cursor: pointer;
  404. }
  405. .navbar .select .toDisplayBig ul li.light:hover {
  406. background-color: #d9d9d9;
  407. }
  408. .navbar .select .toDisplayBig ul li.dark:hover {
  409. background-color: #555;
  410. }
  411. .navbar .select .toDisplayBig a {
  412. text-decoration: none;
  413. }
  414. .navbar .select .toDisplayBig a.dark {
  415. color: white;
  416. }
  417. .navbar .select .toDisplayBig a.light {
  418. color: #7283a0;
  419. }
  420. .navbar .check:after {
  421. font-family: 'FontAwesome', sans-serif;
  422. content: "\00a0 \00a0 \00a0 \f14a";
  423. }
  424. .navbar .check.uncheck {
  425. background-color: #8290aa;
  426. }
  427. .navbar .check.uncheck:after {
  428. font-family: 'FontAwesome', sans-serif;
  429. content: "\00a0 \00a0 \00a0 \f096";
  430. }
  431. #errorZone {
  432. display:none;
  433. position: absolute;
  434. width: 50%;
  435. left: 25%;
  436. bottom: 40px;
  437. background-color: #C73228;
  438. padding:20px;
  439. border-radius: 5px;
  440. color:white;
  441. }
  442. #errorZone button {
  443. position:absolute;
  444. top : 3px;
  445. right: 10px;
  446. padding: 0;
  447. cursor: pointer;
  448. background: transparent;
  449. border: 0;
  450. -webkit-appearance: none;
  451. color: #000;
  452. text-shadow: 0 1px 0 #fff;
  453. opacity: .4;
  454. font-size: 1.8em;
  455. }
  456. /* Navbar bottom */
  457. .navbarBottom {
  458. height:30px;
  459. width:100%;
  460. line-height:30px;
  461. position:relative;
  462. font-family: 'Montserrat';
  463. }
  464. .navbarBottom.dark {
  465. background-color: #333;
  466. }
  467. .navbarBottom.light {
  468. background-color: #efefef;
  469. }
  470. .navbarBottom #statusBar {
  471. line-height:30px;
  472. color: #E74C3C;
  473. font-size: 14px;
  474. padding-left:20px;
  475. }
  476. .navbarBottom .links {
  477. position:absolute;
  478. right : 0;
  479. top:-1px;
  480. height:30px;
  481. padding-right:20px;
  482. }
  483. .navbarBottom .links .link{
  484. height:30px;
  485. display:inline-block;
  486. color:#999;
  487. padding: 0 10px 0 10px;
  488. margin : 0 5px 0 5px;
  489. font-size:0.8em;
  490. }
  491. .navbarBottom .links .link.light:hover{
  492. color:#999;
  493. background-color:#333;
  494. }
  495. .navbarBottom .links .link.dark:hover{
  496. color:#333;
  497. background-color:#eee;
  498. }
  499. .navbarBottom .links .link a{
  500. text-decoration: none;
  501. color:#999;
  502. display: inline-block;
  503. }
  504. /* Save form & co */
  505. .save-layer {
  506. display: none;
  507. position: absolute;
  508. top: 0;
  509. left: 0;
  510. width: 100%;
  511. height: 100%;
  512. background-color: rgba(120, 120, 120, .5);
  513. text-align: center;
  514. }
  515. .save-layer .save-form {
  516. position: absolute;
  517. top: 150px;
  518. left: calc(50% - 205px);
  519. width: 410px;
  520. height: 370px;
  521. padding-top: 15px;
  522. -webkit-border-radius: 6px;
  523. -moz-border-radius: 6px;
  524. border-radius: 6px;
  525. background-color: rgba(27, 27, 27, 0.75);
  526. border-color: #252525;
  527. color: white;
  528. font-family: "Montserrat";
  529. font-size: 14px;
  530. }
  531. .save-layer .save-form .separator {
  532. width: 350px;
  533. border-bottom: 1px solid #999;
  534. margin: auto;
  535. margin-bottom: 10px;
  536. }
  537. .save-layer .save-form input,
  538. .save-layer .save-form textarea {
  539. display:block;
  540. width: 350px;
  541. margin:auto;
  542. margin-bottom: 20px;
  543. font-family: "Montserrat";
  544. padding:5px;
  545. }
  546. /*Media queries*/
  547. @media (min-width: 1475px) {
  548. .navBar1600 { display: block; }
  549. .navBar1475 { display: none; }
  550. .navBar1030 { display: none; }
  551. .navBar750 { display: none; }
  552. .navbar .select .toDisplayBig ul {
  553. column-count: 3;
  554. }
  555. }
  556. @media (max-width: 1475px) {
  557. .navBar1600 { display: none; }
  558. .navBar1475 { display: none; }
  559. .navBar1030 { display: block; }
  560. .navBar750 { display: none; }
  561. .navbar .select .toDisplayBig ul {
  562. column-count: 2;
  563. }
  564. }
  565. @media (max-width: 750px) {
  566. .navBar1600 { display: none; }
  567. .navBar1475 { display: none; }
  568. .navBar1030 { display: none; }
  569. .navBar750 { display: block; }
  570. .removeOnPhone {
  571. display : none !important;
  572. }
  573. .navbar .select .toDisplayBig {
  574. width:350px;
  575. }
  576. .navbar .select .toDisplayBig ul {
  577. column-count: 1;
  578. }
  579. }