From ff3c3617ee8fe41eb104d49a631dbc57b545d58e Mon Sep 17 00:00:00 2001 From: Dirk Lemmermann Date: Tue, 9 Apr 2024 15:04:07 +0200 Subject: [PATCH] More CSS styling fixes / improvements. --- .../src/main/resources/pdf-view-atlanta.css | 117 ++++++++---------- .../resources/com/dlsc/pdfviewfx/pdf-view.css | 50 ++++---- 2 files changed, 79 insertions(+), 88 deletions(-) diff --git a/pdfviewfx-demo/src/main/resources/pdf-view-atlanta.css b/pdfviewfx-demo/src/main/resources/pdf-view-atlanta.css index 26cd53c..683b3bb 100644 --- a/pdfviewfx-demo/src/main/resources/pdf-view-atlanta.css +++ b/pdfviewfx-demo/src/main/resources/pdf-view-atlanta.css @@ -5,133 +5,130 @@ /* ------------------------------------------------------------------ * 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; @@ -139,65 +136,59 @@ -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; @@ -205,9 +196,9 @@ -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 { } \ No newline at end of file diff --git a/pdfviewfx/src/main/resources/com/dlsc/pdfviewfx/pdf-view.css b/pdfviewfx/src/main/resources/com/dlsc/pdfviewfx/pdf-view.css index e650c1d..64b37a7 100644 --- 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; }