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

254 lines
4.5 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);
2020-01-06 21:57:49 +01:00
@media (max-width: $breakpoint-small) {
// margin-top: 10px;
}
2018-07-27 02:24:00 +02:00
}
2020-01-06 19:32:35 +01:00
.file-render--document {
max-height: none;
2020-01-06 21:57:49 +01:00
.content__loading {
background-color: transparent;
padding: 0;
margin: var(--spacing-xlarge) 0;
.content__loading-text {
color: var(--color-text);
}
}
2020-01-06 19:32:35 +01:00
}
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;
}
.video-js.vjs-fullscreen.vjs-user-inactive.vjs-playing {
video {
cursor: none;
}
}
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;
2018-10-17 19:14:24 +02:00
.markdown-preview {
height: 100%;
overflow: auto;
2020-01-06 19:32:35 +01:00
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
}
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;
2020-02-28 04:44:24 +01:00
max-width: 100vw;
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;
}
}
}
}
2020-01-27 19:52:25 +01:00
.file-render__embed {
height: 100%;
width: 100%;
position: fixed;
.video-js {
display: flex;
align-items: center;
justify-content: center;
.vjs-big-play-button {
@extend .button--icon;
@extend .button--play;
background-color: rgba(0,0,0,0.6);
border: none;
position: static;
z-index: 2;
.vjs-icon-placeholder {
display: none;
}
}
}
.video-js:hover {
.vjs-big-play-button {
background-color: var(--color-primary);
}
}
}
2020-01-27 19:52:25 +01:00
.video-overlay__wrapper {
position: absolute;
left: auto;
right: auto;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 999;
color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
2020-01-27 21:02:58 +01:00
padding: var(--spacing-large);
2020-01-27 19:52:25 +01:00
.button--uri-indicator {
color: var(--color-gray-3);
}
2020-01-27 21:02:58 +01:00
@media (max-width: $breakpoint-small) {
align-items: flex-start;
padding: var(--spacing-small);
.button,
.video-overlay__subtitle,
.video-overlay__actions {
font-size: var(--font-small);
}
}
2020-01-27 19:52:25 +01:00
}
.video-overlay__title {
2020-01-27 21:02:58 +01:00
font-size: var(--font-title);
font-weight: var(--font-weight-light);
2020-01-27 19:52:25 +01:00
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-small);
2020-01-27 21:02:58 +01:00
@media (max-width: $breakpoint-small) {
margin: 0;
font-size: var(--font-medium);
}
2020-01-27 19:52:25 +01:00
}
.video-overlay__subtitle {
color: var(--color-gray-3);
margin: var(--spacing-medium) 0;
2020-01-27 21:02:58 +01:00
line-height: 1;
@media (max-width: $breakpoint-small) {
margin: 0;
}
2020-01-27 19:52:25 +01:00
}
2020-01-27 21:02:58 +01:00
2020-01-27 19:52:25 +01:00
.video-overlay__actions {
margin-top: var(--spacing-large);
2020-01-27 21:02:58 +01:00
.button--link {
color: var(--color-white);
}
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-small);
}
2020-01-27 19:52:25 +01:00
}