CharacterSheet.uss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. .character-sheet-container .stat-row {
  2. flex-direction: row;
  3. justify-content: space-between;
  4. align-items: center;
  5. margin-bottom: 5px;
  6. padding: 1px 5px;
  7. min-height: 24px;
  8. border-bottom-width: 2px;
  9. border-bottom-color: rgba(0, 0, 0, 0.52);
  10. }
  11. /* Character Name Field Specific Styling */
  12. #CharacterNameField {
  13. min-width: 250px;
  14. height: 32px;
  15. font-size: 14px;
  16. color: rgb(255, 255, 255);
  17. background-color: rgba(255, 255, 255, 0.1);
  18. border-width: 1px;
  19. border-color: rgba(150, 150, 150, 0.5);
  20. border-radius: 5px;
  21. padding-left: 8px;
  22. padding-right: 8px;
  23. }
  24. #CharacterNameField > .unity-base-field__input {
  25. background-color: rgba(255, 255, 255, 0.05);
  26. color: rgb(255, 255, 255);
  27. border-width: 0;
  28. margin: 0;
  29. padding-left: 8px;
  30. padding-right: 8px;
  31. height: 100%;
  32. line-height: 30px;
  33. }
  34. .stat-row .stat-input {
  35. min-width: 80px;
  36. max-width: 120px;
  37. font-size: 14px;
  38. -unity-text-align: middle-right;
  39. border-width: 1px;
  40. color: rgb(255, 255, 255);
  41. background-color: rgba(255, 255, 255, 0.1);
  42. height: 24px;
  43. margin-top: 0;
  44. margin-bottom: 0;
  45. padding-top: 0;
  46. padding-bottom: 0;
  47. border-bottom-left-radius: 5px;
  48. border-top-left-radius: 5px;
  49. border-bottom-right-radius: 5px;
  50. border-top-right-radius: 5px;
  51. }
  52. .stat-row .stat-input > .unity-base-field__input {
  53. background-color: rgba(255, 255, 255, 0.05);
  54. color: rgb(255, 255, 255);
  55. border-width: 0;
  56. margin: 0;
  57. padding: 0;
  58. padding-right: 4px;
  59. height: 100%;
  60. line-height: 20px;
  61. }
  62. .stat-label {
  63. font-size: 14px;
  64. color: rgb(220, 220, 220);
  65. flex-grow: 1;
  66. line-height: 22px;
  67. margin-top: 0;
  68. margin-bottom: 0;
  69. }
  70. .stat-row .stat-input.editable {
  71. background-color: rgb(255, 255, 255);
  72. border-color: rgb(150, 150, 150);
  73. }
  74. .stat-row .stat-input.editable > .unity-base-field__input {
  75. color: rgb(30, 30, 30);
  76. }
  77. .stat-row .stat-input.readonly {
  78. background-color: rgb(220, 220, 220);
  79. border-color: rgb(180, 180, 180);
  80. color: rgb(80, 80, 80);
  81. }
  82. .stat-row .stat-input.readonly > .unity-base-field__input {
  83. /* color: inherit; */
  84. }
  85. .stat-row .stat-input:focus {
  86. border-color: rgb(66, 139, 202);
  87. outline-color: rgb(66, 139, 202);
  88. outline-width: 1px;
  89. }
  90. .CharacterSheetHeading {
  91. -unity-font-style: bold;
  92. font-size: 16px;
  93. color: rgb(255, 255, 255);
  94. }
  95. .bankField > .unity-label {
  96. max-width: 50px;
  97. max-height: none;
  98. }
  99. .MainHeading {
  100. font-size: 20px;
  101. -unity-text-align: upper-center;
  102. color: rgb(255, 255, 255);
  103. -unity-font-style: bold;
  104. }
  105. /* Attribute Management Section Styling */
  106. #AttributeManagementSection {
  107. background-color: rgba(40, 40, 40, 0.9);
  108. border-color: rgba(150, 150, 150, 0.5);
  109. margin: 8px 0px;
  110. flex-shrink: 0;
  111. min-height: auto;
  112. }
  113. #AttributeManagementTitle {
  114. color: rgb(220, 220, 220);
  115. -unity-text-align: upper-center;
  116. margin-bottom: 5px;
  117. }
  118. #CreationModeLabel {
  119. color: rgb(255, 200, 100);
  120. -unity-font-style: bold;
  121. min-width: 100px;
  122. }
  123. #AvailablePointsLabel {
  124. color: rgb(100, 255, 100);
  125. -unity-font-style: bold;
  126. -unity-text-align: upper-right;
  127. }
  128. #RandomizeAttributesButton {
  129. background-color: rgb(160, 70, 70);
  130. color: rgb(255, 255, 255);
  131. border-width: 1px;
  132. border-color: rgb(200, 90, 90);
  133. border-radius: 3px;
  134. height: 25px;
  135. font-size: 11px;
  136. }
  137. #RandomizeAttributesButton:hover {
  138. background-color: rgb(180, 90, 90);
  139. }
  140. #ResetToPointBuyButton {
  141. background-color: rgb(70, 110, 160);
  142. color: rgb(255, 255, 255);
  143. border-width: 1px;
  144. border-color: rgb(90, 130, 180);
  145. border-radius: 3px;
  146. height: 25px;
  147. font-size: 11px;
  148. }
  149. #ResetToPointBuyButton:hover {
  150. background-color: rgb(90, 130, 180);
  151. }
  152. #PointCostReference {
  153. color: rgba(255, 255, 255, 0.6);
  154. background-color: rgba(0, 0, 0, 0.4);
  155. padding: 3px;
  156. border-radius: 3px;
  157. -unity-text-align: upper-center;
  158. font-size: 9px;
  159. margin-top: 3px;
  160. }
  161. /* Disabled stat fields when randomized */
  162. .unity-integer-field:disabled {
  163. opacity: 0.6;
  164. }
  165. .unity-integer-field:disabled .unity-base-field__input {
  166. background-color: rgba(120, 120, 120, 0.4);
  167. color: rgba(255, 255, 255, 0.6);
  168. }
  169. /* Ensure stats section doesn't overlap */
  170. .stats-section {
  171. flex-shrink: 0;
  172. margin-top: 5px;
  173. }