You are here

Home » API reference » D7 Media 7.3

media.css in D7 Media 7.3

Same filename and directory in other branches
  1. 7.4 css/media.css
  2. 7 css/media.css
  3. 7.2 css/media.css

Styles for the media library.

The display and layout of the Media browser assumes Drupal's Seven theme as the theme active when this is displayed.

File

css/media.css
View source 
  1. /**

  2.  * @file

  3.  * Styles for the media library.

  4.  *

  5.  * The display and layout of the Media browser assumes Drupal's Seven theme as

  6.  * the theme active when this is displayed.

  7.  */

  8. 

  9. /* jQuery UI Resets */

  10. .ui-tabs {

  11.   padding: 0;

  12. }

  13. 

  14. .ui-dialog.media-wrapper .ui-dialog-content {

  15.   padding: 0;

  16. }

  17. 

  18. .ui-dialog.media-wrapper .ui-dialog-buttonpane {

  19.   display: none;

  20. }

  21. 

  22. /* Workaround for Modal dialog underneith the Ctools modal dialog with jQuery 1.10.

  23.    @TODO Remove this if ever ctools issue #1397370 ever gets fixed. */

  24. .ui-front.media-wrapper {

  25.   z-index: 10001 !important;

  26. }

  27. 

  28. #media-browser-tabset .ui-widget-header {

  29.   background: none;

  30. }

  31. 

  32. /* Remove the default border */

  33. .ui-widget-content {

  34.   border: none;

  35. }

  36. 

  37. /* *********************************************************** */

  38. /* Browser layout themeing */

  39. 

  40. /* Size the branding header appropriately */

  41. #media-browser-tabset #branding {

  42.   padding: 10px 10px 0px 10px;

  43. }

  44. 

  45. #media-browser-tabset #branding h1 {

  46.   float: left;

  47.   height: 16px;

  48.   margin-top: 0px;

  49. }

  50. 

  51. /* Float the tabs right to keep the UI consistent across themes */

  52. #media-tabs-wrapper {

  53.   float: right;

  54. }

  55. 

  56. #media-browser-tabset ul.tabs {

  57.   padding: 0;

  58.   border: none;

  59. }

  60. 

  61. /* Reset the height to match the browser */

  62. #media-browser-tabset ul.tabs.primary li a:link {

  63.   font-weight: bold;

  64.   margin-right: 0;

  65. }

  66. 

  67. /* *********************************************************** */

  68. /* Media item display */

  69. 

  70. .media-item {

  71.   background: #eee;

  72.   border: 1px solid #cccccc;

  73.   box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05);

  74.   display: inline-block;

  75.   padding: 5px;

  76.   position: relative;

  77. }

  78. 

  79. .media-item img {

  80.   display: block;

  81. }

  82. 

  83. .media-item .label-wrapper {

  84.   background: rgba(255,255,255,.8);

  85.   bottom: 0;

  86.   box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);

  87.   left: 0;

  88.   max-height: 100%;

  89.   overflow: hidden;

  90.   position: absolute;

  91.   right: 0;

  92.   text-align: center;

  93.   word-wrap: break-word;

  94. }

  95. 

  96. .media-item .label-wrapper label {

  97.   font-size: 10px;

  98.   padding: 5px 10px;

  99. }

  100. 

  101. /* Media item lists */

  102. 

  103. #media-browser-library-list {

  104.   margin: 0;

  105.   padding: 0;

  106. }

  107. 

  108. .media-list-thumbnails li {

  109.   float: left;

  110.   list-style: none;

  111.   margin: 0 10px 10px 0;

  112. }

  113. 

  114. .media-list-thumbnails li a {

  115.   text-decoration: none;

  116. }

  117. 

  118. .media-list-thumbnails .media-item.selected {

  119.   background: #f4ecc7;

  120.   border-color: #058ac5;

  121. }

  122. 

  123. .media-list-thumbnails .media-item:hover {

  124.   border-color: #058ac5;

  125.   cursor: pointer;

  126. }

  127. 

  128. .media-list-thumbnails .media-item .label-wrapper label {

  129.   color: #058ac5;

  130. }

  131. 

  132. .media-list-thumbnails .media-item .label-wrapper label:hover {

  133.   cursor: pointer;

  134. }

  135. 

  136. .media-list-thumbnails .form-type-checkbox {

  137.   bottom: 117px;

  138.   left: 6px;

  139.   margin: 0;

  140.   padding: 0;

  141.   position: relative;

  142. }

  143. 

  144. /* File field */

  145. 

  146. .media-widget .preview {

  147.   display: inline-block;

  148.   margin-right: 10px;

  149.   vertical-align: middle;

  150. }

  151. 

  152. /* Exposed filter field */

  153. /* Use similar look and feel of a disabled field */

  154. .media-ajaxing-disabled {

  155.   background-color: #ebebe4;

  156. }