You are here

Home » API reference » Nice ImageField Widget 7.2

nice_imagefield_widget.css in Nice ImageField Widget 7.2

Same filename and directory in other branches
  1. 7 css/nice_imagefield_widget.css
div.nice-imagefield-sortable {
    margin: 0 0 10px 0;
}

div.nice-imagefield-sortable > div {
    margin: 3px;
    border: solid 1px #fff;
    position: relative;
    float: left;
}

div.nice-imagefield-sortable > div img {
    cursor: move;
    z-index: 100;
    position: absolute;
}

div.nice-imagefield-sortable div.removing img {
    cursor: auto;
}

div.nice-imagefield-sortable div.ui-sortable-placeholder {
    border: dotted 1px #0074BD;
}

div.nice-imagefield-sortable div.ui-sortable-helper {
    border: solid 1px transparent;
}

div.nice-imagefield-card:not(.processed) div.nice-imagefield-form {
    display: none;
}

div.nice-imagefield-form {
    background: #ebebeb;
}

div.nice-imagefield-form > div.inner {
    padding: 10px;
}

div.nice-imagefield-form div.form-item {
    margin: 0 0 10px 0;
    padding: 0;
    display: flex;
    flex-flow: column;
}

div.nice-imagefield-form div.form-item label {
    font-size: 120%;
}

div.nice-imagefield-image {
    position: relative;
    overflow: hidden;
}

div.nice-imagefield-image div.buttons {
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0;
    display: none;
    z-index: 101;
}

div.nice-imagefield-image div.buttons input {
    opacity: 0.7;
}

div.nice-imagefield-image:hover div.buttons {
    display: block;
}

div.nice-imagefield-image.removing div.buttons {
    display: none;
}

div.nice-imagefield-image:hover div.buttons input:hover {
    opacity: 1;
}

div.nice-imagefield-element.ui-sortable-helper div.nice-imagefield-image div.buttons {
    display: none;
}

div.loading {
    border: 3px solid #0074BD;
    border-radius: 16px;
    background-color: #0074BD;
    height: 16px;
    left: 50%;
    margin: -8px 0 0 -8px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 16px;

    animation: pulsate 0.7s ease-out;
    animation-iteration-count: infinite;
    z-index: 99;
}

div.nice-imagefield-image .ajax-progress-throbber {
    display: none;
}

div.nice-imagefield-sortable div.removing img {
    z-index: 99;
}

div.nice-imagefield-sortable div.removing div.loading {
    z-index: 100;
    border-radius: 48px;
    height: 48px;
    width: 48px;
    border-width: 5px;
    margin: -24px 0 0 -24px;
}

@keyframes pulsate {
    0% {
        transform: scale(.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

File

css/nice_imagefield_widget.css
View source 
  1. div.nice-imagefield-sortable {

  2.     margin: 0 0 10px 0;

  3. }

  4. 

  5. div.nice-imagefield-sortable > div {

  6.     margin: 3px;

  7.     border: solid 1px #fff;

  8.     position: relative;

  9.     float: left;

  10. }

  11. 

  12. div.nice-imagefield-sortable > div img {

  13.     cursor: move;

  14.     z-index: 100;

  15.     position: absolute;

  16. }

  17. 

  18. div.nice-imagefield-sortable div.removing img {

  19.     cursor: auto;

  20. }

  21. 

  22. div.nice-imagefield-sortable div.ui-sortable-placeholder {

  23.     border: dotted 1px #0074BD;

  24. }

  25. 

  26. div.nice-imagefield-sortable div.ui-sortable-helper {

  27.     border: solid 1px transparent;

  28. }

  29. 

  30. div.nice-imagefield-card:not(.processed) div.nice-imagefield-form {

  31.     display: none;

  32. }

  33. 

  34. div.nice-imagefield-form {

  35.     background: #ebebeb;

  36. }

  37. 

  38. div.nice-imagefield-form > div.inner {

  39.     padding: 10px;

  40. }

  41. 

  42. div.nice-imagefield-form div.form-item {

  43.     margin: 0 0 10px 0;

  44.     padding: 0;

  45.     display: flex;

  46.     flex-flow: column;

  47. }

  48. 

  49. div.nice-imagefield-form div.form-item label {

  50.     font-size: 120%;

  51. }

  52. 

  53. div.nice-imagefield-image {

  54.     position: relative;

  55.     overflow: hidden;

  56. }

  57. 

  58. div.nice-imagefield-image div.buttons {

  59.     position: absolute;

  60.     left: 10px;

  61.     top: 10px;

  62.     margin: 0;

  63.     display: none;

  64.     z-index: 101;

  65. }

  66. 

  67. div.nice-imagefield-image div.buttons input {

  68.     opacity: 0.7;

  69. }

  70. 

  71. div.nice-imagefield-image:hover div.buttons {

  72.     display: block;

  73. }

  74. 

  75. div.nice-imagefield-image.removing div.buttons {

  76.     display: none;

  77. }

  78. 

  79. div.nice-imagefield-image:hover div.buttons input:hover {

  80.     opacity: 1;

  81. }

  82. 

  83. div.nice-imagefield-element.ui-sortable-helper div.nice-imagefield-image div.buttons {

  84.     display: none;

  85. }

  86. 

  87. div.loading {

  88.     border: 3px solid #0074BD;

  89.     border-radius: 16px;

  90.     background-color: #0074BD;

  91.     height: 16px;

  92.     left: 50%;

  93.     margin: -8px 0 0 -8px;

  94.     opacity: 0;

  95.     position: absolute;

  96.     top: 50%;

  97.     width: 16px;

  98. 

  99.     animation: pulsate 0.7s ease-out;

  100.     animation-iteration-count: infinite;

  101.     z-index: 99;

  102. }

  103. 

  104. div.nice-imagefield-image .ajax-progress-throbber {

  105.     display: none;

  106. }

  107. 

  108. div.nice-imagefield-sortable div.removing img {

  109.     z-index: 99;

  110. }

  111. 

  112. div.nice-imagefield-sortable div.removing div.loading {

  113.     z-index: 100;

  114.     border-radius: 48px;

  115.     height: 48px;

  116.     width: 48px;

  117.     border-width: 5px;

  118.     margin: -24px 0 0 -24px;

  119. }

  120. 

  121. @keyframes pulsate {

  122.     0% {

  123.         transform: scale(.1);

  124.         opacity: 0.0;

  125.     }

  126.     50% {

  127.         opacity: 1;

  128.     }

  129.     100% {

  130.         transform: scale(1.2);

  131.         opacity: 0;

  132.     }

  133. }