Template:Variants/styles.css: Difference between revisions

Revision as of 13:34, 5 March 2026

/* =========================
   Variant Mini Requirement Boxes
   ========================= */

.vpvg-reqcell {
  text-align: left;
}

/* Item layout */
.vpvg-item {
  display: inline-flex;
  align-items: center;
}

/* Icon outside the box */
.vpvg-icon {
  margin-right: 4px;
}

.vpvg-icon img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
}

/* Mini requirement box */
.vpvg-mini-box {
  display: inline-block;

  background: var(--vp-journal-bg);
  color: var(--vp-journal-text);

  border: 2px solid var(--vp-journal-border);
  border-radius: 6px;

  padding: 2px 6px;
  margin-right: 4px;

  font-weight: 600;
  font-size: 0.9em;
  line-height: 1.2;

  text-shadow: 1px 1px 2px #003366;
}

/* Quantity */
.vpvg-mini-box .vpvg-qty {
  font-size: 0.85em;
}

/* Plus separator */
.vpvg-plus {
  margin: 0 4px;
  font-weight: bold;
  opacity: 0.7;
}

@@ Line 1: / Line 1: @@
-/* Main grid layout */
-.vpvg-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-	gap: 1.2em;
-	margin: 1em 0;
-}
-/* Individual variant column */
-.vpvg-col {
-	background: #f8f6f1;
-	border: 2px solid #c7bfae;
-	border-radius: 10px;
-	padding: 0.8em;
-	text-align: center;
-}
-/* Variant title */
-.vpvg-title {
-	font-weight: bold;
-	font-size: 1.15em;
-	margin-bottom: 0.5em;
-}
-/* Image block */
-.vpvg-image img {
-	max-width: 160px;
-	height: auto;
-	margin-bottom: 0.6em;
-}
-/* Requirement rows */
-.vpvg-req {
-	font-weight: 600;
-	margin: 0.3em 0;
-	line-height: 1.3;
-}
-/* Game label */
-.vpvg-game {
-	font-weight: bold;
-}
-/* Game color coding */
-.vpvg-req.vp1 {
-	color: #2c6b4f;
-}
-.vpvg-req.tip {
-	color: #4a4fb8;
-}
-.vpvg-req.pp {
-	color: #a67c00;
-}
-/* Item icons inside requirements */
-.vpvg-req img {
-	width: 28px;
-	height: 28px;
-	vertical-align: middle;
-	margin-right: 0.3em;
-}
-/* Icon + quantity styling */
-.vpvg-req img {
-	width: 24px;
-	height: 24px;
-	vertical-align: middle;
-}
-/* Item container */
-.vpvg-item {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	margin-right: 6px;
-}
 /* =========================
-    Requirement Mini Table
+    Variant Mini Requirement Boxes
     ========================= */
-.vpvg-reqtable {
+.vpvg-reqcell {
-	width: 100%;
+  text-align: left;
-	border-collapse: collapse;
-	margin-top: 0.6em;
-	font-weight: 600;
-	font-size: 0.95em;
 }
-.vpvg-reqtable td {
+/* Item layout */
-	padding: 4px 6px;
+.vpvg-item {
-	vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
 }
-/* Left game column */
+/* Icon outside the box */
-.vpvg-gamecell {
+.vpvg-icon {
-	width: 48px;
+  margin-right: 4px;
-	text-align: center;
-	font-weight: bold;
-	color: #222;
-	border-right: 1px solid #ddd;
 }
-/* Right requirement column */
+.vpvg-icon img {
-.vpvg-reqcell {
+  width: 22px;
-	text-align: left;
+  height: 22px;
+  vertical-align: middle;
+  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
 }
-/* VP1 — Green */
+/* Mini requirement box */
-.vpvg-row.vp1 .vpvg-gamecell {
+.vpvg-mini-box {
-	background: #d6eee0;
+  display: inline-block;
-}
-/* TIP — Blue */
+  background: var(--vp-journal-bg);
-.vpvg-row.tip .vpvg-gamecell {
+  color: var(--vp-journal-text);
-	background: #dde0f7;
-}
-/* PP — Yellow */
+  border: 2px solid var(--vp-journal-border);
-.vpvg-row.pp .vpvg-gamecell {
+  border-radius: 6px;
-	background: #fff0c9;
-}
-/* =========================
+  padding: 2px 6px;
-   Icon + Text
+  margin-right: 4px;
-   ========================= */
-.vpvg-item {
+  font-weight: 600;
-	display: inline-flex;
+  font-size: 0.9em;
-	align-items: center;
+  line-height: 1.2;
-	gap: 4px;
-	margin-right: 6px;
-}
-.vpvg-item img {
+  text-shadow: 1px 1px 2px #003366;
-	width: 18px;
-	height: 18px;
 }
-.vpvg-qty {
+/* Quantity */
-	font-size: 0.85em;
+.vpvg-mini-box .vpvg-qty {
-	margin-left: 2px;
+  font-size: 0.85em;
-	margin-right: 6px;
 }
+/* Plus separator */
 .vpvg-plus {
-	margin: 0 6px;
+  margin: 0 4px;
-	font-weight: bold;
+  font-weight: bold;
-	opacity: 0.6;
+  opacity: 0.7;
 }