MAL Theme Sass v1.2.sass

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500) //fonts
@import url(https://www.dropbox.com/s/rpt1edwhm04sfa5/trajan-font.css?raw=1)

$bg-image: 'http://i.imgur.com/lK98stL.jpg'
$bg-size: contain
$bg-pos: bottom left
$list-on-right: true

$font-main: 'Roboto', sans-serif
$font-heading: 'Trajan', serif

$color-head: #F31F1F
$color-footer: #51464B
$color-border: #BBBAB7
$color-main: #4F5E82
$color-secondary: #F1D8D0
$text-head: #C59292
$text-main: #212121
$link-color: #DC1F1F
$status-color: #FAF4F7

=drop-shadow($h, $v, $b, $c)
	filter: 		drop-shadow($h $v $b $c)
	-webkit-filter: drop-shadow($h $v $b $c)

=box-shadow($h, $v, $b, $s, $c)
	box-shadow: 		$h $v $b $s $c
	-webkit-box-shadow: $h $v $b $s $c

/* End defining start rules */

::-moz-selection, ::selection
	background-color: $color-secondary
	color: $color-main

.hover-info //extension fix
	z-index: 0
	background: none
	box-shadow: none
	border: none !important

body
	background-image: url($bg-image)
	background-attachment: fixed
	background-position: $bg-pos
	background-repeat: no-repeat
	background-size: $bg-size
	font-family: $font-main

a, a:hover
	color: $text-main

.header
	@if $list-on-right == true
		margin-right: 100px
	@else
		margin-left: 100px
	color: $color-head
	.header-menu
		a
			color: $color-head
			font-family: $font-heading
		.btn-menu
			font-size: 20px
			font-family: $font-heading
	.header-title
		+drop-shadow(0, 0, 5px, darken($color-head, 10%))
		padding: 10px
		background-position: center

.status-menu-container
	background: none
	border: none
	.status-menu
		.status-button
			color: lighten($text-head, 9%)
			font-weight: 600
			font-family: $font-heading
			transition: color .1s linear
			font-size: 1.7em
			&.on
				color: $text-head
			&:hover
				color: $text-head
			&:after
				display: none
	&.fixed
		background-color: $color-secondary
		border-radius: 0 0 10px 10px
		border: 1px solid $color-border
		border-top: none
		height: 53px
		.status-menu a
			color: lighten($text-head, 9%)
			padding-top: 2px
			&.on
				color: $text-head
				&:after
					display: none
	.search-container #search-button
		color: $text-head

.list-container
	background: none
	border: none
	@if $list-on-right == true
		margin-right: 100px
	@else
		margin-left: 100px
	.list-block
		margin-bottom: 30px
		margin-top: 28px
		.list-unit
			border: 1px solid $color-border
			border-radius: 10px
			+box-shadow(0, 0, 10px, 0, #b6b6b6)
			.list-status-title
				background-color: $color-secondary
				border-radius: 10px 10px 0 0
				.text
					color: lighten($text-head, 1%)
					font-family: $font-heading
					font-size: 2.5em
				.stats a
					color: lighten($text-head, 1%)
					font-family: $font-main
			&:not(.all_anime)
				.status
					display: none
			.list-stats
				background-color: $color-secondary
				font-size: 1em
				color: $text-head
			.list-table
				border: none
				.list-table-header
					border-bottom: 1px solid $color-border
					.header-title
						background: $color-secondary
						border: none
						color: $text-head
						font-size: 1.1em
						font-weight: 500
						&.rated
							width: 50px
						&.started
							width: 90px
						&.finished
							width: 100px
						&.tags
							width: 160px
						&.progress
							width: 70px
						&.score
							width: 40px
						&.status
							width: 0
						&.image
							width: 50px
						.link
							font-size: 1.1em
							color: lighten($text-head, 1%)
				.list-table-data
					.data
						.link
							font-weight: 500
						border-bottom: none
						&:not(.tags)
							font-size: 1.15em
						.rewatching, .rereading, .content-status
							color: $status-color
					.tags .edit, .data-title .add-edit-more a
						color: $link-color
				.list-item
					background-color: lighten($color-main, 37%)
					color: $text-main
					transition: background-color .1s linear
					border-bottom: 1px solid $color-border
					&:hover
						background-color: lighten($color-secondary, 2%) !important
					&:nth-last-of-type(2n+1)
						background-color: lighten($color-main, 27%)
			.loading-space
				background-color: $color-secondary
				margin: 0
				height: 25px
				border-radius: 0 0 10px 10px

.list-menu-float
	border: 1px solid $color-border
	border-left: none
	.icon-menu
		background-color: $color-main
		svg.icon
			fill: #fff
		&:hover
			svg.icon
				fill: $color-main
			.text
				color: $color-main
				font-family: $font-main
		&:not(.profile):hover
			background-color: $color-secondary
		&.setting:hover .text
			.link-list-setting, .link-style-setting
				background-color: $color-secondary
				color: $color-main
				border: none

.fa-plus-circle:before
	content: "" !important

#loading-spinner
	color: $text-head
	margin-top: 4px
	font-size: 17px

#footer-block
	background-color: $color-footer
	border-top: 1px solid $color-border
	font-family: $font-main