483 lines
13 KiB
CSS
483 lines
13 KiB
CSS
.root{
|
|
-fx-background: #2b2b2b;
|
|
}
|
|
|
|
.tool-bar{
|
|
-fx-background-color: #2b2b2b;
|
|
}
|
|
/* -======================== Buttons =====================- */
|
|
.button SVGPath{
|
|
-fx-fill: #ebebeb;
|
|
}
|
|
.button, .toggle-button, .menu-button, .color-picker {
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-background-radius: 2;
|
|
-fx-border-color: #47ca60;
|
|
-fx-border-radius: 2;
|
|
-fx-border-width: 2;
|
|
-fx-text-fill: #ebebeb;
|
|
//-fx-effect: dropshadow(three-pass-box, #5b5f62, 2, 0, 0, 0);
|
|
}
|
|
.menu-button:hover, .button:hover, .choice-box:hover, .menu-button:focused:hover, .button:focused:hover, .choice-box:focused:hover, .toggle-button:hover, .toggle-button:focused:hover, .color-picker:hover {
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-background-radius: 2;
|
|
-fx-border-color: #4a81dd;
|
|
-fx-border-radius: 2;
|
|
-fx-border-width: 2;
|
|
-fx-text-fill: #ebebeb;
|
|
//-fx-effect: dropshadow(three-pass-box, #4a81dd, 2, 0, 0, 0);
|
|
}
|
|
.menu-button:focused, .button:focused, .choice-box:focused, .toggle-button:focused, .color-picker:focused {
|
|
-fx-background-color: #4b4e51;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-background-radius: 2;
|
|
-fx-border-color: #4c7352;
|
|
-fx-border-radius: 2;
|
|
-fx-border-width: 2;
|
|
-fx-text-fill: #ebebeb;
|
|
//-fx-effect: dropshadow(three-pass-box, #5b5f62, 2, 0, 0, 0);
|
|
}
|
|
|
|
.menu-button:pressed, .button:pressed, .menu-button:pressed:hover, .button:pressed:hover,
|
|
.toggle-button:pressed, .toggle-button:pressed:hover,
|
|
.color-picker:pressed, .color-picker:pressed:hover{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-background-radius: 2;
|
|
-fx-border-color: #e82382;
|
|
-fx-border-radius: 2;
|
|
-fx-border-width: 2;
|
|
-fx-text-fill: #ebebeb;
|
|
//-fx-effect: dropshadow(three-pass-box, #e82382, 2, 0, 0, 0);
|
|
}
|
|
/* -======================== Buttons keys =====================- */
|
|
.toggle-button:selected, .toggle-button:selected:hover{
|
|
-fx-background-color: #214131;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-background-radius: 8;
|
|
-fx-border-color: #ccfed1;
|
|
-fx-border-radius: 8;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
//-fx-effect: dropshadow(three-pass-box, #5b5f62, 2, 0, 0, 0);
|
|
}
|
|
|
|
.button_keycap, .toggle-button_keycap {
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-radius: 8;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-border-color: #8f8f8f;
|
|
-fx-border-radius: 8;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
-fx-effect: dropshadow(three-pass-box, #8f8f8f, 1, 0, 0, 0);
|
|
}
|
|
.button_keycap:hover, .button_keycap:focused:hover, .toggle-button_keycap:hover, .toggle-button_keycap:focused:hover{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-border-color: #4a81dd;
|
|
-fx-border-radius: 8;
|
|
-fx-background-radius: 8;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
-fx-effect: dropshadow(three-pass-box, #4a81dd, 2, 0, 0, 0);
|
|
}
|
|
.button_keycap:focused, .toggle-button_keycap:focused{
|
|
-fx-background-color: #5b5f62;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-border-color: #8f8f8f;
|
|
-fx-border-radius: 8;
|
|
-fx-background-radius: 8;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
-fx-effect: dropshadow(three-pass-box, #8f8f8f, 1, 0, 0, 0);
|
|
}
|
|
|
|
.button_keycap:pressed, .button_keycap:pressed:hover, .toggle-button_keycap:pressed, .toggle-button_keycap:pressed:hover{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-border-color: #e82382;
|
|
-fx-border-radius: 8;
|
|
-fx-background-radius: 8;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
-fx-effect: dropshadow(three-pass-box, #e82382, 2, 0, 0, 0);
|
|
}
|
|
|
|
.toggle-button_keycap:selected, .toggle-button_keycap:selected:hover{
|
|
-fx-background-color: #214131;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-border-color: #ccfed1;
|
|
-fx-border-radius: 8;
|
|
-fx-background-radius: 8;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
-fx-effect: none;
|
|
}
|
|
|
|
.always_off_button:disabled, .always_off_button:disabled:selected {
|
|
-fx-opacity: 1.0;
|
|
-fx-background-color: #412441;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-border-color: #8f8f8f;
|
|
-fx-border-radius: 8;
|
|
-fx-background-radius: 8;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
-fx-effect: dropshadow(three-pass-box, #f1cbf1, 1, 0, 0, 0);
|
|
}
|
|
/* -======================== TextArea =====================- */
|
|
.text-area{
|
|
-fx-background-color: transparent;
|
|
-fx-control-inner-background: #3c3f41;
|
|
-fx-border-color: transparent;
|
|
-fx-border-radius: 3;
|
|
-fx-border-width: 1;
|
|
-fx-text-fill: #ebebeb;
|
|
}
|
|
|
|
.progress-bar {
|
|
-fx-background-color: transparent;
|
|
-fx-box-border: transparent;
|
|
}
|
|
.progress-bar > .track {
|
|
-fx-background-color: transparent;
|
|
-fx-box-border: transparent;
|
|
}
|
|
.progress-bar > .bar {
|
|
-fx-background-color: linear-gradient(to right, #00bce4, #ff5f53);
|
|
-fx-background-radius: 2;
|
|
-fx-background-insets: 1 1 2 1;
|
|
-fx-padding: 0.23em;
|
|
}
|
|
|
|
.dialog-pane {
|
|
-fx-background-color: #3c3f41;
|
|
}
|
|
.dialog-pane > .button-bar > .container{
|
|
-fx-background-color: #2b2b2b;
|
|
}
|
|
|
|
.dialog-pane > .label{
|
|
-fx-padding: 10 5 10 5;
|
|
}
|
|
|
|
/* -======================== ToolBar =========================- */
|
|
/*
|
|
.tool-bar{
|
|
-fx-background-color: transparent;
|
|
}
|
|
*/
|
|
/* -======================== Choice box =========================- */
|
|
.choice-box{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-border-color: #3c3f41;
|
|
-fx-border-radius: 3;
|
|
-fx-border-width: 2;
|
|
-fx-mark-color: #eea11e;
|
|
-fx-effect: dropshadow(three-pass-box, #b4b4b4, 2, 0, 0, 0);
|
|
}
|
|
.choice-box > .label {
|
|
-fx-text-fill: #ebebeb;
|
|
}
|
|
|
|
.choice-box:pressed, .choice-box:pressed:hover {
|
|
-fx-background-color: #3c3f41;
|
|
-fx-border-color: #eea11e;
|
|
-fx-border-radius: 3;
|
|
-fx-border-width: 2;
|
|
-fx-text-fill: #ebebeb;
|
|
-fx-effect: dropshadow(three-pass-box, #eea11e, 2, 0, 0, 0);
|
|
}
|
|
|
|
// Background color of the whole context menu
|
|
.choice-box .context-menu {
|
|
-fx-background-color: #3c3f41;
|
|
}
|
|
|
|
// Focused item background color in the list
|
|
.choice-box .context-menu .menu-item:focused {
|
|
-fx-background-color: #eea11e;
|
|
|
|
}
|
|
.choice-box .context-menu .menu-item:focused .label {
|
|
-fx-text-fill: #ebebeb;
|
|
}
|
|
|
|
/* -======================== TAB PANE =========================- */
|
|
.tab-pane .tab SVGPath{
|
|
-fx-fill: #ebebeb;
|
|
}
|
|
.tab-pane .tab:selected SVGPath, .tab-pane .tab:selected:hover SVGPath{
|
|
-fx-fill: #ebebeb;
|
|
}
|
|
.tab-pane .tab:hover SVGPath{
|
|
-fx-fill: #d0d0d0;
|
|
}
|
|
/*
|
|
.tab-pane .tab{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-focus-color: transparent;
|
|
-fx-faint-focus-color: transparent;
|
|
-fx-border-radius: 0 0 0 0;
|
|
-fx-border-width: 0 0 3 0;
|
|
-fx-border-color: #2b2b2b;
|
|
}
|
|
.tab-pane .tab:selected{
|
|
|
|
-fx-background-color: #3c3f41;
|
|
-fx-focus-color: transparent;
|
|
-fx-faint-focus-color: transparent;
|
|
-fx-border-radius: 0 0 0 0;
|
|
-fx-border-width: 0 0 3 0;
|
|
-fx-border-color: #40b9bb;
|
|
}
|
|
*/
|
|
|
|
.tab-pane .tab{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-radius: 2;
|
|
-fx-focus-color: transparent;
|
|
-fx-faint-focus-color: transparent;
|
|
}
|
|
.tab-pane .tab:selected{
|
|
-fx-background-color: #40b9bb;
|
|
-fx-background-radius: 2;
|
|
-fx-focus-color: transparent;
|
|
-fx-faint-focus-color: transparent;
|
|
}
|
|
.tab-pane > .tab-header-area {
|
|
-fx-background-insets: 0.0;
|
|
-fx-padding: 5 5 5 5;
|
|
}
|
|
|
|
.tab-pane > .tab-header-area > .tab-header-background
|
|
{
|
|
-fx-background-color: #2b2b2b;
|
|
|
|
}
|
|
.tab-pane > .tab-header-area > .headers-region > .tab {
|
|
-fx-padding: 10;
|
|
}
|
|
/* -========================== Context menu =====================- */
|
|
.menu-button .label, .color-picker .label {
|
|
-fx-text-fill: #ebebeb;
|
|
}
|
|
|
|
.menu-button .arrow, .color-picker .arrow {
|
|
-fx-background-color: #ebebeb;
|
|
}
|
|
|
|
.context-menu {
|
|
-fx-background-color: #3c3f41;
|
|
-fx-cursor: hand;
|
|
}
|
|
.context-menu .menu-item .label {
|
|
-fx-text-fill: #ebebeb;
|
|
}
|
|
.context-menu .menu-item:focused .label {
|
|
-fx-text-fill: white;
|
|
}
|
|
/* -========================== Text Field =====================- */
|
|
.text-field {
|
|
-fx-border-color: #289de8;
|
|
-fx-border-width: 0 0 1 0;
|
|
-fx-background-color: transparent;
|
|
-fx-text-fill: #ebebeb;
|
|
}
|
|
.text-field:focused {
|
|
-fx-border-color: #e82382;
|
|
-fx-border-width: 0 0 1 0;
|
|
-fx-background-color: transparent;
|
|
-fx-text-fill: #e82382;
|
|
}
|
|
/* -========================== footer pane =====================- */
|
|
.footer{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-border-color: #8f8f8f;
|
|
-fx-border-width: 1 0 0 0;
|
|
}
|
|
/* -========================== header pane =====================- */
|
|
.header {
|
|
-fx-background-image: url("pttrn_drk.png");
|
|
-fx-background-position: center;
|
|
-fx-background-repeat: repeat;
|
|
-fx-border-color: #b5b5b5;
|
|
-fx-border-width: 0 0 1 0;
|
|
}
|
|
.header-box {
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 2;
|
|
-fx-background-radius: 2;
|
|
-fx-padding: 3.5;
|
|
}
|
|
/*-======================= Radio Button =====================-*/
|
|
.radio-button .radio, .radio-button:selected .radio {
|
|
-fx-background-color: #4f4f4f;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 1;
|
|
-fx-background-radius: 45;
|
|
-fx-border-color: transparent;
|
|
-fx-border-radius: 45;
|
|
}
|
|
|
|
.radio-button:hover .radio {
|
|
-fx-background-color: #4f4f4f;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 1;
|
|
-fx-background-radius: 45;
|
|
-fx-border-color: #a4ffff;
|
|
-fx-border-radius: 45;
|
|
}
|
|
|
|
.radio-button:selected .radio, .radio-button:selected:hover .radio {
|
|
-fx-background-color: #71e016;
|
|
}
|
|
.radio-button:selected .dot, .radio-button:selected:hover .dot{
|
|
-fx-background-color: #2d2d2d;
|
|
-fx-shape: "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z";
|
|
-fx-scale-x: 1.2;
|
|
-fx-scale-y: 1.2;
|
|
}
|
|
/*-======================= Check Box =====================-*/
|
|
.check-box .box, .check-box:selected .box {
|
|
-fx-background-color: #4f4f4f;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 1;
|
|
-fx-background-radius: 5;
|
|
-fx-border-color: #2d2d2d;
|
|
-fx-border-radius: 3;
|
|
}
|
|
|
|
.check-box:hover .box {
|
|
-fx-background-color: #4f4f4f;
|
|
-fx-background-insets: 0 0 0 0, 0, 1, 1;
|
|
-fx-background-radius: 3;
|
|
-fx-border-color: #a4ffff;
|
|
-fx-border-radius: 3;
|
|
}
|
|
|
|
.check-box:selected .box, .check-box:selected:hover .box {
|
|
-fx-background-color: #eea11e;
|
|
}
|
|
.check-box:selected .mark, .check-box:selected:hover .mark{
|
|
-fx-background-color: #4f4f4f;
|
|
}
|
|
.titled-pane
|
|
{
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.titled-pane:focused
|
|
{
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.titled-pane > .title
|
|
{
|
|
-fx-background-color: #54585b;
|
|
-fx-background-insets: 0, 1, 2;
|
|
-fx-background-radius: 2 2 2 2;
|
|
-fx-padding: 3 11 5 11;
|
|
-fx-border-width: 1;
|
|
-fx-border-radius: 2 2 2 2;
|
|
-fx-border-color: #8c6400;
|
|
}
|
|
.titled-pane > .content
|
|
{
|
|
-fx-border-width: 1;
|
|
-fx-border-radius: 2 2 2 2;
|
|
-fx-border-color: #8c6400;
|
|
}
|
|
|
|
.titled-pane:focused > .title
|
|
{
|
|
-fx-background-color: #3c3f41;
|
|
-fx-background-insets: 0, 1, 2;
|
|
-fx-background-radius: 2 2 2 2;
|
|
-fx-padding: 3 11 5 11;
|
|
-fx-border-width: 1;
|
|
-fx-border-radius: 2 2 2 2;
|
|
-fx-border-color: #8c6400;
|
|
}
|
|
|
|
.titled-pane > .title > .arrow-button
|
|
{
|
|
-fx-background-color: transparent;
|
|
-fx-background-insets: 0;
|
|
-fx-background-radius: 0;
|
|
-fx-padding: 0 3 0 0;
|
|
}
|
|
|
|
.titled-pane > .title > .arrow-button .arrow
|
|
{
|
|
-fx-background-color: #575757, #575757;
|
|
-fx-background-insets: 1 0 -1 0, 0;
|
|
-fx-padding: 3 3.75 3 3.75;
|
|
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
|
|
}
|
|
|
|
.titled-pane:collapsed > .title > .arrow-button .arrow
|
|
{
|
|
-fx-rotate: -90;
|
|
}
|
|
|
|
.titled-pane:focused > .title > .arrow-button .arrow
|
|
{
|
|
-fx-background-color: white, white;
|
|
}
|
|
|
|
.scroll-bar:horizontal .track,
|
|
.scroll-bar:vertical .track{
|
|
-fx-background-color :transparent;
|
|
-fx-border-color :transparent;
|
|
-fx-background-radius : 0.0em;
|
|
-fx-border-radius :2.0em;
|
|
}
|
|
.scroll-bar .increment-arrow,
|
|
.scroll-bar .decrement-arrow {
|
|
-fx-background-color: #71e016;
|
|
}
|
|
|
|
.scroll-pane > .viewport {
|
|
-fx-background-color: transparent;
|
|
}
|
|
.scroll-pane{
|
|
-fx-background-color: #2d2d2d;
|
|
}
|
|
.scroll-pane > .corner,
|
|
.scroll-bar:horizontal,
|
|
.scroll-bar:vertical {
|
|
-fx-background-color: #2d2d2d;
|
|
}
|
|
|
|
.scroll-bar:horizontal .track,
|
|
.scroll-bar:vertical .track,
|
|
.scroll-bar:horizontal .decrement-button,
|
|
.scroll-bar:vertical .decrement-button,
|
|
.scroll-bar:horizontal .increment-button,
|
|
.scroll-bar:vertical .increment-button {
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.scroll-bar:horizontal .thumb{
|
|
-fx-background-color: #06bdc3;
|
|
-fx-background-insets: 4 0 4 0;
|
|
-fx-background-radius : 5;
|
|
}
|
|
.scroll-bar:horizontal .thumb:hover{
|
|
-fx-background-color: #08f3ff;
|
|
-fx-background-insets: 4 0 4 0;
|
|
-fx-background-radius : 5;
|
|
}
|
|
|
|
|
|
.scroll-bar:vertical .thumb {
|
|
-fx-background-color: #06bdc3;
|
|
-fx-background-insets: 0 4 0 4;
|
|
-fx-background-radius : 5;
|
|
}
|
|
.scroll-bar:vertical .thumb:hover {
|
|
-fx-background-color: #08f3ff;
|
|
-fx-background-insets: 0 4 0 4;
|
|
-fx-background-radius : 5;
|
|
} |