src/styles/_tasks.sass
.flamenco-box
	+container-box
	background-color: $white
	margin: 10px
	padding: 10px

	&.with-status
		border-top: thick solid $color-background-dark
		@include status-color-property(border-top-color, '', 'dark')

	span.item-name
		padding-left: 5px
		margin-top: 0
		color: $color-text-dark-secondary

	.item-description
		padding: 10px 5px
		color: $color-text-dark-primary

	.dropdown-toggle i
		margin: initial

	.dropdown-menu
		li
			display: flex
			height: 100%
			width: 100%
			padding: 0
			margin: 0

			&.divider
				height: 2px

			&.item-delete a:hover
				color: $color-danger

			a
				color: $color-text-dark-primary
				display: flex
				flex: 1
				padding: 10px 15px 10px 12px

				&:hover
					color: $primary
					text-decoration: none

	.table
		&.item-properties
			margin-top: 10px
			.table-body
				text-shadow: 1px 1px 0 white

				.table-row
					&:hover
						background-color: $color-background-light
					.table-cell
						padding: 0 10px
						vertical-align: bottom
						color: $color-text-dark-primary
						word-break: break-word
						line-height: 1.3em
						padding: 3px 10px
						font-family: monospace
						font-size: .9em

						@include status-color-property(color, '', 'dark')

						&:first-child
							width: 120px
							max-width: 200px
							text-align: right
							padding-right: 10px
							vertical-align: top
							color: black

					&:last-child .table-cell
						border-bottom: none


					&.properties-assignees
						.table-cell span
							display: block
					&[title]:not([title=""])
						cursor: help

		&.item-job-settings
			margin-top: 15px

.flamenco-box+.flamenco-box
	margin-top: 0

#task-list
	overflow-x: hidden

#task-add
	margin-left: auto
	font-size: .85em
	color: $color-primary

.status-indicator
	background-color: $color-background-dark
	height: 16px
	width: 16px
	min-width: 16px
	margin-left: 10px
	border-radius: 50%
	transition: all 100ms ease-in-out

.task-list-item
	color: $color-text-dark
	font-size: .8em
	font-family: monospace

	&:hover
		text-decoration: none
		color: $color-text-dark-primary
		background-color: $color-background-light

		.status-indicator
			transform: scale(1.2)

	&.active
		text-decoration: none
		background-color: $color-background-active
		box-shadow: inset 5px 0 0 $color-primary
		text-shadow: 1px 1px 0 white

		.status-indicator
			transform: scale(1.2)

	.status, .type, .worker
		display: inline-block
		margin-right: 10px
		text-transform: uppercase
		font-size: .8em
		text-decoration: none

	.type
		margin-left: auto

	.type, .worker
		color: $color-text-dark-secondary
		+text-overflow-ellipsis

	.worker
		min-width: 130px
		text-align: right

	.name
		padding: 2px 10px
		+text-overflow-ellipsis

	.shotname
		color: $color-text-dark-secondary
		margin-left: 10px
		padding-right: 10px
		position: relative
		+text-overflow-ellipsis
		&:after
			position: absolute
			width: 2px
			height: 2px
			right: 0
			border-radius: 50%
			bottom: 9px
			display: block
			content: ''
			border: thin solid $color-text-dark-hint

	@include status-color-property(background-color, ' .status-indicator', '')

option.invalid_task
	color: $color-danger
	background-color: hsl(hue($color-danger), 80%, 90%)

.task-list-header
	box-shadow: none
	a
		color: $color-text-dark
		+text-overflow-ellipsis
	a.task-project
		color: $color-text-dark-secondary
		margin-left: 10px

.input-group-separator
	margin: 10px 0
	border-top: thin solid $color-background

table.timing-table
	& td
		border: none
		padding: 0
