fix: better ripple customizability

contributing.md

@@ -1435,16 +1435,18 @@ The usage and example blocks on each are written in TypeScript but can be used i
 >   
 > Creates a circular, expanding ripple effect on the specified element or creates a new one with the effect already applied if none is provided.  
 > Returns either the new element or the initially passed one.  
-> Custom CSS overrides can be applied to change the color, size and transparency.  
+> External CSS overrides can be used to change the color, size, speed values and opacity.  
+> The exact speed values and variable names and locations can be found in [`src/components/ripple.css`](./src/components/ripple.css)
 >   
 > Properties:  
-> - `speed?: string` - The speed of the ripple effect. Can be "fast", "normal" or "slow" (defaults to "normal")
+> - `speed?: string` - The speed of the ripple effect. Can be "faster", "fast", "normal", "slow" or "slower" (defaults to "normal")
 > 
 > <details><summary><b>Example <i>(click to expand)</i></b></summary>
 > 
 > ```ts
 > const myBoringButton = document.querySelector("#my-boring-button");
-> unsafeWindow.BYTM.createRipple(myBoringButton); // it's as easy as this
+> if(myBoringButton)
+>   unsafeWindow.BYTM.createRipple(myBoringButton, { speed: "slowest" }); // it's as easy as this
 > ```
 > </details>
 

src/components/ripple.css

@@ -1,35 +1,33 @@
-/* use `html body` prefix for more specificity */
+/* some variables are not defined on purpose to allow plugin authors to more easily provide overrides */
 
-html body .bytm-ripple {
+/* use `body` prefix for more specificity: */
+body .bytm-ripple {
   position: relative;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: var(--bytm-ripple-width);
-  height: var(--bytm-ripple-height);
-  user-select: none;
+  width: var(--bytm-ripple-width, auto);
+  height: var(--bytm-ripple-height, auto);
 }
 
-html body .bytm-ripple.faster {
+body .bytm-ripple.faster {
   --bytm-ripple-anim-duration: 0.15s;
 }
 
-html body .bytm-ripple.fast {
+body .bytm-ripple.fast {
   --bytm-ripple-anim-duration: 0.35s;
 }
 
-html body .bytm-ripple.slow {
+body .bytm-ripple.slow {
   --bytm-ripple-anim-duration: 0.75s;
 }
 
-html body .bytm-ripple.slower {
+body .bytm-ripple.slower {
   --bytm-ripple-anim-duration: 1s;
 }
 
 .bytm-ripple-area {
-  --bytm-ripple-min-size: 110px;
+  --bytm-ripple-min-size: 100px;
   position: absolute;
-  background: rgba(255, 255, 255, 0.325);
+  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.325));
   transform: translate(-50%, -50%);
   pointer-events: none;
   border-radius: 50%;

src/features/layout.css

@@ -15,6 +15,9 @@
   vertical-align: middle;
   cursor: pointer;
   margin-left: 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
 
   min-width: var(--bytm-generic-btn-width);
   max-width: var(--bytm-generic-btn-width);