Module:GameInfo/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 6: / Line 6: @@
     - Citizen theme overrides (day/night/os) are now in Citizen.css (sitewide).
     - Level slider component styling (track/fill/thumb/ticks/bubble) is now sitewide
-      in Common.css + Citizen.css. This file keeps only the wrapper/layout.
+      in Common.css + Citizen.css. This file keeps only the wrapper/layout + module-only tweaks.
 */
@@ Line 332: / Line 332: @@
 /* ----------------------------------------------------------------------------
-) LEVEL SELECTOR (wrapper only; slider component is sitewide)
+) LEVEL SELECTOR (wrapper/layout; slider component is sitewide)
 ---------------------------------------------------------------------------- */
@@ Line 344: / Line 344: @@
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
-   /* Place slider first, helper text under it */
+   /* Place slider first, helper text under it, tick/check row under slider */
    display:flex;
    flex-direction:column;
    gap:8px;
+}
+/* Slider row: actual slider + end-of-bar value readout (added by JS) */
+.sv-skill-level .sv-level-slider{
+  display:flex;
+  align-items:center;
+  gap:10px;
+  flex-wrap:nowrap;
+}
+/* Make the slider element consume the row width */
+.sv-skill-level .sv-level-slider input.sv-level-range[type="range"],
+.sv-skill-level .sv-level-slider .sv-level-range--custom,
+.sv-skill-level .sv-level-slider .sv-level-range[data-sv-slider="1"]{
+  flex:1 1 auto;
+  min-width:0;
+}
+/* End-of-bar value (appended by Common.js) */
+.sv-skill-level .sv-level-endvalue{
+  flex:0 0 auto;
+  min-width:30px;
+  padding:2px 8px;
+  border-radius:999px;
+  border:1px solid rgba(245,249,255,0.16);
+  background:rgba(255,255,255,0.04);
+  font-weight:900;
+  font-size:13px;
+  line-height:1.25;
+  letter-spacing:0.15px;
+  color:rgba(245,249,255,0.94);
+  text-align:center;
+  white-space:nowrap;
 }
@@ Line 380: / Line 416: @@
    padding:0;
-  /* In flex row: make the label itself a compact inline box */
    display:inline-block;
@@ Line 395: / Line 430: @@
 .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 */
+   display:inline-block;
    font-weight:900;
@@ Line 411: / Line 445: @@
    display:inline-flex;
    align-items:center;
-  /* HARDEN: keep wrapper in flow */
    position:static;
 }
@@ Line 431: / Line 463: @@
    justify-content:center;
-  /* match helper text */
    font-weight:900;
    font-size:13px;
@@ Line 438: / Line 469: @@
    color:rgba(245,249,255,0.94);
-  /* true pill, subtle */
    padding:1px 8px !important;
    border-radius:999px;
@@ Line 448: / Line 478: @@
    cursor:pointer;
-  user-select:none;
    white-space:nowrap;
 }
@@ Line 469: / Line 498: @@
 }
-/* Remove bottom min/max tick labels */
+/* Numbered checkmarks row (built by Common.js into .sv-level-ticklabels) */
 .sv-skill-level .sv-level-ticklabels{
-   display:none;
+  margin:2px 0 0;
+  padding:0 2px;
+  display:flex;
+  align-items:flex-start;
+}
+/* Full mode: distribute evenly */
+.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/full"]{
+  justify-content:space-between;
+}
+.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/full"] .sv-level-tick{
+  flex:1 1 0;
+  text-align:center;
+}
+/* Min/max mode: pin to edges */
+.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/minmax"]{
+  justify-content:space-between;
+}
+.sv-skill-level .sv-level-ticklabels[data-sv-ticks$="/minmax"] .sv-level-tick{
+  flex:0 0 auto;
+}
+.sv-skill-level .sv-level-tick--min{ text-align:left; }
+.sv-skill-level .sv-level-tick--max{ text-align:right; }
+.sv-skill-level .sv-level-tick{
+  min-width:0;
+  font-weight:900;
+  color:rgba(215,226,244,0.92);
+}
+.sv-skill-level .sv-level-tickmark{
+  display:block;
+  font-size:12px;
+  line-height:1;
+  opacity:0.18;
+}
+.sv-skill-level .sv-level-ticknum{
+   display:block;
+  margin-top:1px;
+  font-size:10px;
+  line-height:1;
+  opacity:0.72;
+}
+/* Checked/current states */
+.sv-skill-level .sv-level-tick--checked .sv-level-tickmark{ opacity:0.92; }
+.sv-skill-level .sv-level-tick--checked .sv-level-ticknum{ opacity:0.95; }
+.sv-skill-level .sv-level-tick--current .sv-level-tickmark,
+.sv-skill-level .sv-level-tick--current .sv-level-ticknum{
+  color:rgba(245,249,255,0.98);
+  opacity:1;
 }
 @media (max-width:500px){
-  /* Light “mobile shrink” so the slider geometry fits inside the bubble */
    .sv-skill-level{
      padding:9px 10px;
+  }
+  .sv-skill-level .sv-level-slider{
+    gap:8px;
+  }
+  .sv-skill-level .sv-level-endvalue{
+    padding:1px 7px;
+    font-size:12px;
+    line-height:1.25;
+    min-width:28px;
    }
@@ Line 492: / Line 585: @@
      margin-top:-3px;
      height:6px;
-     width:calc(100% - 16px); /* tweak: 12px / 20px / etc */
+     width:calc(100% - 16px);
    }
@@ Line 514: / Line 607: @@
      min-height:0 !important;
    }
+  .sv-skill-level .sv-level-tickmark{ font-size:11px; }
+  .sv-skill-level .sv-level-ticknum{ font-size:9px; }
 }