You are here

Home » API reference » Media Entity Browser 8.2

media_entity_browser.view.css in Media Entity Browser 8.2

Same filename and directory in other branches
  1. 8 css/media_entity_browser.view.css
/**
 * @media-entity media_entity_browser.view.css
 */

.view-media-entity-browser-view .pager {
  padding: 20px;
}

.view-media-entity-browser-view .view-content {
  overflow: hidden;
}

.view-media-entity-browser-view .views-row {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: block;
  text-align: center;
  border: 2px solid #b8b8b8;
  transition: .2s;
}

@media screen and (min-width:37.5em) { /* 600px */
  .view-media-entity-browser-view .views-row {
    width: 50%;
    float: left;
  }
}

@media screen and (min-width:62.5em) { /* 1000px */
  .view-media-entity-browser-view .views-row {
    width: 33.333%;
  }
}

.view-media-entity-browser-view .views-row.checked {
  border: 2px solid #37802f;
}

.view-media-entity-browser-view .views-row img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

.view-media-entity-browser-view .views-row img::selection {
  background: transparent;
}

.view-media-entity-browser-view .views-row .views-field-entity-browser-select {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.view-media-entity-browser-view .views-row:after {
  content: " ";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: transparent url("../images/check.svg") no-repeat center center;
  background-size: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.view-media-entity-browser-view .views-row.checked:after {
  background-size: 80px 80px;
}

.media-info {
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 0;
  background-color: rgba(0,0,0,.8);
  padding: 5px 10px;
  color: white;
  text-align: left;
}

.media-info span {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  height: 18px;
  width: 18px;
  background-size: 16px 16px;
  margin-right: 4px;
}

.media-info--Video {
  background: transparent url("../images/video.svg") no-repeat;
}

.media-info--Image {
  background: transparent url("../images/image.svg") no-repeat;
}

.media-info--Twitter {
  background: transparent url("../images/twitter.svg") no-repeat;
}

input[type="submit"][name="filter"] {
  margin-left: 10px;
  margin-top: 30px;
}

File

css/media_entity_browser.view.css
View source 
  1. /**

  2.  * @media-entity media_entity_browser.view.css

  3.  */

  4. 

  5. .view-media-entity-browser-view .pager {

  6.   padding: 20px;

  7. }

  8. 

  9. .view-media-entity-browser-view .view-content {

  10.   overflow: hidden;

  11. }

  12. 

  13. .view-media-entity-browser-view .views-row {

  14.   box-sizing: border-box;

  15.   position: relative;

  16.   width: 100%;

  17.   display: block;

  18.   text-align: center;

  19.   border: 2px solid #b8b8b8;

  20.   transition: .2s;

  21. }

  22. 

  23. @media screen and (min-width:37.5em) { /* 600px */

  24.   .view-media-entity-browser-view .views-row {

  25.     width: 50%;

  26.     float: left;

  27.   }

  28. }

  29. 

  30. @media screen and (min-width:62.5em) { /* 1000px */

  31.   .view-media-entity-browser-view .views-row {

  32.     width: 33.333%;

  33.   }

  34. }

  35. 

  36. .view-media-entity-browser-view .views-row.checked {

  37.   border: 2px solid #37802f;

  38. }

  39. 

  40. .view-media-entity-browser-view .views-row img {

  41.   vertical-align: bottom;

  42.   width: 100%;

  43.   height: auto;

  44. }

  45. 

  46. .view-media-entity-browser-view .views-row img::selection {

  47.   background: transparent;

  48. }

  49. 

  50. .view-media-entity-browser-view .views-row .views-field-entity-browser-select {

  51.   position: absolute !important;

  52.   height: 1px;

  53.   width: 1px;

  54.   overflow: hidden;

  55.   clip: rect(1px, 1px, 1px, 1px);

  56. }

  57. 

  58. .view-media-entity-browser-view .views-row:after {

  59.   content: " ";

  60.   width: 100%;

  61.   height: 100%;

  62.   top: 0;

  63.   left: 0;

  64.   position: absolute;

  65.   background: transparent url("../images/check.svg") no-repeat center center;

  66.   background-size: 0;

  67.   -webkit-transition: all 0.2s;

  68.   transition: all 0.2s;

  69. }

  70. 

  71. .view-media-entity-browser-view .views-row.checked:after {

  72.   background-size: 80px 80px;

  73. }

  74. 

  75. .media-info {

  76.   box-sizing: border-box;

  77.   position: absolute;

  78.   z-index: 1;

  79.   width: 100%;

  80.   bottom: 0;

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

  82.   padding: 5px 10px;

  83.   color: white;

  84.   text-align: left;

  85. }

  86. 

  87. .media-info span {

  88.   text-indent: 100%;

  89.   white-space: nowrap;

  90.   overflow: hidden;

  91.   display: inline-block;

  92.   vertical-align: middle;

  93.   height: 18px;

  94.   width: 18px;

  95.   background-size: 16px 16px;

  96.   margin-right: 4px;

  97. }

  98. 

  99. .media-info--Video {

  100.   background: transparent url("../images/video.svg") no-repeat;

  101. }

  102. 

  103. .media-info--Image {

  104.   background: transparent url("../images/image.svg") no-repeat;

  105. }

  106. 

  107. .media-info--Twitter {

  108.   background: transparent url("../images/twitter.svg") no-repeat;

  109. }

  110. 

  111. input[type="submit"][name="filter"] {

  112.   margin-left: 10px;

  113.   margin-top: 30px;

  114. }