tooltip css tweaks

pryley · Apr 30, 2024 · bd1d61f · bd1d61f
1 parent bdf0279
commit bd1d61f
Showing 1 changed file with 10 additions and 13 deletions.
diff --git a/src/index.css b/src/index.css
@@ -12,13 +12,14 @@
     --gl-star-empty: url('../img/star-empty.svg');
     --gl-star-full: url('../img/star-full.svg');
     --gl-star-size: 24px;
+    --gl-tooltip-background: rgba(17,17,17, .9);
     --gl-tooltip-border-radius: 4px;
+    --gl-tooltip-color: #fff;
     --gl-tooltip-font-size: 0.875rem;
     --gl-tooltip-font-weight: 400;
     --gl-tooltip-line-height: 1;
     --gl-tooltip-margin: 12px;
     --gl-tooltip-padding: .5em 1em;
-    --gl-tooltip-size: 6px;
 }
 
 [data-star-rating] > select {
@@ -90,26 +91,23 @@
     pointer-events: none;
     position: absolute;
     top: 50%;
-    opacity: .9;
     transform-origin: top;
     transform: translate3d(0,-50%,0);
     white-space: nowrap;
     z-index: 10;
 }
 [data-star-rating] .gl-star-rating--stars[aria-label]::before {
-    background-size: 100% auto !important;
-    background-position: 50% !important;
-    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 31"%3E%3Cpath fill="%23111" d="M12.002 31C12.002 25 0 19.838 0 15.5 0 11.24 12 6 12 0l.002 31z"/%3E%3C/svg%3E') no-repeat;
+    background: var(--gl-tooltip-background);
+    clip-path: path('M6 14.998c0-3-6-5.499-6-7.499S5.999 3 5.999 0L6 14.998z');
     content: '';
-    height: 18px;
-    margin-bottom: 0;
-    margin-left: var(--gl-tooltip-size);
-    width: var(--gl-tooltip-size);
+    height: 15px;
+    margin: 0 0 0 6px;
+    width: 6px;
 }
 [data-star-rating] .gl-star-rating--stars[aria-label]::after {
-    background: #111;
+    background: var(--gl-tooltip-background);
     border-radius: var(--gl-tooltip-border-radius);
-    color: #fff;
+    color: var(--gl-tooltip-color);
     content: attr(aria-label);
     font-size: var(--gl-tooltip-font-size);
     font-weight: normal;
@@ -124,8 +122,7 @@
 }
 [data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]::before {
     transform: scaleX(-1) translate3d(0,-50%,0);
-    margin-left: 0;
-    margin-right: var(--gl-tooltip-size);
+    margin: 0 6px 0 0;
 }
 [data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]::after {
     margin-left: 0;