You are here

Home » API reference » Varbase Media 9.0.x

varbase_media.common_logged.css in Varbase Media 9.0.x

Same filename and directory in other branches
  1. 8.7 css/varbase_media.common_logged.css
  2. 8.4 css/varbase_media.common_logged.css
  3. 8.5 css/varbase_media.common_logged.css
  4. 8.6 css/varbase_media.common_logged.css
.entity-select-dialog #entity-embed-dialog-form .form-type-radio {
  display: block;
}

.entity-select-dialog #entity-embed-dialog-form .form-type-radio label:after {
  content: "";
}

.entity-select-dialog #entity-embed-dialog-form .radio input[type="radio"],
.entity-select-dialog #entity-embed-dialog-form .checkbox input[type="radio"] {
  margin-right: 5px;
}

.entity-select-dialog #entity-embed-dialog-form .input-group .select-wrapper:first-child .form-control:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.entity-select-dialog #entity-embed-dialog-form .form-item-attributes-data-entity-embed-display .input-group-addon {
  display: none;
}

.editor-image-dialog #editor-image-dialog-form .form-type-radio {
  display: block;
}

.editor-image-dialog #editor-image-dialog-form .form-type-radio label:after {
  content: "";
}

.editor-image-dialog #editor-image-dialog-form .radio input[type="radio"],
.editor-image-dialog #editor-image-dialog-form .checkbox input[type="radio"] {
  margin-right: 5px;
}

.editor-image-dialog #editor-image-dialog-form .input-group .select-wrapper:first-child .form-control:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.editor-image-dialog #editor-image-dialog-form .form-item-attributes-data-entity-embed-display .input-group-addon {
  display: none;
}

.cke_widget_wrapper .align-left {
  margin: 0 1rem 1rem 0;
}

.cke_widget_wrapper .align-left figcaption {
  text-align: center;
}

.cke_widget_wrapper .align-right {
  margin: 0 0 1rem 1rem;
}

.cke_widget_wrapper .align-right figcaption {
  text-align: center;
}

.cke_widget_wrapper .align-center figcaption {
  text-align: center;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list#edit-selected .item-container {
  width: 48vw !important;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container {
  position: relative;
  width: 150px !important;
  height: 150px !important;
  text-align: center;
  vertical-align: middle;
  background: #000;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container .contextual-region {
  position: initial;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container .field--name-name {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 3px;
  left: 0;
  display: none;
  margin: 0;
  padding: 0.5em;
  word-break: break-all;
  opacity: 1;
  color: #fff;
  background: #000;
  font-size: 9px;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover .field--name-name {
  display: block;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover input,
body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover button {
  display: block;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input,
body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container button {
  position: absolute;
  z-index: 4;
  top: 0;
  display: none;
  width: 30px;
  height: 30px;
  margin: 5px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0;
  background: transparent;
  background-color: transparent;
  font-size: 0;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-edit-button"],
body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container button[id*="-edit-button"] {
  right: auto;
  left: 0;
  filter: invert(100%) !important;
  background-image: url("../images/pencil-square-o.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-remove-button"],
body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container button[id*="-remove-button"] {
  right: 0;
  left: auto;
  filter: invert(75%) !important;
  background-image: url("../images/times-circle-o.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%;
}

body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container img.image-style-field-preview {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: auto;
}

body .views-view-grid .views-col {
  width: 48vw;
}

body #edit-selected.entities-list .item-container {
  width: 48vw;
}

@media screen and (min-width: 576px) {
  body .views-view-grid .views-col {
    width: 24vw;
  }
  body #edit-selected.entities-list .item-container {
    width: 24vw;
  }
}

@media screen and (min-width: 768px) {
  body .views-view-grid .views-col {
    width: 24vw;
  }
  body #edit-selected.entities-list .item-container {
    width: 24vw;
  }
}

@media screen and (min-width: 992px) {
  body .views-view-grid .views-col {
    width: 16vw;
  }
  body #edit-selected.entities-list .item-container {
    width: 16vw;
  }
}

@media screen and (min-width: 1200px) {
  body .views-view-grid .views-col {
    width: 16vw;
  }
  body #edit-selected.entities-list .item-container {
    width: 16vw;
  }
}

body #edit-selected.entities-list {
  clear: both;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 5px;
  padding: 5px;
  white-space: nowrap;
  background: #efefef;
}

body #edit-selected.entities-list .item-container {
  position: relative;
  display: inline-block !important;
  width: 150px !important;
  height: 110px !important;
  text-align: center;
  background: #000;
}

body #edit-selected.entities-list .item-container .contextual-region {
  position: initial;
}

body #edit-selected.entities-list .item-container .field--name-name {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  display: none;
  overflow: hidden;
  max-width: 75ch;
  margin: 0;
  padding: 0.5em;
  word-break: break-all;
  opacity: 1;
  color: #fff;
  background: #000;
  font-size: 9px;
}

body #edit-selected.entities-list .item-container:hover .field--name-name {
  display: block;
}

body #edit-selected.entities-list .item-container:hover input,
body #edit-selected.entities-list .item-container:hover button {
  display: block;
}

body #edit-selected.entities-list .item-container input,
body #edit-selected.entities-list .item-container button {
  position: absolute;
  top: 0;
  display: none;
  width: 30px;
  height: 30px;
  margin: 5px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0;
  background: transparent;
  background-color: transparent;
  font-size: 0;
}

body #edit-selected.entities-list .item-container input[id*="-edit-button"],
body #edit-selected.entities-list .item-container button[id*="-edit-button"] {
  right: auto;
  left: 0;
  filter: invert(100%) !important;
  background-image: url("../images/pencil-square-o.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%;
}

body #edit-selected.entities-list .item-container input[id*="-remove-button"],
body #edit-selected.entities-list .item-container button[id*="-remove-button"] {
  right: 0;
  left: auto;
  filter: invert(75%) !important;
  background-image: url("../images/times-circle-o.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%;
}

body #edit-selected.entities-list .item-container img.image-style-field-preview {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: auto;
}

body #edit-selected.entities-list .media--type-video-embed,
body #edit-selected.entities-list .media--type-remote-video,
body #edit-selected.entities-list .media--type-video,
body #edit-selected.entities-list .video-player-icon {
  position: initial;
}

html[dir="rtl"] body #edit-selected.entities-list .item-container input[id*="-edit-button"] {
  right: 0;
  left: auto;
}

html[dir="rtl"] body #edit-selected.entities-list .item-container input[id*="-remove-button"] {
  right: auto;
  left: 0;
}

.entity-embed-dialog-step--embed > .form-item-entity {
  float: right;
  text-align: center;
}

.entity-embed-dialog-step--embed > .form-item-entity .field--type-image img {
  width: 200px;
}

html[dir="rtl"] .entity-embed-dialog-step--embed > .form-item-entity {
  float: left;
}

.entity-browser-form div#ief-dropzone-upload > div {
  margin: 0 15px 15px 15px;
  padding: 15px;
  border: 2px dashed rgba(107, 107, 107, 0.65);
  border-radius: 20px;
}

.entity-browser-form div#ief-dropzone-upload > div .image-widget-data {
  float: left;
  width: 70%;
}

.entity-browser-form .entity-browser-generic-embed div .varbase-video-player {
  width: 100%;
}

.entity-browser-form .entity-browser-generic-embed div .varbase-video-player iframe {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 576px) {
  .entity-browser-form .entity-browser-generic-embed div .varbase-video-player {
    float: left;
    width: 42%;
    margin-right: 30px;
  }
  .entity-browser-form .entity-browser-generic-embed div .varbase-video-player iframe {
    height: 300px;
  }
  .entity-browser-form .entity-browser-generic-embed div div[data-drupal-selector*="edit-preview"] {
    float: right;
    width: 42%;
  }
}

@media screen and (min-width: 768px) {
  .entity-browser-form .entity-browser-generic-embed div .varbase-video-player {
    float: left;
    width: 42%;
    margin-right: 30px;
  }
  .entity-browser-form .entity-browser-generic-embed div .varbase-video-player iframe {
    height: 300px;
  }
  .entity-browser-form .entity-browser-generic-embed div div[data-drupal-selector*="edit-preview"] {
    float: right;
    width: 42%;
  }
}

a.entity-browser-handle.entity-browser-iframe {
  display: block;
  margin: 15px 0;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #0074bd;
  font-size: 1.3em;
  font-weight: bold;
}

a.entity-browser-handle.entity-browser-iframe:hover {
  text-decoration: none;
}

form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .image-preview {
  float: right;
}

form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .image-widget-data {
  float: none;
}

form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget:after {
  display: none;
}

form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .file {
  display: none;
  float: right;
}

form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .file-size {
  display: none;
}

form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .button {
  float: right;
  margin-right: 4%;
}

form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > label {
  display: none;
}

html[dir="rtl"] form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget .image-preview {
  float: left;
}

html[dir="rtl"] form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .button {
  float: left;
  margin-left: 4%;
}

form.media-form .form-item-field-source {
  float: left;
  margin-right: 1.3rem;
}

html[dir="rtl"] form.media-form .form-item-field-source {
  float: right;
  margin-right: auto;
  margin-left: 1.5rem;
}

[class^="entity-browser-"] .field--name-revision-log-message {
  display: none;
}

.gallery-thumbnail {
  z-index: 0;
  display: flex;
  overflow: hidden;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  background-color: #ebebeb;
}

.gallery-thumbnail .field--name-thumbnail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: 170px !important;
  padding: 3%;
}

.gallery-thumbnail .field--name-thumbnail img {
  width: 42% !important;
  height: auto !important;
  margin: 0;
  padding: 1px;
}

.editor-media-browser .gallery-thumbnail {
  width: 180px;
  height: 136px;
}

.editor-media-browser .gallery-thumbnail .field--name-thumbnail {
  padding: 5%;
}

.editor-media-browser .gallery-thumbnail .field--name-thumbnail img {
  width: 33%;
}

.entity-browser-editor-gallery-browser-form .gallery-thumbnail {
  width: 180px;
  height: 180px;
}

.entity-browser-editor-gallery-browser-form .gallery-thumbnail .field--name-thumbnail {
  padding: 5%;
}

.entity-browser-editor-gallery-browser-form .gallery-thumbnail .field--name-thumbnail img {
  width: 45%;
}

.media--view-mode-field-preview .gallery-thumbnail {
  width: 150px;
  height: 150px;
  background-color: #000;
}

.media--view-mode-field-preview .video-player-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  max-height: 55%;
  content: "";
  cursor: pointer;
  transform: translate(-50%, -50%);
  background: url(../images/play.svg) no-repeat center center;
  font-size: 15%;
}

.media--view-mode-field-preview .video-player-icon:hover:after {
  opacity: 0.75;
}

.media--view-mode-field-preview [dir="rtl"] .video-player-icon.js-video-player-icon {
  right: 0;
  left: auto;
}

.media-library-item__attributes {
  z-index: 1;
  width: 100%;
}

div[data-drupal-selector^="edit-inline-entity-form-field-media-gallery-current"] {
  display: none;
}

details[id^="edit-field-media-gallery-"] summary {
  display: none;
}

details[id^="edit-field-media-gallery-"] .details-wrapper {
  margin-top: 0;
}

.gallery-entity-embed-dialog-step--embed {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-entity-embed-dialog-step--embed .media-library-item {
  margin: 20px;
}

.cke_widget_drupalmedia drupal-media .caption {
  width: 100%;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="original"] {
  width: 100%;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="original"][data-align=center] {
  margin-right: 0;
  margin-left: 0;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="large"] {
  width: 100%;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="large"][data-align=center] {
  margin-right: 0;
  margin-left: 0;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="medium"] {
  width: 50%;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="medium"][data-align=center] {
  margin-right: 25%;
  margin-left: 25%;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="small"] {
  width: 25%;
}

.cke_widget_drupalmedia drupal-media[data-view-mode="small"][data-align=center] {
  margin-right: 32%;
  margin-left: 32%;
}

.cke_widget_drupalmedia drupal-media[data-align=left] {
  display: inline-block;
  float: left;
  margin: 0 1rem 1rem 0;
}

.cke_widget_drupalmedia drupal-media[data-align=left] figcaption {
  text-align: center;
}

.cke_widget_drupalmedia drupal-media[data-align=right] {
  display: inline-block;
  float: right;
  margin: 0 0 1rem 1rem;
}

.cke_widget_drupalmedia drupal-media[data-align=right] figcaption {
  text-align: center;
}

.cke_widget_drupalmedia drupal-media .media-library-item__edit {
  position: absolute;
  z-index: 1000;
}

.cke_widget_drupalmedia drupal-media .blazy.blazy--field-media-cover-image {
  position: absolute !important;
}

.cke_widget_drupalmedia drupal-media .media.media--type-remote-video,
.cke_widget_drupalmedia drupal-media .media.media--type-video {
  position: absolute;
  width: 100%;
}

.cke_widget_drupalmedia drupal-media .media.media--type-remote-video picture,
.cke_widget_drupalmedia drupal-media .media.media--type-remote-video img,
.cke_widget_drupalmedia drupal-media .media.media--type-video picture,
.cke_widget_drupalmedia drupal-media .media.media--type-video img {
  width: 100%;
}

.cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon,
.cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon {
  position: relative;
}

.cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon.js-video-player-icon,
.cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon.js-video-player-icon {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
}

.cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon:after,
.cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  max-height: 55%;
  content: "";
  cursor: pointer;
  transform: translate(-50%, -50%);
  background: url(../images/play.svg) no-repeat center center;
  font-size: 15%;
}

.cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon:hover:after,
.cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon:hover:after {
  opacity: 0.75;
}

@media screen and (min-width: 761rem) {
  .cke_widget_drupalmedia drupal-media .media.media--type-remote-video,
  .cke_widget_drupalmedia drupal-media .media.media--type-video {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }
}

File

css/varbase_media.common_logged.css
View source 
  1. .entity-select-dialog #entity-embed-dialog-form .form-type-radio {

  2.   display: block;

  3. }

  4. 

  5. .entity-select-dialog #entity-embed-dialog-form .form-type-radio label:after {

  6.   content: "";

  7. }

  8. 

  9. .entity-select-dialog #entity-embed-dialog-form .radio input[type="radio"],

  10. .entity-select-dialog #entity-embed-dialog-form .checkbox input[type="radio"] {

  11.   margin-right: 5px;

  12. }

  13. 

  14. .entity-select-dialog #entity-embed-dialog-form .input-group .select-wrapper:first-child .form-control:first-child {

  15.   border-top-left-radius: 4px;

  16.   border-top-right-radius: 4px;

  17.   border-bottom-right-radius: 4px;

  18.   border-bottom-left-radius: 4px;

  19. }

  20. 

  21. .entity-select-dialog #entity-embed-dialog-form .form-item-attributes-data-entity-embed-display .input-group-addon {

  22.   display: none;

  23. }

  24. 

  25. .editor-image-dialog #editor-image-dialog-form .form-type-radio {

  26.   display: block;

  27. }

  28. 

  29. .editor-image-dialog #editor-image-dialog-form .form-type-radio label:after {

  30.   content: "";

  31. }

  32. 

  33. .editor-image-dialog #editor-image-dialog-form .radio input[type="radio"],

  34. .editor-image-dialog #editor-image-dialog-form .checkbox input[type="radio"] {

  35.   margin-right: 5px;

  36. }

  37. 

  38. .editor-image-dialog #editor-image-dialog-form .input-group .select-wrapper:first-child .form-control:first-child {

  39.   border-top-left-radius: 4px;

  40.   border-top-right-radius: 4px;

  41.   border-bottom-right-radius: 4px;

  42.   border-bottom-left-radius: 4px;

  43. }

  44. 

  45. .editor-image-dialog #editor-image-dialog-form .form-item-attributes-data-entity-embed-display .input-group-addon {

  46.   display: none;

  47. }

  48. 

  49. .cke_widget_wrapper .align-left {

  50.   margin: 0 1rem 1rem 0;

  51. }

  52. 

  53. .cke_widget_wrapper .align-left figcaption {

  54.   text-align: center;

  55. }

  56. 

  57. .cke_widget_wrapper .align-right {

  58.   margin: 0 0 1rem 1rem;

  59. }

  60. 

  61. .cke_widget_wrapper .align-right figcaption {

  62.   text-align: center;

  63. }

  64. 

  65. .cke_widget_wrapper .align-center figcaption {

  66.   text-align: center;

  67. }

  68. 

  69. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list#edit-selected .item-container {

  70.   width: 48vw !important;

  71. }

  72. 

  73. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container {

  74.   position: relative;

  75.   width: 150px !important;

  76.   height: 150px !important;

  77.   text-align: center;

  78.   vertical-align: middle;

  79.   background: #000;

  80. }

  81. 

  82. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container .contextual-region {

  83.   position: initial;

  84. }

  85. 

  86. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container .field--name-name {

  87.   position: absolute;

  88.   z-index: 5;

  89.   right: 0;

  90.   bottom: 3px;

  91.   left: 0;

  92.   display: none;

  93.   margin: 0;

  94.   padding: 0.5em;

  95.   word-break: break-all;

  96.   opacity: 1;

  97.   color: #fff;

  98.   background: #000;

  99.   font-size: 9px;

  100. }

  101. 

  102. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover .field--name-name {

  103.   display: block;

  104. }

  105. 

  106. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover input,

  107. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover button {

  108.   display: block;

  109. }

  110. 

  111. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input,

  112. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container button {

  113.   position: absolute;

  114.   z-index: 4;

  115.   top: 0;

  116.   display: none;

  117.   width: 30px;

  118.   height: 30px;

  119.   margin: 5px;

  120.   padding: 0;

  121.   cursor: pointer;

  122.   opacity: 1;

  123.   border: 0;

  124.   background: transparent;

  125.   background-color: transparent;

  126.   font-size: 0;

  127. }

  128. 

  129. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-edit-button"],

  130. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container button[id*="-edit-button"] {

  131.   right: auto;

  132.   left: 0;

  133.   filter: invert(100%) !important;

  134.   background-image: url("../images/pencil-square-o.svg");

  135.   background-repeat: no-repeat;

  136.   background-position: left top;

  137.   background-size: 100%;

  138. }

  139. 

  140. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-remove-button"],

  141. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container button[id*="-remove-button"] {

  142.   right: 0;

  143.   left: auto;

  144.   filter: invert(75%) !important;

  145.   background-image: url("../images/times-circle-o.svg");

  146.   background-repeat: no-repeat;

  147.   background-position: left top;

  148.   background-size: 100%;

  149. }

  150. 

  151. body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container img.image-style-field-preview {

  152.   position: absolute;

  153.   top: 0;

  154.   right: 0;

  155.   bottom: 0;

  156.   left: 0;

  157.   overflow: auto;

  158.   margin: auto;

  159. }

  160. 

  161. body .views-view-grid .views-col {

  162.   width: 48vw;

  163. }

  164. 

  165. body #edit-selected.entities-list .item-container {

  166.   width: 48vw;

  167. }

  168. 

  169. @media screen and (min-width: 576px) {

  170.   body .views-view-grid .views-col {

  171.     width: 24vw;

  172.   }

  173.   body #edit-selected.entities-list .item-container {

  174.     width: 24vw;

  175.   }

  176. }

  177. 

  178. @media screen and (min-width: 768px) {

  179.   body .views-view-grid .views-col {

  180.     width: 24vw;

  181.   }

  182.   body #edit-selected.entities-list .item-container {

  183.     width: 24vw;

  184.   }

  185. }

  186. 

  187. @media screen and (min-width: 992px) {

  188.   body .views-view-grid .views-col {

  189.     width: 16vw;

  190.   }

  191.   body #edit-selected.entities-list .item-container {

  192.     width: 16vw;

  193.   }

  194. }

  195. 

  196. @media screen and (min-width: 1200px) {

  197.   body .views-view-grid .views-col {

  198.     width: 16vw;

  199.   }

  200.   body #edit-selected.entities-list .item-container {

  201.     width: 16vw;

  202.   }

  203. }

  204. 

  205. body #edit-selected.entities-list {

  206.   clear: both;

  207.   overflow-x: auto;

  208.   overflow-y: hidden;

  209.   margin: 5px;

  210.   padding: 5px;

  211.   white-space: nowrap;

  212.   background: #efefef;

  213. }

  214. 

  215. body #edit-selected.entities-list .item-container {

  216.   position: relative;

  217.   display: inline-block !important;

  218.   width: 150px !important;

  219.   height: 110px !important;

  220.   text-align: center;

  221.   background: #000;

  222. }

  223. 

  224. body #edit-selected.entities-list .item-container .contextual-region {

  225.   position: initial;

  226. }

  227. 

  228. body #edit-selected.entities-list .item-container .field--name-name {

  229.   position: absolute;

  230.   right: 0;

  231.   bottom: 3px;

  232.   left: 0;

  233.   display: none;

  234.   overflow: hidden;

  235.   max-width: 75ch;

  236.   margin: 0;

  237.   padding: 0.5em;

  238.   word-break: break-all;

  239.   opacity: 1;

  240.   color: #fff;

  241.   background: #000;

  242.   font-size: 9px;

  243. }

  244. 

  245. body #edit-selected.entities-list .item-container:hover .field--name-name {

  246.   display: block;

  247. }

  248. 

  249. body #edit-selected.entities-list .item-container:hover input,

  250. body #edit-selected.entities-list .item-container:hover button {

  251.   display: block;

  252. }

  253. 

  254. body #edit-selected.entities-list .item-container input,

  255. body #edit-selected.entities-list .item-container button {

  256.   position: absolute;

  257.   top: 0;

  258.   display: none;

  259.   width: 30px;

  260.   height: 30px;

  261.   margin: 5px;

  262.   padding: 0;

  263.   cursor: pointer;

  264.   opacity: 1;

  265.   border: 0;

  266.   background: transparent;

  267.   background-color: transparent;

  268.   font-size: 0;

  269. }

  270. 

  271. body #edit-selected.entities-list .item-container input[id*="-edit-button"],

  272. body #edit-selected.entities-list .item-container button[id*="-edit-button"] {

  273.   right: auto;

  274.   left: 0;

  275.   filter: invert(100%) !important;

  276.   background-image: url("../images/pencil-square-o.svg");

  277.   background-repeat: no-repeat;

  278.   background-position: left top;

  279.   background-size: 100%;

  280. }

  281. 

  282. body #edit-selected.entities-list .item-container input[id*="-remove-button"],

  283. body #edit-selected.entities-list .item-container button[id*="-remove-button"] {

  284.   right: 0;

  285.   left: auto;

  286.   filter: invert(75%) !important;

  287.   background-image: url("../images/times-circle-o.svg");

  288.   background-repeat: no-repeat;

  289.   background-position: left top;

  290.   background-size: 100%;

  291. }

  292. 

  293. body #edit-selected.entities-list .item-container img.image-style-field-preview {

  294.   position: absolute;

  295.   top: 0;

  296.   right: 0;

  297.   bottom: 0;

  298.   left: 0;

  299.   overflow: auto;

  300.   margin: auto;

  301. }

  302. 

  303. body #edit-selected.entities-list .media--type-video-embed,

  304. body #edit-selected.entities-list .media--type-remote-video,

  305. body #edit-selected.entities-list .media--type-video,

  306. body #edit-selected.entities-list .video-player-icon {

  307.   position: initial;

  308. }

  309. 

  310. html[dir="rtl"] body #edit-selected.entities-list .item-container input[id*="-edit-button"] {

  311.   right: 0;

  312.   left: auto;

  313. }

  314. 

  315. html[dir="rtl"] body #edit-selected.entities-list .item-container input[id*="-remove-button"] {

  316.   right: auto;

  317.   left: 0;

  318. }

  319. 

  320. .entity-embed-dialog-step--embed > .form-item-entity {

  321.   float: right;

  322.   text-align: center;

  323. }

  324. 

  325. .entity-embed-dialog-step--embed > .form-item-entity .field--type-image img {

  326.   width: 200px;

  327. }

  328. 

  329. html[dir="rtl"] .entity-embed-dialog-step--embed > .form-item-entity {

  330.   float: left;

  331. }

  332. 

  333. .entity-browser-form div#ief-dropzone-upload > div {

  334.   margin: 0 15px 15px 15px;

  335.   padding: 15px;

  336.   border: 2px dashed rgba(107, 107, 107, 0.65);

  337.   border-radius: 20px;

  338. }

  339. 

  340. .entity-browser-form div#ief-dropzone-upload > div .image-widget-data {

  341.   float: left;

  342.   width: 70%;

  343. }

  344. 

  345. .entity-browser-form .entity-browser-generic-embed div .varbase-video-player {

  346.   width: 100%;

  347. }

  348. 

  349. .entity-browser-form .entity-browser-generic-embed div .varbase-video-player iframe {

  350.   top: 0;

  351.   right: 0;

  352.   bottom: 0;

  353.   left: 0;

  354.   width: 100%;

  355.   height: 100%;

  356.   margin: 0;

  357.   padding: 0;

  358. }

  359. 

  360. @media screen and (min-width: 576px) {

  361.   .entity-browser-form .entity-browser-generic-embed div .varbase-video-player {

  362.     float: left;

  363.     width: 42%;

  364.     margin-right: 30px;

  365.   }

  366.   .entity-browser-form .entity-browser-generic-embed div .varbase-video-player iframe {

  367.     height: 300px;

  368.   }

  369.   .entity-browser-form .entity-browser-generic-embed div div[data-drupal-selector*="edit-preview"] {

  370.     float: right;

  371.     width: 42%;

  372.   }

  373. }

  374. 

  375. @media screen and (min-width: 768px) {

  376.   .entity-browser-form .entity-browser-generic-embed div .varbase-video-player {

  377.     float: left;

  378.     width: 42%;

  379.     margin-right: 30px;

  380.   }

  381.   .entity-browser-form .entity-browser-generic-embed div .varbase-video-player iframe {

  382.     height: 300px;

  383.   }

  384.   .entity-browser-form .entity-browser-generic-embed div div[data-drupal-selector*="edit-preview"] {

  385.     float: right;

  386.     width: 42%;

  387.   }

  388. }

  389. 

  390. a.entity-browser-handle.entity-browser-iframe {

  391.   display: block;

  392.   margin: 15px 0;

  393.   padding: 15px;

  394.   text-align: center;

  395.   text-decoration: none;

  396.   color: #fff;

  397.   background: #0074bd;

  398.   font-size: 1.3em;

  399.   font-weight: bold;

  400. }

  401. 

  402. a.entity-browser-handle.entity-browser-iframe:hover {

  403.   text-decoration: none;

  404. }

  405. 

  406. form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .image-preview {

  407.   float: right;

  408. }

  409. 

  410. form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .image-widget-data {

  411.   float: none;

  412. }

  413. 

  414. form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget:after {

  415.   display: none;

  416. }

  417. 

  418. form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .file {

  419.   display: none;

  420.   float: right;

  421. }

  422. 

  423. form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .file-size {

  424.   display: none;

  425. }

  426. 

  427. form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .button {

  428.   float: right;

  429.   margin-right: 4%;

  430. }

  431. 

  432. form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > label {

  433.   display: none;

  434. }

  435. 

  436. html[dir="rtl"] form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget .image-preview {

  437.   float: left;

  438. }

  439. 

  440. html[dir="rtl"] form.media-image-edit-form > .field--type-image .field--widget-image-image > div > div > .image-widget > .button {

  441.   float: left;

  442.   margin-left: 4%;

  443. }

  444. 

  445. form.media-form .form-item-field-source {

  446.   float: left;

  447.   margin-right: 1.3rem;

  448. }

  449. 

  450. html[dir="rtl"] form.media-form .form-item-field-source {

  451.   float: right;

  452.   margin-right: auto;

  453.   margin-left: 1.5rem;

  454. }

  455. 

  456. [class^="entity-browser-"] .field--name-revision-log-message {

  457.   display: none;

  458. }

  459. 

  460. .gallery-thumbnail {

  461.   z-index: 0;

  462.   display: flex;

  463.   overflow: hidden;

  464.   justify-content: center;

  465.   width: 100%;

  466.   cursor: pointer;

  467.   background-color: #ebebeb;

  468. }

  469. 

  470. .gallery-thumbnail .field--name-thumbnail {

  471.   display: flex;

  472.   flex-direction: row;

  473.   flex-wrap: wrap;

  474.   justify-content: center;

  475.   height: 170px !important;

  476.   padding: 3%;

  477. }

  478. 

  479. .gallery-thumbnail .field--name-thumbnail img {

  480.   width: 42% !important;

  481.   height: auto !important;

  482.   margin: 0;

  483.   padding: 1px;

  484. }

  485. 

  486. .editor-media-browser .gallery-thumbnail {

  487.   width: 180px;

  488.   height: 136px;

  489. }

  490. 

  491. .editor-media-browser .gallery-thumbnail .field--name-thumbnail {

  492.   padding: 5%;

  493. }

  494. 

  495. .editor-media-browser .gallery-thumbnail .field--name-thumbnail img {

  496.   width: 33%;

  497. }

  498. 

  499. .entity-browser-editor-gallery-browser-form .gallery-thumbnail {

  500.   width: 180px;

  501.   height: 180px;

  502. }

  503. 

  504. .entity-browser-editor-gallery-browser-form .gallery-thumbnail .field--name-thumbnail {

  505.   padding: 5%;

  506. }

  507. 

  508. .entity-browser-editor-gallery-browser-form .gallery-thumbnail .field--name-thumbnail img {

  509.   width: 45%;

  510. }

  511. 

  512. .media--view-mode-field-preview .gallery-thumbnail {

  513.   width: 150px;

  514.   height: 150px;

  515.   background-color: #000;

  516. }

  517. 

  518. .media--view-mode-field-preview .video-player-icon:after {

  519.   position: absolute;

  520.   top: 50%;

  521.   left: 50%;

  522.   width: 72px;

  523.   height: 72px;

  524.   max-height: 55%;

  525.   content: "";

  526.   cursor: pointer;

  527.   transform: translate(-50%, -50%);

  528.   background: url(../images/play.svg) no-repeat center center;

  529.   font-size: 15%;

  530. }

  531. 

  532. .media--view-mode-field-preview .video-player-icon:hover:after {

  533.   opacity: 0.75;

  534. }

  535. 

  536. .media--view-mode-field-preview [dir="rtl"] .video-player-icon.js-video-player-icon {

  537.   right: 0;

  538.   left: auto;

  539. }

  540. 

  541. .media-library-item__attributes {

  542.   z-index: 1;

  543.   width: 100%;

  544. }

  545. 

  546. div[data-drupal-selector^="edit-inline-entity-form-field-media-gallery-current"] {

  547.   display: none;

  548. }

  549. 

  550. details[id^="edit-field-media-gallery-"] summary {

  551.   display: none;

  552. }

  553. 

  554. details[id^="edit-field-media-gallery-"] .details-wrapper {

  555.   margin-top: 0;

  556. }

  557. 

  558. .gallery-entity-embed-dialog-step--embed {

  559.   display: flex;

  560.   align-items: center;

  561.   justify-content: center;

  562. }

  563. 

  564. .gallery-entity-embed-dialog-step--embed .media-library-item {

  565.   margin: 20px;

  566. }

  567. 

  568. .cke_widget_drupalmedia drupal-media .caption {

  569.   width: 100%;

  570. }

  571. 

  572. .cke_widget_drupalmedia drupal-media[data-view-mode="original"] {

  573.   width: 100%;

  574. }

  575. 

  576. .cke_widget_drupalmedia drupal-media[data-view-mode="original"][data-align=center] {

  577.   margin-right: 0;

  578.   margin-left: 0;

  579. }

  580. 

  581. .cke_widget_drupalmedia drupal-media[data-view-mode="large"] {

  582.   width: 100%;

  583. }

  584. 

  585. .cke_widget_drupalmedia drupal-media[data-view-mode="large"][data-align=center] {

  586.   margin-right: 0;

  587.   margin-left: 0;

  588. }

  589. 

  590. .cke_widget_drupalmedia drupal-media[data-view-mode="medium"] {

  591.   width: 50%;

  592. }

  593. 

  594. .cke_widget_drupalmedia drupal-media[data-view-mode="medium"][data-align=center] {

  595.   margin-right: 25%;

  596.   margin-left: 25%;

  597. }

  598. 

  599. .cke_widget_drupalmedia drupal-media[data-view-mode="small"] {

  600.   width: 25%;

  601. }

  602. 

  603. .cke_widget_drupalmedia drupal-media[data-view-mode="small"][data-align=center] {

  604.   margin-right: 32%;

  605.   margin-left: 32%;

  606. }

  607. 

  608. .cke_widget_drupalmedia drupal-media[data-align=left] {

  609.   display: inline-block;

  610.   float: left;

  611.   margin: 0 1rem 1rem 0;

  612. }

  613. 

  614. .cke_widget_drupalmedia drupal-media[data-align=left] figcaption {

  615.   text-align: center;

  616. }

  617. 

  618. .cke_widget_drupalmedia drupal-media[data-align=right] {

  619.   display: inline-block;

  620.   float: right;

  621.   margin: 0 0 1rem 1rem;

  622. }

  623. 

  624. .cke_widget_drupalmedia drupal-media[data-align=right] figcaption {

  625.   text-align: center;

  626. }

  627. 

  628. .cke_widget_drupalmedia drupal-media .media-library-item__edit {

  629.   position: absolute;

  630.   z-index: 1000;

  631. }

  632. 

  633. .cke_widget_drupalmedia drupal-media .blazy.blazy--field-media-cover-image {

  634.   position: absolute !important;

  635. }

  636. 

  637. .cke_widget_drupalmedia drupal-media .media.media--type-remote-video,

  638. .cke_widget_drupalmedia drupal-media .media.media--type-video {

  639.   position: absolute;

  640.   width: 100%;

  641. }

  642. 

  643. .cke_widget_drupalmedia drupal-media .media.media--type-remote-video picture,

  644. .cke_widget_drupalmedia drupal-media .media.media--type-remote-video img,

  645. .cke_widget_drupalmedia drupal-media .media.media--type-video picture,

  646. .cke_widget_drupalmedia drupal-media .media.media--type-video img {

  647.   width: 100%;

  648. }

  649. 

  650. .cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon,

  651. .cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon {

  652.   position: relative;

  653. }

  654. 

  655. .cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon.js-video-player-icon,

  656. .cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon.js-video-player-icon {

  657.   position: absolute;

  658.   z-index: 3;

  659.   top: 0;

  660.   right: 0;

  661.   left: 0;

  662.   margin: 0;

  663.   cursor: pointer;

  664. }

  665. 

  666. .cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon:after,

  667. .cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon:after {

  668.   position: absolute;

  669.   top: 50%;

  670.   left: 50%;

  671.   width: 72px;

  672.   height: 72px;

  673.   max-height: 55%;

  674.   content: "";

  675.   cursor: pointer;

  676.   transform: translate(-50%, -50%);

  677.   background: url(../images/play.svg) no-repeat center center;

  678.   font-size: 15%;

  679. }

  680. 

  681. .cke_widget_drupalmedia drupal-media .media.media--type-remote-video .video-player-icon:hover:after,

  682. .cke_widget_drupalmedia drupal-media .media.media--type-video .video-player-icon:hover:after {

  683.   opacity: 0.75;

  684. }

  685. 

  686. @media screen and (min-width: 761rem) {

  687.   .cke_widget_drupalmedia drupal-media .media.media--type-remote-video,

  688.   .cke_widget_drupalmedia drupal-media .media.media--type-video {

  689.     width: -webkit-max-content;

  690.     width: -moz-max-content;

  691.     width: max-content;

  692.     min-width: 100%;

  693.   }

  694. }