lbry-desktop/ui/scss/component/_content.scss

258 lines
4.6 KiB
SCSS
Raw Permalink Normal View History

2019-08-13 07:35:13 +02:00
.content__viewer {
@extend .card;
position: absolute;
2020-08-11 22:32:03 +02:00
top: var(--spacing-s);
border-radius: var(--border-radius);
@media (max-width: $breakpoint-small) {
border-radius: 0;
}
2019-08-13 07:35:13 +02:00
}
.content__viewer--disable-click {
pointer-events: none;
}
2019-11-14 18:23:42 +01:00
.content__viewer--inline {
max-height: var(--inline-player-max-height);
border: none;
2019-11-14 18:23:42 +01:00
}
.content__viewer--secondary {
.vjs-button--theater-mode {
display: none;
}
}
2019-08-13 07:35:13 +02:00
.content__viewer--floating {
position: fixed;
margin-bottom: 0;
height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
overflow: hidden;
2020-06-01 19:03:19 +02:00
left: calc(var(--spacing-l) + var(--spacing-s));
z-index: 9999;
2019-08-13 07:35:13 +02:00
border: 2px solid black;
.file-render--video {
border-radius: unset;
}
2019-08-13 07:35:13 +02:00
&:hover {
.video-js--tap-to-unmute {
max-width: calc(var(--floating-viewer-width) - (var(--spacing-xs) * 3) - 42px);
}
2020-07-22 22:56:58 +02:00
.content__floating-close {
2019-08-13 07:35:13 +02:00
visibility: visible;
z-index: 9999;
2019-08-13 07:35:13 +02:00
}
}
}
2021-01-08 16:21:27 +01:00
.content__viewer--theater-mode {
top: 0;
border-radius: 0;
border: none;
right: 0;
// Next line is fixing the player width
width: unset !important;
.file-render--video {
border-radius: 0;
}
2021-01-08 16:21:27 +01:00
}
2019-08-13 07:35:13 +02:00
.content__wrapper {
position: relative;
width: 100%;
height: 100%;
2021-06-11 08:06:29 +02:00
background-color: black;
border-radius: var(--border-radius);
2019-08-13 07:35:13 +02:00
}
.content__wrapper--floating {
height: var(--floating-viewer-height);
width: var(--floating-viewer-width);
2021-01-08 16:21:27 +01:00
.vjs-button--theater-mode {
display: none;
}
.video-js--tap-to-unmute {
max-width: calc(var(--floating-viewer-width) - (var(--spacing-xs) * 2));
.icon {
width: 24px;
height: 24px;
min-width: 24px;
}
}
.content__info {
.claim-preview__title {
.button {
width: 100%;
.button__label {
display: inline-block;
}
&:hover {
color: var(--color-primary);
}
}
}
}
2019-08-13 07:35:13 +02:00
}
.content__actions {
visibility: hidden;
display: flex;
.button {
@extend .button--close;
height: 1.5rem;
top: 0;
2019-08-13 07:35:13 +02:00
position: relative;
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-s);
svg {
color: var(--color-white);
}
2019-08-13 07:35:13 +02:00
}
}
2020-07-22 22:56:58 +02:00
.content__floating-close {
visibility: hidden;
position: absolute;
top: 8px;
right: 8px;
width: 42px;
height: 42px;
padding: 10px;
.icon {
width: 24px;
height: 24px;
}
2020-07-22 22:56:58 +02:00
}
.content__floating-link {
color: var(--color-text);
}
2020-07-22 22:56:58 +02:00
.content__floating-close {
2020-04-14 01:48:11 +02:00
z-index: 3; /*must be one higher than .file-viewer__overlay */
}
2019-08-13 07:35:13 +02:00
.content__info {
cursor: grab;
padding: var(--spacing-s);
2019-08-13 07:35:13 +02:00
display: flex;
flex-direction: column;
align-items: flex-start;
white-space: nowrap;
background-color: var(--color-header-background-transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
2019-08-13 07:35:13 +02:00
}
2018-10-17 19:14:24 +02:00
2019-08-13 07:35:13 +02:00
.content__cover {
@include thumbnail;
position: relative;
2018-10-17 19:14:24 +02:00
display: flex;
align-items: center;
border-radius: var(--border-radius);
2018-10-17 19:14:24 +02:00
justify-content: center;
background-position: 50% 50%;
background-repeat: no-repeat;
2019-01-24 19:09:27 +01:00
background-size: 100%;
2019-11-14 18:23:42 +01:00
max-height: var(--inline-player-max-height);
margin: auto;
2018-10-17 19:14:24 +02:00
&:not(.card__media--nsfw) {
background-color: #000; // solid black to blend nicely when the video starts (if it doesn't take the full width)
2018-10-17 19:14:24 +02:00
}
&:hover {
cursor: pointer;
}
2019-05-26 08:18:47 +02:00
&:-webkit-full-screen {
width: 100%;
height: 100%;
}
@media (max-width: $breakpoint-small) {
border-radius: 0;
}
2018-03-26 23:32:43 +02:00
}
2021-03-11 18:08:11 +01:00
.content__cover--text {
margin: 10rem 0;
}
2021-01-08 16:21:27 +01:00
.content__cover--theater-mode {
@extend .content__cover;
border-radius: 0;
}
.content__cover--none {
2019-09-02 15:24:00 +02:00
@include thumbnail;
cursor: default;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
&:-webkit-full-screen {
width: 100%;
height: 100%;
}
}
.content__cover--disabled {
pointer-events: none;
.nag {
/* boo fire Jeremy */
pointer-events: auto;
}
&:after {
content: '';
background: rgba(255, 255, 255, 0.5);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
2020-01-06 19:32:35 +01:00
}
2018-10-17 19:14:24 +02:00
.content__loading {
2019-08-14 05:56:11 +02:00
height: 100%;
2018-03-26 23:32:43 +02:00
display: flex;
2019-08-02 08:28:14 +02:00
align-items: center;
2018-03-26 23:32:43 +02:00
flex-direction: column;
justify-content: center;
2020-06-01 19:03:19 +02:00
padding: 0 var(--spacing-l);
background-color: #000;
&.content__loading--document {
2021-03-11 18:08:11 +01:00
background-color: var(--color-background);
padding: calc(var(--spacing-xl) * 5) 0;
.content__loading-text {
color: var(--color-text);
}
}
2018-03-26 23:32:43 +02:00
}
.content__loading-text {
2019-12-11 15:24:21 +01:00
color: var(--color-white);
2018-03-26 23:32:43 +02:00
}
2021-04-08 17:39:33 +02:00
.content__non-clickable {
pointer-events: none;
}