pages/anime/anime.scarlet

.anime
	vertical
	width 100%
	max-width 1700px
	margin 0 auto

.anime-main-column
	vertical
	flex 1

.anime-side-column
	sidebar

> 1250px
	.anime
		horizontal

	.anime-side-column
		sidebar-medium

> 1400px
	.anime-side-column
		sidebar-big

.anime-header
	vertical

.anime-title
	text-align center
	margin-bottom 0.5rem

> 800px
	.anime-header
		horizontal
		padding-bottom content-padding
		border-bottom 1px solid rgba(0, 0, 0, 0.05)

	.anime-title
		text-align left

	.anime-alternative-title
		text-align left

	.anime-summary-footer-container
		vertical
		flex 1
		justify-content flex-end
		align-items flex-end

	.anime-summary-footer
		width 100%
		display flex
		justify-content space-between
		align-items center

		button,
		.button
			margin 0.25rem

.anime-info-table
	margin 0

.anime-info-value
	text-align right

.anime-soundtracks
	vertical
	margin-top 1rem

	.soundtrack
		flex-basis auto
		// 	vertical
		// 	flex-grow 1
		// 	margin-bottom 0.5rem
		// 	min-width 200px

	.soundtrack-anime-image
		display none

// 	.video-container
// 		box-shadow shadow-light

> 500px
	.anime-soundtracks
		horizontal-wrap
		justify-content flex-start
		margin-top 0

		.soundtrack
			max-width 200px

		.soundtrack-content
			min-height 112px
			height 112px

		.soundtrack-play-button
			width 48px
			height 48px
			font-size 1rem

.anime-section
	margin-top 1rem

	:first-child
		margin-top 0 !important

.anime-section-name
	font-weight bold

.anime-image-container
	vertical
	justify-content flex-start
	align-items center

.anime-start-date
	font-size 0.7rem
	line-height 1.7em
	opacity 0.65
	margin-top 0.5rem

.anime-cover-image
	width anime-image-large-width
	height anime-image-large-height
	border-radius ui-element-border-radius

	default-transition
	object-fit cover

	saturate-up
	shadow-up

.anime-summary
	// ...

.anime-info
	vertical
	flex 1

.space
	width content-padding
	height content-padding

.anime-alternative-title
	font-size 0.9em
	margin-top 0
	margin-bottom 0.5rem
	text-align center
	font-weight normal
	line-height content-line-height

	.japanese
		color anime-alternative-title-color !important

.anime-actions
	horizontal
	justify-content center

	// Action button margin
	// margin calc(content-padding - 0.5rem) -0.5rem

	// Setting z-index requires setting a background as well
	// z-index 10

// > 1450px
// 	.anime-actions
// 		position fixed
// 		bottom 0
// 		right content-padding

// .anime-rating-categories
// 	horizontal
// 	width 100%

// .anime-rating-category
// 	ui-element
// 	flex 1
// 	text-align center
// 	margin 0.5rem

// .anime-rating-category-name
// 	font-size 1.3rem
// 	margin-top 0.5rem

// .anime-rating
// 	margin 0.5rem
// 	letter-spacing 3px
// 	font-size 1.3rem
// 	color link-color

.anime-widget
	margin-top 0.6rem
	margin-bottom 0.4rem

< 800px
	.anime-rating-categories
		vertical

.anime-friends
	.user-avatars
		justify-content flex-start

.relations
	horizontal-wrap

.relation
	vertical
	align-items center
	padding 0.5rem

.relation-type
	font-size 0.7rem
	margin-top 0.1rem

.relation-image
	width 100px
	height 141px
	border-radius ui-element-border-radius
	object-fit cover
	default-transition
	shadow-up
Redesign 2017-11-03 17:10:31 +00:00			`.anime`
Redesign 2017-11-04 07:45:39 +00:00			`vertical`
Fixed anime width bug 2018-03-09 00:06:43 +00:00			`width 100%`
Optimize anime page for 3440x1400 screens 2018-03-08 15:25:22 +00:00			`max-width 1700px`
			`margin 0 auto`
Redesign 2017-11-04 07:45:39 +00:00
			`.anime-main-column`
			`vertical`
			`flex 1`

			`.anime-side-column`
Simplified sidebar creation 2017-11-29 15:29:30 +00:00			`sidebar`
Redesign 2017-11-04 07:45:39 +00:00
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00			`> 1250px`
Redesign 2017-11-04 07:45:39 +00:00			`.anime`
			`horizontal`

			`.anime-side-column`
Simplified sidebar creation 2017-11-29 15:29:30 +00:00			`sidebar-medium`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00
			`> 1400px`
			`.anime-side-column`
Simplified sidebar creation 2017-11-29 15:29:30 +00:00			`sidebar-big`
Redesign 2017-11-03 17:10:31 +00:00
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.anime-header`
Redesign 2017-11-03 17:10:31 +00:00			`vertical`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
Redesign 2017-11-03 17:10:31 +00:00			`.anime-title`
			`text-align center`
			`margin-bottom 0.5rem`

			`> 800px`
Everything is scarlet now 2016-12-01 15:27:53 +00:00			`.anime-header`
Redesign 2017-11-03 17:10:31 +00:00			`horizontal`
Redesign 2017-11-05 10:02:31 +00:00			`padding-bottom content-padding`
			`border-bottom 1px solid rgba(0, 0, 0, 0.05)`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00
Redesign 2017-11-03 17:10:31 +00:00			`.anime-title`
			`text-align left`
Everything is scarlet now 2016-12-01 15:27:53 +00:00
Redesign 2017-11-04 07:45:39 +00:00			`.anime-alternative-title`
			`text-align left`

Style improvements for genres 2017-11-29 23:54:09 +00:00			`.anime-summary-footer-container`
			`vertical`
			`flex 1`
			`justify-content flex-end`
			`align-items flex-end`

Added genres to anime pages 2017-11-29 23:48:02 +00:00			`.anime-summary-footer`
Style improvements for genres 2017-11-29 23:54:09 +00:00			`width 100%`
Added genres to anime pages 2017-11-29 23:48:02 +00:00			`display flex`
			`justify-content space-between`
			`align-items center`
Redesign 2017-11-05 10:02:31 +00:00
			`button,`
			`.button`
Style improvements for genres 2017-11-29 23:54:09 +00:00			`margin 0.25rem`
Redesign 2017-11-05 10:02:31 +00:00
Redesign 2017-11-04 07:45:39 +00:00			`.anime-info-table`
			`margin 0`
Redesign 2017-11-04 10:09:19 +00:00
			`.anime-info-value`
			`text-align right`
Redesign 2017-11-04 07:45:39 +00:00
Redesign 2017-11-04 16:11:47 +00:00			`.anime-soundtracks`
			`vertical`
			`margin-top 1rem`

Use new player on anime pages 2018-03-12 18:02:23 +00:00			`.soundtrack`
			`flex-basis auto`
			`// vertical`
			`// flex-grow 1`
			`// margin-bottom 0.5rem`
			`// min-width 200px`

			`.soundtrack-anime-image`
			`display none`
Redesign 2017-11-04 16:11:47 +00:00
Use new player on anime pages 2018-03-12 18:02:23 +00:00			`// .video-container`
			`// box-shadow shadow-light`
Style improvements 2017-12-04 20:58:55 +00:00
Redesign 2017-11-04 16:11:47 +00:00			`> 500px`
			`.anime-soundtracks`
			`horizontal-wrap`
			`justify-content flex-start`
			`margin-top 0`

Use new player on anime pages 2018-03-12 18:02:23 +00:00			`.soundtrack`
			`max-width 200px`
Redesign 2017-11-04 16:11:47 +00:00
Use new player on anime pages 2018-03-12 18:02:23 +00:00			`.soundtrack-content`
			`min-height 112px`
			`height 112px`
Redesign 2017-11-04 16:11:47 +00:00
Use new player on anime pages 2018-03-12 18:02:23 +00:00			`.soundtrack-play-button`
			`width 48px`
			`height 48px`
			`font-size 1rem`
Redesign 2017-11-04 16:11:47 +00:00
Redesign 2017-11-04 07:45:39 +00:00			`.anime-section`
			`margin-top 1rem`

			`:first-child`
			`margin-top 0 !important`

Everything is scarlet now 2016-12-01 15:27:53 +00:00			`.anime-section-name`
			`font-weight bold`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.anime-image-container`
Implemented anime relations 2017-10-17 14:58:28 +00:00			`vertical`
			`justify-content flex-start`
			`align-items center`

			`.anime-start-date`
			`font-size 0.7rem`
			`line-height 1.7em`
			`opacity 0.65`
			`margin-top 0.5rem`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
Improved scarlet styles 2016-11-29 15:50:50 +00:00			`.anime-cover-image`
Use variables for image sizes 2018-03-20 03:05:54 +00:00			`width anime-image-large-width`
			`height anime-image-large-height`
Added Hall of Fame 2018-03-27 19:08:26 +00:00			`border-radius ui-element-border-radius`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00
Improved styles 2016-11-30 15:29:36 +00:00			`default-transition`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`object-fit cover`

Improved styles 2016-11-30 12:33:11 +00:00			`saturate-up`
			`shadow-up`
Redesign 2017-11-03 17:10:31 +00:00
			`.anime-summary`
			`// ...`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.anime-info`
Using mixins now 2016-11-29 03:37:36 +00:00			`vertical`
Improved styles 2016-11-30 12:33:11 +00:00			`flex 1`
Improved styles 2016-11-30 15:29:36 +00:00
			`.space`
			`width content-padding`
			`height content-padding`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
			`.anime-alternative-title`
			`font-size 0.9em`
Improved meta data 2017-07-06 19:38:19 +00:00			`margin-top 0`
Improved anime page styles 2016-12-02 06:31:09 +00:00			`margin-bottom 0.5rem`
Redesign 2017-11-04 07:45:39 +00:00			`text-align center`
Improved meta data 2017-07-06 19:38:19 +00:00			`font-weight normal`
			`line-height content-line-height`
Smaller font for laptop sizes 2017-11-08 14:50:48 +00:00
Japanese title tokenizer 2017-07-11 14:54:17 +00:00			`.japanese`
Redesign 2017-11-04 07:45:39 +00:00			`color anime-alternative-title-color !important`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
Implemented anime list basics 2017-06-08 19:54:39 +00:00			`.anime-actions`
Improved search results 2017-11-05 08:55:42 +00:00			`horizontal`
Redesign 2017-11-05 10:02:31 +00:00			`justify-content center`
Redesign 2017-11-03 17:10:31 +00:00
Improved search results 2017-11-05 08:55:42 +00:00			`// Action button margin`
Redesign 2017-11-04 07:45:39 +00:00			`// margin calc(content-padding - 0.5rem) -0.5rem`
General improvements 2017-06-20 12:16:23 +00:00
Improved search results 2017-11-05 08:55:42 +00:00			`// Setting z-index requires setting a background as well`
Redesign 2017-11-04 07:45:39 +00:00			`// z-index 10`
Implemented anime list basics 2017-06-08 19:54:39 +00:00
Improved search results 2017-11-05 08:55:42 +00:00			`// > 1450px`
			`// .anime-actions`
			`// position fixed`
			`// bottom 0`
			`// right content-padding`
Implemented anime list basics 2017-06-08 19:54:39 +00:00
Redesign 2017-11-04 10:09:19 +00:00			`// .anime-rating-categories`
			`// horizontal`
			`// width 100%`

			`// .anime-rating-category`
			`// ui-element`
			`// flex 1`
			`// text-align center`
			`// margin 0.5rem`

			`// .anime-rating-category-name`
			`// font-size 1.3rem`
			`// margin-top 0.5rem`

			`// .anime-rating`
			`// margin 0.5rem`
			`// letter-spacing 3px`
			`// font-size 1.3rem`
			`// color link-color`
Implemented ratings UI 2017-06-08 09:51:34 +00:00
Added stylish mountable effect 2017-06-20 18:13:04 +00:00			`.anime-widget`
			`margin-top 0.6rem`
			`margin-bottom 0.4rem`

Implemented ratings UI 2017-06-08 09:51:34 +00:00			`< 800px`
			`.anime-rating-categories`
			`vertical`

Show friends on anime 2017-07-21 09:25:53 +00:00			`.anime-friends`
			`.user-avatars`
			`justify-content flex-start`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.relations`
Using mixins now 2016-11-29 03:37:36 +00:00			`horizontal-wrap`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
			`.relation`
Using mixins now 2016-11-29 03:37:36 +00:00			`vertical`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`align-items center`
			`padding 0.5rem`

Using mixins now 2016-11-29 03:37:36 +00:00			`.relation-type`
			`font-size 0.7rem`
			`margin-top 0.1rem`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.relation-image`
			`width 100px`
Improved styles 2016-11-30 15:29:36 +00:00			`height 141px`
Added Hall of Fame 2018-03-27 19:08:26 +00:00			`border-radius ui-element-border-radius`
Improved styles 2016-11-30 15:29:36 +00:00			`object-fit cover`
			`default-transition`
Everything is scarlet now 2016-12-01 15:27:53 +00:00			`shadow-up`