More CSS styling fixes / improvements.

dlsc-software-consulting-gmbh · Apr 9, 2024 · ff3c361 · ff3c361
1 parent a3bd4b8
commit ff3c361
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 88 deletions.
diff --git a/pdfviewfx-demo/src/main/resources/pdf-view-atlanta.css b/pdfviewfx-demo/src/main/resources/pdf-view-atlanta.css
@@ -5,209 +5,200 @@
 /* ------------------------------------------------------------------
  * Search Result List View
  */
-.pdf-view .search-result-list-view {
+.pdf-view > .border-pane > .tray > .search-result-list-view{
     -fx-pref-width: 300;
 }
 
-.pdf-view .search-result-list-view .list-cell {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell {
     -fx-padding: 10;
     -fx-text-fill: -color-default-bg;
     -fx-background-color: -color-thumbnail-bar;
     -fx-cell-size: -1;
 }
 
-.pdf-view .search-result-list-view .list-cell .page-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .page-label {
     -fx-font-weight: bold;
 }
 
-.pdf-view .search-result-list-view .list-cell:selected .page-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell:selected .page-label {
     -fx-text-fill: -color-fg-emphasis;
 }
 
-.pdf-view .search-result-list-view .list-cell .matches-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .matches-label {
     -fx-font-size: .9em;
     -fx-text-fill: -color-fg-default;
     -fx-opacity: .5
 }
 
-.pdf-view .search-result-list-view .list-cell:focused,
-.pdf-view .search-result-list-view .list-cell:selected {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell:focused,
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell:selected {
     -fx-text-fill: -color-fg-emphasis;
     -fx-background-color: -color-neutral-emphasis-plus;
 }
 
-.pdf-view .search-result-list-view:focused .list-cell:focused,
-.pdf-view .search-result-list-view:focused .list-cell:selected {
+.pdf-view > .border-pane > .tray > .search-result-list-view:focused .list-cell:focused,
+.pdf-view > .border-pane > .tray > .search-result-list-view:focused .list-cell:selected {
     -fx-text-fill: -color-fg-emphasis;
     -fx-background-color: -color-neutral-emphasis-plus;
 }
 
-.pdf-view .search-result-list-view:focused .list-cell:focused .matches-label,
-.pdf-view .search-result-list-view:focused .list-cell:selected .matches-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view:focused .list-cell:focused .matches-label,
+.pdf-view > .border-pane > .tray > .search-result-list-view:focused .list-cell:selected .matches-label {
     -fx-text-fill: -color-fg-emphasis;
 }
 
-.pdf-view .search-result-list-view .list-cell .image-view-wrapper {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .image-view-wrapper {
     -fx-padding: 2px;
     -fx-background-color: white;
     -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, .1), 6, 0.2, 0, 0);;
 }
 
-.pdf-view .search-result-list-view .list-cell .summary-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .summary-label {
     -fx-text-fill: -color-fg-default;
     -fx-font-size: .9em;
 }
 
-.pdf-view .search-result-list-view .list-cell:selected .summary-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell:selected .summary-label {
     -fx-text-fill: -color-fg-emphasis;
 }
 
 /* ------------------------------------------------------------------
  * Thumbnail List View
  */
-.pdf-view .thumbnail-list-view .list-cell,
-.pdf-view .thumbnail-list-view:focused .list-cell {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view {
+    -fx-pref-width: 200;
+}
+
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell {
     -fx-background-color: -color-thumbnail-bar;
     -fx-padding: 20 20 10 10;
     -fx-cell-size: -1;
 }
 
-.pdf-view .thumbnail-list-view .list-cell:odd,
-.pdf-view .thumbnail-list-view:focused .list-cell:odd {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:odd,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:odd {
     -fx-background-color: -color-thumbnail-bar;
 }
 
-.pdf-view .thumbnail-list-view .list-cell .page-number-label,
-.pdf-view .thumbnail-list-view:focused .list-cell .page-number-label,
-.pdf-view .thumbnail-list-view .list-cell:selected .page-number-label,
-.pdf-view .thumbnail-list-view:focused .list-cell:selected .page-number-label {
-    -fx-text-fill: -color-fg-default;
-    -fx-font-size: 10px;
-}
-
-.pdf-view .thumbnail-list-view .list-cell:selected,
-.pdf-view .thumbnail-list-view:focused .list-cell:selected {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected:focused,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
     -fx-background-color: -color-thumbnail-bar;
 }
 
-.pdf-view .thumbnail-list-view {
-    -fx-pref-width: 200;
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell .page-number-label,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell .page-number-label,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .page-number-label,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .page-number-label {
+    -fx-text-fill: -color-fg-default;
+    -fx-font-size: 10px;
 }
 
-.pdf-view .thumbnail-list-view .list-cell .image-view-wrapper {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell .image-view-wrapper {
     -fx-padding: 2px;
     -fx-background-color: white;
     -fx-background-radius: 3px;
     -fx-effect: dropshadow(gaussian, -color-accent-muted, 6, 0.2, 0, 0);;
 }
 
-.pdf-view .thumbnail-list-view .list-cell:selected .image-view-wrapper {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .image-view-wrapper {
     -fx-background-color: -color-accent-emphasis, white;
     -fx-background-insets: -4, 0;
     -fx-background-radius: 4px, 3px;
 }
 
-.pdf-view .label {
-    -fx-text-fill: -color-fg-default;
-}
-
-.pdf-view .tool-bar .search-field {
+.pdf-view > .border-pane > .tool-bar > .container > .search-field {
     -fx-text-fill: -color-fg-default;
     -fx-background-color: -color-bg-default;
     -fx-border-color: -color-border-default;
 }
 
-.pdf-view .tool-bar .search-field .ikonli-font-icon {
+.pdf-view > .border-pane > .tool-bar > .container > .search-field .ikonli-font-icon {
     -fx-opacity: .66;
     -fx-icon-color: -color-fg-default;
     -fx-icon-size: 16px;
 }
 
-.pdf-view .tool-bar .search-field .ikonli-font-icon:hover {
+.pdf-view > .border-pane > .tool-bar > .container > .search-field .ikonli-font-icon:hover {
     -fx-opacity: 1;
 }
 
-.pdf-view .tool-bar .search-field .ikonli-font-icon:pressed {
+.pdf-view > .border-pane > .tool-bar > .container > .search-field .ikonli-font-icon:pressed {
     -fx-opacity: 1;
 }
 
-.pdf-view .search-navigator {
+.pdf-view > .border-pane > .main-area > .search-navigator {
     -fx-background-color: -color-accent-subtle;
     -fx-padding: 5px 10px;
     -fx-fill-height: true;
     -fx-spacing: 10px;
     -fx-alignment: center-right;
 }
 
-.pdf-view .search-navigator .search-result-label {
+.pdf-view > .border-pane > .main-area > .search-navigator > .search-result-label {
     -fx-text-fill: -color-accent-fg;
 }
 
-.pdf-view .search-navigator .search-bar-button {
+.pdf-view > .border-pane > .main-area > .search-navigator > .button-box > .search-bar-button {
 }
 
-.pdf-view .search-navigator .search-bar-button:hover {
+.pdf-view > .border-pane > .main-area > .search-navigator > .button-box > .search-bar-button:hover {
 }
 
-.pdf-view .search-navigator .search-bar-button:pressed {
+.pdf-view > .border-pane > .main-area > .search-navigator > .button-box > .search-bar-button:pressed {
 }
 
-.pdf-view .search-navigator .search-bar-button:disabled {
+.pdf-view > .border-pane > .main-area > .search-navigator > .button-box > .search-bar-button:disabled {
     -fx-opacity: 1;
 }
 
-.pdf-view .search-navigator .search-bar-button .ikonli-font-icon {
+.pdf-view > .border-pane > .main-area > .search-navigator > .button-box > .search-bar-button .ikonli-font-icon {
 }
 
-.pdf-view .search-navigator .previous-search-result {
+.pdf-view > .border-pane > .main-area > .search-navigator > .button-box > .search-bar-button.previous-search-result {
     -fx-background-radius: 3 0 0 3, 3 0 0 3;
 }
 
-.pdf-view .search-navigator .next-search-result {
+.pdf-view > .border-pane > .main-area > .search-navigator > .button-box > .search-bar-button.next-search-result {
     -fx-background-radius: 0 3 3 0, 0 3 3 0;
     -fx-background-insets: 0, 1 1 1 0;
 }
 
-.pdf-view .scroll-pane {
-}
-
-.pdf-view .scroll-pane .image-view-wrapper {
+.pdf-view > .border-pane > .main-area > .scroll-pane .image-view-wrapper {
     -fx-background-color: white;
     -fx-effect: dropshadow(gaussian, -color-accent-muted, 6, 0.2, 0, 0);;
 }
 
-.pdf-view .tool-bar .tool-bar-button .ikonli-font-icon {
+.pdf-view > .border-pane > .tool-bar > .container .tool-bar-button .ikonli-font-icon {
     -fx-icon-size: 18px;
     -fx-icon-color: -color-fg-default;
 }
 
-.pdf-view .page-control {
-}
-
-.pdf-view .page-control .previous-page-button {
+.pdf-view > .border-pane > .tool-bar > .container > .page-control > .previous-page-button {
     -fx-background-radius: 2px 0px 0px 2px, 1px 0px 0px 1px;
 }
 
-.pdf-view .page-control .page-number-button {
+.pdf-view > .border-pane > .tool-bar > .container > .page-control > .page-number-button {
     -fx-background-radius: 0px, 0px;
     -fx-background-insets: 0px, 1px 0px 1px 1px;
 }
 
-.pdf-view .page-control .next-page-button {
+.pdf-view > .border-pane > .tool-bar > .container > .page-control > .next-page-button {
     -fx-background-radius: 0px 2px 2px 0px, 0px 1px 1px 0px;
 }
 
-.pdf-view .page-control .page-field {
+.pdf-view > .border-pane > .tool-bar > .container > .page-control .page-field {
     -fx-pref-column-count: 4;
     -fx-background-insets: 0px;
     -fx-background-color: -color-bg-default;
     -fx-border-color: -color-border-default;
     -fx-border-width: 1px 0px 1px 0px;
 }
 
-.pdf-view .page-control .page-field:invalid {
+.pdf-view > .border-pane > .tool-bar > .container > .page-control .page-field:invalid {
     -fx-background-color: -color-danger-muted;
 }
 
-.pdf-view .bouncer {
+.pdf-view > .border-pane > .main-area > .scroll-pane .bouncer {
 }
diff --git a/pdfviewfx/src/main/resources/com/dlsc/pdfviewfx/pdf-view.css b/pdfviewfx/src/main/resources/com/dlsc/pdfviewfx/pdf-view.css
@@ -4,99 +4,99 @@
 /* ------------------------------------------------------------------
  * Search Result List View
  */
-.pdf-view .search-result-list-view {
+.pdf-view > .border-pane > .tray > .search-result-list-view {
     -fx-pref-width: 300;
 }
 
-.pdf-view .search-result-list-view .list-cell {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell {
     -fx-padding: 10;
     -fx-text-fill: -fx-text-background-color;
 }
 
-.pdf-view .search-result-list-view .list-cell .page-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .page-label {
     -fx-font-weight: bold;
 }
 
-.pdf-view .search-result-list-view .list-cell .matches-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .matches-label {
     -fx-font-size: .9em;
     -fx-text-fill: -fx-text-background-color;
     -fx-opacity: .5
 }
 
-.pdf-view .search-result-list-view:focused .list-cell:focused .matches-label,
-.pdf-view .search-result-list-view:focused .list-cell:selected .matches-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view:focused .list-cell:focused .matches-label,
+.pdf-view > .border-pane > .tray > .search-result-list-view:focused .list-cell:selected .matches-label {
 }
 
-.pdf-view .search-result-list-view .list-cell .image-view-wrapper {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .image-view-wrapper {
     -fx-padding: 2px;
     -fx-background-color: white;
     -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, .1), 6, 0.2, 0, 0);;
 }
 
-.pdf-view .search-result-list-view .list-cell .summary-label {
+.pdf-view > .border-pane > .tray > .search-result-list-view.list-cell .summary-label {
     -fx-font-size: .9em;
 }
 
 /* ------------------------------------------------------------------
  * Thumbnail List View
  */
-.pdf-view .thumbnail-list-view {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view {
     -fx-pref-width: 200;
 }
 
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell,
-.pdf-view .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell {
     -fx-background: rgb(245, 245, 245);
     -fx-background-color: -fx-background;
     -fx-padding: 20 20 10 10;
     -fx-cell-size: -1;
 }
 
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:odd,
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:odd {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:odd,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:odd {
     -fx-background: rgb(245, 245, 245);
     -fx-background-color: -fx-background;
 }
 
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected,
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected:focused,
-.pdf-view .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected:focused,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
     -fx-background: rgb(245, 245, 245);
     -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
     -fx-background-insets: 0px;
 }
 
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell .page-number-label,
-.pdf-view .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell .page-number-label,
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .page-number-label,
-.pdf-view .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .page-number-label {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell .page-number-label,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell .page-number-label,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .page-number-label,
+.pdf-view > .border-pane > .tray > .thumbnail-list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .page-number-label {
     -fx-text-fill: -fx-text-background-color;
     -fx-font-size: 10px;
 }
 
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell .image-view-wrapper {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell .image-view-wrapper {
     -fx-padding: 2px;
     -fx-background-color: white;
     -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, .1), 6, 0.2, 0, 0);;
 }
 
-.pdf-view .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .image-view-wrapper {
+.pdf-view > .border-pane > .tray > .thumbnail-list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected .image-view-wrapper {
     -fx-background-color: -fx-selection-bar, white;
     -fx-background-insets: 0, 2;
     -fx-background-radius: 2px;
 }
 
-.pdf-view > .border-pane > .tool-bar > .search-field .ikonli-font-icon {
+.pdf-view > .border-pane > .tool-bar > .container > .search-field .ikonli-font-icon {
     -fx-opacity: .66;
     -fx-icon-color: -fx-text-background-color;
     -fx-icon-size: 16px;
 }
 
-.pdf-view > .border-pane > .tool-bar > .search-field .ikonli-font-icon:hover {
+.pdf-view > .border-pane > .tool-bar > .container > .search-field .ikonli-font-icon:hover {
     -fx-opacity: 1;
 }
 
-.pdf-view > .border-pane > .tool-bar > .search-field .ikonli-font-icon:pressed {
+.pdf-view > .border-pane > .tool-bar > .container > .search-field .ikonli-font-icon:pressed {
     -fx-opacity: 1;
 }