fix: styles

teletha · Dec 13, 2023 · fa118ae · fa118ae
1 parent 41e5a36
commit fa118ae
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 74 deletions.
diff --git a/src/main/java/viewtify/preference/PreferenceView.java b/src/main/java/viewtify/preference/PreferenceView.java
@@ -17,14 +17,15 @@
 import java.util.List;
 import java.util.Set;
 
-import org.controlsfx.glyphfont.FontAwesome;
-
 import javafx.collections.ObservableList;
 import javafx.scene.Node;
 import javafx.scene.Parent;
 import javafx.scene.control.ComboBox;
 import javafx.scene.control.Labeled;
 import javafx.stage.FileChooser.ExtensionFilter;
+
+import org.controlsfx.glyphfont.FontAwesome;
+
 import kiss.I;
 import kiss.Variable;
 import psychopath.Directory;
@@ -145,8 +146,7 @@ interface style extends StyleDSL {
 
         Style icon = () -> {
             font.size(18, px).family("FontAwesome").color("-fx-mid-text-color");
-            padding.size(5, px);
-            margin.horizontal(3, px);
+            padding.size(6, px);
             cursor.pointer();
 
             $.hover(() -> {

diff --git a/src/main/java/viewtify/style/FormStyles.java b/src/main/java/viewtify/style/FormStyles.java
@@ -81,24 +81,26 @@ public interface FormStyles extends ViewtyStyle {
         // marker class
 
         $.descendant(Row, () -> {
+            display.width.fill().minHeight(48, px);
             border.radius(2, px);
             background.color("-fx-control-inner-background");
             margin.bottom(1, px);
             padding.horizontal(10, px).vertical(10, px);
-            display.width.fill();
+            text.verticalAlign.middle();
 
             $.hover(() -> {
                 background.color("-fx-control-inner-background-alt");
             });
 
             $.descendant(Row, () -> {
+                display.minHeight(36, px);
                 padding.vertical(5, px);
             });
         });
 
         $.descendant(Label, () -> {
             text.verticalAlign.baseline();
-            margin.right(20, px);
+            margin.right(20, px).top(4, px);
             display.minWidth(180, px).maxWidth(360, px).width.fill();
         });
     };

diff --git a/src/main/java/viewtify/ui/UISlider.java b/src/main/java/viewtify/ui/UISlider.java
@@ -16,10 +16,10 @@
 
 import javafx.beans.property.Property;
 import javafx.beans.value.ChangeListener;
-import javafx.geometry.Insets;
 import javafx.scene.control.Label;
 import javafx.scene.control.Slider;
 import javafx.scene.layout.HBox;
+
 import viewtify.ui.helper.ValueHelper;
 
 public class UISlider extends UserInterface<UISlider, HBox> implements ValueHelper<UISlider, Double> {
@@ -37,13 +37,9 @@ public class UISlider extends UserInterface<UISlider, HBox> implements ValueHelp
      */
     public UISlider(View view) {
         super(new HBox(), view);
-
-        input.setStyle("-fx-pref-width: 60px; -fx-alignment: center; -fx-padding: -2px 0 0 0;");
-
-        bind();
-
-        ui.setPadding(new Insets(2, 0, -2, 0));
+        ui.getStyleClass().add("slider-wrapper");
         ui.getChildren().addAll(input, slider);
+        bind();
     }
 
     /**

diff --git a/src/main/resources/viewtify/caffeLatte.css b/src/main/resources/viewtify/caffeLatte.css
@@ -67,4 +67,6 @@
     -fx-color: hsb(40, 26%, 78%);
     -fx-hover-base: hsb(45, 29%, 81%);
     -fx-pressed-base: hsb(45, 29%, 86%);
+
+    -fx-outer-border: derive(-fx-color, -7%);
 }
diff --git a/src/main/resources/viewtify/flat.css b/src/main/resources/viewtify/flat.css
@@ -69,3 +69,9 @@
     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
 }
 
+/* ==========================================================================
+  Slider
+===========================================================================*/
+.slider .thumb {
+    -fx-effect: null;
+}
diff --git a/src/main/resources/viewtify/ui.css b/src/main/resources/viewtify/ui.css
@@ -37,25 +37,6 @@
     -fx-background-radius: 3, 2, 1, 4, 1;
 }
 
-/* ==========================================================================
-  ToggleSwitch
-===========================================================================*/
-.toggle-switch .label {
-    -fx-padding: 0 0 0 10px;
-}
-
-.toggle-switch .thumb {
-    -fx-background-color: -fx-outer-border, derive(-fx-body-color, 5%);
-}
-
-.toggle-switch .thumb-area {
-    -fx-background-color: -fx-outer-border, derive(-fx-control-inner-background, 40%);
-}
-
-.toggle-switch:selected .thumb-area {
-    -fx-background-color: -fx-outer-border, derive(-fx-body-color, -40%);
-}
-
 /* ==========================================================================
   Hyperlink
 ===========================================================================*/
@@ -275,6 +256,31 @@
     -fx-background-insets: -1 1 1 0;
 }
 
+/* ==========================================================================
+  Slider
+===========================================================================*/
+.slider-wrapper {
+		-fx-alignment: center;
+}
+
+.slider-wrapper .label {
+		-fx-pref-width: 80px;
+		-fx-alignment: center;
+}
+
+.slider .thumb {
+		-fx-text-box-border: -fx-light-text-color;
+    -fx-background-radius: 10px;
+    -fx-padding: 5px;
+}
+
+.slider .track {
+    -fx-background-color: -fx-outer-border;
+    -fx-background-insets: 0;
+    -fx-background-radius: 2px;
+    -fx-pref-height: 2px;
+}
+
 /* ==========================================================================
   Combined TextField
 ===========================================================================*/
@@ -296,6 +302,25 @@
     -fx-prompt-text-fill: transparent;
 }
 
+/* ==========================================================================
+  ToggleSwitch
+===========================================================================*/
+.toggle-switch .label {
+    -fx-padding: 0 0 0 10px;
+}
+
+.toggle-switch .thumb {
+    -fx-background-color: -fx-outer-border, derive(-fx-body-color, 5%);
+}
+
+.toggle-switch .thumb-area {
+    -fx-background-color: -fx-outer-border, derive(-fx-control-inner-background, 40%);
+}
+
+.toggle-switch:selected .thumb-area {
+    -fx-background-color: -fx-outer-border, derive(-fx-body-color, -40%);
+}
+
 /* ==========================================================================
   Tooltip
 ===========================================================================*/
@@ -345,45 +370,3 @@
     -fx-padding: 5px 1px;
 }
 
-.slider .thumb {
-    -fx-background-color:
-        linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
-        -fx-inner-border,
-        -fx-body-color;
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 1.0em; /* makes sure this remains circular */
-    -fx-padding: 0.583333em;  /* 7 */
-    -fx-effect: dropshadow(two-pass-box , rgba(0, 0, 0, 0.1), 5, 0.0 , 0, 2);
-}
-.slider:focused .thumb {
-    -fx-background-radius: 1.0em; /* makes sure this remains circular */
-}
-.slider .track {
-      -fx-background-color:
-          -fx-shadow-highlight-color,
-          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
-          linear-gradient(to bottom,
-            derive(-fx-control-inner-background, -9%),
-            derive(-fx-control-inner-background, 0%),
-            derive(-fx-control-inner-background, -5%),
-            derive(-fx-control-inner-background, -12%)
-          );
-    -fx-background-insets: 0 0 -1 0, 0, 1;
-    -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
-}
-.slider:vertical .track {
-    -fx-background-color:
-          -fx-shadow-highlight-color,
-          -fx-text-box-border,
-          linear-gradient(to right,
-            derive(-fx-control-inner-background, -9%),
-            -fx-control-inner-background,
-            derive(-fx-control-inner-background, -9%)
-          );
-}
-.slider .axis {
-    -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
-    -fx-tick-length: 5px;
-    -fx-minor-tick-length: 3px;
-    -fx-border-color: null;
-}