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

490 lines
9.4 KiB
SCSS
Raw Normal View History

.file-page {
2020-04-14 01:48:11 +02:00
.file-page__video-container + .card,
.file-render + .card,
.content__cover + .card,
.card + .file-render,
2020-04-14 01:48:11 +02:00
.card + .file-page__video-container,
.card + .content__cover {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
}
.card + .file-render {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
}
.file-page__md {
.card {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card + .file-render {
margin-top: 0;
.card {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-top: none;
}
}
}
}
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-04-14 01:48:11 +02:00
border-radius: var(--card-radius);
}
.file-render--embed {
border-radius: 0;
position: fixed;
max-height: none;
2018-07-27 02:24:00 +02:00
}
2020-01-06 19:32:35 +01:00
.file-render--document {
max-height: none;
overflow: auto;
2020-01-06 21:57:49 +01:00
.markdown-preview {
height: 100%;
overflow: auto;
width: 40em;
margin-left: auto;
margin-right: auto;
max-width: unset;
min-width: unset;
@media (max-width: $breakpoint-small) {
width: 100%;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
}
}
2020-01-06 19:32:35 +01:00
}
2020-04-01 21:36:59 +02:00
.file-render__header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
2020-04-14 01:48:11 +02:00
.file-viewer {
2018-07-27 02:24:00 +02:00
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;
max-height: var(--inline-player-max-height);
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
}
2020-04-26 03:55:23 +02:00
.file-render__viewer--comic {
position: relative;
overflow: hidden;
.comic-viewer {
width: 100%;
2020-06-01 19:03:19 +02:00
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
2020-04-26 03:55:23 +02:00
max-height: var(--inline-player-max-height);
}
}
2020-04-14 01:48:11 +02:00
.file-viewer--iframe {
display: flex; /*this eliminates extra height from whitespace, if someone edits this with a better technique, tell Jeremy*/
/*
ideally iframes would dynamiclly grow, see <IframeReact> for a start at this
for now, since we don't know size, let's make as large as we can without being larger than available area
*/
iframe {
2020-06-01 19:03:19 +02:00
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
2018-10-17 19:14:24 +02:00
}
2018-07-27 02:24:00 +02:00
}
.file-render__viewer--three {
position: relative;
overflow: hidden;
.three-viewer {
2020-06-01 19:03:19 +02:00
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
2020-04-26 07:17:13 +02:00
max-height: var(--inline-player-max-height);
}
}
2020-04-14 01:48:11 +02:00
.file-viewer__overlay {
position: absolute;
left: auto;
right: auto;
height: 100%;
width: 100%;
z-index: 2;
color: var(--color-white);
font-size: var(--font-body); /* put back font size from videojs change*/
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
2020-04-14 01:48:11 +02:00
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
}
.button--uri-indicator,
.button--link {
color: var(--color-white);
}
}
.content__viewer--floating {
.file-viewer__overlay-title,
.file-viewer__overlay-secondary {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
}
}
@media (max-width: $breakpoint-small) {
.file-viewer__overlay-title,
.file-viewer__overlay-secondary {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
}
}
.file-viewer__overlay-title {
text-align: center;
font-size: var(--font-large);
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
2020-04-14 01:48:11 +02:00
}
.file-viewer__overlay-secondary {
color: var(--color-text-subtitle);
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
2020-04-14 01:48:11 +02:00
}
.file-viewer__overlay-actions {
.button + .button {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2020-04-14 01:48:11 +02:00
}
}
.file-viewer__overlay-logo {
color: var(--color-white);
font-weight: bold;
.icon {
height: 30px;
stroke-width: 5px;
}
}
2020-05-22 22:47:10 +02:00
.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
2020-04-14 01:48:11 +02:00
display: none;
}
2020-05-22 22:47:10 +02:00
.file-viewer__embedded-header {
2020-04-14 01:48:11 +02:00
position: absolute;
display: flex;
justify-content: space-between;
2020-04-14 01:48:11 +02:00
width: 100%;
top: 0;
z-index: 2;
font-size: var(--font-large);
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2020-04-29 23:45:43 +02:00
background-repeat: repeat-x;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
2020-04-14 01:48:11 +02:00
.button {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
2020-04-14 01:48:11 +02:00
color: var(--color-white);
2020-04-30 17:01:11 +02:00
.button__label {
white-space: nowrap;
}
&:hover {
color: var(--color-white);
}
2020-05-22 22:47:10 +02:00
}
2020-05-22 22:47:10 +02:00
.credit-amount,
.icon--Key {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
2020-05-22 22:47:10 +02:00
}
}
2020-04-30 17:01:11 +02:00
2020-05-22 22:47:10 +02:00
.file-viewer__embedded-title {
max-width: 75%;
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
}
}
.file-viewer__embedded-info {
display: flex;
align-items: center;
font-size: var(--font-small);
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2020-05-22 22:47:10 +02:00
white-space: nowrap;
& > *:not(:last-child) {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-s);
2020-04-14 01:48:11 +02:00
}
}
2019-08-13 07:35:13 +02:00
.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?
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s) 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);
2020-06-01 19:03:19 +02:00
padding-right: var(--spacing-m);
2018-07-27 02:24:00 +02:00
}
2018-10-17 19:14:24 +02:00
.CodeMirror-line {
2020-06-01 19:03:19 +02:00
padding-left: var(--spacing-m);
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
2020-04-16 23:43:09 +02:00
.video-js-parent {
2019-08-06 05:25:33 +02:00
height: 100%;
width: 100%;
2020-04-16 23:43:09 +02:00
}
2019-08-06 05:25:33 +02:00
2020-04-28 21:33:30 +02:00
.video-js-parent--ios {
.vjs-control-bar {
display: none;
}
}
2020-04-16 23:43:09 +02:00
// By default no video js play button
.vjs-big-play-button {
display: none;
}
.video-js {
height: 100%;
width: 100%;
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;
}
.vjs-control-bar {
.vjs-remaining-time {
display: none;
}
.vjs-current-time,
.vjs-time-divider,
.vjs-duration {
display: flex;
}
}
2019-08-06 05:25:33 +02:00
}
2019-12-12 22:25:31 +01:00
.video-js:not(.vjs-fullscreen).vjs-layout-small {
.vjs-current-time {
display: flex;
padding-left: 0.5em;
padding-right: 0;
}
.vjs-time-divider {
display: flex;
}
.vjs-duration {
display: flex;
padding-left: 0;
padding-right: 0.5em;
}
}
2020-04-28 00:44:19 +02:00
.video-js:hover {
.vjs-big-play-button {
background-color: var(--color-primary);
}
}
.video-js--tap-to-unmute {
visibility: hidden; // Start off as hidden.
z-index: 2;
position: absolute;
2020-06-16 23:09:32 +02:00
top: var(--spacing-xs);
left: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-m); // Make it comfy for touch.
color: var(--color-gray-1);
background: black;
border: 1px solid var(--color-gray-4);
2020-07-09 20:18:56 +02:00
opacity: 0.9;
&:hover {
opacity: 1;
color: var(--color-white);
}
}
2019-12-12 22:25:31 +01:00
.file-render {
.video-js {
display: flex;
align-items: center;
justify-content: center;
2020-04-14 01:48:11 +02:00
}
2019-12-12 22:25:31 +01:00
2020-04-14 01:48:11 +02:00
.vjs-big-play-button {
@extend .button--icon;
@extend .button--play;
border: none;
position: static;
z-index: 2;
.vjs-icon-placeholder {
display: none;
2019-12-12 22:25:31 +01:00
}
}
}
2020-01-27 19:52:25 +01:00
2020-04-14 01:48:11 +02:00
.file-render--embed {
2020-04-30 17:01:11 +02:00
// on embeds, do not inject our colors until interaction
.video-js:hover {
.vjs-big-play-button {
background-color: var(--color-primary);
}
}
.vjs-paused {
.vjs-big-play-button {
2020-04-28 00:44:19 +02:00
display: block;
2020-04-29 16:00:48 +02:00
background-color: rgba(0, 0, 0, 0.6);
}
}
2020-04-30 17:01:11 +02:00
.vjs-ended {
2020-04-29 16:00:48 +02:00
.vjs-big-play-button {
2020-04-30 17:01:11 +02:00
display: none;
}
}
2020-06-12 23:41:26 +02:00
.file-viewer {
iframe,
webview,
img {
max-height: none;
}
}
}
2020-04-30 16:37:39 +02:00
.file-viewer--ended-embed .vjs-big-play-button {
display: none !important; // yes this is dumb, but this was broken and the above CSS was overriding
}
2020-04-14 01:48:11 +02:00
.autoplay-countdown {
2020-01-27 19:52:25 +01:00
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
2020-04-14 01:48:11 +02:00
width: 100%;
2020-01-27 19:52:25 +01:00
}
2020-04-14 01:48:11 +02:00
.autoplay-countdown__timer {
width: 100%;
text-align: center;
font-size: var(--font-small);
}
.autoplay-countdown__counter {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-m);
2020-01-27 19:52:25 +01:00
}
2020-04-14 01:48:11 +02:00
.autoplay-countdown__button {
/* Border size and color */
border: 3px solid transparent;
/* Creates a circle */
border-radius: 50%;
/* Circle size */
display: inline-block;
height: 86px;
width: 86px;
/* Use transform to rotate to adjust where opening appears */
transition: border 1s;
transform: rotate(45deg);
.button {
background-color: transparent;
transform: rotate(-45deg);
&:hover {
background-color: var(--color-primary);
}
2020-01-27 21:02:58 +01:00
}
2020-01-27 19:52:25 +01:00
}
2020-04-14 01:48:11 +02:00
.autoplay-countdown__button--4 {
border-top-color: #fff;
}
.autoplay-countdown__button--3 {
border-top-color: #fff;
border-right-color: #fff;
}
.autoplay-countdown__button--2 {
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
}
.autoplay-countdown__button--1 {
border-color: #fff;
2020-01-27 19:52:25 +01:00
}