scripts/apps/authoring/styles/authoring.scss
// article-edit.scss
// Styling for the superdesk article edit module
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
@import "~sf-additional.scss";
#main-container.authoring {
.authoring-embedded {
background: url('~images/loading-large.gif') no-repeat center;
}
}
.auth-screen {
position: absolute;
inset-block-start: 0; inset-inline-end: 0; inset-inline-start: 0; inset-block-end: 0;
.main-section {
@include transition(all ease 0.3s);
}
}
.authoring-embedded {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inset-inline-start: 0;
inset-block-end: 0;
.embedded-auth-view {
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-end: 0;
inset-inline-start: 0;
box-sizing: border-box;
}
.page-content-container {
inset-inline-start:0;
inset-inline-end:$tablist-width;
inset-block-start: 0;
}
.widget-wrapper {
&.active-right {
&.right-extended {
.page-content-container {
inset-inline-end: $tablist-width;
}
}
.page-content-container {
inset-inline-end: $tablist-width;
}
}
}
}
.subnav--authoring {
z-index: 3;
position: absolute;
inset-block-start: $subnav-height;
inset-inline-start: 0;
inset-inline-end: 0;
background-color: $subnav-authoring;
.highlights-toggle, .marks-toggle {
.dropdown__menu {
max-height: calc(100vh - 350px);
overflow-y: auto;
}
}
}
.subnav--locked {
background-color: var(--sd-colour--locked-subnav);
}
.subnav__authoring-topbar {
display: flex;
align-items: center;
height: 30px;
max-width: 100%;
flex-grow: 1;
flex-shrink: 1;
padding: 0 0 0 1.2rem;
.assignment {
vertical-align: sub;
}
.stage {
font-size: 10px;
font-weight: 300;
letter-spacing: 0.035em;
line-height: 34px;
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: 500;
}
}
&.enable-overflow {
overflow: visible;
}
}
.compact {
.subnav__authoring-topbar {
.stage {
max-width: 90px;
}
}
}
.auto-save {
margin-inline-end: 20px;
line-height: 28px;
@include opacity(70);
i {
margin-block-start: -4px;
}
}
.page-content-container {
position: absolute;
inset-block-start:0;
inset-block-end: 0;
inset-inline-start: $tablist-width + $article-tabpane-padding;
inset-inline-end: $tablist-width + $article-tabpane-padding;
display: flex;
flex-direction: column;
}
.workqueue .page-content-container {
inset-block-end: 32px;
}
// Placeholders
// -------------------------------------------------
[contenteditable=true] {
&:before{
display: block; /* For Firefox */
}
&:empty:before{
content: attr(placeholder);
display: block; /* For Firefox */
color: rgba(150, 150, 150, 0.5);
}
&:focus:before{
display: none;
}
}
// Opened articles
// -------------------------------------------------
$bottom-bar-item-border-color: rgba(255,255,255,0.1);
$bottom-bar-item-border-color-active: transparent;
.opened-articles-bar {
position: fixed;
height: $authoring-opened-articles;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
background: var(--sd-colour-bottom-bar);
z-index: $zindexFixedNavbar;
white-space: nowrap;
max-width: 100vw;
display: grid;
grid-template-rows: 32px;
grid-template-columns: $sidebar-width 1fr auto auto;
transition: left 0.3s ease;
.opened-articles-bar__list {
display: flex;
flex-grow: 1;
flex-shrink: 1;
flex-wrap: nowrap;
overflow-x: auto;
grid-column: 2/3;
}
.opened-articles-bar__item {
flex: 0 1 24rem;
border-inline-end: 1px solid var(--sd-colour-line--x-light);
padding: 0 0.4rem 0 1.2rem;
position: relative;
line-height: 3.2rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s ease-in-out;
gap: $sd-base-increment / 2;
.opened-articles-bar__item-close {
height: 2.2rem;
width: 2.2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
flex-grow: 0;
flex-shrink: 0;
margin-inline-start: 0.4rem;
opacity: 0.2;
transition: all 0.2s ease-in-out;
background-color: hsla(214, 13%, 100%, 0);
&:hover {
opacity: 0.6;
background-color: hsla(214, 13%, 100%, 0.08);
}
&:active {
opacity: 1;
}
}
.opened-articles-bar__item-title {
display: flex;
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
align-items: center;
white-space: nowrap;
color: $white;
font-size: 1.2rem;
transition: color 0.2s ease-in-out;
opacity: 0.75;
gap: $sd-base-increment / 2;
i {
margin-inline-end: 0.4rem;
}
&:hover {
text-decoration: none;
cursor: pointer;
opacity: 1;
}
}
&.opened-articles-bar__item--active {
background: var(--sd-colour-interactive--alpha-20);
color: var(--sd-colour-interactive);
box-shadow: inset 0 1px 0 0 var(--sd-colour-interactive);
&:hover {
cursor: default;
}
&:active {
background: var(--sd-colour-bg--01);
color: var(--sd-colour-interactive--active);
}
.opened-articles-bar__item-title {
color: var(--sd-colour-interactive--active);
font-weight: 500;
opacity: 1;
}
}
&--teal { // use this outside the <ul>, as a single item
border-inline-end: none;
border-inline-start: 1px solid var(--sd-colour-line--x-light);
margin-inline-end: 1px;
&:hover {
background: hsla(174, 100%, 20%, 0.2);
}
.opened-articles-bar__item-title {
color: hsl(174, 100%, 50%);
//color: $white;
}
&.opened-articles-bar__item--active, &.opened-articles-bar__item--active:active {
background: hsl(174, 90%, 20%);
.opened-articles-bar__item-title {
color: $white;
}
&:hover {
background: hsl(174, 100%, 25%);
}
}
}
.icn-mix .icn-mix__sub-icn {
background-color: var(--sd-colour-bottom-bar) !important;
}
}
.opened-articles-bar__quick-actions {
grid-column: 1/2;
display: flex;
align-items: center;
justify-content: center;
background: var(--sd-colour-bg--00);
border: 0;
height: 3.2rem;
width: 4.8rem;
text-align: center;
transition: background-color 0.2s ease;
&:hover {
cursor: pointer;
background: var(--sd-colour-interactive--hover);
}
&:active {
background: var(--sd-colour-interactive--active);
}
}
.opened-articles-bar__multiedit {
grid-column: 3/4;
.opened-articles-bar__item {
border-inline-end: none;
border-inline-start: 1px solid $bottom-bar-item-border-color;
margin-inline-end: 1px;
}
}
.opened-articles-bar__create-new {
grid-column: 4/5;
.dropdown__menu.dropdown--dropup {
inset-block-start: auto;
inset-block-end: 0;
}
.btn {
border-radius: 0 !important;
}
}
&.menu-open {
inset-inline-start: $sf-main-menu-width !important;
inset-inline-end: 0 !important;
}
}
// Article dashboard
// -------------------------------------------------
.authoring-dashboard {
padding: 40px;
overflow: auto;
.card-list {
width: 0;
margin: 0 auto;
}
.card-list > li {
width: 140px;
height: 170px;
float: inline-start;
margin: 10px;
padding: 15px 20px;
position: relative;
.title {
max-height: 135px;
overflow: hidden;
font-size: 14px;
line-height: 22px;
max-height: 110px;
overflow: hidden;
@include text-semibold();
}
.created {
position: absolute;
inset-block-end: 15px;
inset-inline-start: 20px;
color: $sd-text-light;
font-size: 12px;
width: 80%;
height:14%;
float: inline-start;
}
.text {
font-size: 12px;
color: $sd-text;
line-height: 18px;
}
.close {
position: absolute;
inset-inline-end: 7px;
inset-block-start: 3px;
}
.type-icon {
position: relative;
inset-block-end: 6px;
margin: 0;
float: inline-start;
}
.state-label {
position: relative;
inset-block-end: 1px;
margin: auto;
float: inline-end;
}
.subInfo {
position: absolute;
inset-inline-end: 15px;
inset-block-end: 1px;
float: inline-end;
}
.container {
@include text-semibold();
color: #216678;
margin-inline-end: 20px;
}
}
}
.terms-box {
position: relative;
.dropdown__menu.nested-menu {
width: 100%;
}
}
.widget {
h3 {
margin-block-end: 0.5em;
}
}
.modal-footer {
.pagination-box {
.page-info {
float: inline-start;
}
}
}
$authoring-toolbar-spacing: 10px;
// Authoring Header
// -------------------------------------------------
.created-modified-info {
display: flex;
align-items: center;
.created-modified-info--separator {
width: 1px;
height: 16px;
background-color: #DADADA;
margin-left: $authoring-toolbar-spacing;
margin-right: $authoring-toolbar-spacing;
}
dl, dt, dd {
font-size: 12px;
line-height: 1;
margin-bottom: 0;
margin-top: 0;
}
dl {
display: flex;
align-items: center;
}
dt {
color: $sd-gray-text;
}
dd {
color: $sd-text;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
dd + dt,
dt + dt {
margin-left: 8px;
}
}
// ---- Sticky header ----
.authoring-sticky {
height:$sd-base-increment * 6;
margin: 0 auto;
padding: 4px 20px;
background-color: var(--sd-colour-panel-bg--100);
z-index: 3;
transition: all .5s ease;
display: flex;
justify-content: space-between;
box-shadow: var(--sd-shadow__subnav);
position: relative;
z-index: 3;
.authoring-sticky__detailed {
display: inline-block;
dl, dt, dd, .authoring-sticky__from-extensions {
display: inline-block;
vertical-align: bottom;
padding: 0;
margin: 0;
}
> dl + dl, .authoring-sticky__from-extensions {
margin-inline-start: $authoring-toolbar-spacing;
padding-inline-start: $authoring-toolbar-spacing;
border-inline-start: 1px solid var(--sd-colour-line--light);
}
dt {
font-size: 12px;
color: $sd-text-lighter;
}
dd {
color: $sd-text;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// display `|` separators correctly over multiple lines
overflow: hidden;
.authoring-sticky__detailed-wrapper {
margin-inline-start: -$authoring-toolbar-spacing * 2;
}
}
}
// ---- Main header ----
.authoring-header {
position: relative;
margin: 0 auto;
padding: 0 12px;
border-block-start: 0;
border-block-end: 0;
background-color: var(--authoringHeaderBG);
z-index: 2;
@include box-shadow(0px 1px 4px -1px rgba(0,0,0,0.25));
padding: 8px 12px 16px;
* {
box-sizing: border-box;
}
}
.authoring-header__general-info {
$spacing: 10px;
margin: 0 auto 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
> * {
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-block-start: 2px;
margin-block-end: 2px;
padding-inline-start: $spacing;
padding-inline-end: $spacing;
border-inline-end: 1px solid var(--sd-colour-line--medium);
// equal spacing between children
> * {
margin-inline-start: 0;
margin-inline-end: 0;
+ * {
margin-inline-start: $spacing;
}
}
}
[class^="filetype-icon-"],
[class*="filetype-icon-"] {
color: $sd-text-light;
}
.authoring-header__label {
font-size: 10px;
color: $sd-text-light;
letter-spacing: 0.06em;
}
.authoring-header__label-2 {
font-size: 12px;
color: $sd-text-label;
}
.authoring-header__value {
font-size: 13px;
margin-block-start: -2px;
text-transform: lowercase;
select {
border: 1px solid var(--color-input-border);
border-radius: var(--b-radius--x-small);
background-color: var(--sd-item__main-Bg);
color: var(--color-text);
height: 20px !important;
font-size: 12px !important;
padding: 0 2px !important;
}
}
}
.authoring-header__detailed {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-content:flex-start;
.data {
flex-grow: 1;
font-size: 13px;
line-height: 20px;
}
input.slugline {
color: $sd-keyword;
font-weight: 500;
}
textarea.ed-note {
color: #d25932;
}
.dropdown {
width: 100%;
line-height: 0;
.dropdown__toggle {
@include transition(all .3s);
padding: 0;
.dropdown__caret {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 3px;
margin-block-start: -3px;
}
i { vertical-align: middle; }
&.line-input {
+ .dropdown__menu {
margin-block-start: 20px;
}
span {
vertical-align: baseline;
margin-inline-end: 3px;
}
}
}
&.open {
.dropdown__toggle {
box-shadow: 0 1px 0 0 $sd-blue;
border-color: $sd-blue;
}
}
.dropdown__menu {
.place-dropdown {
padding-inline-start: 16px;
@include text-semibold();
}
}
}
}
.authoring-header__toggle-container {
display: flex;
justify-content: center;
height: 0;
position: relative;
}
.authoring-header__toggle {
--toggleBG: var(--authoringHeaderBG);
--toggleWidth: 37px;
--toggleHeight: 25px;
--toggleHeigh--Hover: 32px;
--toggleBorderColor: transparent;
@include header-toggle;
width: 37px;
height: 25px;
border: 0;
padding: 0 0 4px;
background-color: var(--authoringHeaderBG);
z-index: 3;
line-height: 0;
border-radius: 0 0 22px 22px;
box-shadow: 0 -2px 0 0 var(--authoringHeaderBG), 0 1px 3px 0 rgba(0,0,0,0.3);
@include transition(all ease-in 0.12s);
i {
opacity: 0.75;
}
&:hover {
height: 32px;
bottom: -32px;
padding-top: 2px;
i {
opacity: 1;
}
}
i {
height: 15px;
@include transition(all 0.5s);
}
&.active {
i {
@include rotate(180deg);
}
}
}
.authoring-header__row {
display: flex;
margin-block-end: 12px;
min-height: 24px;
}
.authoring-header__row--wrap {
flex-wrap: wrap;
align-content:flex-start;
}
.char-count-config-button {
float: inline-end;
[class^="icon-"], [class*=" icon-"] {
color: inherit;
}
}
.char-count-base {
font-size: 11px;
font-style: italic;
color: var(--sd-editor-colour__txt);
opacity: 0.6;
&.error {
color: $red;
opacity: 1;
}
}
.editor3-invalid-chars-error {
font-size: 12px;
font-style: italic;
color: $red;
}
.authoring-header__item {
display: flex;
align-items: center;
flex-grow: 1;
padding: 0 1rem 1.6rem;
min-height: 40px;
position: relative;
&.template-schedule {
padding: 0 0 1.6rem;
label {
width: 105px;
line-height: inherit;
}
}
input.slugline {
color: $sd-keyword;
font-weight: 500;
}
.sd-invalid-text {
float: inline-end;
margin-block-end: -16px;
}
.char-count {
@extend .char-count-base;
float: inline-end;
margin-block-end: -16px;
margin-inline-start: 5px;
}
[sd-meta-terms] + .sd-invalid-text {
position: absolute;
inset-inline-start: 120px;
margin-block-start: 3px;
}
&----half {
flex-basis: 50%;
}
}
.authoring-header__item-start {
align-items: start;
}
.authoring-header__item .authoring-header__hint {
font-size: 12px;
color: #747474;
margin: 2px 0 -2px 0;
font-weight: 300;
}
.authoring-header__item-label {
min-width: 90px;
max-width: 90px;
font-size: 11px;
line-height: 1.2;
font-weight: 500;
margin: 0;
color: $sd-text-label;
text-transform: uppercase;
padding-inline-end: 8px;
flex-shrink: 1;
flex-grow: 1;
overflow: hidden;
word-wrap: break-word;
text-align: end;
}
.authoring-header__input-holder {
position: relative;
padding: 0;
margin: 0;
flex-grow: 1;
.arrow-down {
position: absolute;
inset-block-start: 4px;
inset-inline-end: 4px;
}
&:hover {
.arrow-down {
.caret {
opacity: 1;
}
}
}
}
// --- various layout options ---
.authoring-header__row--2 {
.authoring-header__item {
flex-basis: 50%;
}
}
.authoring-header__row--3 {
.authoring-header__item {
flex-basis: 33%;
}
}
.authoring-header__row--4 {
.authoring-header__item {
flex-basis: 25%;
}
}
.authoring-header__row--2-1-1 {
.authoring-header__item {
flex-basis: 25%;
&:first-child {
flex-basis: 50%;
}
}
}
.authoring-header__row--inline {
.authoring-header__item {
flex-grow:0;
}
}
.authoring-header__row--inline {
.authoring-header__item {
.authoring-header__item-label {
min-width: 0;
max-width: 100%;
padding-inline-end: 12px;
width: auto;
flex-shrink: 1;
}
&:first-child {
.authoring-header__item-label {
min-width: 75px;
max-width: 75px;
padding-inline-end: 6px;
}
}
}
}
.compact {
.authoring-header__item {
.authoring-header__item-label {
min-width: 0;
max-width: 50px;
}
&:first-child {
.authoring-header__item-label {
min-width: 75px;
max-width: 75px;
padding-inline-end: 6px;
}
}
}
.authoring-header__row--inline {
.authoring-header__item {
.authoring-header__item-label {
min-width: 0;
max-width: 50px;
}
&:first-child {
.authoring-header__item-label {
min-width: 75px;
max-width: 75px;
padding-inline-end: 6px;
}
}
}
}
}
// -------------------------------------------------
// END Authoring Header
.input-term {
display: flex;
align-items: center;
.input-term__icon {
flex-grow: 0;
opacity: 0.5;
pointer-events: none;
margin: 0 4px;
display: none;
}
}
.dropdown-terms {
width: auto !important;
.dropdown__toggle {
width: 24px;
height: 24px;
background-color: var(--sd-colour-interactive);
margin: 0 2px 3px 0;
opacity: 0.75;
border-radius: 2px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
&:hover, &:focus {
opacity: 1;
background-color: var(--sd-colour-interactive--hover);
}
}
&.open {
.dropdown__toggle {
opacity: 1;
};
}
.dropdown__menu {
width: 260px;
max-height: 275px;
padding: 0;
border-radius: 0 0 3px 3px;
.input-term {
padding: 8px;
border-block-end: 1px solid var(--sd-colour-line--light);
//box-shadow: 0 1px 0 var(--sd-colour-line--light);
input {
box-shadow: none!important;
background-color: transparent;
border: 0!important;
flex-grow: 1;
}
}
.input-term__icon {
display: block;
color: var(--color-icon-default);
}
.main-list {
background-color: var(--color-dropdown-menu-Bg);
max-height: 215px;
padding: 8px 0;
overflow: auto;
li {
position: relative;
button {
padding-inline-end: 17px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
i {
margin-inline-end: 0;
}
}
}
}
.levelup {
display: flex;
align-items: center;
padding: 5px;
margin-block-end: 1px;
box-shadow: 0 1px 0 var(--sd-colour-line--light);
z-index: 1;
i.backlink {
flex-grow: 0;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 28px;
margin: 0 4px;
}
button {
flex-grow: 1;
min-width: 0 !important;
font-weight: 500;
text-overflow: ellipsis;
overflow: hidden;
b.category-hover {
display: none;
}
&:hover {
b.category { display: none; }
b.category-hover { display: block; }
}
}
}
.item-list {
position: static;
max-height: 215px; }
.nested-indicator {
margin-inline-end: -10px !important;
}
}
}
.terms-list {
width: calc(100% - 30px);
display: inline-block;
vertical-align: top;
text-align: start;
li {
display: inline-flex;
align-items: center;
position: relative;
font-size: 12px;
color: var(--color-text);
background-color: var(--sd-colour__tag-label-Bg--1);
margin-inline-end: 3px;
margin-block-end: 3px;
padding: 0 12px;
min-height: 24px;
line-height: 1.1;
border-radius: 9999px;
transition: color .2s ease;
i {
display: block;
height: 18px;
width: 18px;
padding: 1px;
margin-inline-start: 4px;
margin-inline-end: -8px;
color: var(--color-text);
opacity: 0.25;
background-color: hsla(0, 0%, 100%, 0.25);
border-radius: 9999px;
transition: all .2s ease;
}
&:not([disabled]):not([data-disabled]) {
cursor: pointer;
&:hover {
background-color: var(--sd-colour__tag-label-Bg--2);
i {
opacity: 1;
background-color: hsla(0, 0%, 100%, 0.35);
}
}
&:active {
background-color: var(--sd-colour-interactive--alpha-30);
i {
color: var(--sd-colour-interactive);
background-color: hsla(0, 0%, 100%, 0.15);
}
}
}
&[disabled], &[data-disabled], &:disabled {
opacity: 0.6;
pointer-events: none;
i {
display: none !important;
}
}
label {
display: inline;
min-width: auto;
font-size: 12px;
font-weight: 300;
color: inherit;
opacity: 0.75;
margin: 0;
padding: 0 4px 0 0;
}
}
&--full {
width: 100%;
}
}
[sd-meta-terms] {
border-block-end: 1px solid var(--color-input-border);
transition: border linear 0.2s, box-shadow linear 0.2s, background-color linear 0.2s;
border-radius: var(--b-radius--x-small) var(--b-radius--x-small) 0 0;
&.sd-terms--boxed {
background-color: var(--color-input-bg);
border-radius: 2px;
padding-block-start: 3px;
padding-inline-start: 3px;
}
&:hover {
border-color: var(--color-input-border-hover);
&.sd-terms--boxed {
background-color: var(--color-input-bg--hover);
}
}
&:focus {
border-color: var(--sd-colour-interactive);
box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
&.sd-terms--boxed {
background-color: var(--sd-colour-interactive--alpha-20);
}
}
}
.terms-box.boxed-input {
.terms-list {
margin-block-start: 0.4rem;
}
}
.item-detail-info {
height: 0px;
overflow: hidden;
@include box-sizing(border-box);
&.active {
height: auto;
}
+ button {
position: absolute;
width: 23px;
height: 23px;
border: 0;
padding: 0 5px;
font-size: 0;
inset-inline-start: 98%;
margin-inline-start: -11.5px;
margin-block-start: -13px;
background-color: $white;
@include border-radius(23px);
@include transition(transform 0.5s);
&.active {
@include rotate(180deg);
}
}
.edit-photo {
display: none ;
color: #fff;
text-transform: uppercase;
font-size: 9px;
text-decoration: none;
text-align: center;
position: relative;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
}
&:hover {
.edit-photo {
display: block;
}
}
}
.sd-photo-preview__edit-mode {
.sd-photo-preview__image {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
sd-image-modify {
text-align: center;
height:100%;
overflow:auto;
canvas {
max-width: 100%;
max-height: 100%;
height: auto;
margin: auto;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
&.disable-transition canvas {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
}
&--with-strip {
position: relative;
display: block;
height:100%;
text-align: center;
.sd-photo-preview__label {
position: absolute;
inset-block-end: 1rem;
inset-inline-start: 50%;
margin-inline-start: -8rem;
display: inline-block;
pointer-events: none;
user-select: none;
}
sd-image-point, div[sd-image-crop] {
display: inline-block !important;
margin-block-start: 6rem;
}
}
&--no-flex {
display: block;
height: 100%;
text-align: center;
div[sd-image-crop] {
display: inline-block !important;
.jcrop-tracker {
display: inline-block !important;
}
img {
max-height: none;
}
}
.sd-photo-preview__label {
display: inline-block;
}
}
}
}
.sd-photo-preview__slide-in-button {
position: absolute !important;
}
.sd-column-box__main-column.toolbar-offset {
.sd-photo-preview__slide-in-button { margin-block-start: 6rem;}
// .sd-photo-preview__image--with-strip { margin-block-start: 70px; }
}
// .sd-photo-preview__image--with-strip
.sd-grid-item .sd-grid-item__thumb > div:not(.sd-grid-item__checkbox) {
position: relative;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
width: 100%;
height: 14rem;
overflow: hidden;
text-align: center;
}
.sd-grid-item .sd-grid-item__thumb {
.list-field.type-icon.sd-monitoring-item-multi-select-checkbox {
padding: 0;
position: absolute;
height: 1.6rem;
width: 1.6rem;
margin: 0;
inset-block-start: 12px;
inset-inline-start: 12px;
z-index: 1;
transition: all ease-in-out 0.2s;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0);
//border: 2px solid rgba(255, 255, 255, 0);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0);
i {
opacity: 0 !important;
pointer-events: none;
}
.sd-checkbox {
border-color: rgba(255, 255, 255, 0.5);
&.checked {
border-color: rgba(94, 169, 200, 1);
}
}
}
}
.sd-grid-item:hover .sd-grid-item__thumb {
.list-field.type-icon.sd-monitoring-item-multi-select-checkbox {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
}
.sd-grid-item.sd-grid-item--overflow-v .sd-grid-item__thumb > div:not(.sd-grid-item__checkbox) {
overflow: visible;
}
.sd-grid-item .sd-grid-item__thumb > sd-image-point {
text-align: center;
display: inline-block;
padding: 0;
height: 14rem;
overflow: hidden;
}
.sd-photo-preview__image {
display: flex;
align-items: center;
justify-content: center;
> img, > video {
max-width: 100%;
max-height: 100%;
height: auto;
margin: auto;
object-fit: contain;
}
.jcrop-holder img {
max-width: none;
max-height: none;
}
&--with-strip {
display: block;
height:100%;
text-align: center;
}
}
.sd-photo-preview__label {
background: rgba(0, 0, 0, 0.25);
color: inherit;
padding: 0.8rem 2rem;
margin: 1rem auto;
line-height: 100%;
border-radius: 2rem;
font-weight: 300;
min-width: 16rem;
}
.sd-grid-item .sd-grid-item__thumb {
.jcrop-holder img {
max-width: none;
max-height: none;
}
}
.preview-modal-control { // toggle for preview dialog
.preview-toggle {
z-index: 100;
}
}
.preview-pane {
.pane-holder {
width: $sidepreview-width;
&.outer-pane {
inset-block-start: 0;
}
.send-to-pane {
width: $sidepreview-width;
}
}
}
#macros-diff {
position: absolute;
inset-block-end: 30px;
inset-inline-end: 60px;
padding: 5px;
opacity: 0.88;
z-index: 10;
text-align: end;
background-color: #fff;
& > * {
margin-inline-start: 5px;
}
& .replace-btn {
margin-inline-end: 8px;
}
& em {
font-size: 120%;
}
}
// -------------------------------
.media-container {
cursor: default;
position: relative;
padding: 1.2rem 1.2rem 1.6rem;
border-radius: 2px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.26), 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(123, 123, 123, 0.3);
transition: 0.3s linear box-shadow;
}
.item-association {
&:hover {
.item-association__image-overlay, .item-association__remove-item {
opacity: 1;
}
}
audio {
width: 96%;
margin: 2rem 2% 0.4rem;
}
}
.item-association__image-overlay {
@include image-overlay;
}
.item-association__metadata, .media-container__metadata {
@include two-col-list;
margin: 1.6rem 1.6rem 0;
}
[class^="__image-overlay"],
[class*="__image-overlay"] {
.item-association__metadata {
span {
border-color: rgba(255, 255, 255, 0.5) !important;
&:last-child {
border-block-end: none;
}
}
}
}
.media-container__metadata {
margin: 1.6rem 0 0;
&--image {
margin: 0;
padding: 0.5rem 1.6rem;
span {
&:nth-child(1), &:nth-child(2) {
border-block-start: none;
}
&:nth-last-child(1), &:nth-last-child(2) {
border-block-end: none;
}
}
}
}
.item-association__title {
margin-block-end: 1.6rem;
font-size: 1.5rem;
font-weight: 500;
}
.media-container__action-bar, .item-association__action-bar {
text-align: end;
padding: 1rem 0 0;
margin: 0 1.6rem;
}
.media-container__action-bar {
margin: 0;
}
.item-association__icons-block {
@include image-overlay_actions-block;
}
.item-association__image-action {
@include image-overlay_action-button;
}
.item-association__image-action + .item-association__image-action {
margin-inline-start: 2rem;
}
.item-association__image-container,
.item-association__video-container,
.item-association__audio-container {
height: 100%;
position: relative;
}
.item-association__audio-container {
//background-color: #fafafa;
padding: 2.5rem 0 2rem;
audio {
margin-block-end: 1rem;
border-radius: 6px;
}
}
.item-association__video-container {
//background-color: #2c2c2c;
padding-block-end: 1.6rem;
video {
display: block;
}
.item-association__image-overlay {
inset-block-end: 32px;
}
}
.item-association__image-container {
background-color: #2c2c2c;
color: $white;
}
.item-association__remove-item {
position: absolute;
inset-block-start: 1rem;
inset-inline-end: 1rem;
z-index: 2;
color: $white;
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.2s linear all;
cursor: pointer;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.5);
transition: 0.2s linear opacity;
opacity: 0;
i {
color: $white;
height: 1.8rem;
width: 1.8rem;
font-size: 1.8rem;
line-height: 1;
opacity: 0.75;
transition: 0.2s linear all;
}
&:hover {
background-color: rgba(0, 0, 0, 0.75);
text-decoration: none;
i {
opacity: 1;
}
}
&:active {
border-color: $sd-blue;
background-color: rgba(0, 0, 0, 1);
i {
color: $sd-blue;
}
}
}
// -------------------------------
.item-association {
border: 2px dashed hsla(0, 0%, 60%, 0.3);
background-color: hsla(0, 0%, 60%, 0.06);
border-radius: var(--b-radius--small);
color: inherit;
&:focus {
border-color: var(--sd-colour-interactive--active);
}
width: 100%;
min-height: 65px;
position: relative;
text-align: center;
video {
max-width: 100%;
}
&--loading {
background-color: fade(#f7f7f7, 40%);
border-color: fade(#cfcfcf, 40%);
&:before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inset-inline-start: 0;
z-index: 3;
background-image: url(~images/three-dots.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 70px;
}
img {
opacity: .2;
}
.item-association__text-label {
opacity: 0.1;
}
}
&.dragover {
background: var(--sd-colour-interactive--alpha-20);
border-color: var(--sd-colour-interactive);
}
[contenteditable] {
padding: 8px;
min-height: 18px;
}
&:not([disabled]):not(&--preview):not(.not-editable):not(&--no-click) {
cursor: pointer;
}
&--preview {
border: 1px solid rgba(150, 150, 150, 0.15);
border-width: 0 0 1px 0;
//background-color: rgba(0,0,0,0.75);
}
&--marg-b10 {
margin-block-end: 1rem;
}
img {
max-width: 100%;
&:hover {
cursor: pointer;
}
}
.close-overlay {
z-index:10000;
position: absolute;
inset-block-start: 16px;
inset-inline-end: 16px;
}
}
.item-association__text-label {
font-weight: 500;
opacity: 0.4;
}
feature-image {
.item-association {
[contenteditable] {
text-align: center;
}
}
}
.indent-article {
#bodyhtml, .text.body-text {
p:first-of-type, p+p {
text-indent: 25px;
}
h2+p:first-of-type,
h3+p:first-of-type,
h4+p:first-of-type,
h5+p:first-of-type {
text-indent: 0;
}
}
}
#timezoneTimestamp {
.timezone-label {
display: none;
}
ul.item-list {
inset-inline-end: auto;
inset-block-start: -170px;
}
}
.panel-header {
margin-inline-end: 20px;
cursor: pointer;
font-weight: 400 !important;
color: var(--color-text-light) !important;
:hover {
border-block-end: 2px solid #3299b7;
}
}
.panel-header-active {
color: $white !important;
span {
border-block-end: 2px solid #3299b7;
}
}
.media-item {
&--loading {
background-color: fade(#f7f7f7, 40%);
border-color: fade(#cfcfcf, 40%);
&:before {
@include spinner-big();
content: '';
inset-block-start: 50%;
transform: translateY(-50%);
position: absolute;
}
img {
opacity: .2;
}
}
}
.field.media-item {
video, audio {
max-width: 100%;
}
img {
max-width: 100%;
}
video {
display: block;
}
audio {
width: 100%;
display: block;
border-radius: 6px;
}
figure {
display: block !important;
}
}
.media-item__item {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.16);
margin-block-end: 2rem;
width: 100%;
//background-color: rgba(123,123,123,0.3);
figure {
display: block !important;
margin: 0 !important;
}
img {
display: block;
}
.item-association { height: auto; }
}
.media-item__item-label {
text-align: center;
display: block;
padding: 1rem 0;
opacity: 0.7;
font-family: 'Roboto';
font-size: 1.3rem;
border-block-end: 1px solid rgba(123, 123, 123, 0.16);
background-color: rgba(123, 123, 123, 0.08);
}
// Styling for formatted preview popup
// -------------------------------------------------------------
.sd-line-input {
textarea {
&.sd-line-input__input--formatted-preview {
height: 40rem;
font-family: "Roboto Mono", Consolas, Courier, monospace;
}
}
}
.image-carousel {
max-width: 100%;
}
.sd-media-carousel {
&__thumb-strip-item {
transition: none;
}
}
.sd-editor--theme-blue, .sd-editor--theme-dark {
.cropItems__item, .media-item__item {
outline: 1px solid rgba(255,255,255,.2);
}
}
// RELATED ITEMS
// -------------------------------------------------------------
.related-items {
padding: 1rem 1rem 0;
background-color: rgba(150, 150, 150, 0.075);
border: 1px solid rgba(150, 150, 150, 0.2);
color: $grayDark;
.draggable-list {
.placeholder {
border: 2px dotted $sd-blue;
background-color: scale-color($sd-blue, $alpha: -90%);
min-height: 58px !important;
margin: 0 0 1rem;
}
.sd-list-item {
&:hover {
cursor: inherit;
}
}
.draggable-list__item {
border-inline-start: 2px solid transparent;
&.locked {
border-color: $state-border--locked;
}
}
}
&.dragover {
border: 1px dashed $sd-blue;
background-color: scale-color($sd-blue, $alpha: -90%);
}
.groups {
padding: 0 !important;
margin: 0 !important;
}
}
.sd-list-item {
.type-icon {
opacity: 0.6;
}
}
// -------------------------------------------------------------
// END RELATED ITEMS
.form__row--desk-select + .btn-list {
margin-block-start: 1rem;
}
.disallowed-char-error {
font-size: 11px;
font-style: italic;
color: $red;
float: inline-end;
margin-block-end: -16px;
margin-inline-start: 5px;
}
.input-field-error {
font-size: 1.2rem;
color: $errorText;
}
.form-label--invalid {
color: $errorText;
}