style.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. body {
  2. font-family: sans-serif;
  3. background-color: #24273a;
  4. margin: 0;
  5. padding: 20px;
  6. transition: background-image 0.3s ease;
  7. }
  8. body.recording-active {
  9. background-image: url('stripesbg.png');
  10. background-repeat: repeat;
  11. background-size: 100px 100px;
  12. animation: moveStripes 2s linear infinite;
  13. }
  14. .container {
  15. max-width: 600px;
  16. margin: 0 auto;
  17. background-color: #363a4f;
  18. padding: 20px;
  19. border-radius: 8px;
  20. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  21. }
  22. h1 {
  23. text-align: center;
  24. color: #eed49f;
  25. }
  26. .controls {
  27. margin-bottom: 20px;
  28. text-align: center;
  29. color: #cad3f5;
  30. }
  31. .file-input, .tape-input {
  32. padding: 10px;
  33. margin: 10px;
  34. border: 1px solid #eed49f;
  35. border-radius: 4px;
  36. color: #cad3f5;
  37. background-color: #24273a;
  38. }
  39. .tape-input {
  40. height: 1.6em;
  41. }
  42. .playlist {
  43. border: 1px solid #eed49f;
  44. border-radius: 4px;
  45. padding: 15px;
  46. margin-bottom: 20px;
  47. color: #cad3f5;
  48. background-color: #24273a;
  49. }
  50. .track-list {
  51. list-style: none;
  52. padding: 0;
  53. }
  54. .track-list li {
  55. padding: 8px;
  56. border-bottom: 1px solid #494d64;
  57. cursor: move;
  58. user-select: none;
  59. transition: background-color 0.2s ease;
  60. }
  61. .track-list li:last-child {
  62. border-bottom: none;
  63. }
  64. .track-list li:hover {
  65. background-color: #363a4f;
  66. }
  67. .track-list li:active {
  68. background-color: #494d64;
  69. }
  70. .info {
  71. text-align: center;
  72. margin-bottom: 20px;
  73. color: #cad3f5;
  74. }
  75. .record-button {
  76. background-color: #ed8796;
  77. color: #24273a;
  78. padding: 10px 20px;
  79. border: none;
  80. font-weight: bold;
  81. border-radius: 8px; /* Slightly more rounded corners */
  82. cursor: pointer;
  83. display: block;
  84. margin: 30px auto;
  85. box-shadow:
  86. 3px 3px 0 #d16573, /* Darker shade for the bottom-right shadow, creating depth */
  87. -3px -3px 0 #ffa8b9; /* Lighter shade for the top-left highlight, adding a cel-shaded effect */
  88. transform: translateY(-2px); /* Initial slight raise */
  89. transition: all 0.2s ease; /* Smooth transition for hover and click */
  90. position: relative; /* For positioning the click effect */
  91. outline: none; /* Remove default focus outline */
  92. }
  93. .record-button:hover {
  94. background-color: #f5a97f;
  95. transform: translateY(0px); /* Press down on hover */
  96. box-shadow:
  97. 1px 1px 0 #d16573, /* Reduced shadow on hover */
  98. -1px -1px 0 #ffa8b9; /* Reduced highlight on hover */
  99. }
  100. .record-button:active {
  101. transform: translateY(2px); /* Clicked effect - further press down */
  102. box-shadow: none; /* No shadow when clicked */
  103. }
  104. .record-button:active::after { /* Click animation */
  105. content: "";
  106. position: absolute;
  107. top: 50%;
  108. left: 50%;
  109. width: 0;
  110. height: 0;
  111. border-radius: 50%;
  112. background-color: rgba(255, 255, 255, 0.3); /* Faint white circle for click effect */
  113. transform: translate(-50%, -50%);
  114. animation: clickEffect 0.3s ease-out;
  115. }
  116. @keyframes clickEffect {
  117. 0% {
  118. width: 0;
  119. height: 0;
  120. }
  121. 50% {
  122. width: 60%;
  123. height: 60%;
  124. }
  125. 100% {
  126. width: 120%;
  127. height: 120%;
  128. opacity: 0;
  129. }
  130. }
  131. .progress {
  132. height: 20px;
  133. background-color: #181926;
  134. margin-top: 2em;
  135. border-radius: 4px;
  136. overflow: hidden;
  137. }
  138. .progress-bar {
  139. height: 100%;
  140. background: linear-gradient(90deg, #eed49f, #c6a0f6);
  141. width: 0%;
  142. transition: width 0.3s ease-in-out;
  143. }
  144. .volume-indicator {
  145. position: fixed;
  146. bottom: 10px;
  147. right: 10px;
  148. width: 20px;
  149. height: 100px;
  150. background: linear-gradient(0deg, #eed49f, #c6a0f6);
  151. border: 1px solid #999;
  152. }
  153. @keyframes moveStripes {
  154. 0% {
  155. background-position: 0 0;
  156. }
  157. 100% {
  158. background-position: 50px 50px;
  159. }
  160. }
  161. .faq {
  162. color: #cad3f5;
  163. margin-top: 2em;
  164. }
  165. .faq-question {
  166. font-weight: bold;
  167. font-size: 1.2em;
  168. }
  169. .faq-answer {
  170. margin-top: 0;
  171. font-size: 1em;
  172. }