diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 8ec4f2a..203d828 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -20,6 +20,7 @@ @import 'src/2.blocks.dialog.css'; @import 'src/2.blocks.header.css'; @import 'src/2.blocks.pill.css'; +@import 'src/2.blocks.pdf-viewer.css'; @import 'src/2.blocks.skip-link.css'; /* UTILITY CLASSES */ diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css index 76451ec..7718a4a 100644 --- a/src/assets/css/src/2.blocks.dialog.css +++ b/src/assets/css/src/2.blocks.dialog.css @@ -23,7 +23,7 @@ height: var(--dialog-header-h); padding: 1rem; color: var(--color-white); - background: var(--color-white-20); + background: var(--color-white-10); display: flex; gap: var(--space-16); } @@ -86,7 +86,13 @@ height: var(--footer-h); padding: 1rem; color: var(--color-white); - background: var(--color-white-20); + background: var(--color-white-10); display: flex; gap: var(--space-16); +} +.dialog#virtual-sample [data-pc-section="footer"] { + padding: 0; +} +.dialog#virtual-sample [data-pc-section="footer"] > *:not(#toggle-comments) { + display: none; } \ No newline at end of file diff --git a/src/assets/css/src/2.blocks.pdf-viewer.css b/src/assets/css/src/2.blocks.pdf-viewer.css new file mode 100644 index 0000000..ce67a22 --- /dev/null +++ b/src/assets/css/src/2.blocks.pdf-viewer.css @@ -0,0 +1,115 @@ +/* PDF VIEWER BLOCK */ + +.vpv-variables { + /* Base styles */ + --vpv-base-radius: var(--rounded-xl); + /* Viewer container */ + --vpv-container-width-sm: 48rem; + /* Toolbar */ + --vpv-toolbar-size: 4.5rem; +} +.vpv-variables.vpv-variables__dark { + /* Base styles */ + --vpv-base-border-color: var(--color-grey-700); + /* Viewer container */ + --vpv-container-border-color: var(--vpv-base-border-color); + /* Loader */ + --vpv-loader-backdrop-color: rgba(0, 0, 0, 0.8); + /* Toolbar */ + --vpv-toolbar-background-color: var(--color-black); + --vpv-toolbar-color: white; + --vpv-toolbar-border-color: var(--vpv-base-border-color); + /* Sidebar */ + --vpv-sidebar-content-background-color: var(--color-black); + --vpv-sidebar-content_thumbnail-focused-border-color: var(--color-white-20); + /* Drop file mask */ + --vpv-drop-zone-background: #1c2024; + --vpv-drop-zone-border: #434c56; + /* PDF Pages Content*/ + --vpv-pages-container-background: black; + /* Popover */ + --vpv-popover-background-color: black; + --vpv-popover-color: var(--color-white); + --vpv-popover-border-color: transparent; + /* Menu Dropdown */ + --vpv-dropdown-menu-content-background: #181818; + --vpv-dropdown-menu-content-menu-hover-background: var(--color-white-10); + --vpv-dropdown-menu-content-separator-background: var(--color-white-10); + --vpv-dropdown-menu-content-border-color: var(--color-white-10); + --vpv-dropdown-separator: var(--color-white-10); + /* Search Input */ + --vpv-input-background-color: transparent; + --vpv-input-border-color: var(--color-white); + --vpv-input-placeholder-color: #596673; + /* Modal of PDF Properties */ + --vpv-properties-content-background: var( + --vpv-dropdown-menu-content-background + ); + --vpv-properties-content-secondary-color: #c6ccd2; + --vpv-properties-content-color: var(--vpv-toolbar-color); + --vpv-properties-separator: var(--vpv-dropdown-separator); + --vpv-properties-header: white; + /* Modal of Print Progress */ + --vpv-print-progress-background: var(--vpv-dropdown-menu-content-background); + /* Tooltip */ + --vpv-tooltip-background: #181818; + --vpv-tooltip-color: white; + --vpv-tooltip-border-color: var(--color-black); + /* Outline */ + --vpv-outline-color: var(--color-white-10); +} + +.vpv-container { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} +.vpv-body-wrapper, +.vpv-container .vpv-sidebar-wrapper { + margin-top: 0 !important; + margin-bottom: var(--vpv-toolbar-size) !important; +} +.vpv-splitter { + max-width: 0; +} + +/* Sidebar */ +.vpv-container .vpv-sidebar-wrapper__opened { + max-width: 9rem !important; +} +.vpv-sidebar-features { + display: none; +} +.pdf-thumbnail-wrapper .pdf-thumbnail img, +.pdf-thumbnail-wrapper .pdf-thumbnail .placeholder { + border-radius: var(--rounded-md); +} + +/* Toolbar */ +.vpv-container .vpv-toolbar-wrapper { + border-bottom-width: 0; + border-top-width: 1px; + padding-left: 1rem !important; +} +.vpv-toolbar-wrapper { + top: unset !important; + bottom: 0 !important; +} +.vpv-toolbar-start .vpv-toolbar-btn { + display: none !important; +} +.vpv-toolbar-start::before { + content: "Page"; +} +.vpv-input { + border-radius: var(--rounded-sm) !important; + max-width: 1.5rem !important; +} +.vpv-input ~ span { + color: var(--color-grey-400); +} +.vpv-toolbar-end { + padding-right: 4rem; +} +.vpv-toolbar-end > button { + display: none !important; +} \ No newline at end of file diff --git a/src/components/project/brief/PdfViewer.vue b/src/components/project/brief/PdfViewer.vue index 82b48a5..e6f530f 100644 --- a/src/components/project/brief/PdfViewer.vue +++ b/src/components/project/brief/PdfViewer.vue @@ -191,119 +191,5 @@ function showDraftMarker(draftComment) { diff --git a/src/components/project/virtual-sample/StaticView.vue b/src/components/project/virtual-sample/StaticView.vue index 592b0e0..7cad08d 100644 --- a/src/components/project/virtual-sample/StaticView.vue +++ b/src/components/project/virtual-sample/StaticView.vue @@ -44,10 +44,15 @@ const openedFile = ref(step.files.static[activeTab.value]);