Monero/Aeon Webminer add-on module for After Dark https://habd.as/code/toxic-swamp/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

inline.css.html 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <style>
  2. :root {
  3. --control-focus: drop-shadow(0 0 3px #00b0ff) brightness(1.2) drop-shadow(0 0 15px #ff2e88) brightness(.7) drop-shadow(0 0 135px #00b0ff) brightness(2);
  4. }
  5. @keyframes reveal {
  6. from {
  7. opacity: 0;
  8. }
  9. to {
  10. opacity: 1;
  11. }
  12. }
  13. @keyframes fadeUp {
  14. from {
  15. opacity: 0.6;
  16. }
  17. to {
  18. opacity: 1;
  19. }
  20. }
  21. @keyframes revealSlide {
  22. from {
  23. transform: translateX(1%);
  24. opacity: 0;
  25. }
  26. to {
  27. transform: translateX(0);
  28. opacity: 1;
  29. }
  30. }
  31. @keyframes spin {
  32. from { transform: rotate(0deg); }
  33. to { transform: rotate(360deg); }
  34. }
  35. @keyframes glowing {
  36. 0% {
  37. filter: var(--control-focus);
  38. }
  39. 50% {
  40. filter: drop-shadow(0 0 2px #00b0ff) brightness(1) drop-shadow(0 0 1px #00b0ff) brightness(2);
  41. }
  42. 100% {
  43. filter: drop-shadow(0 0 35px #00b0ff) brightness(1.2) drop-shadow(0 0 8px #ff2e88) brightness(.7) drop-shadow(0 0 135px #00b0ff) brightness(2);
  44. }
  45. }
  46. .js-toolbar {
  47. position: fixed;
  48. bottom: 10px;
  49. right: 10px;
  50. background-color: #ff2e8800;
  51. border-radius: 4px;
  52. transition: all 0.25s ease;
  53. display: flex;
  54. margin-left: 20px;
  55. text-align: right;
  56. }
  57. .js-toolbar.-reveal {
  58. animation: reveal 0.3s both;
  59. animation-delay: 0.15s;
  60. }
  61. .js-toolbar.-disclosed {
  62. background-color: #ff2e8880;
  63. }
  64. .js-toolbar:not(.-disclosed) button:not(.-active) {
  65. animation: spin 0.3s 5s 1 linear;
  66. }
  67. .js-toolbar.-disclosed .help-block:not(.status) {
  68. animation: revealSlide ease-in both reverse;
  69. }
  70. .js-toolbar .help-block.status {
  71. opacity: 0;
  72. margin-left: 1rem;
  73. }
  74. .js-toolbar [name="throttle"] {
  75. opacity: 0.6;
  76. }
  77. @media screen and (max-width: 768px) {
  78. .js-toolbar {
  79. align-items: flex-end;
  80. }
  81. .js-toolbar .help-block.status {
  82. margin-bottom: -5rem;
  83. margin-right: 3rem;
  84. }
  85. }
  86. .js-toolbar .help-block:not(.status) {
  87. position: absolute;
  88. bottom: 8px;
  89. right: 0;
  90. padding: 8px;
  91. /* background-color: black; */
  92. border-radius: 4px;
  93. margin-bottom: -8px;
  94. padding-right: 50px;
  95. width: 250px;
  96. }
  97. .js-toolbar.-disclosed .help-block {
  98. animation: revealSlide 0.3s 0.15s both;
  99. }
  100. .js-toolbar input[name="throttle"]:hover,
  101. .js-toolbar input[name="throttle"]:focus,
  102. .js-toolbar input[name="throttle"]:active {
  103. animation: fadeUp 0.3s both;
  104. }
  105. .js-toolbar .btn-controls {
  106. display: inline-block;
  107. overflow: visible;
  108. }
  109. .js-toolbar .btn-controls button[name="toggle"] {
  110. line-height: 0;
  111. padding: 0.5rem;
  112. border: none;
  113. }
  114. .js-toolbar .btn-controls button[name="toggle"]:focus::after {
  115. content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20width='24'%20height='24'%20fill='currentcolor'%20stroke='fuchsia'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%20%20%20%20%20%3Cpath%20d='M18%2013%20L26%202%208%2013%2014%2019%206%2030%2024%2019%20Z'%20/%3E%20%3C/svg%3E");
  116. }
  117. .js-toolbar .btn-controls button[name="toggle"]::after {
  118. content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20width='24'%20height='24'%20fill='currentcolor'%20stroke='lime'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%20%20%20%20%20%3Cpath%20d='M18%2013%20L26%202%208%2013%2014%2019%206%2030%2024%2019%20Z'%20/%3E%20%3C/svg%3E");
  119. }
  120. .js-toolbar .btn-controls button[name="toggle"].-active::after {
  121. content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20width='24'%20height='24'%20fill='fuchsia'%20stroke='lime'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%20%20%20%20%20%3Cpath%20d='M18%2013%20L26%202%208%2013%2014%2019%206%2030%2024%2019%20Z'%20/%3E%20%3C/svg%3E");
  122. animation: glowing 2s infinite paused;
  123. filter: var(--control-focus);
  124. transform-origin: 50% 50%;
  125. }
  126. .js-toolbar .btn-controls button[name="toggle"].-active.-mining::after {
  127. animation-play-state: running;
  128. }
  129. .js-toolbar .btn-controls button[name="toggle"].-active:focus::after {
  130. content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20width='24'%20height='24'%20fill='fuchsia'%20stroke='lime'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%20%20%20%20%20%3Cpath%20d='M18%2013%20L26%202%208%2013%2014%2019%206%2030%2024%2019%20Z'%20/%3E%20%3C/svg%3E");
  131. filter: drop-shadow(0 0 3px #00b0ff) brightness(1.2) drop-shadow(0 0 15px #ff2e88) brightness(.7) drop-shadow(0 0 135px #ff9800) brightness(2);
  132. }
  133. .js-toolbar input[name="throttle"] {
  134. cursor: pointer;
  135. -webkit-appearance: none;
  136. margin: 0;
  137. height: 2px;
  138. background: transparent;
  139. position: fixed;
  140. right: -38px;
  141. bottom: 125px;
  142. background-image: linear-gradient(90deg, aliceblue, fuchsia 40%, red);
  143. transform: rotate(270deg); /* until orient support */
  144. outline: unset;
  145. border-radius: 5px;
  146. }
  147. input[name="throttle"]::-moz-range-track {
  148. background-image: linear-gradient(90deg, aliceblue, fuchsia 40%, red);
  149. }
  150. input[name="throttle"]:focus {
  151. filter: drop-shadow(0 0 3px #00b0ff) brightness(1.2) drop-shadow(0 0 15px #ff2e88) brightness(.7) drop-shadow(0 0 135px #00b0ff) brightness(2);
  152. }
  153. input[name="throttle"]::-webkit-slider-thumb {
  154. -webkit-appearance: none;
  155. width: 10px;
  156. height: 10px;
  157. background-color: lime;
  158. border-radius: 2px;
  159. }
  160. input[name="throttle"]::-moz-range-thumb {
  161. border: none;
  162. height: 10px;
  163. width: 10px;
  164. background-color: lime;
  165. border-radius: 2px;
  166. }
  167. </style>