You are here

image_browser.css in Image Entity Browser 8

.ui-dialog ul.links li{
  display: inline-block;
  margin-right: 10px;
}
.ui-dialog ul.links li a{
  display: inline-block;
  margin-right: 10px;
  font-weight: bold;
  font-size: 120%;
}
ul.dexp-image-browser-tabs{
  margin: 15px 0;
  padding: 0;
  width: 100%;
}

ul.dexp-image-browser-tabs li{
  display: inline-block;
  margin-right: 30px;
  font-size: 15px;
  font-weight: 600;
}
.image-browser-wrapper img, .image-browser-wrapper input{
  display: inline-block;
  vertical-align: middle;
}
.image-browser-library-form #search-actions{
  display: inline-block;
  padding-top: 30px;
}
.image-browser-library-form .views-col{
  position: relative;
  box-sizing: border-box;
  /* padding: 10px; */
  border: 1px solid #fff;
  background: #eee;
  padding: 10px;
  flex: 0 0 16.666666666667%;
  max-width: 16.666666666667%!important;
}
.image-browser-library-form .views-col img{
  max-width: 100%;
  width: 100%;
  height: auto;
  cursor: pointer;
}
.image-browser-library-form .views-col .views-field-entity-browser-select{
  display: inline-block;
  margin-right: 5px;
}
.image-browser-library-form .views-col .views-field-filename{
  display: inline-block;
}
.image-browser-library-form .views-col.selected:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.5);
}
.image-browser-wrapper .remove{
  display: none;
}
.image-browser-wrapper.file-selected .browser{
  display: none;
}
.image-browser-wrapper.file-selected .remove{
  display: inline-block;
}
.image-browser .image-preview{
  border: 1px solid #ddd;
  padding: 3px;
  background-color: #efefef;
  display: none;
}
.image-browser.has-image{
  display: table;
  width: 100%;
}
.image-browser.has-image .image-preview{
  display: inline-block;
}
.image-browser.has-image .image-preview img{
  max-width: 50px;
  max-height: 50px;
}
.image-browser .image-remove{
  display: none;
}
.image-browser.has-image .image-remove{
  display: inline-block;
}
.view-dexp-image-browser .views-row{
  display: flex;
}

File

assets/css/image_browser.css
View source
  1. .ui-dialog ul.links li{
  2. display: inline-block;
  3. margin-right: 10px;
  4. }
  5. .ui-dialog ul.links li a{
  6. display: inline-block;
  7. margin-right: 10px;
  8. font-weight: bold;
  9. font-size: 120%;
  10. }
  11. ul.dexp-image-browser-tabs{
  12. margin: 15px 0;
  13. padding: 0;
  14. width: 100%;
  15. }
  16. ul.dexp-image-browser-tabs li{
  17. display: inline-block;
  18. margin-right: 30px;
  19. font-size: 15px;
  20. font-weight: 600;
  21. }
  22. .image-browser-wrapper img, .image-browser-wrapper input{
  23. display: inline-block;
  24. vertical-align: middle;
  25. }
  26. .image-browser-library-form #search-actions{
  27. display: inline-block;
  28. padding-top: 30px;
  29. }
  30. .image-browser-library-form .views-col{
  31. position: relative;
  32. box-sizing: border-box;
  33. /* padding: 10px; */
  34. border: 1px solid #fff;
  35. background: #eee;
  36. padding: 10px;
  37. flex: 0 0 16.666666666667%;
  38. max-width: 16.666666666667%!important;
  39. }
  40. .image-browser-library-form .views-col img{
  41. max-width: 100%;
  42. width: 100%;
  43. height: auto;
  44. cursor: pointer;
  45. }
  46. .image-browser-library-form .views-col .views-field-entity-browser-select{
  47. display: inline-block;
  48. margin-right: 5px;
  49. }
  50. .image-browser-library-form .views-col .views-field-filename{
  51. display: inline-block;
  52. }
  53. .image-browser-library-form .views-col.selected:after{
  54. content: "";
  55. position: absolute;
  56. width: 100%;
  57. height: 100%;
  58. left: 0;
  59. top: 0;
  60. background: rgba(0,0,0,0.5);
  61. }
  62. .image-browser-wrapper .remove{
  63. display: none;
  64. }
  65. .image-browser-wrapper.file-selected .browser{
  66. display: none;
  67. }
  68. .image-browser-wrapper.file-selected .remove{
  69. display: inline-block;
  70. }
  71. .image-browser .image-preview{
  72. border: 1px solid #ddd;
  73. padding: 3px;
  74. background-color: #efefef;
  75. display: none;
  76. }
  77. .image-browser.has-image{
  78. display: table;
  79. width: 100%;
  80. }
  81. .image-browser.has-image .image-preview{
  82. display: inline-block;
  83. }
  84. .image-browser.has-image .image-preview img{
  85. max-width: 50px;
  86. max-height: 50px;
  87. }
  88. .image-browser .image-remove{
  89. display: none;
  90. }
  91. .image-browser.has-image .image-remove{
  92. display: inline-block;
  93. }
  94. .view-dexp-image-browser .views-row{
  95. display: flex;
  96. }