MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 2,060: / Line 2,060: @@
     these grids from two columns to one. */
 @media (max-width: 899px) {
+	.wizlords-spellbooks-desktop {
+		display: none;
+	}
+	.wizlords-spellbooks-mobile {
+		display: block;
+	}
 	.wizlords-class-card-grid,
 	.wizlords-spell-card-grid {
@@ Line 2,087: / Line 2,095: @@
 	.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(5) {
 		grid-column: auto;
+	}
+	.wizlords-mobile-spellbook {
+		margin: 18px 0 30px;
+	}
+	.wizlords-mobile-spellbook-title {
+		margin: 22px 0 10px;
+		padding-bottom: 6px;
+		border-bottom: 1px solid var(--wiz-content-border, #ff942d);
+		color: var(--wiz-heading, #e7e1d4);
+		font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
+		font-size: 24px;
+		font-weight: 700;
+		line-height: 1.25;
+		text-align: center;
+	}
+	.wizlords-mobile-spell-category {
+		margin: 18px 0 22px;
+	}
+	.wizlords-mobile-spell-category-heading {
+		margin: 0 0 4px;
+		color: var(--wiz-heading, #e7e1d4);
+		font-size: 18px;
+		font-weight: 700;
+		line-height: 1.3;
+		text-align: left;
+	}
+	.wizlords-mobile-spell-category-description {
+		margin: 0 0 10px;
+		color: var(--wiz-text, #d2d2d2);
+		font-size: 14px;
+		font-style: italic;
+		line-height: 1.45;
+	}
+	.wizlords-mobile-spell-card {
+		--wiz-mobile-spell-accent: #9a3dae;
+		position: relative;
+		display: grid;
+		grid-template-columns: 92px minmax(0, 1fr);
+		grid-template-rows: auto auto auto;
+		align-content: center;
+		gap: 0 10px;
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 560px;
+		min-height: 150px;
+		margin: 0 auto 10px;
+		padding: 8px 9px;
+		border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
+		background: #1f1e1e;
+		cursor: pointer;
+	}
+	.wizlords-mobile-spellbook-arcane .wizlords-mobile-spell-card {
+		--wiz-mobile-spell-accent: #d66be3;
+	}
+	.wizlords-mobile-spellbook-divine .wizlords-mobile-spell-card {
+		--wiz-mobile-spell-accent: #19c4eb;
+	}
+	.wizlords-mobile-spell-card.is-open {
+		align-content: start;
+		padding-top: 24px;
+	}
+	.wizlords-mobile-spell-card:focus {
+		outline: 2px solid var(--wiz-content-border, #ff942d);
+		outline-offset: 2px;
+	}
+	.wizlords-mobile-spell-card-icon {
+		grid-row: 1 / span 2;
+		grid-column: 1;
+		align-self: center;
+		box-sizing: border-box;
+		width: 88px;
+		height: 88px;
+		overflow: hidden;
+		padding: 0;
+		text-align: center;
+	}
+	.wizlords-mobile-spell-card-icon img {
+		display: block;
+		width: 88px !important;
+		height: 88px !important;
+		max-width: 88px !important;
+		max-height: 88px !important;
+		object-fit: contain;
+	}
+	.wizlords-mobile-spell-card-title {
+		position: relative;
+		grid-row: 1;
+		grid-column: 2;
+		align-self: start;
+		margin: 0 0 3px;
+		padding: 0 22px 3px 18px;
+		border-bottom: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
+		color: var(--wiz-heading, #e7e1d4);
+		font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
+		font-size: 20px;
+		font-weight: 700;
+		line-height: 1.25;
+		text-align: left;
+	}
+	.wizlords-mobile-spell-card-title::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 1px;
+		width: 7px;
+		height: 7px;
+		border-right: 2px solid var(--wiz-heading, #e7e1d4);
+		border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
+		transform: translateY(-65%) rotate(45deg);
+		transform-origin: 50% 50%;
+	}
+	.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-title::before {
+		transform: translateY(-35%) rotate(225deg);
+	}
+	.wizlords-mobile-spell-card-summary {
+		grid-row: 2;
+		grid-column: 2;
+		margin: 0;
+		color: var(--wiz-text, #d2d2d2);
+		font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
+		font-size: 13px;
+		font-style: italic;
+		font-weight: 400;
+		line-height: 1.35;
+	}
+	.wizlords-mobile-spell-card-rules {
+		display: none;
+		grid-column: 1 / -1;
+		margin-top: 10px;
+		padding: 10px 10px 2px;
+		border-top: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
+		color: var(--wiz-text, #d2d2d2);
+		background: #171717;
+		line-height: 1.45;
+	}
+	.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules {
+		display: block;
+	}
+	.wizlords-mobile-spell-card-rules .wizlords-spell-card-meta,
+	.wizlords-mobile-spell-card-rules .wizlords-spell-card-section {
+		padding: 0 0 10px;
+	}
+	.wizlords-mobile-spell-card-rules .wizlords-spell-card-divider {
+		width: 55%;
+		height: 1px;
+		margin: 10px auto;
+		background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
+	}
+}
+@media (min-width: 900px) {
+	.wizlords-spellbooks-mobile {
+		display: none;
+	}
+	.wizlords-spellbooks-desktop {
+		display: block;
 	}
 }