root / drupal7 / sites / all / modules / media / css / media.css @ 2cf41c1d
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 |
#media-browser-tabset .ui-widget-header { |
23 |
background: none; |
24 |
} |
25 |
|
26 |
/* Remove the default border */
|
27 |
.ui-widget-content {
|
28 |
border: none; |
29 |
} |
30 |
|
31 |
/* *********************************************************** */
|
32 |
/* Browser layout themeing */
|
33 |
|
34 |
/* Size the branding header appropriately */
|
35 |
#media-browser-tabset #branding { |
36 |
padding: 10px 10px 0px 10px; |
37 |
} |
38 |
|
39 |
#media-browser-tabset #branding h1 { |
40 |
float: left; |
41 |
height: 16px; |
42 |
margin-top: 0px; |
43 |
} |
44 |
|
45 |
/* Float the tabs right to keep the UI consistent across themes */
|
46 |
#media-tabs-wrapper {
|
47 |
float: right; |
48 |
} |
49 |
|
50 |
#media-browser-tabset ul.tabs { |
51 |
padding: 0; |
52 |
border: none; |
53 |
} |
54 |
|
55 |
/* Reset the height to match the browser */
|
56 |
#media-browser-tabset ul.tabs.primary li a:link { |
57 |
font-weight: bold; |
58 |
margin-right: 0; |
59 |
} |
60 |
|
61 |
/* *********************************************************** */
|
62 |
/* Media item display */
|
63 |
|
64 |
.media-item {
|
65 |
background: #eee; |
66 |
border: 1px solid #CCCCCC; |
67 |
box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05); |
68 |
display: inline-block; |
69 |
padding: 5px; |
70 |
position: relative; |
71 |
} |
72 |
|
73 |
.media-item img { |
74 |
display: block; |
75 |
} |
76 |
|
77 |
.media-item .label-wrapper { |
78 |
background: rgba(255,255,255,.8); |
79 |
bottom: 0; |
80 |
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); |
81 |
left: 0; |
82 |
max-height: 100%; |
83 |
overflow: hidden; |
84 |
position: absolute; |
85 |
right: 0; |
86 |
text-align: center; |
87 |
word-wrap: break-word; |
88 |
} |
89 |
|
90 |
.media-item .label-wrapper label { |
91 |
font-size: 10px; |
92 |
padding: 5px 10px; |
93 |
} |
94 |
|
95 |
/* Media item lists */
|
96 |
|
97 |
#media-browser-library-list {
|
98 |
margin: 0; |
99 |
padding: 0; |
100 |
} |
101 |
|
102 |
.media-list-thumbnails li { |
103 |
float: left; |
104 |
list-style: none; |
105 |
margin: 0 10px 10px 0; |
106 |
} |
107 |
|
108 |
.media-list-thumbnails li a { |
109 |
text-decoration: none; |
110 |
} |
111 |
|
112 |
.media-list-thumbnails .media-item.selected { |
113 |
background: #F4ECC7; |
114 |
border-color: #058AC5; |
115 |
} |
116 |
|
117 |
.media-list-thumbnails .media-item:hover { |
118 |
border-color: #058AC5; |
119 |
cursor: pointer; |
120 |
} |
121 |
|
122 |
.media-list-thumbnails .media-item .label-wrapper label { |
123 |
color: #058AC5; |
124 |
} |
125 |
|
126 |
.media-list-thumbnails .media-item .label-wrapper label:hover { |
127 |
cursor: pointer; |
128 |
} |
129 |
|
130 |
.media-list-thumbnails .form-type-checkbox { |
131 |
bottom: 117px; |
132 |
left: 6px; |
133 |
margin: 0; |
134 |
padding: 0; |
135 |
position: relative; |
136 |
} |
137 |
|
138 |
/* File field */
|
139 |
|
140 |
.media-widget .preview { |
141 |
display: inline-block; |
142 |
margin-right: 10px; |
143 |
vertical-align: middle; |
144 |
} |
145 |
|
146 |
/* Exposed filter field */
|
147 |
/* Use similar look and feel of a disabled field */
|
148 |
.media-ajaxing-disabled {
|
149 |
background-color: #EBEBE4; |
150 |
} |