media_entity_browser.view.css in Thunder 8.2
/**
* @media-entity media_entity_browser.view.css
*/
.view-media-entity-browser {
margin-bottom: 10px;
width: 100%;
}
.view-media-entity-browser,
.entity-browser-form .entities-list:after {
content: "";
display: table;
clear: both;
}
.entity-browser-form .entities-list .item-container,
.view-media-entity-browser .views-row {
position: relative;
width: 100%;
display: block;
text-align: center;
margin: 4px;
float: left;
}
.entity-browser-form .entities-list .item-container {
width: 151px;
}
.view-media-entity-browser .views-row img,
.entity-browser-form .entities-list article.view-mode-thumbnail img {
border: 2px solid #b8b8b8;
width: 100%;
height: auto;
box-sizing: border-box;
}
.entity-browser-form .entities-list {
margin-bottom: 10px;
clear: left;
padding-top: 10px;
border-top: 2px solid #b8b8b8;
}
@media screen and (min-width:37.5em) { /* 600px */
.entity-browser-form .entities-list .item-container,
.view-media-entity-browser .views-row {
width: 32%;
}
}
@media screen and (min-width:50em) { /* 800px */
.view-media-entity-browser .views-row {
width: 24%;
}
.entity-browser-form .entities-list .item-container {
width: 15em;
}
}
@media screen and (min-width:74em) { /* 1150px */
.view-media-entity-browser .views-row {
width: 15em;
}
}
/* Show filename */
.view-media-entity-browser .views-row:hover .views-field-name {
display: block;
}
.view-media-entity-browser .views-row .views-field-name {
display: none;
}
/* Checker */
.view-media-entity-browser .views-row:after {
content: " ";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: transparent url("/core/misc/icons/73b355/check.svg") no-repeat center center;
background-size: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.view-media-entity-browser .views-row.checked:after {
background-size: 80px 80px;
}
.view-media-entity-browser .views-row img::selection {
background: transparent;
}
.view-media-entity-browser .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 .views-row.checked img {
border: 2px solid #37802f;
}
/* Media info */
.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;
}
File
modules/thunder_media/css/media_entity_browser.view.css
View source
- /**
- * @media-entity media_entity_browser.view.css
- */
-
- .view-media-entity-browser {
- margin-bottom: 10px;
- width: 100%;
- }
-
- .view-media-entity-browser,
- .entity-browser-form .entities-list:after {
- content: "";
- display: table;
- clear: both;
- }
-
- .entity-browser-form .entities-list .item-container,
- .view-media-entity-browser .views-row {
- position: relative;
- width: 100%;
- display: block;
- text-align: center;
- margin: 4px;
- float: left;
- }
-
- .entity-browser-form .entities-list .item-container {
- width: 151px;
- }
-
- .view-media-entity-browser .views-row img,
- .entity-browser-form .entities-list article.view-mode-thumbnail img {
- border: 2px solid #b8b8b8;
- width: 100%;
- height: auto;
- box-sizing: border-box;
- }
-
- .entity-browser-form .entities-list {
- margin-bottom: 10px;
- clear: left;
- padding-top: 10px;
- border-top: 2px solid #b8b8b8;
- }
-
- @media screen and (min-width:37.5em) { /* 600px */
- .entity-browser-form .entities-list .item-container,
- .view-media-entity-browser .views-row {
- width: 32%;
- }
- }
-
- @media screen and (min-width:50em) { /* 800px */
- .view-media-entity-browser .views-row {
- width: 24%;
- }
- .entity-browser-form .entities-list .item-container {
- width: 15em;
- }
- }
-
- @media screen and (min-width:74em) { /* 1150px */
- .view-media-entity-browser .views-row {
- width: 15em;
- }
- }
-
- /* Show filename */
- .view-media-entity-browser .views-row:hover .views-field-name {
- display: block;
- }
-
- .view-media-entity-browser .views-row .views-field-name {
- display: none;
- }
-
- /* Checker */
- .view-media-entity-browser .views-row:after {
- content: " ";
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- position: absolute;
- background: transparent url("/core/misc/icons/73b355/check.svg") no-repeat center center;
- background-size: 0;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- }
-
- .view-media-entity-browser .views-row.checked:after {
- background-size: 80px 80px;
- }
-
- .view-media-entity-browser .views-row img::selection {
- background: transparent;
- }
-
- .view-media-entity-browser .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 .views-row.checked img {
- border: 2px solid #37802f;
- }
-
- /* Media info */
- .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;
- }