ivprog-visual-1.0.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
  1. html {
  2. height: 100%;
  3. }
  4. body {
  5. height: 100%;
  6. }
  7. .ui.raised.container.segment.div_to_body {
  8. height: 92%;
  9. padding: 10px;
  10. padding-left: 6px;
  11. padding-right: 6px;
  12. }
  13. .ivprog_visual_panel {
  14. height: 96%;
  15. overflow: auto;
  16. overflow-x: auto;
  17. }
  18. .ivprog_textual_code {
  19. width: 100%;
  20. min-height: 500px;
  21. resize: none;
  22. background-color: white;
  23. }
  24. .main_title h2 {
  25. margin: 0;
  26. }
  27. .main_title span {
  28. font-size: 80%;
  29. font-style: italic;
  30. }
  31. .ivprog_format_info {
  32. cursor: pointer;
  33. margin-left: 10px;
  34. }
  35. .ivprog_visual_panel {
  36. border: 2px solid #A0A0A0;
  37. background-color: red;
  38. }
  39. .ui.container.main_title {
  40. float: left;
  41. width: 200px;
  42. }
  43. .ui.container.content_margin {
  44. margin-top: 10px;
  45. }
  46. .content_margin .content_sub_margin {
  47. display: inline;
  48. margin-left: 34%;
  49. margin-top: 50px;
  50. }
  51. .ui.icon.menu.center.aligned.container {
  52. width: 438px;
  53. margin-top: -10px;
  54. }
  55. .ghost {
  56. opacity: .5;
  57. background: #C8EBFB;
  58. }
  59. /* editor visual: **/
  60. .function_signature_div,
  61. .function_close_div {
  62. font-weight: bold;
  63. color: black;
  64. }
  65. .ui.selection.data_types_dropdown.visible.dropdown>.text:not(.default),
  66. .ui.selection.parameter_data_types_dropdown.visible.dropdown>.text:not(.default) {
  67. font-weight: bold;
  68. }
  69. .ui.selection.data_types_dropdown.dropdown,
  70. .ui.selection.parameter_data_types_dropdown.dropdown {
  71. padding-bottom: 0;
  72. }
  73. .ui.fluid.dropdown.data_types_dropdown {
  74. display: inline;
  75. width: 150px;
  76. border: none;
  77. background: none;
  78. }
  79. .ui.fluid.dropdown.parameter_data_types_dropdown {
  80. display: inline;
  81. border: none;
  82. background: none;
  83. }
  84. .ui.fluid.dropdown.data_types_dropdown.selection .dropdown.icon,
  85. .ui.fluid.dropdown.parameter_data_types_dropdown.selection .dropdown.icon {
  86. font-size: 1em;
  87. }
  88. .function_close_div {
  89. margin-left: 20px;
  90. }
  91. .command_div {
  92. margin-left: 16px;
  93. }
  94. .function_draggable_div {
  95. width: 16px;
  96. float: left;
  97. }
  98. .function_draggable_div img {
  99. margin-bottom: -4px;
  100. margin-left: -2px;
  101. }
  102. .input_name_function{
  103. min-width: 50px;
  104. }
  105. .text_attr_receives {
  106. margin-left: 20px;
  107. margin-right: 20px;
  108. }
  109. .menu_operations {
  110. margin-left: 10px;
  111. margin-right: 10px;
  112. }
  113. .case_commands_block {
  114. /*border: 1px solid red;*/
  115. }
  116. .context_menu {
  117. display: inline;
  118. float: right;
  119. margin-right: 25px;
  120. margin-top: -4px;
  121. }
  122. .case_div {
  123. border: 1px solid gray;
  124. margin-left: 30px;
  125. padding-left: 5px;
  126. margin-top: 5px;
  127. }
  128. .function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
  129. .expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
  130. .expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression,
  131. .incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var, .parameter_div_edit,
  132. .all_elements_write, .container_var_element_control {
  133. display: inline;
  134. }
  135. .conditional_comands_block {
  136. min-height: 10px;
  137. }
  138. .div_comment_text {
  139. min-width: 100px;
  140. font-style: italic;
  141. }
  142. .enable_edit_name_function, .add_parameter, .remove_parameter, .add_parameter_button, .remove_variable {
  143. cursor: pointer;
  144. }
  145. [contenteditable="true"]:active,
  146. [contenteditable="true"]:focus,
  147. [contenteditable="true"]:hover {
  148. border: 1px dashed #000;
  149. background: white;
  150. }
  151. .ui.segment.ivprog_visual_panel {
  152. padding: 3px;
  153. margin-top: -5px;
  154. background: #edf4ff;
  155. }
  156. .ui.segment.function_div {
  157. padding: 5px;
  158. margin: 0;
  159. margin-bottom: 5px;
  160. }
  161. .ui.button.add_function_button,
  162. .ui.button.add_variable_button,
  163. .ui.button.add_command_button {
  164. padding: 8px;
  165. margin: 0;
  166. }
  167. .glyphicon-move {
  168. cursor: move;
  169. cursor: -webkit-grabbing;
  170. }
  171. .glyphicon.glyphicon-move {
  172. float: left;
  173. }
  174. .remove_function_button, .minimize_function_button, .add_var_top_button, .add_command_top_button {
  175. float: right;
  176. }
  177. .ui.icon.button.remove_function_button,
  178. .ui.icon.button.minimize_function_button {
  179. background: none;
  180. padding: 0;
  181. margin-top: 12px;
  182. }
  183. .ui.segment.variables_list_div,
  184. .ui.segment.commands_list_div {
  185. padding: 5px;
  186. margin: 0;
  187. margin-left: 30px;
  188. width: calc(100% - 30px);
  189. background-color: #f9f9f9;
  190. min-height: 30px;
  191. }
  192. .ui.segment.variables_list_div {
  193. margin-top: 5px;
  194. }
  195. .ui.labeled.icon.button.add_variable_button,
  196. .ui.labeled.icon.button.add_command_button {
  197. }
  198. .program_signature {
  199. font-weight: bold;
  200. margin: -3px 0 10px -5px;
  201. }
  202. .program_final {
  203. font-weight: bold;
  204. margin: 5px 0 0 -5px;
  205. }
  206. .parameters_list {
  207. display: inline;
  208. }
  209. .parameter_type {
  210. margin-left: 10px;
  211. margin-right: 15px;
  212. }
  213. .function_return .dropdown .icon, .parameter_type .dropdown .icon {
  214. margin-left: 6px;
  215. }
  216. .tabela_var {
  217. display: inline;
  218. }
  219. .buttons_manage_columns i, .tr_manage_lines i {
  220. cursor: pointer;
  221. display: inline;
  222. }
  223. div.buttons_manage_columns {
  224. display: inline;
  225. }
  226. .tr_manage_lines {
  227. text-align: center;
  228. }
  229. .div_valor_var {
  230. display: inline;
  231. }
  232. .ui.comment span {
  233. font-style: italic;
  234. }
  235. .ui.comment, .ui.reader, .ui.writer, .ui.attribution, .ui.iftrue, .ui.repeatNtimes, .ui.whiletrue, .ui.dowhiletrue, .ui.switch, .ui.functioncall,
  236. .ui.return {
  237. border: 1px solid gray;
  238. padding: 5px;
  239. border-radius: 5px;
  240. margin: 5px;
  241. background: #f9f9f9;
  242. }
  243. .ui.repeatNtimes .separator_character {
  244. margin-right: 10px;
  245. }
  246. .ui.repeatNtimes, .ui.whiletrue {
  247. min-height: 50px;
  248. }
  249. .ui.dowhiletrue .ui.block_commands {
  250. min-height: 10px;
  251. }
  252. .add_var_top_button {
  253. padding-right: 50px;
  254. }
  255. .function_signature_div {
  256. min-height: 40px;
  257. padding-top: 8px;
  258. }
  259. .move_function {
  260. margin-top: 9px;
  261. }
  262. .div_start_minimize_v {
  263. float: right;
  264. width: 22px;
  265. height: 10px;
  266. }
  267. .global_var {
  268. margin-bottom: 7px;
  269. }
  270. .list_globals, .global_const {
  271. display: inline;
  272. }
  273. .created_element {
  274. position: absolute;
  275. width: 50%;
  276. z-index: 99999999;
  277. opacity: .8;
  278. cursor: move;
  279. }
  280. .width-dynamic {
  281. min-width: 100px;
  282. }
  283. .ui.icon.plus.square.outline.icon_add_item_to_writer {
  284. margin-right: 10px;
  285. margin-left: 10px;
  286. cursor: pointer;
  287. }
  288. .button_remove_command, .button_refresh_attribution {
  289. float: right;
  290. cursor: pointer;
  291. }
  292. .expression_drag {
  293. cursor: col-resize;
  294. border: 2px gray solid;
  295. display: inline;
  296. width: 5px;
  297. }
  298. .ui.icon.red.exclamation.triangle.error_icon {
  299. float: left;
  300. margin-left: -30px;
  301. }
  302. .height_100 {
  303. height: 100%;
  304. }
  305. .default_visual_title {
  306. display: none;
  307. }
  308. .expandingArea textarea {
  309. min-height: 30px;
  310. resize: none;
  311. padding: 5px;
  312. }
  313. .ui table .btn_actions {
  314. text-align: center;
  315. }
  316. .button_remove_case {
  317. cursor: pointer;
  318. padding: 3px;
  319. }
  320. .ui.button_add_case {
  321. margin-top: 10px;
  322. }
  323. .accordion {
  324. margin: auto;
  325. }
  326. /*
  327. .global_container:hover,
  328. .variable_container:hover {
  329. border: 2px solid gray;
  330. padding-left: 8px;
  331. padding-right: 8px;
  332. padding-top: 5px;
  333. padding-bottom: 4px;
  334. }*/
  335. .ui.label.function_name_parameter:hover {
  336. border: 2px solid gray;
  337. padding: 5px 6px 5px 6px;
  338. }
  339. .ui.label.function_name_parameter {
  340. padding: 7px 8px 7px 8px;
  341. }
  342. /*.global_container:hover, .variable_container:hover {
  343. margin-bottom: 4px !important;
  344. }*/
  345. .global_container .global_type, .editing_name_var, .global_container .span_value_variable,
  346. .variable_container .variable_type, .variable_container .span_value_variable,
  347. .ui.dropdown.function_return, div.function_name_div_updated,
  348. .ui.dropdown.parameter_type, .parameter_div_edit {
  349. background: #cecece;
  350. border-radius: 5px;
  351. padding: 4px;
  352. margin-left: 5px;
  353. margin-right: 5px;
  354. }
  355. .parameter_div_edit {
  356. padding-bottom: 2px;
  357. padding-top: 2px;
  358. }
  359. .ui.dropdown.parameter_type {
  360. }
  361. div.function_name_div_updated {
  362. padding-top: 5px;
  363. padding-bottom: 5px;
  364. margin-right: 10px;
  365. }
  366. .function_name_div_updated .name_function_updated {
  367. padding-left: 10px;
  368. padding-right: 10px;
  369. }
  370. .variable_container .variable_type {
  371. padding: 5px;
  372. margin-left: 0;
  373. margin-right: 3px;
  374. }
  375. .global_container .global_type:hover, .editing_name_var:hover, .global_container .span_value_variable:hover,
  376. .variable_container .variable_type:hover, .variable_container .span_name_variable:hover, .variable_container .span_value_variable:hover,
  377. .ui.dropdown.function_return:hover, div.function_name_div_updated:hover,
  378. .ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
  379. background: #848484;
  380. color: #fff;
  381. z-index: 999999;
  382. }
  383. .editing_name_var {
  384. min-width: 40px;
  385. padding-top: 3px;
  386. padding-bottom: 3px;
  387. }
  388. .global_container .global_type:active,
  389. .variable_container .variable_type:active,
  390. .ui.dropdown.function_return:active,
  391. div.function_name_div_updated:active,
  392. .ui.dropdown.parameter_type:active {
  393. background: #636363;
  394. color: #fff;
  395. }
  396. .global_container i {
  397. cursor: pointer;
  398. }
  399. .global_container .ui.icon.plus.square.outline, .global_container .ui.icon.minus.square.outline {
  400. font-size: 120%;
  401. }
  402. .character_equals {
  403. vertical-align: sub;
  404. font-size: 150%;
  405. }
  406. .red.icon.times.remove_global,
  407. .red.icon.times.remove_variable,
  408. .red.icon.times.remove_parameter {
  409. float: right;
  410. margin-right: -1px;
  411. margin-left: 8px;
  412. opacity: 0;
  413. }
  414. .global_container:hover > .red.icon.times.remove_global, .variable_container:hover > .red.icon.times.remove_variable,
  415. .function_name_parameter:hover > .red.icon.times.remove_parameter {
  416. opacity: 1;
  417. }
  418. .tr_manage_lines {
  419. padding-top: 10px;
  420. }
  421. .ui.icon.button.add-globalVar-button.add_global_button {
  422. padding: 8px;
  423. margin-bottom: 4px;
  424. }
  425. .all_functions {
  426. margin-top: -5px;
  427. }
  428. .only_in_frame {
  429. position: absolute;
  430. z-index: 9999;
  431. width: 90px;
  432. top: 5px;
  433. left: 5px;
  434. opacity: .6;
  435. }
  436. .only_in_frame:hover {
  437. opacity: 1;
  438. }
  439. .only_in_frame:hover span {
  440. display: block;
  441. }
  442. .only_in_frame span {
  443. display: none;
  444. margin-top: -5px;
  445. }
  446. .ui.container.main_title {
  447. width: 85px;
  448. }
  449. .ui.label.global_container {
  450. margin-bottom: 3px;
  451. }
  452. .ui.label.variable_container {
  453. margin-bottom: 3px;
  454. }
  455. .created_div_valor_var {
  456. display: inline-block;
  457. }
  458. .ui.dropdown.function_return {
  459. padding-left: 15px;
  460. padding-right: 15px;
  461. margin-left: 10px;
  462. margin-right: 10px;
  463. }
  464. .parethesis_function {
  465. font-size: 120%;
  466. }
  467. .var_value_menu_div,
  468. .attribution .var_attributed,
  469. .component_element,
  470. .conditional_expression .expression_element,
  471. .menu_start_rendered,
  472. .attribution_expression .variable_attribution,
  473. .render_style_param,
  474. .attribution_expression .div_expression_st:not(:empty),
  475. .incrementation_field .incrementation_variable,
  476. .incrementation_field .first_operand:not(:empty),
  477. .incrementation_field .operator:not(:empty),
  478. .incrementation_field .second_operand:not(:empty) {
  479. background: #e8e8e8;
  480. border-radius: 5px;
  481. min-width: 40px;
  482. padding: 2px;
  483. padding-left: 5px;
  484. padding-right: 5px;
  485. border: 1px solid gray;
  486. box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
  487. color: black;
  488. }
  489. .menu_start_rendered {
  490. padding-left: 12px;
  491. }
  492. .menu_start_rendered i {
  493. width: 1.5em;
  494. margin-right: -1em;
  495. }
  496. .row_container:hover, .column_container:hover {
  497. background: #cecece;
  498. }
  499. .column_container, .row_container {
  500. border-radius: 4px;
  501. border: 1px solid gray;
  502. padding: 1px 2px 1px 2px;
  503. background: #e8e8e8;
  504. box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
  505. }
  506. .var_value_menu_div div i {
  507. color: black;
  508. }
  509. .span_command_spec {
  510. color: black;
  511. font-weight: bold;
  512. font-size: 110%;
  513. }
  514. .ui.comment.command_container .var_value_menu_div {
  515. display: inline-block;
  516. width: 93%;
  517. }
  518. .ui.comment.command_container .var_value_menu_div .variable_rendered,
  519. .ui.comment.command_container .var_value_menu_div .value_rendered {
  520. width: 100%;
  521. cursor: text;
  522. font-style: italic;
  523. }
  524. .ui.comment.command_container .var_value_menu_div {
  525. cursor: text;
  526. }
  527. .ui.comment.command_container .var_value_menu_div {
  528. background: none;
  529. border-radius: 0;
  530. border: 0px solid gray;
  531. box-shadow: none;
  532. padding: 0px;
  533. font-size: 110%;
  534. }
  535. .ui.comment.command_container .var_name,
  536. .ui.comment.command_container .value_rendered {
  537. color: rgba(0,0,0,.6);
  538. }
  539. .ui.comment.command_container .var_value_menu_div input {
  540. width: 100%;
  541. display: inline-block;
  542. font-style: italic;
  543. }
  544. .ui.dropdown.menu_start_rendered .text i {
  545. padding-right: 8px;
  546. }
  547. /* DOUGLAS */
  548. /*
  549. .div-over {
  550. border-style: dotted;
  551. }*/
  552. .div-over {
  553. outline: dashed 2px blue;
  554. }
  555. button.ui.segment, .global_container.ui {
  556. margin-bottom: 0.5em;
  557. margin-top: 0.5em;
  558. }
  559. .global_container.ui {
  560. padding-bottom: 0.5em;
  561. padding-top: 0.5em;
  562. }