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