Employee.css

/****************************************************************************
 **
 ** This demo file is part of yFiles for JavaFX 3.6.
 **
 ** Copyright (c) 2000-2023 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for JavaFX functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for JavaFX version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for JavaFX powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for JavaFX
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''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 yWorks 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.
 **
 ***************************************************************************/

/* ==================
The style for the employees: A round rectangle filled with a linear gradient
and a solid color when hovered accordingly.
When not focused, the color for the linear gradient and the border is shade of blue.
When focused, the color for the linear gradient and the border is orange.
   ==================  */

/*
The normal style is used for the foregroundPane that is displayed when the mouse
is not hovering the node.
*/
.normalUnfocusedStyle {
  -fx-background-color: linear-gradient(from 50% 0% to 50% 100%, #CCFFFF 0%, #249AE7 100%);
  -fx-background-radius: 8;
  -fx-background-insets: 1;
  -fx-border-color: #249AE7;
  -fx-border-width: 3;
  -fx-border-radius: 8;
}

.normalFocusedStyle {
  -fx-background-color: linear-gradient(from 50% 0% to 50% 100%, WHITE 0%, ORANGE 100%);
  -fx-background-radius: 8;
  -fx-background-insets: 1;
  -fx-border-color: ORANGE;
  -fx-border-width: 3;
  -fx-border-radius: 8;
}

/*
The normal style is used for the root that is displayed when the mouse
is hovering the node. The color for the linear gradient and the border is shade of blue.
The color of the hover effect is white.
*/
.hoverUnfocusedStyle {
  -fx-background-color: #CCFFFF;
  -fx-background-radius: 8;
  -fx-background-insets: 1;
  -fx-border-color: #249AE7;
  -fx-border-width: 3;
  -fx-border-radius: 8;
}

.hoverFocusedStyle {
  -fx-background-color: WHITE;
  -fx-background-radius: 8;
  -fx-background-insets: 1;
  -fx-border-color: ORANGE;
  -fx-border-width: 3;
  -fx-border-radius: 8;
}

/*
 The style classes detailState, overviewState and intermediateState are set on the Employees depending on the
 current zoom level.
 The style classes detail, intermediate and overview are assign to the different view states
 EmployeeDetail, EmployeeIntermediate and EmployeeOverview.
 The combination of these style classes results in the view states to be only visible for specific zoom levels.
*/
.detailState .detail {
   visibility: visible;
}
.detailState .intermediate {
   visibility: collapse;
}
.detailState .overview {
   visibility: collapse;
}
.overviewState .detail {
   visibility: collapse;
}
.overviewState .intermediate {
   visibility: collapse;
}
.overviewState .overview {
   visibility: visible;
}
.intermediateState .detail {
   visibility: collapse;
}
.intermediateState .intermediate {
   visibility: visible;
}
.intermediateState .overview {
   visibility: collapse;
}

.detail {}
.intermediate {}
.overview {}