src/styles/_app_base.sass
body
	background-color: $color-background-light
	bottom: 0
	left: 0
	right: 0
	position: absolute // allow columns/errors to fill the whole page
	top: 0

	&[data-context="dashboard"]
		nav.sidebar .navbar-item.flamenco
			+sidebar-button-active
	&[data-context="task"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.tasks
			+sidebar-button-active
	&[data-context="job"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.jobs
			+sidebar-button-active
	&[data-context="archive"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.archive
			+sidebar-button-active
	&[data-context="managers"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.managers
			+sidebar-button-active

nav.sidebar
	a.navbar-item
		&.tasks, &.jobs, &.managers, &.archive
			text-transform: initial
			font-size: .8em

	.dropdown-menu
		font-size: initial

.input-group
	width: 100%
	display: flex
	align-items: center

	label
		padding-right: 10px
		min-width: 80px
		white-space: nowrap

	&.select_multiple
		margin-bottom: 10px

.input-group
	input, textarea, select
		margin-top: 10px
		margin-bottom: 10px
		width: 100%

	button
		&#item-save
			+button($color-success, 3px)

.btn
	+button($color-text-dark-primary, 3px, false)
	+text-overflow-ellipsis

	&.dropdown-toggle
		padding-right: 10px
.btn-danger
	+button($color-danger, 3px, false)
.btn-success
	+button($color-success, 3px, false)

#status-bar
	position: fixed
	bottom: 10px
	left: 60px
	padding: 5px 10px
	background-color: black
	border-radius: 2px
	z-index: 99

/* Flamenco specific table tweaks */
.col_header
	box-shadow: inset -1px 0 $color-background

#col_main
	&.manager-index
		width: 33%

#col_main-overlay
	position: absolute
	z-index: 2
	top: 0
	left: 0
	right: 0
	bottom: 0
	color: $color-text-dark-secondary
	background-color: $color-background
	opacity: 0
	visibility: hidden
	overflow: auto

	&.active
		opacity: 1
		visibility: visible

	#col_main-overlay-close
		position: absolute
		z-index: 2
		top: 0
		right: 0
		padding: 10px

		&:hover
			color: $color-primary
			cursor: pointer

.item-list
	font-size: .9em
	overflow-x: auto

	.table
		background-color: $white

	.table-cell
		&.item-status
			width: 5px
			height: 100%
			border-bottom: none

		&.item-priority
			text-align: center

	.table-head
		.table-cell
			&.highlight .collapser
				color: $color-primary-dark

			&.item-status
				min-width: 60px

			&.item-name
				padding-left: 5px

			span.collapser
				cursor: pointer
				width: 100%
				display: inline-block
				padding: 5px

			&:hover
				span.collapser
					color: $color-primary

	.table-body
		.table-row
			@include status-color-property(background-color, ' .item-status a', 'dark')
			box-shadow: inset 1px 1px 0 rgba(black, .05)

			&:hover
				background-color: $color-background-light

				.table-cell
					a
						color: $primary
						text-decoration: none

					&.item-status a
						color: $white
						opacity: .7

			/* Dim a bit the 'completed' label, green background is enough. */
			&.status-completed .item-status a
				color: rgba($white, .6)

		.table-cell
			font-family: monospace
			border: none

			&.active
				background-color: $color-background

			&.highlight
				background-color: rgba(white, .5)

				&.task-type a:before
					transform: translate(-50%, -50%) scale(1.2)

			&.item-name
				position: relative
				height: 100%

				a
					display: flex
					padding: 4px 5px 3px 10px
					color: $color-text-dark-primary

					span
						margin: auto 0
						line-height: initial

			&.item-type, &.item-manager
				a
					+text-overflow-ellipsis
					color: $color-text-dark-primary

			&.item-priority a, &.item-manager a
				color: $color-text-dark-secondary

			&.item-status
				@extend .text-center

				a
					background-color: $color-text-dark-secondary // fallback, gets overriden by individual status
					color: $color-text-light
					display: block
					padding: 2px 10px
					text-transform: uppercase


.action-result-panel
	p
		padding: 5px 15px


.item-list-header
	a
		color: $color-text-dark
		+text-overflow-ellipsis
	a.item-project
		color: $color-text-dark-secondary
		margin: 0 10px

.progress-bar
	@include status-color-property(background-color, '', 'dark')

.flamenco-box
	.table-body
		.table-row
			&.properties-variables
				.table-cell
					&.variable-key
						white-space: nowrap
					&.variable-direction
						cursor: help
						font-size: large !important
						vertical-align: top !important
			&.odd
				background-color: lighten($color-background, 7%)
			&.even
				background-color: lighten($color-background, 8%)

	.item-id
		padding: 8px
		margin-left: 10px
		width: 40px
		border: thin solid transparent
		background-color: white
		color: $color-text-dark-secondary
		box-shadow: none
		border-color: $color-text-dark-hint

		&:hover
			color: $color-text-dark-primary
			border-color: $color-text-dark-primary

	.projects-list-empty
		color: $color-text-dark-secondary


#item-details
	overflow-x: hidden

	.item-details-empty
		display: flex
		align-items: center
		justify-content: center
		width: 100%
		height: 100%
		color: rgba($color-text-dark-hint, .5)
		cursor: default
		padding: 15px 10px
		font:
			size: 2em
			weight: 100


#item-view-feed
	padding: 10px
	color: $color-text-dark-primary
	pre
		margin: 15px auto

	#comments-container
		margin-top: 0

	#col_main
		width: 100%


#item-action-panel
	padding: 0 10px
	margin: 10px auto
	width: 100%
	display: flex
	justify-content: space-between
	align-items: center

	.btn
		font-size: .8em
		margin: 5px


#item-log
	margin: 10px
	border-radius: 3px
	background-color: white
	position: relative

.item-log-header
	padding: 5px 0 4px 5px
	color: $color-text-dark-secondary
	box-shadow: 0 5px 15px rgba(black, .1)

	.header-title
		padding-left: 5px

	.download-log
		padding: 5px
		font-size: .9em
		color: $color-text-dark-secondary

		&:hover
			color: $color-primary

.item-log-content
	position: relative
	overflow: auto
	width: 100%
	cursor: default

.item-log-navigation, .task-navigation
	float: right
	a.page-navigate, span.log-page
		padding: 7px 10px 4px 10px
		user-select: none
		text-transform: uppercase
		font-size: .8em
		color: $color-text-dark

	span.page
		cursor: default
		padding: 0 15px
		color: $color-text-dark-secondary

	a.page-navigate
		text-decoration: none
		border-bottom: 2px solid $color-text-dark-hint
		&:hover
			color: $color-primary
			border-color: $color-primary

		&.disabled
			cursor: default
			pointer-events: none

		&.disabled
			color: $color-text-dark-hint
			border-bottom-color: rgba(black, .1)
		&.active
			color: $color-primary
			border-bottom: 2px solid $color-primary
			font-weight: bold

	.item-log-loader
		padding: 20px
		width: 100%
		display: flex
		align-items: center
		justify-content: center
		font-size: 1.2em
		color: $color-text-dark-hint

		span
			margin-right: 15px
			display: inline-block

.last-log-lines
	padding: 1mm 0

.item-log-line, .last-log-lines
	color: $color-text-dark-primary
	font:
		family: monospace
		size: .8em
	line-height: 1.2em

.item-log-line
	position: relative
	margin: 0
	padding: 0 10px 0 5px

	white-space: nowrap
	width: 100%

	&:hover
		color: black

	&:first-child
		padding-top: 5px

	&.log-warning
		color: darken($color-warning, 25%)
	&.log-error
		color: $color-danger
