Module:GameInfo/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 330: / Line 330: @@
    padding:0 12px;
 }
 /* ----------------------------------------------------------------------------
@@ Line 358: / Line 357: @@
 .sv-skill-level .sv-level-ui{
    order:2;
-   display:block;
+  /* Helper text + overcap pill on one line */
+   display:flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  /* Allow graceful wrap on ultra-small screens */
+  flex-wrap:wrap;
    text-align:center;
    margin:0;
+}
+/* Replace “Level X / Y” with helper text (keep markup for JS parsing) */
+.sv-gi-card .sv-level-label,
+.sv-skill-card .sv-level-label{
+  font-size:0;      /* hides emitted text + numbers */
+  line-height:0;
+  margin:0;
+  padding:0;
+  /* In flex row: make the label itself a compact inline box */
+  display:inline-block;
+}
+/* Helper text */
+.sv-gi-card .sv-level-label:after,
+.sv-skill-card .sv-level-label:after{
+  /* ≤5 words, slider instruction */
+  content:"Slide to set level";
+  display:inline-block; /* IMPORTANT: keep pill on same line */
+  font-weight:900;
+  font-size:13px;
+  line-height:1.25;
+  letter-spacing:0.15px;
+  color:rgba(245,249,255,0.94);
+}
+/* Overcap pill (Option A) */
+.sv-skill-level .sv-overcap-tip{
+  display:inline-flex;
+  align-items:center;
+}
+/* Ensure the trigger looks like a compact pill */
+.sv-skill-level .sv-overcap-btn{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  padding:3px 9px;
+  min-height:22px;
+  border-radius:999px;
+  border:1px solid rgba(59,75,99,0.85);
+  background:#273449;
+  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
+  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
+  font-weight:900;
+  font-size:12px;
+  line-height:1.05;
+  letter-spacing:0.10px;
+  color:rgba(245,249,255,0.96);
+  cursor:pointer;
+  user-select:none;
+}
+.sv-skill-level .sv-overcap-btn:hover{
+  background:#2e3f59;
+}
+.sv-skill-level .sv-overcap-btn:active{
+  transform:translateY(1px);
+}
+/* Remove bottom min/max tick labels */
+.sv-skill-level .sv-level-ticklabels{
+  display:none;
 }
@@ Line 396: / Line 476: @@
      font-size:11px;
    }
-}
-/* Replace “Level X / Y” with helper text (keep markup for JS parsing) */
+  .sv-skill-level .sv-overcap-btn{
-.sv-gi-card .sv-level-label,
+    padding:3px 8px;
-.sv-skill-card .sv-level-label{
+    font-size:11px;
-  font-size:0;      /* hides emitted text + numbers */
+    min-height:20px;
-  line-height:0;
+   }
-  margin:0;
-  padding:0;
-}
-.sv-gi-card .sv-level-label:after,
-.sv-skill-card .sv-level-label:after{
-  /* ≤5 words, slider instruction */
-  content:"Slide to set level";
-  display:block;
-  font-weight:900;
-  font-size:13px;
-  line-height:1.25;
-  letter-spacing:0.15px;
-   color:rgba(245,249,255,0.94);
-}
-/* Remove bottom min/max tick labels */
-.sv-skill-level .sv-level-ticklabels{
-  display:none;
 }