styles/sass/media-archive.scss
// media-archive.scss
// Styling for the superdesk media archive and ingest
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
/* ====================================== */
// item(news) urgency colors and labels
$outputItemColor0 : #8a8a8a;
$outputItemColor1 : #005e84;
$outputItemColor2 : #64a4bf;
$outputItemColor3 : #b0cfdd;
.output-item-label {
width: 16px;
height: 16px;
@include border-radius(8px);
display: inline-block;
text-align: center;
color:#fff;
font-size: 10px;
background: $outputItemColor0;
@include box-sizing(border-box);
line-height: 17px;
vertical-align: top;
font-style: normal;
&.label-0 {
background: $outputItemColor0;
}
&.label-1 {
background: $outputItemColor1;
}
&.label-2 {
background: $outputItemColor2;
}
&.label-3, &.label-4, &.label-5 {
background: $outputItemColor3;
}
}
/* ====================================== */
// item(news) status labels (exmpl. canceled)
.status-label {
@include box-sizing(border-box);
height: 15px;
padding: 4px 7px;
background: #1f6681;
@include border-radius(2px);
display: inline-block;
font-size: 10px;
color: #fff;
line-height: 7px;
margin: 0 5px 0 0;
text-transform: uppercase;
&.label-canceled {
background:#1c1c1c;
color: #ff5353;
}
}
.archive-content {
position:absolute;
inset-block-start:0px; inset-inline-end:0px; inset-block-end:0px; inset-inline-start:0px;
height: calc(100% - 30px);
background-color:$sd-background;
@include transition(left 0.2s ease);
z-index: 11;
&.wide {
inset-inline-start:10px;
}
.content-inner {
position: absolute;
inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0;
inset-block-start:$nav-height+1;
.newest-items {
margin-block-end: 35px;
> span {
height: 30px;
font-size: 11px;
color: #8a8a8a;
line-height: 30px;
font-weight: 300;
text-transform: uppercase;
}
ul {
@include clearfix();
}
}
}
.statistics {
position: absolute;
inset-inline-end: 0; inset-inline-start: 0; inset-block-end: 0;
inset-block-start:0;
padding: 30px;
overflow: auto;
overflow-x: hidden;
}
.preview-layout {
.list-pane {
.list-view {
@include clearfix();
.panel {
float: inline-start;
&.alert {
float: none;
}
.panel-body {
display: inline-block;
.ui-draggable {
display: inline-block;
}
}
}
}
}
}
.content .shadow-list-holder {
position: relative;
max-height: none;
min-height: auto;
}
}
.view-select {
button {
height: 48px;
width: 48px;
background: none;
border: 0;
padding: 15px 16px;
border-inline-start: 1px solid var(--sd-colour-line--medium) !important;
opacity: 0.6;
i {
color: $sd-text-light;
}
&:hover {
opacity: 0.8;
}
}
}
.loading-indicator {
position: absolute;
inset-block-start: 0;
inset-inline-start: 50%;
margin-inline-start: -5rem;
min-width: 10rem;
padding: 0.8rem 1.6rem;
border-radius: 0 0 4px 4px;
border: 1px solid lighten($sd-blue-text, 10%);
border-width: 0 1px 1px;
text-align: center;
font-size: 1.3rem;
font-weight: 400;
letter-spacing: 0.06em;
color: $sd-blue-text;
background: $sd-hover;
z-index: 3;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
/* ====================================== */
// media-box styling
$sfbox_mediaHeight : 120px;
$sfbox_sidepadding : 5px;
$sfbox_minHeight : 225px;
$sfbox_minWidth : 176px;
$sfbox_mediaMaxWidth : 172px;
@mixin media-box-generic {
height: auto;
width: auto;
min-height: $sfbox_minHeight;
min-width: $sfbox_minWidth;
border: 1px solid rgba(0,0,0,0.3);
border-width: 0px 0px 3px 0px;
margin: 1px 12px 10px 1px;
border-radius: var(--b-radius--medium);
padding: $sfbox_sidepadding;
position:relative;
float: inline-start;
display: block;
cursor: pointer;
background-color: var(--sd-item__main-Bg);
color: var(--color-text);
box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.2);
&.archived {
box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.2), 0 0 0 1px hsla(0, 0%, 0%, 0.03);
background-color: var(--sd-item__main-Bg--alternate);
&::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-end: 20%;
width: 10rem;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==);
background-repeat: no-repeat;
background-size: 6rem;
background-position: center center;
opacity: 0.16;
}
}
&.error {
border-color: #d19796;
border-bottom-color: #c00000;
}
.error-box {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start:0;
inset-block-end: 0;
background: rgba(255,255,255,0.9);
z-index: 1;
.message {
color: #970000;
@include text-normal();
font-size: 12px;
padding: 40px 10px 0;
text-transform: uppercase;
text-align: center;
line-height: 20px;
b {
display: block;
font-size: 16px;
}
}
.buttons {
position: absolute;
inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0;
height: 30px;
background: #f7eaea;
border-block-start: 1px solid #e1bbbb;
}
}
.media {
@include box-sizing(border-box);
height:$sfbox_mediaHeight; //+2 media border
margin:0 2px 5px;
display:block;
position:relative;
background: #f8f8f8;
img {
height: auto;
width: auto;
max-width: $sfbox_mediaMaxWidth;
max-height: $sfbox_mediaHeight;
}
.caption {
display: none;
}
.selectbox {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
margin: 0;
padding: 1px 2px 2px 2px;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 0 0 0 2px;
.sd-checkbox {
margin: 0;
}
}
}
&.media-picture, &.media-graphic, &.media-video {
.text {
display: none;
position: absolute;
inset-inline-start: 0;
inset-block-end: 0;
width: $sfbox_minWidth;
height:$sfbox_mediaHeight;
background: rgba(192,192,192,0.9);
}
.media:hover .text {
display: block
}
}
&.media-text,&.media-preformatted,&.media-composite,&.media-picture,&.media-graphic {
.media {
max-width: $sfbox_minWidth - 4;
font-size: 12px;
font-style: italic;
white-space: normal;
overflow: hidden;
}
small {
display: block;
padding: 2px 5px;
font-size: 13px;
}
.container {
@include text-semibold();
color: #444;
margin-inline-start: 6px;
}
}
&.media-audio {
.media {
width: $sfbox_minWidth;
max-width: $sfbox_minWidth;
text-align: center;
i {
margin-block-start: 35px;
@include opacity(35);
}
}
}
.media-info {
position: relative;
padding: 18px 0 0;
& .legal {
inset-block-end: 16px;
}
}
h5 {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 0;
width:auto;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
height:18px;
font-size:11px;
margin: 0 2px;
color: $sd-keyword;
text-transform: uppercase;
&.shifted {
inset-inline-start: 20px;
}
}
dl {
@include clearfix();
font-size: 11px;
height: 1%;
margin:0 2px;
dt {
width:auto;
float: inline-start;
clear: left;
color:#787878;
line-height:16px;
font-weight:normal;
}
dt:after {
content : ":";
}
dd {
width:auto;
color:#b4b4b4;
line-height:16px;
float: inline-start;
margin-inline-start:4px;
&.subject-line {
max-width:90px;
height:15px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
&.dropdown:hover .dropdown__menu {
display: block;
min-width: 100%;
}
}
}
.type-icon {
text-align: center;
i {
color: $grayLight;
}
}
.source {
&:after {
content: "" !important;
}
}
.provider {
color: #787878;
margin-inline-start: 0;
}
.urgency-label {
position: absolute;
inset-block-end: 7px;
inset-inline-start: 36px;
}
.priority-label {
position: absolute;
inset-block-end: 7px;
inset-inline-start: 60px;
}
.broadcast-status {
position: absolute;
inset-block-end: 7px;
inset-inline-start: 82px;
background: #e51c23;
color: #FFFFFF;
@include border-radius(2px);
font-size: 14px;
font-weight: bold;
width: 14px;
text-align: center;
}
.state-label {
position: absolute;
inset-block-end: 8px;
inset-inline-end: 0px;
}
.fetched-desk {
font-size:11px;
margin-block-start: 3px;
}
.not-for-publication {
position: static;
}
}
.mgrid-view {
.media-box {
.action {
display: none;
height:33px;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
}
&:hover .action {
display: block;
}
@include media-box-generic;
&.contacts {
min-height: $sfbox_minHeight + 45; // 270px
min-width: $sfbox_minWidth * 2 + 73; // 425px
.media {
height: 25px;
}
dl {
dt:after {
content : "";
}
dd {
margin-inline-start: 6px;
line-height:18px;
&.dark {
color:#444;
font-weight:500;
}
}
}
.media-info {
padding-inline-start: 0.5rem;
h5 {
padding: 0rem 0.5rem 0;
}
}
.item-info {
.container {
@include text-semibold();
color: var(--color-text-light);
margin-inline-end: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.link {
color: var(--sd-colour-interactive);
@include text-normal();
text-overflow: ellipsis;
}
}
}
.contact-footer {
border-block-start: 1px solid #e8e8e8;
margin-block-start: 25px;
margin-inline-start: -5px;
margin-inline-end: -5px;
&.padded {
margin-block-start: 45px !important;
}
.update-info {
position: absolute;
inset-block-end: 0.6rem;
padding-inline-start: 0.5rem;
}
.social-info {
position: absolute;
inset-block-end: 10px;
inset-inline-end: 0px;
margin-inline-end: 20px;
span {
padding-inline-start: 10px;
}
}
}
.link {
color: $sd-blue-text;
@include text-normal();
font-size: small;
}
.notes {
display: flex;
background: none;
}
.item-notes {
overflow: hidden;
text-overflow: ellipsis;
margin: 0 5px 0 5px;
max-width: 380px;
display: flex;
}
}
&.locked {
border-bottom-color: #e51c23 !important;
}
&.gone {
opacity: 0.5;
}
&.actioning {
@include actioning();
}
.highlights-title {
position: absolute;
inset-block-start: -2px;
inset-inline-start: 0;
display: block;
}
/* control buttons on the bottom */
.item-functions {
background: #fff;
position: absolute;
height: 32px;
border-block-start: 1px solid rgba(0,0,0,0.1);
font-size: 0;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
.item-field {
width: 31px;
height: 32px;
border-inline-start: 0;
border-inline-end: 1px solid #f0f0f0;
@include box-sizing(border-box);
padding: 0;
a {
display: inline-block;
width: 100%;
height: 32px;
line-height: 32px;
vertical-align: middle;
text-align: center;
.actioning {
background-image: url("~images/loading-small.gif");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 100%;
height: 32px;
line-height: 32px;
vertical-align: middle;
text-align: center;
}
i {
vertical-align: middle;
}
}
.more-activity-dropdown {
li {
border-inline-end: 0;
}
}
}
}
.more-activity-toggle {
background: none;
}
.media-box__footer {
margin: 6px 0;
position: relative;
display: flex;
align-content: center;
.type-icon {
height:16px;
margin-inline-end: 6px;
flex-grow: 0;
}
.badge {
margin-inline-end: 6px;
}
.item-right {
inset-block-start: -2px;
height: 22px;
width: 32px;
}
}
}
}
.fetched-desk-tooltip {
border:0;
background: transparent;
}
.mgrid-view {
padding-block-end: 80px;
.draggable-item {
float: inline-start;
}
.list-item-view {
float: inline-start;
}
}
#last-item {
background: transparent;
border: none;
height: 1px;
width: 1px;
margin: 0;
}
.sd-grid-list {
.sd-grid-item {
height: 100%;
}
.item-right {
inset-block-start: auto;
height: 1.8rem;
width: 2.4rem;
margin-inline-end: 1rem;
position: relative;
margin-inline-start: -1rem;
.more-activity-toggle {
background: none;
}
}
.sd-grid-item__type-icn > i {
vertical-align: middle;
}
}
.sd-grid-item__footer i {
vertical-align: middle;
opacity: 0.4;
}
/* ====================================== */
// media box list view
$rightfield-width:60px;
.media-box .keyword,
.field--slugline {
@include text-semibold();
color: $sd-keyword;
text-transform: uppercase;
font-size: 12px;
margin-inline-end: 10px;
white-space: nowrap;
}
.mlist-view, .compact-view.list-view { // Temporary added .list-view
box-shadow: $block-shadow-depth-2;
&--no-shadow {
box-shadow: none;
}
.list-item-view {
width: 100%;
//.box-shadow(0 1px 4px 0 rgba(0,0,0,20%));
&:last-child {
.media-box {
border-block-end: none;
}
}
.panel-body {
display: block !important;
width: 100%;
}
}
.actions-visible .media-box:hover,
.actions-visible .media-box.active {
.item-info {
padding: 10px 30px 10px 10px;
}
}
.media-box {
position: relative;
background: var(--sd-item__main-Bg);
border-block-end: 1px solid var(--sd-colour-line--light);
border-inline-end: 2px solid var(--sd-item__main-Bg);
padding-inline-start: 40px;
overflow: hidden;
&--no-padding {
padding: 0;
}
&:hover {
background-color: var(--sd-item__main-Bg--hover) !important;
border-inline-end: 2px solid var(--sd-item__main-Bg--hover) !important;
cursor: pointer;
.list-field {
border-color: var(--sd-item__main-Bg--hover) !important;
}
.item-info-reduced-rowheight {
padding: 5px 10px 5px 10px;
}
.more-activity-toggle {
background: var(--sd-item__main-Bg--hover) !important;
}
}
&.media-box-hover{
&:hover {
background-color: transparent !important;
border-inline-end: none !important;
cursor: auto;
}
}
&.gone {
opacity: 0.5;
}
&.actioning {
@include actioning();
}
.list-field {
border-inline-end: 1px solid var(--sd-colour-line--x-light);
float: inline-start;
padding: 10px;
&.no-border {
border:0;
}
}
.type-icon {
position: absolute;
inset-block-start: 0;
inset-inline-start: 4px;
inset-block-end: 0;
padding: 0;
width: 37px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
i {
color: $sd-text-light;
width: 24px;
margin: 0;
padding: 0;
}
.sd-checkbox {
margin: 1px 0 0 1px;
padding: 0;
}
}
.urgency {
position: absolute;
inset-block-start: 0;
inset-inline-start: 42px;
inset-block-end: 0;
padding: 0;
width: 37px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
column-count: 1;
.output-item-label, .urgency-label {
margin: 3px 0;
}
.badge:nth-child(1) {
margin-block-end: 0.2rem;
}
.badge:nth-child(2) {
margin-block-start: 0.2rem;
}
.badge:only-child {
margin: 0;
}
i, .priority-label {
clear: both;
margin: 3px 0;
}
}
.urgency-reduced-rowheight {
flex-direction: row;
.urgency-label {
margin: 3px 2px 3px 0;
}
i, .priority-label {
clear: both;
margin: 3px 0 3px 1px;
}
}
.version-creator {
color: #686b6c;
padding: 0px 0px 0px 2px;
}
.word-count {
font-weight: 600;
font-size: 12px;
margin-inline-end: 8px;
&:empty {
margin-inline-end: 0px;
}
}
&.contacts {
padding-inline-start: 20px;
.org-label {
@extend .state-label;
background-color: $state-color-default;
color: $white !important;
}
.item-notes {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 5px 0 5px;
}
.item-info {
.social-info {
position: absolute;
inset-inline-end: 0px;
}
&.item-info-reduced-rowheight {
.social-info {
position: unset;
}
}
}
i {
color: $sd-text-light;
width: 24px;
margin: 0;
padding: 0;
}
}
.item-info {
padding: 10px 10px 10px 10px;
.line {
height: 18px;
line-height: 18px;
position: relative;
margin-inline-start: 38px;
&--no-margin {
margin-inline-start: 0;
}
display: flex;
white-space: nowrap;
align-items: center;
dl {
margin: 0;
white-space:nowrap;
}
dt, dd {
display: inline-block;
margin-inline-start: 0px;
&.dropdown:hover .dropdown__menu {
display: block;
min-width: 100%;
}
.dropdown__toggle {
padding: 0;
margin: 0 0 0 5px;
}
}
& + .line {
margin-block-start: 2px;
}
}
.state-label, .profile-label, .label {
margin-inline-end: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
& + .takekey, & + .provider {
margin-inline-start: $sd-base-increment / 2;
}
}
.language-label {
overflow: visible;
text-overflow: initial;
}
.signal {
display: inline-block;
background: rgba(0,0,0,0.1);
padding: 1px 5px;
@include border-radius(2px);
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.08em;
@include text-semibold();
line-height: 14px;
margin-block-start: 2px;
margin-inline-end: 10px;
}
.broadcast-status {
display: inline-block;
background: #e51c23;
color: $white;
padding: 1px 5px;
border-radius: 2px;
font-size: 14px;
font-weight: 600;
line-height: 14px;
margin-block-start: 2px;
margin-inline-end: 10px;
}
.headline {
color: #686b6c;
margin-inline-end: $rightfield-width + 5px;
display: flex;
flex-grow: 1;
display:table;
}
.highlights-box {
margin-block-start: -2px;
margin-inline-end: 5px;
&:empty {
display: contents;
}
}
.item-heading {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
}
.location-desk-label {
font-style: italic;
color: $sd-text-light;
font-weight: 300;
margin-inline-end: 3px;
}
.container {
@include text-semibold();
color: $sd-text-light;
margin-inline-end: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.link {
color: $sd-blue-text;
@include text-normal();
text-overflow: inherit;
}
&.grow {
flex-grow: 1;
}
}
.takekey {
color: inherit;
margin-inline-end: $sd-base-increment * 1.5;
}
.category {
color: $sd-text-light;
margin-inline-end: $sd-base-increment * 1.5;
}
.provider {
color: $sd-text-light;
margin-inline-end: $sd-base-increment * 1.5;
white-space: nowrap;
}
.expires {
float: inline-end;
background: $errorBackground;
color: $errorText;
font-size: 10px;
line-height: 15px;
padding: 0 5px;
border-radius: 3px;
margin-block-start: 4px;
}
time {
font-size: 11px;
color: $sd-text-light;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 60px;
text-align: end;
margin-inline-start: 3px;
&.time--short {
min-width: 30px;
}
}
.associations {
position: static;
width: auto;
margin-inline-end: $sd-base-increment;
i {
width: 16px;
}
}
.queue-error {
margin-inline-end: 5px;
}
.text-link {
color: $blue;
}
}
.item-info-reduced-rowheight {
padding: 5px 10px 5px 10px;
}
&.archived {
background-color: var(--sd-item__main-Bg--alternate);
border-inline-end: 2px solid $sd-archived-bg;
&::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-end: 20%;
width: 10rem;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==);
background-repeat: no-repeat;
background-size: 4rem;
background-position: center center;
opacity: 0.16;
}
&.active {
border-inline-end: 2px solid rgba(94,169,200,0.75) !important;
}
}
&:hover {
.action {
display: block;
}
}
.state-border {
position: absolute;
width: 4px;
inset-inline-start: 0;
inset-block-start:0;
inset-block-end: 0;
background: rgba(0, 0, 0, 0);
}
&.locked .state-border {
background: $state-border--locked;
}
&.media-box--state-published, &.media-box--state-corrected {
background: $item-background-published;
.state-border {
background: $state-border--published;
}
}
&.media-box--state-killed {
background: $item-background-killed;
.state-border {
background: $state-border--killed;
}
}
}
}
.more-activity-menu.dropdown__menu {
margin: 8px 0;
z-index: 99999;
&:before {
display: none;
}
li {
width: 100%;
}
}
.mgrid-view {
.active:not(.selected) {
.media-box {
//border-color: #787878;
@include box-shadow-both(0 0px 6px 1px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.12));
}
}
}
.mlist-view, .compact-view.list-view {
.active:not(.selected) {
.media-box {
background-color: var(--sd-item__main-Bg--selected) !important;
border-inline-end: 2px solid rgba(94,169,200,0.75) !important;
&:hover {
.item-functions {
background-color: #eff7fa;
.item-field {
&:hover {
background-color: #d6e8ef;
}
&.disabled {
&:hover {
background-color: #d6e8ef;
}
}
}
}
}
}
}
.selected {
.media-box {
background-color: var(--sd-item__main-Bg--selected) !important;
&:hover {
background-color: var(--sd-item__main-Bg--selected) !important;
}
}
}
}
/*modal window*/
$modalMaxImageWidth : 379px;
$modalMaxImageHeight : 250px;
.modal-body {
.row-fluid {
.span6 {
figure {
margin:0px;
padding:0px;
width:100%;
max-width:$modalMaxImageWidth;
height:auto;
max-height:$modalMaxImageHeight;
}
dl {
font-size:13px;
color:#777;
position:relative;
height:auto;
margin:0;
dt {
width:110px;
float: inline-start;
clear: left;
font-weight:normal;
color:#474747;
margin-block-end:5px;
line-height:16px;
vertical-align:middle;
}
dt:after {
content : ":";
}
dd {
width:245px;
max-width: 245px;
float: inline-start;
margin-inline-start:0px;
line-height:16px;
margin-block-end:5px;
vertical-align:middle;
}
&.line-borders {
width:379px;
border-block-start:1px solid #e8e8e8;
margin-block-start:15px;
dt {
border-block-end:1px solid #e8e8e8;
vertical-align:top;
line-height:20px;
margin-block-end:0px;
}
dd {
padding-inline-end: 24px;
border-block-end:1px solid #e8e8e8;
vertical-align:top;
line-height:20px;
margin-block-end:0px;
}
}
}
}
}
}
.metadata-language {
height: 38px;
position: relative;
z-index: 10;
}
.metadata-details {
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
padding: 5px;
input, textarea {
border-color: var(--sd-colour-line--light) !important;
color: var(--color-text-light);
&:focus {
border-color: var(--sd-colour-interactive--alpha-80) !important;
color: var(--color-text);
}
}
}
.edit-metadata-select {
margin-block-start: 2px;
height: 26px;
}
.modal-header {
button.close {
padding : 0;
cursor: pointer;
background: transparent;
border:0;
-webkit-appearance: none;
&:hover {
color: #b3b3b3;
}
}
}
.btn.pull-right {
margin-inline-start: 10px;
}
.meta-description-text {
height: 52px;
max-width: 245px;
}
.close {
&:hover {
color: #b3b3b3;
}
}
/* uploads grid used for upload popup */
.uploads-grid {
list-style-type: none;
margin:60px 0 0;
padding: 0;
inset-block-start:0;
inset-block-end:0;
overflow: scroll;
position: absolute;
li {
max-height: 100px;
float: inline-start;
margin: 0 15px 15px 0;
padding: 3px;
border:1px solid #d0d0d0;
position: relative;
.add-button {
position: absolute;
background-color: #0079cc;
inset-inline-start: 3px;
inset-block-start: 3px;
width:16px;
height: 18px;
padding: 4px;
display: none;
}
&:hover {
background: #0079cc;
border-color:#2d95dd;
cursor:pointer;
@include box-shadow(0px 0px 3px #a0a0a0);
.add-button {
display: block !important;
}
}
&.grid-selected {
background: #0079cc;
border-color:#2d95dd;
}
img {
height: 100px;
max-height: 100px;
}
}
}
.cropItems{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
grid-gap: 1.6rem;
margin: 1rem 0;
padding-block-end: 2.5rem;
border-block-end: 1px dotted rgba(123, 123, 123, 0.5);
.cropItems__item {
text-align: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
img {
display: block;
}
figure {
display: block;
margin: 0;
}
}
.cropItems__item-rendition {
flex-grow: 1;
background-color: rgba(0,0,0,0.75);
display: flex;
align-items: center;
}
.cropItems__item-label {
display: block;
padding: 0.6rem 0;
opacity: 0.7;
font-family: 'Roboto';
font-size: 1.3rem;
flex-grow: 0;
flex-shrink: 0;
}
}
// Styling for action menu
// -------------------------------------------------------------
.item-right {
width: 30px;
position: absolute;
inset-inline-end: 0;
inset-block-start: 0;
inset-block-end: 0;
padding: 0;
background: transparent;
z-index: 3;
.more-activity-dropdown {
position: relative;
width: 100%;
height: 100%;
.submenu {
overflow: hidden;
display: block;
}
&.open {
i {
opacity: 1;
}
}
}
}
.more-activity-toggle {
position: absolute;
//width: 100%;
inset-inline-end: 0;
inset-block-start: 0;
//display: inline-flex;
align-items: center;
justify-content: center;
//font-size: 1.6rem;
transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
height: 3.2rem;
width: 3.2rem;
border-radius: 9999px;
//background-color: transparent;
opacity: 0.75;
//background-color: rgba(55, 55, 55, 0);
color: inherit;
text-decoration: none;
cursor: pointer;
// i {
// color: $sd-text;
// }
&:hover {
opacity: 1;
text-decoration: none;
// background-color: rgba(155, 155, 155, 0.2);
}
&:active {
opacity: 1;
// background-color: rgba(155, 155, 155, 0.3);
i {
color: var(--sd-colour-interactive);
opacity: 1;
}
}
}
// nested list item view
.list-item-view.sd-list-item-nested {
margin-block-start: 0;
}