MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 3: / Line 3: @@
 Sitewide base + shared SpiritVale components (all skins)
 - No Citizen skin selectors
-- No mobile-only (@media max-width:500) rules (those live in Mobile.css)
+- Mobile rules are merged into Common.css/Citizen.css (no separate Common.css/Citizen.css)
 ============================================================================ */
@@ Line 895: / Line 895: @@
 .mw-parser-output .sv-img--shadow img{
 box-shadow:0 10px 18px rgba(0,0,0,0.35);
+}
+/* ---------------------------------------------------------------------------
+SV Level Slider (universal component)
+- Custom slider anatomy: track + fill + thumb + tick labels + value bubble
+- Used by GameInfo/Skills and future modules/templates
+--------------------------------------------------------------------------- */
+.sv-level-slider{
+  position:relative;
+}
+.sv-level-range--custom,
+.sv-level-range[data-sv-slider="1"]{
+  display:block;
+  position:relative;
+  height:26px;
+  border-radius:var(--sv-ui-rad-pill);
+  border:1px solid var(--sv-ui-line2);
+  background:var(--sv-ui-bg0);
+  cursor:pointer;
+  box-sizing:border-box;
+}
+/* Track + fill */
+.sv-level-track{
+  position:absolute;
+  left:8px;
+  right:8px;
+  top:50%;
+  margin-top:-4px;
+  height:8px;
+  border-radius:var(--sv-ui-rad-pill);
+  background:var(--sv-ui-bg2);
+  overflow:hidden;
+}
+.sv-level-fill{
+  display:block;
+  height:100%;
+  width:0%;
+  border-radius:var(--sv-ui-rad-pill);
+  background:linear-gradient(90deg, var(--sv-ui-accent), rgba(245,249,255,0.22));
+}
+/* Thumb */
+.sv-level-thumb{
+  position:absolute;
+  left:0%;
+  top:50%;
+  margin-top:-9px;
+  margin-left:-9px;
+  width:18px;
+  height:18px;
+  border-radius:var(--sv-ui-rad-pill);
+  border:2px solid var(--sv-ui-line2);
+  background:rgba(245,249,255,0.92);
+  box-shadow:0 10px 18px rgba(0,0,0,0.35);
+}
+/* Tick labels row (JS can populate min/max or more) */
+.sv-level-ticklabels{
+  display:flex;
+  justify-content:space-between;
+  gap:10px;
+  margin-top:7px;
+  font-weight:900;
+  font-size:12px;
+  color:var(--sv-ui-text3);
+  line-height:1.1;
+  min-height:12px;
+}
+.sv-level-tick{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  min-width:18px;
+}
+/* Value bubble (JS injects .sv-level-bubble) */
+.sv-level-range--custom .sv-level-bubble,
+.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
+  position:absolute;
+  top:-30px;
+  left:0%;
+  transform:translateX(-50%);
+  padding:6px 10px;
+  border-radius:12px;
+  border:1px solid var(--sv-ui-line2);
+  background:var(--sv-ui-bg1);
+  background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
+  box-shadow:0 10px 18px rgba(0,0,0,0.35);
+  font-weight:900;
+  font-size:12px;
+  line-height:1;
+  color:var(--sv-ui-text1);
+  pointer-events:none;
+  white-space:nowrap;
+}
+.sv-level-range--custom .sv-level-bubble:after,
+.sv-level-range[data-sv-slider="1"] .sv-level-bubble:after{
+  content:"";
+  position:absolute;
+  left:50%;
+  bottom:-6px;
+  width:10px;
+  height:10px;
+  margin-left:-5px;
+  background:var(--sv-ui-bg1);
+  border-left:1px solid var(--sv-ui-line2);
+  border-bottom:1px solid var(--sv-ui-line2);
+  transform:rotate(45deg);
+}
+/* Focus ring (universal) */
+.sv-level-range--custom:focus-visible,
+.sv-level-range[data-sv-slider="1"]:focus-visible{
+  outline:2px solid var(--sv-ui-accent2);
+  outline-offset:2px;
+  border-radius:10px;
 }