Improve pricing section styling

plausible · Nov 28, 2023 · f06f49f · f06f49f
1 parent cd498e9
commit f06f49f
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 127 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -71,7 +71,13 @@ input[type="range"] {
   margin-top: 15px;
   margin-bottom: 15px;
   outline: none;
+  cursor: grab;
 }
+
+input[type="range"]:active {
+  cursor: grabbing;
+}
+
 input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   -webkit-appearance: none;
@@ -81,9 +87,8 @@ input[type="range"]::-webkit-slider-thumb {
   background-repeat: no-repeat;
   border: 0;
   border-radius: 50%;
-  cursor: pointer;
-  height: 36px;
-  width: 36px;
+  height: 26px;
+  width: 26px;
 }
 input[type="range"]::-moz-range-thumb {
   background-color: #5f48ff;
@@ -93,9 +98,8 @@ input[type="range"]::-moz-range-thumb {
   border: 0;
   border: none;
   border-radius: 50%;
-  cursor: pointer;
-  height: 36px;
-  width: 36px;
+  height: 26px;
+  width: 26px;
 }
 input[type="range"]::-ms-thumb {
   background-color: #5f48ff;
@@ -104,14 +108,23 @@ input[type="range"]::-ms-thumb {
   background-repeat: no-repeat;
   border: 0;
   border-radius: 50%;
-  cursor: pointer;
-  height: 36px;
-  width: 36px;
+  height: 26px;
+  width: 26px;
 }
 input[type="range"]::-moz-focus-outer {
   border: 0;
 }
 
+.bubble {
+  background: #5f48ff;
+  color: white;
+  position: absolute;
+  border-radius: 4px;
+  bottom: 35px;
+  padding: 4px 12px;
+  transform: translateX(-50%);
+}
+
 .twitter-icon {
   width: 1.5rem;
   height: 1.5rem;