de.cadoculus.javafx.minidockfx.minidockfx.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of MiniDockFx Show documentation
A small docking framework for JavaFX.
There is a newer version: 0.1.6
/*******************************************************************************
 *                                                                             *
 * The CSS for MiniDockFX d to dock the content                                *
 *                                                                             *
 ******************************************************************************/
.root {
    -mdf-background-color0: white;
    -mdf-background-color1: #fafafa;
    -mdf-background-color2: #eeeeee;
    -mdf-background-color3: #bdbdbd;
    -mdf-background-color4: #616161;
    -mdf-background-colorA1: #1a237e;
    -mdf-background-colorA2: #3949ab;
    -mdf-accent-color1:#ef6c00;
    -mdf-accent-color2:#689f38;

    -fx-font-size: 24px;
}

.minidockfx-pane {
    -fx-background-color: -mdf-background-color1;
}

.minidockfx-splitpane {
    -fx-background-color: -mdf-background-color1;
    -fx-padding: 5;
}

.minidockfx-splitpane:vertical > .split-pane-divider {
    -fx-background-color: transparent;
}

.minidockfx-tabbed-dock-pane {
    -fx-effect: dropshadow(three-pass-box, #bdbdbd, 3, 0.25, 0,5);
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 4
}

.minidockfx-tabbed-dock-tabpane {

}

.minidockfx-splitpane:horizontal > .split-pane-divider {
    -fx-background-color: transparent;
}

/* TabbedDockController: A HBox containing the node given from the view and the close button */
.minidockfx-tab-header {
    -fx-spacing: 5;
}

/* AbstractTabbableView: A HBox containing the label and potential other content */
.minidockfx-view-box {

}

/* AbstractTabbableView: The label containing the views name */
.minidockfx-view-label {
    -fx-text-fill: WHITE;
    -fx-max-width: 100px;
}

/* AbstractTabbableView: A tooltip on the label containing the views name */
.minidockfx-view-label-tooltip {
    -fx-background:-mdf-background-color0;
    -fx-background-color:-mdf-background-color0;
    -fx-border-color: -mdf-background-color2;
    -fx-text-fill: black;

    -fx-background-radius: 6px;
    -fx-background-insets: 0;
    -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 3 );
    -fx-font-size: 16px;
}
.minidockfx-view-label-tooltip  .label {
    -fx-text-fill: black;
}

/* The close button in the tabs*/
.minidockfx-tab-close {
    -jfx-button-type: FLAT;
    -fx-background-color: transparent;
    -fx-pref-width: 32px;
}

.minidockfx-tab-close .ikonli-font-icon {
    -fx-fill: WHITE;
    -fx-icon-size: 32px;
}

.minidockfx-tab-close:hover .ikonli-font-icon {
    -fx-fill:#ef6c00;
}

.minidockfx-drag-target {

     -fx-background-color: rgba(255, 255, 255, 0.5); // transparent #bdbdbd

    /* -fx-border-color: rgba(255, 255, 255,0.75); // transparent white
    -fx-border-width: 5px; */
    //-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 3 );
}
.minidockfx-drag-sub-target {

    // -fx-background-color: rgba(255, 255, 255, .8); // transparent #bdbdbd
    -fx-border-width: 3;
    -fx-background-insets: 20 20 20 20 ;
    -fx-border-color: rgba(255, 255, 255,0.9); // transparent white
    -fx-alignment: center;
}

.minidockfx-drag-sub-target_active {
    -fx-background-color: rgba(238, 238, 238, .9); // transparent #bdbdbd
    -fx-border-width: 3;
    -fx-border-color: #ef6c00;
}

.minidockfx-drag-sub-ripple {
    -jfx-rippler-fill: #ef6c00;
}

.minidockfx-context-menu {
    -fx-background: darkgray ;
    -fx-text-fill: black;
}

.minidockfx-context-menu .label {
    -fx-text-fill: black;
    -fx-font-weight: bold;
    -fx-padding: 12.0px;
}

.minidockfx-context-menu:focused .label {
    -fx-background-color: -mdf-background-color2;
    -fx-text-fill: white;
}
/*
* The following styles are just for the example code
 */
.menu-bar {
    -fx-background-color: -mdf-background-colorA2;
    -fx-effect: dropshadow(three-pass-box, #bdbdbd, 3, 0.25, 0,5);
    -fx-padding: 0;
    -fx-margin:5;
}
.menu-bar .label {
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-padding: 10.0px;
}
.menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
    -fx-background: black ;
    -fx-opacity: 0.1;
}

.menu-item {
    -fx-padding: 0.0em 0.0em 0.0em 0.0em;
    -fx-text-fill: black;
    -fx-background: darkgray ;
}
.menu-item .label{
    -fx-text-fill: black;
}
.menu-item .label:hover{
    -fx-background: black ;
    -fx-text-fill: white;
}

/* https://github.com/jfoenixadmin/JFoenix/blob/ca340d0ce3a4ce8379f7ebb6aa58cf9e35de5168/jfoenix/src/main/resources/com/jfoenix/assets/css/controls/jfx-tab-pane.css */
.jfx-tab-pane .tab-header-background {
    -fx-background-color: -mdf-background-colorA2;
}
.jfx-tab-pane .headers-region > .tab-selected-line{
    -fx-pref-width: 1px !important;
    -fx-pref-height: 3px;
}
.jfx-tab-pane .headers-region .tab-selected-line {
    -fx-background-color: -mdf-accent-color1;
}


ExampleTabview1 {
    -mdf-background-colorA1: grey;
}