MDL-31901 filepicker interface changes:
[moodle.git] / theme / base / style / filemanager.css
CommitLineData
b5e7b638
MG
1/**
2 * File picker
3 */
4/* first or middle sibling, no children */
e709ddd2 5.file-picker .ygtvtn, .filemanager .ygtvtn {background: url([[pix:moodle|y/tn]]) 0 0 no-repeat;width:17px;height:22px;}
b5e7b638 6/* first or middle sibling, collapsable */
e709ddd2 7.file-picker .ygtvtm, .filemanager .ygtvtm {background: url([[pix:moodle|y/tm]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 8/* first or middle sibling, collapsable, hover */
e709ddd2 9.file-picker .ygtvtmh, .filemanager .ygtvtmh {background: url([[pix:moodle|y/tmh]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 10/* first or middle sibling, expandable */
e709ddd2 11.file-picker .ygtvtp, .filemanager .ygtvtp {background: url([[pix:moodle|y/tp]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 12/* first or middle sibling, expandable, hover */
e709ddd2 13.file-picker .ygtvtph, .filemanager .ygtvtph {background: url([[pix:moodle|y/tph]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 14/* last sibling, no children */
e709ddd2 15.file-picker .ygtvln, .filemanager .ygtvln {background: url([[pix:moodle|y/ln]]) 0 0 no-repeat;width:17px;height:22px;}
b5e7b638 16/* Last sibling, collapsable */
e709ddd2 17.file-picker .ygtvlm, .filemanager .ygtvlm {background: url([[pix:moodle|y/lm]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 18/* Last sibling, collapsable, hover */
e709ddd2 19.file-picker .ygtvlmh, .filemanager .ygtvlmh {background: url([[pix:moodle|y/lmh]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 20/* Last sibling, expandable */
e709ddd2 21.file-picker .ygtvlp, .filemanager .ygtvlp {background: url([[pix:moodle|y/lp]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 22/* Last sibling, expandable, hover */
e709ddd2 23.file-picker .ygtvlph, .filemanager .ygtvlph {background: url([[pix:moodle|y/lph]]) 0 0 no-repeat;width:34px;height:22px;cursor:pointer;}
b5e7b638 24/* Loading icon */
e709ddd2 25.file-picker .ygtvloading, .filemanager .ygtvloading {background: url([[pix:moodle|y/loading]]) 0 0 no-repeat;width:16px;height:22px;}
b5e7b638 26/* the style for the empty cells that are used for rendering the depth* of the node */
e709ddd2
MG
27.file-picker .ygtvdepthcell, .filemanager .ygtvdepthcell {background: url([[pix:moodle|y/vline]]) 0 0 no-repeat;width:17px;height:22px;}
28.file-picker .ygtvblankdepthcell, .filemanager .ygtvblankdepthcell {width:17px;height:22px;}
b5e7b638 29/* the style of the div around each node */
e709ddd2
MG
30.file-picker .ygtvitem table, .filemanager .ygtvitem table{margin-bottom:0;}
31.file-picker .ygtvitem td, .filemanager .ygtvitem td {border:none;padding:0;}
b5e7b638 32/* the style of the div around each node's collection of children */
e709ddd2 33* html .file-picker .ygtvchildren, * html .filemanager .ygtvchildren {height:1%;}
b5e7b638
MG
34/* the style of the text label in ygTextNode */
35.file-picker .ygtvlabel,
36.file-picker .ygtvlabel:link,
37.file-picker .ygtvlabel:visited,
e709ddd2
MG
38.file-picker .ygtvlabel:hover,
39.filemanager .ygtvlabel,
40.filemanager .ygtvlabel:link,
41.filemanager .ygtvlabel:visited,
42.filemanager .ygtvlabel:hover {margin-left:2px;text-decoration: none;}
43.file-picker .fp-treeview .fp-folder .fp-icon,
44.filemanager .fp-treeview .fp-folder .fp-icon {display:none;}
45
b5e7b638
MG
46.file-picker {font-size:12px;}
47.file-picker.fp-generallayout {width:700px;height:480px;}
e88d5641
BR
48
49
50.file-picker {font-size:11px;color: #555;letter-spacing: .2px;}
51.file-picker a {color:#555;}
52.file-picker a:hover {color:#555;text-decoration: none;}
53.file-picker select, input, button, textarea {/*font: 99% arial,helvetica,clean,sans-serif;*/color:#555;letter-spacing: .2px;}
54.file-picker input {border: 1px solid #BBB;width: 265px;height: 18px;padding: 1px 6px;}
55.file-picker select {height: 22px;padding: 2px 1px;}
b5e7b638 56.file-picker strong {background:#FFFFCC;}
e88d5641
BR
57.file-picker .fp-content-center {height: 100%;width: 100%;display:table-cell;vertical-align: middle;}
58
59/*
60 * Layout
61 */
62.file-picker.fp-generallayout {/*width: 724px;*/min-width: 724px;max-width: 980px;border: none;border:1px solid #CCC;border-radius:10px;position: relative;}
63.file-picker .fp-wrapper {width:724px;}
64.file-picker .yui3-widget-hd {border-radius: 10px 10px 0px 0px;border-bottom: 1px solid #BBB;padding:5px 5px 5px 5px!important;text-align: center;font-size:12px;letter-spacing: 1px;color:#333!important; text-shadow: 1px 1px 1px #FFF;filter: dropshadow(color=#FFF, offx=1, offy=1);
65background: #CCC!important;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#CCC')!important;background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC))!important;background: -moz-linear-gradient(top, #FFF, #CCC)!important;}
66.file-picker .fp-repo-area {width:180px;overflow:auto;display:inline-block;border-right:1px solid #BBB;position:absolute;top:26px;bottom:1px;}
67.file-picker .fp-right {background: yellow;height: auto;}
68.file-picker .fp-repo-items {vertical-align:top;display: inline-block;margin-left: 181px;}
69.file-picker .fp-navbar {background: #F2F2F2;min-height:27px;border-bottom: 1px solid #BBB;padding: 5px 8px;/*position: absolute;left:182px;right:0px;*/width:527px;}
70.file-picker .fp-content {background: #FFF;clear: both;overflow:auto;/*resize:both;*/width: 543px;min-width: 543px;max-width: 780px;height: 349px;min-height: 349px;max-height: 700px;/*border-bottom-right-radius: 10px;*//*top:100px;position: relative;*/margin-bottom: 6px;}
71.file-picker .fp-repo-items p{width: auto;}
5cf44c1f 72.file-picker .fp-content .fp-object-container {width:98%;height:98%;}
e88d5641
BR
73
74/*
75 * Repositories
76 */
b5e7b638
MG
77.file-picker .fp-list {list-style-type:none;padding:0;float:left;width:100%;margin:0;}
78.dir-rtl .file-picker .fp-list {text-align:right;}
e88d5641
BR
79.file-picker .fp-list .fp-repo {display:block;padding:.5em .7em;}
80.file-picker .fp-list .fp-repo.active {background:#F2F2F2;}
81.file-picker .fp-repo-icon {padding: 0px 7px 0px 5px;}
82
83/*
84 * Repository tools, path & view
85 */
86.file-picker .fp-viewbar {float:right;width:69px;height:22px;/*margin-top:3px;*/margin-right:8px;}
87.file-picker .fp-viewbar.disabled {/*display:none;*/}
88.file-picker .fp-vb-icons {background:url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;width:22px;height:22px;display: inline-block;}
89.file-picker .fp-vb-icons.checked {background:url('[[pix:theme|fp/view_icon_selected]]');}
90.file-picker .fp-viewbar.disabled .fp-vb-icons {background:url('[[pix:theme|fp/view_icon_inactive]]');}
91.file-picker .fp-vb-details {background:url('[[pix:theme|fp/view_list_active]]') no-repeat 0px 0px;width:23px;height:22px;display: inline-block;/*margin-left: -4px;*/margin-left: -3px;}
92.file-picker .fp-vb-details.checked {background:url('[[pix:theme|fp/view_list_selected]]');}
93.file-picker .fp-viewbar.disabled .fp-vb-details {background:url('[[pix:theme|fp/view_list_inactive]]');}
94.file-picker .fp-vb-tree {background:url('[[pix:theme|fp/view_tree_active]]') no-repeat 0px 0px;width:23px;height:22px;display: inline-block;/*margin-left: -4px;*/margin-left: -4px;}
95.file-picker .fp-vb-tree.checked {background:url('[[pix:theme|fp/view_tree_selected]]');}
96.file-picker .fp-viewbar.disabled .fp-vb-tree {background:url('[[pix:theme|fp/view_tree_inactive]]');}
97
98.file-picker .fp-toolbar {/*padding:7px 0px 0px 0px;*/display: table-row;}
99.file-picker .fp-toolbar.empty {display:none;}
100.file-picker .fp-toolbar .disabled {display:none;}
101.file-picker .fp-toolbar div {display: inline-block;padding: 0px 2px 2px;}
102.file-picker .fp-toolbar img {vertical-align: -20%;margin-right: 5px;}
103.file-picker .fp-toolbar a {}
104.file-picker .fp-toolbar .fp-search {}
105.file-picker .fp-searchbar {}
106.file-picker .search-entry {background:#FFF url('[[pix:a/search]]') no-repeat 3px 3px;height:18px;width:230px;border: 1px solid #BBB;padding-left:20px;/*margin-left: 7px;*/}
107
108.file-picker .fp-pathbar {display: table-row;}
109.file-picker .fp-pathbar .fp-path-folder {background:url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;width:27px;height:12px;margin-left: 4px;}
110.file-picker .fp-pathbar .fp-path-folder-name {margin-left: 32px;line-height: 20px;}
111
112/*
113 * Icon view
114 */
115.file-picker .fp-iconview .fp-file {float:left;display: block;text-align:center;padding: 5px 5px;}
116.file-picker .fp-iconview .fp-thumbnail {/*overflow: hidden;*/display: table-cell;vertical-align: middle;}
117.file-picker .fp-iconview .fp-thumbnail img {border: 1px solid #CCC;padding: 3px;-webkit-box-shadow: 1px 1px 2px 0px #CCC;-moz-box-shadow: 1px 1px 2px 0px #CCC;box-shadow: 1px 1px 2px 0px #CCC;}
118/*.file-picker .fp-iconview .fp-file .fp-thumbnail.over {border:1px solid red;}*/
119.file-picker .fp-iconview .fp-filename {height:28px;min-width:50px;word-wrap:break-word;padding-top: 5px;overflow: hidden;}
120
121/*
122 * Table view
123 */
124.file-picker .yui3-datatable table {border: 0px solid #BBB;width:100%;}
125.file-picker .yui3-datatable-header {background: #FFF;border-bottom: 1px solid #CCC;border-left: 0 solid #FFF;color: #555;}
126.file-picker .yui3-datatable-columns .yui3-datatable-sorted, .file-picker .yui3-datatable-sortable-column:hover {background-color: #FFF;}
127.file-picker .yui3-datatable-odd .yui3-datatable-cell {background-color: #F2F2F2;border-left: 0px solid #F2F2F2;}
128.file-picker .yui3-datatable-data .yui3-datatable-odd .yui3-datatable-sorted {background-color: #F2F2F2;}
129.file-picker .yui3-datatable-even .yui3-datatable-cell {background-color: #FFF;border-left: 0px solid #FFF;}
130.file-picker .yui3-datatable-data .yui3-datatable-even .yui3-datatable-sorted {background-color: #FFF;}
131.file-picker .fp-icon img {max-height:16px;max-width:16px;}
132
133/*
134 * Login
135 */
136.file-picker .fp-login-form {height: 100%;width: 100%;display: table;}
137.file-picker .fp-login-form table {margin: 0 auto;}
138.file-picker .fp-login-form p {text-align: center;margin-top: 3em;}
139.file-picker .fp-login-form .fp-login-input .label {text-align: right;vertical-align: middle;/*width: 30%;*/}
140.file-picker .fp-login-form .fp-login-input .input {text-align: left;}
141.file-picker .fp-login-form input[type="checkbox"]{width: 15px;height:15px;}
142
143/*
144 * Select
145 */
146.file-picker .fp-select {width:420px;min-height:auto;text-align:left;background: #F2F2F2;border-radius: 8px;border: 1px solid #FFF;
147-webkit-box-shadow: 5px 5px 20px 0px #666666;-moz-box-shadow: 5px 5px 20px 0px #666666;box-shadow: 5px 5px 20px 0px #666666;text-align: center;}
55089a9d
MG
148.file-picker.fp-select .uneditable {display:none;}
149.file-picker.fp-select p {}
150.file-picker.fp-select .fp-select-loading {display:none;}
151.file-picker.fp-select.loading .fp-select-loading {display:block;}
152.file-picker.fp-select.loading form {display:none;}
e88d5641
BR
153.file-picker .fp-select-confirm {background: #FFF;padding: 3px 20px 2px 20px; margin: 5px 0px 10px 20px; border-radius: 10px;float:left;-webkit-box-shadow: 2px 2px 1px .1px #999;-moz-box-shadow: 2px 2px 1px .1px #999;box-shadow: 2px 2px 3px .1px #999;}
154.file-picker .fp-select-cancel {background: #FFF;padding: 3px 20px 2px 20px; margin: 5px 0px 10px 20px; border-radius: 10px;float:left;-webkit-box-shadow: 2px 2px 1px .1px #999;-moz-box-shadow: 2px 2px 1px .1px #999;box-shadow: 2px 2px 3px .1px #999;}
55089a9d
MG
155.file-picker.fp-select .fp-hr {clear: both;height: 1px; background-color: #FFF;border-bottom: 1px solid #BBB;width: auto; margin: 20px;}
156.file-picker.fp-select table {margin: 10px 10px;}
157.file-picker.fp-select .fp-thumbnail {float:left;width:110px;height:110px;line-height: 110px;text-align: center;margin: 10px 0px 10px 20px;background: #FFF;-webkit-box-shadow: inset 0px 0px 10px 0px #BBB;-moz-box-shadow: inset 0px 0px 10px 0px #BBB;box-shadow: inset 0px 0px 10px 0px #BBB;}
158.file-picker.fp-select .fp-thumbnail img {border: 1px solid #CCC;padding:3px;vertical-align: middle;}
159.file-picker.fp-select .fp-fileinfo {display: inline-block;/*margin-left: 10px; */margin: 4px 0px 20px 0px;width:240px;text-align: left;}
160.file-picker.fp-select .fp-fileinfo div {/*paddign-top:5px;padding-bottom:5px;*/padding: 4px 0px;}
e88d5641
BR
161
162/*
163 * Upload
164 */
165.file-picker .fp-upload-form {height: 100%;width: 100%;display: table;}
166.file-picker .fp-upload-form table {margin: 0 auto;}
167.file-picker .fp-upload-btn {/*clear:both;*/margin: 2em;}
168
169/*
170 * Error
171 */
172.file-picker .fp-content-error {height: 100%;width: 100%;display: table;text-align: center;}
173.file-picker .fp-content-error .fp-error {height: 100%;width: 100%;display:table-cell;vertical-align: middle;}
174
175.file-picker .fp-msg {border: none;border:1px solid #CCCCCC;border-radius:10px;text-align: center;padding-bottom: 30px;}
176.file-picker .fp-msg .fp-msg-text {min-width:200px;/*min-height:50px;*/max-width:500px;max-height:300px;overflow:auto;}
177.file-picker .fp-msg.fp-msg-error .fp-msg-text {padding: 30px 40px 20px 40px;margin-bottom: 10px;}
178.file-picker .fp-msg .fp-msg-butok {}
179
180
181
7ccf18a6
MG
182.file-picker .fp-nextpage {clear:both;align:center;}
183.file-picker .fp-nextpage .fp-nextpage-link {align:center;}
184.file-picker .fp-nextpage .fp-nextpage-loading {display:none;}
185.file-picker .fp-nextpage.loading .fp-nextpage-link {display:none;}
186.file-picker .fp-nextpage.loading .fp-nextpage-loading {display:block;}
b5e7b638 187.file-picker .fp-popup {text-align:center;}
e88d5641 188
b5e7b638 189.filepicker-filelist {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid}
e88d5641 190
b5e7b638
MG
191/* file picker search dialog */
192.file-picker div.bd {text-align:left;}
193
194/**
195 * File Manager
196 */
197.filemanager-toolbar {margin: 5px 0;}
198.filemanager-toolbar a {border: 1px solid #AACCEE;background: #F4FAFF;color: black;padding: 3px;}
199.filemanager-toolbar a:hover {background: #FFFFFF;}
200.filemanager-toolbar .helplink a {border: 0px; background: transparent;}
e709ddd2
MG
201.fp-pathbar {margin:0;}
202.filemanager .fp-pathbar.empty {display:none;}
906e7d89 203.filemanager-container {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid;position: relative;}
b5e7b638
MG
204.filemanager-container ul{margin:0;padding:0;}
205.filemanager-container ul li{white-space:nowrap;list-style-type:none;}
206.filemanager-container ul li a{padding:0}
207.filemanager-loading{display:none}
208.jsenabled .filemanager-loading{display:block}
209.fm-menuicon{cursor: pointer;}
210#fm-move-div {margin: 6px;}
211#fm-move-div strong{color:red;}
212.fm-file-entry{border: 1px solid red;}
213.fm-operation {font-weight: bold;}
214
215.filemanager-container,
216.filepicker-filelist {overflow:hidden;}
906e7d89 217
e709ddd2 218.filemanager.fm-loading .fp-pathbar,
906e7d89 219.filemanager.fm-loading .filemanager-toolbar,
906e7d89
MG
220.filemanager.fm-loading .filemanager-container {display:none;}
221
222.filemanager.fm-loaded .filemanager-loading {display:none;}
223
e709ddd2 224.filemanager.fm-nofiles .fp-btn-download {display:none;}
906e7d89 225
e709ddd2 226.filemanager.fm-nomkdir .fp-btn-mkdir {display:none;}
906e7d89 227
e709ddd2 228.filemanager.fm-maxfiles .fp-btn-add {display:none;}
906e7d89
MG
229.filemanager.fm-maxfiles .dndupload-message {display:none;}
230
231.filemanager .fm-empty-container {display:none;}
232.filemanager.fm-noitems .fm-empty-container {display:block;}
e709ddd2 233.filemanager.fm-noitems .filemanager-container .fp-content {display:none;}
906e7d89
MG
234
235.filemanager .filemanager-updating {display:none;text-align:center;}
236.filemanager.fm-updating .filemanager-updating {display:block;}
e709ddd2
MG
237.filemanager.fm-updating .fm-content-wrapper {display:none;}
238.filemanager .fp-iconview .fp-file {float:left;text-align:center;}
239.filemanager .fp-iconview .fp-file div {overflow: hidden;}
240.filemanager .fp-iconview .fp-file .fp-filename {height:48px;text-align:center;min-width:50px;}
6c2367cc 241.filemanager .fp-mainfile .fp-filename {font-weight:bold;}
e709ddd2 242
23b83009
MG
243.filemanager .fp-contextmenu {display:none;}
244.filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:block;position:absolute;right:0px;top:0px;}
245.filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
246.filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {display:inline;}
247
55089a9d
MG
248.filemanager.fp-select .fp-select-loading {display:none;}
249.filemanager.fp-select.loading .fp-select-loading {display:block;}
250.filemanager.fp-select.loading form {display:none;}
e709ddd2
MG
251
252/* disable unavailable actions: */
55089a9d
MG
253/*.filemanager.fp-select.fp-zip .fp-license,*/
254.filemanager.fp-select.fp-folder .fp-license,
255/*.filemanager.fp-select.fp-zip .fp-author,*/
256.filemanager.fp-select.fp-folder .fp-author,
257.filemanager.fp-select.fp-file .fp-file-unzip,
258.filemanager.fp-select.fp-folder .fp-file-unzip,
259.filemanager.fp-select.fp-file .fp-file-zip,
260.filemanager.fp-select.fp-zip .fp-file-zip {display:none;}
261.filemanager.fp-select .fp-file-setmain {display:none;}
262.filemanager.fp-select.fp-cansetmain .fp-file-setmain {display:inline-block;}
263.filemanager.fp-select.fp-folder .fp-file-download {display:none;} /* to be implemented */
906e7d89
MG
264
265/*
266 * Drag and drop support
267 */
b5e7b638
MG
268.filemanager-container .dndupload-target,
269.filepicker-filelist .dndupload-target {background:#f7f998;position:absolute;height:100%;width:100%;top:0;left:0;text-align:center;padding:5px;z-index:1000}
270.filemanager-container.dndupload-over .dndupload-target,
271.filepicker-filelist.dndupload-over .dndupload-target {background:#8EF947;font-weight:bold}
906e7d89
MG
272.dndupload-message {display:none;}
273.dndsupported .dndupload-message {display:inline;}
274.dndupload-target {display:none;}
275.dndsupported .dndupload-ready .dndupload-target {display:block;}
276.dndupload-uploadinprogress {display:none;text-align:center;}
277.dndupload-uploading .dndupload-uploadinprogress {display:block;}