110 lines
2.5 KiB
CSS
110 lines
2.5 KiB
CSS
/**
|
|
* @file
|
|
* Styles for the Drupal Media in CKEditor 5.
|
|
*
|
|
* Most of these styles are written to match those in the CKEditor 5 image
|
|
* plugin to provide a consistent editing experience.
|
|
*/
|
|
|
|
.ck .drupal-media {
|
|
position: relative;
|
|
display: table;
|
|
clear: both;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.ck .drupal-media [data-drupal-media-preview] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ck-content .drupal-media img {
|
|
display: block;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ck-content .drupal-media > figcaption {
|
|
display: table-caption;
|
|
padding: 0.6em;
|
|
caption-side: bottom;
|
|
word-break: break-word;
|
|
color: hsl(0, 0%, 20%);
|
|
outline-offset: -1px;
|
|
background-color: hsl(0, 0%, 97%);
|
|
font-size: 0.75em;
|
|
}
|
|
.ck.ck-editor__editable .drupal-media__caption_highlighted {
|
|
animation: drupal-media-caption-highlight 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes drupal-media-caption-highlight {
|
|
0% {
|
|
background-color: hsl(52, 100%, 50%);
|
|
}
|
|
|
|
100% {
|
|
background-color: hsl(0, 0%, 97%);
|
|
}
|
|
}
|
|
|
|
.ck .drupal-media__metadata-error {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 1px solid #e29700;
|
|
border-radius: 50%;
|
|
background: #fdf8ed;
|
|
}
|
|
.ck .drupal-media__metadata-error-icon {
|
|
display: block;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: url("../../../misc/icons/e29700/warning.svg") no-repeat center 4px;
|
|
background-size: 18px;
|
|
}
|
|
.ck .drupal-media__metadata-error .ck-tooltip {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
.ck .drupal-media__metadata-error:hover .ck-tooltip {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.ck .drupal-media__metadata-error:hover .ck-tooltip__text {
|
|
display: block;
|
|
width: 240px;
|
|
}
|
|
|
|
.ck.ck-media-alternative-text-form {
|
|
min-width: 300px;
|
|
max-width: 600px;
|
|
padding: 0;
|
|
}
|
|
.ck.ck-media-alternative-text-form .ck-labeled-field-view,
|
|
.ck.ck-media-alternative-text-form .ck-media-alternative-text-form__default-alt-text {
|
|
margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
|
|
}
|
|
.ck.ck-media-alternative-text-form .ck-labeled-field-view .ck-input-text {
|
|
width: 100%;
|
|
}
|
|
|
|
.ck.ck-media-alternative-text-form .ck-button {
|
|
width: 50%;
|
|
margin: var(--ck-spacing-large) 0 0 0;
|
|
padding: var(--ck-spacing-standard);
|
|
border: 0;
|
|
border-top: 1px solid var(--ck-color-base-border);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.ck.ck .ck-media-alternative-text-form__default-alt-text-label {
|
|
font-weight: bold;
|
|
}
|
|
.ck.ck .ck-media-alternative-text-form__default-alt-text-label,
|
|
.ck.ck .ck-media-alternative-text-form__default-alt-text-value {
|
|
white-space: normal;
|
|
}
|