all repos — clicker-ts @ a5aa159cf9bf808c5aab354e5760dd1f821f8a01

Unnamed repository; edit this file 'description' to name the repository.

src/styles/PrestigePanel.css (view raw)

  1.prestige-panel {
  2  background-color: #2c3e50;
  3  border-radius: 8px;
  4  padding: 15px;
  5  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  6  color: white;
  7  flex: 1;
  8}
  9
 10.prestige-panel h2 {
 11  font-size: 22px;
 12  margin-bottom: 15px;
 13  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
 14  padding-bottom: 10px;
 15}
 16
 17.prestige-info {
 18  margin-bottom: 20px;
 19}
 20
 21.prestige-info p {
 22  margin-bottom: 8px;
 23  font-size: 14px;
 24}
 25
 26.prestige-button {
 27  background: goldenrod;
 28  color: #fff;
 29  border: none;
 30  padding: 12px 20px;
 31  border-radius: 5px;
 32  font-weight: bold;
 33  cursor: pointer;
 34  transition: background-color 0.2s, transform 0.1s;
 35  margin-top: 10px;
 36  width: 100%;
 37}
 38
 39.prestige-button:hover:not(:disabled) {
 40  background: #daa520;
 41  transform: translateY(-2px);
 42}
 43
 44.prestige-button:active:not(:disabled) {
 45  transform: translateY(0);
 46}
 47
 48.prestige-button:disabled {
 49  background-color: #95a5a6;
 50  cursor: not-allowed;
 51  opacity: 0.7;
 52}
 53
 54.prestige-upgrades h3 {
 55  font-size: 18px;
 56  margin-bottom: 10px;
 57  margin-top: 20px;
 58}
 59
 60.prestige-upgrades-list {
 61  display: flex;
 62  flex-direction: column;
 63  gap: 10px;
 64  max-height: 350px;
 65  overflow-y: auto;
 66  padding-right: 5px;
 67}
 68
 69.prestige-upgrade-item {
 70  display: flex;
 71  padding: 12px;
 72  border-radius: 6px;
 73  background-color: rgba(255, 255, 255, 0.1);
 74  transition: background-color 0.2s, transform 0.1s;
 75  border: 1px solid rgba(255, 255, 255, 0.2);
 76  gap: 12px;
 77  cursor: pointer;
 78}
 79
 80.prestige-upgrade-item:hover:not(.cannot-afford):not(.purchased) {
 81  background-color: rgba(255, 255, 255, 0.2);
 82  transform: translateX(2px);
 83}
 84
 85.prestige-upgrade-item.can-afford {
 86  border-left: 4px solid #27ae60;
 87}
 88
 89.prestige-upgrade-item.cannot-afford {
 90  opacity: 0.7;
 91  cursor: not-allowed;
 92  border-left: 4px solid #e74c3c;
 93}
 94
 95.prestige-upgrade-item.purchased {
 96  border-left: 4px solid gold;
 97  background-color: rgba(218, 165, 32, 0.2);
 98}
 99
100.prestige-upgrade-icon {
101  font-size: 24px;
102  display: flex;
103  align-items: center;
104  justify-content: center;
105  min-width: 40px;
106}
107
108.prestige-upgrade-info {
109  flex: 1;
110}
111
112.prestige-upgrade-info h4 {
113  font-size: 16px;
114  margin-bottom: 3px;
115}
116
117.prestige-upgrade-info p {
118  font-size: 14px;
119  color: rgba(255, 255, 255, 0.8);
120  margin-bottom: 5px;
121}
122
123.prestige-upgrade-cost {
124  font-weight: bold;
125  color: gold !important;
126}
127
128.purchased-label {
129  font-weight: bold;
130  color: gold !important;
131}
132
133.game-sections {
134  display: flex;
135  gap: 20px;
136  flex-wrap: wrap;
137}
138
139/* Mobile optimizations */
140@media (max-width: 768px) {
141  .game-sections {
142    flex-direction: column;
143  }
144  
145  .prestige-panel, .upgrade-shop {
146    width: 100%;
147  }
148  
149  .prestige-button {
150    padding: 10px 15px;
151    font-size: 14px;
152  }
153  
154  .prestige-upgrade-item {
155    padding: 10px;
156  }
157  
158  .prestige-upgrade-icon {
159    font-size: 20px;
160    min-width: 30px;
161  }
162}