PostBattleLootScreen_Clean.uss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. /* Clean Post Battle Loot Screen Styles - Unity UI Toolkit Compatible */
  2. /* Main Overlay */
  3. .loot-overlay {
  4. position: absolute;
  5. top: 0;
  6. left: 0;
  7. right: 0;
  8. bottom: 0;
  9. background-color: rgba(0, 0, 0, 0.8);
  10. justify-content: center;
  11. align-items: center;
  12. }
  13. .loot-background {
  14. background-color: rgba(20, 20, 30, 0.95);
  15. border-width: 2px;
  16. border-color: rgb(180, 140, 60);
  17. border-radius: 15px;
  18. padding: 30px;
  19. width: 80%;
  20. max-width: 800px;
  21. max-height: 90%;
  22. flex-direction: column;
  23. justify-content: flex-start;
  24. }
  25. /* Header Section */
  26. .header-section {
  27. align-items: center;
  28. margin-bottom: 20px;
  29. }
  30. .victory-title {
  31. font-size: 32px;
  32. color: rgb(255, 215, 0);
  33. margin-bottom: 5px;
  34. -unity-text-align: center;
  35. -unity-font-style: bold;
  36. }
  37. .victory-subtitle {
  38. font-size: 18px;
  39. color: rgb(200, 200, 200);
  40. -unity-text-align: center;
  41. -unity-font-style: italic;
  42. }
  43. /* Main Content */
  44. .main-content {
  45. flex-grow: 1;
  46. flex-direction: column;
  47. }
  48. .enemy-loot-section {
  49. background-color: rgba(40, 40, 50, 0.7);
  50. border-radius: 10px;
  51. padding: 15px;
  52. margin-bottom: 15px;
  53. }
  54. .total-rewards-section {
  55. background-color: rgba(60, 40, 20, 0.7);
  56. border-radius: 10px;
  57. padding: 15px;
  58. margin-bottom: 15px;
  59. }
  60. .section-title {
  61. font-size: 20px;
  62. color: rgb(255, 215, 0);
  63. margin-bottom: 10px;
  64. -unity-text-align: center;
  65. -unity-font-style: bold;
  66. }
  67. .enemy-loot-list {
  68. max-height: 150px;
  69. background-color: rgba(0, 0, 0, 0.3);
  70. border-radius: 5px;
  71. padding: 10px;
  72. }
  73. .enemy-loot-item {
  74. margin-bottom: 10px;
  75. padding: 8px;
  76. background-color: rgba(255, 255, 255, 0.1);
  77. border-radius: 5px;
  78. }
  79. .enemy-name {
  80. font-size: 16px;
  81. color: rgb(255, 100, 100);
  82. margin-bottom: 5px;
  83. -unity-font-style: bold;
  84. }
  85. .enemy-rewards {
  86. flex-direction: row;
  87. margin-bottom: 5px;
  88. }
  89. .enemy-items {
  90. flex-direction: column;
  91. }
  92. /* Currency Display */
  93. .currency-display {
  94. flex-direction: row;
  95. justify-content: space-around;
  96. align-items: center;
  97. background-color: rgba(0, 0, 0, 0.3);
  98. border-radius: 10px;
  99. padding: 15px;
  100. margin-bottom: 15px;
  101. }
  102. .currency-item {
  103. align-items: center;
  104. flex-direction: column;
  105. }
  106. .currency-icon {
  107. font-size: 24px;
  108. margin-bottom: 5px;
  109. }
  110. .currency-amount {
  111. font-size: 20px;
  112. color: rgb(255, 215, 0);
  113. margin-bottom: 3px;
  114. -unity-font-style: bold;
  115. }
  116. .currency-label {
  117. font-size: 12px;
  118. color: rgb(200, 200, 200);
  119. }
  120. /* Items Display */
  121. .items-display {
  122. margin-top: 10px;
  123. }
  124. .items-title {
  125. font-size: 16px;
  126. color: rgb(180, 180, 180);
  127. margin-bottom: 10px;
  128. -unity-text-align: center;
  129. }
  130. .items-list {
  131. max-height: 100px;
  132. background-color: rgba(0, 0, 0, 0.3);
  133. border-radius: 5px;
  134. padding: 10px;
  135. }
  136. .item-entry {
  137. color: rgb(150, 200, 150);
  138. margin-bottom: 3px;
  139. }
  140. /* Footer Section */
  141. .footer-section {
  142. align-items: center;
  143. margin-top: 20px;
  144. }
  145. .continue-prompt {
  146. font-size: 16px;
  147. color: rgb(200, 200, 200);
  148. margin-bottom: 15px;
  149. -unity-text-align: center;
  150. }
  151. .button-container {
  152. flex-direction: row;
  153. justify-content: center;
  154. align-items: center;
  155. }
  156. .action-button {
  157. min-width: 120px;
  158. height: 40px;
  159. margin: 0 10px;
  160. border-radius: 20px;
  161. font-size: 16px;
  162. -unity-font-style: bold;
  163. cursor: pointer;
  164. }
  165. .primary-button {
  166. background-color: rgb(100, 150, 100);
  167. border-color: rgb(120, 180, 120);
  168. color: rgb(255, 255, 255);
  169. }
  170. .primary-button:hover {
  171. background-color: rgb(120, 180, 120);
  172. border-color: rgb(140, 200, 140);
  173. }
  174. .secondary-button {
  175. background-color: rgb(80, 80, 120);
  176. border-color: rgb(100, 100, 140);
  177. color: rgb(255, 255, 255);
  178. }
  179. .secondary-button:hover {
  180. background-color: rgb(100, 100, 140);
  181. border-color: rgb(120, 120, 160);
  182. }