vgapp 1.1.3 → 1.1.5

package/app/modules/vgfilepreview/scss/vgfilepreview.scss

@@ -1,460 +1,464 @@
-/**
-*--------------------------------------------------------------------------
-* Модуль: VGFilePreview
-* Автор: Vegas DEV
-* Лицензия: смотри LICENSE
-*--------------------------------------------------------------------------
-**/
-
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
-
-%vg-filepreview-vars {
-	@include mix-vars('filepreview', $filepreview-map);
-}
-
-@mixin filepreview-trigger($bg) {
-	border: 0;
-	cursor: pointer;
-	border-radius: var(--vg-filepreview-trigger-radius);
-	padding: var(--vg-filepreview-trigger-padding);
-	font-size: var(--vg-filepreview-trigger-font-size);
-	font-weight: var(--vg-filepreview-trigger-font-weight);
-	background: $bg;
-	color: var(--vg-filepreview-trigger-color);
-}
-
-.vg-filepreview-audio-inline {
-	@extend %vg-filepreview-vars;
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-
-	&__toggle {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--vg-filepreview-audio-inline-toggle-size);
-		height: var(--vg-filepreview-audio-inline-toggle-size);
-		border: 0;
-		border-radius: var(--vg-filepreview-audio-inline-toggle-radius);
-		background: var(--vg-filepreview-audio-inline-toggle-bg);
-		color: var(--vg-filepreview-audio-inline-toggle-color);
-		cursor: pointer;
-		padding: 0;
-		flex: 0 0 auto;
-	}
-
-	&__icon {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-
-		svg {
-			width: var(--vg-filepreview-audio-inline-icon-size);
-			height: var(--vg-filepreview-audio-inline-icon-size);
-		}
-	}
-
-	&__name {
-		line-height: var(--vg-filepreview-audio-inline-name-line-height);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-.vg-filepreview-image-modal,
-.vg-filepreview-text-modal,
-.vg-filepreview-video-modal,
-.vg-filepreview-zip-modal {
-	@extend %vg-filepreview-vars;
-
-	.vg-modal-content {
-		background: var(--vg-filepreview-modal-content-bg);
-		color: var(--vg-filepreview-modal-content-color);
-	}
-
-	.vg-btn-close {
-		top: var(--vg-filepreview-modal-close-top);
-		right: var(--vg-filepreview-modal-close-right);
-	}
-}
-
-.vg-filepreview-image-modal {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: var(--vg-filepreview-image-body-gap);
-		padding: var(--vg-filepreview-modal-body-padding);
-	}
-
-	&__title {
-		color: var(--vg-filepreview-panel-color);
-		font-size: var(--vg-filepreview-modal-title-size);
-		font-weight: var(--vg-filepreview-modal-title-weight);
-		line-height: var(--vg-filepreview-modal-title-line-height);
-		width: 100%;
-		text-align: center;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&__img {
-		display: block;
-		max-width: var(--vg-filepreview-image-img-max-width);
-		max-height: var(--vg-filepreview-image-img-max-height);
-		width: auto;
-		height: auto;
-		object-fit: contain;
-		border-radius: var(--vg-filepreview-image-img-radius);
-	}
-}
-
-.vg-filepreview-image-trigger {
-	@extend %vg-filepreview-vars;
-	@include filepreview-trigger(var(--vg-filepreview-trigger-image-bg));
-}
-
-.vg-filepreview-image-thumb {
-	@extend %vg-filepreview-vars;
-	display: block;
-	margin-top: var(--vg-filepreview-image-thumb-margin-top);
-	max-width: var(--vg-filepreview-image-thumb-max-width);
-	max-height: var(--vg-filepreview-image-thumb-max-height);
-	width: auto;
-	height: auto;
-	border-radius: var(--vg-filepreview-image-thumb-radius);
-	cursor: pointer;
-	object-fit: cover;
-}
-
-.vg-filepreview-text-modal,
-.vg-filepreview-video-modal,
-.vg-filepreview-zip-modal {
-	&__body {
-		padding: var(--vg-filepreview-modal-body-padding);
-	}
-
-	&__title {
-		color: var(--vg-filepreview-panel-color);
-		font-size: var(--vg-filepreview-modal-title-size);
-		font-weight: var(--vg-filepreview-modal-title-weight);
-		line-height: var(--vg-filepreview-modal-title-line-height);
-		margin-bottom: var(--vg-filepreview-modal-title-margin-bottom);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-.vg-filepreview-text-modal {
-	&__content {
-		margin: 0;
-		padding: var(--vg-filepreview-text-content-padding);
-		max-height: var(--vg-filepreview-text-content-max-height);
-		overflow: auto;
-		background: var(--vg-filepreview-text-content-bg);
-		border-radius: var(--vg-filepreview-text-content-radius);
-		font-size: var(--vg-filepreview-text-content-font-size);
-		line-height: var(--vg-filepreview-text-content-line-height);
-		white-space: pre-wrap;
-		word-break: break-word;
-
-		&.is-markdown {
-			white-space: normal;
-
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				margin: var(--vg-filepreview-text-markdown-block-margin);
-				line-height: var(--vg-filepreview-text-markdown-heading-line-height);
-			}
-
-			p {
-				margin: var(--vg-filepreview-text-markdown-block-margin);
-			}
-
-			ul {
-				margin: var(--vg-filepreview-text-markdown-list-margin);
-				padding: 0;
-			}
-
-			pre {
-				margin: var(--vg-filepreview-text-markdown-block-margin);
-				padding: var(--vg-filepreview-text-markdown-code-padding);
-				border-radius: var(--vg-filepreview-text-markdown-code-radius);
-				background: var(--vg-filepreview-text-markdown-code-bg);
-				overflow: auto;
-			}
-
-			a {
-				color: var(--vg-filepreview-text-markdown-link-color);
-			}
-		}
-	}
-}
-
-.vg-filepreview-text-trigger {
-	@extend %vg-filepreview-vars;
-	@include filepreview-trigger(var(--vg-filepreview-trigger-text-bg));
-}
-
-.vg-filepreview-video-modal {
-	&__video {
-		display: block;
-		width: var(--vg-filepreview-video-player-width);
-		max-height: var(--vg-filepreview-video-player-max-height);
-		height: auto;
-		border-radius: var(--vg-filepreview-video-player-radius);
-		background: var(--vg-filepreview-video-player-bg);
-	}
-
-	.vg-modal-header {
-		display: flex;
-		gap: 1rem;
-	}
-}
-
-.vg-filepreview-video-trigger {
-	@extend %vg-filepreview-vars;
-	@include filepreview-trigger(var(--vg-filepreview-trigger-video-bg));
-}
-
-.vg-filepreview-zip-modal {
-	&__content {
-		max-height: var(--vg-filepreview-zip-content-max-height);
-		overflow: auto;
-		background: var(--vg-filepreview-zip-content-bg);
-		border-radius: var(--vg-filepreview-zip-content-radius);
-		padding: var(--vg-filepreview-zip-content-padding);
-	}
-
-	&__table {
-		width: 100%;
-		border-collapse: collapse;
-		font-size: var(--vg-filepreview-zip-table-font-size);
-
-		th,
-		td {
-			padding: var(--vg-filepreview-zip-table-cell-padding);
-			border-bottom: var(--vg-filepreview-zip-table-border);
-			text-align: left;
-			vertical-align: top;
-		}
-
-		td.name {
-			word-break: break-word;
-		}
-	}
-
-	&__loading,
-	&__error,
-	&__empty {
-		font-size: var(--vg-filepreview-zip-status-font-size);
-	}
-}
-
-.vg-filepreview-zip-trigger {
-	@extend %vg-filepreview-vars;
-	@include filepreview-trigger(var(--vg-filepreview-trigger-zip-bg));
-}
-
-.vg-filepreview-pdf-trigger,
-.vg-filepreview-office-trigger,
-.vg-filepreview-download-trigger {
-	@extend %vg-filepreview-vars;
-	@include filepreview-trigger(var(--vg-filepreview-trigger-text-bg));
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-
-	&__icon {
-		display: inline-flex;
-		align-items: center;
-
-		svg {
-			width: 14px;
-			height: 14px;
-		}
-	}
-}
-
-.vg-filepreview-video-modal__navigation {
-	display: inline-flex;
-	gap: 8px;
-}
-
-.vg-filepreview-video-modal__nav-btn {
-	border: 0;
-	border-radius: 8px;
-	padding: 6px 10px;
-	font-size: 12px;
-	font-weight: 600;
-	cursor: pointer;
-	background: rgba(255, 255, 255, .12);
-	color: var(--vg-filepreview-panel-color);
-}
-
-.vg-filepreview-pdf-modal,
-.vg-filepreview-office-modal {
-	@extend %vg-filepreview-vars;
-
-	.vg-modal-content {
-		background: var(--vg-filepreview-modal-content-bg);
-		color: var(--vg-filepreview-modal-content-color);
-	}
-
-	.vg-btn-close {
-		top: var(--vg-filepreview-modal-close-top);
-		right: var(--vg-filepreview-modal-close-right);
-	}
-
-	&__body {
-		padding: var(--vg-filepreview-modal-body-padding);
-	}
-
-	&__title {
-		color: var(--vg-filepreview-panel-color);
-		font-size: var(--vg-filepreview-modal-title-size);
-		font-weight: var(--vg-filepreview-modal-title-weight);
-		line-height: var(--vg-filepreview-modal-title-line-height);
-		margin-bottom: var(--vg-filepreview-modal-title-margin-bottom);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-.vg-filepreview-pdf-modal {
-	&__toolbar {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: var(--vg-filepreview-pdf-toolbar-gap);
-		margin-bottom: var(--vg-filepreview-pdf-toolbar-margin-bottom);
-	}
-
-	&__btn {
-		border: 0;
-		border-radius: var(--vg-filepreview-pdf-btn-radius);
-		padding: var(--vg-filepreview-pdf-btn-padding);
-		font-size: var(--vg-filepreview-pdf-btn-font-size);
-		font-weight: var(--vg-filepreview-pdf-btn-font-weight);
-		cursor: pointer;
-		background: var(--vg-filepreview-pdf-btn-bg);
-		color: var(--vg-filepreview-panel-color);
-	}
-
-	&__meta {
-		font-size: var(--vg-filepreview-pdf-meta-font-size);
-		opacity: var(--vg-filepreview-pdf-meta-opacity);
-	}
-
-	&__frame {
-		display: block;
-		width: var(--vg-filepreview-pdf-frame-width);
-		height: var(--vg-filepreview-pdf-frame-height);
-		border: 0;
-		border-radius: var(--vg-filepreview-pdf-frame-radius);
-		background: var(--vg-filepreview-pdf-frame-bg);
-	}
-}
-
-.vg-filepreview-office-modal {
-	&__frame {
-		display: block;
-		width: var(--vg-filepreview-office-frame-width);
-		height: var(--vg-filepreview-office-frame-height);
-		border: 0;
-		border-radius: var(--vg-filepreview-office-frame-radius);
-		background: var(--vg-filepreview-office-frame-bg);
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--vg-filepreview-office-footer-gap);
-		margin-top: var(--vg-filepreview-office-footer-margin-top);
-	}
-
-	&__hint {
-		font-size: var(--vg-filepreview-office-hint-font-size);
-		opacity: var(--vg-filepreview-office-hint-opacity);
-	}
-
-	&__btn {
-		border: 0;
-		border-radius: var(--vg-filepreview-office-btn-radius);
-		padding: var(--vg-filepreview-office-btn-padding);
-		font-size: var(--vg-filepreview-office-btn-font-size);
-		font-weight: var(--vg-filepreview-office-btn-font-weight);
-		cursor: pointer;
-		background: var(--vg-filepreview-office-btn-bg);
-		color: var(--vg-filepreview-panel-color);
-	}
-}
-
-.vg-filepreview-zip-modal {
-	&__entry-btn {
-		border: 0;
-		border-radius: 6px;
-		padding: 4px 8px;
-		font-size: 11px;
-		cursor: pointer;
-		background: rgba(255, 255, 255, .12);
-		color: var(--vg-filepreview-panel-color);
-	}
-
-	&__entry-preview {
-		margin-top: 10px;
-		padding-top: 10px;
-		border-top: var(--vg-filepreview-zip-table-border);
-	}
-
-	&__entry-preview-title {
-		font-size: 12px;
-		font-weight: 600;
-		margin-bottom: 8px;
-		word-break: break-all;
-	}
-
-	&__entry-preview-text {
-		margin: 0;
-		padding: 10px;
-		border-radius: 8px;
-		background: rgba(255, 255, 255, .08);
-		white-space: pre-wrap;
-		word-break: break-word;
-	}
-
-	&__entry-preview-image {
-		display: block;
-		max-width: 100%;
-		max-height: 360px;
-		border-radius: 8px;
-	}
-
-	&__content {
-		width: 100%;
-	}
-}
-
-[data-vg-filepreview-state="loading"] .preview {
-	opacity: .72;
-}
-
-[data-vg-filepreview-state="error"] .preview,
-[data-vg-filepreview-state="empty"] .preview {
-	opacity: .9;
-}
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGFilePreview
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+%vg-filepreview-vars {
+	@include mix-vars('filepreview', $filepreview-map);
+}
+
+@mixin filepreview-trigger($bg) {
+	border: 0;
+	cursor: pointer;
+	border-radius: var(--vg-filepreview-trigger-radius);
+	padding: var(--vg-filepreview-trigger-padding);
+	font-size: var(--vg-filepreview-trigger-font-size);
+	font-weight: var(--vg-filepreview-trigger-font-weight);
+	background: $bg;
+	color: var(--vg-filepreview-trigger-color);
+}
+
+.is-preview-action {
+	cursor: pointer;
+}
+
+.vg-filepreview-audio-inline {
+	@extend %vg-filepreview-vars;
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+
+	&__toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--vg-filepreview-audio-inline-toggle-size);
+		height: var(--vg-filepreview-audio-inline-toggle-size);
+		border: 0;
+		border-radius: var(--vg-filepreview-audio-inline-toggle-radius);
+		background: var(--vg-filepreview-audio-inline-toggle-bg);
+		color: var(--vg-filepreview-audio-inline-toggle-color);
+		cursor: pointer;
+		padding: 0;
+		flex: 0 0 auto;
+	}
+
+	&__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			width: var(--vg-filepreview-audio-inline-icon-size);
+			height: var(--vg-filepreview-audio-inline-icon-size);
+		}
+	}
+
+	&__name {
+		line-height: var(--vg-filepreview-audio-inline-name-line-height);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.vg-filepreview-image-modal,
+.vg-filepreview-text-modal,
+.vg-filepreview-video-modal,
+.vg-filepreview-zip-modal {
+	@extend %vg-filepreview-vars;
+
+	.vg-modal-content {
+		background: var(--vg-filepreview-modal-content-bg);
+		color: var(--vg-filepreview-modal-content-color);
+	}
+
+	.vg-btn-close {
+		top: var(--vg-filepreview-modal-close-top);
+		right: var(--vg-filepreview-modal-close-right);
+	}
+}
+
+.vg-filepreview-image-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--vg-filepreview-image-body-gap);
+		padding: var(--vg-filepreview-modal-body-padding);
+	}
+
+	&__title {
+		color: var(--vg-filepreview-panel-color);
+		font-size: var(--vg-filepreview-modal-title-size);
+		font-weight: var(--vg-filepreview-modal-title-weight);
+		line-height: var(--vg-filepreview-modal-title-line-height);
+		width: 100%;
+		text-align: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__img {
+		display: block;
+		max-width: var(--vg-filepreview-image-img-max-width);
+		max-height: var(--vg-filepreview-image-img-max-height);
+		width: auto;
+		height: auto;
+		object-fit: contain;
+		border-radius: var(--vg-filepreview-image-img-radius);
+	}
+}
+
+.vg-filepreview-image-trigger {
+	@extend %vg-filepreview-vars;
+	@include filepreview-trigger(var(--vg-filepreview-trigger-image-bg));
+}
+
+.vg-filepreview-image-thumb {
+	@extend %vg-filepreview-vars;
+	display: block;
+	margin-top: var(--vg-filepreview-image-thumb-margin-top);
+	max-width: var(--vg-filepreview-image-thumb-max-width);
+	max-height: var(--vg-filepreview-image-thumb-max-height);
+	width: auto;
+	height: auto;
+	border-radius: var(--vg-filepreview-image-thumb-radius);
+	cursor: pointer;
+	object-fit: cover;
+}
+
+.vg-filepreview-text-modal,
+.vg-filepreview-video-modal,
+.vg-filepreview-zip-modal {
+	&__body {
+		padding: var(--vg-filepreview-modal-body-padding);
+	}
+
+	&__title {
+		color: var(--vg-filepreview-panel-color);
+		font-size: var(--vg-filepreview-modal-title-size);
+		font-weight: var(--vg-filepreview-modal-title-weight);
+		line-height: var(--vg-filepreview-modal-title-line-height);
+		margin-bottom: var(--vg-filepreview-modal-title-margin-bottom);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.vg-filepreview-text-modal {
+	&__content {
+		margin: 0;
+		padding: var(--vg-filepreview-text-content-padding);
+		max-height: var(--vg-filepreview-text-content-max-height);
+		overflow: auto;
+		background: var(--vg-filepreview-text-content-bg);
+		border-radius: var(--vg-filepreview-text-content-radius);
+		font-size: var(--vg-filepreview-text-content-font-size);
+		line-height: var(--vg-filepreview-text-content-line-height);
+		white-space: pre-wrap;
+		word-break: break-word;
+
+		&.is-markdown {
+			white-space: normal;
+
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				margin: var(--vg-filepreview-text-markdown-block-margin);
+				line-height: var(--vg-filepreview-text-markdown-heading-line-height);
+			}
+
+			p {
+				margin: var(--vg-filepreview-text-markdown-block-margin);
+			}
+
+			ul {
+				margin: var(--vg-filepreview-text-markdown-list-margin);
+				padding: 0;
+			}
+
+			pre {
+				margin: var(--vg-filepreview-text-markdown-block-margin);
+				padding: var(--vg-filepreview-text-markdown-code-padding);
+				border-radius: var(--vg-filepreview-text-markdown-code-radius);
+				background: var(--vg-filepreview-text-markdown-code-bg);
+				overflow: auto;
+			}
+
+			a {
+				color: var(--vg-filepreview-text-markdown-link-color);
+			}
+		}
+	}
+}
+
+.vg-filepreview-text-trigger {
+	@extend %vg-filepreview-vars;
+	@include filepreview-trigger(var(--vg-filepreview-trigger-text-bg));
+}
+
+.vg-filepreview-video-modal {
+	&__video {
+		display: block;
+		width: var(--vg-filepreview-video-player-width);
+		max-height: var(--vg-filepreview-video-player-max-height);
+		height: auto;
+		border-radius: var(--vg-filepreview-video-player-radius);
+		background: var(--vg-filepreview-video-player-bg);
+	}
+
+	.vg-modal-header {
+		display: flex;
+		gap: 1rem;
+	}
+}
+
+.vg-filepreview-video-trigger {
+	@extend %vg-filepreview-vars;
+	@include filepreview-trigger(var(--vg-filepreview-trigger-video-bg));
+}
+
+.vg-filepreview-zip-modal {
+	&__content {
+		max-height: var(--vg-filepreview-zip-content-max-height);
+		overflow: auto;
+		background: var(--vg-filepreview-zip-content-bg);
+		border-radius: var(--vg-filepreview-zip-content-radius);
+		padding: var(--vg-filepreview-zip-content-padding);
+	}
+
+	&__table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: var(--vg-filepreview-zip-table-font-size);
+
+		th,
+		td {
+			padding: var(--vg-filepreview-zip-table-cell-padding);
+			border-bottom: var(--vg-filepreview-zip-table-border);
+			text-align: left;
+			vertical-align: top;
+		}
+
+		td.name {
+			word-break: break-word;
+		}
+	}
+
+	&__loading,
+	&__error,
+	&__empty {
+		font-size: var(--vg-filepreview-zip-status-font-size);
+	}
+}
+
+.vg-filepreview-zip-trigger {
+	@extend %vg-filepreview-vars;
+	@include filepreview-trigger(var(--vg-filepreview-trigger-zip-bg));
+}
+
+.vg-filepreview-pdf-trigger,
+.vg-filepreview-office-trigger,
+.vg-filepreview-download-trigger {
+	@extend %vg-filepreview-vars;
+	@include filepreview-trigger(var(--vg-filepreview-trigger-text-bg));
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+
+	&__icon {
+		display: inline-flex;
+		align-items: center;
+
+		svg {
+			width: 14px;
+			height: 14px;
+		}
+	}
+}
+
+.vg-filepreview-video-modal__navigation {
+	display: inline-flex;
+	gap: 8px;
+}
+
+.vg-filepreview-video-modal__nav-btn {
+	border: 0;
+	border-radius: 8px;
+	padding: 6px 10px;
+	font-size: 12px;
+	font-weight: 600;
+	cursor: pointer;
+	background: rgba(255, 255, 255, .12);
+	color: var(--vg-filepreview-panel-color);
+}
+
+.vg-filepreview-pdf-modal,
+.vg-filepreview-office-modal {
+	@extend %vg-filepreview-vars;
+
+	.vg-modal-content {
+		background: var(--vg-filepreview-modal-content-bg);
+		color: var(--vg-filepreview-modal-content-color);
+	}
+
+	.vg-btn-close {
+		top: var(--vg-filepreview-modal-close-top);
+		right: var(--vg-filepreview-modal-close-right);
+	}
+
+	&__body {
+		padding: var(--vg-filepreview-modal-body-padding);
+	}
+
+	&__title {
+		color: var(--vg-filepreview-panel-color);
+		font-size: var(--vg-filepreview-modal-title-size);
+		font-weight: var(--vg-filepreview-modal-title-weight);
+		line-height: var(--vg-filepreview-modal-title-line-height);
+		margin-bottom: var(--vg-filepreview-modal-title-margin-bottom);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.vg-filepreview-pdf-modal {
+	&__toolbar {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--vg-filepreview-pdf-toolbar-gap);
+		margin-bottom: var(--vg-filepreview-pdf-toolbar-margin-bottom);
+	}
+
+	&__btn {
+		border: 0;
+		border-radius: var(--vg-filepreview-pdf-btn-radius);
+		padding: var(--vg-filepreview-pdf-btn-padding);
+		font-size: var(--vg-filepreview-pdf-btn-font-size);
+		font-weight: var(--vg-filepreview-pdf-btn-font-weight);
+		cursor: pointer;
+		background: var(--vg-filepreview-pdf-btn-bg);
+		color: var(--vg-filepreview-panel-color);
+	}
+
+	&__meta {
+		font-size: var(--vg-filepreview-pdf-meta-font-size);
+		opacity: var(--vg-filepreview-pdf-meta-opacity);
+	}
+
+	&__frame {
+		display: block;
+		width: var(--vg-filepreview-pdf-frame-width);
+		height: var(--vg-filepreview-pdf-frame-height);
+		border: 0;
+		border-radius: var(--vg-filepreview-pdf-frame-radius);
+		background: var(--vg-filepreview-pdf-frame-bg);
+	}
+}
+
+.vg-filepreview-office-modal {
+	&__frame {
+		display: block;
+		width: var(--vg-filepreview-office-frame-width);
+		height: var(--vg-filepreview-office-frame-height);
+		border: 0;
+		border-radius: var(--vg-filepreview-office-frame-radius);
+		background: var(--vg-filepreview-office-frame-bg);
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--vg-filepreview-office-footer-gap);
+		margin-top: var(--vg-filepreview-office-footer-margin-top);
+	}
+
+	&__hint {
+		font-size: var(--vg-filepreview-office-hint-font-size);
+		opacity: var(--vg-filepreview-office-hint-opacity);
+	}
+
+	&__btn {
+		border: 0;
+		border-radius: var(--vg-filepreview-office-btn-radius);
+		padding: var(--vg-filepreview-office-btn-padding);
+		font-size: var(--vg-filepreview-office-btn-font-size);
+		font-weight: var(--vg-filepreview-office-btn-font-weight);
+		cursor: pointer;
+		background: var(--vg-filepreview-office-btn-bg);
+		color: var(--vg-filepreview-panel-color);
+	}
+}
+
+.vg-filepreview-zip-modal {
+	&__entry-btn {
+		border: 0;
+		border-radius: 6px;
+		padding: 4px 8px;
+		font-size: 11px;
+		cursor: pointer;
+		background: rgba(255, 255, 255, .12);
+		color: var(--vg-filepreview-panel-color);
+	}
+
+	&__entry-preview {
+		margin-top: 10px;
+		padding-top: 10px;
+		border-top: var(--vg-filepreview-zip-table-border);
+	}
+
+	&__entry-preview-title {
+		font-size: 12px;
+		font-weight: 600;
+		margin-bottom: 8px;
+		word-break: break-all;
+	}
+
+	&__entry-preview-text {
+		margin: 0;
+		padding: 10px;
+		border-radius: 8px;
+		background: rgba(255, 255, 255, .08);
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	&__entry-preview-image {
+		display: block;
+		max-width: 100%;
+		max-height: 360px;
+		border-radius: 8px;
+	}
+
+	&__content {
+		width: 100%;
+	}
+}
+
+[data-vg-filepreview-state="loading"] .preview {
+	opacity: .72;
+}
+
+[data-vg-filepreview-state="error"] .preview,
+[data-vg-filepreview-state="empty"] .preview {
+	opacity: .9;
+}