impress/app/assets/stylesheets/application/rainbow-pool.sass

@import "../partials/clean/constants"

.rainbow-pool-filters
	margin-block: .5em

	fieldset
		display: flex
		flex-direction: row
		align-items: center
		justify-content: center
		gap: .5em

	legend
		display: contents
		font-weight: bold

	select
		width: 16ch

.rainbow-pool-list
	list-style-type: none
	display: flex
	flex-wrap: wrap
	justify-content: center
	gap: .5em

	--preview-base-width: 150px

	> li
		width: var(--preview-base-width)
		max-width: calc(50% - .25em)
		min-width: 150px
		box-sizing: border-box
		text-align: center

	a
		display: block
		border-radius: 1em
		padding: .5em
		text-decoration: none
		background: white
		&:hover
			outline: 1px solid $module-border-color
			background: $module-bg-color

	.preview
		width: 100%
		height: auto
		aspect-ratio: 1 / 1
		margin-bottom: -1em

	.name
		background: inherit
		padding: .25em .5em
		border-radius: .5em
		margin: 0 auto
		position: relative
		z-index: 1

	.info
		font-size: .85em
		p
			margin-block: .25em

.rainbow-pool-pagination
	margin-block: .5em
	display: flex
	justify-content: center
	gap: 1em

.rainbow-pool-no-results
	margin-block: 1em
	text-align: center
	font-style: italic
Refactor Rainbow Pool to use shared styles for the list elements The lists of pet types and pet states had very similar styles, which I mostly copy-pasted. Now that I want to use them for Alt Styles too, I'm refactoring! 2024-09-30 16:21:47 -07:00			`@import "../partials/clean/constants"`

Share styles between pet types and alt styles as "rainbow-pool" CSS 2024-09-30 16:10:26 -07:00			`.rainbow-pool-filters`
Add a bit more space around Rainbow Pool filter forms 2024-10-11 17:39:35 -07:00			`margin-block: .5em`

Share styles between pet types and alt styles as "rainbow-pool" CSS 2024-09-30 16:10:26 -07:00			`fieldset`
			`display: flex`
			`flex-direction: row`
			`align-items: center`
			`justify-content: center`
			`gap: .5em`

			`legend`
			`display: contents`
			`font-weight: bold`
Refactor Rainbow Pool to use shared styles for the list elements The lists of pet types and pet states had very similar styles, which I mostly copy-pasted. Now that I want to use them for Alt Styles too, I'm refactoring! 2024-09-30 16:21:47 -07:00
Limit Rainbow Pool filter dropdown size cuz the "Prismatic Pink: Nostalgic" stuff is gonna get pretty long if we just do the default behavior of letting it grow to max content size! 2024-09-30 17:42:52 -07:00			`select`
			`width: 16ch`

Refactor Rainbow Pool to use shared styles for the list elements The lists of pet types and pet states had very similar styles, which I mostly copy-pasted. Now that I want to use them for Alt Styles too, I'm refactoring! 2024-09-30 16:21:47 -07:00			`.rainbow-pool-list`
			`list-style-type: none`
			`display: flex`
			`flex-wrap: wrap`
			`justify-content: center`
			`gap: .5em`

			`--preview-base-width: 150px`

			`> li`
			`width: var(--preview-base-width)`
			`max-width: calc(50% - .25em)`
			`min-width: 150px`
			`box-sizing: border-box`
			`text-align: center`

			`a`
			`display: block`
			`border-radius: 1em`
			`padding: .5em`
			`text-decoration: none`
			`background: white`
			`&:hover`
			`outline: 1px solid $module-border-color`
			`background: $module-bg-color`

			`.preview`
			`width: 100%`
			`height: auto`
			`aspect-ratio: 1 / 1`
			`margin-bottom: -1em`

			`.name`
			`background: inherit`
			`padding: .25em .5em`
			`border-radius: .5em`
			`margin: 0 auto`
			`position: relative`
			`z-index: 1`
Paginate Alt Styles, sort by most recent first-seen date 2024-09-30 17:35:18 -07:00
Add extra support info to Rainbow Pool pet types Easy-to-notice hints for which pet types need more labeling! 2024-10-04 19:24:40 -07:00			`.info`
			`font-size: .85em`
Improve pet type "Added" timestamp styles 2024-10-11 16:24:47 -07:00			`p`
			`margin-block: .25em`
Add extra support info to Rainbow Pool pet types Easy-to-notice hints for which pet types need more labeling! 2024-10-04 19:24:40 -07:00
Paginate Alt Styles, sort by most recent first-seen date 2024-09-30 17:35:18 -07:00			`.rainbow-pool-pagination`
			`margin-block: .5em`
			`display: flex`
			`justify-content: center`
			`gap: 1em`
Add "no results" output for Rainbow Pool filters with no results 2024-10-11 15:13:22 -07:00
			`.rainbow-pool-no-results`
			`margin-block: 1em`
			`text-align: center`
			`font-style: italic`