init

design/src-web/foundations/style/index.css

@@ -0,0 +1,65 @@
+/* Source module: foundations.css */
+.color-foundation-body { padding: 12px 16px 10px; }
+.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px 9px; }
+.swatch {
+  height: 48px;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  grid-template-rows: 1fr 1fr;
+  column-gap: 7px;
+  padding: 5px 7px;
+  border: 1px solid #33352f;
+  background: #0a0b0a;
+  color: var(--text-2);
+  font-size: 9px;
+  text-shadow: 0 1px 2px #000;
+}
+.swatch i { grid-row: 1 / 3; width: 26px; border: 1px solid #524a39; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
+.swatch span { align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.swatch code { align-self: start; color: var(--text-3); font: 8.5px/1.2 Consolas, monospace; }
+
+.quality-strip { display: grid; grid-template-columns: 64px repeat(9, minmax(0,1fr)); gap: 7px; align-items: stretch; margin-top: 9px; }
+.quality-label { display:flex;align-items:center;justify-content:center;border:1px solid #383a36;color:var(--text-3);font:9px/1 Consolas,monospace;letter-spacing:1px;background:#0a0b0a; }
+.quality-chip { min-width:0;height:34px;padding:4px 6px;display:flex;flex-direction:column;justify-content:center;border:1px solid #30322e;background:#080908;font-size:10px;white-space:nowrap;overflow:hidden; }
+.quality-chip code { margin-top:2px;color:var(--text-3);font:7.5px/1 Consolas,monospace;text-shadow:none; }
+.q-normal { color: var(--quality-normal) !important; }
+.q-advanced { color: var(--quality-advanced) !important; }
+.q-rare { color: var(--quality-rare) !important; }
+.q-artifact { color: var(--quality-artifact) !important; }
+.q-legend { color: var(--quality-legend) !important; }
+.q-epic { color: var(--quality-epic) !important; }
+.q-chronicle { color: var(--quality-chronicle) !important; }
+.q-myth { color:transparent !important;background-image:linear-gradient(to bottom,#f8c63d,#cc66e7);background-clip:text;-webkit-background-clip:text;text-shadow:none !important; }
+.q-primeval { color:transparent !important;background-image:linear-gradient(to bottom,#5aff62,#58c6ff);background-clip:text;-webkit-background-clip:text;text-shadow:none !important; }
+.quality-chip.q-myth, .quality-chip.q-primeval { background-color:#080908; }
+.quality-chip.q-myth code, .quality-chip.q-primeval code { color:var(--text-3);-webkit-text-fill-color:var(--text-3); }
+.skill-strip { display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:7px;margin-top:7px; }
+.semantic-content-strip { display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:7px;margin-top:7px; }
+.semantic-chip { height:34px;min-width:0;padding:4px 8px;display:flex;flex-direction:column;justify-content:center;border:1px solid #30322e;background:#080908;font-size:10px;white-space:nowrap;overflow:hidden; }
+.semantic-chip code { margin-top:2px;color:var(--text-3);font:7.5px/1 Consolas,monospace; }
+.skill-evolution { color:var(--skill-evolution);border-color:#4c235f;background:#120718; }
+.skill-passive { color:var(--skill-passive);border-color:#1f5d22;background:#071407; }
+.skill-active { color:var(--skill-active);border-color:#5c4d1f;background:#141107; }
+.skill-awakening { color:var(--skill-awakening);border-color:#6a3409;background:#170b03; }
+.skill-buff { color:var(--skill-buff);border-color:#285865;background:#061217; }
+.attribute-label-tone { color:var(--attribute-label); }
+.attribute-value-tone { color:var(--attribute-value); }
+.disabled-tone { color:var(--disabled); }
+.success-tone { color:var(--success); }
+.danger-tone { color:var(--danger); }
+
+.type-sample {
+  padding: 10px 12px;
+  border-left: 2px solid var(--brass);
+  background: #0a0b0b;
+}
+.type-sample + .type-sample { margin-top: 8px; }
+.type-sample .zh { color: var(--gold); }
+.type-sample .num { color: var(--text); float: right; }
+.type-xs { font-size: 12px; }
+.type-sm { font-size: 14px; }
+.type-md { font-size: 16px; }
+.type-lg { font-size: 20px; }
+.glyph-select-2x { width:11px;height:6px; }
+.glyph-close-2x { width:10px;height:9px; }