You are here

Home » API reference » Fine Image Upload 8.2

style.css in Fine Image Upload 8.2

Same filename in this branch
  1. 8.2 css/style.css
  2. 8.2 fiu_ui/css/style.css
Same filename and directory in other branches
  1. 8 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: 130px;
  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: 130px;
  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: 130px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

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

.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: 150px;
  margin: 5px;
  list-style: none;
}

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

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

.fine-image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 130px;
  border: 1px solid #eee;
  background: #fafafa;
}

.fine-image-preview img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

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

.fiu-broken-file input.form-submit[id*="remove-button"],
.fine-image-data .button[id*="remove-button"],
.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[id*="remove-button"]:hover,
.fine-image-data .button[id*="remove-button"]:hover,
.fiu-image-details:hover {
  opacity: 1;
}

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

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

.fiu-progress-wrapper {
  position: absolute;
  top: -10px;
  height: 130px;
  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: 130px;
  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: 150px;
}
.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: 130px;
}
.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: 85px;
  text-align: center;
  z-index: 99;
  width: 100%;
  font-size: 11px;
  line-height: 13px;
}

/* 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: 160px;
  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;
}

.fiu-wrapper .filefield-source input[type="text"]{
  width: 160px;
}

.fine-image-file-name {
  width: 170px;
  overflow: hidden;
  white-space: nowrap;
}

.fine-image-file-name span {
  padding: 2px 5px;
  display: inline-block;
}

.fine-image-widget:hover .fine-image-file-name,
.fine-image-widget:hover .fine-image-file-name span {
  overflow: visible;
  display: inline-block;
  position: relative;
  z-index: 99;
}

.fine-image-widget:hover .fine-image-file-name span {
  background: gainsboro;
}

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: 130px;

  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: 130px;

  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: 130px;

  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(../icons/upload.svg);

  90.   background-position: center 30px;

  91.   background-repeat: no-repeat;

  92.   background-size: 33px;

  93.   font-size: 1em;

  94.   height: 60px;

  95.   padding-top: 45px;

  96.   padding-bottom: 15px;

  97. }

  98. 

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

  100.   background-color: #ddd;

  101. }

  102. 

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

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

  105.   outline: none;

  106. }

  107. 

  108. .fiu-add-element label * {

  109.   pointer-events: none;

  110. }

  111. 

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

  113. .fiu-add-element .messages,

  114. .fiu-wrapper .fiu-image-info {

  115.   display: none;

  116. }

  117. 

  118. .mfp-inline-holder .mfp-content {

  119.   position: absolute;

  120.   top: 50%;

  121.   left: 50%;

  122.   display: flex;

  123.   align-items: stretch;

  124.   width: 90%;

  125.   height: 70%;

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

  127. }

  128. 

  129. .fiu-full-image {

  130.   position: relative;

  131.   width: 100%;

  132. }

  133. 

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

  135.   right: 20%;

  136.   margin: 10px;

  137.   width: 32px;

  138.   height: 32px;

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

  140.   border-radius: 50%;

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

  142.   color: #fff;

  143.   font-size: 28px;

  144.   line-height: 32px;

  145. }

  146. 

  147. .fiu-full-image img {

  148.   display: block;

  149.   width: 80%;

  150.   height: auto;

  151.   object-fit: cover;

  152.   float: left;

  153. }

  154. .fiu-img-description {

  155.   width: 20%;

  156.   float: left;

  157. }

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

  159.   margin: 0 0 0 30px;

  160.   padding: 0;

  161.   list-style: none;

  162.   color: #ddd;

  163. }

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

  165.   margin: 0 0 0 30px;

  166.   display: block;

  167. }

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

  169.   color: #eee;

  170. }

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

  172.   color: #ddd;

  173. }

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

  175.   position: relative;

  176.   margin: 0;

  177.   padding: 0;

  178.   list-style: none;

  179. }

  180. 

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

  182.   float: left;

  183.   width: 180px;

  184.   height: 150px;

  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.   display: flex;

  199.   align-items: center;

  200.   justify-content: center;

  201.   overflow: hidden;

  202.   width: 100%;

  203.   height: 130px;

  204.   border: 1px solid #eee;

  205.   background: #fafafa;

  206. }

  207. 

  208. .fine-image-preview img {

  209.   position: relative;

  210.   display: block;

  211.   width: auto;

  212.   height: auto;

  213.   max-width: 100%;

  214.   max-height: 100%;

  215. }

  216. 

  217. .fine-image-data {

  218.   position: absolute;

  219.   top: 10px;

  220.   right: 0;

  221.   display: flex;

  222.   justify-content: space-between;

  223.   width: 100%;

  224. }

  225. 

  226. .fiu-broken-file input.form-submit[id*="remove-button"],

  227. .fine-image-data .button[id*="remove-button"],

  228. .fiu-image-details {

  229.   display: inline-block;

  230.   width: 24px;

  231.   height: 24px;

  232.   min-width: unset;

  233.   margin: 0 10px;

  234.   padding: 0;

  235.   overflow: hidden;

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

  237.   border-radius: 50%;

  238.   box-shadow: none;

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

  240.   background-size: 16px;

  241.   text-indent: 100%;

  242.   cursor: pointer;

  243.   opacity: .8;

  244. }

  245. 

  246. .fiu-broken-file input.form-submit[id*="remove-button"]:hover,

  247. .fine-image-data .button[id*="remove-button"]:hover,

  248. .fiu-image-details:hover {

  249.   opacity: 1;

  250. }

  251. 

  252. .fiu-broken-file input.form-submit[id*="remove-button"],

  253. .fine-image-data .button[id*="remove-button"] {

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

  255. }

  256. 

  257. .fiu-image-details {

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

  259. }

  260. 

  261. .fiu-progress-wrapper {

  262.   position: absolute;

  263.   top: -10px;

  264.   height: 130px;

  265.   width: 180px;

  266.   text-align: center;

  267.   background: #ccc;

  268. }

  269. 

  270. .sp {

  271.   width: 32px;

  272.   height: 32px;

  273.   clear: both;

  274.   margin: 40px auto;

  275. }

  276. 

  277. /* Spinner Circle Rotation */

  278. .sp-circle {

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

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

  281.   border-radius: 50%;

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

  283.   animation: spCircRot .6s infinite linear;

  284.   display: inline-block;

  285. }

  286. @-webkit-keyframes spCircRot {

  287.   from {

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

  289.   }

  290.   to {

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

  292.   }

  293. }

  294. @keyframes spCircRot {

  295.   from {

  296.     transform: rotate(0deg);

  297.   }

  298.   to {

  299.     transform: rotate(359deg);

  300.   }

  301. }

  302. 

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

  304.   margin: 0;

  305. }

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

  307. .fiu-load-image .fiu-image-details {

  308.   display: none;

  309. }

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

  311.   display: block;

  312. }

  313. 

  314. /* Single element style */

  315. .unitary-element .fiu-add-element {

  316.   float: none;

  317.   width: 100%;

  318.   height: auto;

  319.   background-color: unset;

  320. }

  321. .unitary-element .form-item {

  322.   position: relative;

  323.   width: 180px;

  324.   height: 130px;

  325.   margin: 5px;

  326. }

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

  328.   display: block;

  329. }

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

  331.   width: 180px;

  332.   height: 150px;

  333. }

  334. .unitary-element .messages--error {

  335.   display: block;

  336. }

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

  338.   width: 0;

  339.   height: 0;

  340.   background: none;

  341.   border: none;

  342. }

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

  344.   color: black;

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

  346.   text-decoration: none;

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

  348.   background: #eee;

  349.   text-align: center;

  350.   line-height: 130px;

  351. }

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

  353.   content: '✖';

  354. }

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

  356.   display: none;

  357. }

  358. 

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

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

  361.   display: none;

  362. }

  363. 

  364. /* Add integration with IMCE. */

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

  366.   position: absolute;

  367.   top: 5px;

  368.   text-align: center;

  369.   width: 100%;

  370. }

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

  372.   display: none;

  373. }

  374. 

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

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

  377.   position: absolute;

  378.   top: 85px;

  379.   text-align: center;

  380.   z-index: 99;

  381.   width: 100%;

  382.   font-size: 11px;

  383.   line-height: 13px;

  384. }

  385. 

  386. /* Hide some sources. */

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

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

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

  390.   display: none;

  391. }

  392. 

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

  394.   display: inline-block;

  395.   margin: 0 2px;

  396. }

  397. 

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

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

  400.   position: absolute;

  401.   left: 0;

  402.   width: 170px;

  403.   top: -10px;

  404.   background: #eee;

  405.   padding: 10px 5px;

  406. }

  407. 

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

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

  410.   text-align: center;

  411.   width: 160px;

  412.   display: inline-block;

  413.   margin: 5px 0px;

  414. }

  415. 

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

  417.   width: 100% !important;

  418.   margin: 0;

  419. }

  420. 

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

  422.   margin: 0;

  423.   padding: 0;

  424.   width: 100%;

  425.   position: relative;

  426.   z-index: 999;

  427.   background: #eee;

  428. }

  429. 

  430. .fiu-wrapper .filefield-source input[type="text"]{

  431.   width: 160px;

  432. }

  433. 

  434. .fine-image-file-name {

  435.   width: 170px;

  436.   overflow: hidden;

  437.   white-space: nowrap;

  438. }

  439. 

  440. .fine-image-file-name span {

  441.   padding: 2px 5px;

  442.   display: inline-block;

  443. }

  444. 

  445. .fine-image-widget:hover .fine-image-file-name,

  446. .fine-image-widget:hover .fine-image-file-name span {

  447.   overflow: visible;

  448.   display: inline-block;

  449.   position: relative;

  450.   z-index: 99;

  451. }

  452. 

  453. .fine-image-widget:hover .fine-image-file-name span {

  454.   background: gainsboro;

  455. }