jfxtras.labs.scene.control.gauge.extras.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of jfxtras-labs Show documentation
Show all versions of jfxtras-labs Show documentation
Experimental components for JavaFX 2
/*
* Copyright (c) 2012, JFXtras
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* * Neither the name of the nor the
* names of its contributors may be used to endorse or promote products
* derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/************************************************************
* Defintion of style classes *
************************************************************/
.led {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.LedSkin";
-fx-led : rgb(255, 0, 0);
}
.bargraph {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.LedBargraphSkin";
}
.trafficlight {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.TrafficLightSkin";
}
.split-flap {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.SplitFlapSkin";
}
.nixie-tube {
-fx-skin : "jfxtras.labs.internal.scene.control.skin.NixieTubeSkin";
-fx-glow-color: orange;
}
.odometer {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.OdometerSkin";
}
.simple-indicator {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.SimpleIndicatorSkin";
-fx-indicator-inner-color: rgb(255, 255, 0);
-fx-indicator-outer-color: rgb(255, 0, 0);
}
.rater {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.RaterSkin";
-fx-rater-bright-color: rgb(255, 231, 81);
-fx-rater-dark-color : rgb(255, 126, 18);
-fx-rater-stroke : transparent;
}
.clock {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.ClockSkin";
-fx-clock-frame-fill : linear-gradient(from 50% 0% to 50% 100%, rgb(51, 51, 51) 0%, rgb(153, 153, 153) 100%);
-fx-clock-bright-background-fill: radial-gradient(focus-angle 0deg, focus-distance 0%, center 50% 50%, radius 50%, rgb(191, 207, 197) 0%, rgb(226, 239, 229) 70%, rgb(199, 216, 206) 100%);
-fx-clock-dark-background-fill : linear-gradient(from 0% 0% to 0% 100%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%);
-fx-clock-bright-foreground-fill: black;
-fx-clock-dark-foreground-fill : rgb(226, 239, 229);
-fx-clock-second-pointer-color : rgb(237, 0, 58);
}
.sixteen-segment {
-fx-skin : "jfxtras.labs.internal.scene.control.skin.SixteenSegmentSkin";
-fx-segment-color-on : rgb(119, 219, 0);
-fx-segment-color-off: rgba(119, 219, 0, 0.075);
}
.seven-segment {
-fx-skin : "jfxtras.labs.internal.scene.control.skin.SevenSegmentSkin";
-fx-segment-color-on : rgb(119, 219, 0);
-fx-segment-color-off: rgba(119, 219, 0, 0.075);
}
.dot-matrix-segment {
-fx-skin : "jfxtras.labs.internal.scene.control.skin.DotMatrixSegmentSkin";
-fx-segment-color-on : rgb(119, 219, 0);
-fx-segment-color-off: rgba(119, 219, 0, 0.075);
}
.step-indicator {
-fx-skin : "jfxtras.labs.internal.scene.control.skin.StepIndicatorSkin";
-fx-step-indicator-inner-frame-fill : rgb(158, 158, 158);
-fx-step-indicator-inner-background-fill : rgb(244, 244, 244);
-fx-step-indicator-text-fill : rgb(108, 108, 108);
-fx-step-indicator-selected-inner-framefill : derive(rgb(138, 205, 250), -30%);
-fx-step-indicator-selected-inner-background-fill: rgb(138, 205, 250);
-fx-step-indicator-selected-text-fill : derive(rgb(138, 205, 250), -60%);
-fx-step-indicator-stroke : transparent;
}
.battery {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.BatterySkin";
}
.simple-battery {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.SimpleBatterySkin";
}
.xy-control {
-fx-skin : "jfxtras.labs.internal.scene.control.skin.XYControlSkin";
-fx-font-family : "System";
-fx-font-size : 11px;
-fx-base : #353535;
-fx-background : #040404;
-fx-focus-color : transparent;
-fx-control-inner-background: transparent;
-fx-inner-border : linear-gradient(to bottom, derive(-fx-color,71%) 0%, derive(-fx-color,20%) 100%);
-fx-body-color : linear-gradient( to bottom, derive(-fx-color, 51%) 0%, derive(-fx-color, 5%) 100%);
-fx-background-radius : 0, 0, 0, 0;
-fx-padding : 0px 0px 0px 0px;
-fx-background-insets : 0 0 -1 0, 0, 0, 1;
-fx-sensitivity-color : red;
-fx-text-base-color : ladder(
-fx-color,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%);
}
.xy-control:focused {
-fx-background-insets: -1.4, 0, 0, 1;
}
/************************************************************
* Defintion of Led fills *
************************************************************/
.led .frame {
-fx-fill : linear-gradient(from 15% 15% to 85% 85%, rgba(20, 20, 20, 0.65) 0%, rgba(41, 41, 41, 0.65) 25%, rgba(200, 200, 200, 0.35) 100%);
-fx-stroke: transparent;
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.65), 1, 0.5, 0, 0);
}
.led .off {
-fx-fill : linear-gradient(from 20% 20% to 90% 90%, derive(-fx-led, -75%) 0%, derive(-fx-led, -82%) 49%, derive(-fx-led, -75%) 100%);
-fx-stroke: transparent;
}
.led .on {
-fx-fill : linear-gradient(from 20% 20% to 90% 90%, derive(-fx-led, -25%) 0%, derive(-fx-led, -45%) 49%, derive(-fx-led, 0%) 100%);
-fx-stroke: transparent;
}
.led .highlight {
-fx-fill : radial-gradient(focus-angle 0deg, focus-distance 0%, center 12% 12%, radius 50%, rgba(200, 194, 208, 1) 0%, rgba(200, 194, 208, 0) 100%);
-fx-stroke: transparent;
}
/************************************************************
* Defintion of NixieTube fills *
************************************************************/
.tube-hl-middle {
-fx-fill: linear-gradient(from 0% 100% to 100% 100%, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
-fx-stroke: transparent;
}
.tube-hl-left {
-fx-fill: linear-gradient(from 0% 0% to 100% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 80%, rgba(255, 255, 255, 0.05) 100%);
-fx-stroke: transparent;
}
.tube-hl-right {
-fx-fill: linear-gradient(from 0% 0% to 100% 0%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
-fx-stroke: transparent;
}
.tube-hl-upper {
-fx-fill: linear-gradient(from 50% 0% to 50% 100%, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
-fx-stroke: transparent;
}
.tube-hl-top {
-fx-fill: linear-gradient(from 66% 14% to 35% 95%, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
-fx-stroke: transparent;
}
/************************************************************
* Defintion of SimpleIndicator fills *
************************************************************/
.indicator-outer-frame-fill {
-fx-fill : linear-gradient(from 50% 0% to 50% 100%, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 14%, rgba(242, 242, 242, 1) 15%, rgba(54, 54, 54, 1) 86%, rgba(51, 51, 51, 1) 87%, rgba(51, 51, 51, 1) 100%);
-fx-stroke: transparent;
}
.indicator-inner-frame-fill {
-fx-fill : linear-gradient(from 50% 0% to 50% 100%, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 1) 15%, rgba(53, 53, 53, 1) 15%, rgba(226, 226, 226, 1) 86%, rgba(226, 226, 226, 1) 100%);
-fx-stroke: transparent;
}
.indicator-main-fill {
-fx-fill: radial-gradient(focus-angle 0deg, focus-distance 0%, center 51% 85%, radius 111%, -fx-indicator-inner-color 0%, -fx-indicator-outer-color 100%);
-fx-stroke: transparent;
}
.indicator-highlight-fill {
-fx-fill: linear-gradient(from 50% 0% to 50% 100%, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
-fx-stroke: transparent;
}
/************************************************************
* Defintion of Rater fills *
************************************************************/
.star-fill {
-fx-fill: radial-gradient(focus-angle 0deg, focus-distance 0%, center 50% 81%, radius 50%, -fx-rater-bright-color 0%, -fx-rater-dark-color 100%);
-fx-stroke: -fx-rater-stroke;
}
.highlights-inner-fill {
-fx-fill: rgba(255, 255, 255, 0.1019607843);
}
.highlights-top-fill {
-fx-fill: linear-gradient(from 50% 0% to 50% 100%, rgba(255, 255, 255, 0.7490196078) 0%, rgba(255, 255, 255, 0.0470588235) 100%);
}
/************************************************************
* Definition of Clock fills *
************************************************************/
.clock-frame-fill {
-fx-fill: -fx-clock-frame-fill;
}
.clock-bright-background-fill {
-fx-fill: -fx-clock-bright-background-fill;
}
.clock-bright-foreground-fill {
-fx-fill: -fx-clock-bright-foreground-fill;
}
.clock-dark-background-fill {
-fx-fill: -fx-clock-dark-background-fill;
}
.clock-dark-foreground-fill {
-fx-fill: -fx-clock-dark-foreground-fill;
}
.clock-second-pointer-fill {
-fx-fill: -fx-clock-second-pointer-color;
}
/************************************************************
* Definition of SixteenSegment fills *
************************************************************/
.sixteen-segment-on {
-fx-fill : radial-gradient(focus-angle 0deg, focus-distance 0%, center 50% 50%, radius 50%, derive(-fx-segment-color-on, +30%) 0%, -fx-segment-color-on 50%, derive(-fx-segment-color-on, -30%) 100%);
-fx-stroke: transparent;
}
.sixteen-segment-plain-on {
-fx-fill : -fx-segment-color-on;
-fx-stroke: transparent;
}
.sixteen-segment-off {
-fx-fill : -fx-segment-color-off;
-fx-effect: innershadow(gaussian, rgba(0, 0, 0, 0.65), 1, 0.5, 0, 0);
-fx-stroke: transparent;
}
/************************************************************
* Definition of SevenSegment fills *
************************************************************/
.seven-segment-on {
-fx-fill : radial-gradient(focus-angle 0deg, focus-distance 0%, center 50% 50%, radius 50%, derive(-fx-segment-color-on, +30%) 0%, -fx-segment-color-on 50%, derive(-fx-segment-color-on, -30%) 100%);
-fx-stroke: transparent;
}
.seven-segment-plain-on {
-fx-fill : -fx-segment-color-on;
-fx-stroke: transparent;
}
.seven-segment-off {
-fx-fill : -fx-segment-color-off;
-fx-effect: innershadow(gaussian, rgba(0, 0, 0, 0.65), 1, 0.5, 0, 0);
-fx-stroke: transparent;
}
/************************************************************
* Definition of DotMatrixSegment fills *
************************************************************/
.dot-matrix-segment-on {
-fx-fill : radial-gradient(focus-angle 0deg, focus-distance 0%, center 50% 50%, radius 50%, derive(-fx-segment-color-on, +50%) 0%, -fx-segment-color-on 50%, derive(-fx-segment-color-on, -30%) 100%);
-fx-effect: innershadow(gaussian, rgba(0, 0, 0, 0.5), 1, 1.0, 0, 0);
-fx-stroke: transparent;
}
.dot-matrix-segment-plain-on {
-fx-fill : -fx-segment-color-on;
-fx-stroke: transparent;
}
.dot-matrix-segment-off {
-fx-fill : -fx-segment-color-off;
-fx-effect: innershadow(gaussian, rgba(0, 0, 0, 1.0), 1, 1.0, 0, 0);
-fx-stroke: transparent;
}
/************************************************************
* Definition of StepIndicator fills *
************************************************************/
.step-indicator-outer-frame {
-fx-fill : rgb(201, 201, 201);
-fx-stroke: -fx-step-indicator-stroke;
}
.step-indicator-outer-background {
-fx-fill : white;
-fx-stroke: -fx-step-indicator-stroke;
}
.step-indicator-inner-frame {
-fx-fill : -fx-step-indicator-inner-frame-fill;
-fx-stroke: -fx-step-indicator-stroke;
}
.step-indicator-inner-background {
-fx-fill : -fx-step-indicator-inner-background-fill;
-fx-stroke: -fx-step-indicator-stroke;
}
.step-indicator-text {
-fx-fill : -fx-step-indicator-text-fill;
-fx-stroke: -fx-step-indicator-stroke;
}
.step-indicator-selected-inner-frame {
-fx-fill : -fx-step-indicator-selected-inner-frame-fill;
-fx-stroke: -fx-step-indicator-stroke;
}
.step-indicator-selected-inner-background {
-fx-fill : -fx-step-indicator-selected-inner-background-fill;
-fx-stroke: -fx-step-indicator-stroke;
}
.step-indicator-selected-text {
-fx-fill : -fx-step-indicator-selected-text-fill;
-fx-stroke: -fx-step-indicator-stroke;
}
/************************************************************
* Definition of SimpleBattery fills *
************************************************************/
.simple-battery-body {
-fx-fill : linear-gradient(from 50% 0% to 50% 100%, rgba(204, 204, 204, 1) 0%, rgba(51, 51, 51, 1) 1%, white 11%, rgba(51, 51, 51, 1) 73%, rgba(153, 153, 153, 1) 86%, rgba(51, 51, 51, 1) 100%);
-fx-stroke: transparent;
}
.simple-battery-connector {
-fx-fill : linear-gradient(from 50% 0% to 50% 100%, rgba(204, 204, 204, 1) 0%, rgba(51, 51, 51, 1) 1%, white 11%, rgba(51, 51, 51, 1) 73%, rgba(153, 153, 153, 1) 86%, rgba(51, 51, 51, 1) 100%);
-fx-stroke: transparent;
}
.simple-battery-reflection {
-fx-fill : linear-gradient(from 50% 0% to 50% 100%, transparent 0%, rgba(255, 255, 255, 0.1960784314) 0%, rgba(255, 255, 255, 0.2980392157) 1%, rgba(255, 255, 255, 0.0156862745) 44%, rgba(255, 255, 255, 0.0392156863) 46%, transparent 47%, transparent 70%, rgba(255, 255, 255, 0.0039215686) 71%, rgba(255, 255, 255, 0.0941176471) 81%, rgba(255, 255, 255, 0.1019607843) 81%, rgba(255, 255, 255, 0.4) 100%);
-fx-stroke: transparent;
}
/************************************************************
* Definition of XYControl fills *
************************************************************/
.xy-control .xy-area {
-fx-background-color : -fx-box-border, linear-gradient(to bottom, derive(-fx-color,80%) 0%, derive(-fx-color,70%) 100%);
-fx-padding : 0px 200px 200px 0px; /* top right bottom left */
-fx-stroke : -fx-text-base-color;
}
.xy-control .xy-button {
-fx-base : #353535;
-fx-background : #040404;
-fx-focus-color : transparent;
-fx-background-color : -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets : 0 0 -1 0, 0, 1, 2;
-fx-background-radius : 0, 0, 1, 1;
-fx-padding : 0 0 0 0; /* top right bottom left */
-fx-text-fill : -fx-text-base-color;
-fx-alignment : CENTER;
-fx-content-display : LEFT;
}
.xy-control .xy-button:hover {
-fx-color: -fx-hover-base;
}
.xy-control .xy-button:pressed {
-fx-color: -fx-pressed-base;
}
.xy-control .xy-slider-horizontal {
-fx-background-color : -fx-box-border,
linear-gradient(to bottom, derive(-fx-color,50%) 5%, derive(-fx-color,-10%) 100%);
-fx-padding : 0 0 0 0;
-fx-background-insets: 0, 1;
}
.xy-control .xy-slider-vertical {
-fx-background-color : -fx-box-border,
linear-gradient(to bottom, derive(-fx-color,50%) 5%, derive(-fx-color,-10%) 100%);
-fx-padding : 0 0 0 0;
-fx-background-insets: 0, 1;
}
.xy-control .xy-slider-horizontal-thumb {
-fx-fill : linear-gradient(to bottom, derive(-fx-sensitivity-color,50%) 0%, -fx-sensitivity-color 50%, derive(-fx-sensitivity-color,-20%) 100%);
-fx-stroke: transparent;
}
.xy-control .xy-slider-vertical-thumb {
-fx-fill : linear-gradient(to right, derive(-fx-sensitivity-color,50%) 0%, -fx-sensitivity-color 50%, derive(-fx-sensitivity-color,-20%) 100%);
-fx-stroke: transparent;
}
.xy-control .arrow {
-fx-fill : -fx-text-base-color;
-fx-stroke: transparent;
}
.xy-control .zero {
-fx-fill : transparent;
-fx-stroke : -fx-text-base-color;
-fx-stroke-width: 2px;
}
.xy-control .xy-thumb {
-fx-background-color : derive(-fx-color,-36%),
derive(-fx-color,73%),
linear-gradient(to bottom, derive(-fx-sensitivity-color,-20%),derive(-fx-sensitivity-color,40%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 1.0em;
-fx-padding : 0.625em;
}
.xy-control .xy-thumb:focused {
-fx-color : -fx-focused-base;
-fx-background-color : -fx-focus-color,
derive(-fx-color,-36%),
derive(-fx-color,73%),
linear-gradient(to bottom, derive(-fx-sensitivity-color,-20%),derive(-fx-sensitivity-color,40%));
-fx-background-insets: -1.4, 0, 1, 2;
-fx-background-radius: 1.0em;
}
.xy-control .xy-thumb:hover {
-fx-color: -fx-hover-base;
}
.xy-control .xy-thumb:pressed {
-fx-color: -fx-pressed-base;
}