media.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. .app-media .page-content-actions .checkbox-custom {
  2. margin-bottom: 20px; }
  3. .app-media .page-content-actions .actions-inner {
  4. border-bottom: 1px solid #e4eaec; }
  5. .app-media .page-content-actions .btn-outline.btn-default {
  6. z-index: 2; }
  7. .app-media .blocks {
  8. margin-left: -5px;
  9. margin-right: -5px; }
  10. .app-media .blocks > li {
  11. padding-left: 5px;
  12. padding-right: 5px;
  13. margin-bottom: 0; }
  14. .app-media .time {
  15. color: #a3afb7; }
  16. .app-media .media-item .checkbox-custom label::before {
  17. position: relative; }
  18. .app-media .media-item .dropdown:hover .dropdown-toggle {
  19. color: #76838f; }
  20. .app-media .media-item .dropdown:hover .dropdown-menu {
  21. display: block;
  22. margin-top: 0; }
  23. .app-media .media-list {
  24. padding: 20px 30px;
  25. overflow: hidden; }
  26. .app-media .media-list .image-wrap > .image {
  27. max-width: 100%; }
  28. .app-media .media-list .media-item-actions {
  29. display: none; }
  30. .app-media .media-list .media-item {
  31. cursor: pointer; }
  32. .app-media .media-list.is-grid .media-item {
  33. width: 100%;
  34. padding: 10px;
  35. margin-bottom: 10px;
  36. border-radius: 0.286rem;
  37. border: 1px solid transparent;
  38. position: relative;
  39. cursor: pointer; }
  40. .app-media .media-list.is-grid .media-item:hover, .app-media .media-list.is-grid .media-item.active {
  41. border-color: #e4eaec;
  42. background-color: #f3f7f9; }
  43. .app-media .media-list.is-grid .media-item:hover .dropdown, .app-media .media-list.is-grid .media-item.active .dropdown {
  44. display: block; }
  45. .app-media .media-list.is-grid .media-item .checkbox-custom {
  46. position: absolute;
  47. margin: 0;
  48. padding: 0;
  49. top: 9px;
  50. left: 34px; }
  51. .app-media .media-list.is-grid .media-item .image-wrap {
  52. margin-bottom: 10px; }
  53. .app-media .media-list.is-grid .media-item .dropdown {
  54. float: right;
  55. display: none; }
  56. .app-media .media-list.is-grid .media-item .dropdown.open .dropdown-toggle, .app-media .media-list.is-grid .media-item .dropdown.open .dropdown-toggle:hover {
  57. color: #526069; }
  58. .app-media .media-list.is-grid .media-item .dropdown-toggle {
  59. color: #a3afb7; }
  60. .app-media .media-list.is-grid .media-item .dropdown-menu {
  61. -webkit-transform-origin: 100% 0;
  62. transform-origin: 100% 0;
  63. -webkit-animation-duration: .3s;
  64. animation-duration: .3s; }
  65. .app-media .media-list.is-grid .media-item .dropdown-menu .icon {
  66. margin-right: 10px; }
  67. .app-media .media-list.is-grid .media-item .dropdown-menu > li > a {
  68. padding: 3px 10px; }
  69. .app-media .media-list.is-list {
  70. padding-left: 0;
  71. padding-right: 0; }
  72. .app-media .media-list.is-list .blocks > li {
  73. width: 100%; }
  74. .app-media .media-list.is-list .media-item {
  75. padding: 20px 30px;
  76. position: relative;
  77. white-space: nowrap; }
  78. .app-media .media-list.is-list .media-item > div {
  79. display: inline-block; }
  80. .app-media .media-list.is-list .media-item:hover {
  81. background-color: #f3f7f9; }
  82. .app-media .media-list.is-list .media-item:hover .media-item-actions {
  83. display: block; }
  84. .app-media .media-list.is-list .media-item:after {
  85. content: '';
  86. display: block;
  87. border-bottom: 1px solid #e4eaec;
  88. width: calc(100% - 60px);
  89. position: absolute;
  90. left: 30px;
  91. bottom: 0; }
  92. .app-media .media-list.is-list .checkbox-custom {
  93. margin-right: 30px; }
  94. .app-media .media-list.is-list .image-wrap {
  95. width: 140px;
  96. height: 100px;
  97. margin-right: 20px;
  98. font-size: 0; }
  99. .app-media .media-list.is-list .image-wrap:before {
  100. content: "";
  101. display: inline-block;
  102. height: 100%;
  103. vertical-align: middle; }
  104. .app-media .media-list.is-list .info-wrap {
  105. vertical-align: top; }
  106. .app-media .media-list.is-list .info-wrap .title {
  107. white-space: nowrap;
  108. overflow: hidden;
  109. text-overflow: ellipsis; }
  110. .app-media .media-list.is-list .dropdown {
  111. display: none; }
  112. .app-media .media-list.is-list .media-item-actions {
  113. margin-top: 15px; }
  114. .app-media .media-list.is-list .media-item-actions .btn-icon {
  115. color: #a3afb7;
  116. margin-left: 1px; }
  117. .app-media .slidePanel-header {
  118. height: 350px;
  119. width: 100%; }
  120. .app-media .slidePanel-header .slidePanel-actions {
  121. min-height: 46px; }
  122. .app-media .slidePanel .overlay-top {
  123. white-space: nowrap;
  124. overflow: hidden;
  125. text-overflow: ellipsis; }
  126. .app-media .slidePanel .overlay-background {
  127. background-color: rgba(38, 50, 56, 0.6); }
  128. .app-media .slidePanel .media-header {
  129. position: relative;
  130. margin-bottom: 20px; }
  131. .app-media .slidePanel .media-header::after {
  132. display: block;
  133. clear: both;
  134. content: ""; }
  135. .app-media .slidePanel .media-header .time {
  136. line-height: 40px; }
  137. .app-media .slidePanel .media-header .share {
  138. float: right;
  139. display: inline-block; }
  140. .app-media .slidePanel .media-header .tags {
  141. display: inline-block; }
  142. .app-media .slidePanel .avatar {
  143. vertical-align: middle; }
  144. @media (max-width: 479.98px) {
  145. .app-media .is-list .info-wrap {
  146. display: block !important;
  147. padding-left: 60px; }
  148. .app-media .is-list .info-wrap::after {
  149. display: block;
  150. clear: both;
  151. content: ""; }
  152. .app-media .is-list .media-item-actions {
  153. display: block;
  154. margin-top: 5px; }
  155. .app-media .page-header .page-header-actions {
  156. margin-top: 20px;
  157. position: relative;
  158. top: 0;
  159. right: 0;
  160. -webkit-transform: none;
  161. transform: none; }
  162. .app-media .slidePanel .media-header .share {
  163. float: none;
  164. display: block;
  165. margin-top: 20px; } }