redesign. add: themes and text size

app/src/main/resources/assets/style/light.css

@@ -0,0 +1,215 @@
+/* ----------------------------
+	.background
+----------------------------- */
+.bg-primary {
+	-fx-background-color: #f5f5f5;
+}
+
+.bg-secondary {
+	-fx-background-color: #e0e0e0;
+}
+
+.bg-popup {
+	-fx-background-color: #f5f5f57f;
+}
+
+/* ----------------------------
+	.button
+----------------------------- */
+.button {
+	/* Layout */
+	-fx-padding: 10 20;
+	-fx-background-radius: 6;
+	-fx-cursor: hand;
+
+	/* Color */
+	-fx-background-color: #e0e0e0;
+	-fx-text-fill: #1a1a1a;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000026, 4, 0, 0, 1);
+}
+
+.button:hover {
+	-fx-background-color: #d5d5d5;
+	-fx-border-color: #4caf50;
+}
+
+/* ----------------------------
+	.choice-box
+----------------------------- */
+.choice-box {
+	/* Layout */
+	-fx-padding: 6;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #e0e0e0;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+	-fx-mark-color: #1a1a1a;
+}
+
+.choice-box:hover {
+	-fx-border-color: #4caf50;
+}
+
+.choice-box:focused {
+	-fx-border-color: #81c784;
+}
+
+.choice-box .label {
+	-fx-text-fill: #1a1a1a;
+}
+
+/* ----------------------------
+	.choice-box popup styling
+----------------------------- */
+.choice-box .context-menu {
+	/* Layout */
+	-fx-padding: 4;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+}
+
+.choice-box .menu-item {
+	/* Layout */
+	-fx-padding: 6 12;
+}
+
+.choice-box .menu-item .label {
+	-fx-text-fill: #333333;
+}
+
+.choice-box .menu-item:hover {
+	-fx-background-color: #eeeeee;
+}
+
+.choice-box .menu-item:focused {
+	-fx-background-color: #4caf50;
+	-fx-text-fill: #ffffff;
+}
+
+/* ----------------------------
+	.container
+----------------------------- */
+.container {
+	/* Layout */
+	-fx-padding: 10;
+	-fx-alignment: center;
+
+	/* Color */
+	-fx-background-color: #e0e0e0;
+}
+
+/* ----------------------------
+	.input
+----------------------------- */
+.input {
+	/* Layout */
+	-fx-padding: 8;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-text-fill: #1a1a1a;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+}
+
+.input:hover {
+	-fx-border-color: #4caf50;
+}
+
+.input:focused {
+	-fx-border-color: #81c784;
+}
+
+/* ----------------------------
+	.separator
+----------------------------- */
+.separator {
+	/* Layout */
+	-fx-padding: 10 0;
+}
+
+.separator .line {
+	/* Color */
+	-fx-border-color: #cccccc;
+	-fx-border-width: 0 0 1 0;
+}
+
+/* ----------------------------
+	.slider
+----------------------------- */
+.slider {
+	/* Layout */
+	-fx-padding: 6 0;
+
+	/* Color */
+	-fx-background-color: transparent;
+}
+
+.slider .track {
+	/* Color */
+	-fx-background-color: linear-gradient(to left, #4caf50, #f44336);
+	-fx-background-insets: 0;
+	-fx-background-radius: 2;
+	-fx-pref-height: 4;
+}
+
+.slider .thumb {
+	/* Color */
+	-fx-background-color: #1a1a1a;
+	-fx-background-radius: 50%;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000033, 4, 0, 0, 1);
+}
+
+.slider .thumb:hover {
+	-fx-scale-x: 1.2;
+	-fx-scale-y: 1.2;
+}
+
+/* ----------------------------
+	.text-header
+----------------------------- */
+.text-header {
+	-fx-fill: #1a1a1a;
+	-fx-text-fill: #1a1a1a;
+}
+
+/* ----------------------------
+	.text-normal
+----------------------------- */
+.text-normal {
+	-fx-fill: #333333;
+	-fx-text-fill: #333333;
+}
+
+/* ----------------------------
+	.toggle-button
+----------------------------- */
+.toggle {
+	/* Layout */
+	-fx-padding: 8 16;
+	-fx-background-radius: 6;
+
+	/* Color */
+	-fx-background-color: #d0d0d0;
+	-fx-text-fill: #1a1a1a;
+	-fx-border-color: #b0b0b0;
+}
+
+.toggle:hover {
+	-fx-background-color: #4caf50;
+	-fx-text-fill: #ffffff;
+	-fx-border-color: #4caf50;
+}