lbry-desktop/ui/scss/component/_file-render.scss

132 lines
2.3 KiB
SCSS
Raw Normal View History

2018-06-15 02:19:21 +02:00
.file-render {
2019-08-13 07:35:13 +02:00
width: 100%;
height: 100%;
2019-04-27 23:32:47 +02:00
z-index: 1;
2018-06-15 02:19:21 +02:00
overflow: hidden;
2019-11-14 18:23:42 +01:00
max-height: var(--inline-player-max-height);
2018-07-27 02:24:00 +02:00
}
.file-render__viewer {
width: 100%;
height: 100%;
2018-10-17 19:14:24 +02:00
2018-07-27 02:24:00 +02:00
iframe,
2019-02-22 06:01:59 +01:00
webview,
2019-08-06 05:25:33 +02:00
img {
2018-06-15 02:19:21 +02:00
width: 100%;
height: 100%;
2019-08-06 05:25:33 +02:00
object-fit: contain;
2019-02-28 23:51:33 +01:00
}
2019-11-22 22:13:00 +01:00
video {
cursor: pointer;
}
2018-07-27 02:24:00 +02:00
}
2019-08-13 07:35:13 +02:00
.file-render__viewer--document {
@extend .file-render__viewer;
2018-07-27 04:06:39 +02:00
overflow: auto;
2019-11-22 22:13:00 +01:00
background-color: var(--color-file-viewer-background);
2018-10-17 19:14:24 +02:00
.markdown-preview {
height: 100%;
overflow: auto;
2019-06-11 20:10:58 +02:00
padding: var(--spacing-large);
2018-10-17 19:14:24 +02:00
}
2018-07-27 02:24:00 +02:00
}
2019-08-13 07:35:13 +02:00
.file-render__viewer--pdf {
@extend .file-render__viewer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
.file-render__content {
2018-07-28 03:42:35 +02:00
width: 100%;
height: 100%;
2018-10-17 19:14:24 +02:00
overflow: auto;
2018-07-28 03:42:35 +02:00
}
2019-08-13 07:35:13 +02:00
//
// Custom viewers live below here
2019-10-13 19:41:51 +02:00
// These either have custom class names that can't be changed or have styles that need to be overridden
2019-08-13 07:35:13 +02:00
//
2018-10-17 19:14:24 +02:00
// Code-viewer
2019-08-13 07:35:13 +02:00
.CodeMirror {
@extend .file-render__content;
2018-07-27 02:24:00 +02:00
2018-10-17 19:14:24 +02:00
.cm-invalidchar {
display: none;
2018-07-27 02:24:00 +02:00
}
2018-07-28 03:42:35 +02:00
.CodeMirror .CodeMirror-lines {
2018-10-17 19:14:24 +02:00
// is there really a .CodeMirror inside a .CodeMirror?
2019-06-11 20:10:58 +02:00
padding: var(--spacing-small) 0;
2018-07-28 03:42:35 +02:00
}
2018-10-17 19:14:24 +02:00
.CodeMirror-code {
@include font-mono;
letter-spacing: 0.1rem;
2018-07-27 02:24:00 +02:00
}
.CodeMirror-gutters {
2019-12-09 18:25:13 +01:00
background-color: var(--color-gray-1);
border-right: 1px solid var(--color-gray-4);
2019-06-11 20:10:58 +02:00
padding-right: var(--spacing-medium);
2018-07-27 02:24:00 +02:00
}
2018-10-17 19:14:24 +02:00
.CodeMirror-line {
2019-06-11 20:10:58 +02:00
padding-left: var(--spacing-medium);
2018-10-17 19:14:24 +02:00
}
.CodeMirror-linenumber {
2019-12-09 18:25:13 +01:00
color: var(--color-gray-5);
2018-07-27 02:24:00 +02:00
}
}
2019-08-06 05:25:33 +02:00
.video-js {
height: 100%;
width: 100%;
// Removing the play button because we have autoplay turned on
// These are classes added by video.js
.vjs-big-play-button {
display: none;
}
2019-08-14 20:09:45 +02:00
.vjs-modal-dialog .vjs-modal-dialog-content {
position: relative;
padding-top: 5rem;
// Make sure no videojs message interferes with overlaying buttons
pointer-events: none;
}
2019-08-06 05:25:33 +02:00
}
2019-12-12 22:25:31 +01:00
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
.file-render {
.video-js {
display: flex;
align-items: center;
justify-content: center;
.vjs-big-play-button {
@extend .button--icon;
@extend .button--play;
border: none;
position: static;
z-index: 2;
.vjs-icon-placeholder {
display: none;
}
}
}
}