MaterialNodeView.uss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. MaterialNodeView.graphElement.node.MaterialNode {
  2. margin-top: 0;
  3. margin-bottom: 0;
  4. margin-left: 0;
  5. margin-right: 0;
  6. }
  7. MaterialNodeView.master {
  8. min-width: 200px;
  9. }
  10. MaterialNodeView #collapsible-area {
  11. width: 0;
  12. height: 0;
  13. }
  14. MaterialNodeView #previewFiller.expanded {
  15. width: 200px;
  16. padding-bottom: 200px;
  17. }
  18. MaterialNodeView #previewFiller,
  19. MaterialNodeView #controls {
  20. background-color: rgba(63, 63, 63, 0.8);
  21. }
  22. MaterialNodeView #controls > #items {
  23. padding-top: 4px;
  24. padding-bottom: 4px;
  25. }
  26. MaterialNodeView #title {
  27. padding-top: 8px;
  28. border-bottom-width: 8px;
  29. }
  30. MaterialNodeView > #previewContainer {
  31. position: absolute;
  32. bottom: 4px;
  33. left: 4px;
  34. border-radius: 6px;
  35. padding-top: 6px;
  36. }
  37. MaterialNodeView > #previewContainer > #preview {
  38. width: 200px;
  39. height: 200px;
  40. align-items:center;
  41. }
  42. MaterialNodeView > #previewContainer > #preview > #collapse {
  43. background-color: #000;
  44. border-color: #F0F0F0;
  45. width: 0;
  46. height: 0;
  47. opacity: 0;
  48. border-radius: 1px;
  49. border-top-width: 1px;
  50. border-bottom-width: 1px;
  51. border-left-width: 1px;
  52. border-right-width: 1px;
  53. margin-top: 4px;
  54. align-items:center;
  55. justify-content:center;
  56. }
  57. MaterialNodeView:hover > #previewContainer > #preview > #collapse {
  58. width: 20px;
  59. height: 20px;
  60. opacity: 0.6;
  61. }
  62. MaterialNodeView > #previewContainer > #preview > #collapse > #icon {
  63. background-image : resource("GraphView/Nodes/PreviewCollapse.png");
  64. width: 16px;
  65. height: 16px;
  66. }
  67. MaterialNodeView > #previewContainer > #preview > #collapse:hover {
  68. opacity: 1.0;
  69. }
  70. MaterialNodeView #previewFiller > #expand {
  71. align-self: center;
  72. width: 56px;
  73. height: 16px;
  74. flex-direction: row;
  75. justify-content:center;
  76. }
  77. MaterialNodeView #previewFiller > #expand > #icon {
  78. background-image : resource("GraphView/Nodes/PreviewExpand.png");
  79. width: 16px;
  80. height: 16px;
  81. }
  82. MaterialNodeView #previewFiller.collapsed > #expand:hover {
  83. background-color: #2B2B2B;
  84. }
  85. MaterialNodeView #previewFiller.expanded > #expand {
  86. height: 0;
  87. }
  88. MaterialNodeView > #resize {
  89. background-image : resource("GraphView/Nodes/NodeChevronLeft.png");
  90. position: absolute;
  91. right: 5px;
  92. bottom: 5px;
  93. width: 10px;
  94. height: 10px;
  95. cursor: resize-up-left;
  96. }
  97. MaterialNodeView > #portInputContainer {
  98. position: absolute;
  99. width: 232px;
  100. left: -220px;
  101. top: 42px;
  102. }
  103. MaterialNodeView > #settings-container {
  104. background-color : rgb(63, 63, 63);
  105. }
  106. MaterialNodeView.hovered #selection-border{
  107. background-color:rgba(68,192,255,0.4);
  108. border-color:rgba(68,192,255,1);
  109. border-left-width: 2px;
  110. border-right-width: 2px;
  111. border-top-width: 2px;
  112. border-bottom-width: 2px;
  113. }
  114. #settings-button {
  115. width: 16px;
  116. justify-content: center;
  117. padding-left: 8px;
  118. }
  119. #settings-button > #icon {
  120. width : 12px;
  121. height : 12px;
  122. align-self: center;
  123. visibility: hidden;
  124. background-image : resource("Icons/SettingsIcons");
  125. }
  126. .node:hover #settings-button > #icon {
  127. visibility: visible;
  128. }
  129. #settings-button:hover > #icon {
  130. align-self: center;
  131. background-color: #2B2B2B;
  132. background-image : resource("Icons/SettingsIcons_hover");
  133. }
  134. #settings-button.clicked > #icon{
  135. background-color: #2B2B2B;
  136. background-image : resource("Icons/SettingsIcons_hover");
  137. visibility: visible;
  138. }
  139. .node.collapsed > #node-border > #title > #button-container > #collapse-button > #icon {
  140. background-image: resource("GraphView/Nodes/NodeChevronLeft.png");
  141. }
  142. .node.expanded > #node-border > #title > #button-container > #collapse-button > #icon {
  143. background-image : resource("GraphView/Nodes/NodeChevronDown.png");
  144. }