index.css 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. @font-face {
  2. font-family: 'Material Icons';
  3. font-style: normal;
  4. font-weight: 400;
  5. src: url(/lib/mdc/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  6. src: local('Material Icons'),
  7. local('MaterialIcons-Regular'),
  8. url(/lib/mdc/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
  9. url(/lib/mdc/iconfont/MaterialIcons-Regular.woff) format('woff'),
  10. url(/lib/mdc/iconfont/MaterialIcons-Regular.ttf) format('truetype');
  11. }
  12. .material-icons {
  13. font-family: 'Material Icons';
  14. font-weight: normal;
  15. font-style: normal;
  16. font-size: 24px; /* Preferred icon size */
  17. display: inline-block;
  18. line-height: 1;
  19. text-transform: none;
  20. letter-spacing: normal;
  21. word-wrap: normal;
  22. white-space: nowrap;
  23. direction: ltr;
  24. /* Support for all WebKit browsers. */
  25. -webkit-font-smoothing: antialiased;
  26. /* Support for Safari and Chrome. */
  27. text-rendering: optimizeLegibility;
  28. /* Support for Firefox. */
  29. -moz-osx-font-smoothing: grayscale;
  30. /* Support for IE. */
  31. font-feature-settings: 'liga';
  32. }
  33. /*
  34. .mdc-persistent-drawer--open {
  35. width: 300px;
  36. }
  37. .mdc-persistent-drawer__drawer {
  38. width: 300px;
  39. }
  40. */
  41. .mdc-theme--accent {
  42. color: #2E7D32;
  43. }
  44. :root {
  45. --mdc-theme-primary: #3f51b5;
  46. --mdc-theme-secondary: #c62828;
  47. }
  48. body {
  49. background-color: rgb(255, 255, 255);
  50. /* Prevent selection of HTML divs */
  51. user-select: none;
  52. -moz-user-select: -moz-none;
  53. -khtml-user-select: none;
  54. -webkit-user-select: none;
  55. margin: 0px;
  56. }
  57. /*
  58. h1, h2, h3, h4, h5, h6 {
  59. font-family: Verdana, Arial, Helvetica, sans-serif;
  60. }
  61. table {
  62. font-family: Verdana, Arial, Helvetica, sans-serif;
  63. }
  64. form {
  65. margin: 2em;
  66. }
  67. label {
  68. font-size: 18px;
  69. }
  70. */
  71. /*
  72. input {
  73. font-size: inherit;
  74. padding: 5px;
  75. }
  76. */
  77. .vwf-properties {
  78. background-color: #DCC;
  79. }
  80. .vwf-methods {
  81. background-color: #CDC;
  82. }
  83. .vwf-events {
  84. background-color: #CCD;
  85. }
  86. .vwf-root {
  87. background-color: #CCC;
  88. }
  89. .vwf-root .vwf-node:nth-child(odd) {
  90. background-color: #BCC;
  91. }
  92. .vwf-root .vwf-node:nth-child(even) {
  93. background-color: #CBC;
  94. }
  95. .vwf-orphanage {
  96. background-color: #CCC;
  97. }
  98. .vwf-orphanage .vwf-node:nth-child(odd) {
  99. background-color: #BCC;
  100. }
  101. .vwf-orphanage .vwf-node:nth-child(even) {
  102. background-color: #CBC;
  103. }
  104. .vwf-children {
  105. background-color: #CCC;
  106. }
  107. .vwf-children .vwf-node:nth-child(odd) {
  108. background-color: #BCC;
  109. }
  110. .vwf-children .vwf-node:nth-child(even) {
  111. background-color: #CBC;
  112. }
  113. .vwf-children .vwf-children {
  114. background-color: #AAA;
  115. }
  116. .vwf-children .vwf-children .vwf-node:nth-child(odd) {
  117. background-color: #9AA;
  118. }
  119. .vwf-children .vwf-children .vwf-node:nth-child(even) {
  120. background-color: #A9A;
  121. }
  122. .vwf-children .vwf-children .vwf-children {
  123. background-color: #888;
  124. }
  125. .vwf-children .vwf-children .vwf-children .vwf-node:nth-child(odd) {
  126. background-color: #788;
  127. }
  128. .vwf-children .vwf-children .vwf-children .vwf-node:nth-child(even) {
  129. background-color: #878;
  130. }
  131. .vwf-children .vwf-children .vwf-children .vwf-children {
  132. background-color: #666;
  133. }
  134. .vwf-children .vwf-children .vwf-children .vwf-children .vwf-node:nth-child(odd) {
  135. background-color: #566;
  136. }
  137. .vwf-children .vwf-children .vwf-children .vwf-children .vwf-node:nth-child(even) {
  138. background-color: #656;
  139. }
  140. .vwf-scripts {
  141. background-color: #CDD;
  142. }
  143. /*
  144. .vwf-properties, .vwf-methods, .vwf-events, .vwf-children, .vwf-scripts {
  145. padding: 0;
  146. }
  147. */
  148. /*
  149. .vwf-properties > .vwf-label, .vwf-methods > .vwf-label, .vwf-events > .vwf-label, .vwf-children > .vwf-label, .vwf-scripts> .vwf-label {
  150. margin: 0;
  151. padding: 8px 5px 5px 5px;
  152. font-size: 12px;
  153. font-weight: bold;
  154. }
  155. */
  156. .vwf-properties > .vwf-label {
  157. background-color: #CBB;
  158. }
  159. .vwf-methods > .vwf-label {
  160. background-color: #BCB;
  161. }
  162. .vwf-events > .vwf-label {
  163. background-color: #BBC;
  164. }
  165. .vwf-children > .vwf-label {
  166. background-color: #BBB;
  167. }
  168. .vwf-scripts > .vwf-label {
  169. background-color: #BCC;
  170. }
  171. .vwf-node > .vwf-label {
  172. padding-left: 3px;
  173. padding-bottom: 5px;
  174. }
  175. .vwf-label {
  176. margin: 0;
  177. padding: 2px 5px 2px 5px;
  178. font-size: 18px;
  179. font-family: Verdana, Arial, Helvetica, sans-serif;
  180. }
  181. .vwf-attribute {
  182. font-size: 14px;
  183. }
  184. #vwf-root {
  185. position:absolute;
  186. z-index:-1;
  187. }
  188. #vwf-root > .vwf-label > .vwf-attribute {
  189. font-size: 18px;
  190. }
  191. .vwf-node {
  192. padding: 10px;
  193. }
  194. #vwf-root>div, #vwf-root>canvas {
  195. margin-left: auto;
  196. margin-right: auto;
  197. display: block;
  198. }
  199. .vwf-control-slider, .vwf-control-roll-slider, .vwf-control-pitch-slider, .vwf-control-yaw-slider, .vwf-control-x-slider, .vwf-control-y-slider, .vwf-control-z-slider, .vwf-control-r-slider, .vwf-control-g-slider, .vwf-control-b-slider {
  200. display: inline-block;
  201. width: 15em;
  202. margin-left: 1ex;
  203. }
  204. .vwf-activeCamera-dropdown {
  205. display: inline-block;
  206. width: 15em;
  207. margin-left: 1ex;
  208. }
  209. .vwf-roll-value, .vwf-pitch-value, .vwf-yaw-value, .vwf-r-value, .vwf-g-value, .vwf-b-value, .vwf-a-value {
  210. display: inline-block;
  211. width: 2em;
  212. }
  213. .vwf-x-value, .vwf-y-value, .vwf-z-value {
  214. display: inline-block;
  215. width: 4em;
  216. }
  217. .vwf-err {
  218. border: 2px solid red;
  219. font: 14px Arial;
  220. background: #FFFFDD;
  221. color: #880000;
  222. padding: 8px;
  223. width: 300px;
  224. }
  225. .overlay {
  226. position:absolute;
  227. top:30%;
  228. width:99%;
  229. pointer-events:none;
  230. }
  231. /*
  232. .overlay p {
  233. padding:0px;
  234. margin:0px;
  235. }
  236. */
  237. .overlay a:link {
  238. color:#888888;
  239. }
  240. .overlay a:visited {
  241. color:#888888;
  242. }
  243. .overlay a:hover {
  244. color:#CCCCCC;
  245. }
  246. .loading {
  247. margin:auto auto;
  248. color:#FFF;
  249. width:600px;
  250. height:400px;
  251. background:#050505;
  252. -moz-border-radius: 20px;
  253. -webkit-border-radius: 20px;
  254. -khtml-border-radius: 20px;
  255. border-radius: 20px;
  256. font:18px Arial;
  257. /*visibility: hidden;*/
  258. }
  259. /*
  260. .loadText {
  261. }
  262. */
  263. .requirements {
  264. margin-left: 100px;
  265. }
  266. .req {
  267. font-size:14px;
  268. position:relative;
  269. left:20px;
  270. }
  271. /*
  272. h1, h2, h3, h4, h5, h6, body, legend, label {
  273. text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
  274. }
  275. */
  276. .pace {
  277. -webkit-pointer-events: none;
  278. pointer-events: none;
  279. -webkit-user-select: none;
  280. -moz-user-select: none;
  281. user-select: none;
  282. }
  283. .pace .pace-activity {
  284. display: block;
  285. position: fixed;
  286. z-index: 2000;
  287. top: 0;
  288. right: 0;
  289. width: 300px;
  290. height: 300px;
  291. background: #6c96f7;
  292. -webkit-transition: -webkit-transform 0.3s;
  293. transition: transform 0.3s;
  294. -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
  295. transform: translateX(100%) translateY(-100%) rotate(45deg);
  296. pointer-events: none;
  297. }
  298. .pace.pace-active .pace-activity {
  299. -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  300. transform: translateX(50%) translateY(-50%) rotate(45deg);
  301. }
  302. .pace .pace-activity::before,
  303. .pace .pace-activity::after {
  304. position: absolute;
  305. bottom: 30px;
  306. left: 50%;
  307. display: block;
  308. border: 5px solid #fff;
  309. border-radius: 50%;
  310. content: '';
  311. }
  312. .pace .pace-activity::before {
  313. margin-left: -40px;
  314. width: 80px;
  315. height: 80px;
  316. border-right-color: rgba(0, 0, 0, .2);
  317. border-left-color: rgba(0, 0, 0, .2);
  318. -webkit-animation: pace-rotation 3s linear infinite;
  319. animation: pace-rotation 3s linear infinite;
  320. }
  321. .pace .pace-activity::after {
  322. bottom: 50px;
  323. margin-left: -20px;
  324. width: 40px;
  325. height: 40px;
  326. border-top-color: rgba(0, 0, 0, .2);
  327. border-bottom-color: rgba(0, 0, 0, .2);
  328. -webkit-animation: pace-rotation 1s linear infinite;
  329. animation: pace-rotation 1s linear infinite;
  330. }
  331. @-webkit-keyframes pace-rotation {
  332. 0% { -webkit-transform: rotate(0deg); }
  333. 100% { -webkit-transform: rotate(359deg); }
  334. }
  335. @keyframes pace-rotation {
  336. 0% { transform: rotate(0deg); }
  337. 100% { transform: rotate(359deg); }
  338. }
  339. #incompatibleBrowser {
  340. visibility: hidden;
  341. position: absolute;
  342. left: 0px;
  343. top: 0px;
  344. width:100%;
  345. height:100%;
  346. text-align:center;
  347. z-index: 1000;
  348. }
  349. .guiwindow {
  350. position: absolute;
  351. border: 0;
  352. right: 40px;
  353. bottom: 20px;
  354. cursor: pointer;
  355. min-width: 50px;
  356. min-height: 30px;
  357. padding-right: 5%;
  358. padding-top: 4%;
  359. position: absolute;
  360. transition: background-color .05s ease;
  361. -webkit-transition: background-color .05s ease;
  362. z-index: 9999;
  363. }
  364. .loader {
  365. z-index: 10;
  366. position: absolute;
  367. top: 0px;
  368. }
  369. .visible {
  370. visibility: visible;
  371. }
  372. .not-visible {
  373. visibility: hidden;
  374. }
  375. #hello {
  376. color: rgb(95, 95, 95)
  377. }
  378. .dragdropArea {
  379. width: 400px;
  380. height: 200px;
  381. border-width: medium;
  382. border: rgb(3, 81, 137);
  383. border-style: dotted;
  384. }
  385. .drag {
  386. border: 5px solid rgba(195, 0, 0, 0.751);
  387. }