From 1d83a075c756f41de40688c5ac1050827e93f3e8 Mon Sep 17 00:00:00 2001 From: ChristianSchmidt1981 <cschmidt.solingen@gmail.com> Date: Wed, 29 Apr 2015 11:08:18 +0200 Subject: [PATCH 1/3] test --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 769f5578..9a8ad3bc 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ -<!DOCTYPE html> + +<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> From fe76f8a25ca06adc67f0a2b524f069f872d1eebd Mon Sep 17 00:00:00 2001 From: ChristianSchmidt1981 <cschmidt.solingen@gmail.com> Date: Wed, 29 Apr 2015 11:08:33 +0200 Subject: [PATCH 2/3] rollback --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 9a8ad3bc..769f5578 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,4 @@ - -<!DOCTYPE html> +<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> From 4e4ae47cc96896e7da44d0797c1e826e4a2c2247 Mon Sep 17 00:00:00 2001 From: cschmidt <christian.schmidt@trivago.com> Date: Mon, 11 May 2015 12:23:22 +0200 Subject: [PATCH 3/3] unify coding-style from the css remove duplicate styles add sub-css-classes for implement this feature-application in a separate administration-written-tool --- themes/default/styles/filemanager.css | 270 +++++++++++++------ themes/default/styles/ie.css | 45 ++-- themes/flat-dark/styles/filemanager.css | 206 ++++++++++---- themes/flat-dark/styles/ie.css | 12 +- themes/flat-oil/styles/filemanager.css | 210 +++++++++++---- themes/flat-oil/styles/ie.css | 12 +- themes/flat-turquoise/styles/filemanager.css | 232 +++++++++++----- themes/flat-turquoise/styles/ie.css | 12 +- 8 files changed, 741 insertions(+), 258 deletions(-) diff --git a/themes/default/styles/filemanager.css b/themes/default/styles/filemanager.css index 0d36da5e..453c234a 100644 --- a/themes/default/styles/filemanager.css +++ b/themes/default/styles/filemanager.css @@ -98,16 +98,18 @@ video, audio { #fileinfo #main-title { margin: 10px auto; } + #fileinfo h1 { font-size: 20px; display: inline-block; color:#8fabc6; } + #fileinfo > h1 { margin-top:3em } -div#tools { +div#tools { display: inline-block; margin-left:1em; } @@ -144,7 +146,7 @@ div#tools { margin: 50px auto; } -button { +div.file_manager button { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; @@ -166,14 +168,14 @@ button { line-height:1.7em; } -button:hover { +div.file_manager button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#dfdfdf; } -button span { +div.file_manager button span { display: block; padding-left: 20px; background-position: left center; @@ -182,18 +184,23 @@ button span { white-space: nowrap; } -button:active, -button:focus { +div.file_manager button:active, +div.file_manager button:focus { color:#000; outline-color: transparent; outline-style: none; outline-width: 0; } -button.edition { color: black;} +div.file_manager button.edition { + color: black; +} + +div.file_manager button.em { + background:#CCDBFF;/*#ADDBC3;*/ +} -button.em { background:#CCDBFF;/*#ADDBC3;*/} -button.em:hover { +div.file_manager button.em:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #C3D2F7), color-stop(1, #CCDBFF) ); background:-moz-linear-gradient( center top, #C3D2F7 5%, #CCDBFF 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C3D2F7', endColorstr='#CCDBFF'); @@ -202,9 +209,9 @@ button.em:hover { /** Input file Replacement */ - -input, button { - vertical-align: text-top; +div.file_manager input, +div.file_manager button { + vertical-align: text-top; } #file-input-container { @@ -261,7 +268,6 @@ input, button { } } - button#browse { margin-left:0; -webkit-border-top-left-radius: 0px; @@ -273,6 +279,7 @@ button#browse { min-height: 16px; min-width: 40px; } + button#browse span { margin:0; padding:0; @@ -283,9 +290,18 @@ button#browse span { } /** Input file Replacement - end */ -#search, #search div, #folder-info {display:inline;} +#search, +#search div, +#folder-info { + display:inline; +} -#folder-info {font-size:0.8em;color:#777;padding:1.3em;float:right} +#folder-info { + font-size:0.8em; + color:#777; + padding:1.3em; + float:right +} #q { background-color: #F2F2F2; @@ -294,7 +310,6 @@ button#browse span { padding: 0.1em 0.3em; line-height: 1.7em; width: 200px; - } #search span.q-inactive { @@ -319,7 +334,10 @@ button#browse span { } /** Opera hack */ -x:-o-prefocus, #search a.q-reset {top:-14px;} +x:-o-prefocus, +#search a.q-reset { + top:-14px; +} #contents.grid { padding: 15px; @@ -352,9 +370,6 @@ div.clip { overflow: hidden; } -#contents.grid li img { -} - #contents.grid p { display: block; text-align: center; @@ -454,66 +469,134 @@ div.clip { } /* these apply to the contextual menus as well as the buttons */ -#select span, .contextMenu li.select a { background-image: url(../images/accept.png); } -#download span, .contextMenu li.download a { background-image: url(../images/download.png); } -#rename span, .contextMenu li.rename a { background-image: url(../images/tag.png); } -#move span, .contextMenu li.move a { background-image: url(../images/move.png); } -#replace span, .contextMenu li.replace a { background-image: url(../images/replace.png); } -#delete span, .contextMenu li.delete a { background-image: url(../images/bin_closed.png); } -#upload span { background-image: url(../images/upload.png); } -#upload span.loading { background-image: url(../images/ajax-loader.gif);color:#555555;font-size:0.9em; } -#parentfolder span { background-image: url(../images/parentfolder.png); } -#newfolder span { background-image: url(../images/folder_add.png); } -#home span { background-image: url(../images/house.png); background-position: center; } -#level-up span { background-image: url(../images/level-up.png); background-position: center; } - -a#edit-file span, a#copy-button span {display:none} -a#edit-file {display:inline-block;background: url(../images/edit.png) no-repeat center center;width:20px;height:18px;margin:0 0.2em;} -a#copy-button {display:inline-block;background: url(../images/copy.png) no-repeat center center;width:20px;height:18px;margin:0 0.2em;} -span#copied {color:#8C8C8C;font-size:11px;font-weight: normal;vertical-align:middle;} -/*a#edit-file , a#copy-button {border: 1px solid #ccc;}*/ -/* div.jqi button { background-image: url(../images/circular/yes.png); } */ +#select span, +.contextMenu li.select a { + background-image: url(../images/accept.png); +} + +#download span, +.contextMenu li.download a { + background-image: url(../images/download.png); +} + +#rename span, +.contextMenu li.rename a { + background-image: url(../images/tag.png); +} + +#move span, +.contextMenu li.move a { + background-image: url(../images/move.png); +} + +#replace span, +.contextMenu li.replace a { + background-image: url(../images/replace.png); +} + +#delete span, +.contextMenu li.delete a { + background-image: url(../images/bin_closed.png); +} + +#upload span { + background-image: url(../images/upload.png); +} + +#upload span.loading { + background-image: url(../images/ajax-loader.gif); + color:#555555; + font-size:0.9em; +} + +#parentfolder span { + background-image: url(../images/parentfolder.png); +} +#newfolder span { + background-image: url(../images/folder_add.png); +} + +#home span { + background-image: url(../images/house.png); + background-position: center; +} + +#level-up span { + background-image: url(../images/level-up.png); + background-position: center; +} + +a#edit-file span, +a#copy-button span { + display:none +} + +a#edit-file { + display:inline-block; + background: url(../images/edit.png) no-repeat center center; + width:20px; + height:18px; + margin:0 0.2em; +} + +a#copy-button { + display:inline-block; + background: url(../images/copy.png) no-repeat center center; + width:20px; + height:18px; + margin:0 0.2em; +} + +span#copied { + color:#8C8C8C; + font-size:11px; + font-weight: normal; + vertical-align:middle; +} div.jqi { - position: absolute; - font-size: 12px; - font-weight: bold; - min-width: 300px; - padding: 10px; - background-color:#F4F1ED; - border: 1px solid #888; - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -ms-border-radius: 8px; + position: absolute; + font-size: 12px; + font-weight: bold; + min-width: 300px; + padding: 10px; + background-color:#F4F1ED; + border: 1px solid #888; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -ms-border-radius: 8px; } .jqiclose { - float: right; - margin: -9px -7px 0 0; - font-size: 9px; - cursor: pointer; - text-transform: lowercase; - color: #666; + float: right; + margin: -9px -7px 0 0; + font-size: 9px; + cursor: pointer; + text-transform: lowercase; + color: #666; } div.jqi button { - margin-top: 20px; - margin-right:0.5em; - float: right; + margin-top: 20px; + margin-right:0.5em; + float: right; +} + +div#jqistates { + padding:1em; } -div#jqistates {padding:1em;} div.jqimessage p { - padding:0.3em; - color:#555; + padding:0.3em; + color:#555; } div.jqifade{ - background-color: #000000; + background-color: #000000; } -div.prompt-info { +div.prompt-info { background:transparent url(../images/info.png) no-repeat 0 0; font-weight: normal; margin:1em 0 0 0; @@ -522,27 +605,27 @@ div.prompt-info { color:#444; } -#grid span, -#list span { +div.file_manager #grid span, +div.file_manager #list span { width: 20px; background-repeat: no-repeat; background-position: center center; } -button.ON { +div.file_manager button.ON { background:none repeat scroll 0 0 #F9F8F7; border: 1px inset #ccc; } -#grid span { +div.file_manager #grid span { background-image: url(../images/application_view_icons.png); } -#list span { +div.file_manager #list span { background-image: url(../images/application_view_list.png); } -#list { +div.file_manager #list { margin-left: 0; } #progressbar { @@ -582,25 +665,50 @@ html[data-useragent*='MSIE 10.0'] #uploader button, html[data-useragent*='MSIE 11.0'] #uploader button { vertical-align: top; } + html[data-useragent*='MSIE 10.0'] #file-input-container, html[data-useragent*='MSIE 11.0'] #file-input-container { - width: 220px; - height: 32px; - overflow: hidden; + width: 220px; + height: 32px; + overflow: hidden; } + html[data-useragent*='MSIE 10.0'] #filepath, html[data-useragent*='MSIE 11.0'] #filepath { - height: 22px; + height: 22px; } + html[data-useragent*='MSIE 10.0'] #newfile, html[data-useragent*='MSIE 11.0'] #newfile { - height: 23px; + height: 23px; +} + +#dropzone-container { + min-width:860px; +} + +.dropzone { + min-height:200px ! important; + margin-top:1em; +} + +.dropzone .dz-default.dz-message { + background:none ! important; + color:#999; + font-size:1.3em; +} + +.dropzone .dz-default.dz-message span { + display:block ! important; } -#dropzone-container {min-width:860px;} -.dropzone {min-height:200px ! important;margin-top:1em;} -.dropzone .dz-default.dz-message {background:none ! important;color:#999;font-size:1.3em;} -.dropzone .dz-default.dz-message span {display:block ! important;} +#total-progress { + width:100%; + height:3px; + background-color: #A7A1C6; +} -#total-progress {width:100%;height:3px;background-color: #A7A1C6;} -#total-progress .progress-bar {height:3px;background-color: #294750;} \ No newline at end of file +#total-progress .progress-bar { + height:3px; + background-color: #294750; +} \ No newline at end of file diff --git a/themes/default/styles/ie.css b/themes/default/styles/ie.css index 860a01d1..1e2044dc 100644 --- a/themes/default/styles/ie.css +++ b/themes/default/styles/ie.css @@ -1,57 +1,66 @@ <!--[if IE 9]> * { - zoom: 1; + zoom: 1; } #filepath { - height: 27px; - line-height: 1.6em; + height: 27px; + line-height: 1.6em; } #file-input-container { - width: 205px; + width: 205px; } #file-input-container * { - box-sizing: border-box; - -ms-box-sizing: border-box; + box-sizing: border-box; + -ms-box-sizing: border-box; } #newfile { - width: 205px; + width: 205px; } #uploader { - min-height: 32px; + min-height: 32px; } -#q {width:192px;} + +#q { + width:192px; +} + <![endif]--> <!--[if lte IE 8]> * { - zoom: 1; + zoom: 1; } #filepath { - height: 27px; - line-height: 1.6em; + height: 27px; + line-height: 1.6em; } #file-input-container { - width: 205px; + width: 205px; } #file-input-container * { - box-sizing: border-box; - -ms-box-sizing: border-box; + box-sizing: border-box; + -ms-box-sizing: border-box; } #newfile { - width: 205px; + width: 205px; } #uploader { - min-height: 32px; + min-height: 32px; } -#q { width:192px; height:1.8em} + +#q { + width:192px; + height:1.8em; +} + <![endif]--> \ No newline at end of file diff --git a/themes/flat-dark/styles/filemanager.css b/themes/flat-dark/styles/filemanager.css index 47889ab5..cd32aeb6 100644 --- a/themes/flat-dark/styles/filemanager.css +++ b/themes/flat-dark/styles/filemanager.css @@ -154,11 +154,10 @@ div#tools { margin: 50px auto; } -button { +div.file_manager button { background-color:#E8E8E8; display:inline-block; color:#333; - border:none; padding:0.2em 0.3em; text-decoration:none; margin:0 0.2em 0.5em 0.2em; @@ -169,14 +168,14 @@ button { border:1px solid #fff; } -button:hover { +div.file_manager button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#C3D2F7; } -button span { +div.file_manager button span { display: block; padding-left: 20px; background-position: left center; @@ -185,18 +184,23 @@ button span { white-space: nowrap; } -button:active, -button:focus { +div.file_manager button:active, +div.file_manager button:focus { color:#000; outline-color: transparent; outline-style: none; outline-width: 0; } -button.edition { color: black;} +div.file_manager button.edition { + color: black; +} + +div.file_manager button.em { + background-color:#CCDBFF;/*#ADDBC3;*/ +} -button.em { background-color:#CCDBFF;/*#ADDBC3;*/} -button.em:hover { +div.file_manager button.em:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #C3D2F7), color-stop(1, #CCDBFF) ); background:-moz-linear-gradient( center top, #C3D2F7 5%, #CCDBFF 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C3D2F7', endColorstr='#CCDBFF'); @@ -206,7 +210,8 @@ button.em:hover { /** Input file Replacement */ -input, button { +div.file_manager input, +div.file_manager button { vertical-align: text-top; } @@ -264,7 +269,6 @@ input, button { } } - button#browse { margin-left:0; -webkit-border-top-left-radius: 0px; @@ -276,6 +280,7 @@ button#browse { min-height: 16px; min-width: 40px; } + button#browse span { margin:0; padding:0; @@ -286,9 +291,18 @@ button#browse span { } /** Input file Replacement - end */ -#search, #search div, #folder-info {display:inline;} +#search, +#search div, +#folder-info { + display:inline; +} -#folder-info {font-size:0.8em;color:#777;padding:1.3em;float:right} +#folder-info { + font-size:0.8em; + color:#777; + padding:1.3em; + float:right; +} #q { background-color: #3F3F3B; @@ -302,7 +316,9 @@ button#browse span { border-radius: 2px; } -#q:focus {background-color: #C6C6C6} +#q:focus { + background-color: #C6C6C6; +} #search span.q-inactive { color: #777; @@ -363,9 +379,6 @@ div.clip { overflow: hidden; } -#contents.grid li img { -} - #contents.grid p { display: block; text-align: center; @@ -465,25 +478,92 @@ div.clip { } /* these apply to the contextual menus as well as the buttons */ -#select span, .contextMenu li.select a { background-image: url(../images/accept.png); } -#download span, .contextMenu li.download a { background-image: url(../images/download.png); } -#rename span, .contextMenu li.rename a { background-image: url(../images/tag.png); } -#move span, .contextMenu li.move a { background-image: url(../images/move.png); } -#replace span, .contextMenu li.replace a { background-image: url(../images/replace.png); } -#delete span, .contextMenu li.delete a { background-image: url(../images/bin_closed.png); } -#upload span { background-image: url(../images/upload.png); } -#upload span.loading { background-image: url(../images/ajax-loader.gif);color:#555555;font-size:0.9em; } -#parentfolder span { background-image: url(../images/parentfolder.png); } -#newfolder span { background-image: url(../images/folder_add.png); } -#home span { background-image: url(../images/house.png); background-position: center; } -#level-up span { background-image: url(../images/level-up.png); background-position: center; } - -a#edit-file span, a#copy-button span {display:none} -a#edit-file {display:inline-block;background: url(../images/edit.png) no-repeat bottom center;width:20px;height:18px;margin:0 0.2em;} -a#copy-button {display:inline-block;background: url(../images/copy.png) no-repeat bottom center;width:20px;height:18px;margin:0 0.2em;} -span#copied {color:#8C8C8C;font-size:11px;font-weight: normal;vertical-align:middle;} -/*a#edit-file , a#copy-button {border: 1px solid #ccc;}*/ -/* div.jqi button { background-image: url(../images/circular/yes.png); } */ +#select span, +.contextMenu li.select a { + background-image: url(../images/accept.png); +} + +#download span, +.contextMenu li.download a { + background-image: url(../images/download.png); +} + +#rename span, +.contextMenu li.rename a { + background-image: url(../images/tag.png); +} + +#move span, +.contextMenu li.move a { + background-image: url(../images/move.png); +} + +#replace span, +.contextMenu li.replace a { + background-image: url(../images/replace.png); +} + +#delete span, +.contextMenu li.delete a { + background-image: url(../images/bin_closed.png); +} + +#upload span { + background-image: url(../images/upload.png); +} + +#upload span.loading { + background-image: url(../images/ajax-loader.gif); + color:#555555; + font-size:0.9em; +} + +#parentfolder span { + background-image: url(../images/parentfolder.png); +} + +#newfolder span { + background-image: url(../images/folder_add.png); +} + +#home span { + background-image: url(../images/house.png); + background-position: center; +} + +#level-up span { + background-image: url(../images/level-up.png); + background-position: center; +} + +a#edit-file span, +a#copy-button span { + display:none; +} + +a#edit-file { + display:inline-block; + background: url(../images/edit.png) no-repeat bottom center; + width:20px; + height:18px; + margin:0 0.2em; +} + +a#copy-button { + display:inline-block; + background: url(../images/copy.png) no-repeat bottom center; + width:20px; + height:18px; + margin:0 0.2em; +} + +span#copied { + color:#8C8C8C; + font-size:11px; + font-weight: normal; + vertical-align:middle; +} + div.jqi { position: absolute; @@ -513,7 +593,10 @@ div.jqi button { margin-right:0.5em; float: right; } -div#jqistates {padding:1em;} + +div#jqistates { + padding:1em; +} div.jqimessage p { padding:0.3em; @@ -556,6 +639,7 @@ button.ON { #list { margin-left: 0; } + #progressbar { background:transparent url(../images/ajax-loader.gif) no-repeat 0 0; display:inline-table; @@ -584,12 +668,17 @@ div.CodeMirror { text-align:left; width:70%; border: 1px solid #eee; - height: auto; + height: auto; margin:2em auto; } -UL.jqueryFileTree A {color:#efefef;} -UL.jqueryFileTree A:hover {background-color:#545450;} +ul.jqueryFileTree a { + color:#efefef; +} + +ul.jqueryFileTree a:hover { + background-color:#545450; +} /* IE10-11 styles */ @@ -597,25 +686,50 @@ html[data-useragent*='MSIE 10.0'] #uploader button, html[data-useragent*='MSIE 11.0'] #uploader button { vertical-align: top; } + html[data-useragent*='MSIE 10.0'] #file-input-container, html[data-useragent*='MSIE 11.0'] #file-input-container { width: 220px; height: 32px; overflow: hidden; } + html[data-useragent*='MSIE 10.0'] #filepath, html[data-useragent*='MSIE 11.0'] #filepath { height: 22px; } + html[data-useragent*='MSIE 10.0'] #newfile, html[data-useragent*='MSIE 11.0'] #newfile { height: 23px; } -#dropzone-container {min-width:860px;} -.dropzone {min-height:200px ! important;margin-top:1em;} -.dropzone .dz-default.dz-message {background:none ! important;color:#999;font-size:1.3em;} -.dropzone .dz-default.dz-message span {display:block ! important;} +#dropzone-container { + min-width:860px; +} + +.dropzone { + min-height:200px ! important; + margin-top:1em; +} + +.dropzone .dz-default.dz-message { + background:none ! important; + color:#999; + font-size:1.3em; +} + +.dropzone .dz-default.dz-message span { + display:block ! important; +} + +#total-progress { + width:100%; + height:3px; + background-color: #A1ADE2; +} -#total-progress {width:100%;height:3px;background-color: #A1ADE2;} -#total-progress .progress-bar {height:3px;background-color: #333;} \ No newline at end of file +#total-progress .progress-bar { + height:3px; + background-color: #333; +} \ No newline at end of file diff --git a/themes/flat-dark/styles/ie.css b/themes/flat-dark/styles/ie.css index 860a01d1..fc72f49f 100644 --- a/themes/flat-dark/styles/ie.css +++ b/themes/flat-dark/styles/ie.css @@ -24,7 +24,10 @@ #uploader { min-height: 32px; } -#q {width:192px;} + +#q { + width:192px; +} <![endif]--> <!--[if lte IE 8]> @@ -53,5 +56,10 @@ #uploader { min-height: 32px; } -#q { width:192px; height:1.8em} + +#q { + width:192px; + height:1.8em; +} + <![endif]--> \ No newline at end of file diff --git a/themes/flat-oil/styles/filemanager.css b/themes/flat-oil/styles/filemanager.css index 573868d7..dfaee32c 100644 --- a/themes/flat-oil/styles/filemanager.css +++ b/themes/flat-oil/styles/filemanager.css @@ -21,6 +21,7 @@ body { video, audio { margin:3em; } + #uploader { display: block; text-align: right; @@ -106,11 +107,13 @@ video, audio { #fileinfo #main-title { margin: 10px auto; } + #fileinfo h1 { font-size: 20px; display: inline-block; color:#444; } + #fileinfo > h1 { margin-top:3em } @@ -153,11 +156,10 @@ div#tools { margin: 50px auto; } -button { +div.file_manager button { background-color:#E8E8E8; display:inline-block; color:#333; - border:none; padding:0.2em 0.3em; text-decoration:none; margin:0 0.2em 0.5em 0.2em; @@ -168,14 +170,14 @@ button { border:1px solid #fff; } -button:hover { +div.file_manager button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#C3D2F7; } -button span { +div.file_manager button span { display: block; padding-left: 20px; background-position: left center; @@ -184,18 +186,23 @@ button span { white-space: nowrap; } -button:active, -button:focus { +div.file_manager button:active, +div.file_manager button:focus { color:#000; outline-color: transparent; outline-style: none; outline-width: 0; } -button.edition { color: black;} +div.file_manager button.edition { + color: black; +} + +div.file_manager button.em { + background-color:#CCDBFF;/*#ADDBC3;*/ +} -button.em { background-color:#CCDBFF;/*#ADDBC3;*/} -button.em:hover { +div.file_manager button.em:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #C3D2F7), color-stop(1, #CCDBFF) ); background:-moz-linear-gradient( center top, #C3D2F7 5%, #CCDBFF 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C3D2F7', endColorstr='#CCDBFF'); @@ -205,7 +212,8 @@ button.em:hover { /** Input file Replacement */ -input, button { +div.file_manager input, +div.file_manager button { vertical-align: text-top; } @@ -263,7 +271,6 @@ input, button { } } - button#browse { margin-left:0; -webkit-border-top-left-radius: 0px; @@ -285,9 +292,16 @@ button#browse span { } /** Input file Replacement - end */ -#search, #search div, #folder-info {display:inline;} +#search, #search div, #folder-info { + display:inline; +} -#folder-info {font-size:0.8em;color:#658189;padding:1.3em;float:right} +#folder-info { + font-size:0.8em; + color:#658189; + padding:1.3em; + float:right +} #q { background-color: #294750; @@ -301,7 +315,9 @@ button#browse span { border-radius: 2px; } -#q:focus {background-color: #C6C6C6} +#q:focus { + background-color: #C6C6C6 +} #search span.q-inactive { color: #777; @@ -324,7 +340,9 @@ button#browse span { } /** Opera hack */ -x:-o-prefocus, #search a.q-reset {top:-14px;} +x:-o-prefocus, #search a.q-reset { + top:-14px; +} #contents.grid { padding: 15px; @@ -362,9 +380,6 @@ div.clip { overflow: hidden; } -#contents.grid li img { -} - #contents.grid p { display: block; text-align: center; @@ -464,25 +479,92 @@ div.clip { } /* these apply to the contextual menus as well as the buttons */ -#select span, .contextMenu li.select a { background-image: url(../images/accept.png); } -#download span, .contextMenu li.download a { background-image: url(../images/download.png); } -#rename span, .contextMenu li.rename a { background-image: url(../images/tag.png); } -#move span, .contextMenu li.move a { background-image: url(../images/move.png); } -#replace span, .contextMenu li.replace a { background-image: url(../images/replace.png); } -#delete span, .contextMenu li.delete a { background-image: url(../images/bin_closed.png); } -#upload span { background-image: url(../images/upload.png); } -#upload span.loading { background-image: url(../images/ajax-loader.gif);color:#555555;font-size:0.9em; } -#parentfolder span { background-image: url(../images/parentfolder.png); } -#newfolder span { background-image: url(../images/folder_add.png); } -#home span { background-image: url(../images/house.png); background-position: center; } -#level-up span { background-image: url(../images/level-up.png); background-position: center; } - -a#edit-file span, a#copy-button span {display:none} -a#edit-file {display:inline-block;background: url(../images/edit.png) no-repeat bottom center;width:20px;height:18px;margin:0 0.2em;} -a#copy-button {display:inline-block;background: url(../images/copy.png) no-repeat bottom center;width:20px;height:18px;margin:0 0.2em;} -span#copied {color:#8C8C8C;font-size:11px;font-weight: normal;vertical-align:middle;} -/*a#edit-file , a#copy-button {border: 1px solid #ccc;}*/ -/* div.jqi button { background-image: url(../images/circular/yes.png); } */ +#select span, +.contextMenu li.select a { + background-image: url(../images/accept.png); +} + +#download span, +.contextMenu li.download a { + background-image: url(../images/download.png); +} + +#rename span, +.contextMenu li.rename a { + background-image: url(../images/tag.png); +} + +#move span, +.contextMenu li.move a { + background-image: url(../images/move.png); +} + +#replace span, +.contextMenu li.replace a { + background-image: url(../images/replace.png); +} + +#delete span, +.contextMenu li.delete a { + background-image: url(../images/bin_closed.png); +} + +#upload span { + background-image: url(../images/upload.png); +} + +#upload span.loading { + background-image: url(../images/ajax-loader.gif); + color:#555555; + font-size:0.9em; +} + +#parentfolder span { + background-image: url(../images/parentfolder.png); +} + +#newfolder span { + background-image: url(../images/folder_add.png); +} + +#home span { + background-image: url(../images/house.png); + background-position: center; +} + +#level-up span { + background-image: url(../images/level-up.png); + background-position: center; +} + +a#edit-file span, +a#copy-button span { + display:none; +} + +a#edit-file { + display:inline-block; + background: url(../images/edit.png) no-repeat bottom center; + width:20px; + height:18px; + margin:0 0.2em; +} + +a#copy-button { + display:inline-block; + background: url(../images/copy.png) no-repeat bottom center; + width:20px; + height:18px; + margin:0 0.2em; +} + +span#copied { + color:#8C8C8C; + font-size:11px; + font-weight: normal; + vertical-align:middle; +} + div.jqi { position: absolute; @@ -512,7 +594,10 @@ div.jqi button { margin-right:0.5em; float: right; } -div#jqistates {padding:1em;} + +div#jqistates { + padding:1em; +} div.jqimessage p { padding:0.3em; @@ -555,6 +640,7 @@ button.ON { #list { margin-left: 0; } + #progressbar { background:transparent url(../images/ajax-loader.gif) no-repeat 0 0; display:inline-table; @@ -583,12 +669,17 @@ div.CodeMirror { text-align:left; width:70%; border: 1px solid #eee; - height: auto; + height: auto; margin:2em auto; } -UL.jqueryFileTree A {color:#A0C8D3;} -UL.jqueryFileTree A:hover {background-color: #55767F;} +UL.jqueryFileTree A { + color:#A0C8D3; +} + +UL.jqueryFileTree A:hover { + background-color: #55767F; +} /* IE10-11 styles */ @@ -596,25 +687,50 @@ html[data-useragent*='MSIE 10.0'] #uploader button, html[data-useragent*='MSIE 11.0'] #uploader button { vertical-align: top; } + html[data-useragent*='MSIE 10.0'] #file-input-container, html[data-useragent*='MSIE 11.0'] #file-input-container { width: 220px; height: 32px; overflow: hidden; } + html[data-useragent*='MSIE 10.0'] #filepath, html[data-useragent*='MSIE 11.0'] #filepath { height: 22px; } + html[data-useragent*='MSIE 10.0'] #newfile, html[data-useragent*='MSIE 11.0'] #newfile { height: 23px; } -#dropzone-container {min-width:860px;} -.dropzone {min-height:200px ! important;margin-top:1em;} -.dropzone .dz-default.dz-message {background:none ! important;color:#999;font-size:1.3em;} -.dropzone .dz-default.dz-message span {display:block ! important;} +#dropzone-container { + min-width:860px; +} + +.dropzone { + min-height:200px ! important; + margin-top:1em; +} + +.dropzone .dz-default.dz-message { + background:none ! important; + color:#999; + font-size:1.3em; +} + +.dropzone .dz-default.dz-message span { + display:block ! important; +} + +#total-progress { + width:100%; + height:3px; + background-color: #A1ADE2; +} -#total-progress {width:100%;height:3px;background-color: #A1ADE2;} -#total-progress .progress-bar {height:3px;background-color: #333;} \ No newline at end of file +#total-progress .progress-bar { + height:3px; + background-color: #333; +} \ No newline at end of file diff --git a/themes/flat-oil/styles/ie.css b/themes/flat-oil/styles/ie.css index 860a01d1..9b1b4d29 100644 --- a/themes/flat-oil/styles/ie.css +++ b/themes/flat-oil/styles/ie.css @@ -24,7 +24,11 @@ #uploader { min-height: 32px; } -#q {width:192px;} + +#q { + width:192px; +} + <![endif]--> <!--[if lte IE 8]> @@ -53,5 +57,9 @@ #uploader { min-height: 32px; } -#q { width:192px; height:1.8em} + +#q { + width:192px; + height:1.8em; +} <![endif]--> \ No newline at end of file diff --git a/themes/flat-turquoise/styles/filemanager.css b/themes/flat-turquoise/styles/filemanager.css index fabebf35..81edb2a8 100644 --- a/themes/flat-turquoise/styles/filemanager.css +++ b/themes/flat-turquoise/styles/filemanager.css @@ -21,6 +21,7 @@ body { video, audio { margin:3em; } + #uploader { display: block; text-align: right; @@ -106,14 +107,17 @@ video, audio { #fileinfo #main-title { margin: 10px auto; } + #fileinfo h1 { font-size: 20px; display: inline-block; color:#444; } + #fileinfo > h1 { margin-top:3em } + div#tools { display: inline-block; margin-left:1em; @@ -152,7 +156,7 @@ div#tools { margin: 50px auto; } -button { +div.file_manager button { background-color:#E8E8E8; display:inline-block; color:#333; @@ -167,14 +171,14 @@ button { border:1px solid #fff; } -button:hover { +div.file_manager button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#C3D2F7; } -button span { +div.file_manager button span { display: block; padding-left: 20px; background-position: left center; @@ -183,18 +187,23 @@ button span { white-space: nowrap; } -button:active, -button:focus { +div.file_manager button:active, +div.file_manager button:focus { color:#000; outline-color: transparent; outline-style: none; outline-width: 0; } -button.edition { color: black;} +div.file_manager button.edition { + color: black; +} + +div.file_manager button.em { + background-color:#CCDBFF;/*#ADDBC3;*/ +} -button.em { background-color:#CCDBFF;/*#ADDBC3;*/} -button.em:hover { +div.file_manager button.em:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #C3D2F7), color-stop(1, #CCDBFF) ); background:-moz-linear-gradient( center top, #C3D2F7 5%, #CCDBFF 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C3D2F7', endColorstr='#CCDBFF'); @@ -203,8 +212,8 @@ button.em:hover { /** Input file Replacement */ - -input, button { +div.file_manager input, +div.file_manager button { vertical-align: text-top; } @@ -262,7 +271,6 @@ input, button { } } - button#browse { margin-left:0; -webkit-border-top-left-radius: 0px; @@ -274,6 +282,7 @@ button#browse { min-height: 16px; min-width: 40px; } + button#browse span { margin:0; padding:0; @@ -284,9 +293,18 @@ button#browse span { } /** Input file Replacement - end */ -#search, #search div, #folder-info {display:inline;} +#search, +#search div, +#folder-info { + display:inline; +} -#folder-info {font-size:0.8em;color:#666666;padding:1.3em;float:right} +#folder-info { + font-size:0.8em; + color:#666666; + padding:1.3em; + float:right; +} #q { background-color: #ACC1BB; @@ -300,7 +318,9 @@ button#browse span { border-radius: 2px; } -#q:focus {background-color: #C6C6C6} +#q:focus { + background-color: #C6C6C6; +} #search span.q-inactive { color: #777; @@ -323,7 +343,10 @@ button#browse span { } /** Opera hack */ -x:-o-prefocus, #search a.q-reset {top:-14px;} +x:-o-prefocus, +#search a.q-reset { + top:-14px; +} #contents.grid { padding: 15px; @@ -341,11 +364,11 @@ x:-o-prefocus, #search a.q-reset {top:-14px;} -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - -webkit-transition: background 0.5s linear; - -moz-transition: background 0.5s linear; - -ms-transition: background 0.5s linear; - -o-transition: background 0.5s linear; - transition: background 0.5s linear; + -webkit-transition: background 0.5s linear; + -moz-transition: background 0.5s linear; + -ms-transition: background 0.5s linear; + -o-transition: background 0.5s linear; + transition: background 0.5s linear; } #contents.grid li:hover { @@ -361,9 +384,6 @@ div.clip { overflow: hidden; } -#contents.grid li img { -} - #contents.grid p { display: block; text-align: center; @@ -395,14 +415,14 @@ div.clip { #contents.list th.tablesorter-headerAsc, #contents.list th.tablesorter-headerDesc { -background: #a4bcb3; /* Old browsers */ -background: -moz-linear-gradient(top, #a4bcb3 0%, #bad3c6 100%); /* FF3.6+ */ -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4bcb3), color-stop(100%,#bad3c6)); /* Chrome,Safari4+ */ -background: -webkit-linear-gradient(top, #a4bcb3 0%,#bad3c6 100%); /* Chrome10+,Safari5.1+ */ -background: -o-linear-gradient(top, #a4bcb3 0%,#bad3c6 100%); /* Opera 11.10+ */ -background: -ms-linear-gradient(top, #a4bcb3 0%,#bad3c6 100%); /* IE10+ */ -background: linear-gradient(to bottom, #a4bcb3 0%,#bad3c6 100%); /* W3C */ -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4bcb3', endColorstr='#bad3c6',GradientType=0 ); /* IE6-9 */ + background: #a4bcb3; /* Old browsers */ + background: -moz-linear-gradient(top, #a4bcb3 0%, #bad3c6 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4bcb3), color-stop(100%,#bad3c6)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #a4bcb3 0%,#bad3c6 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #a4bcb3 0%,#bad3c6 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #a4bcb3 0%,#bad3c6 100%); /* IE10+ */ + background: linear-gradient(to bottom, #a4bcb3 0%,#bad3c6 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4bcb3', endColorstr='#bad3c6',GradientType=0 ); /* IE6-9 */ } #contents.list th.tablesorter-headerAsc span { @@ -460,25 +480,91 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4bcb3', end } /* these apply to the contextual menus as well as the buttons */ -#select span, .contextMenu li.select a { background-image: url(../images/accept.png); } -#download span, .contextMenu li.download a { background-image: url(../images/download.png); } -#rename span, .contextMenu li.rename a { background-image: url(../images/tag.png); } -#move span, .contextMenu li.move a { background-image: url(../images/move.png); } -#replace span, .contextMenu li.replace a { background-image: url(../images/replace.png); } -#delete span, .contextMenu li.delete a { background-image: url(../images/bin_closed.png); } -#upload span { background-image: url(../images/upload.png); } -#upload span.loading { background-image: url(../images/ajax-loader.gif);color:#555555;font-size:0.9em; } -#parentfolder span { background-image: url(../images/parentfolder.png); } -#newfolder span { background-image: url(../images/folder_add.png); } -#home span { background-image: url(../images/house.png); background-position: center; } -#level-up span { background-image: url(../images/level-up.png); background-position: center; } - -a#edit-file span, a#copy-button span {display:none} -a#edit-file {display:inline-block;background: url(../images/edit.png) no-repeat bottom center;width:20px;height:18px;margin:0 0.2em;} -a#copy-button {display:inline-block;background: url(../images/copy.png) no-repeat bottom center;width:20px;height:18px;margin:0 0.2em;} -span#copied {color:#8C8C8C;font-size:11px;font-weight: normal;vertical-align:middle;} -/*a#edit-file , a#copy-button {border: 1px solid #ccc;}*/ -/* div.jqi button { background-image: url(../images/circular/yes.png); } */ +#select span, +.contextMenu li.select a { + background-image: url(../images/accept.png); +} + +#download span, +.contextMenu li.download a { + background-image: url(../images/download.png); +} + +#rename span, +.contextMenu li.rename a { + background-image: url(../images/tag.png); +} + +#move span, +.contextMenu li.move a { + background-image: url(../images/move.png); +} + +#replace span, +.contextMenu li.replace a { + background-image: url(../images/replace.png); +} + +#delete span, +.contextMenu li.delete a { + background-image: url(../images/bin_closed.png); +} + +#upload span { + background-image: url(../images/upload.png); +} + +#upload span.loading { + background-image: url(../images/ajax-loader.gif); + color:#555555; + font-size:0.9em; +} + +#parentfolder span { + background-image: url(../images/parentfolder.png); +} + +#newfolder span { + background-image: url(../images/folder_add.png); +} + +#home span { + background-image: url(../images/house.png); + background-position: center; +} + +#level-up span { + background-image: url(../images/level-up.png); + background-position: center; +} + +a#edit-file span, +a#copy-button span { + display:none +} + +a#edit-file { + display:inline-block; + background: url(../images/edit.png) no-repeat bottom center; + width:20px; + height:18px; + margin:0 0.2em; +} + +a#copy-button { + display:inline-block; + background: url(../images/copy.png) no-repeat bottom center; + width:20px; + height:18px; + margin:0 0.2em; +} + +span#copied { + color:#8C8C8C; + font-size:11px; + font-weight: normal; + vertical-align:middle; +} div.jqi { position: absolute; @@ -508,7 +594,10 @@ div.jqi button { margin-right:0.5em; float: right; } -div#jqistates {padding:1em;} + +div#jqistates { + padding:1em; +} div.jqimessage p { padding:0.3em; @@ -579,36 +668,59 @@ div.CodeMirror { text-align:left; width:70%; border: 1px solid #eee; - height: auto; + height: auto; margin:2em auto; } -UL.jqueryFileTree A {} - /* IE10-11 styles */ html[data-useragent*='MSIE 10.0'] #uploader button, html[data-useragent*='MSIE 11.0'] #uploader button { vertical-align: top; } + html[data-useragent*='MSIE 10.0'] #file-input-container, html[data-useragent*='MSIE 11.0'] #file-input-container { width: 220px; height: 32px; overflow: hidden; } + html[data-useragent*='MSIE 10.0'] #filepath, html[data-useragent*='MSIE 11.0'] #filepath { height: 22px; } + html[data-useragent*='MSIE 10.0'] #newfile, html[data-useragent*='MSIE 11.0'] #newfile { height: 23px; } -#dropzone-container {min-width:860px;} -.dropzone {min-height:200px ! important;margin-top:1em;} -.dropzone .dz-default.dz-message {background:none ! important;color:#999;font-size:1.3em;} -.dropzone .dz-default.dz-message span {display:block ! important;} +#dropzone-container { + min-width:860px; +} + +.dropzone { + min-height:200px ! important; + margin-top:1em; +} + +.dropzone .dz-default.dz-message { + background:none ! important; + color:#999; + font-size:1.3em; +} + +.dropzone .dz-default.dz-message span { + display:block ! important; +} + +#total-progress { + width:100%; + height:3px; + background-color: #A1ADE2; +} -#total-progress {width:100%;height:3px;background-color: #A1ADE2;} -#total-progress .progress-bar {height:3px;background-color: #333;} \ No newline at end of file +#total-progress .progress-bar { + height:3px; + background-color: #333; +} \ No newline at end of file diff --git a/themes/flat-turquoise/styles/ie.css b/themes/flat-turquoise/styles/ie.css index 860a01d1..fa575766 100644 --- a/themes/flat-turquoise/styles/ie.css +++ b/themes/flat-turquoise/styles/ie.css @@ -24,7 +24,10 @@ #uploader { min-height: 32px; } -#q {width:192px;} +#q { + width:192px; +} + <![endif]--> <!--[if lte IE 8]> @@ -53,5 +56,10 @@ #uploader { min-height: 32px; } -#q { width:192px; height:1.8em} + +#q { + width:192px; + height:1.8em; +} + <![endif]--> \ No newline at end of file