You are here

Home » API reference » Fine Image Upload 8

style.css in Fine Image Upload 8

Same filename and directory in other branches
  1. 8.2 css/style.css
.fiu-wrapper:after {
  content: " ";
  display: block;
  width: 1px;
  height: 1px;
  clear: both;
}

.fiu-wrapper > .messages {
  float: none;
}

.fiu-add-element {
  position: relative;
  float: left;
  width: 180px;
  height: 120px;
  margin: 5px;
  background-color: #eee;
}

.fiu-add-element .form-item .description {
  display: none;
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  width: 100%;
  margin: 0;
  padding: 5px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25);
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 12px;
  transform: translateX(-50%);
  z-index: 99;
}

.fiu-add-element .form-item .description:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 0;
  height: 0;
  margin: 0;
  border: 10px solid transparent;
  border-top: 10px solid rgba(0, 0, 0, .8);
  transform: translateX(-50%);
}

.fiu-add-element:hover .description {
  display: block;
}

.fiu-add-element input[type="file"] {
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
  z-index: -1;
}

.fiu-add-element .form-type-managed-file {
  height: 120px;
  margin: 0;
  position: relative;
  width: 100%;
}

.fiu-add-element .form-type-managed-file label {
  align-items: center;
  background-color: #eee;
  color: #000;
  cursor: pointer;
  display: flex;
  font-size: 1.25em;
  font-weight: 700;
  height: 120px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.fiu-add-element .form-type-managed-file--advanced label {
  background-image: url(/modules/fiu/icons/upload.svg);
  background-position: center 30px;
  background-repeat: no-repeat;
  background-size: 40px;
  font-size: 1em;
  height: 60px;
  padding-top: 60px;
}

.fiu-add-element .form-type-managed-file--advanced.is-dragover label {
  background-color: #ddd;
}

.fiu-add-element:focus label,
.fiu-add-element label:hover {
  outline: none;
}

.fiu-add-element label * {
  pointer-events: none;
}

.field--widget-fine-image .messages--status,
.fiu-add-element .messages,
.fiu-wrapper .fiu-image-info {
  display: none;
}

.mfp-inline-holder .mfp-content {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: stretch;
  width: 90%;
  height: 70%;
  transform: translate(-50%, -50%);
}

.fiu-full-image {
  position: relative;
  width: 100%;
}

.fiu-full-image .mfp-close {
  right: 20%;
  margin: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 28px;
  line-height: 32px;
}

.fiu-full-image img {
  display: block;
  width: 80%;
  height: auto;
  object-fit: cover;
  float: left;
}
.fiu-img-description {
  width: 20%;
  float: left;
}
.mfp-content .inner-fiu-full-image ul {
  margin: 0 0 0 30px;
  padding: 0;
  list-style: none;
  color: #ddd;
}
.inner-fiu-full-image .attr {
  margin: 0 0 0 30px;
  display: block;
}
.inner-fiu-full-image .attr label {
  color: #eee;
}
.inner-fiu-full-image .attr .description {
  color: #ddd;
}
.item-list ul.fiu-sortable-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-list ul.fiu-sortable-list li {
  float: left;
  width: 180px;
  height: 120px;
  overflow: hidden;
  margin: 5px;
  list-style: none;
}

ul.fiu-sortable-list li > .form-type-select {
  display: none;
}

.fine-image-widget {
  position: relative;
}

.fine-image-preview {
  position: relative;
  width: 100%;
  height: 120px;
}

.fine-image-preview img {
  background: #eee;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fine-image-data {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.fiu-broken-file input.form-submit[value="Remove selected"],
.fine-image-data .button[value="Remove"],
.fiu-image-details {
  display: inline-block;
  width: 24px;
  height: 24px;
  min-width: unset;
  margin: 0 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  box-shadow: none;
  background: rgba(0, 0, 0, .25) center no-repeat;
  background-size: 16px;
  text-indent: 100%;
  cursor: pointer;
  opacity: .8;
}

.fiu-broken-file input.form-submit[value="Remove selected"]:hover,
.fine-image-data .button[value="Remove"]:hover,
.fiu-image-details:hover {
  opacity: 1;
}

.fiu-broken-file input.form-submit[value="Remove selected"],
.fine-image-data .button[value="Remove"] {
  background-image: url('../icons/close.svg');
}

.fiu-image-details {
  background-image: url('../icons/magnify.svg');
}

.fiu-progress-wrapper {
  position: absolute;
  top: -10px;
  height: 120px;
  width: 180px;
  text-align: center;
  background: #ccc;
}

.sp {
  width: 32px;
  height: 32px;
  clear: both;
  margin: 40px auto;
}

/* Spinner Circle Rotation */
.sp-circle {
  border: 4px rgba(0, 0, 0, 1) solid;
  border-top: 4px rgba(255, 255, 255, 1) solid;
  border-radius: 50%;
  -webkit-animation: spCircRot .6s infinite linear;
  animation: spCircRot .6s infinite linear;
  display: inline-block;
}
@-webkit-keyframes spCircRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.fiu-load-image .form-item {
  margin: 0;
}
.fiu-load-image.fiu-add-element label,
.fiu-load-image .fiu-image-details {
  display: none;
}
.fiu-load-image.fiu-add-element .fine-image-widget {
  display: block;
}

/* Single element style */
.unitary-element .fiu-add-element {
  float: none;
  width: 100%;
  height: auto;
  background-color: unset;
}
.unitary-element .form-item {
  position: relative;
  width: 180px;
  height: 120px;
  margin: 5px;
}
.unitary-element .fiu-add-element div[id^="ajax-wrapper"] .fine-image-widget.fiu-single-item {
  display: block;
}
.unitary-element .fiu-add-element div[id^="ajax-wrapper"] .form-item {
  width: 180px;
  height: 120px;
  overflow: hidden;
}
.unitary-element .messages--error {
  display: block;
}
.fiu-broken-file .fiu-image-details {
  width: 0;
  height: 0;
  background: none;
  border: none;
}
.fiu-broken-file .fine-image-preview {
  color: black;
  font: 80px/100% arial, sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  background: #eee;
  text-align: center;
  line-height: 120px;
}
.fiu-broken-file .fine-image-preview:after {
  content: '✖';
}
.fiu-broken-file .fine-image-preview img {
  display: none;
}

.fiu-broken-file input[type="file"],
.fiu-broken-file .form-type-checkbox {
  display: none;
}

/* Add integration with IMCE. */
.fiu-wrapper .imce-filefield-widget {
  position: absolute;
  top: 5px;
  text-align: center;
  width: 100%;
}
.fiu-wrapper .fiu-load-image. .imce-filefield-widget {
  display: none;
}

/* Add integration with filefield_sources module. */
.fiu-wrapper .filefield-sources-list {
  position: absolute;
  top: 70px;
  text-align: center;
  z-index: 99;
  width: 100%;
}

/* Hide some sources. */
.fiu-wrapper .filefield-sources-list .filefield-source-imce,
.fiu-wrapper .filefield-sources-list .filefield-source-attach,
.fiu-wrapper .filefield-sources-list .filefield-source-clipboard {
  display: none;
}

.fiu-wrapper .filefield-sources-list a {
  display: inline-block;
  margin: 0 2px;
}

.fiu-wrapper .filefield-source.filefield-source-remote.clear-block,
.fiu-wrapper .filefield-source.filefield-source-reference.clear-block {
  position: absolute;
  left: 0;
  width: 170px;
  top: -10px;
  background: #eee;
  padding: 10px 5px;
}

.fiu-wrapper .filefield-source.filefield-source-remote.clear-block .field-suffix,
.fiu-wrapper .filefield-source.filefield-source-reference.clear-block .field-suffix {
  text-align: center;
  width: 170px;
  display: inline-block;
  margin: 5px 0px;
}

.fiu-wrapper .unitary-element .filefield-source.clear-block > .form-item {
  width: 100% !important;
  margin: 0;
}

.fiu-wrapper .filefield-source-remote .ajax-progress-bar {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 999;
  background: #eee;
}

File

css/style.css
View source 
  1. .fiu-wrapper:after {

  2.   content: " ";

  3.   display: block;

  4.   width: 1px;

  5.   height: 1px;

  6.   clear: both;

  7. }

  8. 

  9. .fiu-wrapper > .messages {

  10.   float: none;

  11. }

  12. 

  13. .fiu-add-element {

  14.   position: relative;

  15.   float: left;

  16.   width: 180px;

  17.   height: 120px;

  18.   margin: 5px;

  19.   background-color: #eee;

  20. }

  21. 

  22. .fiu-add-element .form-item .description {

  23.   display: none;

  24.   position: absolute;

  25.   bottom: calc(100% + 15px);

  26.   left: 50%;

  27.   width: 100%;

  28.   margin: 0;

  29.   padding: 5px;

  30.   box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25);

  31.   border-radius: 4px;

  32.   background-color: rgba(0, 0, 0, .8);

  33.   color: #fff;

  34.   font-size: 12px;

  35.   transform: translateX(-50%);

  36.   z-index: 99;

  37. }

  38. 

  39. .fiu-add-element .form-item .description:before {

  40.   content: '';

  41.   position: absolute;

  42.   left: 50%;

  43.   bottom: -20px;

  44.   width: 0;

  45.   height: 0;

  46.   margin: 0;

  47.   border: 10px solid transparent;

  48.   border-top: 10px solid rgba(0, 0, 0, .8);

  49.   transform: translateX(-50%);

  50. }

  51. 

  52. .fiu-add-element:hover .description {

  53.   display: block;

  54. }

  55. 

  56. .fiu-add-element input[type="file"] {

  57.   height: 0;

  58.   opacity: 0;

  59.   overflow: hidden;

  60.   position: absolute;

  61.   width: 0;

  62.   z-index: -1;

  63. }

  64. 

  65. .fiu-add-element .form-type-managed-file {

  66.   height: 120px;

  67.   margin: 0;

  68.   position: relative;

  69.   width: 100%;

  70. }

  71. 

  72. .fiu-add-element .form-type-managed-file label {

  73.   align-items: center;

  74.   background-color: #eee;

  75.   color: #000;

  76.   cursor: pointer;

  77.   display: flex;

  78.   font-size: 1.25em;

  79.   font-weight: 700;

  80.   height: 120px;

  81.   justify-content: center;

  82.   left: 0;

  83.   position: absolute;

  84.   top: 0;

  85.   width: 100%;

  86. }

  87. 

  88. .fiu-add-element .form-type-managed-file--advanced label {

  89.   background-image: url(/modules/fiu/icons/upload.svg);

  90.   background-position: center 30px;

  91.   background-repeat: no-repeat;

  92.   background-size: 40px;

  93.   font-size: 1em;

  94.   height: 60px;

  95.   padding-top: 60px;

  96. }

  97. 

  98. .fiu-add-element .form-type-managed-file--advanced.is-dragover label {

  99.   background-color: #ddd;

  100. }

  101. 

  102. .fiu-add-element:focus label,

  103. .fiu-add-element label:hover {

  104.   outline: none;

  105. }

  106. 

  107. .fiu-add-element label * {

  108.   pointer-events: none;

  109. }

  110. 

  111. .field--widget-fine-image .messages--status,

  112. .fiu-add-element .messages,

  113. .fiu-wrapper .fiu-image-info {

  114.   display: none;

  115. }

  116. 

  117. .mfp-inline-holder .mfp-content {

  118.   position: absolute;

  119.   top: 50%;

  120.   left: 50%;

  121.   display: flex;

  122.   align-items: stretch;

  123.   width: 90%;

  124.   height: 70%;

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

  126. }

  127. 

  128. .fiu-full-image {

  129.   position: relative;

  130.   width: 100%;

  131. }

  132. 

  133. .fiu-full-image .mfp-close {

  134.   right: 20%;

  135.   margin: 10px;

  136.   width: 32px;

  137.   height: 32px;

  138.   border: 1px solid rgba(255, 255, 255, .5);

  139.   border-radius: 50%;

  140.   background-color: rgba(0, 0, 0, .25);

  141.   color: #fff;

  142.   font-size: 28px;

  143.   line-height: 32px;

  144. }

  145. 

  146. .fiu-full-image img {

  147.   display: block;

  148.   width: 80%;

  149.   height: auto;

  150.   object-fit: cover;

  151.   float: left;

  152. }

  153. .fiu-img-description {

  154.   width: 20%;

  155.   float: left;

  156. }

  157. .mfp-content .inner-fiu-full-image ul {

  158.   margin: 0 0 0 30px;

  159.   padding: 0;

  160.   list-style: none;

  161.   color: #ddd;

  162. }

  163. .inner-fiu-full-image .attr {

  164.   margin: 0 0 0 30px;

  165.   display: block;

  166. }

  167. .inner-fiu-full-image .attr label {

  168.   color: #eee;

  169. }

  170. .inner-fiu-full-image .attr .description {

  171.   color: #ddd;

  172. }

  173. .item-list ul.fiu-sortable-list {

  174.   position: relative;

  175.   margin: 0;

  176.   padding: 0;

  177.   list-style: none;

  178. }

  179. 

  180. .item-list ul.fiu-sortable-list li {

  181.   float: left;

  182.   width: 180px;

  183.   height: 120px;

  184.   overflow: hidden;

  185.   margin: 5px;

  186.   list-style: none;

  187. }

  188. 

  189. ul.fiu-sortable-list li > .form-type-select {

  190.   display: none;

  191. }

  192. 

  193. .fine-image-widget {

  194.   position: relative;

  195. }

  196. 

  197. .fine-image-preview {

  198.   position: relative;

  199.   width: 100%;

  200.   height: 120px;

  201. }

  202. 

  203. .fine-image-preview img {

  204.   background: #eee;

  205.   position: relative;

  206.   display: block;

  207.   width: 100%;

  208.   height: 100%;

  209.   object-fit: cover;

  210. }

  211. 

  212. .fine-image-data {

  213.   position: absolute;

  214.   top: 10px;

  215.   right: 0;

  216.   display: flex;

  217.   justify-content: space-between;

  218.   width: 100%;

  219. }

  220. 

  221. .fiu-broken-file input.form-submit[value="Remove selected"],

  222. .fine-image-data .button[value="Remove"],

  223. .fiu-image-details {

  224.   display: inline-block;

  225.   width: 24px;

  226.   height: 24px;

  227.   min-width: unset;

  228.   margin: 0 10px;

  229.   padding: 0;

  230.   overflow: hidden;

  231.   border: 1px solid rgba(255, 255, 255, .5);

  232.   border-radius: 50%;

  233.   box-shadow: none;

  234.   background: rgba(0, 0, 0, .25) center no-repeat;

  235.   background-size: 16px;

  236.   text-indent: 100%;

  237.   cursor: pointer;

  238.   opacity: .8;

  239. }

  240. 

  241. .fiu-broken-file input.form-submit[value="Remove selected"]:hover,

  242. .fine-image-data .button[value="Remove"]:hover,

  243. .fiu-image-details:hover {

  244.   opacity: 1;

  245. }

  246. 

  247. .fiu-broken-file input.form-submit[value="Remove selected"],

  248. .fine-image-data .button[value="Remove"] {

  249.   background-image: url('../icons/close.svg');

  250. }

  251. 

  252. .fiu-image-details {

  253.   background-image: url('../icons/magnify.svg');

  254. }

  255. 

  256. .fiu-progress-wrapper {

  257.   position: absolute;

  258.   top: -10px;

  259.   height: 120px;

  260.   width: 180px;

  261.   text-align: center;

  262.   background: #ccc;

  263. }

  264. 

  265. .sp {

  266.   width: 32px;

  267.   height: 32px;

  268.   clear: both;

  269.   margin: 40px auto;

  270. }

  271. 

  272. /* Spinner Circle Rotation */

  273. .sp-circle {

  274.   border: 4px rgba(0, 0, 0, 1) solid;

  275.   border-top: 4px rgba(255, 255, 255, 1) solid;

  276.   border-radius: 50%;

  277.   -webkit-animation: spCircRot .6s infinite linear;

  278.   animation: spCircRot .6s infinite linear;

  279.   display: inline-block;

  280. }

  281. @-webkit-keyframes spCircRot {

  282.   from {

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

  284.   }

  285.   to {

  286.     -webkit-transform: rotate(359deg);

  287.   }

  288. }

  289. @keyframes spCircRot {

  290.   from {

  291.     transform: rotate(0deg);

  292.   }

  293.   to {

  294.     transform: rotate(359deg);

  295.   }

  296. }

  297. 

  298. .fiu-load-image .form-item {

  299.   margin: 0;

  300. }

  301. .fiu-load-image.fiu-add-element label,

  302. .fiu-load-image .fiu-image-details {

  303.   display: none;

  304. }

  305. .fiu-load-image.fiu-add-element .fine-image-widget {

  306.   display: block;

  307. }

  308. 

  309. /* Single element style */

  310. .unitary-element .fiu-add-element {

  311.   float: none;

  312.   width: 100%;

  313.   height: auto;

  314.   background-color: unset;

  315. }

  316. .unitary-element .form-item {

  317.   position: relative;

  318.   width: 180px;

  319.   height: 120px;

  320.   margin: 5px;

  321. }

  322. .unitary-element .fiu-add-element div[id^="ajax-wrapper"] .fine-image-widget.fiu-single-item {

  323.   display: block;

  324. }

  325. .unitary-element .fiu-add-element div[id^="ajax-wrapper"] .form-item {

  326.   width: 180px;

  327.   height: 120px;

  328.   overflow: hidden;

  329. }

  330. .unitary-element .messages--error {

  331.   display: block;

  332. }

  333. .fiu-broken-file .fiu-image-details {

  334.   width: 0;

  335.   height: 0;

  336.   background: none;

  337.   border: none;

  338. }

  339. .fiu-broken-file .fine-image-preview {

  340.   color: black;

  341.   font: 80px/100% arial, sans-serif;

  342.   text-decoration: none;

  343.   text-shadow: 0 1px 0 #fff;

  344.   background: #eee;

  345.   text-align: center;

  346.   line-height: 120px;

  347. }

  348. .fiu-broken-file .fine-image-preview:after {

  349.   content: '✖';

  350. }

  351. .fiu-broken-file .fine-image-preview img {

  352.   display: none;

  353. }

  354. 

  355. .fiu-broken-file input[type="file"],

  356. .fiu-broken-file .form-type-checkbox {

  357.   display: none;

  358. }

  359. 

  360. /* Add integration with IMCE. */

  361. .fiu-wrapper .imce-filefield-widget {

  362.   position: absolute;

  363.   top: 5px;

  364.   text-align: center;

  365.   width: 100%;

  366. }

  367. .fiu-wrapper .fiu-load-image. .imce-filefield-widget {

  368.   display: none;

  369. }

  370. 

  371. /* Add integration with filefield_sources module. */

  372. .fiu-wrapper .filefield-sources-list {

  373.   position: absolute;

  374.   top: 70px;

  375.   text-align: center;

  376.   z-index: 99;

  377.   width: 100%;

  378. }

  379. 

  380. /* Hide some sources. */

  381. .fiu-wrapper .filefield-sources-list .filefield-source-imce,

  382. .fiu-wrapper .filefield-sources-list .filefield-source-attach,

  383. .fiu-wrapper .filefield-sources-list .filefield-source-clipboard {

  384.   display: none;

  385. }

  386. 

  387. .fiu-wrapper .filefield-sources-list a {

  388.   display: inline-block;

  389.   margin: 0 2px;

  390. }

  391. 

  392. .fiu-wrapper .filefield-source.filefield-source-remote.clear-block,

  393. .fiu-wrapper .filefield-source.filefield-source-reference.clear-block {

  394.   position: absolute;

  395.   left: 0;

  396.   width: 170px;

  397.   top: -10px;

  398.   background: #eee;

  399.   padding: 10px 5px;

  400. }

  401. 

  402. .fiu-wrapper .filefield-source.filefield-source-remote.clear-block .field-suffix,

  403. .fiu-wrapper .filefield-source.filefield-source-reference.clear-block .field-suffix {

  404.   text-align: center;

  405.   width: 170px;

  406.   display: inline-block;

  407.   margin: 5px 0px;

  408. }

  409. 

  410. .fiu-wrapper .unitary-element .filefield-source.clear-block > .form-item {

  411.   width: 100% !important;

  412.   margin: 0;

  413. }

  414. 

  415. .fiu-wrapper .filefield-source-remote .ajax-progress-bar {

  416.   margin: 0;

  417.   padding: 0;

  418.   width: 100%;

  419.   position: relative;

  420.   z-index: 999;

  421.   background: #eee;

  422. }