Changeset 888 for trunk/src/org/expeditee/assets/style

Timestamp:

02/14/14 01:55:45 (10 years ago)

Author:

ngw8

Message:

Added stop button to JFX browser, changed 'go' button to be inside the URL bar, and changed back/forward buttons to use icons rather than text.

File:

• trunk/src/org/expeditee/assets/style/jfx.css (modified) (3 diffs)

trunk/src/org/expeditee/assets/style/jfx.css

@@ -3 +3 @@
  * Author: ngw8
  */
+
 #jfxbrowser {
     -light-gray: rgb(245, 245, 245);
     -dark-gray: rgb(10, 10, 10);
     -highlight: #79b3d4;
+    -red-highlight: #d44747;
+    -red-highlight-transparent: rgba(248,118,92.0.2);
+    
+    -green-highlight: #62c139;
+    -green-highlight-transparent: rgba(135,212,101, 0.4);
+    
     -fx-accent: -highlight;
-    -fx-shadow-highlight-color: rgba(255,255, 255, 0.4);
+    -fx-shadow-highlight-color: rgba(255, 255, 255, 0.5);
     -fx-base: #eee;
 }
@@ -55 +62 @@
     -fx-background-color:-light-gray;
     
-    -fx-background-radius: 2 0 0 2;  
-
+    -fx-background-radius: 2;
 }
 
@@ -73 +79 @@
 }
 
+.fa {
+    -fx-font-family: FontAwesome;   
+}
+
+.button.fa .text :not(.tooltip) {
+    -fx-effect: dropshadow(one-pass-box, -fx-shadow-highlight-color, 0,0,0,1);
+}
+
+.url-button { 
+    -fx-background-color: transparent;
+    -fx-padding: 0 8 0 2;
+    -fx-text-fill: derive(-fx-base, -30%);
+}
+
+.url-button .text :not(.tooltip) {
+    -fx-effect: dropshadow(two-pass-box, -light-gray, 6,0.8,0,0) !important;   
+}
+
+.url-cancel-button {
+    -hover-color: -red-highlight;
+    -glow-color: -red-highlight-transparent;
+}
+
+.url-go-button {
+    -hover-color: -green-highlight;
+    -glow-color: -green-highlight-transparent;
+}
+
+.url-button:hover  { 
+    -fx-text-fill: -hover-color;
+}
+
+/* Tooltip is a child of the button, so have to exclude it from the style */
+.url-button:hover .text :not(.tooltip) {
+     -fx-effect: dropshadow( two-pass-box , -glow-color, 6,0,0,0 );
+}
+
+.url-button:active {
+    -fx-text-fill: derive(-hover-color, -30%);
+}
+
 .scrollbars-hidden .scroll-bar {
     visibility: hidden;