Template:Unique list/styles.css - Revision history

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T17:24:00Z

One-page unique list with every item box, made from the item pages

← Older revision		Revision as of 17:24, 13 November 2026
Line 55:		Line 55:
	}		}

	/* [[Sacred uniques]]: the boxes of a type three to a row, as wide as the tiered rows */		/* [[Sacred uniques]], [[Other uniques]]: the boxes of a type three to a row, as wide as the tiered rows */
	.unique-grid {		.unique-grid {
	display: grid;		display: grid;

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T17:22:16Z

One-page unique list with every item box, made from the item pages

@@ Line 53: / Line 53: @@
 	word-break: normal;
 	hyphens: manual;
+}
@@ Line 111: / Line 124: @@
 @media ( max-width: 719px ) {
 	/* on a phone: two columns, the picture cell across the top */
 	.unique-tiers,

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T17:18:41Z

One-page unique list with every item box, made from the item pages

← Older revision		Revision as of 17:18, 13 November 2026
Line 18:		Line 18:

	/* one tiered unique: its six tiers in one row, scrolling sideways when the screen is narrower */		/* one tiered unique: its six tiers in one row, scrolling sideways when the screen is narrower */
			/* one tiered unique: the picture cell on the left over both rows, its six tiers in 3 x 2 */
	.unique-tiers {		.unique-tiers {
	display: grid;		display: grid;
	grid-template-columns: ~~116px~~ repeat( 6, minmax( ~~140px~~, 1fr ) );		grid-template-columns: 130px repeat( 3, minmax( 0, 1fr ) );
	gap: 6px;		gap: 6px;
	margin: 0 0 ~~14px;~~		margin: 0 0 16px;
	~~overflow-x: auto;~~
	~~padding-bottom: 4px~~;
	}		}

	.unique-tiers .d2-item.d2-item-inline {		.unique-tiers .d2-item.d2-item-inline {
	padding: ~~9px 8px~~;		padding: 10px 12px;
	font-size: 0.~~82em~~;		font-size: 0.9em;
			}

			.unique-tiers .unique-tiers-head {
			grid-row: span 2;
	}		}

Line 59:		Line 62:

	/* [[Gems and runes]] (gems_runes.py): five grades per gem, the socket kinds under each grade, rune boxes */		/* [[Gems and runes]] (gems_runes.py): five grades per gem, the socket kinds under each grade, rune boxes */
			/* a gem: its picture cell and five grades fill 3 x 2 */
	.unique-tiers.gem-grades {		.unique-tiers.gem-grades {
	grid-template-columns: ~~116px~~ repeat( 5, minmax( ~~150px~~, 1fr ) );		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
			}

			.unique-tiers.gem-grades .unique-tiers-head {
			grid-row: auto;
	}		}

Line 103:		Line 111:

	@media ( max-width: 719px ) {		@media ( max-width: 719px ) {
			/* on a phone: two columns, the picture cell across the top */
			.unique-tiers,
	.unique-tiers.gem-grades {		.unique-tiers.gem-grades {
	grid-template-columns: ~~124px~~ repeat( 5, ~~180px~~ );		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}		}

	~~/* on a phone the picture cell stays put while the tiers scroll past it */~~
	.unique-tiers .unique-tiers-head {		.unique-tiers .unique-tiers-head {
	~~position: sticky;~~		grid-row: auto;
	~~left~~: 0;		grid-column: 1 / -1;
	z-~~index~~: 1;
	~~font~~-~~size: 0.82em~~;
	}		}
	}

	~~@media ( max-width: 719px ) {~~		.unique-tiers .d2-item.d2-item-inline {
	.unique-tiers {		padding: 8px 6px;
	~~grid~~-~~template-columns~~: ~~124px repeat( 6, 190px )~~;		font-size: 0.84em;
	}		}
	}		}

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T17:14:22Z

One-page unique list with every item box, made from the item pages

@@ Line 75: / Line 75: @@
 	color: #9a9a9a;
 	font-size: 0.88em;
+}

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T17:09:08Z

One-page unique list with every item box, made from the item pages

@@ Line 56: / Line 56: @@
 	font-size: 1.05em;
 	margin-bottom: 2px;
+}
 @media ( max-width: 719px ) {
 	/* on a phone the picture cell stays put while the tiers scroll past it */
 	.unique-tiers .unique-tiers-head {

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T16:39:57Z

One-page unique list with every item box, made from the item pages

← Older revision		Revision as of 16:39, 13 November 2026
Line 44:		Line 44:
	max-width: 100%;		max-width: 100%;
	height: auto;		height: auto;
			}

			.unique-tiers .unique-tiers-head .d2-item-name {
			overflow-wrap: normal;
			word-break: normal;
			hyphens: manual;
	}		}

Line 58:		Line 64:
	left: 0;		left: 0;
	z-index: 1;		z-index: 1;
			font-size: 0.82em;
	}		}
	}		}
Line 63:		Line 70:
	@media ( max-width: 719px ) {		@media ( max-width: 719px ) {
	.unique-tiers {		.unique-tiers {
	grid-template-columns: ~~110px~~ repeat( 6, 190px );		grid-template-columns: 124px repeat( 6, 190px );
	}		}
	}		}

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T16:39:36Z

One-page unique list with every item box, made from the item pages

← Older revision		Revision as of 16:39, 13 November 2026
Line 20:		Line 20:
	.unique-tiers {		.unique-tiers {
	display: grid;		display: grid;
	grid-template-columns: repeat( 6, minmax( ~~158px~~, 1fr ) );		grid-template-columns: 116px repeat( 6, minmax( 140px, 1fr ) );
	gap: 6px;		gap: 6px;
	margin: 0 0 14px;		margin: 0 0 14px;
Line 32:		Line 32:
	}		}

	.unique-tiers .d2-item-image img {		/* the row's first cell: the picture, name and base once, then the six tiers to its right */
	max-height: ~~64px~~;		.unique-tiers .unique-tiers-head {
	width: ~~auto~~;		display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 10px 6px;
			font-size: 0.9em;
			}

			.unique-tiers .unique-tiers-head .d2-item-image img {
			max-width: 100%;
			height: auto;
			}

			/* "Tier N" over each tier's stats */
			.unique-tiers .unique-tier-title {
			font-size: 1.05em;
			margin-bottom: 2px;
			}

			@media ( max-width: 719px ) {
			/* on a phone the picture cell stays put while the tiers scroll past it */
			.unique-tiers .unique-tiers-head {
			position: sticky;
			left: 0;
			z-index: 1;
			}
	}		}

	@media ( max-width: 719px ) {		@media ( max-width: 719px ) {
	.unique-tiers {		.unique-tiers {
	grid-template-columns: repeat( 6, ~~200px~~ );		grid-template-columns: 110px repeat( 6, 190px );
	}		}
	}		}

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T16:32:25Z

One-page unique list with every item box, made from the item pages

@@ Line 11: / Line 11: @@
+}
-.unique-list-type {
+.unique-list-count {
-	margin: 1.4em 0 0.2em;
+	margin: -0.3em 0 0.6em;
-	font-weight: bold;
+	color: var( --color-subtle );
-	font-size: 1.05em;
+	font-size: 0.9em;
+}

Maintenance script: One-page unique list with every item box, made from the item pages

2026-11-13T16:27:23Z

One-page unique list with every item box, made from the item pages

New page

/* one-page unique lists ([[Tiered uniques]], [[Sacred uniques]], [[Other uniques]]); made by
/root/wiki-tools/unique_lists.py */
.unique-list-jump {
margin: 0.6em 0 1.4em;
line-height: 2;
}

.unique-list-jump b {
display: inline-block;
min-width: 5.5em;
}

.unique-list-type {
margin: 1.4em 0 0.2em;
font-weight: bold;
font-size: 1.05em;
}

.unique-list .d2-item-name a,
.unique-list .d2-item-name a:visited {
color: inherit;
text-decoration: none;
}

.unique-list .d2-item-name a:hover {
text-decoration: underline;
}