eepp/bin/assets/layouts/test.css

@font-face {
	font-family: "OpenSans Regular";
	src: url("file://assets/fonts/OpenSans-Regular.ttf");
}

:root {
	--font-color: #E6E6E6FF;
}

/* Global rules */
* {
	color: var(--font-color);
	shadow-color: #32323296;
	selected-color: #000;
	selection-back-color: #969696FF;
}

TabWidget {
	tab-separation: -1dp;
	line-below-tabs: true;
	line-below-tabs-color: #2f3030;
	line-below-tabs-y-offset: 0dp;
}

ProgressBar {
	display-percent: true;
	vertical-expand: true;
	filler-padding: 2dp;
	movement-speed: 32 0;
}

WinMenu {
	button-margin: 12dp;
}

Menu,
PopUpMenu {
	color: var(--font-color);
	min-width: 100dp;
	min-icon-space: 24dp;
	min-margin-right: 8dp;
}

Menu:hover,
PopUpMenu:hover,
Menu::Item:hover,
Menu::CheckBox:hover,
Menu::SubMenu:hover,
ListBox::item:hover,
Tab:selected,
Tab:hover,
Tab:pressed {
	color: #FFF;
}

Slider {
	half-slider: true;
}

ScrollBar {
	background-expand: true;
}

Window {
	window-flags: shadow;
	buttons-position-offset: -2 0;
}

Window::title {
	color: var(--font-color);
	font-style: shadow;
}

Tooltip {
	padding: 8dp;
	color: black;
}

#lvbox > * {
	margin-top: 8dp;
}

#lvbox > #tpad {
	margin-top: 0dp;
	border-width: 2dp;
	border-color: #66666666;
	background-color: #33FF3310;
	border-radius: 12;
	font-size: 24dp;
	padding: 12dp;
	transition: scale 0.25s, rotation 0.25s 0.25s, border-color 0.25s, background-color 0.25s, border-radius 0.25s;
}

#lvbox > #tpad:hover {
	scale: 1.1;
	rotation: -3;
	background-color: #FF333310;
	border-color: #99999999;
	border-radius: 4;
}

#tpad2 {
	margin-left: 0;
	padding: 24dp;
	opacity: 0.8;
	font-size: 24dp;
	background-color: #333;
	transition: all 0.25s;
}

#tpad2:hover {
	margin-left: 8dp;
	padding: 28dp;
	opacity: 1;
	border-radius: 24;
	background-color: #656;
}

#tpad3 {
	border-width: 2dp;
	border-color: #1e2021d7;
	background-image: linear-gradient( #797a79, #585857 );
	border-radius: 3;
	padding: 12dp;
	transition: all 0.25;
	font-style: shadow;
	color: white;
}

#tpad3:hover {
	background-image: linear-gradient( #9c9d9b, #5b5b5a );
	border-color: #1d1f1fd7;
	border-radius: 3;
	cursor: hand;
	shadow-color: black;
	padding: 18dp 12dp 100dp 12dp;
}

#tpad3:pressed {
	background-image: linear-gradient( #4e4f4d, #414141 );
	border-color: #222320d7;
	padding: 22dp 12dp 120dp 12dp;
}

#chbox,
#rdbut {
	font-size:24dp;
	padding: 12dp;
	background-color: #333;
}

#tres {
	background-color: #444;
	padding: 8dp;
	transition: all 0.25s;
}

#tres:hover {
	width: 128dp;
	height: 48dp;
}

#pbut {
	transition: all 0.25s;
}

#pbut:hover {
	skin-color: #66ff44;
}

#test_2 > #rtest {
	padding: 8dp;
	background: #221122;
}

#test_2 > #rtest #rttv {
	background: #333;
	font-size: 24dp;
	border-radius: 8;
	padding: 8dp;
	transition: all 0.125s;
}

#test_2 > #rtest #rttv:hover {
	background: #666;
}

#test_2 > #rtest:hover #rttv {
	background: #005522;
}

#test_2 > #rtest:hover #rttv:hover {
	background: #008822;
}

#test_2 > #rtest:hover #rttv:pressed {
	background: lime;
	color: #333;
}

#test_3 {
	background: #221122;
}

#test_3 > .rooter {
	background: red;
}

#test_3 > .rooter .outer {
	background: blue;
	transition: all 0.125s;
}

#test_3 > .rooter:hover .outer {
	background: green;
}

#test_3 > .rooter:hover .outer:hover {
	background: yellow;
}

#test_3 > .rooter .inner {
	background: #123456;
	transition: all 0.125s;
}

#test_3 > .rooter:hover .outer:hover .inner {
	background: #DABA22;
	margin-left: 16dp;
}

#test_3 > .rooter:hover .outer:hover .inner:hover {
	background: #CCC;
}

#test_4 {
	background-color: #221122;
}

#test_4 > RelativeLayout {
	background-color: #331133;
	padding: 8dp;
	transition: all 0.125s;
}

#test_4 > RelativeLayout:hover {
	background-color: #442244;
	cursor: hand;
}

#test_4 > RelativeLayout:pressed {
	background-color: #662266;
}

#test_4 > RelativeLayout > TextView {
	transition: all 10s;
}

#test_4 > RelativeLayout:hover > TextView {
	margin-left: 800dp;
}

TabWidget {
	padding-left: 8dp;
	padding-right: 8dp;
	padding-bottom: 8dp;
	padding-top: 20dp;
	background-color: #656565;
}

#lvbox {
	background-color: #222;
	padding: 12dp;
}

.list {
	font-size: 16dp;
	padding: 8dp;
}

#tviewl {
	font-size: 24dp;
	background-color: #333;
}

#tinput {
	font-size: 24dp;
	padding: 24dp;
}

#rvbox {
	background-color: #323232;
	padding: 12dp;
}

#rrl {
	background-color: #999;
	background-image: url("file://assets/sprites/4.png");
	background-size: auto;
	background-position: bottom right;
	background-repeat: repeat;
	padding: 24dp;
	transition: all 1s;
}

#rrl:hover {
	background-size: 50% 50%;
	background-position: top left;
}

#rrl > .real_back {
	background-color: #333;
}

#rrl > .back {
	width: 1dp;
	height: 1dp;
	background-image: url(file://assets/icon/ee.png);
	background-repeat: repeat;
	background-position: center;
	layout-gravity: center;
	background-color: #333;
	transition: all 0.5s;
	clip: true;
}

#rrl:hover > .back {
	width: 300dp;
	height: 300dp;
	background-color: black;
	background-position: bottom right;
}

#lvbox {
	background-image: url(file://assets/icon/ee.png);
	background-position: bottom right;
	background-size: 128px 128px;
	background-repeat: no-repeat;
	transition: all 1s;
	clip: true;
}

#lvbox:hover {
	background-position: top right;
}

#rrl > #tmap {
	font-size: 24dp;
	padding: 12dp;
}

.eltv {
	font-size: 24dp;
	padding: 12dp;
	background-color: #242424;
}

#rrl > #el2,
#rrl > #tm,
#rrl > #tmp {
	margin: 12dp;
}

#rrl > #slider {
	padding: 32dp;
	background-color: #555;
}

#rrl > #scrollbar {
	padding: 8dp;
	background-color: #12345666;
}

#rrl > #spinbox {
	padding: 8dp;
	background-color: #54345666;
}

#rrl > TextEdit {
	padding: 16dp;
	margin-bottom: 140dp;
}

#test_5 {
	padding: 8dp;
	background: #555;
}

#test_5 .ll {
	background: #333;
}

#test_5 TextView {
	margin: 4dp;
	padding: 8dp;
	layout_width: match_parent;
	skin: button;
}

#test_6 {
	margin: 8dp;
	background: #323232;
}

#test_6 > * {
	gravity: center;
	background: #323232;
	transition: all 0.2;
	scale-type: expand;
	padding: 4dp;
}

#test_6 > *:hover {
	background: #444;
	scale: 1.1;
	cursor: hand;
}

@media screen and (max-width: 1024px) {

#lvbox {
	background-color: red;
}

}