vuestic-ui
Version:
Vue 3 UI Framework
38 lines • 1.26 kB
CSS
:root {
--va-viewer-content-overlay-background-color: rgba(0, 0, 0, 0.45);
--va-viewer-content-overlay-z-index: var(--va-z-index-teleport-overlay);
--va-viewer-content-controls-panel-padding: 0.75rem;
--va-viewer-content-controls-panel-justify-content: flex-end;
--va-viewer-content-controls-panel-background-color: rgba(0, 0, 0, 0.1);
--va-viewer-content-controls-panel-z-index: calc(var(--va-z-index-teleport-overlay) + 50);
}
.va-viewer {
--va-image-position: relative;
}
.va-viewer-content {
position: fixed;
inset: 0;
z-index: var(--va-viewer-content-overlay-z-index);
display: flex;
justify-content: center;
background-color: var(--va-viewer-content-overlay-background-color);
}
.va-viewer-content__main-area {
--va-image-content-position: relative;
display: flex;
}
.va-viewer-content__main-area > * {
width: auto;
max-width: unset;
}
.va-viewer-content__controls-panel {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--va-viewer-content-controls-panel-z-index);
display: flex;
justify-content: var(--va-viewer-content-controls-panel-justify-content);
padding: var(--va-viewer-content-controls-panel-padding);
background-color: var(--va-viewer-content-controls-panel-background-color);
}