# -*- mode:fundamental; indent-tabs-mode:t; tab-width:4;  -*-
description
	name SpinDrops Skin
	# Dimensions in dp (the default unit for padding and such) and bitmaps are specified for this DPI.
	base-dpi 96
	# The skin also has graphics available in these DPI modes
	supported-dpi 96 144 192 240 288 384
colors
	black #000000
	white #ffffff
	red #ff0000
	grey #808080
	grey70 #b3b3b3
	silver #c0c0c0
	off-white #fefefe
	Foreground #ffffff
	Background #000000
	transparent #00000000
defaults
	spacing 5
	text-color off-white
	placeholder
		opacity 0.2
	disabled
		opacity 0.5
elements
	TBButton
		text-color off-white
		bitmap button90.png
		cut 17
		expand 7
		padding 6 8
		min-width 19
		min-height 10
		overrides
			element TBButtonInGroup
				condition: target: parent, property: skin, value: button_group
				condition: target: parent, property: axis, value: x
			element TBButton.pressed
				state pressed
			element TBButton.selected
				state selected
			element TBButton.hovered
				state hovered
	TBButton.selected
		clone TBButton
		bitmap button_pressed.png
		text-color red
		overrides
	TBButton.hovered
		clone TBButton
		text-color silver
		overrides
	TBButton.pressed
		bitmap button255.png
		text-color black
#		bitmap button_pressed.png
#		text-color off-white
		cut 17
		expand 7
		content-ofs-x 1
		content-ofs-y 1

	TBButton.flat
		text-color off-white
		padding 6 8
		children
			element TBButton.flat.hovered
				state hovered
			element TBButton.flat.pressed
				state pressed
	TBButton.flat.hovered
		bitmap button_flat_outline.png
		cut 15
		expand 6
	TBButton.flat.pressed
		bitmap button_flat_pressed.png
		cut 8

	# == TBButtonInGroup is not a widget. It's only used as override for TBButton under a "button_group" ====
	TBButtonInGroup
		bitmap button_grouped_x_middle_up.png
		cut 17
		expand 7
		padding 6 8
		overrides
			element TBButtonInGroup.first
				condition: target: prev sibling, property: skin, value: TBButton, test: !=
			element TBButtonInGroup.last
				condition: target: next sibling, property: skin, value: TBButton, test: !=
			element TBButtonInGroup.pressed
				state pressed
	TBButtonInGroup.pressed
		clone TBButtonInGroup
		bitmap button_grouped_x_middle_down.png
		content-ofs-x 1
		content-ofs-y 1
		overrides
	TBButtonInGroup.first
		clone TBButtonInGroup
		bitmap button_grouped_x_first_up.png
		overrides
			element TBButtonInGroup.first.pressed
				state pressed
	TBButtonInGroup.first.pressed
		clone TBButtonInGroup.pressed
		bitmap button_grouped_x_first_down.png
		overrides
	TBButtonInGroup.last
		clone TBButtonInGroup
		bitmap button_grouped_x_last_up.png
		overrides
			element TBButtonInGroup.last.pressed
				state pressed
	TBButtonInGroup.last.pressed
		clone TBButtonInGroup.pressed
		bitmap button_grouped_x_last_down.png
		overrides

	# == button_group is not a widget. It's specified on widgets that should group TBButton =======
	button_group
		spacing -1px

	# == TBSection skins ==========================================================================
	TBSection.layout
		spacing -1px
	TBSection.container
		bitmap TBSectionContainer.png
		type StretchBorder
		cut 11
		expand 6
		padding 10
	TBSectionHeader
		bitmap window_mover_bg_tile.png
		type Tile
		expand -1
		padding 3 16
		children
			element TBSectionHeader.icon_0
				condition: target: this, property: value, value: 0
				condition: target: this, property: capture, test: !=
			element TBSectionHeader.icon_1
				condition: target: this, property: value, value: 1
				condition: target: this, property: capture, test: !=
			element TBSectionHeader.icon_pressed
				condition: target: this, property: capture
		overlays
			element TBSectionHeader.overlay
				state all
	TBSectionHeader.overlay
		bitmap window_mover_overlay.png
		#type StretchBorder
		cut 16
		expand 3
	TBSectionHeader.icon_0
		bitmap toggle_section_icon_up.png
		type Image
		img-position-x 0
		img-ofs-x 4
	TBSectionHeader.icon_1
		bitmap toggle_section_icon_down.png
		type Image
		img-position-x 0
		img-ofs-x 4
	TBSectionHeader.icon_pressed
		bitmap toggle_section_icon_middle.png
		type Image
		img-position-x 0
		img-ofs-x 4

	# == TBTabContainer skins - Create strong overrides for the tab buttons four alignments ============
	TBTabContainer.rootlayout
		spacing -1px
	TBTabContainer.tablayout_x
		padding 0 10
	TBTabContainer.tablayout_y
		padding 10 0
	TBTabContainer.container
		clone TBContainer
	TBTabContainer.tab
		strong-overrides
			element TBTabContainer.tab_top
				condition: target: ancestors, property: align, value: top
			element TBTabContainer.tab_bottom
				condition: target: ancestors, property: align, value: bottom
			element TBTabContainer.tab_left
				condition: target: ancestors, property: align, value: left
			element TBTabContainer.tab_right
				condition: target: ancestors, property: align, value: right
	# == Top tab button =============================
	TBTabContainer.tab_top
		bitmap tab_button_top_inactive.png
		cut 12
		expand 6
		padding 6 6 3 6
		min-width 50
		overrides
			element TBTabContainer.tab_top.pressed
				state pressed
		children
			element tab_top_focus
				state focused
	tab_top_focus
		type StretchBorder
		bitmap focus_tabbutton_top.png
		cut 12
		expand 6
	TBTabContainer.tab_top.pressed
		bitmap tab_button_top_active.png
		cut 13
		expand 6
	# == Bottom tab button =============================
	TBTabContainer.tab_bottom
		bitmap tab_button_bottom_inactive.png
		cut 12
		expand 6
		padding 3 6 6 6
		min-width 50
		overrides
			element TBTabContainer.tab_bottom.pressed
				state pressed
		children
			element tab_bottom_focus
				state focused
	tab_bottom_focus
		clone tab_top_focus
		flip-y 1
	TBTabContainer.tab_bottom.pressed
		bitmap tab_button_bottom_active.png
		cut 13
		expand 6
	# == Left tab button =============================
	TBTabContainer.tab_left
		bitmap tab_button_left_inactive.png
		cut 12
		expand 6
		padding 6 3 6 6
		min-width 50
		overrides
			element TBTabContainer.tab_left.pressed
				state pressed
		children
			element tab_left_focus
				state focused
	tab_left_focus
		type StretchBorder
		bitmap focus_tabbutton_left.png
		cut 12
		expand 6
	TBTabContainer.tab_left.pressed
		bitmap tab_button_left_active.png
		cut 13
		expand 6
	# == Right tab button =============================
	TBTabContainer.tab_right
		bitmap tab_button_right_inactive.png
		cut 12
		expand 6
		padding 6 6 6 3
		min-width 50
		overrides
			element TBTabContainer.tab_right.pressed
				state pressed
		children
			element tab_right_focus
				state focused
	tab_right_focus
		clone tab_left_focus
		flip-x 1
	TBTabContainer.tab_right.pressed
		bitmap tab_button_right_active.png
		cut 13
		expand 6

	# == TBEditField skin. Create strong overrides for the search type to add magnifier glass icon =====
	TBEditField.selection
		cut 2
		bitmap selection.png
	TBEditField
		bitmap editfield.png
		cut 12
		expand 4
		padding 4
		strong-overrides
			element TBEditField.search
				condition: target: this, property: edit-type, value: "search"

	TBEditField.search
		clone TBEditField
		padding 4 4 4 24
		min-width 50
		children
			element TBEditField.search.icon
	TBEditField.search.icon
		bitmap search.png
		type Image
		img-position-x 0
		img-ofs-x 5

	TBEditField.caret
		cut 3
		bitmap selection.png

	# == TBWindow skin =================================================================================
	TBWindow
		bitmap window.png
		text-color white
		cut 16
		expand 12
		padding 10
		overrides
			element TBWindow.selected
				state selected
	TBWindow.selected
		bitmap window_active.png
		text-color white
		cut 16
		expand 12
	TBWindow.close
		bitmap window_close.png
		type Image
		min-width 20
		min-height 20
		children
			element TBWindow.close.pressed
				state pressed
	TBWindow.close.pressed
		bitmap window_close_pressed.png
		type Image
		min-width 20
		min-height 20
	TBWindow.mover
		text-color grey70
		bitmap window_mover_bg_tile.png
		type Tile
		expand -1
		padding 4
		overrides
			element TBWindow.mover.active
				state selected
		children
			element TBWindow.mover.overlay
				state all
	TBWindow.mover.overlay
		bitmap window_mover_overlay.png
		cut 12
		expand 3
	TBWindow.mover.active
		clone TBWindow.mover
		text-color off-white
		overrides
		overlays
		children

	# == Misc skins ====================================================================================
	TBContainer
#		bitmap container.png
		bitmap empty.png
		type StretchBorder
		cut 12
		expand 6
		padding 10
	NormalItem
		spacing 0
		width 0
		height 0
	SelectableItem
		spacing 0
		width 15
		height 15
		bitmap checkbox.png
		children
			element SelectableItem.selected
				state selected
	SelectableItem.selected
		spacing 0
		width 15
		height 15
		bitmap checkbox_mark.png
	TBCheckBox
		bitmap checkbox.png
		cut 16
		expand 6
		children
			element TBCheckBox.selected
				state selected
			element TBCheckBox.pressed
				state pressed
	TBCheckBox.selected
		bitmap checkbox_mark.png
		type Image
		expand 6
	TBCheckBox.pressed
		bitmap checkbox_pressed.png
		type Image
	TBRadioButton
		bitmap radio.png
		cut 19
		expand 7
		children
			element TBRadioButton.selected
				state selected
			element TBRadioButton.pressed
				state pressed
	TBRadioButton.selected
		bitmap radio_mark.png
		type Image
		expand 7
	TBRadioButton.pressed
		bitmap radio_pressed.png
		type Image
		expand 7
	TBLayout.fadeout_x
		bitmap fadeout_x.png
	TBLayout.fadeout_y
		bitmap fadeout_y.png
	TBSelectList
		clone TBEditField
		padding 2
	TBSelectDropdown
		clone TBButton
	TBSelectDropdown.arrow
		clone arrow.down
		bitmap-color black
		min-width 0
		min-height 0
		background-color transparent
	TBSelectDropdown.window
		clone TBPopupWindow
	TBPopupWindow
		clone TBWindow
		padding 2
#		bitmap window_frame.png
	TBMenuWindow
		clone TBPopupWindow
#	TBSelectItem
#		padding 4 10
#		children
#			element TBSelectItem.hovered
#				state hovered
#			element TBSelectItem.selected
#				state selected
#	TBSelectItem.selected
#		cut 7
#		bitmap item_selected.png
#	TBSelectItem.hovered
#		cut 7
#		bitmap item_hover.png
#	TBSelectItem.separator
#		clone TBSeparator

	TBSeparator
		bitmap item_separator_x.png
		type Stretch Image
		overrides
			element TBSeparator.y
				condition: target: parent, property: axis, value: x
	TBSeparator.y
		bitmap item_separator_y.png
		type Stretch Image

	TBScrollBarBgX
		bitmap scroll_bg_x.png
		cut 11
		expand 5
	TBScrollBarFgX
		bitmap scroll_fg_x.png
		cut 11
		expand 5
	TBScrollBarBgY
		bitmap scroll_bg_y.png
		cut 11
		expand 5
	TBScrollBarFgY
		bitmap scroll_fg_y.png
		cut 11
		expand 5

	TBSliderFgX
		bitmap slider_handle_255.png
		expand 5

	TBSliderBgY
		bitmap slider_bg_y.png
		cut 9
		min-width 19
		max-width 19
		min-height 50
	TBSliderFgY
		clone TBSliderFgX

	TBResizer
		bitmap resizer.png
	MainFrameResizer
		bitmap resizer.png
		bitmap-color Foreground
	TBInlineSelect
		max-width 110
	TBDimmer
		background-color #00000088
		overrides
			element TBDimmer.disabled
				state disabled
	TBDimmer.disabled
		background-color transparent

	TBProgressSpinner
		min-width 28
		min-height 28
	TBProgressSpinner.fg
		bitmap progress_spinner_strip.png

	# The TBList header is always disabled, thus gets slightly less opacity default.
	TBList.header

	arrow.left: type: Image, bitmap: arrow_left.png, min-width: 5, min-height: 10
	arrow.right: type: Image, bitmap: arrow_right.png, min-width: 5, min-height: 10
	arrow.up: type: Image, bitmap: arrow_up.png, min-width: 10, min-height: 5
	arrow.down: type: Image, bitmap: arrow_down.png, min-width: 10, min-height: 5

	generic_focus
		bitmap focus_r4.png
		cut 11
		expand 4

#
# Customization starts here:
#
	Foreground
		background-color Foreground
	Red
		background-color #ff0000
	DetailsBox
		min-height 20
		min-width 100
		padding 5
	FingerCircle
		bitmap TouchRing.png
		overrides
			element FingerCircle.pressed
				state pressed
	FingerCircle.pressed
		bitmap TouchRingPressed.png

	OperatorWidget
		text-color Foreground
		cut 0
		expand 0
		padding 0
	TBSelectItem
		spacing 1
		text-color black
		bitmap button255.png
		cut 17
		expand 7
		padding 6 8
		overrides
			element TBSelectItem.selected
				state selected
			element TBSelectItem.hovered
				state hovered

	RepeatCheck
		overrides
			element RepeatCheck.selected
				state selected
		bitmap PlayControlIcons/Icon_no_repeat.png
	RepeatCheck.selected
		bitmap PlayControlIcons/Icon_repeat.png

	TBSelectItem.selected
		text-color white
		cut 7
		bitmap item0.png
	TBSelectItem.hovered
		cut 7
		bitmap item90.png

	TBSelectItem.separator
		bitmap item_separator_x.png
		min-height 6
		type Stretch Image

	TBTimelineBgX
		bitmap slider_bg_x_255.png
		bitmap-color red
		cut 9
		min-height 19
		max-height 19
		min-width 50
	TBSliderHandle255
		expand 2
		bitmap slider_handle_255.png
		bitmap-color Foreground
	RootContainer
		cut 0
		expand 0
		padding 0
	PlayControlButton
		max-width 27
		max-height 27
		min-width 27
		min-height 27
	PlayControlSpacer
		width 15
		min-width -2
	timewarp_value_field
		padding -12 0 0 0
	SequenceBox
		padding -1 88 0 88
	seqWidPad
		padding 0 1 # adjusted programmatically in SingleFrame
	TimeSlider
		min-height 19
		max-height 19
		min-width 50
	TBSliderBgX
		bitmap slider_bg_x_255.png
		cut 9
		min-height 19
		max-height 19
		min-width 50
	Separator
# Used in EditParamWindow.tb.txt by id:EditParamSeparator
		bitmap slider_bg_x_255.png
		cut 9
		min-height 19

	PrOpWindow
		height 150

	Square255
		min-width 27
		min-height 27
		background-color white
		text-color black
		padding 6 0
		overrides
			element Square200.selected
				state selected

	Square200.pressed
		background-color #C8C8C8
		text-color black

	Square200.selected
		background-color #5A5A5A
		text-color white

	ButtonSquare255
		clone Square255
		overrides
			element Square200.pressed
				state pressed
			element Square200.selected
				state selected
			element Square255.disabled
				state disabled

	Square255.disabled
		background-color white
		text-color #BBBBBB
		opacity 1

	ButtonSquare255Light
		clone ButtonSquare255
		overrides
			element Square200Light
				state selected
			element Square200.pressed
				state pressed

	Rect3x255
		clone Square255
		min-width 83

	RectLarge255
		clone Square255
		min-width 251

	Square90
		clone Square255
		background-color #5A5A5A
		text-color white

	Square200
		min-width 27
		min-height 27
		background-color #C8C8C8
		text-color black
		padding 6 0
		overrides
			element Square200.selected
				state selected

	ButtonSquare200
		clone Square200
		overrides
			element Square200.pressed
				state pressed
			element Square200.disabled
				state disabled

	Square200.disabled
		background-color #C8C8C8
		text-color white
		opacity 1

	Rect3x200
		clone Square200
		min-width 83

	Rect2x200
		clone Square200
		min-width 40

	ButtonRect3x200
		clone ButtonSquare200
		min-width 83

	Square200Light
		min-width 27
		min-height 27
		background-color #C8C8C8
		text-color white
		padding 6 0

	Square200W
		min-width 27
		min-height 27
		background-color #C8C8C8
		text-color white
		padding 6 0
		overrides
			element Square200.selected
				state selected
	Rect3x200W
		clone Square200W
		min-width 83

	ButtonSquare200W
		clone Square200W
		overrides
			element Square255.pressed
				state pressed
			element Square255.disabled
				state disabled
	SETEditWindow
		bitmap SETEditwindow.png
		cut 16
		expand 12
		padding 4
