css.content.light.jmetroLightTheme.css Maven / Gradle / Ivy
The newest version!
/*
Document : JMetroLightTheme
Created on : Oct 16, 2012, 6:28:59 PM
Author : Pedro Duque Vieira
Description:
Light Metro style sheet for use in JavaFX applications
*/
.header{
-fx-font-size: 3.5em;
-fx-font-family: "Segoe UI Semilight";
-fx-text-fill: black;
}
.item-title{
-fx-font-size: 1.0em;
-fx-font-family: "Segoe UI";
-fx-text-fill: black;
}
/*******************************************************************************
* *
* Push Button *
* *
******************************************************************************/
/*******************************************************************************
* *
* Toggle Button *
* *
******************************************************************************/
.toggle-button {
-fx-padding: 5.0 22.0 5.0 22.0;
-fx-border-style: null;
-fx-background-radius: 0.0;
-fx-background-color: #cccccc;
-fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-fx-font-size: 11.0pt;
-fx-text-fill: black;
-fx-border-color: transparent;
-fx-border-width: 2.0;
}
.toggle-button:focused {
-fx-border-color: transparent, black;
-fx-border-width: 1.0, 1.0;
-fx-border-style: solid, segments(1.0, 2.0);
-fx-border-radius: 0.0, 0.0;
-fx-border-insets: 1.0 1.0 1.0 1.0, 0.0;
}
.toggle-button:hover {
-fx-background-color: #d8d8d8;
-fx-text-fill: black;
}
.toggle-button:selected {
-fx-background-color: black;
-fx-text-fill: white;
}
.toggle-button:selected:hover {
-fx-background-color: #666;
-fx-text-fill: white;
}
.toggle-button:disabled {
-fx-opacity: 0.4;
}
/*******************************************************************************
* *
* Check Box *
* *
******************************************************************************/
/*******************************************************************************
* *
* Radio Button *
* *
******************************************************************************/
/*******************************************************************************
* *
* Tooltip *
* *
******************************************************************************/
.tooltip {
-fx-background-color: white;
-fx-background-insets: 0.0;
-fx-background-radius: 0.0 0.0 0.0 0.0;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /*4 8 4 8 */
-fx-font-family: "Segoe UI Semilight", "Segoe UI Light", "Segoe UI", Helvetica, Arial, sans-serif;
-fx-text-fill: rgba(0.0, 0.0, 0.0, 0.6);
-fx-border-color: #808080;
-fx-border-width: 2.0px;
-fx-effect: null;
}
/*******************************************************************************
* *
* Context Menu *
* *
******************************************************************************/
.context-menu {
-fx-background-color: white;
-fx-background-insets: 0.0, 1.0, 2.0;
-fx-background-radius: 0.0 0.0 0.0 0.0, 0.0 0.0 0.0 0.0, 0.0 0.0 0.0 0.0;
-fx-padding: 0.5em 0.0em 0.5em 0.0em; /* 6 0 6 0 */
-fx-border-color: #212121;
-fx-border-style: solid;
}
.context-menu .separator {
-fx-padding: 0.58333275em 1.333332em 0.58333275em 1.333332em; /*7 16 7 16 */
}
/* TODO: try to scope the menu-item style to the contextmenu */
.menu-item {
-fx-background-color: transparent;
-fx-padding: 0.666666em 1.333332em 0.666666em 1.333332em; /*8 16 8 16 */
}
.menu-item .label {
-fx-padding: 0.0em 1.333332em 0.0em 0.0em;
-fx-text-fill: #212121;
-fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-fx-font-size: 11.0pt;
}
.menu-item:focused {
-fx-background: -fx-accent;
-fx-background-color: #dedede;
}
.menu-item:pressed
{
-fx-background-color: #212121;
-fx-text-fill: white;
}
.menu-item:pressed .label
{
-fx-text-fill: white;
}
/*******************************************************************************
* *
* ScrollBar *
* *
******************************************************************************/
.scroll-bar > .thumb{
-fx-background-color: derive(#dadada,20%);
-fx-background-insets: 0.0;
-fx-background-radius: 0.0;
}
.scroll-bar > .thumb:hover {
-fx-background-color: #dadada;
}
.scroll-bar > .thumb:pressed {
-fx-background-color: #606060;
}
.scroll-bar > .track {
-fx-background-color: #f0f0f0;
-fx-background-insets: 0.0;
-fx-background-radius: 0.0;
}
.scroll-bar > .track-background {
-fx-background-color: #f0f0f0;
-fx-background-insets: 0.0;
}
.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
-fx-background-color: #f0f0f0;
-fx-background-insets: 0.0;
-fx-background-radius: 0.0;
-fx-padding: 0.25em; /* 3 */
}
.scroll-bar > .increment-button:hover,
.scroll-bar > .decrement-button:hover {
-fx-background-color: #dadada;
}
.scroll-bar > .increment-button:pressed,
.scroll-bar > .decrement-button:pressed {
-fx-background-color: #606060;
}
.scroll-bar > .decrement-button > .decrement-arrow,
.scroll-bar > .increment-button > .increment-arrow{
-fx-background-insets: 1.0 0.0 -1.0 0.0, 0.0;
-fx-background-color: transparent, #606060;
-fx-effect: null;
}
.scroll-bar > .decrement-button:pressed > .decrement-arrow,
.scroll-bar > .increment-button:pressed > .increment-arrow {
-fx-background-color: transparent, white;
-fx-effect: null;
}
.scroll-bar:vertical > .increment-button > .increment-arrow,
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
-fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
}
.scroll-bar:horizontal > .increment-button > .increment-arrow,
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
-fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
}
.scroll-bar:disabled {
-fx-opacity: 0.4;
}
/* ARROW SHAPES */
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
-fx-shape: "M11,17H8.111l-3.86-4.124l3.86-4.125H11l-3.375,4.125L11,17z";
}
.scroll-bar:horizontal > .increment-button > .increment-arrow {
-fx-shape: "M7.626,12.876L4.251,8.751H7.14L11,12.876L7.14,17H4.251L7.626,12.876z";
}
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
-fx-shape: "M4,17v-2.889l4.124-3.86l4.125,3.86V17l-4.125-3.375L4,17z";
}
.scroll-bar:vertical > .increment-button > .increment-arrow {
-fx-shape: "M8.124,13.625l4.125-3.375v2.889l-4.125,3.86L4,13.139V10.25L8.124,13.625z";
}
/*******************************************************************************
* *
* ScrollPane *
* *
******************************************************************************/
.scroll-pane:fitToHeight,
.scroll-pane:fitToWidth,
.scroll-pane {
-fx-background-color: transparent, transparent;
-fx-border-color:transparent, transparent;
-fx-border-width:0;
-fx-padding:0;
}
.scroll-pane .corner {
-fx-background-radius: 0.0 0.0 0.0 0.0;
-fx-background-color: #f0f0f0;
-fx-background-insets: 1.0 0.0 0.0 1.0; /* have the square on the corner be centered */
}
/*******************************************************************************
* *
* ComboBox *
* *
******************************************************************************/
/*******************************************************************************
* *
* Rating (ControlsFX) *
* *
******************************************************************************/
.rating > .container > .button {
-fx-background-color: #bababa;
-fx-border-color: transparent;
-fx-shape: "M147.421,249.541l6.152,4.854l-2.393,7.355l6.521-4.361l6.549,4.361l-2.393-7.355l6.152-4.854h-7.738l-2.571-7.396l-2.543,7.396H147.421z";
-fx-background-image: null;
-fx-padding: 16.0 16.0;
-fx-background-image-repeat: no-repeat;
}
.rating > .container > .button.strong {
-fx-background-color: #00828b;
-fx-border-color: transparent;
-fx-background-image: null;
}
.rating > .container:hover > .button.strong {
-fx-background-color: #329aa3;
}
.rating > .container > .button:hover {
-fx-effect: null;
}
.rating > .container:pressed > .button.strong {
-fx-background-color: #25bbc4;
}
.rating > .container > .button:pressed {
-fx-background-color: #25bbc4;
}
.rating:disabled{
-fx-opacity: 0.6;
}
/*******************************************************************************
* *
* TextBox (and PasswordBox) *
* *
******************************************************************************/
.text-area .text, .text-field>*>.text {
-fx-effect: null;
}
.text-area,
.text-area *.viewport ,
.text-area *.content {
-fx-border-width: 0;
-fx-background-color: transparent;
-fx-padding:0;
}
.text-area:focused,
.text-area:focused *.content {
-fx-background-color: transparent;
}
.text-input{
-fx-pref-width:400.0;
-fx-prompt-text-fill: -text-color-100 !important;
-fx-highlight-fill: #008287;
-fx-highlight-text-fill: white;
-fx-font-size: 14px !important;
-fx-fill:-black-color;
-fx-text-fill:-black-color;
}
.text-input > .right-button{
-fx-cursor: default;
-fx-background-insets: -0.1666665em -0.45em -0.1666665em -0.45em; /* 4 7 4 7 -> this values are subtracted by 2px in em because of the border of the textfield */
}
.text-field > .right-button > .right-button-graphic {
-fx-shape : "M221.738,305.873l6.135,6.16l-2.875,2.863l-6.135-6.159l-6.263,6.237l-2.864-2.875l6.263-6.238l-6.177-6.202l2.875-2.863l6.177,6.201l6.244-6.22l2.864,2.876L221.738,305.873z";
-fx-padding: 0.5em 0.5em; /* TODO: put the real number here 18 18 */
-fx-background-color: black;
}
.text-input > .right-button:hover {
-fx-background-color: #d9d9d9;
}
.text-input > .right-button:pressed {
-fx-background-color: black;
}
.text-input > .right-button:pressed > .right-button-graphic {
-fx-background-color: white;
}
.item-title.disabled{
-fx-text-fill: #adadad;
}
/*******************************************************************************
* *
* PasswordBox *
* *
******************************************************************************/
.password-field {
/*-fx-skin: "jfxtras.styles.jmetro8.MetroPasswordFieldSkin";*/
}
.password-field > .right-button > .right-button-graphic {
-fx-shape : "M307.688,399.564c0,1.484-1.203,2.688-2.688,2.688c-1.484,0-2.688-1.203-2.688-2.688s1.203-2.688,2.688-2.688C306.484,396.876,307.688,398.08,307.688,399.564z M297.5,399h2.5c0,0,1.063-4,5-4c3.688,0,5,4,5,4h2.5c0,0-2.063-6.5-7.5-6.5C299,392.5,297.5,399,297.5,399z";
-fx-scale-shape: false;
-fx-background-color: black;
}
/*******************************************************************************
* *
* ProgressBar *
* *
******************************************************************************/
.progress-bar > .bar {
-fx-background-color: #008287;
-fx-background-radius: 0.0;
-fx-background-insets: 1.0;
}
.progress-bar > .track {
-fx-background-color: white;
-fx-background-insets: 0.0;
-fx-background-radius: 0.0;
}
/*******************************************************************************
* *
* Slider *
* *
******************************************************************************/
.slider {
-fx-skin: "jfxtras.styles.jmetro8.FilledSliderSkin";
}
.slider .thumb {
-fx-background-color: black;
-fx-background-insets: 0.0;
-fx-background-radius: 0.0em;
-fx-padding: 0.333333em; /* 4 */
-fx-effect: null;
}
.slider:focused .thumb {
-fx-background-radius: 0.0em;
}
.slider .track {
-fx-background-color: #c6c6c6;
-fx-background-insets: 0.0;
-fx-background-radius: 0.0;
-fx-padding: 0.333333em; /* This value must be equal to ".slider .thumb" padding */
}
.slider .fill {
-fx-background-color: #00828b;
-fx-padding: 0.333333em; /* This value must be equal to ".slider .thumb" padding */
}
.slider .fill:hover {
-fx-background-color: #219297;
}
.slider .fill:pressed {
-fx-background-color: #25bbc4;
}
/*******************************************************************************
* *
* ToggleSwitch *
* *
******************************************************************************/
.toggle-switch .text {
-fx-fill: black;
-fx-font-size: 1.0em;
-fx-font-family: "Segoe UI Semibold", "Segoe UI";
}
.toggle-switch .thumb {
-fx-background-color: black;
-fx-padding: 0.583333em 0.333333em 0.583333em 0.333333em; /* 7 4 7 4*/
}
.toggle-switch:selected .thumb-area{
-fx-background-insets: 0.0, 1.0, 2.0;
-fx-background-color: #a6a6a6, white, #219297; /* The last one is the accent color */
}
.toggle-switch .thumb-area{
-fx-background-insets: 0.0, 1.0, 2.0;
-fx-background-color: #a6a6a6, white, #a6a6a6;
}
.toggle-switch:selected:pressed .thumb-area{
-fx-background-insets: 0.0, 1.0, 2.0;
-fx-background-color: #a6a6a6, white, #25bbc4; /* The last one is the accent color */
}
.toggle-switch .thumb-area
{
-fx-padding: 0.583333em 1.333333em 0.583333em 1.333333em; /* 7 16 7 16 */
}
.toggle-switch:disabled
{
-fx-opacity: 0.4;
}
/*******************************************************************************
* *
* ListSpinner (Jfxtras) *
* *
******************************************************************************/
.ListSpinner {
-fx-skin: "jfxtras.labs.internal.scene.control.skin.ListSpinnerCaspianSkin";
-fx-background-color: #f0f0f0;
-fx-background-insets: 0.0 0.0 0.0 0.0;
-fx-background-radius: 0.0;
-fx-padding: 0.266667em 0.233333em 0.25em 0.233333em;
-fx-text-fill: #212121;
}
.ListSpinner:hover {
-fx-color: #f0f0f0;
}
.ListSpinner:focused {
-fx-color: -fx-focused-base;
-fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: -1.4, 0.0, 1.0, 2.0;
-fx-background-radius: 6.4, 5.0, 4.0, 3.0;
}
.ListSpinner .valuePane {
-fx-padding: 0.0em 0.2em 0.0em 0.2em;
}
.ListSpinner .left-arrow {
-fx-shape: "M4,-4 L0,0 L4,4 Z";
-fx-scale-shape: false;
}
.ListSpinner .right-arrow {
-fx-shape: "M0,-4 L4,0 L0,4 Z";
-fx-scale-shape: false;
}
.ListSpinner .down-arrow {
-fx-shape: "M-4,-2 L0,2 L4,-2 Z";
-fx-scale-shape: false;
}
.ListSpinner .up-arrow {
-fx-shape: "M4,2 L-4,2 L0,-2 Z";
-fx-scale-shape: false;
}
.ListSpinner .idle {
-fx-background-color: -fx-mark-color;
}
.ListSpinner .clicked {
-fx-background-color: -fx-focus-color;
}
/*******************************************************************************
* *
* Spinner *
* *
******************************************************************************/
/*******************************************************************************
* *
* ChoiceBox *
* *
******************************************************************************/
/*******************************************************************************
* *
* List Box *
* *
******************************************************************************/
/*******************************************************************************
* *
* Tree *
* *
******************************************************************************/