78 lines
1.6 KiB
CSS
78 lines
1.6 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;
|
|
margin: 0.9em auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
}
|