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

129 lines
2.4 KiB
SCSS
Raw Normal View History

2019-08-13 07:35:13 +02:00
.content__viewer {
@extend .card;
position: absolute;
top: var(--spacing-large);
}
2019-11-14 18:23:42 +01:00
.content__viewer--inline {
max-height: var(--inline-player-max-height);
}
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;
left: calc(var(--spacing-large) + var(--spacing-small));
z-index: 9999;
&:hover {
.content__actions {
visibility: visible;
}
}
}
.content__wrapper {
position: relative;
width: 100%;
height: 100%;
}
.content__wrapper--floating {
height: var(--floating-viewer-height);
width: var(--floating-viewer-width);
}
.content__actions {
visibility: hidden;
position: absolute;
right: var(--spacing-small);
top: var(--spacing-small);
z-index: 1;
display: flex;
.button {
position: relative;
margin-left: var(--spacing-small);
}
}
.content__info {
cursor: grab;
height: var(--floating-viewer-info-height);
padding: var(--spacing-medium);
display: flex;
flex-direction: column;
align-items: flex-start;
white-space: nowrap;
}
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;
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-02-13 17:27:20 +01:00
.button--view,
.button--play {
2019-06-17 22:32:38 +02:00
background-color: $lbry-teal-2;
}
2018-10-17 19:14:24 +02:00
}
2019-05-26 08:18:47 +02:00
&:-webkit-full-screen {
width: 100%;
height: 100%;
}
2018-03-26 23:32:43 +02:00
}
2019-09-02 15:24:00 +02:00
.content__cover--disabled {
@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;
2019-09-03 21:49:17 +02:00
background-color: $lbry-white;
[data-mode='dark'] & {
background-color: $lbry-black;
color: $lbry-white;
2019-09-02 15:24:00 +02:00
}
&:-webkit-full-screen {
width: 100%;
height: 100%;
}
}
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;
2019-06-11 20:10:58 +02:00
padding: 0 var(--spacing-large);
background-color: #000;
2018-03-26 23:32:43 +02:00
}
.content__loading-text {
color: $lbry-white;
2018-03-26 23:32:43 +02:00
}