diff options
Diffstat (limited to 'wiki/lib/tpl/dokuwiki/css/_media_fullscreen.css')
-rw-r--r-- | wiki/lib/tpl/dokuwiki/css/_media_fullscreen.css | 541 |
1 files changed, 541 insertions, 0 deletions
diff --git a/wiki/lib/tpl/dokuwiki/css/_media_fullscreen.css b/wiki/lib/tpl/dokuwiki/css/_media_fullscreen.css new file mode 100644 index 0000000..9a00d4d --- /dev/null +++ b/wiki/lib/tpl/dokuwiki/css/_media_fullscreen.css @@ -0,0 +1,541 @@ +/** + * This file provides the styles for the fullscreen media manager + * (?do=media). + * + * What most templates would probably need to change (depending on + * their site width) are the 4 min-width's (search for @change). + */ + + +/*____________ structure ____________*/ + +#mediamanager__page h1 { + margin-bottom: .5em; +} + +#mediamanager__page { + /* min-width must be summary of all 3 panels' min-widths */ + min-width: 50em; /* @change */ + width: 100%; + text-align: left; +} +[dir=rtl] #mediamanager__page { + text-align: right; +} +#mediamanager__page .panel { + float: left; +} +[dir=rtl] #mediamanager__page .panel { + float: right; +} + +#mediamanager__page .namespaces { + width: 20%; + min-width: 10em; /* @change */ + left:0 !important; /* overrules jQuery UI resizable in rtl */ +} +#mediamanager__page .filelist { + width: 50%; + min-width: 25em; /* @change */ + left:0 !important; /* overrules jQuery UI resizable in rtl */ +} +#mediamanager__page .file { + width: 30%; + min-width: 15em; /* @change */ +} + +#mediamanager__page .tabs li { + white-space: nowrap; +} + +#mediamanager__page .panelHeader { + background-color: @ini_background_alt; + margin: 0 10px 10px 0; + padding: 10px 10px 8px; + text-align: left; + min-height: 20px; + overflow: hidden; +} +[dir=rtl] #mediamanager__page .panelHeader { + text-align: right; + margin: 0 0 10px 10px; +} +#mediamanager__page .panelContent { + overflow-y: auto; + overflow-x: hidden; + padding: 0; + margin: 0 10px 10px 0; + position: relative; +} +[dir=rtl] #mediamanager__page .panelContent { + text-align: right; + margin: 0 0 10px 10px; +} + +#mediamanager__page .file .panelHeader, +#mediamanager__page .file .panelContent { + margin-right: 0; +} +[dir=rtl] #mediamanager__page .file .panelHeader, +[dir=rtl] #mediamanager__page .file .panelContent { + margin-left: 0; +} + +#mediamanager__page .ui-resizable-e { + width: 6px; + right: 2px; + background: transparent url(../../images/resizecol.png) center center no-repeat; +} +#mediamanager__page .ui-resizable-e:hover { + background-color: @ini_background_alt; +} +[dir=rtl] #mediamanager__page .ui-resizable-w { + width: 6px; + left: 2px; + background: transparent url(../../images/resizecol.png) center center no-repeat; +} +[dir=rtl] #mediamanager__page .ui-resizable-w:hover { + background-color: @ini_background_alt; +} + + +#mediamanager__page dd { + margin: 0; +} + +#mediamanager__page .panelHeader h3 { + float: left; + font-weight: normal; + font-size: 1em; + padding: 0; + margin: 0 0 3px; +} +[dir=rtl] #mediamanager__page .panelHeader h3 { + float : right +} + + +/*____________ namespaces panel ____________*/ + +[dir=rtl] #mediamanager__page .namespaces { + text-align: right; +} + +/* make it look like a tab (as in _tabs.css) */ +#mediamanager__page .namespaces h2 { + font-size: 1em; + display: inline-block; + padding: .3em .8em; + margin: 0 0 0 .3em; + border-radius: .5em .5em 0 0; + font-weight: normal; + background-color: @ini_background_alt; + color: @ini_text; + border: 1px solid @ini_border; + border-bottom-color: @ini_background_alt; + line-height: 1.4em; + position: relative; + bottom: -1px; + z-index: 2; +} +[dir=rtl] #mediamanager__page .namespaces h2 { + margin: 0 .3em 0 0; + position: relative; + right: 10px; +} +#mediamanager__page .namespaces .panelHeader { + border-top: 1px solid @ini_border; + z-index: 1; +} + +#mediamanager__page .namespaces ul { + margin-left: .2em; + margin-bottom: 0; + padding: 0; + list-style: none; +} +[dir=rtl] #mediamanager__page .namespaces ul { + margin-left: 0; + margin-right: .2em; +} +#mediamanager__page .namespaces ul ul { + margin-left: 1em; +} +[dir=rtl] #mediamanager__page .namespaces ul ul { + margin-left: 0; + margin-right: 1em; +} +#mediamanager__page .namespaces ul ul li { + margin: 0; +} + +#mediamanager__page .namespaces ul .selected { + background-color: __highlight__; + font-weight: bold; +} + + +/*____________ file list panel ____________*/ + +/* file list header */ + +#mediamanager__page .panelHeader form.options { + float: right; + margin-top: -3px; +} +[dir=rtl] #mediamanager__page .panelHeader form.options { + float : left +} +#mediamanager__page .panelHeader ul { + list-style: none; + margin: 0; + padding: 0; +} +#mediamanager__page .panelHeader ul li { + color: @ini_text; + float: left; + line-height: 1; + padding-left: 3px; +} +[dir=rtl] #mediamanager__page .panelHeader ul li { + padding-right: 3px; + padding-left: 0; + float: right; +} + +#mediamanager__page .panelHeader ul li.ui-controlgroup-horizontal { + padding-left: 30px; + margin: 0 0 0 5px; +} +#mediamanager__page .panelHeader ul li.listType { + background: url('../../images/icon-list.png') 3px 1px no-repeat; +} +#mediamanager__page .panelHeader ul li.sortBy { + background: url('../../images/icon-sort.png') 3px 1px no-repeat; +} +[dir=rtl] #mediamanager__page .panelHeader ul li.ui-controlgroup-horizontal { + padding-left: 0; + padding-right: 30px; + margin: 0 5px 0 0; + background-position: right 1px; +} + +#mediamanager__page .panelHeader form.options .ui-controlgroup-horizontal label{ + font-size: 90%; + margin-right: -0.4em; + padding: .3em .5em; + line-height: 1; +} + +/* file list content */ + +#mediamanager__page .filelist ul { + padding: 0; + margin: 0 10px 0 0; +} +[dir=rtl] #mediamanager__page .filelist ul { + margin: 0 0 0 10px; +} +#mediamanager__page .filelist ul.rows { + margin: 0; +} +#mediamanager__page .filelist .panelContent ul li:hover { + background-color: @ini_background_alt; +} + +#mediamanager__page .filelist li dt a { + vertical-align: middle; + display: table-cell; + overflow: hidden; +} + +/* file list as thumbs */ + +#mediamanager__page .filelist .thumbs li { + width: 100px; + min-height: 130px; + display: inline-block; + /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */ + margin: 0 6px 10px 0; + background-color: @ini_background_neu; + color: @ini_text; + padding: 5px; + vertical-align: top; + text-align: center; + position: relative; + line-height: 1.2; +} +[dir=rtl] #mediamanager__page .filelist .thumbs li { + margin-right: 0; + margin-left: 6px; +} + +#mediamanager__page .filelist .thumbs li dt a { + width: 100px; + height: 90px; +} + +#mediamanager__page .filelist .thumbs li dt a img { + max-width: 90px; + max-height: 90px; +} + +#mediamanager__page .filelist .thumbs li .name, +#mediamanager__page .filelist .thumbs li .size, +#mediamanager__page .filelist .thumbs li .filesize, +#mediamanager__page .filelist .thumbs li .date { + display: block; + overflow: hidden; + text-overflow: ellipsis; + width: 90px; + white-space: nowrap; +} +#mediamanager__page .filelist .thumbs li .name { + padding: 5px 0; + font-weight: bold; +} +#mediamanager__page .filelist .thumbs li .date { + font-style: italic; + white-space: normal; +} + +/* file list as rows */ + +#mediamanager__page .filelist .rows li { + list-style: none; + display: block; + position: relative; + max-height: 50px; + margin: 0 0 3px 0; + background-color: @ini_background; + color: @ini_text; + overflow: hidden; +} + +#mediamanager__page .filelist .rows li:nth-child(2n+1) { + background-color: @ini_background_neu; +} + +#mediamanager__page .filelist .rows li dt { + float: left; + width: 10%; + height: 40px; + text-align: center; +} +[dir=rtl] #mediamanager__page .filelist .rows li dt { + float: right; +} +#mediamanager__page .filelist .rows li dt a { + width: 100px; + height: 40px; +} + +#mediamanager__page .filelist .rows li dt a img { + max-width: 40px; + max-height: 40px; +} + +#mediamanager__page .filelist .rows li .name, +#mediamanager__page .filelist .rows li .size, +#mediamanager__page .filelist .rows li .filesize, +#mediamanager__page .filelist .rows li .date { + overflow: hidden; + text-overflow: ellipsis; + float: left; + margin-left: 1%; + white-space: nowrap; +} +[dir=rtl] #mediamanager__page .filelist .rows li .name, +[dir=rtl] #mediamanager__page .filelist .rows li .size, +[dir=rtl] #mediamanager__page .filelist .rows li .filesize, +[dir=rtl] #mediamanager__page .filelist .rows li .date { + float: right; + margin-left: 0; + margin-right: 1%; +} + +#mediamanager__page .filelist .rows li .name { + width: 30%; + font-weight: bold; +} +#mediamanager__page .filelist .rows li .size, +#mediamanager__page .filelist .rows li .filesize { + width: 15%; +} +#mediamanager__page .filelist .rows li .date { + width: 20%; + font-style: italic; + white-space: normal; +} + +/* upload form */ + +#mediamanager__page div.upload { + padding-bottom: 0.5em; +} + +/*____________ file panel ____________*/ + +#mediamanager__page .file ul.actions { + text-align: center; + margin: 0 0 5px; + padding: 0; + list-style: none; +} +#mediamanager__page .file ul.actions li { + display: inline; + margin: 0; +} + +#mediamanager__page .file div.image { + margin-bottom: 5px; + text-align: center; +} + +#mediamanager__page .file div.image img { + width: 100%; +} + +#mediamanager__page .file dl { + margin-bottom: 0; +} +#mediamanager__page .file dl dt { + font-weight: bold; + display: block; + background-color: @ini_background_alt; +} +#mediamanager__page .file dl dd { + display: block; + background-color: @ini_background_neu; +} + + +/* file meta data edit form */ + +#mediamanager__page form.meta div.row { + margin-bottom: 5px; +} + +#mediamanager__page form.meta label span { + display: block; +} + +#mediamanager__page form.meta input { + width: 50%; +} + +#mediamanager__page form.meta button { + width: auto; +} + +#mediamanager__page form.meta textarea.edit { + height: 6em; + width: 95%; + min-width: 95%; + max-width: 95%; +} + +/* file revisions form */ + +#mediamanager__page form.changes ul { + margin-left: 10px; + padding: 0; + list-style-type: none; +} +[dir=rtl] #mediamanager__page form.changes ul { + margin-left: 0; + margin-right: 10px; +} + +#mediamanager__page form.changes ul li div.li div { + font-size: 90%; + color: @ini_text_neu; + padding-left: 18px; +} +[dir=rtl] #mediamanager__page form.changes ul li div.li div { + padding-left: 0; + padding-right: 18px; +} +#mediamanager__page form.changes ul li div.li input { + position: relative; + top: 1px; +} + +/* file diff view */ + +#mediamanager__diff table { + table-layout: fixed; + border-width: 0; +} + +#mediamanager__diff td, +#mediamanager__diff th { + width: 48%; + margin: 0 5px 10px 0; + padding: 0; + vertical-align: top; + text-align: left; + border-color: @ini_background; +} +[dir=rtl] #mediamanager__diff td, +[dir=rtl] #mediamanager__diff th { + margin: 0 0 10px 5px; + text-align: right; +} + +#mediamanager__diff th { + font-weight: normal; + background-color: @ini_background; + line-height: 1.2; +} +#mediamanager__diff th a { + font-weight: bold; +} +#mediamanager__diff th span { + font-size: 90%; +} + +#mediamanager__diff dl dd strong{ + background-color: __highlight__; + color: @ini_text; + font-weight: normal; +} + +/* image diff views */ + +#mediamanager__page .file form.diffView { + margin-bottom: 10px; + display: block; +} + +#mediamanager__diff div.slider { + margin: 10px; + width: 95%; +} + +#mediamanager__diff .imageDiff { + position: relative; +} +#mediamanager__diff .imageDiff .image2 { + position: absolute; + top: 0; + left: 0; +} + +#mediamanager__diff .imageDiff.opacity .image2 { + opacity: 0.5; +} + +#mediamanager__diff .imageDiff.portions .image2 { + border-right: 1px solid red; + overflow: hidden; +} + +#mediamanager__diff .imageDiff.portions img { + float: left; +} + +#mediamanager__diff .imageDiff img { + width: 100%; + max-width: none; +} |