styles/sass/archive-preview.scss
// archive-preview.scss
// Styling for the superdesk media archive and ingest
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
// SIDE PREVIEW
//package preview
.composite-preview {
.toggle-box {
margin-block-end: 20px;
header {
&:before {
inset-inline-start: 45px;
}
.box-icon {
display: none;
}
h6 {
background: $white;
padding-inline-start: 0;
}
.chevron {
background-color: $white;
}
}
}
.picture, .graphic {
figure {
width: 100%;
img {
max-width: 100%;
height: auto;
}
}
.item-headline {
max-height: 74px;
overflow: hidden;
}
}
.video {
.holder{
line-height: 80px;
text-align: center;
i {
vertical-align: middle;
@include opacity(50);
}
}
.item-headline {
max-height: 74px;
overflow: hidden;
}
}
.audio {
.holder {
background: #fff;
width: 100%;
height: auto;
}
}
}
@mixin caption-text-style {
font-size: 1.4rem;
font-weight: 300;
opacity: 0.75;
}
.wrap {
white-space: pre-wrap;
}
.article-list-fields {
> * {
margin-inline-start: 0!important;
margin-inline-end: 0!important;
}
> * + * {
margin-inline-start: 10px!important;
}
}
.content-item-preview {
.item-locked {
border-radius: 9999px;
height: 3.2rem;
margin: $sd-base-increment 0 $sd-base-increment * 3 0;
.lock-sign {
width: 3.2rem;
height: 3.2rem;
min-width: 3.2rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
margin-inline-end: 1.2rem;
background-color: hsla(358, 80%, 50%, 0.16);
text-align: center;
flex-shrink: 0;
flex-grow: 0;
.icon-lock {
color: hsla(358, 80%, 50%, 1);
}
}
.locked-content {
display: flex;
align-items: center;
}
em {
font-style: normal;
vertical-align: top;
}
time {
font-size: 12px;
color: var(--color-text-light);
display: inline-block;
}
.text {
@include text-semibold();
flex-grow: 1;
margin-block-start: 2px;
padding-inline-end: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: hsla(358, 80%, 50%, 1);
display: flex;
align-items: center;
gap: 8px;
}
.btn {
display: none;
border-radius: 0 999px 999px 0;
padding-inline-start: 2.4rem;
padding-inline-end: 2.4rem;
font-weight: 500;
}
&:hover {
background: $sd-background;
.btn {
visibility: visible;
display: inline-flex;
}
}
}
.content {
.content-container {
position: absolute;
inset-block-start:0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0;
padding: 0 20px 0;
overflow: auto;
.core-content {
margin-block-end: 80px;
}
}
.date {
@include clearfix();
p {
float: inline-start;
@include text-light();
font-size: 13px;
color: #a1a1a1;
padding-inline-end: 10px;
margin-inline-end: 10px;
margin-block-end: 0;
line-height: 28px;
&:first-child {
border-inline-end: 1px solid #e2e2e2;
}
}
+ li {
margin-block-start: 10px;
}
}
.nav-space {
height: $nav-height;
}
.rewrite {
margin-block-start: 15px;
}
.title {
font-size: 19px;
line-height: 120%;
@include text-semibold();
margin-block-start: 15px;
margin-block-end: 20px;
color: $sd-text;
&.condensed {
padding-inline-end: 15px;
}
}
.composite-nav {
min-height: 24px;
font-size: 16px;
display: flex;
margin-block-start: 20px;
@include text-light();
i {
@include opacity(50);
vertical-align: middle;
margin: 0 15px 0 0;
min-width: 24px;
max-width: 24px;
}
.title {
flex-grow: 1;
margin-block-start: 0;
//margin-block-end: 20px;
}
span {
line-height: 24px;
}
}
.preview-header + .composite-nav {
margin-block-start: 30px;
}
.state-label {
float: none;
//margin-block-start: 20px;
}
.core-content {
font-size: 14px;
.expires {
display: inline-block;
margin-block-end: 5px;
}
.description {
font-style: italic;
color: $sd-text-light;
margin-block-start: 15px;
}
.picture-preview, .graphic-preview {
margin-block-start: 15px;
max-width: 100%;
img {
max-width: 100%;
height: auto;
}
&.loading {
width: 100%;
height: 200px;
background: $sd-background url(~images/loading-large.gif) center center no-repeat;
}
}
figure {
margin: 10px 0 8px 0;
}
figcaption {
margin: 6px 0 10px 0;
@include caption-text-style;
}
video, audio {
width: 100%;
max-width: 100%;
}
.abstract {
margin-block-end: 14px;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
p {
font-weight: 400;
}
}
.byline {
font-size: 14px;
line-height: 120%;
font-weight: 300;
margin-block-end: 12px;
}
.dateline {
font-size: 12px;
font-weight: 500;
margin-block-end: 16px;
}
.text.sign-off {
word-break: break-all;
}
p {
font-size: 15px;
line-height: 1.5;
font-weight: 300;
word-wrap: break-word;
&.description-text {
display: inline-block;
@include caption-text-style;
}
}
.body-text {
line-height: 1.5;
h1, h2, h3, h4, h5, h6 {
font-size: 16px;
line-height: 1.4;
margin-block-end: 10px;
}
}
.body-footer {
font-size: 13px;
color: $sd-text-light;
line-height: 1.5;
margin-block-start: 30px;
}
table {
width: 100%;
border-collapse: collapse;
resize: both;
table-layout: auto;
border: 1px solid var(--sd-colour-line--light);
margin: 16px 0;
td, th {
border: 1px solid var(--sd-colour-line--light);
padding: 5px 8px;
font-size: 14px;
font-weight: 300;
}
th {
font-weight: 500;
text-align: start;
background-color:rgba(195, 195, 195, 0.2);
font-weight: 400;
p {
font-weight: 400;
margin-block-end: 0;
}
}
}
blockquote {
font-size: 14px;
line-height: 140%;
margin: 16px 0;
border-inline-start: 3px solid rgba(160, 160, 160, 0.5);
padding: 4px 0 4px 14px;
font-style: italic;
}
.multi-line-quote {
font-size: 14px;
line-height: 140%;
margin: 16px 0;
border-inline-start: 3px solid red;
padding: 4px 0 4px 14px;
font-style: italic;
}
.embed-block {
iframe {
width: 100%;
}
}
.embed-block__description {
@include caption-text-style;
}
.title {
font-size: 19px;
line-height: 120%;
@include text-semibold();
margin-block-start: 15px;
margin-block-end: 20px;
color: $sd-text;
&.condensed {
padding-inline-end: 15px;
}
}
}
}
.metadata-view,
.article-versions {
position: absolute;
inset-block-start:0;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
padding: 2.4rem 2.4rem $bottom-view-padding;
overflow: auto;
}
.related-item-view, .mediaUsed {
position: absolute;
inset-block-start:0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0;
padding: 2.4rem 2.4rem $bottom-view-padding;
overflow: auto;
.related-item, .mediaUsed--Item {
cursor: pointer;
}
}
}
.content-item-preview {
.core-content {
display: flex;
flex-direction: column;
.media-block, .embed-block {
margin: 2rem 0;
}
.embed-block {
width: 100%;
max-width: 100%;
> * {
width: 100%;
}
}
.media-block__description {
display: block;
padding: 0.5rem 0;
font-size: 1.3rem;
font-weight: 300;
opacity: 0.75;
border-block-end: 1px dotted var(--sd-colour-line--light);
}
}
}
.metadata-view {
div {
border-block-end: 1px solid var(--sd-colour-line--light);
}
div:last-child {
border: 0px;
}
h4 {
margin-block-start: 10px;
}
dl {
@include clearfix();
margin-block-end: 10px;
> dt {
clear: both;
float: inline-start;
width: 140px;
font-size: 11px;
text-transform: uppercase;
color: $sd-text-lighter;
line-height: 20px;
font-weight: 500;
}
> dd {
padding-inline-start: 140px;
min-height: 18px;
margin: 0;
word-break: break-word;
div {
border: 0px;
}
}
}
}
.related-item-view, .mediaUsed {
.related-item, .mediaUsed--Item {
margin-top : 16px;
border-block-end: 1px solid var(var(--sd-colour-line--light));
padding-block-end: 16px;
.item {
margin: 5px 5px 0px 0px;
}
.container {
@include text-semibold();
color: $sd-text;
margin-inline-end: 16px;
}
.keyword {
@include text-semibold();
color: $sd-keyword;
font-size: 12px;
margin-inline-end: 16px;
}
.type-icon {
opacity: 0.5;
height: 16px;
width: 16px;
padding-inline-start: 0;
margin-inline-end: 12px;
}
.headline {
color: $sd-text;
}
}
li:first-child .related-item, .mediaUsed--Item {
margin-block-start: 6px;
}
}
/* ====================================== */
// Context menu for sidepreview (fetch as)
.preview-backdrop {
position: absolute;
width: $sidepreview-width;
inset-block-start: $nav-height+1;
inset-inline-end: 0; inset-block-end: 0;
background: #fff;
@include opacity(0);
@include transition(all ease 0.2s);
&.show {
@include opacity(80);
}
}
.context-menu {
position: absolute;
inset-inline-end: $sidepreview-width;
width: 250px;
inset-block-start: $nav-height+1;
inset-block-end: 0;
background: #fff;
border-inline-end: 1px solid #dbdbdb;
@include box-shadow(2px 0 3px 0 #e8e8e8);
@include transition(all ease 0.3s);
&.show {
inset-inline-end: $sidepreview-width - 250;
}
.title {
font-size: 17px;
@include text-light();
color: $sd-text;
padding: 10px 15px;
}
.context-list {
padding: 10px 15px 20px;
li {
border : 1px solid #fff;
border-block-end: 1px solid #e5e5e5;
background: #e9f4f8;
padding: 6px 13px;
height: 21px;
line-height: 21px;
margin-block-end:7px;
font-size: 14px;
color: var(--color-text);
@include border-radius(2px);
i {
font-style: normal;
color: var(--color-text-light);
@include text-light();
}
&:hover, &.selected {
background: var(--sd-colour-interactive--alpha-20);
border-color: var(--sd-colour-interactive--alpha-50);
cursor: pointer;
}
}
}
}
/* ====================================== */
// LIGHTBOX PREVIEW
$lightbox-bg : #000;
$lightbox-sidepane : 380px ;
$lightbox-composite-width : 340px;
$lightbox-composite-condensed : 100px;
.lightbox-preview {
&.modal {
//reset modal styles
position: fixed;
@include border-radius(0px);
inset-block-start:0 !important;
inset-block-end: 0 !important;
inset-inline-start: 0 !important;
inset-inline-end: 0 !important;
background: $lightbox-bg !important;
margin: 0 !important;
width: auto !important;
overflow: hidden;
}
.lightbox-right {
width: $lightbox-sidepane;
position: absolute;
@include box-sizing(border-box);
inset-inline-end: 0;
inset-block-start: 0;
inset-block-end:0;
background: $background-main;
padding: 15px;
//info boxes
.lightbox-title {
font-size: 18px;
font-weight: normal;
max-width: 100%;
padding-inline-end: 40px;
height: 24px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.lightbox-close {
background: none;
padding: 0;
border: 0;
width: 16px;
height: 16px;
display: block;
position: absolute;
inset-inline-end: 12px;
inset-block-start: 14px;
@include opacity(70);
&:hover {
@include opacity(100);
}
}
.lightbox-modified-info {
color: #a9a9a9;
font-size: 12px;
display: block;
}
.lightbox-media-type {
@include opacity(40);
float: none;
margin-inline-start: -2px;
}
.urgency-label {
margin-block-start: 3px;
margin-inline-end: 5px;
}
.status-label {
margin-block-start: 4px;
}
.lightbox-actions {
margin-block-start: 10px;
i {
margin-inline-end: 5px;
&.icon-archive {
margin-block-start: 0;
}
}
}
.lightbox-media-data {
position: absolute;
inset-block-start:130px;
inset-inline-start:15px;
inset-inline-end: 5px;
inset-block-end: 15px;
overflow: auto;
padding-inline-end: 10px;
}
.lightbox-descritpion {
width: 100%;
margin-block-start: 10px;
color: #484848;
}
.toggle-box {
margin: 20px 0;
}
}
.lightbox-left {
background: #101010;
position: absolute;
@include box-sizing(border-box);
inset-inline-end: $lightbox-sidepane;
inset-block-start: 0;
inset-block-end:0;
inset-inline-start:0;
.full-preview {
position: absolute;
inset-inline-end: 0; inset-block-start: 0; inset-block-end:0; inset-inline-start:0;
text-align: center;
> .rendition {
position: absolute;
inset-inline-end: 0; inset-block-start: 0; inset-block-end:0; inset-inline-start:0;
> figure {
position: absolute;
inset-inline-end: 0; inset-block-start: 0; inset-block-end:0; inset-inline-start:0;
display: flex;
justify-content: space-around;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
height: auto !important;
}
}
&.composite {
padding: 20px 20px 40px;
overflow: auto;
&::-webkit-scrollbar {
width:16px;
border-inline-start:1px solid #282828;
background: #000;
border-inline-end:1px solid #282828;
}
&::-webkit-scrollbar-thumb {
border-inline-end: 1px solid #282828;
border-inline-start: 1px solid #282828;
background: #383838;
box-shadow: inset 0 0 0 2px #000;
}
.item {
position: relative;
float: inline-start;
width: 220px;
height: 150px;
@include border-radius(3px);
overflow: hidden;
margin: 15px;
background: #3d3d3d;
@include box-shadow(0 2px 0 0 #000);
.icons-holder {
i {
margin: -12px 0 0 -12px;
@include opacity(20);
}
}
.item-headline {
padding: 15px;
text-align: start;
font-size: 14px;
}
&.picture, &.graphic {
.item-headline {
display: none;
}
img {
height: 150px;
width: auto;
}
}
&.text {
background: $white;
.icons-holder {
@include opacity(50);
}
}
&.composite, &.audio {
.item-headline {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
color: #9a9a9a;
text-align: center;
}
}
.open-item {
display: none;
position: absolute;
inset-inline-end: 5px;
inset-block-start: 5px;
}
&:hover {
.open-item {
display: block;
}
}
}
}
}
.condensed-preview {
position: absolute;
inset-inline-end: 0; inset-block-start: 0; inset-block-end:0; inset-inline-start:0;
img {
max-width: 100%;
}
}
&.composite {
.condensed-preview, .navigation.left {
left : $lightbox-composite-condensed;
}
&.open {
.condensed-preview, .navigation.left {
left : $lightbox-composite-width;
}
}
}
.navigation {
position: absolute;
inset-block-start: 50%;
height: 80px;
margin-block-start: -120px;
padding: 12px 25px;
border: 0;
background: 0;
&.left {
inset-inline-start: 0;
}
&.right {
inset-inline-end: 0;
inset-inline-start: auto;
}
i {
@include opacity(40);
}
&:hover {
i {
@include opacity(100);
}
}
}
.lightbox-caption {
background: rgba(0,0,0,0.7);
color: #fff;
position: absolute;
inset-block-end: 0;
inset-inline-start:0;
inset-inline-end: 0;
padding: 10px 20px;
text-align: center;
font-size: 14px;
line-height: 20px;
}
.lightbox-paper {
position: absolute;
inset-block-start: 50px; inset-inline-start: 50px; inset-inline-end: 50px; inset-block-end: 50px;
.lightbox-text {
background: var(--sd-item__main-Bg);
max-width: 800px;
margin: 0px auto;
height: 100%;
position: relative;
border-radius: 5px;
.lightbox-title {
position: absolute;
inset-block-start: 20px;
inset-inline-start: 20px;
inset-inline-end: 20px;
height: 55px;
font-size: 18px;
line-height: 24px;
border-block-end: 5px solid var(--sd-colour-line--light);
}
.lightbox-fulltext {
position: absolute;
inset-block-start: 110px;
inset-inline-start: 30px;
inset-inline-end: 30px;
inset-block-end: 20px;
overflow: auto;
small {
color: var(--color-text-light);
}
.lightbox-fullcontent {
margin: 20px 0;
}
p {
font-size: 13px;
line-height: 20px;
margin-block-end: 15px;
}
}
}
}
.lightbox-audio, .lightbox-video {
background: #101010;
margin: 50px;
padding : 50px 0 ;
text-align: center;
}
.full-preview {
&.composite .icons-holder i {
position: absolute;
inset-block-start:50%; inset-inline-start: 50%;
margin: -70px 0 0 -20px;
zoom:2;
}
}
}
.lightbox-composite {
width: $lightbox-composite-condensed;
&.open {
width: $lightbox-composite-width;
}
@include box-sizing(border-box);
background: #000;
position: absolute;
inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0;
z-index: 2;
.toggle-composite {
width: 40px;
height: 43px;
position: absolute;
inset-inline-end: -40px;
inset-block-start: 0;
background: rgba(0,0,0,0.8);
line-height: 43px;
text-align: center;
@include opacity(90);
i {
vertical-align: middle;
@include opacity(60);
@include rotate(-90deg);
@include transition(all 0.2s ease);
}
&:hover {
cursor: pointer;
}
}
&.open .toggle-composite {
i {
@include rotate(90deg);
}
}
.header {
background: #1e353f;
h5 {
display: none;
}
span {
display: block;
height: 43px;
text-align: center;
i {
margin-block-start: 8px;
@include opacity(50);
}
}
}
&.open .header {
height: 43px;
background: #223d49;
h5 {
color: #fff;
font-size: 15px;
line-height: 43px;
height: 43px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 20px 0 10px;
display: block;
cursor: pointer;
}
span {
float: inline-start;
width: 50px;
display: inline-block;
background: #62b0d0;
i {
@include opacity(100);
}
&:hover {
cursor: pointer;
}
}
}
> .content {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 43px;
inset-block-end: 0;
overflow: auto;
&::-webkit-scrollbar {
width:16px;
border-inline-start:1px solid #282828;
background: #000;
border-inline-end:1px solid #282828;
}
&::-webkit-scrollbar-thumb {
border-inline-end: 1px solid #282828;
border-inline-start: 1px solid #282828;
background: #383838;
box-shadow: inset 0 0 0 2px #000;
}
}
ul {
list-style-type: none;
margin:0; padding: 0;
margin-block-start: 10px;
.item {
border-block-end: 1px solid #272727;
height: 40px;
padding: 20px;
position: relative;
&:hover {
cursor: pointer;
background: rgba(98,176,208,0.2);
}
&.selected {
padding-inline-start: 17px;
border-inline-start: 3px solid #62b0d0;
background: rgba(98,176,208,0.4);
}
.holder, .icons-holder {
float: inline-start;
width: 60px;
height: 40px;
margin-inline-end: 20px;
background: #3d3d3d;
@include border-radius(2px);
border:1px solid #3d3d3d;
overflow:hidden;
text-align: center;
@include box-sizing(border-box);
i {
margin-block-start: 7px;
}
}
.item-headline {
height: 40px;
overflow: hidden;
color: #dedede;
text-transform: none;
font-size: 14px;
@include text-normal();
line-height: 21px;
}
.open-item {
position: absolute;
inset-inline-end: 0px;
inset-block-start: 0px;
display: none;
background: #888;
padding: 2px 2px 2px 4px;
}
&:hover {
.open-item {
display: block;
}
}
&.composite {
padding-inline-end: 35px;
.package-details {
position: absolute;
inset-block-start: 50%; inset-inline-end: 5px;
margin-block-start: -7px;
}
}
}
.toggle-box > header {
margin-inline-start: 5px;
background: #223d49;
margin-block-end: 0;
&:before {
display: none;
}
h6 {
background: #223d49;
color: #fff;
}
}
}
&.open ul {
.toggle-box > header {
background: #000;
border:0;
&:before {
display: block;
border-bottom-color: #223d49;
}
h6 {
background: #000;
color: #fff;
padding-inline-end: 10px;
}
}
.item {
&.composite {
.package-details {
display: block;
}
}
}
}
}
.lightbox-mosaic {
padding: 200px;
li {
width: 220px;
height: 150px;
float: inline-start;
margin: 0 30px 30px 0;
@include border-radius(3px);
overflow: hidden;
background: hsl(214, 13%, 20%);
}
}
.preview-overlay {
display: none;
}
}
// Preview Header
// ---------------------
:root {
--previewHeaderBG: var(--sd-colour-panel-bg--000);
}
[data-theme="dark-ui"] {
--previewHeaderBG: var(--sd-colour-panel-bg--000);
}
.preview-header {
position: relative;
margin: 1px -20px 20px;
padding: 5px 20px 12px 20px;
border-block-start: 0;
border-block-end: 0;
z-index: 2;
box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.2);
border-block-end: 1px solid var(--sd-shadow-outline--2);
@include transition(max-height .3s ease-in);
&.active {
@include transition(max-height .3s ease-in);
.preview-header__flex-container {
display:flex;
padding: 8px 0;
height: auto;
opacity: 1;
}
.preview-header__timestamp {
padding-block-end: 8px;
}
}
.preview-header__toggle {
--toggleBG: var(--previewHeaderBG);
--toggleWidth: 31px;
--toggleHeight: 20px;
--toggleHeigh--Hover: 24px;
--toggleBorderColor: var(--sd-shadow-outline--2);
@include header-toggle;
}
.preview-header__timestamp {
padding: 8px 16px 2px 0;
display: flex;
white-space: nowrap;
overflow: hidden;
label, time {
display: inline-block;
vertical-align: top;
font-size: 11px;
color: $sd-text-light;
padding-inline-end: .4em;
margin: 0;
font-weight: 300;
}
b {
color: $sd-text;
font-size: 11px;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.preview-header__border-block {
margin-inline-start: 8px;
padding-inline-start: 8px;
border-inline-start: 1px solid var(--sd-colour-line--medium);
}
.preview-header__flex-container {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
@include transition(opacity 0.3s 0.4s);
}
.preview-header__icon-block {
width:25px;
padding-inline-end: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
[class*=filetype-icon-],
[class^=filetype-icon-] {
color: $sd-text-light;
}
}
.preview-header__main-block,
.preview-header__side-block {
box-sizing: border-box;
padding-inline-start: 12px;
border-inline-start: 1px solid var(--sd-colour-line--medium);
//display: flex;
//flex-direction: column;
text-align: end;
}
.preview-header__main-block {
flex-grow: 1;
padding-inline-end: 12px;
text-align: start;
overflow: hidden;
}
.preview-header__flex-row {
min-height: 18px;
margin-block-end: 4px;
overflow: hidden;
}
.keyword {
font-size: 12px;
font-weight: 500;
display: inline-block;
line-height: 116.6%;
color: $sd-keyword;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
.word-count {
font-size: 10px;
line-height: 16px;
min-width: 0;
margin: 0;
color: $sd-text-light;
@include text-overflow();
b {
font-size: 12px;
line-height: 12px;
color: $sd-text-light;
padding-inline-end: .2em;
}
}
.data {
font-size: 12px;
color: $sd-text-light;
}
.inline-label {
display: inline;
//.text-overflow();
text-transform: uppercase;
font-size: 11px;
margin: 0 6px 0 0;
color: $sd-text-light;
line-height: 116.6%;
}
.takekey, company-codes {
display: inline;
//.text-overflow();
font-size: 12px;
color: $sd-text;
line-height: 116.6%;
}
.ednote {
display: inline;
font-size: 12px;
color: #d25932;
line-height: 116.6%;
}
.stage {
font-size: 10px;
font-weight: 300;
letter-spacing: 0.035em;
line-height: 29px;
color: $sd-text-light;
border: 0;
background-color: transparent;
text-transform: uppercase;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
b {
color: $sd-text;
font-weight: 600;
}
}
.tag-label {
max-width: 100%;
font-size: 11px;
white-space: nowrap;
@include text-overflow();
}
.tag-main{
display: inline;
}
}
.preview-header .preview-header__flex-row div span:first-child br{
display: none;
}
// Preview image overlay
// ---------------------\
figure.preview-overlay-on {
position: relative;
display: inline-block;
&:hover {
.preview-overlay {
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
}
}
}
.preview-overlay {
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-end: 0;
inset-inline-start: 0;
background-color: rgba(0,0,0,0.7);
margin-block-start: 0;
opacity: 0;
transition: opacity 0.2s;
i {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
margin-block-start: -16px;
margin-inline-start: -16px;
color: rgba(255,255,255,0.9);
width: 32px;
height: 32px;
font-size: 32px;
line-height: 32px;
}
}
.featuremedia-confirmation {
.picture-preview {
> div {
margin-block-start: auto;
margin-block-end: auto;
text-align: center;
background-color: rgba(0,0,0,0.7);
}
img {
max-width: 440px;
max-height: 440px;
object-fit: contain;
}
.description-text {
font-size: 14px;
font-weight: 400;
font-style: italic;
display: inline-block;
word-wrap: break-word;
margin-block-start: 0.7rem;
}
}
}
.content-item-preview, .preview-content {
.preview-label {
display: inline-block;
font-size: 1.1rem;
margin: 0 0.5rem 0 0;
line-height: 2.6rem;
color: var(--color-label-text);
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.08em;
}
}
.preview-tab--enable-scrolling {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
padding: 1px; // take border of the parent into account
}