Module:GameInfo/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* SpiritVale Wiki — Module:GameInfo/styles.css */
-/* GameInfo-family layout and skill-specific presentation. */
+/* GameInfo-family layout and skill-specific presentation.
+   Surface model:
+   - bg0 is reserved for the site background
+   - bg1 is the base card surface
+   - bg2 is the grouped section surface
+   - bg3 is the nested bubble / framed inner surface
+   - bg4 is the deepest neutral emphasis surface when needed
+*/
 /* -------------------------------------------------------------------------- */
@@ Line 13: / Line 20: @@
    overflow:visible;
-   /* Use the darkest site surface. */
+   /* Base component surface. */
-   background:var(--sv-ui-bg3);
+   background:var(--sv-ui-bg1);
    background-image:none;
@@ Line 202: / Line 209: @@
    border-radius:999px;
-   /* Small inner bubble contrast. */
+   /* Inner icon recess for contrast. */
    background:var(--sv-ui-bg2);
    background-image:none;
@@ Line 302: / Line 309: @@
    border-radius:16px;
-   /* Section surface. */
+   /* Grouped section surface. */
    background:var(--sv-ui-bg2);
    background-image:none;
@@ Line 320: / Line 327: @@
    border-radius:18px;
-   /* Section surface. */
+   /* Grouped section surface. */
    background:var(--sv-ui-bg2);
    background-image:none;
@@ Line 353: / Line 360: @@
    border-radius:16px;
-   background:var(--sv-ui-bg2);
+   background:var(--sv-ui-bg3);
    background-image:none;
    box-shadow:none;
@@ Line 461: / Line 468: @@
    border-radius:14px;
    border:1px solid var(--sv-ui-line2);
-   background:var(--sv-ui-bg3);
+   background:var(--sv-ui-bg4);
    background-image:none;
    box-shadow:none;
@@ Line 632: / Line 639: @@
 .sv_skill_scaling__core-pill.is-active{
-   background:var(--sv-ui-bg3);
+   background:var(--sv-ui-bg4);
    background-image:none;
 }