API tools faq
paste
Advertisement
Guest User

JavaFX modena.css

a guest
Sep 15th, 2016
2,118
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 127.47 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. Modena
  3.  
  4. This is the second generation theme for JavaFX after Caspian.
  5. */
  6.  
  7. /*
  8. * Copyright (c) 2009, 2014, Oracle and/or its affiliates. All rights reserved.
  9. * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  10. *
  11. * This code is free software; you can redistribute it and/or modify it
  12. * under the terms of the GNU General Public License version 2 only, as
  13. * published by the Free Software Foundation. Oracle designates this
  14. * particular file as subject to the "Classpath" exception as provided
  15. * by Oracle in the LICENSE file that accompanied this code.
  16. *
  17. * This code is distributed in the hope that it will be useful, but WITHOUT
  18. * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  19. * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
  20. * version 2 for more details (a copy is included in the LICENSE file that
  21. * accompanied this code).
  22. *
  23. * You should have received a copy of the GNU General Public License version
  24. * 2 along with this work; if not, write to the Free Software Foundation,
  25. * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  26. *
  27. * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
  28. * or visit www.oracle.com if you need additional information or have any
  29. * questions.
  30. *
  31. */
  32.  
  33. /*******************************************************************************
  34. * *
  35. * THEMING INSTRUCTIONS *
  36. * *
  37. *******************************************************************************
  38.  
  39. TODO: Explain here how theming works:
  40.  
  41. * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
  42. * -fx-text-background-color for text on top of -fx-background
  43. * -fx-text-inner-color for text on top of -fx-control-inner-color
  44. * -fx-selection-bar-text for text on top of -fx-selection-bar
  45.  
  46. RESIZING FOR DIFFERENT SCREEN DPI
  47. -------------------------------
  48.  
  49. When the screen DPI changes Windows will use a different font size by default.
  50. The default is 12px and can change to 15px or 18px depending on user
  51. preference or screen DPI. On Mac the default is 13px and embedded will depend
  52. on hardware. To make UI controls scale and be the right proportions for each of
  53. these font sizes we base the padding (which controls size of control) on the
  54. font size. This is done using the CSS measurement unit of a "em" where
  55. (1em = font size). The default sizes are based on Windows default of 12px, as
  56. a quick reference here are common px sizes in em units on windows.
  57.  
  58. Windows 12px -> em units -> Mac 13px |
  59. ----------------------------------------
  60. 1px -> 0.083333em -> 1.08px ~ 2px
  61. 2px -> 0.166667em -> 2.16px ~ 3px
  62. 3px = 0.25em
  63. 4px = 0.333333em
  64. 5px = 0.416667em
  65. 6px = 0.5em
  66. 7px = 0.583333em
  67. 8px = 0.666667em
  68. 9px = 0.75em
  69. 10px = 0.833333em
  70. 11px = 0.916667em
  71. 12px = 1em
  72.  
  73. IMPORTANT: Not all sizes are scaled with em units only padding. All borders and
  74. background insets are still in pixels. Also any padding where it has to match up
  75. is being used to size a border should also be in pixels.
  76.  
  77. ******************************************************************************/
  78.  
  79. /*******************************************************************************
  80. * *
  81. * CSS Styles for core infrastructure bits. The .root section provides the *
  82. * overall default colors used by the rest of the sections. *
  83. * *
  84. ******************************************************************************/
  85.  
  86. .root {
  87. /***************************************************************************
  88. * *
  89. * The main color palette from which the rest of the colors are derived. *
  90. * *
  91. **************************************************************************/
  92.  
  93. /* A light grey that is the base color for objects. Instead of using
  94. * -fx-base directly, the sections in this file will typically use -fx-color.
  95. */
  96. -fx-base: #ececec;
  97.  
  98. /* A very light grey used for the background of windows. See also
  99. * -fx-text-background-color, which should be used as the -fx-text-fill
  100. * value for text painted on top of backgrounds colored with -fx-background.
  101. */
  102. -fx-background: derive(-fx-base,26.4%);
  103.  
  104. /* Used for the inside of text boxes, password boxes, lists, trees, and
  105. * tables. See also -fx-text-inner-color, which should be used as the
  106. * -fx-text-fill value for text painted on top of backgrounds colored
  107. * with -fx-control-inner-background.
  108. */
  109. -fx-control-inner-background: derive(-fx-base,80%);
  110. /* Version of -fx-control-inner-background for alternative rows */
  111. -fx-control-inner-background-alt: derive(-fx-control-inner-background,-2%);
  112.  
  113. /* One of these colors will be chosen based upon a ladder calculation
  114. * that uses the brightness of a background color. Instead of using these
  115. * colors directly as -fx-text-fill values, the sections in this file should
  116. * use a derived color to match the background in use. See also:
  117. *
  118. * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
  119. * -fx-text-background-color for text on top of -fx-background
  120. * -fx-text-inner-color for text on top of -fx-control-inner-color
  121. * -fx-selection-bar-text for text on top of -fx-selection-bar
  122. */
  123. -fx-dark-text-color: black;
  124. -fx-mid-text-color: #333;
  125. -fx-light-text-color: white;
  126.  
  127. /* A bright blue for highlighting/accenting objects. For example: selected
  128. * text; selected items in menus, lists, trees, and tables; progress bars */
  129. -fx-accent: #0096C9;
  130.  
  131. /* Default buttons color, this is similar to accent but more subtle */
  132. -fx-default-button: #ABD8ED;
  133.  
  134. /* A bright blue for the focus indicator of objects. Typically used as the
  135. * first color in -fx-background-color for the "focused" pseudo-class. Also
  136. * typically used with insets of -1.4 to provide a glowing effect.
  137. */
  138. -fx-focus-color: #039ED3;
  139. -fx-faint-focus-color: #039ED322;
  140.  
  141. /* The color that is used in styling controls. The default value is based
  142. * on -fx-base, but is changed by pseudoclasses to change the base color.
  143. * For example, the "hover" pseudoclass will typically set -fx-color to
  144. * -fx-hover-base (see below) and the "armed" pseudoclass will typically
  145. * set -fx-color to -fx-pressed-base.
  146. */
  147. -fx-color: -fx-base;
  148.  
  149. /* Chart Color Palette */
  150. CHART_COLOR_1: #f3622d;
  151. CHART_COLOR_2: #fba71b;
  152. CHART_COLOR_3: #57b757;
  153. CHART_COLOR_4: #41a9c9;
  154. CHART_COLOR_5: #4258c9;
  155. CHART_COLOR_6: #9a42c8;
  156. CHART_COLOR_7: #c84164;
  157. CHART_COLOR_8: #888888;
  158. /* Chart Color Palette Semi-Transparent
  159. * These are used by charts that need semi transparent versions of the above colors, such as BubbleChart. They
  160. * are exactly the same colors as above just with alpha
  161. *
  162. * 20% opacity
  163. */
  164. CHART_COLOR_1_TRANS_20: #f3622d33;
  165. CHART_COLOR_2_TRANS_20: #fba71b33;
  166. CHART_COLOR_3_TRANS_20: #57b75733;
  167. CHART_COLOR_4_TRANS_20: #41a9c933;
  168. CHART_COLOR_5_TRANS_20: #4258c933;
  169. CHART_COLOR_6_TRANS_20: #9a42c833;
  170. CHART_COLOR_7_TRANS_20: #c8416433;
  171. CHART_COLOR_8_TRANS_20: #88888833;
  172. /* 70% opacity */
  173. CHART_COLOR_1_TRANS_70: #f3622db3;
  174. CHART_COLOR_2_TRANS_70: #fba71bb3;
  175. CHART_COLOR_3_TRANS_70: #57b757b3;
  176. CHART_COLOR_4_TRANS_70: #41a9c9b3;
  177. CHART_COLOR_5_TRANS_70: #4258c9b3;
  178. CHART_COLOR_6_TRANS_70: #9a42c8b3;
  179. CHART_COLOR_7_TRANS_70: #c84164b3;
  180. CHART_COLOR_8_TRANS_70: #888888b3;
  181.  
  182. /***************************************************************************
  183. * *
  184. * Colors that are derived from the main color palette. *
  185. * *
  186. **************************************************************************/
  187.  
  188. /* A little lighter than -fx-base and used as the -fx-color for the
  189. * "hovered" pseudoclass state.
  190. */
  191. -fx-hover-base: ladder(
  192. -fx-base,
  193. derive(-fx-base,20%) 20%,
  194. derive(-fx-base,30%) 35%,
  195. derive(-fx-base,40%) 50%
  196. );
  197.  
  198. /* A little darker than -fx-base and used as the -fx-color for the
  199. * "armed" pseudoclass state.
  200. *
  201. * TODO: should this be renamed to -fx-armed-base?
  202. */
  203. -fx-pressed-base: derive(-fx-base,-6%);
  204.  
  205. /* The color to use for -fx-text-fill when text is to be painted on top of
  206. * a background filled with the -fx-background color.
  207. */
  208. -fx-text-background-color: ladder(
  209. -fx-background,
  210. -fx-light-text-color 45%,
  211. -fx-dark-text-color 46%,
  212. -fx-dark-text-color 59%,
  213. -fx-mid-text-color 60%
  214. );
  215.  
  216. /* A little darker than -fx-color and used to draw boxes around objects such
  217. * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
  218. */
  219. -fx-box-border: ladder(
  220. -fx-color,
  221. black 20%,
  222. derive(-fx-color,-15%) 30%
  223. );
  224.  
  225. /* Darker than -fx-background and used to draw boxes around text boxes and
  226. * password boxes.
  227. */
  228. -fx-text-box-border: ladder(
  229. -fx-background,
  230. black 10%,
  231. derive(-fx-background, -15%) 30%
  232. );
  233.  
  234. /* Lighter than -fx-background and used to provide a small highlight when
  235. * needed on top of -fx-background. This is never a shadow in Modena but
  236. * keep -fx-shadow-highlight-color name to be compatible with Caspian.
  237. */
  238. -fx-shadow-highlight-color: ladder(
  239. -fx-background,
  240. rgba(255,255,255,0.07) 0%,
  241. rgba(255,255,255,0.07) 20%,
  242. rgba(255,255,255,0.07) 70%,
  243. rgba(255,255,255,0.7) 90%,
  244. rgba(255,255,255,0.75) 100%
  245. );
  246.  
  247. /* A gradient that goes from a little darker than -fx-color on the top to
  248. * even more darker than -fx-color on the bottom. Typically is the second
  249. * color in the -fx-background-color list as the small thin border around
  250. * a control. It is typically the same size as the control (i.e., insets
  251. * are 0).
  252. */
  253. -fx-outer-border: derive(-fx-color,-23%);
  254.  
  255. /* A gradient that goes from a bit lighter than -fx-color on the top to
  256. * a little darker at the bottom. Typically is the third color in the
  257. * -fx-background-color list as a thin highlight inside the outer border.
  258. * Insets are typically 1.
  259. */
  260. -fx-inner-border: linear-gradient(to bottom,
  261. ladder(
  262. -fx-color,
  263. derive(-fx-color,30%) 0%,
  264. derive(-fx-color,20%) 40%,
  265. derive(-fx-color,25%) 60%,
  266. derive(-fx-color,55%) 80%,
  267. derive(-fx-color,55%) 90%,
  268. derive(-fx-color,75%) 100%
  269. ),
  270. ladder(
  271. -fx-color,
  272. derive(-fx-color,20%) 0%,
  273. derive(-fx-color,10%) 20%,
  274. derive(-fx-color,5%) 40%,
  275. derive(-fx-color,-2%) 60%,
  276. derive(-fx-color,-5%) 100%
  277. ));
  278. -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,55%), derive(-fx-color,-5%));
  279. -fx-inner-border-bottomup: linear-gradient(to top, derive(-fx-color,55%), derive(-fx-color,-5%));
  280.  
  281. /* A gradient that goes from a little lighter than -fx-color at the top to
  282. * a little darker than -fx-color at the bottom and is used to fill the
  283. * body of many controls such as buttons.
  284. */
  285. -fx-body-color: linear-gradient(to bottom,
  286. ladder(
  287. -fx-color,
  288. derive(-fx-color,8%) 75%,
  289. derive(-fx-color,10%) 80%
  290. ),
  291. derive(-fx-color,-8%));
  292. -fx-body-color-bottomup: linear-gradient(to top, derive(-fx-color,10%) ,derive(-fx-color,-6%));
  293. -fx-body-color-to-right: linear-gradient(to right, derive(-fx-color,10%) ,derive(-fx-color,-6%));
  294.  
  295. /* The color to use as -fx-text-fill when painting text on top of
  296. * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
  297. */
  298. -fx-text-base-color: ladder(
  299. -fx-color,
  300. -fx-light-text-color 45%,
  301. -fx-dark-text-color 46%,
  302. -fx-dark-text-color 59%,
  303. -fx-mid-text-color 60%
  304. );
  305.  
  306. /* The color to use as -fx-text-fill when painting text on top of
  307. * backgrounds filled with -fx-control-inner-background.
  308. */
  309. -fx-text-inner-color: ladder(
  310. -fx-control-inner-background,
  311. -fx-light-text-color 45%,
  312. -fx-dark-text-color 46%,
  313. -fx-dark-text-color 59%,
  314. -fx-mid-text-color 60%
  315. );
  316.  
  317. /* The color to use for small mark-like objects such as checks on check
  318. * boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
  319. */
  320. -fx-mark-color: ladder(
  321. -fx-color,
  322. white 30%,
  323. derive(-fx-color,-63%) 31%
  324. );
  325.  
  326. /* The small thin light "shadow" for mark-like objects. Typically used in
  327. * conjunction with -fx-mark-color with an insets of 1 0 -1 0. */
  328. -fx-mark-highlight-color: ladder(
  329. -fx-color,
  330. derive(-fx-color,80%) 60%,
  331. white 70%
  332. );
  333.  
  334. /* Background for items in list like things such as menus, lists, trees,
  335. * and tables. */
  336. -fx-selection-bar: -fx-accent;
  337.  
  338. /* Background color to use for selection of list cells etc. This is when
  339. * the control doesn't have focus or the row of a previously selected item. */
  340. -fx-selection-bar-non-focused: lightgrey;
  341.  
  342. /* The color to use as -fx-text-fill when painting text on top of
  343. * backgrounds filled with -fx-selection-bar.
  344. *
  345. * TODO: this can be removed
  346. */
  347. -fx-selection-bar-text: -fx-text-background-color;
  348.  
  349. /* These are needed for Popup */
  350. -fx-background-color: inherit;
  351. -fx-background-radius: inherit;
  352. -fx-background-insets: inherit;
  353. -fx-padding: inherit;
  354.  
  355. /* The color to use in ListView/TreeView/TableView to indicate hover. */
  356. -fx-cell-hover-color: #cce3f4;
  357.  
  358. /** Focus line for keyboard focus traversal on cell based controls */
  359. -fx-cell-focus-inner-border: derive(-fx-selection-bar,30%);
  360.  
  361. /* The colors to use in Pagination */
  362. -fx-page-bullet-border: #acacac;
  363. -fx-page-indicator-hover-border: #accee5;
  364.  
  365. -fx-focused-text-base-color : ladder(
  366. -fx-selection-bar,
  367. -fx-light-text-color 45%,
  368. -fx-dark-text-color 46%,
  369. -fx-dark-text-color 59%,
  370. -fx-mid-text-color 60%
  371. );
  372. -fx-focused-mark-color : -fx-focused-text-base-color ;
  373.  
  374. /***************************************************************************
  375. * *
  376. * Set the default background color for the scene *
  377. * *
  378. **************************************************************************/
  379.  
  380. -fx-background-color: -fx-background;
  381. }
  382.  
  383. /* Make popups transparent */
  384. .root.popup {
  385. -fx-background-color: transparent;
  386. }
  387.  
  388. /*******************************************************************************
  389. * *
  390. * Common Styles *
  391. * *
  392. * These are styles that give a standard look to a whole range of controls *
  393. * *
  394. ******************************************************************************/
  395.  
  396. /* ==== TEXT NODES IN CONTROLS ========================================== */
  397.  
  398. .text {
  399. /* This adjusts text alignment within the bounds of text nodes so that
  400. the text is always vertically centered within the bounds. Based on
  401. the cap height of the text. */
  402. -fx-bounds-type: logical_vertical_center;
  403. /* Enable LCD text rendering */
  404. -fx-font-smoothing-type: lcd;
  405. }
  406.  
  407. /* ==== BUTTON LIKE THINGS ============================================== */
  408.  
  409. .button,
  410. .toggle-button,
  411. .radio-button > .radio,
  412. .check-box > .box,
  413. .menu-button,
  414. .choice-box,
  415. .color-picker.split-button > .color-picker-label,
  416. .combo-box-base,
  417. .combo-box-base:editable > .arrow-button {
  418. -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  419. -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  420. -fx-background-radius: 3px, 3px, 2px, 1px;
  421. -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
  422. -fx-text-fill: -fx-text-base-color;
  423. -fx-alignment: CENTER;
  424. -fx-content-display: LEFT;
  425. }
  426. .menu-button > .label {
  427. -fx-alignment: CENTER_LEFT;
  428. }
  429. .button:hover,
  430. .toggle-button:hover,
  431. .radio-button:hover > .radio,
  432. .check-box:hover > .box,
  433. .menu-button:hover,
  434. .split-menu-button > .label:hover,
  435. .split-menu-button > .arrow-button:hover,
  436. .slider .thumb:hover,
  437. .scroll-bar > .thumb:hover,
  438. .scroll-bar > .increment-button:hover,
  439. .scroll-bar > .decrement-button:hover,
  440. .choice-box:hover,
  441. .color-picker.split-button > .arrow-button:hover,
  442. .color-picker.split-button > .color-picker-label:hover,
  443. .combo-box-base:hover,
  444. .combo-box-base:editable > .arrow-button:hover,
  445. .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
  446. -fx-color: -fx-hover-base;
  447. }
  448. .button:armed,
  449. .toggle-button:armed,
  450. .radio-button:armed > .radio,
  451. .check-box:armed .box,
  452. .menu-button:armed,
  453. .split-menu-button:armed > .label,
  454. .split-menu-button > .arrow-button:pressed,
  455. .split-menu-button:showing > .arrow-button,
  456. .slider .thumb:pressed,
  457. .scroll-bar > .thumb:pressed,
  458. .scroll-bar > .increment-button:pressed,
  459. .scroll-bar > .decrement-button:pressed,
  460. .choice-box:showing,
  461. .combo-box-base:showing,
  462. .combo-box-base:editable:showing > .arrow-button,
  463. .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
  464. -fx-color: -fx-pressed-base;
  465. }
  466. .button:focused,
  467. .toggle-button:focused,
  468. .radio-button:focused > .radio,
  469. .check-box:focused > .box,
  470. .menu-button:focused,
  471. .choice-box:focused,
  472. .color-picker.split-button:focused > .color-picker-label,
  473. .combo-box-base:focused,
  474. .slider:focused .thumb {
  475. -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
  476. -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
  477. -fx-background-radius: 3, 2, 1, 4, 1;
  478. }
  479.  
  480. /* ==== DISABLED THINGS ================================================= */
  481.  
  482. .label:disabled,
  483. .button:disabled,
  484. .toggle-button:disabled,
  485. .radio-button:disabled,
  486. .check-box:disabled,
  487. .hyperlink:disabled,
  488. .menu-button:disabled,
  489. .split-menu-button:disabled,
  490. .slider:disabled,
  491. .scroll-bar:disabled,
  492. .scroll-pane:disabled,
  493. .progress-bar:disabled,
  494. .progress-indicator:disabled,
  495. .text-input:disabled,
  496. .choice-box:disabled,
  497. .combo-box-base:disabled,
  498. .date-cell:disabled > *, /* This is set on children so border is not affected. */
  499. .list-view:disabled,
  500. .tree-view:disabled,
  501. .table-view:disabled,
  502. .tree-table-view:disabled,
  503. .tab-pane:disabled,
  504. .titled-pane:disabled > .title,
  505. .accordion:disabled > .titled-pane > .title,
  506. .tab-pane > .tab-header-area > .headers-region > .tab:disabled,
  507. .menu:disabled,
  508. .menu-item:disabled > .label,
  509. .menu-item:disabled,
  510. .list-cell:filled:selected:focused:disabled,
  511. .list-cell:filled:selected:disabled,
  512. .tree-cell:filled:selected:focused:disabled,
  513. .tree-cell:filled:selected:disabled,
  514. .tree-cell > .tree-disclosure-node:disabled,
  515. .tree-table-row-cell > .tree-disclosure-node:disabled,
  516. .table-row-cell:selected:disabled,
  517. .tree-table-row-cell:selected:disabled,
  518. .table-cell:selected:disabled,
  519. .tree-table-cell:selected:disabled {
  520. -fx-opacity: 0.4;
  521. }
  522.  
  523. /* ==== MNEMONIC THINGS ================================================= */
  524.  
  525. .mnemonic-underline {
  526. -fx-stroke: transparent;
  527. }
  528.  
  529. .titled-pane:show-mnemonics > .mnemonic-underline,
  530. .label:show-mnemonics > .mnemonic-underline,
  531. .context-menu:show-mnemonics > .mnemonic-underline,
  532. .menu:show-mnemonics > .mnemonic-underline,
  533. .menu-bar:show-mnemonics > .mnemonic-underline,
  534. .menu-item:show-mnemonics > .mnemonic-underline,
  535. .button:show-mnemonics > .mnemonic-underline,
  536. .toggle-button:show-mnemonics > .mnemonic-underline,
  537. .radio-button:show-mnemonics > .mnemonic-underline,
  538. .check-box:show-mnemonics > .mnemonic-underline,
  539. .hyperlink:show-mnemonics > .mnemonic-underline,
  540. .split-menu-button:show-mnemonics > .mnemonic-underline,
  541. .menu-button:show-mnemonics > .mnemonic-underline {
  542. -fx-stroke: -fx-text-base-color;
  543. }
  544.  
  545. /* ==== MARKS =========================================================== */
  546.  
  547. .radio-button:selected > .radio > .dot,
  548. .check-box:selected > .box > .mark,
  549. .check-box:indeterminate > .box > .mark {
  550. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  551. -fx-background-insets: 1 0 -1 0, 0;
  552. }
  553.  
  554. /* ==== ARROWS ========================================================== */
  555.  
  556. .menu-button > .arrow-button > .arrow,
  557. .split-menu-button > .arrow-button > .arrow {
  558. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  559. -fx-background-insets: 0 0 -1 0, 0;
  560. -fx-padding: 0.25em;
  561. -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
  562. }
  563. .choice-box > .open-button > .arrow,
  564. .menu-button:openvertically > .arrow-button > .arrow,
  565. .split-menu-button:openvertically > .arrow-button > .arrow,
  566. .combo-box-base > .arrow-button > .arrow,
  567. .web-view .form-select-button .arrow,
  568. .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow {
  569. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  570. -fx-background-insets: 0 0 -1 0, 0;
  571. -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
  572. -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  573. }
  574.  
  575. /* ==== CHOICE BOX LIKE THINGS ========================================== */
  576.  
  577. .choice-box,
  578. .menu-button,
  579. .combo-box-base {
  580. -fx-padding: 0;
  581. }
  582. .choice-box > .label,
  583. .menu-button > .label,
  584. .color-picker > .label {
  585. -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
  586. -fx-text-fill: -fx-text-base-color;
  587. }
  588. .choice-box > .open-button,
  589. .menu-button > .arrow-button {
  590. -fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */
  591. }
  592.  
  593. /* ==== BOX LIKE THINGS ================================================= */
  594.  
  595. .scroll-pane,
  596. .split-pane,
  597. .list-view,
  598. .tree-view,
  599. .table-view,
  600. .tree-table-view,
  601. .html-editor {
  602. -fx-background-color: -fx-box-border, -fx-control-inner-background;
  603. -fx-background-insets: 0, 1;
  604. -fx-padding: 1;
  605. }
  606. .scroll-pane:focused,
  607. .split-pane:focused,
  608. .list-view:focused,
  609. .tree-view:focused,
  610. .table-view:focused,
  611. .tree-table-view:focused,
  612. .html-editor:focused {
  613. -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background;
  614. -fx-background-insets: -1.4, -0.3, 1;
  615. -fx-background-radius: 2, 0, 0;
  616. }
  617. /* ones with grey -fx-background not lighter -fx-control-inner-background */
  618. .scroll-pane,
  619. .split-pane {
  620. -fx-background-color: -fx-box-border, -fx-background;
  621. }
  622. .scroll-pane:focused,
  623. .split-pane:focused {
  624. -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-background;
  625. }
  626.  
  627. /*******************************************************************************
  628. * *
  629. * Label *
  630. * *
  631. ******************************************************************************/
  632.  
  633. .label {
  634. -fx-text-fill: -fx-text-background-color;
  635. }
  636.  
  637. /*******************************************************************************
  638. * *
  639. * Button & ToggleButton *
  640. * *
  641. ******************************************************************************/
  642.  
  643. /* ==== DEFAULT ========================================================= */
  644.  
  645. .button:default {
  646. -fx-base: -fx-default-button;
  647. }
  648.  
  649. /* ==== WEB BUTTONS ===================================================== */
  650.  
  651. .web-view .form-select-button {
  652. -fx-background-radius: 2, 2, 1, 0;
  653. -fx-background-insets: 2 2 1 2, 2, 3, 4;
  654. }
  655.  
  656. /* ==== PILL BUTTONS ==================================================== */
  657.  
  658. .button.left-pill,
  659. .toggle-button.left-pill {
  660. -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
  661. -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  662. -fx-padding: 0.333333em 0.666667em 0.333333em 0.75em; /* 4 8 4 9 */
  663. }
  664. .button.center-pill,
  665. .toggle-button.center-pill {
  666. -fx-background-radius: 0;
  667. -fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1 ;
  668. }
  669. .button.right-pill,
  670. .toggle-button.right-pill {
  671. -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
  672. -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
  673. }
  674. .button.left-pill:focused,
  675. .toggle-button.left-pill:focused {
  676. -fx-background-insets: -0.2 0 -0.2 -0.2, 1, 2, -1.4 0 -1.4 -1.4, 2.6;
  677. -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1, 4 0 0 4, 1 0 0 1;
  678. }
  679. .button.center-pill:focused,
  680. .toggle-button.center-pill:focused {
  681. -fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
  682. -fx-background-radius: 0, 0, 0, 0, 0;
  683. }
  684. .button.right-pill:focused,
  685. .toggle-button.right-pill:focused {
  686. -fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
  687. -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 4 4 0, 0 1 1 0;
  688. }
  689. .toggle-button:selected.left-pill:focused {
  690. -fx-background-insets: -0.2 0 -0.2 -0.2, 1, -1.4 0 -1.4 -1.4, 2.6;
  691. -fx-background-radius: 3 0 0 3, 2 0 0 2, 4 0 0 4, 0;
  692. }
  693. .toggle-button:selected.center-pill:focused {
  694. -fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
  695. -fx-background-radius: 0, 0, 0, 0;
  696. }
  697. .toggle-button:selected.right-pill:focused {
  698. -fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
  699. -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 4 4 0, 0;
  700. }
  701.  
  702. /* ==== SELECTED TOGGLE ================================================= */
  703.  
  704. .toggle-button:selected {
  705. -fx-background-color:
  706. -fx-shadow-highlight-color,
  707. linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
  708. linear-gradient(to bottom,
  709. derive(-fx-color, -22%) 0%,
  710. derive(-fx-color, -13%) 20%,
  711. derive(-fx-color, -11%) 50%);
  712. -fx-background-insets: 0 0 -1 0, 0, 1;
  713. }
  714. .toggle-button:selected:focused {
  715. -fx-background-color:
  716. -fx-focus-color,
  717. linear-gradient(to bottom,
  718. derive(-fx-color, -22%) 0%,
  719. derive(-fx-color, -13%) 20%,
  720. derive(-fx-color, -11%) 50%),
  721. -fx-faint-focus-color,
  722. linear-gradient(to bottom,
  723. derive(-fx-color, -22%) 0%,
  724. derive(-fx-color, -13%) 20%,
  725. derive(-fx-color, -11%) 50%);
  726. -fx-background-insets: -0.2, 1, -1.4, 2.6;
  727. -fx-background-radius: 3, 2, 4, 0;
  728. }
  729.  
  730. /*******************************************************************************
  731. * *
  732. * RadioButton *
  733. * *
  734. ******************************************************************************/
  735.  
  736. .radio-button {
  737. -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
  738. -fx-text-fill: -fx-text-background-color;
  739. }
  740. .radio-button > .radio,
  741. .radio-button:focused > .radio {
  742. -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
  743. -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
  744. }
  745. .radio-button > .radio > .dot {
  746. -fx-background-color: transparent;
  747. -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
  748. -fx-padding: 0.333333em; /* 4 -- radius of the inner black dot when selected */
  749. }
  750.  
  751. /*******************************************************************************
  752. * *
  753. * CheckBox *
  754. * *
  755. ******************************************************************************/
  756.  
  757. .check-box {
  758. -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
  759. -fx-text-fill: -fx-text-background-color;
  760. }
  761. .check-box > .box {
  762. -fx-background-radius: 3, 2, 1;
  763. -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */
  764. }
  765. .check-box > .box > .mark {
  766. -fx-background-color: null;
  767. -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
  768. -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
  769. }
  770. .check-box:indeterminate > .box {
  771. -fx-padding: 0;
  772. }
  773. .check-box:indeterminate > .box > .mark {
  774. -fx-shape: "M0,0H10V2H0Z";
  775. -fx-scale-shape: false;
  776. -fx-padding: 0.666667em; /* 16x16 = 8+8 */
  777. }
  778.  
  779. /*******************************************************************************
  780. * *
  781. * Hyperlink *
  782. * *
  783. ******************************************************************************/
  784.  
  785. .hyperlink {
  786. -fx-padding: 0.166667em 0.25em 0.166667em 0.25em; /* 2 3 2 3 */
  787. -fx-cursor: hand;
  788. -fx-content-display: LEFT;
  789. -fx-text-fill: -fx-text-background-color;
  790. -fx-border-color: transparent;
  791. -fx-border-width: 1px;
  792. }
  793. .hyperlink,
  794. .hyperlink:hover,
  795. .hyperlink:hover:visited {
  796. -fx-text-fill: -fx-accent;
  797. }
  798. .hyperlink:armed,
  799. .hyperlink:visited,
  800. .hyperlink:hover:armed {
  801. -fx-text-fill: -fx-text-background-color;
  802. }
  803. .hyperlink:hover,
  804. .hyperlink:visited,
  805. .hyperlink:hover:visited {
  806. -fx-underline: true;
  807. }
  808. .hyperlink:visited:armed {
  809. -fx-underline: false;
  810. }
  811. .hyperlink:focused {
  812. -fx-border-color: -fx-focus-color;
  813. -fx-border-style: segments(0.166667em, 0.166667em);
  814. -fx-border-width: 1px;
  815. }
  816. .hyperlink:show-mnemonics > .mnemonic-underline {
  817. -fx-stroke: -fx-text-fill;
  818. }
  819.  
  820. /*******************************************************************************
  821. * *
  822. * SplitMenuButton *
  823. * *
  824. ******************************************************************************/
  825.  
  826. .split-menu-button {
  827. -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border;
  828. -fx-background-insets: 0 0 -1 0, 0;
  829. -fx-background-radius: 3, 3;
  830. -fx-padding: 0;
  831. }
  832. .split-menu-button > .label {
  833. -fx-text-fill: -fx-text-base-color;
  834. -fx-background-color: -fx-inner-border, -fx-body-color;
  835. -fx-background-insets: 1 0 1 1, 2 1 2 2;
  836. -fx-background-radius: 2 0 0 2, 1 0 0 1;
  837. -fx-padding: 0.333333em 0.667em 0.333333em 0.667em; /* 4 8 4 8 */
  838. }
  839. .split-menu-button > .arrow-button {
  840. -fx-background-color: -fx-inner-border, -fx-body-color;
  841. -fx-background-insets: 1, 2;
  842. -fx-background-radius: 0 2 2 0, 0 1 1 0;
  843. -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
  844. }
  845. .split-menu-button:focused {
  846. -fx-background-color: -fx-focus-color;
  847. -fx-background-insets: -0.2;
  848. -fx-background-radius: 3;
  849. }
  850. .split-menu-button:focused > .label {
  851. -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
  852. -fx-background-insets: 1 0 1 1, 2 1 2 2, -1.4 0 -1.4 -1.4, 2.6 1.6 2.6 2.6;
  853. -fx-background-radius: 2 0 0 2, 1 0 0 1, 4 0 0 4, 0;
  854. }
  855. .split-menu-button:focused > .arrow-button {
  856. -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
  857. -fx-background-insets: 1, 2, -1.4, 2.6;
  858. -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 4 4 0, 0;
  859. }
  860.  
  861. /*******************************************************************************
  862. * *
  863. * ToolBar *
  864. * *
  865. ******************************************************************************/
  866.  
  867. .tool-bar:vertical { /* left */
  868. -fx-background-color:
  869. -fx-outer-border,
  870. linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%);
  871. -fx-background-insets: 0, 0 0 0 1;
  872. -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
  873. -fx-spacing: 0.333em; /* 4 */
  874. -fx-alignment: TOP_LEFT;
  875. }
  876. .tool-bar { /* top */
  877. TOP-COLOR: ladder(
  878. -fx-base,
  879. derive(-fx-base,0%) 0%,
  880. derive(-fx-base,46%) 100%
  881. );
  882. -fx-background-color:
  883. linear-gradient(to bottom, derive(TOP-COLOR,25%) 0%, -fx-outer-border 90%),
  884. linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
  885. -fx-background-insets: 0 0 0 0, 1 0 1 0;
  886. -fx-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6 5 6 */
  887. -fx-spacing: 0.333em; /* 4 */
  888. -fx-alignment: CENTER_LEFT;
  889. }
  890. .tool-bar:vertical.right {
  891. -fx-background-insets: 0, 0 1 0 0;
  892. }
  893. .tool-bar.bottom {
  894. -fx-background-color:
  895. -fx-outer-border,
  896. derive(TOP-COLOR,25%),
  897. linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
  898. -fx-background-insets: 0, 1 0 0 0, 2 0 0 0;
  899. }
  900. .tool-bar > .container > .separator {
  901. -fx-orientation: vertical;
  902. }
  903. .tool-bar:vertical > .container > .separator {
  904. -fx-orientation: horizontal;
  905. }
  906. .tool-bar-overflow-button {
  907. -fx-padding: 0 0.75em 0 0 ;
  908. }
  909. .tool-bar:vertical > .tool-bar-overflow-button {
  910. -fx-padding: 0 0 0.75em 0 ;
  911. }
  912. .tool-bar-overflow-button > .arrow {
  913. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  914. -fx-background-insets: 1 0 -1 0, 0;
  915. -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
  916. -fx-shape: "M337.273,297.622l-0.016,1.069l2.724,2.639l-2.723,2.628l0.015,1.048h0.881l3.81-3.685l-3.788-3.699H337.273z M343.783,297.622h-0.902l-0.015,1.069l2.724,2.639l-2.724,2.628l0.015,1.048h0.882l3.809-3.685L343.783,297.622z" ;
  917. }
  918.  
  919. .tool-bar-overflow-button:focused > .arrow {
  920. -fx-background-color: -fx-mark-highlight-color, derive(-fx-accent, -15%);
  921. -fx-background-insets: 1 0 -1 0, 0;
  922. }
  923.  
  924. .tool-bar-overflow-button:hover > .arrow {
  925. -fx-background-color: -fx-mark-highlight-color, derive(-fx-hover-base, -35%);
  926. -fx-background-insets: 1 0 -1 0, 0;
  927. }
  928.  
  929. /*******************************************************************************
  930. * *
  931. * Slider *
  932. * *
  933. ******************************************************************************/
  934.  
  935. .slider .thumb {
  936. -fx-background-color:
  937. linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
  938. -fx-inner-border,
  939. -fx-body-color;
  940. -fx-background-insets: 0, 1, 2;
  941. -fx-background-radius: 1.0em; /* makes sure this remains circular */
  942. -fx-padding: 0.583333em; /* 7 */
  943. -fx-effect: dropshadow(two-pass-box , rgba(0, 0, 0, 0.1), 5, 0.0 , 0, 2);
  944. }
  945. .slider:focused .thumb {
  946. -fx-background-radius: 1.0em; /* makes sure this remains circular */
  947. }
  948. .slider .track {
  949. -fx-background-color:
  950. -fx-shadow-highlight-color,
  951. linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
  952. linear-gradient(to bottom,
  953. derive(-fx-control-inner-background, -9%),
  954. derive(-fx-control-inner-background, 0%),
  955. derive(-fx-control-inner-background, -5%),
  956. derive(-fx-control-inner-background, -12%)
  957. );
  958. -fx-background-insets: 0 0 -1 0, 0, 1;
  959. -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
  960. -fx-padding: 0.25em; /* 3 */
  961. }
  962. .slider:vertical .track {
  963. -fx-background-color:
  964. -fx-shadow-highlight-color,
  965. -fx-text-box-border,
  966. linear-gradient(to right,
  967. derive(-fx-control-inner-background, -9%),
  968. -fx-control-inner-background,
  969. derive(-fx-control-inner-background, -9%)
  970. );
  971. }
  972. .slider .axis {
  973. -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
  974. -fx-tick-length: 5px;
  975. -fx-minor-tick-length: 3px;
  976. -fx-border-color: null;
  977. }
  978.  
  979. /*******************************************************************************
  980. * *
  981. * ScrollBar *
  982. * *
  983. ******************************************************************************/
  984.  
  985. .scroll-bar:horizontal {
  986. -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
  987. -fx-background-insets: 0, 1 0 1 0;
  988. }
  989. .scroll-bar:vertical {
  990. -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
  991. -fx-background-insets: 0, 0 1 0 1;
  992. }
  993. .scroll-bar:focused {
  994. -fx-background-color:
  995. -fx-focus-color,
  996. linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
  997. -fx-faint-focus-color,
  998. linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
  999. -fx-background-insets: -0.2, 1, -1.4, 2.6;
  1000. }
  1001. .scroll-bar:vertical:focused {
  1002. -fx-background-color:
  1003. -fx-focus-color,
  1004. linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
  1005. -fx-faint-focus-color,
  1006. linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
  1007. }
  1008. .scroll-bar > .thumb {
  1009. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1010. /*-fx-background-insets: 1, 2, 3;*/
  1011. -fx-background-insets: 2, 3, 4;
  1012. /*-fx-background-radius: 0.416667em, 0.333333em, 0.25em; *//* 5, 4,3 */
  1013. -fx-background-radius: 3, 2, 1;
  1014. }
  1015. .scroll-bar:vertical > .thumb {
  1016. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color-to-right;
  1017. }
  1018. .scroll-bar > .increment-button,
  1019. .scroll-bar > .decrement-button {
  1020. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1021. -fx-color: transparent;
  1022. -fx-padding: 0.25em; /* 3px */
  1023. }
  1024. .scroll-bar:horizontal > .increment-button,
  1025. .scroll-bar:horizontal > .decrement-button {
  1026. -fx-background-insets: 2 1 2 1, 3 2 3 2, 4 3 4 3;
  1027. }
  1028. .scroll-bar:vertical > .increment-button,
  1029. .scroll-bar:vertical > .decrement-button {
  1030. -fx-background-insets: 1 2 1 2, 2 3 2 3, 3 4 3 4;
  1031. }
  1032. .scroll-bar > .increment-button > .increment-arrow,
  1033. .scroll-bar > .decrement-button > .decrement-arrow {
  1034. -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-45%);
  1035. }
  1036. .scroll-bar > .increment-button:hover > .increment-arrow,
  1037. .scroll-bar > .decrement-button:hover > .decrement-arrow {
  1038. -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-50%);
  1039. }
  1040. .scroll-bar > .increment-button:pressed > .increment-arrow,
  1041. .scroll-bar > .decrement-button:pressed > .decrement-arrow {
  1042. -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-55%);
  1043. }
  1044. .scroll-bar:horizontal > .decrement-button > .decrement-arrow {
  1045. -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
  1046. -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
  1047. -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
  1048. /*-fx-background-insets: 2 0 -2 0, 0;*/
  1049. }
  1050. .scroll-bar:horizontal > .increment-button > .increment-arrow {
  1051. -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
  1052. -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
  1053. -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
  1054. /*-fx-background-insets: 2 0 -2 0, 0;*/
  1055. }
  1056. .scroll-bar:vertical > .decrement-button > .decrement-arrow {
  1057. -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
  1058. -fx-shape: "M1.929,4L0.5,3.998L4.5,1l4,2.998L7.07,4L4.5,2.024L1.929,4z";
  1059. -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
  1060. /*-fx-background-insets: 2 0 -2 0, 0;*/
  1061. }
  1062. .scroll-bar:vertical > .increment-button > .increment-arrow {
  1063. -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
  1064. -fx-shape: "M7.071,1L8.5,1.002L4.5,4l-4-2.998L1.93,1L4.5,2.976L7.071,1z";
  1065. -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
  1066. /*-fx-background-insets: 2 0 -2 0, 0;*/
  1067. }
  1068.  
  1069. /*******************************************************************************
  1070. * *
  1071. * ScrollPane *
  1072. * *
  1073. ******************************************************************************/
  1074. .scroll-pane > .viewport {
  1075. -fx-background-color: -fx-background;
  1076. }
  1077. .scroll-pane > .scroll-bar:horizontal {
  1078. -fx-background-insets: 0 1 1 1, 1;
  1079. -fx-padding: 0 1 0 1;
  1080. }
  1081. .scroll-pane > .scroll-bar:horizontal > .increment-button,
  1082. .scroll-pane > .scroll-bar:horizontal > .decrement-button {
  1083. -fx-padding: 0.166667em 0.25em 0.25em 0.25em; /* 2 3 3 3 */
  1084. }
  1085. .scroll-pane > .scroll-bar:vertical > .increment-button,
  1086. .scroll-pane > .scroll-bar:vertical > .decrement-button {
  1087. -fx-padding: 0.25em 0.25em 0.25em 0.166667em; /* 3 3 3 2 */
  1088. }
  1089. .scroll-pane > .scroll-bar:vertical {
  1090. -fx-background-insets: 1 1 1 0, 1;
  1091. -fx-padding: 1 0 1 0;
  1092. }
  1093. .scroll-pane > .corner {
  1094. -fx-background-color: derive(-fx-base,-1%);
  1095. -fx-background-insets: 0 1 1 0;
  1096. }
  1097. /* new styleclass for edge to edge scrollpanes that don't want to draw a border */
  1098. .scroll-pane.edge-to-edge,
  1099. .tab-pane > * > .scroll-pane {
  1100. -fx-background-color: -fx-background;
  1101. -fx-background-insets: 0;
  1102. -fx-padding: 0;
  1103. }
  1104. .scroll-pane.edge-to-edge > .scroll-bar,
  1105. .tab-pane > * > .scroll-pane > .scroll-bar,
  1106. .titled-pane > .content > .scroll-pane > .scroll-bar {
  1107. -fx-background-insets: 0;
  1108. -fx-padding: 0;
  1109. }
  1110. .scroll-pane.edge-to-edge > .scroll-bar > .increment-button,
  1111. .scroll-pane.edge-to-edge > .scroll-bar > .decrement-button,
  1112. .tab-pane > * > .scroll-pane > .scroll-bar > .increment-button,
  1113. .tab-pane > * > .scroll-pane > .scroll-bar > .decrement-button,
  1114. .titled-pane > .content > .scroll-pane > .scroll-bar > .increment-button,
  1115. .titled-pane > .content > .scroll-pane > .scroll-bar > .decrement-button {
  1116. -fx-padding: 0.25em; /* 3px */
  1117. }
  1118.  
  1119. /*******************************************************************************
  1120. * *
  1121. * Separator *
  1122. * *
  1123. ******************************************************************************/
  1124.  
  1125. .separator:horizontal .line {
  1126. -fx-border-color: -fx-text-box-border transparent transparent transparent,
  1127. -fx-shadow-highlight-color transparent transparent transparent;
  1128. -fx-border-insets: 0, 1 0 0 0;
  1129. }
  1130. .separator:vertical .line {
  1131. -fx-border-color: transparent transparent transparent -fx-shadow-highlight-color,
  1132. transparent transparent transparent -fx-text-box-border;
  1133. -fx-border-width: 3, 1;
  1134. -fx-border-insets: 0, 0 0 0 1;
  1135. }
  1136.  
  1137. /*******************************************************************************
  1138. * *
  1139. * ProgressBar *
  1140. * *
  1141. ******************************************************************************/
  1142.  
  1143. .progress-bar {
  1144. -fx-indeterminate-bar-length: 60;
  1145. -fx-indeterminate-bar-escape: true;
  1146. -fx-indeterminate-bar-flip: true;
  1147. -fx-indeterminate-bar-animation-time: 2;
  1148. }
  1149. .progress-bar > .bar {
  1150. -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
  1151. -fx-background-insets: 3 3 4 3;
  1152. /*-fx-background-radius: 0.583em; *//* 7 */
  1153. -fx-background-radius: 2;
  1154. -fx-padding: 0.75em;
  1155. }
  1156. .progress-bar:indeterminate > .bar {
  1157. -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
  1158. }
  1159. .progress-bar > .track {
  1160. -fx-background-color:
  1161. -fx-shadow-highlight-color,
  1162. linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
  1163. linear-gradient(to bottom,
  1164. derive(-fx-control-inner-background, -7%),
  1165. derive(-fx-control-inner-background, 0%),
  1166. derive(-fx-control-inner-background, -3%),
  1167. derive(-fx-control-inner-background, -9%)
  1168. );
  1169. -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
  1170. -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
  1171. }
  1172.  
  1173. /*******************************************************************************
  1174. * *
  1175. * ProgressIndicator *
  1176. * *
  1177. ******************************************************************************/
  1178.  
  1179. .progress-indicator {
  1180. -fx-indeterminate-segment-count: 12;
  1181. -fx-spin-enabled: true;
  1182. }
  1183. .progress-indicator > .determinate-indicator > .indicator {
  1184. -fx-background-color: -fx-box-border,
  1185. radial-gradient(center 50% 50%, radius 50%, -fx-control-inner-background 70%, derive(-fx-control-inner-background, -9%) 100%),
  1186. -fx-control-inner-background;
  1187. -fx-background-insets: 0, 1, 5 2 1 2;
  1188. -fx-padding: 0.166667em; /* 2px */
  1189. }
  1190. .progress-indicator > .determinate-indicator > .progress {
  1191. -fx-background-color: -fx-accent;
  1192. -fx-padding: 0.083333em; /* 1px */
  1193. }
  1194. .progress-indicator > .determinate-indicator > .tick {
  1195. -fx-background-color: white;
  1196. -fx-background-insets: 0;
  1197. -fx-padding: 0.666667em; /* 8 */
  1198. -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
  1199. }
  1200. .progress-indicator > .percentage {
  1201. -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
  1202. -fx-fill: -fx-text-background-color;
  1203. }
  1204. .progress-indicator:indeterminate .segment {
  1205. -fx-background-color: -fx-accent;
  1206. }
  1207. .progress-indicator:indeterminate .segment0 {
  1208. -fx-shape:"M41.98 14.74 a3.5,3.5 0 1,1 0,1 Z";
  1209. }
  1210. .progress-indicator:indeterminate .segment1 {
  1211. -fx-shape:"M33.75 6.51 a3.5,3.5 0 1,1 0,1 Z";
  1212. }
  1213. .progress-indicator:indeterminate .segment2 {
  1214. -fx-shape:"M22.49 3.5 a3.5,3.5 0 1,1 0,1 Z";
  1215. }
  1216. .progress-indicator:indeterminate .segment3 {
  1217. -fx-shape:"M11.24 6.51 a3.5,3.5 0 1,1 0,1 Z";
  1218. }
  1219. .progress-indicator:indeterminate .segment4 {
  1220. -fx-shape:"M3.01 14.74 a3.5,3.5 0 1,1 0,1 Z";
  1221. }
  1222. .progress-indicator:indeterminate .segment5 {
  1223. -fx-shape:"M0.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
  1224. }
  1225. .progress-indicator:indeterminate .segment6 {
  1226. -fx-shape:"M3.01 37.25 a3.5,3.5 0 1,1 0,1 Z";
  1227. }
  1228. .progress-indicator:indeterminate .segment7 {
  1229. -fx-shape:"M11.25 45.48 a3.5,3.5 0 1,1 0,1 Z";
  1230. }
  1231. .progress-indicator:indeterminate .segment8 {
  1232. -fx-shape:"M22.5 48.5 a3.5,3.5 0 1,1 0,1 Z";
  1233. }
  1234. .progress-indicator:indeterminate .segment9 {
  1235. -fx-shape:"M33.75 45.48 a3.5,3.5 0 1,1 0,1 Z";
  1236. }
  1237. .progress-indicator:indeterminate .segment10 {
  1238. -fx-shape:"M41.98 37.25 a3.5,3.5 0 1,1 0,1 Z";
  1239. }
  1240. .progress-indicator:indeterminate .segment11 {
  1241. -fx-shape:"M45.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
  1242. }
  1243.  
  1244. /*******************************************************************************
  1245. * *
  1246. * Text COMMON *
  1247. * *
  1248. ******************************************************************************/
  1249.  
  1250. .text-input {
  1251. -fx-text-fill: -fx-text-inner-color;
  1252. -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
  1253. -fx-highlight-text-fill: -fx-text-inner-color;
  1254. -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
  1255. -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
  1256. linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
  1257. -fx-background-insets: 0, 1;
  1258. -fx-background-radius: 3, 2;
  1259. -fx-cursor: text;
  1260. -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
  1261. }
  1262. .text-input:focused {
  1263. -fx-highlight-fill: -fx-accent;
  1264. -fx-highlight-text-fill: white;
  1265. -fx-background-color:
  1266. -fx-focus-color,
  1267. -fx-control-inner-background,
  1268. -fx-faint-focus-color,
  1269. linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
  1270. -fx-background-insets: -0.2, 1, -1.4, 3;
  1271. -fx-background-radius: 3, 2, 4, 0;
  1272. -fx-prompt-text-fill: transparent;
  1273. }
  1274.  
  1275. /*******************************************************************************
  1276. * *
  1277. * TextArea *
  1278. * *
  1279. ******************************************************************************/
  1280.  
  1281. .text-area {
  1282. -fx-padding: 0;
  1283. -fx-cursor: default;
  1284. -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
  1285. derive(-fx-base,-1%);
  1286. }
  1287. .text-area > .scroll-pane {
  1288. -fx-background-color: null;
  1289. }
  1290. .text-area > .scroll-pane > .scroll-bar:horizontal {
  1291. -fx-background-radius: 0 0 2 2;
  1292. }
  1293. .text-area > .scroll-pane > .scroll-bar:vertical {
  1294. -fx-background-radius: 0 2 2 0;
  1295. }
  1296. .text-area > .scroll-pane > .corner {
  1297. -fx-background-radius: 0 0 2 0;
  1298. }
  1299. .text-area .content {
  1300. /*the is 1px less top and bottom than TextInput because of scrollpane border */
  1301. -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
  1302. -fx-cursor: text;
  1303. -fx-background-color:
  1304. linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
  1305. -fx-background-radius: 2;
  1306. }
  1307. .text-area:focused .content {
  1308. -fx-background-color:
  1309. -fx-control-inner-background,
  1310. -fx-faint-focus-color,
  1311. linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
  1312. -fx-background-insets: 0, 0, 2;
  1313. -fx-background-radius: 2, 1, 0;
  1314. }
  1315.  
  1316. /*******************************************************************************
  1317. * *
  1318. * HTML Editor *
  1319. * *
  1320. ******************************************************************************/
  1321.  
  1322. .html-editor-foreground {
  1323. -fx-color-label-visible: false;
  1324. -fx-color-rect-x: 1;
  1325. -fx-color-rect-y: 1;
  1326. -fx-color-rect-width: 4;
  1327. -fx-color-rect-height: 3;
  1328. -fx-graphic: url("HTMLEditor-Text-Color.png");
  1329. }
  1330. .html-editor-background {
  1331. -fx-color-label-visible: false;
  1332. -fx-color-rect-x: 1;
  1333. -fx-color-rect-y: 1;
  1334. -fx-color-rect-width: 4;
  1335. -fx-color-rect-height: 3;
  1336. -fx-graphic: url("HTMLEditor-Background-Color.png");
  1337. }
  1338. .color-picker.html-editor-foreground > .color-picker-label > .picker-color > .picker-color-rect,
  1339. .color-picker.html-editor-background > .color-picker-label > .picker-color > .picker-color-rect {
  1340. -fx-stroke: null;
  1341. }
  1342. .html-editor .button ,
  1343. .html-editor .toggle-button {
  1344. -fx-padding: 0.333333em 0.416667em 0.333333em 0.416667em; /* 4 5 4 5 */
  1345. }
  1346. .html-editor-cut {
  1347. -fx-graphic: url("HTMLEditor-Cut.png");
  1348. }
  1349. .html-editor-copy {
  1350. -fx-graphic: url("HTMLEditor-Copy.png");
  1351. }
  1352. .html-editor-paste {
  1353. -fx-graphic: url("HTMLEditor-Paste.png");
  1354. }
  1355. .html-editor-align-left {
  1356. -fx-graphic: url("HTMLEditor-Left.png");
  1357. }
  1358. .html-editor-align-center {
  1359. -fx-graphic: url("HTMLEditor-Center.png");
  1360. }
  1361. .html-editor-align-right {
  1362. -fx-graphic: url("HTMLEditor-Right.png");
  1363. }
  1364. .html-editor-align-justify {
  1365. -fx-graphic: url("HTMLEditor-Justify.png");
  1366. }
  1367. .html-editor-outdent {
  1368. -fx-graphic: url("HTMLEditor-Outdent.png");
  1369. }
  1370. .html-editor-outdent:dir(rtl) {
  1371. -fx-graphic: url("HTMLEditor-Outdent-rtl.png");
  1372. }
  1373. .html-editor-indent {
  1374. -fx-graphic: url("HTMLEditor-Indent.png");
  1375. }
  1376. .html-editor-indent:dir(rtl) {
  1377. -fx-graphic: url("HTMLEditor-Indent-rtl.png");
  1378. }
  1379. .html-editor-bullets {
  1380. -fx-graphic: url("HTMLEditor-Bullets.png");
  1381. }
  1382. .html-editor-bullets:dir(rtl) {
  1383. -fx-graphic: url("HTMLEditor-Bullets-rtl.png");
  1384. }
  1385. .html-editor-numbers {
  1386. -fx-graphic: url("HTMLEditor-Numbered.png");
  1387. }
  1388. .html-editor-numbers:dir(rtl) {
  1389. -fx-graphic: url("HTMLEditor-Numbered-rtl.png");
  1390. }
  1391. .html-editor-bold {
  1392. -fx-graphic: url("HTMLEditor-Bold.png");
  1393. }
  1394. .html-editor-italic {
  1395. -fx-graphic: url("HTMLEditor-Italic.png");
  1396. }
  1397. .html-editor-underline {
  1398. -fx-graphic: url("HTMLEditor-Underline.png");
  1399. }
  1400. .html-editor-strike {
  1401. -fx-graphic: url("HTMLEditor-Strikethrough.png");
  1402. }
  1403. .html-editor-hr {
  1404. -fx-graphic: url("HTMLEditor-Break.png");
  1405. }
  1406.  
  1407. /*******************************************************************************
  1408. * *
  1409. * PopupMenu *
  1410. * *
  1411. ******************************************************************************/
  1412.  
  1413. .context-menu {
  1414. -fx-background-color:
  1415. linear-gradient(to bottom,
  1416. derive(-fx-color,-17%),
  1417. derive(-fx-color,-30%)
  1418. ),
  1419. -fx-control-inner-background;
  1420. -fx-background-insets: 0, 1;
  1421. -fx-padding: 0.333333em 0.083333em 0.333333em 0.083333em; /* 4 1 8 1 */
  1422. -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
  1423. }
  1424. .context-menu .separator:horizontal .line {
  1425. -fx-border-color: -fx-box-border transparent transparent transparent;
  1426. -fx-border-insets: 1 0 0 0;
  1427. }
  1428. .context-menu > .scroll-arrow {
  1429. -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
  1430. -fx-background-color: transparent;
  1431. }
  1432. .context-menu > .scroll-arrow:hover {
  1433. -fx-background: -fx-selection-bar;
  1434. -fx-background-color: -fx-background;
  1435. -fx-text-fill: -fx-text-background-color;
  1436. }
  1437. .context-menu:show-mnemonics > .mnemonic-underline {
  1438. -fx-stroke: -fx-text-fill;
  1439. }
  1440.  
  1441. /*******************************************************************************
  1442. * *
  1443. * Menu *
  1444. * *
  1445. ******************************************************************************/
  1446.  
  1447. .menu {
  1448. -fx-background-color: transparent;
  1449. -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
  1450. }
  1451. .menu:show-mnemonics > .mnemonic-underline {
  1452. -fx-stroke: -fx-text-fill;
  1453. }
  1454. .menu > .right-container > .arrow {
  1455. -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
  1456. -fx-background-color: -fx-mark-color;
  1457. -fx-shape: "M0,-4L4,0L0,4Z";
  1458. -fx-scale-shape: false;
  1459. }
  1460. .menu:focused > .right-container > .arrow {
  1461. -fx-background-color: -fx-focused-mark-color;
  1462. }
  1463. .menu-up-arrow {
  1464. -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */
  1465. -fx-background-color: derive(-fx-color,-2%);
  1466. -fx-shape: "M0 1 L1 1 L.5 0 Z";
  1467. -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
  1468. }
  1469. .menu-down-arrow {
  1470. -fx-background-color: derive(-fx-color,-2%);
  1471. -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em; /* 8 5 0 5 */
  1472. -fx-shape: "M0 0 L1 0 L.5 1 Z";
  1473. -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
  1474. }
  1475.  
  1476.  
  1477. /*******************************************************************************
  1478. * *
  1479. * MenuBar *
  1480. * *
  1481. ******************************************************************************/
  1482.  
  1483. .menu-bar {
  1484. -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
  1485. -fx-spacing: 0.166667em; /* 2 */
  1486. -fx-background-color:
  1487. linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
  1488. linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
  1489. -fx-background-insets: 0 0 0 0, 1 0 1 0;
  1490. -fx-background-radius: 0, 0 ;
  1491. }
  1492. /* Show nothing for background of normal menu button in a menu bar */
  1493. .menu-bar > .container > .menu-button {
  1494. -fx-background-radius: 0;
  1495. -fx-background-color: transparent;
  1496. -fx-background-insets: 0;
  1497. }
  1498. /* Change padding of menu buttons when in menu bar */
  1499. .menu-bar > .container > .menu-button > .label {
  1500. -fx-padding: 0;
  1501. }
  1502. /* Hide the down arrow for a menu placed in a menubar */
  1503. .menu-bar > .container > .menu-button > .arrow-button > .arrow {
  1504. -fx-padding: 0.167em 0 0.250em 0; /* 2 0 3 0 */
  1505. -fx-background-color: transparent;
  1506. -fx-shape: null;
  1507. }
  1508. .menu-bar > .container > .menu > .arrow-button {
  1509. -fx-padding: 0.500em 0 0.500em 0; /* 6 0 6 0 */
  1510. }
  1511. .menu-bar > .container > .menu-button:hover,
  1512. .menu-bar > .container > .menu-button:focused,
  1513. .menu-bar > .container > .menu-button:showing {
  1514. -fx-background: -fx-selection-bar;
  1515. -fx-background-color: -fx-background;
  1516. }
  1517. .menu-bar > .container > .menu-button:hover > .label,
  1518. .menu-bar > .container > .menu-button:focused > .label,
  1519. .menu-bar > .container > .menu-button:showing > .label {
  1520. -fx-text-fill: -fx-text-background-color;
  1521. }
  1522. .menu-bar:show-mnemonics > .mnemonic-underline {
  1523. -fx-stroke: -fx-text-fill;
  1524. }
  1525.  
  1526. /*******************************************************************************
  1527. * *
  1528. * MenuItem *
  1529. * *
  1530. ******************************************************************************/
  1531.  
  1532. .menu-item {
  1533. -fx-background-color: transparent;
  1534. -fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em; /* 4 5 4 5 */
  1535. }
  1536. .menu-item > .left-container {
  1537. -fx-padding: 0.458em 0.791em 0.458em 0.458em;
  1538. }
  1539. .menu-item > .graphic-container {
  1540. -fx-padding: 0em 0.333em 0em 0em;
  1541. }
  1542. .menu-item >.label {
  1543. -fx-padding: 0em 0.5em 0em 0em;
  1544. -fx-text-fill: -fx-text-base-color;
  1545. }
  1546. .menu-item:focused {
  1547. -fx-background: -fx-selection-bar;
  1548. -fx-background-color: -fx-background;
  1549. -fx-text-fill: -fx-text-background-color;
  1550. }
  1551. .menu-item:focused > .label {
  1552. -fx-text-fill: -fx-focused-text-base-color;
  1553. }
  1554. .menu-item > .right-container {
  1555. -fx-padding: 0em 0em 0em 0.5em;
  1556. }
  1557. .menu-item:show-mnemonics > .mnemonic-underline {
  1558. -fx-stroke: -fx-text-fill;
  1559. }
  1560. .radio-menu-item:checked > .left-container > .radio {
  1561. -fx-background-color: -fx-mark-color;
  1562. -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
  1563. -fx-scale-shape: false;
  1564. }
  1565. .radio-menu-item:focused:checked > .left-container > .radio {
  1566. -fx-background-color: -fx-focused-mark-color;
  1567. }
  1568. .check-menu-item:checked > .left-container > .check {
  1569. -fx-background-color: -fx-mark-color;
  1570. -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
  1571. -fx-scale-shape: false;
  1572. }
  1573. .check-menu-item:focused:checked > .left-container > .check {
  1574. -fx-background-color: -fx-focused-mark-color;
  1575. }
  1576. /*******************************************************************************
  1577. * *
  1578. * ChoiceBox *
  1579. * *
  1580. ******************************************************************************/
  1581.  
  1582. /*.choice-box > .open-button > .arrow {
  1583. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1584. -fx-background-insets: 1 0 -1 0, 0;
  1585. -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; 2 3.5 2 3.5
  1586. -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  1587. }*/
  1588. .choice-box > .context-menu {
  1589. -fx-background-radius: 6, 5, 4;
  1590. }
  1591.  
  1592. /*******************************************************************************
  1593. * *
  1594. * TabPane *
  1595. * *
  1596. ******************************************************************************/
  1597.  
  1598. .tab-pane {
  1599. -fx-tab-min-height: 1.8333em; /* 22 */
  1600. -fx-tab-max-height: 1.8333em; /* 22 */
  1601. }
  1602. .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
  1603. -fx-alignment: CENTER;
  1604. -fx-text-fill: -fx-text-base-color;
  1605. }
  1606. .tab-pane > .tab-header-area > .headers-region > .tab {
  1607. -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
  1608. -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
  1609. -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
  1610. }
  1611. .tab-pane > .tab-header-area > .headers-region > .tab:top {
  1612. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1613. }
  1614. .tab-pane > .tab-header-area > .headers-region > .tab:right {
  1615. -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
  1616. }
  1617. .tab-pane > .tab-header-area > .headers-region > .tab:bottom {
  1618. -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
  1619. }
  1620. .tab-pane > .tab-header-area > .headers-region > .tab:left {
  1621. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1622. }
  1623. .tab-pane > .tab-header-area > .headers-region > .tab:hover {
  1624. -fx-color: -fx-hover-base;
  1625. }
  1626. .tab-pane > .tab-header-area > .headers-region > .tab:selected {
  1627. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background;
  1628. -fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
  1629. }
  1630. .tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
  1631. -fx-border-width: 1, 1;
  1632. -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
  1633. -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
  1634. -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
  1635. }
  1636. .tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator {
  1637. -fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2;
  1638. }
  1639. .tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
  1640. -fx-color: -fx-base;
  1641. }
  1642. .tab-pane > .tab-header-area > .tab-header-background {
  1643. /* TODO should not be using text-box-border I think? */
  1644. -fx-background-color:
  1645. -fx-outer-border,
  1646. -fx-text-box-border,
  1647. linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
  1648. }
  1649. .tab-pane:top > .tab-header-area > .tab-header-background {
  1650. -fx-background-insets: 0, 0 0 1 0, 1;
  1651. }
  1652. .tab-pane:bottom > .tab-header-area > .tab-header-background {
  1653. -fx-background-insets: 0, 1 0 0 0, 1;
  1654. }
  1655. .tab-pane:left > .tab-header-area > .tab-header-background {
  1656. -fx-background-insets: 0, 0 1 0 0, 1;
  1657. }
  1658. .tab-pane:right > .tab-header-area > .tab-header-background {
  1659. -fx-background-insets: 0, 0 0 0 1, 1;
  1660. }
  1661. .tab-pane:top > .tab-header-area {
  1662. /*-fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; *//* 5 2 0 5 */
  1663. -fx-padding: 0.416667em 5 0.0em 0.416667em; /* 5 2 0 5 */
  1664. }
  1665. .tab-pane:bottom > .tab-header-area {
  1666. -fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */
  1667. }
  1668. .tab-pane:left > .tab-header-area {
  1669. -fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */
  1670. }
  1671. .tab-pane:right > .tab-header-area {
  1672. -fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */
  1673. }
  1674. /* TODO: scaling the shape seems to make it way too large */
  1675. .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
  1676. -fx-background-color: -fx-mark-color;
  1677. -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
  1678. -fx-scale-shape: false;
  1679. -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
  1680. }
  1681. .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
  1682. -fx-background-color: derive(-fx-mark-color, -30%);
  1683. }
  1684. /* CONTROL BUTTONS */
  1685. .tab-pane > .tab-header-area > .control-buttons-tab > .container {
  1686. -fx-padding: 3 0 0 0;
  1687. }
  1688. .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
  1689. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1690. -fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2;
  1691. -fx-padding: 4 4 9 4;
  1692. -fx-background-radius: 10;
  1693. }
  1694. .tab-pane:bottom > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
  1695. -fx-padding: -5 4 4 4; /* TODO convert to ems */
  1696. }
  1697. /* FLOATING TABS CUSTOMISATION */
  1698. .tab-pane.floating > .tab-header-area > .tab-header-background {
  1699. -fx-background-color: null;
  1700. }
  1701. .tab-pane.floating > .tab-header-area {
  1702. -fx-background-color: null;
  1703. }
  1704. .tab-pane.floating > .tab-content-area {
  1705. -fx-background-color: -fx-outer-border, -fx-background;
  1706. -fx-background-insets: 0, 1;
  1707. -fx-background-radius: 2, 0;
  1708. -fx-padding: 2;
  1709. }
  1710.  
  1711. /*******************************************************************************
  1712. * *
  1713. * ComboBox *
  1714. * *
  1715. ******************************************************************************/
  1716.  
  1717. /* Customise the ListCell that appears in the ComboBox button itself */
  1718. .combo-box > .list-cell {
  1719. -fx-background: transparent;
  1720. -fx-background-color: transparent;
  1721. -fx-text-fill: -fx-text-base-color;
  1722. -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
  1723. }
  1724. .combo-box-base > .arrow-button {
  1725. -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
  1726. -fx-padding: 0.5em 0.667em 0.5em 0.833333em; /* 6 8 6 10 */
  1727. -fx-background-color: transparent;
  1728. }
  1729.  
  1730. /*******************************************************************************
  1731. * *
  1732. * Editable ComboBox *
  1733. * *
  1734. * The editable ComboBox TextBox inherits its properties from the TextBox *
  1735. * Control. Only the properties with values that are different from the *
  1736. * TextBox are specified here. *
  1737. * *
  1738. ******************************************************************************/
  1739.  
  1740. .combo-box-base:editable > .arrow-button,
  1741. .date-picker > .arrow-button {
  1742. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1743. -fx-background-insets: 1 1 1 0, 1, 2;
  1744. -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
  1745. }
  1746. .combo-box-base:editable > .text-field,
  1747. .date-picker > .text-field {
  1748. -fx-background-color: -fx-control-inner-background;
  1749. -fx-background-insets: 1 0 1 1;
  1750. -fx-background-radius: 2 0 0 2;
  1751. }
  1752. .combo-box-base:editable:contains-focus,
  1753. .date-picker:contains-focus {
  1754. -fx-background-color: -fx-focus-color;
  1755. -fx-background-insets: -0.2;
  1756. -fx-background-radius: 3;
  1757. }
  1758. .combo-box-base:editable:focused > .text-field,
  1759. .combo-box-base:editable > .text-field:focused,
  1760. .date-picker:focused > .text-field,
  1761. .date-picker > .text-field:focused {
  1762. -fx-background-color:
  1763. -fx-control-inner-background,
  1764. -fx-faint-focus-color,
  1765. linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
  1766. -fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
  1767. -fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
  1768. }
  1769. .combo-box-base:editable:contains-focus > .arrow-button,
  1770. .date-picker:contains-focus > .arrow-button {
  1771. -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
  1772. -fx-background-insets: 1, 2, 1, 2.6;
  1773. -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
  1774. }
  1775.  
  1776. /* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */
  1777.  
  1778. .combo-box-popup > .list-view {
  1779. -fx-background-color:
  1780. linear-gradient(to bottom,
  1781. derive(-fx-color,-17%),
  1782. derive(-fx-color,-30%)
  1783. ),
  1784. -fx-control-inner-background;
  1785. -fx-background-insets: 0, 1;
  1786. -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
  1787. }
  1788. .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
  1789. -fx-padding: 4 0 4 5;
  1790. /* No alternate highlighting */
  1791. -fx-background: -fx-control-inner-background;
  1792. }
  1793. .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
  1794. -fx-background: -fx-accent;
  1795. -fx-background-color: -fx-selection-bar;
  1796. }
  1797. .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
  1798. .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
  1799. -fx-background: -fx-accent;
  1800. -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
  1801. -fx-background-insets: 0, 1, 2;
  1802. }
  1803. .combo-box-popup > .list-view > .placeholder > .label {
  1804. -fx-text-fill: derive(-fx-control-inner-background,-30%);
  1805. }
  1806.  
  1807. /*******************************************************************************
  1808. * *
  1809. * TitledPane *
  1810. * *
  1811. ******************************************************************************/
  1812.  
  1813. .titled-pane {
  1814. -fx-text-fill: -fx-text-base-color;
  1815. }
  1816. .titled-pane:focused {
  1817. -fx-color: -fx-base;
  1818. }
  1819. .titled-pane > .title {
  1820. -fx-background-color:
  1821. linear-gradient(to bottom,
  1822. derive(-fx-color,-15%) 95%,
  1823. derive(-fx-color,-25%) 100%
  1824. ),
  1825. -fx-inner-border, -fx-body-color;
  1826. -fx-background-insets: 0, 1, 2;
  1827. -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
  1828. -fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */
  1829. }
  1830. /* alternative focus using the ring around the entire title area */
  1831. /*.titled-pane:focused > .title {
  1832. -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color;
  1833. -fx-background-insets: 0, 0.7, 2, 3;
  1834. }*/
  1835. /* focus purely on the arrow */
  1836. .titled-pane:focused > .title > .arrow-button > .arrow {
  1837. -fx-background-color: -fx-focus-color, -fx-mark-color;
  1838. -fx-background-insets: -1, 0;
  1839. -fx-effect: dropshadow(two-pass-box , -fx-focus-color, 5, 0.2 , 0, 0);
  1840. }
  1841. .titled-pane > .title > .arrow-button {
  1842. -fx-background-color: null;
  1843. -fx-background-insets: 0;
  1844. -fx-background-radius: 0;
  1845. -fx-padding: 0.0em 0.583em 0.0em 0.0em; /* 0 7 0 0 */
  1846. }
  1847. .titled-pane > .title > .arrow-button > .arrow {
  1848. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  1849. -fx-background-insets: 1 0 -1 0, 0;
  1850. -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
  1851. -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  1852. }
  1853. .titled-pane > .title:hover {
  1854. -fx-color: -fx-hover-base;
  1855. }
  1856. /* alternative content using a border and a grad to transparent background - why should TitledPane content have a colour? */
  1857. .titled-pane > *.content {
  1858. -fx-border-color: -fx-box-border;
  1859. -fx-border-insets: -1 0 0 0;
  1860. -fx-background-color: linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -6%), -fx-background);
  1861. }
  1862.  
  1863.  
  1864.  
  1865. /*******************************************************************************
  1866. * *
  1867. * Accordion *
  1868. * *
  1869. ******************************************************************************/
  1870.  
  1871. .accordion > .titled-pane > .title {
  1872. -fx-background-color:
  1873. linear-gradient(to bottom,
  1874. derive(-fx-color,-15%) 95%,
  1875. derive(-fx-color,-25%) 100%
  1876. ),
  1877. -fx-inner-border,
  1878. -fx-body-color;
  1879. -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
  1880. -fx-background-radius: 0, 0, 0;
  1881. }
  1882. .accordion > .first-titled-pane > .title {
  1883. -fx-background-insets: 0, 1, 2;
  1884. }
  1885.  
  1886. /*******************************************************************************
  1887. * *
  1888. * SplitPane *
  1889. * *
  1890. ******************************************************************************/
  1891.  
  1892. .split-pane > .split-pane-divider {
  1893. -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */
  1894. }
  1895. /* horizontal the two nodes are placed to the left/right of each other. */
  1896. .split-pane:horizontal > .split-pane-divider {
  1897. -fx-background-color: -fx-box-border, -fx-inner-border-horizontal;
  1898. -fx-background-insets: 0, 0 1 0 1;
  1899. }
  1900. /* vertical the two nodes are placed on top of each other. */
  1901. .split-pane:vertical > .split-pane-divider {
  1902. -fx-background-color: -fx-box-border, -fx-inner-border;
  1903. -fx-background-insets: 0, 1 0 1 0;
  1904. }
  1905.  
  1906. /*******************************************************************************
  1907. * *
  1908. * ColorPicker *
  1909. * *
  1910. ******************************************************************************/
  1911.  
  1912. .color-picker > .arrow-button {
  1913. -fx-background-color: null;
  1914. -fx-padding: 0.5em 0.667em 0.5em 0; /* 6 8 6 0 */
  1915. }
  1916. .color-picker.split-button > .arrow-button {
  1917. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  1918. -fx-background-insets: 1 1 1 0, 1, 2;
  1919. -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
  1920. }
  1921. .color-picker.split-button:focused > .arrow-button {
  1922. /*-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color !important;*/
  1923. /*-fx-background-insets: 0, 1, 2;*/
  1924. -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
  1925. -fx-background-insets: 1 1 1 0, 1, 2, 1, 2.6;
  1926. -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
  1927. }
  1928. .color-picker.split-button > .color-picker-label,
  1929. .color-picker.split-button:focused > .color-picker-label{
  1930. -fx-background-color: null;
  1931. }
  1932. .color-picker.split-button > .arrow-button {
  1933. /*-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color !important;*/
  1934. -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
  1935. }
  1936. .color-picker > .color-picker-label > .picker-color > .picker-color-rect {
  1937. -fx-stroke: -fx-box-border;
  1938. }
  1939.  
  1940. .color-palette {
  1941. -fx-spacing: 0.833333em; /* 10px */
  1942. -fx-background-color:
  1943. linear-gradient(to bottom,
  1944. derive(-fx-color,-17%),
  1945. derive(-fx-color,-30%)
  1946. ),
  1947. linear-gradient(to bottom,
  1948. derive(-fx-background,10%) 0%,
  1949. derive(-fx-background,-5%) 12%,
  1950. derive(-fx-background,15%) 88%,
  1951. derive(-fx-background,-10%) 100%);
  1952. -fx-background-insets: 0, 1;
  1953. -fx-background-radius: 6, 5;
  1954. -fx-padding: 1em; /* 12 */
  1955. -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
  1956. }
  1957. .color-palette > .color-picker-grid {
  1958. -fx-padding: 0.5px;
  1959. -fx-snap-to-pixel: false;
  1960. }
  1961. .color-palette > .color-picker-grid > .color-square {
  1962. -fx-background-color: transparent;
  1963. -fx-padding: 0.5px;
  1964. }
  1965. /* the color over which the user is hovering */
  1966. .color-palette-region > .color-square.hover-square {
  1967. -fx-background-color: -fx-faint-focus-color, -fx-focus-color;
  1968. -fx-background-insets: -3,-1;
  1969. -fx-background-radius: 5,0;
  1970. -fx-scale-x: 1.5;
  1971. -fx-scale-y: 1.5;
  1972. }
  1973. /* ------- CUSTOM COLOR DIALOG ------- */
  1974. .custom-color-dialog > .color-rect-pane {
  1975. -fx-spacing: 0.75em;
  1976. -fx-pref-height: 16.666667em;
  1977. -fx-alignment: top-left;
  1978. -fx-fill-height: true;
  1979. }
  1980.  
  1981. .custom-color-dialog .color-rect-pane .color-rect {
  1982. -fx-min-width: 16.666667em;
  1983. -fx-min-height: 16.666667em;
  1984. }
  1985.  
  1986. .custom-color-dialog .color-rect-pane .color-rect-border {
  1987. -fx-border-color: derive(-fx-base, -20%);
  1988. }
  1989.  
  1990. .custom-color-dialog > .color-rect-pane #color-rect-indicator {
  1991. -fx-background-color: null;
  1992. -fx-border-color: white;
  1993. -fx-border-radius: 0.4166667em;
  1994. -fx-translate-x: -0.4166667em;
  1995. -fx-translate-y: -0.4166667em;
  1996. -fx-pref-width: 0.833333em;
  1997. -fx-pref-height: 0.833333em;
  1998. -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
  1999. }
  2000.  
  2001. .custom-color-dialog > .color-rect-pane > .color-bar {
  2002. -fx-min-width: 1.666667em;
  2003. -fx-min-height: 16.666667em;
  2004. -fx-max-width: 1.666667em;
  2005. -fx-border-color: derive(-fx-base, -20%);
  2006. }
  2007.  
  2008. .custom-color-dialog > .color-rect-pane > .color-bar > #color-bar-indicator {
  2009. -fx-border-radius: 0.333333em;
  2010. -fx-border-color: white;
  2011. -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
  2012. -fx-pref-width: 2em;
  2013. -fx-pref-height: 0.833333em;
  2014. -fx-translate-x: -0.1666667em;
  2015. -fx-translate-y: -0.4166667em;
  2016. }
  2017.  
  2018. .custom-color-dialog {
  2019. -fx-background-color: -fx-background;
  2020. -fx-padding: 1.25em;
  2021. -fx-spacing: 1.25em;
  2022. }
  2023. .custom-color-dialog .controls-pane .current-new-color-grid #current-new-color-border {
  2024. -fx-border-color: derive(-fx-base, -20%);
  2025. -fx-border-width: 2px;
  2026. }
  2027.  
  2028. .custom-color-dialog .controls-pane .current-new-color-grid .color-rect {
  2029. -fx-min-width: 10.666667em;
  2030. -fx-min-height: 1.75em;
  2031. -fx-pref-width: 10.666667em;
  2032. -fx-pref-height: 1.75em;
  2033. }
  2034.  
  2035. .custom-color-dialog .transparent-pattern {
  2036. -fx-background-image: url("pattern-transparent.png");
  2037. -fx-background-repeat: repeat;
  2038. -fx-background-size: auto;
  2039. }
  2040.  
  2041. .custom-color-dialog .controls-pane #spacer1 {
  2042. -fx-min-height: 0.1666667em;
  2043. -fx-max-height: 0.1666667em;
  2044. -fx-pref-height: 0.1666667em;
  2045. }
  2046.  
  2047. .custom-color-dialog .controls-pane #spacer2 {
  2048. -fx-min-height: 1em;
  2049. -fx-max-height: 1em;
  2050. -fx-pref-height: 1em;
  2051. }
  2052.  
  2053. .custom-color-dialog .controls-pane #settings-pane {
  2054. -fx-hgap: 0.4166667em;
  2055. -fx-vgap: 0.3333333em;
  2056. }
  2057.  
  2058. .custom-color-dialog .controls-pane #settings-pane .settings-label {
  2059. -fx-min-width: 5.75em;
  2060. }
  2061.  
  2062. .custom-color-dialog .controls-pane #settings-pane .settings-unit {
  2063. -fx-max-width: 1em;
  2064. }
  2065.  
  2066. .custom-color-dialog .controls-pane #settings-pane .slider {
  2067. -fx-pref-width: 8.25em;
  2068. }
  2069.  
  2070. .custom-color-dialog .controls-pane .color-input-field {
  2071. -fx-pref-column-count: 3;
  2072. -fx-max-width: 3.25em;
  2073. -fx-min-width: 3.25em;
  2074. -fx-pref-width: 3.25em;
  2075. }
  2076.  
  2077. .custom-color-dialog .controls-pane .web-field {
  2078. -fx-pref-column-count: 6;
  2079. -fx-pref-width: 8.25em;
  2080. }
  2081.  
  2082. .custom-color-dialog .controls-pane #spacer-side {
  2083. -fx-min-width: 0.5em;
  2084. -fx-pref-width: 0.5em;
  2085. }
  2086.  
  2087. .custom-color-dialog .controls-pane #spacer-bottom {
  2088. -fx-pref-height: 0.833333em;
  2089. -fx-min-height: 0.833333em;
  2090. }
  2091.  
  2092. .custom-color-dialog .controls-pane .customcolor-controls-background {
  2093. -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
  2094. -fx-background-insets:
  2095. 0.8333333em 0 0.4166667em 0,
  2096. 1em 0.166667em 0.5833333em 0.166667em;
  2097. -fx-background-radius: 0.3333333em, 0.166667em;
  2098. }
  2099.  
  2100. .custom-color-dialog .controls-pane .current-new-color-grid .label {
  2101. -fx-padding: 0 0 0 0.4166667em;
  2102. }
  2103.  
  2104. .custom-color-dialog .controls-pane #buttons-hbox {
  2105. -fx-spacing: 0.333333em;
  2106. -fx-padding: 1em 0 0 0;
  2107. -fx-alignment: bottom-right;
  2108. }
  2109.  
  2110. /*******************************************************************************
  2111. * *
  2112. * Pagination *
  2113. * *
  2114. ******************************************************************************/
  2115.  
  2116. .pagination {
  2117. -fx-padding: 0;
  2118. -fx-arrows-visible: true;
  2119. -fx-tooltip-visible: true;
  2120. -fx-page-information-visible: true;
  2121. -fx-page-information-alignment: bottom;
  2122. -fx-arrow-button-gap: 0;
  2123. }
  2124. .pagination > .page {
  2125. -fx-background-color: transparent;
  2126. }
  2127. .pagination > .pagination-control {
  2128. -fx-background-color: transparent;
  2129. -fx-font-size: 0.82em;
  2130. }
  2131. .pagination > .pagination-control > .control-box {
  2132. -fx-padding: 5px 0 0 0;
  2133. -fx-spacing: 2;
  2134. -fx-alignment: center;
  2135. }
  2136. .pagination > .pagination-control > .control-box > .left-arrow-button {
  2137. -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
  2138. -fx-background-insets: 0 0 -1 5, 0 0 0 5, 1 1 1 6, 2 2 2 7;
  2139. -fx-padding: 0em 0.417em 0em 0.833em; /* 0 5 0 10 */
  2140. }
  2141. .pagination > .pagination-control > .control-box > .right-arrow-button {
  2142. -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
  2143. -fx-background-insets: 0 5 -1 0, 0 5 0 0, 1 6 1 1, 2 7 2 2;
  2144. -fx-padding: 0em 0.75em 0em 0.417em; /* 0 9 0 5 */
  2145. }
  2146. .pagination > .pagination-control .left-arrow {
  2147. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  2148. -fx-background-insets: 1 0 -1 0, 0;
  2149. -fx-padding: 0.375em 0.291em 0.375em 0.291em;
  2150. -fx-shape: "M 0 0 L -13 7 L 0 13 z";
  2151. -fx-scale-shape: true;
  2152. }
  2153. .pagination > .pagination-control .right-arrow {
  2154. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  2155. -fx-background-insets: 1 0 -1 0, 0;
  2156. -fx-padding: 0.375em 0.291em 0.375em 0.291em;
  2157. -fx-shape: "M 0 0 L 13 7 L 0 13 z";
  2158. -fx-scale-shape: true;
  2159. }
  2160. .pagination > .pagination-control > .control-box > .bullet-button {
  2161. -fx-background-radius: 0, 4em, 4em, 4em, 4em;
  2162. -fx-padding: 0.333em;
  2163. -fx-background-color: transparent, -fx-outer-border, -fx-inner-border, -fx-body-color;
  2164. -fx-background-insets: 0, 5, 6, 7;
  2165. }
  2166. .pagination > .pagination-control > .control-box > .bullet-button:selected {
  2167. -fx-base: -fx-accent;
  2168. }
  2169. .pagination.bullet > .pagination-control > .control-box {
  2170. -fx-spacing: 0;
  2171. -fx-alignment: center;
  2172. }
  2173. .pagination.bullet > .pagination-control > .control-box > .left-arrow-button {
  2174. -fx-background-radius: 4em;
  2175. -fx-background-insets: 0, 1, 2;
  2176. -fx-padding: 0em 0.25em 0em 0.083em; /* 0 3 0 1 */
  2177. }
  2178. .pagination.bullet > .pagination-control > .control-box > .right-arrow-button {
  2179. -fx-background-radius: 4em;
  2180. -fx-background-insets: 0, 1, 2;
  2181. -fx-padding: 0em 0.083em 0em 0.25em; /* 0 1 0 3 */
  2182. }
  2183. .pagination > .pagination-control > .control-box > .number-button {
  2184. -fx-background-radius: 0;
  2185. -fx-padding: 0.166667em 0.333em 0.25em 0.333em;
  2186. -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
  2187. }
  2188. .pagination > .pagination-control > .control-box > .number-button:selected {
  2189. -fx-base: -fx-accent;
  2190. }
  2191. .pagination > .pagination-control > .page-information {
  2192. -fx-padding: 0.416em 0 0 0;
  2193. }
  2194.  
  2195. /*******************************************************************************
  2196. * *
  2197. * Customised CSS for controls placed directly within cells *
  2198. * *
  2199. ******************************************************************************/
  2200.  
  2201. .cell > .choice-box {
  2202. -fx-background-color: transparent;
  2203. -fx-background-insets: 0;
  2204. -fx-background-radius: 0;
  2205. -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
  2206. -fx-alignment: CENTER_LEFT;
  2207. -fx-content-display: LEFT;
  2208. }
  2209. .cell > .choice-box > .label {
  2210. -fx-padding: 0em 0.333333em 0.0em 0.333333; /* 2 4 3 6 */
  2211. }
  2212. .cell:focused:selected > .choice-box > .label {
  2213. -fx-text-fill: white;
  2214. }
  2215. .cell:focused:selected > .choice-box > .open-button > .arrow {
  2216. -fx-background-color: -fx-mark-highlight-color, white;
  2217. }
  2218.  
  2219. /*******************************************************************************
  2220. * *
  2221. * List, Tree, Table COMMON *
  2222. * *
  2223. ******************************************************************************/
  2224.  
  2225. /* remove double borders from scrollbars */
  2226. .list-view > .virtual-flow > .scroll-bar:vertical,
  2227. .tree-view > .virtual-flow > .scroll-bar:vertical,
  2228. .table-view > .virtual-flow > .scroll-bar:vertical,
  2229. .tree-table-view > .virtual-flow > .scroll-bar:vertical {
  2230. -fx-background-insets: 0, 0 0 0 1;
  2231. -fx-padding: -1 -1 -1 0;
  2232. }
  2233. .list-view > .virtual-flow > .scroll-bar:horizontal,
  2234. .tree-view > .virtual-flow > .scroll-bar:horizontal,
  2235. .table-view > .virtual-flow > .scroll-bar:horizontal,
  2236. .tree-table-view > .virtual-flow > .scroll-bar:horizontal {
  2237. -fx-background-insets: 0, 1 0 0 0;
  2238. -fx-padding: 0 -1 -1 -1;
  2239. }
  2240. .list-view > .virtual-flow > .corner,
  2241. .tree-view > .virtual-flow > .corner,
  2242. .table-view > .virtual-flow > .corner,
  2243. .tree-table-view > .virtual-flow > .corner {
  2244. -fx-background-color: derive(-fx-base,-1%);
  2245. }
  2246. /* standard cell */
  2247. .list-cell,
  2248. .tree-cell {
  2249. -fx-background: -fx-control-inner-background;
  2250. -fx-background-color: -fx-background;
  2251. -fx-text-fill: -fx-text-background-color;
  2252. }
  2253. /* Selected rows */
  2254. .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
  2255. .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected,
  2256. .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
  2257. .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
  2258. .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
  2259. .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
  2260. -fx-background: -fx-selection-bar;
  2261. -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
  2262. }
  2263. /* Selected when control is not focused */
  2264. .list-cell:filled:selected,
  2265. .tree-cell:filled:selected,
  2266. .table-row-cell:filled:selected,
  2267. .tree-table-row-cell:filled:selected,
  2268. .table-row-cell:filled > .table-cell:selected,
  2269. .tree-table-row-cell:filled > .tree-table-cell:selected {
  2270. -fx-background: -fx-selection-bar-non-focused;
  2271. -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
  2272. }
  2273. /* focused cell (keyboard navigation) */
  2274. .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused,
  2275. .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused,
  2276. .table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused,
  2277. .tree-table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:focused,
  2278. .table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused,
  2279. .tree-table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused {
  2280. -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
  2281. -fx-background-insets: 0, 1, 2;
  2282. }
  2283.  
  2284. /*******************************************************************************
  2285. * *
  2286. * ListView and ListCell *
  2287. * *
  2288. ******************************************************************************/
  2289.  
  2290. .list-cell {
  2291. -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
  2292. }
  2293. .list-cell:odd {
  2294. -fx-background: -fx-control-inner-background-alt;
  2295. }
  2296.  
  2297. /*******************************************************************************
  2298. * *
  2299. * TreeView and TreeCell *
  2300. * *
  2301. ******************************************************************************/
  2302.  
  2303. .tree-cell {
  2304. -fx-padding: 0.25em; /* 3 */
  2305. -fx-indent: 1em;
  2306. }
  2307. .tree-cell .label {
  2308. -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */
  2309. }
  2310. .tree-cell > .tree-disclosure-node,
  2311. .tree-table-row-cell > .tree-disclosure-node {
  2312. -fx-padding: 4 6 4 8;
  2313. -fx-background-color: transparent;
  2314. }
  2315. .tree-cell > .tree-disclosure-node > .arrow,
  2316. .tree-table-row-cell > .tree-disclosure-node > .arrow {
  2317. -fx-background-color: -fx-text-background-color;
  2318. -fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */
  2319. -fx-shape: "M 0 -3.5 L 4 0 L 0 3.5 z";
  2320. }
  2321. .tree-cell:expanded > .tree-disclosure-node > .arrow,
  2322. .tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
  2323. -fx-rotate: 90;
  2324. }
  2325.  
  2326. /*******************************************************************************
  2327. * *
  2328. * TableView *
  2329. * *
  2330. ******************************************************************************/
  2331.  
  2332. .table-view,
  2333. .tree-table-view {
  2334. /* Constants used throughout the tableview. */
  2335. -fx-table-header-border-color: -fx-box-border;
  2336. -fx-table-cell-border-color: derive(-fx-color,5%);
  2337. }
  2338. /***** ROW CELLS **************************************************************/
  2339. /* Each row in the table is a table-row-cell. Inside a table-row-cell is any
  2340. number of table-cell. */
  2341. .table-row-cell {
  2342. -fx-background: -fx-control-inner-background;
  2343. -fx-background-color: -fx-table-cell-border-color, -fx-background;
  2344. -fx-background-insets: 0, 0 0 1 0;
  2345. -fx-padding: 0;
  2346. -fx-text-fill: -fx-text-background-color;
  2347. }
  2348. .table-row-cell:odd {
  2349. -fx-background: -fx-control-inner-background-alt;
  2350. }
  2351. /***** INDIVIDUAL CELLS ********************************************************/
  2352. .table-cell {
  2353. -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
  2354. -fx-background-color: null;
  2355. -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
  2356. -fx-cell-size: 2.0em; /* 24 */
  2357. -fx-text-fill: -fx-text-background-color;
  2358. }
  2359. .table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
  2360. .tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
  2361. -fx-background-color: -fx-table-cell-border-color, -fx-background;
  2362. -fx-background-insets: 0, 0 0 1 0;
  2363. }
  2364. /* When in constrained resize mode, the right-most visible cell should not have
  2365. a right-border, as it is not possible to get this cleanly out of view without
  2366. introducing horizontal scrollbars (see RT-14886). */
  2367. .table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible,
  2368. .tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible {
  2369. -fx-border-color: transparent;
  2370. }
  2371. /***** HEADER **********************************************************************/
  2372. /* The column-resize-line is shown when the user is attempting to resize a column. */
  2373. .table-view .column-resize-line,
  2374. .tree-table-view .column-resize-line {
  2375. -fx-background: -fx-accent;
  2376. -fx-background-color: -fx-background;
  2377. -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
  2378. }
  2379. /* This is the area behind the column headers. An ideal place to specify background
  2380. and border colors for the whole area (not individual column-header's). */
  2381. .table-view .column-header-background,
  2382. .tree-table-view > .column-header-background {
  2383. -fx-background-color: -fx-inner-border, -fx-body-color;
  2384. -fx-background-insets: 0, 1;
  2385. }
  2386. /* The column header row is made up of a number of column-header, one for each
  2387. TableColumn, and a 'filler' area that extends from the right-most column
  2388. to the edge of the tableview, or up to the 'column control' button. */
  2389. .table-view .column-header,
  2390. .tree-table-view .column-header,
  2391. .table-view .filler,
  2392. .tree-table-view .filler,
  2393. .table-view > .column-header-background > .show-hide-columns-button,
  2394. .tree-table-view > .column-header-background > .show-hide-columns-button,
  2395. .table-view:constrained-resize .filler,
  2396. .tree-table-view:constrained-resize .filler {
  2397. -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
  2398. -fx-background-insets: 0, 0 1 1 0, 1 2 2 1;
  2399. -fx-font-weight: bold;
  2400. -fx-size: 2em;
  2401. -fx-text-fill: -fx-selection-bar-text;
  2402. -fx-padding: 0.166667em;
  2403. }
  2404. .table-view .column-header .context-menu,
  2405. .tree-table-view .column-header .context-menu,
  2406. .table-view > .column-header-background > .show-hide-columns-button .context-menu,
  2407. .tree-table-view > .column-header-background > .show-hide-columns-button .context-menu {
  2408. -fx-font-weight: null;
  2409. }
  2410. .table-view .filler,
  2411. .tree-table-view .filler,
  2412. .table-view:constrained-resize .filler,
  2413. .tree-table-view:constrained-resize .filler {
  2414. -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
  2415. }
  2416. .table-view > .column-header-background > .show-hide-columns-button,
  2417. .tree-table-view > .column-header-background > .show-hide-columns-button {
  2418. -fx-background-insets: 0, 0 0 1 1, 1 1 2 2;
  2419. }
  2420. .table-view .column-header .sort-order-dots-container,
  2421. .tree-table-view .column-header .sort-order-dots-container{
  2422. -fx-padding: 2 0 2 0;
  2423. }
  2424. .table-view .column-header .sort-order,
  2425. .tree-table-view .column-header .sort-order{
  2426. -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
  2427. }
  2428. .table-view .column-header .sort-order-dot,
  2429. .tree-table-view .column-header .sort-order-dot {
  2430. -fx-background-color: -fx-mark-color;
  2431. -fx-padding: 0.115em;
  2432. -fx-background-radius: 0.115em;
  2433. }
  2434. .table-view .column-header .label,
  2435. .tree-table-view .column-header .label {
  2436. -fx-alignment: center;
  2437. }
  2438.  
  2439. /* Plus Symbol */
  2440. .table-view .show-hide-column-image,
  2441. .tree-table-view .show-hide-column-image {
  2442. -fx-background-color: -fx-mark-color;
  2443. -fx-padding: 0.25em; /* 3px */
  2444. -fx-shape: "M398.902,298.045c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.332,0,1.999c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-1.999c-0.666,0-1.333,0-1.999,0c0-0.667,0-1.334,0-2c0.666,0,1.333,0,1.999,0C398.902,299.378,398.902,298.711,398.902,298.045z";
  2445. }
  2446. /* When a column is being 'dragged' to be placed in a different position, there
  2447. is a region that follows along the column header area to indicate where the
  2448. column will be dropped. This region can be styled using the .column-drag-header
  2449. name. */
  2450. .table-view .column-drag-header,
  2451. .tree-table-view .column-drag-header {
  2452. -fx-background: -fx-accent;
  2453. -fx-background-color: -fx-selection-bar;
  2454. -fx-border-color: transparent;
  2455. -fx-opacity: 0.6;
  2456. }
  2457. /* Semi-transparent overlay to indicate the column that is currently being moved */
  2458. .table-view .column-overlay,
  2459. .tree-table-view .column-overlay {
  2460. -fx-background-color: darkgray;
  2461. -fx-opacity: 0.3;
  2462. }
  2463. /* Header Sort Arrows */
  2464. .table-view /*> column-header-background > nested-column-header >*/ .arrow,
  2465. .tree-table-view /*> column-header-background > nested-column-header >*/ .arrow {
  2466. -fx-background-color: -fx-mark-color;
  2467. -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
  2468. -fx-shape: "M 0 0 h 7 l -3.5 4 z";
  2469. }
  2470. /* This is shown when the table has no rows and/or no columns. */
  2471. .table-view .empty-table,
  2472. .tree-table-view .empty-table {
  2473. -fx-background-color: white;
  2474. -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
  2475. }
  2476.  
  2477. /*******************************************************************************
  2478. * *
  2479. * Table Cells *
  2480. * *
  2481. ******************************************************************************/
  2482.  
  2483. .check-box-table-cell {
  2484. -fx-alignment: center;
  2485. -fx-padding: 0;
  2486. }
  2487. .check-box-table-cell > .check-box {
  2488. -fx-font-size: 0.8em;
  2489. -fx-opacity: 1;
  2490. -fx-padding: 0 0 1 0;
  2491. }
  2492. .check-box-table-cell > .check-box > .box {
  2493. -fx-background-color: -fx-outer-border, -fx-background;
  2494. -fx-background-insets: 0,1;
  2495. }
  2496. .check-box-table-cell > .check-box:selected > .box > .mark {
  2497. -fx-background-color: -fx-text-background-color;
  2498. -fx-background-insets: 0;
  2499. }
  2500. .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box,
  2501. .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box,
  2502. .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box,
  2503. .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box {
  2504. -fx-background-color: derive(-fx-accent,40%), -fx-background;
  2505. }
  2506.  
  2507. /*******************************************************************************
  2508. * *
  2509. * TreeTableView *
  2510. * *
  2511. * Note: A lot of the CSS for TreeTableView is included with the TreeView and *
  2512. * TableView CSS styles elsewhere in modena.css (as they are the same, just *
  2513. * targeting different CSS style classes). *
  2514. ******************************************************************************/
  2515.  
  2516. .tree-table-row-cell {
  2517. -fx-background: -fx-control-inner-background;
  2518. -fx-background-color: -fx-background;
  2519. -fx-padding: 0;
  2520. -fx-text-fill: -fx-text-background-color;
  2521. -fx-indent: 1em;
  2522. }
  2523. .tree-table-cell {
  2524. /* tree-table-cell needs slightly different padding to make the text sit at
  2525. the right height for the arrow */
  2526. -fx-padding: 0.25em 0.166667em 0.083em 0.166667em; /* 3 2 1 2 , plus border adds 1px */
  2527. -fx-background-color: null;
  2528. -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
  2529. -fx-cell-size: 2.0em; /* 24 */
  2530. -fx-text-fill: -fx-text-background-color;
  2531. }
  2532.  
  2533. /*******************************************************************************
  2534. * *
  2535. * Tooltip *
  2536. * *
  2537. ******************************************************************************/
  2538.  
  2539. .tooltip {
  2540. -fx-background: rgba(30,30,30);
  2541. -fx-text-fill: white;
  2542. -fx-background-color: rgba(30,30,30,0.8);
  2543. -fx-background-radius: 6px;
  2544. -fx-background-insets: 0;
  2545. -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */
  2546. -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 3 );
  2547. -fx-font-size: 0.85em;
  2548. }
  2549.  
  2550. /*******************************************************************************
  2551. * *
  2552. * Charts *
  2553. * *
  2554. ******************************************************************************/
  2555.  
  2556. .chart {
  2557. -fx-padding: 5px;
  2558. }
  2559. .chart-plot-background {
  2560. -fx-background-color: -fx-background;
  2561. }
  2562. .chart-content {
  2563. -fx-padding: 10px;
  2564. }
  2565. .chart-title {
  2566. -fx-font-size: 1.4em;
  2567. }
  2568. .chart-legend {
  2569. -fx-background-color: -fx-shadow-highlight-color,
  2570. linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)),
  2571. linear-gradient(from 0px 0px to 0px 4px, derive(-fx-background, -4%), derive(-fx-background, 10%));
  2572. -fx-background-insets: 0 0 -1 0, 0,1;
  2573. -fx-background-radius: 4,4,3;
  2574. -fx-padding: 6px;
  2575. }
  2576.  
  2577. /*******************************************************************************
  2578. * *
  2579. * Axis *
  2580. * *
  2581. ******************************************************************************/
  2582.  
  2583. .axis {
  2584. AXIS_COLOR: derive(-fx-background,-20%);
  2585. -fx-tick-label-font-size: 0.833333em; /* 10px */
  2586. -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
  2587. }
  2588. .axis:top {
  2589. -fx-border-color: transparent transparent AXIS_COLOR transparent;
  2590. }
  2591. .axis:right {
  2592. -fx-border-color: transparent transparent transparent AXIS_COLOR;
  2593. }
  2594. .axis:bottom {
  2595. -fx-border-color: AXIS_COLOR transparent transparent transparent;
  2596. }
  2597. .axis:left {
  2598. -fx-border-color: transparent AXIS_COLOR transparent transparent;
  2599. }
  2600. .axis:top > .axis-label,
  2601. .axis:left > .axis-label {
  2602. -fx-padding: 0 0 4px 0;
  2603. }
  2604. .axis:bottom > .axis-label,
  2605. .axis:right > .axis-label {
  2606. -fx-padding: 4px 0 0 0;
  2607. }
  2608. .axis-tick-mark,
  2609. .axis-minor-tick-mark {
  2610. -fx-fill: null;
  2611. -fx-stroke: AXIS_COLOR;
  2612. }
  2613.  
  2614. /*******************************************************************************
  2615. * *
  2616. * ChartPlot *
  2617. * *
  2618. ******************************************************************************/
  2619.  
  2620. .chart-vertical-grid-lines {
  2621. -fx-stroke: derive(-fx-background,-10%);
  2622. -fx-stroke-dash-array: 0.25em, 0.25em;
  2623. }
  2624. .chart-horizontal-grid-lines {
  2625. -fx-stroke: derive(-fx-background,-10%);
  2626. -fx-stroke-dash-array: 0.25em, 0.25em;
  2627. }
  2628. .chart-alternative-column-fill {
  2629. -fx-fill: null;
  2630. -fx-stroke: null;
  2631. }
  2632. .chart-alternative-row-fill {
  2633. -fx-fill: null;
  2634. -fx-stroke: null;
  2635. }
  2636. .chart-vertical-zero-line,
  2637. .chart-horizontal-zero-line {
  2638. -fx-stroke: derive(-fx-text-background-color, 40%);
  2639. }
  2640.  
  2641. /*******************************************************************************
  2642. * *
  2643. * ScatterChart *
  2644. * *
  2645. ******************************************************************************/
  2646.  
  2647. .chart-symbol { /* solid circle */
  2648. -fx-background-color: CHART_COLOR_1;
  2649. -fx-background-radius: 5px;
  2650. -fx-padding: 5px;
  2651. }
  2652. .default-color1.chart-symbol { /* solid square */
  2653. -fx-background-color: CHART_COLOR_2;
  2654. -fx-background-radius: 0;
  2655. }
  2656. .default-color2.chart-symbol { /* solid diamond */
  2657. -fx-background-color: CHART_COLOR_3;
  2658. -fx-background-radius: 0;
  2659. -fx-padding: 7px 5px 7px 5px;
  2660. -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
  2661. }
  2662. .default-color3.chart-symbol { /* cross */
  2663. -fx-background-color: CHART_COLOR_4;
  2664. -fx-background-radius: 0;
  2665. -fx-background-insets: 0;
  2666. -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
  2667. }
  2668. .default-color4.chart-symbol { /* solid triangle */
  2669. -fx-background-color: CHART_COLOR_5;
  2670. -fx-background-radius: 0;
  2671. -fx-background-insets: 0;
  2672. -fx-shape: "M5,0 L10,8 L0,8 Z";
  2673. }
  2674. .default-color5.chart-symbol { /* hollow circle */
  2675. -fx-background-color: CHART_COLOR_6, white;
  2676. -fx-background-insets: 0, 2;
  2677. -fx-background-radius: 5px;
  2678. -fx-padding: 5px;
  2679. }
  2680. .default-color6.chart-symbol { /* hollow square */
  2681. -fx-background-color: CHART_COLOR_7, white;
  2682. -fx-background-insets: 0, 2;
  2683. -fx-background-radius: 0;
  2684. }
  2685. .default-color7.chart-symbol { /* hollow diamond */
  2686. -fx-background-color: CHART_COLOR_8, white;
  2687. -fx-background-radius: 0;
  2688. -fx-background-insets: 0, 2.5;
  2689. -fx-padding: 7px 5px 7px 5px;
  2690. -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
  2691. }
  2692.  
  2693. /*******************************************************************************
  2694. * *
  2695. * LineChart *
  2696. * *
  2697. ******************************************************************************/
  2698.  
  2699. .chart-line-symbol {
  2700. -fx-background-color: CHART_COLOR_1, white;
  2701. -fx-background-insets: 0, 2;
  2702. -fx-background-radius: 5px;
  2703. -fx-padding: 5px;
  2704. }
  2705. .chart-series-line {
  2706. -fx-stroke: CHART_COLOR_1;
  2707. -fx-stroke-width: 3px;
  2708. }
  2709. .default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; }
  2710. .default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; }
  2711. .default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; }
  2712. .default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; }
  2713. .default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; }
  2714. .default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; }
  2715. .default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; }
  2716. .default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; }
  2717. .default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }
  2718. .default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; }
  2719. .default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; }
  2720. .default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; }
  2721. .default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; }
  2722. .default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; }
  2723. .default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; }
  2724. .default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; }
  2725.  
  2726. /*******************************************************************************
  2727. * *
  2728. * AreaChart *
  2729. * *
  2730. ******************************************************************************/
  2731.  
  2732. .chart-area-symbol {
  2733. -fx-background-color: CHART_COLOR_1, white;
  2734. -fx-background-insets: 0, 1;
  2735. -fx-background-radius: 4px; /* makes sure this remains circular */
  2736. -fx-padding: 3px;
  2737. }
  2738. .default-color0.chart-area-symbol { -fx-background-color: CHART_COLOR_1, white; }
  2739. .default-color1.chart-area-symbol { -fx-background-color: CHART_COLOR_2, white; }
  2740. .default-color2.chart-area-symbol { -fx-background-color: CHART_COLOR_3, white; }
  2741. .default-color3.chart-area-symbol { -fx-background-color: CHART_COLOR_4, white; }
  2742. .default-color4.chart-area-symbol { -fx-background-color: CHART_COLOR_5, white; }
  2743. .default-color5.chart-area-symbol { -fx-background-color: CHART_COLOR_6, white; }
  2744. .default-color6.chart-area-symbol { -fx-background-color: CHART_COLOR_7, white; }
  2745. .default-color7.chart-area-symbol { -fx-background-color: CHART_COLOR_8, white; }
  2746. .chart-series-area-line {
  2747. -fx-stroke: CHART_COLOR_1;
  2748. -fx-stroke-width: 1px;
  2749. }
  2750. .default-color0.chart-series-area-line { -fx-stroke: CHART_COLOR_1; }
  2751. .default-color1.chart-series-area-line { -fx-stroke: CHART_COLOR_2; }
  2752. .default-color2.chart-series-area-line { -fx-stroke: CHART_COLOR_3; }
  2753. .default-color3.chart-series-area-line { -fx-stroke: CHART_COLOR_4; }
  2754. .default-color4.chart-series-area-line { -fx-stroke: CHART_COLOR_5; }
  2755. .default-color5.chart-series-area-line { -fx-stroke: CHART_COLOR_6; }
  2756. .default-color6.chart-series-area-line { -fx-stroke: CHART_COLOR_7; }
  2757. .default-color7.chart-series-area-line { -fx-stroke: CHART_COLOR_8; }
  2758. .chart-series-area-fill {
  2759. -fx-stroke: null;
  2760. -fx-fill: CHART_COLOR_1_TRANS_20;
  2761. }
  2762. .default-color0.chart-series-area-fill { -fx-fill: CHART_COLOR_1_TRANS_20; }
  2763. .default-color1.chart-series-area-fill { -fx-fill: CHART_COLOR_2_TRANS_20; }
  2764. .default-color2.chart-series-area-fill { -fx-fill: CHART_COLOR_3_TRANS_20; }
  2765. .default-color3.chart-series-area-fill { -fx-fill: CHART_COLOR_4_TRANS_20; }
  2766. .default-color4.chart-series-area-fill { -fx-fill: CHART_COLOR_5_TRANS_20; }
  2767. .default-color5.chart-series-area-fill { -fx-fill: CHART_COLOR_6_TRANS_20; }
  2768. .default-color6.chart-series-area-fill { -fx-fill: CHART_COLOR_7_TRANS_20; }
  2769. .default-color7.chart-series-area-fill { -fx-fill: CHART_COLOR_8_TRANS_20; }
  2770. .area-legend-symbol {
  2771. -fx-padding: 6px;
  2772. -fx-background-radius: 6px; /* makes sure this remains circular */
  2773. -fx-background-insets: 0, 3;
  2774. }
  2775.  
  2776. /*******************************************************************************
  2777. * *
  2778. * BubbleChart *
  2779. * *
  2780. ******************************************************************************/
  2781.  
  2782. .bubble-legend-symbol {
  2783. -fx-background-radius: 8px;
  2784. -fx-padding: 8px;
  2785. }
  2786. .chart-bubble {
  2787. -fx-bubble-fill: CHART_COLOR_1_TRANS_70;
  2788. -fx-background-color: radial-gradient(center 50% 50%, radius 80%, derive(-fx-bubble-fill,20%), derive(-fx-bubble-fill,-30%));
  2789. }
  2790. .default-color0.chart-bubble { -fx-bubble-fill: CHART_COLOR_1_TRANS_70; }
  2791. .default-color1.chart-bubble { -fx-bubble-fill: CHART_COLOR_2_TRANS_70; }
  2792. .default-color2.chart-bubble { -fx-bubble-fill: CHART_COLOR_3_TRANS_70; }
  2793. .default-color3.chart-bubble { -fx-bubble-fill: CHART_COLOR_4_TRANS_70; }
  2794. .default-color4.chart-bubble { -fx-bubble-fill: CHART_COLOR_5_TRANS_70; }
  2795. .default-color5.chart-bubble { -fx-bubble-fill: CHART_COLOR_6_TRANS_70; }
  2796. .default-color6.chart-bubble { -fx-bubble-fill: CHART_COLOR_7_TRANS_70; }
  2797. .default-color7.chart-bubble { -fx-bubble-fill: CHART_COLOR_8_TRANS_70; }
  2798.  
  2799. /*******************************************************************************
  2800. * *
  2801. * BarChart *
  2802. * *
  2803. ******************************************************************************/
  2804.  
  2805. .chart-bar {
  2806. -fx-bar-fill: CHART_COLOR_1;
  2807. -fx-background-color: linear-gradient(to right,
  2808. derive(-fx-bar-fill, -4%),
  2809. derive(-fx-bar-fill, -1%),
  2810. derive(-fx-bar-fill, 0%),
  2811. derive(-fx-bar-fill, -1%),
  2812. derive(-fx-bar-fill, -6%)
  2813. );
  2814. -fx-background-insets: 0;
  2815. }
  2816. .chart-bar.negative {
  2817. -fx-background-insets: 1 0 0 0;
  2818. }
  2819. .bar-chart:horizontal .chart-bar {
  2820. -fx-background-insets: 0 0 0 1;
  2821. }
  2822. .bar-chart:horizontal .chart-bar,
  2823. .stacked-bar-chart:horizontal .chart-bar {
  2824. -fx-background-color: linear-gradient(to bottom,
  2825. derive(-fx-bar-fill, -4%),
  2826. derive(-fx-bar-fill, -1%),
  2827. derive(-fx-bar-fill, 0%),
  2828. derive(-fx-bar-fill, -1%),
  2829. derive(-fx-bar-fill, -6%)
  2830. );
  2831. }
  2832. .default-color0.chart-bar { -fx-bar-fill: CHART_COLOR_1; }
  2833. .default-color1.chart-bar { -fx-bar-fill: CHART_COLOR_2; }
  2834. .default-color2.chart-bar { -fx-bar-fill: CHART_COLOR_3; }
  2835. .default-color3.chart-bar { -fx-bar-fill: CHART_COLOR_4; }
  2836. .default-color4.chart-bar { -fx-bar-fill: CHART_COLOR_5; }
  2837. .default-color5.chart-bar { -fx-bar-fill: CHART_COLOR_6; }
  2838. .default-color6.chart-bar { -fx-bar-fill: CHART_COLOR_7; }
  2839. .default-color7.chart-bar { -fx-bar-fill: CHART_COLOR_8; }
  2840. .bar-legend-symbol {
  2841. -fx-padding: 8px;
  2842. }
  2843.  
  2844. /*******************************************************************************
  2845. * *
  2846. * PieChart *
  2847. * *
  2848. ******************************************************************************/
  2849.  
  2850. .chart-pie {
  2851. -fx-pie-color: CHART_COLOR_1;
  2852. -fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color,20%), derive(-fx-pie-color,-10%));
  2853. -fx-background-insets: 1;
  2854. -fx-border-color: -fx-background;
  2855. }
  2856. .chart-pie-label {
  2857. -fx-padding: 3px;
  2858. -fx-fill: -fx-text-base-color;
  2859. }
  2860. .chart-pie-label-line {
  2861. -fx-stroke: derive(-fx-background,-20%);
  2862. }
  2863. .default-color0.chart-pie { -fx-pie-color: CHART_COLOR_1; }
  2864. .default-color1.chart-pie { -fx-pie-color: CHART_COLOR_2; }
  2865. .default-color2.chart-pie { -fx-pie-color: CHART_COLOR_3; }
  2866. .default-color3.chart-pie { -fx-pie-color: CHART_COLOR_4; }
  2867. .default-color4.chart-pie { -fx-pie-color: CHART_COLOR_5; }
  2868. .default-color5.chart-pie { -fx-pie-color: CHART_COLOR_6; }
  2869. .default-color6.chart-pie { -fx-pie-color: CHART_COLOR_7; }
  2870. .default-color7.chart-pie { -fx-pie-color: CHART_COLOR_8; }
  2871. .negative.chart-pie {
  2872. -fx-pie-color: transparent;
  2873. -fx-background-color: white;
  2874. }
  2875. .pie-legend-symbol.chart-pie {
  2876. -fx-background-radius: 8px;
  2877. -fx-padding: 8px;
  2878. -fx-border-color: null;
  2879. }
  2880.  
  2881. /*******************************************************************************
  2882. * *
  2883. * Combinations *
  2884. * *
  2885. * This section is for special handling of when one control is nested inside *
  2886. * another control. There are many cases where we would end up with ugly *
  2887. * double borders that are fixed here. *
  2888. * *
  2889. ******************************************************************************/
  2890.  
  2891. .tab-pane > * > .table-view,
  2892. .tab-pane > * > .tree-table-view,
  2893. .tab-pane > * > .list-view,
  2894. .tab-pane > * > .tree-view,
  2895. .tab-pane > * > .scroll-pane,
  2896. .tab-pane > * > .split-pane,
  2897. .tab-pane > * > .text-area,
  2898. .tab-pane > * > .html-editor,
  2899. .split-pane > * > .tab-pane,
  2900. .split-pane > * > .table-view,
  2901. .split-pane > * > .tree-table-view,
  2902. .split-pane > * > .list-view,
  2903. .split-pane > * > .tree-view,
  2904. .split-pane > * > .scroll-pane,
  2905. .split-pane > * > .split-pane,
  2906. .split-pane > * > .text-area,
  2907. .split-pane > * > .html-editor {
  2908. -fx-background-insets: 0, 0;
  2909. -fx-padding: 0;
  2910. }
  2911. .tab-pane > * > .scroll-pane > .corner {
  2912. -fx-background-insets: 0; /* Fix for RT-35067 */
  2913. }
  2914. .tab-pane.floating > * > .table-view,
  2915. .tab-pane.floating > * > .tree-table-view,
  2916. .tab-pane.floating > * > .list-view,
  2917. .tab-pane.floating > * > .tree-view,
  2918. .tab-pane.floating > * > .scroll-pane,
  2919. .tab-pane.floating > * > .split-pane,
  2920. .tab-pane.floating > * > .text-area,
  2921. .tab-pane.floating > * > .html-editor {
  2922. -fx-background-insets: 0, 0;
  2923. -fx-padding: -1;
  2924. }
  2925. .split-pane > * > .accordion > .titled-pane > *.content {
  2926. -fx-border-color: null;
  2927. -fx-border-insets: 0;
  2928. }
  2929. .split-pane > * > .accordion > .titled-pane > .title {
  2930. -fx-background-insets: 0,1 0 1 0, 2 1 2 1;
  2931. }
  2932. .split-pane > * > .accordion > .first-titled-pane > .title {
  2933. -fx-background-insets: 0,0 0 1 0, 1 1 2 1;
  2934. }
  2935. .split-pane > * > .accordion > .titled-pane:collapsed > .title {
  2936. -fx-background-insets: 0,1 0 0 0, 2 1 1 1;
  2937. }
  2938. .split-pane > * > .accordion > .first-titled-pane:collapsed > .title {
  2939. -fx-background-insets: 0,0 0 0 0, 1 1 1 1;
  2940. }
  2941. .titled-pane > .content > .split-pane,
  2942. .titled-pane > .content > .text-area,
  2943. .titled-pane > .content > .html-editor,
  2944. .titled-pane > .content > .list-view,
  2945. .titled-pane > .content > .tree-view,
  2946. .titled-pane > .content > .table-view,
  2947. .titled-pane > .content > .tree-table-view,
  2948. .titled-pane > .content > .scroll-pane {
  2949. -fx-background-color: null;
  2950. -fx-background-insets: 0, 0;
  2951. -fx-padding: 0;
  2952. }
  2953.  
  2954. .titled-pane > .content > AnchorPane,
  2955. .titled-pane > .content > BorderPane,
  2956. .titled-pane > .content > FlowPane,
  2957. .titled-pane > .content > GridPane,
  2958. .titled-pane > .content > HBox,
  2959. .titled-pane > .content > Pane,
  2960. .titled-pane > .content > StackPane,
  2961. .titled-pane > .content > TilePane,
  2962. .titled-pane > .content > VBox {
  2963. -fx-padding: 0.8em;
  2964. }
  2965.  
  2966. /*******************************************************************************
  2967. * *
  2968. * DatePicker *
  2969. * *
  2970. ******************************************************************************/
  2971.  
  2972. .date-picker > .arrow-button > .arrow {
  2973. -fx-shape: "M0,0v9h9V0H0z M2,8H1V7h1V8z M2,6H1V5h1V6z M2,4H1V3h1V4z M4,8H3V7h1V8z M4,6H3V5h1V6z M4,4H3V3h1V4z M6,8H5V7h1V8z M6,6H5 V5h1V6z M6,4H5V3h1V4z M8,8H7V7h1V8z M8,6H7V5h1V6z M8,4H7V3h1V4z";
  2974. -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  2975. -fx-background-insets: 1 0 -1 0, 0;
  2976. -fx-padding: 0.416667em 0.416667em 0.333333em 0.333333em; /* 5 5 4 4 */
  2977. -fx-scale-shape: true;
  2978. }
  2979.  
  2980. .date-picker-popup {
  2981. -fx-background-color:
  2982. linear-gradient(to bottom,
  2983. derive(-fx-color,-17%),
  2984. derive(-fx-color,-30%)
  2985. ),
  2986. -fx-control-inner-background;
  2987. -fx-background-insets: 0, 1;
  2988. -fx-background-radius: 0;
  2989. -fx-alignment: CENTER; /* VBox */
  2990. -fx-spacing: 0; /* VBox */
  2991. -fx-padding: 0.083333em; /* 1 1 1 1 */
  2992. -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
  2993. }
  2994. .date-picker-popup > .month-year-pane {
  2995. -fx-padding: 0.588883em 0.5em 0.666667em 0.5em; /* 7 6 8 6 */
  2996. -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
  2997. -fx-background-insets: 0 0 0 0, 0 0 1 0;
  2998. }
  2999. .date-picker-popup > * > .spinner {
  3000. -fx-spacing: 0.25em; /* 3 */
  3001. -fx-alignment: CENTER;
  3002. -fx-fill-height: false;
  3003. }
  3004. .date-picker-popup > * > .spinner > .button {
  3005. -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
  3006. -fx-background-insets: 0, 1, 2;
  3007. -fx-color: transparent;
  3008. -fx-background-radius: 0;
  3009. }
  3010. .date-picker-popup > * > .spinner > .button:focused {
  3011. -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
  3012. -fx-color: -fx-hover-base;
  3013. -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
  3014. }
  3015. .date-picker-popup > * > .spinner > .button:hover {
  3016. -fx-color: -fx-hover-base;
  3017. }
  3018. .date-picker-popup > * > .spinner > .button:armed {
  3019. -fx-color: -fx-pressed-base;
  3020. }
  3021. .date-picker-popup > * > .spinner > .left-button {
  3022. -fx-padding: 0 0.333333em 0 0.25em; /* 0 4 0 3 */
  3023. }
  3024. .date-picker-popup > * > .spinner > .right-button {
  3025. -fx-padding: 0 0.25em 0 0.333333em; /* 0 3 0 4 */
  3026. }
  3027. .date-picker-popup > * > .spinner > .button > .left-arrow,
  3028. .date-picker-popup > * > .spinner > .button > .right-arrow {
  3029. -fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-45%);
  3030. -fx-background-insets: 1 0 -1 0, 0;
  3031. -fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
  3032. -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
  3033. }
  3034. .date-picker-popup > * > .spinner > .button:hover > .left-arrow,
  3035. .date-picker-popup > * > .spinner > .button:hover > .right-arrow {
  3036. -fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-50%);
  3037. }
  3038. .date-picker-popup > * > .spinner > .button:pressed > .left-arrow,
  3039. .date-picker-popup > * > .spinner > .button:pressed > .right-arrow {
  3040. -fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-55%);
  3041. }
  3042. .date-picker-popup > * > .spinner > .button > .left-arrow {
  3043. -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
  3044. -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
  3045. -fx-scale-shape: true;
  3046. }
  3047. .date-picker-popup > * > .spinner > .button > .right-arrow {
  3048. -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
  3049. -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
  3050. -fx-scale-shape: true;
  3051. }
  3052. .date-picker-popup > * > .spinner > .label {
  3053. -fx-alignment: CENTER;
  3054. }
  3055. .date-picker-popup > .month-year-pane > .secondary-label {
  3056. -fx-alignment: BASELINE_CENTER;
  3057. -fx-padding: 0.5em 0 0 0; /* 6 0 0 0 */
  3058. -fx-text-fill: #f3622d;
  3059. }
  3060.  
  3061. .date-picker-popup > .calendar-grid {
  3062. -fx-background-color: derive(-fx-selection-bar-non-focused, 60%);
  3063. /*-fx-background-insets: 1 0 0 0;*/
  3064. -fx-padding: 0;
  3065. }
  3066. .date-picker-popup > * > .date-cell {
  3067. -fx-background-color: transparent;
  3068. -fx-background-insets: 1, 2;
  3069. -fx-padding: 0;
  3070. -fx-alignment: BASELINE_CENTER;
  3071. -fx-opacity: 1.0;
  3072. }
  3073. .date-picker-popup > * > .day-name-cell,
  3074. .date-picker-popup > * > .week-number-cell {
  3075. -fx-font-size: 0.916667em;
  3076. }
  3077. .date-picker-popup > * > .week-number-cell {
  3078. -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
  3079. -fx-border-color: -fx-control-inner-background;
  3080. -fx-border-width: 1px;
  3081. -fx-background: -fx-control-inner-background;
  3082. -fx-background-color: -fx-background;
  3083. -fx-text-fill: -fx-accent;
  3084. }
  3085. .date-picker-popup > * > .day-cell {
  3086. -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
  3087. -fx-border-color: derive(-fx-selection-bar-non-focused, 60%);
  3088. -fx-border-width: 1px;
  3089. -fx-font-size: 1em;
  3090. -fx-background: -fx-control-inner-background;
  3091. -fx-background-color: -fx-background;
  3092. -fx-text-fill: -fx-text-background-color;
  3093. }
  3094. .date-picker-popup > * > .hijrah-day-cell {
  3095. -fx-alignment: TOP_LEFT;
  3096. -fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */
  3097. -fx-cell-size: 2.75em;
  3098. }
  3099. .date-picker-popup > * > .day-cell > .secondary-text {
  3100. -fx-fill: #f3622d;
  3101. }
  3102. .date-picker-popup > * > .today {
  3103. -fx-background-color: -fx-control-inner-background, derive(-fx-selection-bar-non-focused, -20%), -fx-control-inner-background;
  3104. -fx-background-insets: 1, 2, 3;
  3105. }
  3106. .date-picker-popup > * > .day-cell:hover,
  3107. .date-picker-popup > * > .selected,
  3108. .date-picker-popup > * > .previous-month.selected,
  3109. .date-picker-popup > * > .next-month.selected {
  3110. -fx-background: -fx-selection-bar;
  3111. }
  3112. .date-picker-popup > * > .previous-month:hover,
  3113. .date-picker-popup > * > .next-month:hover {
  3114. -fx-background: -fx-selection-bar-non-focused;
  3115. }
  3116. .date-picker-popup > * > .today:hover,
  3117. .date-picker-popup > * > .today.selected {
  3118. -fx-background-color: -fx-selection-bar, derive(-fx-selection-bar-non-focused, -20%),-fx-selection-bar;
  3119. }
  3120. .date-picker-popup > * > .day-cell:focused,
  3121. .date-picker-popup > * > .today:focused {
  3122. -fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background;
  3123. -fx-background-insets: 1, 2, 3;
  3124. }
  3125. .date-picker-popup > * > .day-cell:focused:hover,
  3126. .date-picker-popup > * > .today:focused:hover,
  3127. .date-picker-popup > * > .selected:focused,
  3128. .date-picker-popup > * > .today.selected:focused {
  3129. -fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar;
  3130. }
  3131. .date-picker-popup > * > .previous-month,
  3132. .date-picker-popup > * > .next-month {
  3133. -fx-background: derive(-fx-control-inner-background, -4%);
  3134. }
  3135. .date-picker-popup > * > .day-cell:hover > .secondary-text,
  3136. .date-picker-popup > * > .previous-month > .secondary-text,
  3137. .date-picker-popup > * > .next-month > .secondary-text,
  3138. .date-picker-popup > * > .selected > .secondary-text {
  3139. -fx-fill: -fx-text-background-color;
  3140. }
  3141. .date-picker-popup > * > .previous-month.today,
  3142. .date-picker-popup > * > .next-month.today {
  3143. -fx-background-color: derive(-fx-control-inner-background, -4%), derive(-fx-selection-bar-non-focused, -20%), derive(-fx-control-inner-background, -4%);
  3144. }
  3145.  
  3146. .date-picker-popup > * > .previous-month.today:hover,
  3147. .date-picker-popup > * > .next-month.today:hover {
  3148. -fx-background-color: -fx-selection-bar-non-focused, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar-non-focused;
  3149. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!