You are here

Home » API reference » CKEditor Widgets 7

app.css in CKEditor Widgets 7 

* {
  box-sizing: border-box; }

.modal-backdrop {
  position: fixed !important;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 10999 !important;
  opacity: 0.5; }

.modal-holder {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 440px;
  width: 880px;
  margin-top: -220px;
  margin-left: -440px;
  background: transparent;
  z-index: 11000;
  padding: 30px 15px; }
  .modal-holder .modal-box {
    margin: 0 auto;
    width: 100%;
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    position: relative; }

@media screen and (min-width: 992px) {
  .modal-box {
    width: 50%;
    padding: 30px; } }

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(360deg); } }

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); }

  to {
    -moz-transform: rotate(360deg); } }

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

.angular-media-field .thumbnails {
  display: inline; }
.angular-media-field .thumbnail, .angular-media-field .placeholder-thumbnail {
  position: relative; }
  .angular-media-field .thumbnail .btn-action, .angular-media-field .placeholder-thumbnail .btn-action {
    display: none;
    top: 10px;
    position: absolute; }
    .angular-media-field .thumbnail .btn-action.thumbnail-edit, .angular-media-field .placeholder-thumbnail .btn-action.thumbnail-edit {
      left: 10px; }
    .angular-media-field .thumbnail .btn-action.thumbnail-remove, .angular-media-field .placeholder-thumbnail .btn-action.thumbnail-remove {
      right: 10px; }
  .angular-media-field .thumbnail:hover .btn-action, .angular-media-field .placeholder-thumbnail:hover .btn-action {
    display: block; }
.angular-media-field .thumbnail {
  width: 110px;
  height: 140px;
  margin: 5px;
  float: left; }
  .angular-media-field .thumbnail.active {
    border-color: #E9D24F;
    background-color: #E9D24F; }
  .angular-media-field .thumbnail img {
    max-width: 100%;
    max-height: 100px;
    height: auto;
    margin: 0 auto; }
  .angular-media-field .thumbnail .thumbnail-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    font-size: 0.9em;
    padding-top: 5px; }
  .angular-media-field .thumbnail .download-icon {
    font-size: 15px;
    color: #ccc; }
  .angular-media-field .thumbnail .or {
    margin: 0.5em 0 !important; }
  .angular-media-field .thumbnail .btn.media-select {
    display: block;
    position: relative;
    margin: 0 auto; }
.angular-media-field .clearfix {
  clear: both; }

.placeholder-thumbnail {
  min-height: 350px;
  background-color: #eee !important;
  border: none !important;
  text-align: center;
  font-size: 1.5em;
  display: none; }
  .placeholder-thumbnail.visible {
    display: block; }
  .placeholder-thumbnail .upload-text {
    margin-top: 100px; }
  .placeholder-thumbnail img {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    margin: 0 auto;
    width: auto; }

.thumbnail-icon {
  text-align: center;
  position: relative;
  width: 100px; }
  .thumbnail-icon.icon-lg {
    width: 100%; }
  .thumbnail-icon img {
    max-width: 100%;
    height: auto; }
  .thumbnail-icon .file-icon {
    font-size: 100px;
    color: #ccc; }
  .thumbnail-icon .file-icon-text {
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100px;
    font-size: 20px;
    font-weight: bold; }
  .thumbnail-icon.icon-lg .file-icon {
    font-size: 180px; }
  .thumbnail-icon.icon-lg .file-icon-text {
    width: 180px; }

.drop-zone, .thumbnail.drop-zone {
  border: 2px dashed #ccc;
  padding: 10px;
  text-align: center;
  position: relative;
  background-color: rgba(238, 238, 238, 0); }
  .drop-zone .or, .thumbnail.drop-zone .or {
    font-size: 0.8em;
    text-transform: uppercase;
    margin: 2em 0; }
  .drop-zone .drop-label, .thumbnail.drop-zone .drop-label {
    font-size: 1.3em;
    font-weight: bold; }
  .drop-zone .file-upload, .thumbnail.drop-zone .file-upload {
    margin: 0 auto; }
  .drop-zone .description, .thumbnail.drop-zone .description {
    color: #aaa;
    font-size: 0.9em;
    text-align: left;
    width: 85%;
    margin: 5px auto; }
  .drop-zone, .drop-zone > *, .thumbnail.drop-zone, .thumbnail.drop-zone > * {
    -webkit-transition: background ease-out 0.1s;
    -moz-transition: background ease-out 0.1s;
    transition: background ease-out 0.1s; }
  .drop-zone > *, .thumbnail.drop-zone > * {
    opacity: 1; }
  .drop-zone.upload-active, .thumbnail.drop-zone.upload-active {
    background-color: #eeeeee; }
    .drop-zone.upload-active > *, .thumbnail.drop-zone.upload-active > * {
      opacity: 0.5; }
    .drop-zone.upload-active:before, .thumbnail.drop-zone.upload-active:before {
      content: "\e031";
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      position: absolute;
      top: 50%;
      margin-top: -15px;
      left: 50%;
      margin-left: -15px;
      text-align: center;
      width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: 28px;
      -webkit-animation: spin 2s infinite linear;
      -moz-animation: spin 2s infinite linear;
      animation: spin 2s infinite linear;
      -webkit-transform-origin: 15px 14px;
      -moz-transform-origin: 15px 14px;
      -ms-transform-origin: 15px 14px;
      -o-transform-origin: 15px 14px;
      transform-origin: 15px 14px;
      z-index: 1; }

/*
  form {
    width: $modal-width;
    height: $modal-height;
    position: relative;

    select {
      max-width: 200px;
    }
  }
*/
.modal-box .modal-close {
  color: #ccc;
  right: 10px;
  position: absolute;
  z-index: 1010; }
.modal-box .preview {
  position: relative;
  display: block;
  max-width: 200px; }
  .modal-box .preview .preview-overlay {
    top: 20px;
    position: absolute;
    display: none;
    width: 100%;
    text-align: center; }
  .modal-box .preview.croppable {
    cursor: pointer; }
    .modal-box .preview.croppable:hover img {
      opacity: 0.5; }
    .modal-box .preview.croppable:hover .preview-overlay {
      display: block; }
.modal-box .edit-form .editable-item {
  height: auto;
  padding: 5px 0; }
.modal-box .edit-form .title {
  display: inline-block;
  font-weight: bold;
  padding-top: 5px;
  vertical-align: top;
  min-width: 90px; }
.modal-box .edit-form .editable {
  display: inline-block;
  padding-top: 5px;
  vertical-align: top; }
.modal-box .edit-form .editable-form {
  margin-left: 10px; }
.modal-box .image-crop {
  max-width: 500px; }
  .modal-box .image-crop .ng-jcrop {
    padding-bottom: 40px; }
    .modal-box .image-crop .ng-jcrop img.ng-jcrop-image {
      max-width: 100% !important;
      max-height: 500px !important;
      height: auto !important;
      margin: 0 auto; }
.modal-box .filters, .modal-box .browser {
  margin-top: 10px; }
.modal-box .browser {
  position: relative; }
  .modal-box .browser .scroll-wrapper {
    width: 800px;
    height: 400px;
    overflow-y: scroll;
    ms-overflow-x: hidden; }
  .modal-box .browser .left, .modal-box .browser .scroll-wrapper.active {
    width: 540px; }
  .modal-box .browser .thumbnail {
    cursor: pointer; }
  .modal-box .browser .sidebar {
    width: 250px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: white; }
    .modal-box .browser .sidebar h3, .modal-box .browser .sidebar h5 {
      margin: 0; }
    .modal-box .browser .sidebar .preview {
      text-align: center; }
      .modal-box .browser .sidebar .preview img {
        max-height: 200px;
        margin: 0 auto; }
  .modal-box .browser.upload .queue {
    margin-top: 5px;
    height: 185px;
    overflow-y: auto;
    margin-left: -30px; }
    .modal-box .browser.upload .queue .queue-item {
      padding: 7px 5px 7px 30px;
      cursor: pointer; }
      .modal-box .browser.upload .queue .queue-item.active {
        background-color: #F5F5F5; }
      .modal-box .browser.upload .queue .queue-item .file-thumb {
        float: right;
        margin-left: 5px; }
      .modal-box .browser.upload .queue .queue-item .file-name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        font-weight: bold; }
      .modal-box .browser.upload .queue .queue-item .file-size {
        float: left;
        margin-right: 5px; }
      .modal-box .browser.upload .queue .queue-item .progress {
        margin: 3px 5px;
        height: 12px; }
  .modal-box .browser.upload .file-details {
    background-color: #F5F5F5;
    padding: 10px;
    border-radius: 3px;
    min-height: 300px; }
.modal-box .bottom-left, .modal-box .bottom-right {
  position: absolute;
  bottom: 10px; }
  .modal-box .bottom-left.bottom-left, .modal-box .bottom-right.bottom-left {
    left: 10px; }
  .modal-box .bottom-left.bottom-right, .modal-box .bottom-right.bottom-right {
    right: 10px; }

/* Hack to fix issue with how item is added to page via fapi */
.field-widget-file-angular-media {
  margin-bottom: 2em; }
  .field-widget-file-angular-media .form-item {
    margin-bottom: 0; }

File

js/angular-media-app/app/css/app.css
View source 
  1. * {

  2.   box-sizing: border-box; }

  3. 

  4. .modal-backdrop {

  5.   position: fixed !important;

  6.   top: 0px;

  7.   left: 0px;

  8.   height: 100%;

  9.   width: 100%;

  10.   background: #000;

  11.   z-index: 10999 !important;

  12.   opacity: 0.5; }

  13. 

  14. .modal-holder {

  15.   position: fixed;

  16.   top: 50%;

  17.   left: 50%;

  18.   height: 440px;

  19.   width: 880px;

  20.   margin-top: -220px;

  21.   margin-left: -440px;

  22.   background: transparent;

  23.   z-index: 11000;

  24.   padding: 30px 15px; }

  25.   .modal-holder .modal-box {

  26.     margin: 0 auto;

  27.     width: 100%;

  28.     background: #fff;

  29.     padding: 15px;

  30.     border-radius: 4px;

  31.     box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);

  32.     position: relative; }

  33. 

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

  35.   .modal-box {

  36.     width: 50%;

  37.     padding: 30px; } }

  38. 

  39. @-webkit-keyframes spin {

  40.   from {

  41.     -webkit-transform: rotate(0deg); }

  42. 

  43.   to {

  44.     -webkit-transform: rotate(360deg); } }

  45. 

  46. @-moz-keyframes spin {

  47.   from {

  48.     -moz-transform: rotate(0deg); }

  49. 

  50.   to {

  51.     -moz-transform: rotate(360deg); } }

  52. 

  53. @keyframes spin {

  54.   from {

  55.     -webkit-transform: rotate(0deg);

  56.     -moz-transform: rotate(0deg);

  57.     -ms-transform: rotate(0deg);

  58.     -o-transform: rotate(0deg);

  59.     transform: rotate(0deg); }

  60. 

  61.   to {

  62.     -webkit-transform: rotate(360deg);

  63.     -moz-transform: rotate(360deg);

  64.     -ms-transform: rotate(360deg);

  65.     -o-transform: rotate(360deg);

  66.     transform: rotate(360deg); } }

  67. 

  68. .angular-media-field .thumbnails {

  69.   display: inline; }

  70. .angular-media-field .thumbnail, .angular-media-field .placeholder-thumbnail {

  71.   position: relative; }

  72.   .angular-media-field .thumbnail .btn-action, .angular-media-field .placeholder-thumbnail .btn-action {

  73.     display: none;

  74.     top: 10px;

  75.     position: absolute; }

  76.     .angular-media-field .thumbnail .btn-action.thumbnail-edit, .angular-media-field .placeholder-thumbnail .btn-action.thumbnail-edit {

  77.       left: 10px; }

  78.     .angular-media-field .thumbnail .btn-action.thumbnail-remove, .angular-media-field .placeholder-thumbnail .btn-action.thumbnail-remove {

  79.       right: 10px; }

  80.   .angular-media-field .thumbnail:hover .btn-action, .angular-media-field .placeholder-thumbnail:hover .btn-action {

  81.     display: block; }

  82. .angular-media-field .thumbnail {

  83.   width: 110px;

  84.   height: 140px;

  85.   margin: 5px;

  86.   float: left; }

  87.   .angular-media-field .thumbnail.active {

  88.     border-color: #E9D24F;

  89.     background-color: #E9D24F; }

  90.   .angular-media-field .thumbnail img {

  91.     max-width: 100%;

  92.     max-height: 100px;

  93.     height: auto;

  94.     margin: 0 auto; }

  95.   .angular-media-field .thumbnail .thumbnail-title {

  96.     text-overflow: ellipsis;

  97.     white-space: nowrap;

  98.     overflow: hidden;

  99.     display: block;

  100.     font-size: 0.9em;

  101.     padding-top: 5px; }

  102.   .angular-media-field .thumbnail .download-icon {

  103.     font-size: 15px;

  104.     color: #ccc; }

  105.   .angular-media-field .thumbnail .or {

  106.     margin: 0.5em 0 !important; }

  107.   .angular-media-field .thumbnail .btn.media-select {

  108.     display: block;

  109.     position: relative;

  110.     margin: 0 auto; }

  111. .angular-media-field .clearfix {

  112.   clear: both; }

  113. 

  114. .placeholder-thumbnail {

  115.   min-height: 350px;

  116.   background-color: #eee !important;

  117.   border: none !important;

  118.   text-align: center;

  119.   font-size: 1.5em;

  120.   display: none; }

  121.   .placeholder-thumbnail.visible {

  122.     display: block; }

  123.   .placeholder-thumbnail .upload-text {

  124.     margin-top: 100px; }

  125.   .placeholder-thumbnail img {

  126.     max-width: 100%;

  127.     height: auto;

  128.     max-height: 500px;

  129.     margin: 0 auto;

  130.     width: auto; }

  131. 

  132. .thumbnail-icon {

  133.   text-align: center;

  134.   position: relative;

  135.   width: 100px; }

  136.   .thumbnail-icon.icon-lg {

  137.     width: 100%; }

  138.   .thumbnail-icon img {

  139.     max-width: 100%;

  140.     height: auto; }

  141.   .thumbnail-icon .file-icon {

  142.     font-size: 100px;

  143.     color: #ccc; }

  144.   .thumbnail-icon .file-icon-text {

  145.     text-transform: uppercase;

  146.     color: #fff;

  147.     position: absolute;

  148.     bottom: 10px;

  149.     left: 0;

  150.     width: 100px;

  151.     font-size: 20px;

  152.     font-weight: bold; }

  153.   .thumbnail-icon.icon-lg .file-icon {

  154.     font-size: 180px; }

  155.   .thumbnail-icon.icon-lg .file-icon-text {

  156.     width: 180px; }

  157. 

  158. .drop-zone, .thumbnail.drop-zone {

  159.   border: 2px dashed #ccc;

  160.   padding: 10px;

  161.   text-align: center;

  162.   position: relative;

  163.   background-color: rgba(238, 238, 238, 0); }

  164.   .drop-zone .or, .thumbnail.drop-zone .or {

  165.     font-size: 0.8em;

  166.     text-transform: uppercase;

  167.     margin: 2em 0; }

  168.   .drop-zone .drop-label, .thumbnail.drop-zone .drop-label {

  169.     font-size: 1.3em;

  170.     font-weight: bold; }

  171.   .drop-zone .file-upload, .thumbnail.drop-zone .file-upload {

  172.     margin: 0 auto; }

  173.   .drop-zone .description, .thumbnail.drop-zone .description {

  174.     color: #aaa;

  175.     font-size: 0.9em;

  176.     text-align: left;

  177.     width: 85%;

  178.     margin: 5px auto; }

  179.   .drop-zone, .drop-zone > *, .thumbnail.drop-zone, .thumbnail.drop-zone > * {

  180.     -webkit-transition: background ease-out 0.1s;

  181.     -moz-transition: background ease-out 0.1s;

  182.     transition: background ease-out 0.1s; }

  183.   .drop-zone > *, .thumbnail.drop-zone > * {

  184.     opacity: 1; }

  185.   .drop-zone.upload-active, .thumbnail.drop-zone.upload-active {

  186.     background-color: #eeeeee; }

  187.     .drop-zone.upload-active > *, .thumbnail.drop-zone.upload-active > * {

  188.       opacity: 0.5; }

  189.     .drop-zone.upload-active:before, .thumbnail.drop-zone.upload-active:before {

  190.       content: "\e031";

  191.       display: inline-block;

  192.       font-family: 'Glyphicons Halflings';

  193.       font-style: normal;

  194.       font-weight: 400;

  195.       -webkit-font-smoothing: antialiased;

  196.       position: absolute;

  197.       top: 50%;

  198.       margin-top: -15px;

  199.       left: 50%;

  200.       margin-left: -15px;

  201.       text-align: center;

  202.       width: 30px;

  203.       height: 30px;

  204.       line-height: 30px;

  205.       font-size: 28px;

  206.       -webkit-animation: spin 2s infinite linear;

  207.       -moz-animation: spin 2s infinite linear;

  208.       animation: spin 2s infinite linear;

  209.       -webkit-transform-origin: 15px 14px;

  210.       -moz-transform-origin: 15px 14px;

  211.       -ms-transform-origin: 15px 14px;

  212.       -o-transform-origin: 15px 14px;

  213.       transform-origin: 15px 14px;

  214.       z-index: 1; }

  215. 

  216. /*

  217.   form {

  218.     width: $modal-width;

  219.     height: $modal-height;

  220.     position: relative;

  221. 

  222.     select {

  223.       max-width: 200px;

  224.     }

  225.   }

  226. */

  227. .modal-box .modal-close {

  228.   color: #ccc;

  229.   right: 10px;

  230.   position: absolute;

  231.   z-index: 1010; }

  232. .modal-box .preview {

  233.   position: relative;

  234.   display: block;

  235.   max-width: 200px; }

  236.   .modal-box .preview .preview-overlay {

  237.     top: 20px;

  238.     position: absolute;

  239.     display: none;

  240.     width: 100%;

  241.     text-align: center; }

  242.   .modal-box .preview.croppable {

  243.     cursor: pointer; }

  244.     .modal-box .preview.croppable:hover img {

  245.       opacity: 0.5; }

  246.     .modal-box .preview.croppable:hover .preview-overlay {

  247.       display: block; }

  248. .modal-box .edit-form .editable-item {

  249.   height: auto;

  250.   padding: 5px 0; }

  251. .modal-box .edit-form .title {

  252.   display: inline-block;

  253.   font-weight: bold;

  254.   padding-top: 5px;

  255.   vertical-align: top;

  256.   min-width: 90px; }

  257. .modal-box .edit-form .editable {

  258.   display: inline-block;

  259.   padding-top: 5px;

  260.   vertical-align: top; }

  261. .modal-box .edit-form .editable-form {

  262.   margin-left: 10px; }

  263. .modal-box .image-crop {

  264.   max-width: 500px; }

  265.   .modal-box .image-crop .ng-jcrop {

  266.     padding-bottom: 40px; }

  267.     .modal-box .image-crop .ng-jcrop img.ng-jcrop-image {

  268.       max-width: 100% !important;

  269.       max-height: 500px !important;

  270.       height: auto !important;

  271.       margin: 0 auto; }

  272. .modal-box .filters, .modal-box .browser {

  273.   margin-top: 10px; }

  274. .modal-box .browser {

  275.   position: relative; }

  276.   .modal-box .browser .scroll-wrapper {

  277.     width: 800px;

  278.     height: 400px;

  279.     overflow-y: scroll;

  280.     ms-overflow-x: hidden; }

  281.   .modal-box .browser .left, .modal-box .browser .scroll-wrapper.active {

  282.     width: 540px; }

  283.   .modal-box .browser .thumbnail {

  284.     cursor: pointer; }

  285.   .modal-box .browser .sidebar {

  286.     width: 250px;

  287.     height: 100%;

  288.     position: absolute;

  289.     right: 0;

  290.     top: 0;

  291.     background: white; }

  292.     .modal-box .browser .sidebar h3, .modal-box .browser .sidebar h5 {

  293.       margin: 0; }

  294.     .modal-box .browser .sidebar .preview {

  295.       text-align: center; }

  296.       .modal-box .browser .sidebar .preview img {

  297.         max-height: 200px;

  298.         margin: 0 auto; }

  299.   .modal-box .browser.upload .queue {

  300.     margin-top: 5px;

  301.     height: 185px;

  302.     overflow-y: auto;

  303.     margin-left: -30px; }

  304.     .modal-box .browser.upload .queue .queue-item {

  305.       padding: 7px 5px 7px 30px;

  306.       cursor: pointer; }

  307.       .modal-box .browser.upload .queue .queue-item.active {

  308.         background-color: #F5F5F5; }

  309.       .modal-box .browser.upload .queue .queue-item .file-thumb {

  310.         float: right;

  311.         margin-left: 5px; }

  312.       .modal-box .browser.upload .queue .queue-item .file-name {

  313.         text-overflow: ellipsis;

  314.         white-space: nowrap;

  315.         overflow: hidden;

  316.         display: block;

  317.         font-weight: bold; }

  318.       .modal-box .browser.upload .queue .queue-item .file-size {

  319.         float: left;

  320.         margin-right: 5px; }

  321.       .modal-box .browser.upload .queue .queue-item .progress {

  322.         margin: 3px 5px;

  323.         height: 12px; }

  324.   .modal-box .browser.upload .file-details {

  325.     background-color: #F5F5F5;

  326.     padding: 10px;

  327.     border-radius: 3px;

  328.     min-height: 300px; }

  329. .modal-box .bottom-left, .modal-box .bottom-right {

  330.   position: absolute;

  331.   bottom: 10px; }

  332.   .modal-box .bottom-left.bottom-left, .modal-box .bottom-right.bottom-left {

  333.     left: 10px; }

  334.   .modal-box .bottom-left.bottom-right, .modal-box .bottom-right.bottom-right {

  335.     right: 10px; }

  336. 

  337. /* Hack to fix issue with how item is added to page via fapi */

  338. .field-widget-file-angular-media {

  339.   margin-bottom: 2em; }

  340.   .field-widget-file-angular-media .form-item {

  341.     margin-bottom: 0; }