From 998b500aca40b0a8f7993236865b1dac7dc2b065 Mon Sep 17 00:00:00 2001 From: Serghey Rodin Date: Thu, 16 Jul 2015 02:23:21 +0300 Subject: [PATCH] WebFileManager css styles --- web/css/file_manager.css | 97 +++++++++++++++++++++++++++++++++++----- 1 file changed, 87 insertions(+), 10 deletions(-) diff --git a/web/css/file_manager.css b/web/css/file_manager.css index 12c1b5a55..ada907fce 100644 --- a/web/css/file_manager.css +++ b/web/css/file_manager.css @@ -18,7 +18,7 @@ body { margin: 0; padding: 0; } .window { display: inline-block; float: left; /*border: 1px solid #eee;*/ width: 50%; height: 100%; background-color: #ececec; /*background: url(/images/background-dots.png) #ececec;*/ } .window.active { background: #fff; } -.pwd { background-color: #7b7b7b; height: 31px; padding: 12px 0 0 17px; color: yellow;} +.pwd { background-color: #7b7b7b; height: 31px; padding: 12px 0 0 17px; color: #eee; font-size: 14px; } .window.active .pwd { background-color: #333; } .window.active .pwd a { color: #FFF; } .pwd a { color: #CFCFCF; margin-right: 6px; padding: 0 7px; cursor: pointer; text-decoration: none; } @@ -305,6 +305,10 @@ ul.listing { list-style-type: none; padding: 18px 0 0; margin: 0; border-left: .confirm-box .actions select { background-color: #333333; border: 1px solid #ccc; color: #fff; font-family: Arial; font-size: 16px; margin-bottom: 27px; margin-left: 27px; padding: 10px 14px; } .confirm-box .actions .title { color: #ccc; font-family: Arial; line-height: 33px; padding-left: 27px; text-transform: capitalize; } +.confirm-box .actions label { cursor: pointer; padding-left: 27px; color: #ebe697; } +.confirm-box.unpack .actions { padding-bottom: 30px; } +.confirm-box.unpack .actions input { margin-right: 5px; } + /*.confirm-box.owner-mode { height: 484px; }*/ .confirm-box.owner-mode .warning { display: none; } @@ -318,6 +322,8 @@ ul.listing { list-style-type: none; padding: 18px 0 0; margin: 0; border-left: .confirm-box.owner-mode .recursive { margin-top: 30px; margin-bottom: 25px; } + + .warning-box { width: 60%; background-color: #ff9f89; border-bottom: 5px solid #ff6c6e; color: #FFF; font-family: arial; margin-left: auto; margin-right: auto; padding-bottom: 30px; margin-bottom: 50px; left: 20%; position: absolute; top: 0; box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.5); } .warning-box.inform { background-color: #72c5b2; border-color: #019174; } .warning-box .message { width: 100%; padding: 30px 0 5px; text-align: center; font-size: 14px; text-transform: uppercase; font-weight: bold; } @@ -345,17 +351,88 @@ ul.listing { list-style-type: none; padding: 18px 0 0; margin: 0; border-left: /* - Для Дмитрия (удалить после прочтения): - - Аплоад прячет инпут, делая его прозрачным, и помещая поверх кнопку html (сделано для кроссбраузерности) - При стилизации кнопки для аплоада, важно задать такие же размеры для инпута с типом файла, - иначе он может быть больше или меньше стилизованной кнопки, что приведёт к вызову аплоад диалогового окна - при клике на неправильную область - - - вот файл инпут ----> .fileinput-button input + + Прочёл. Похоже проблема уже решена, не понял, что нужно сделать, проверить правильность решения? + Вроде всё в порядке, инпут уже максимльно близко вкладывается в спан. + + + -- Для Дмитрия (удалить после прочтения): + + -- Аплоад прячет инпут, делая его прозрачным, и помещая поверх кнопку html (сделано для кроссбраузерности) + -- При стилизации кнопки для аплоада, важно задать такие же размеры для инпута с типом файла, + -- иначе он может быть больше или меньше стилизованной кнопки, что приведёт к вызову аплоад диалогового окна + -- при клике на неправильную область + + + -- вот файл инпут ----> .fileinput-button input */ .fileinput-button input { font-size: 14px !important; width: 90px; } + +.progress-container { + width: 100%; + position: fixed; + bottom: 1px; +} +.progress-container .progress-elm { + background-color: rgba(0, 0, 0, 0.5); + border-radius: 3px; + display: block; + height: 12px; + margin-left: auto; + margin-right: auto; + padding: 7px; + width: 212px; +} + +.progress-container .progress-elm .title { + color: #fff; + display: inline-block; + float: left; + font-family: arial; + font-size: 11px; + margin-left: 4px; + padding-right: 14px; + padding-top: 0; + text-transform: uppercase; +} + +.progress-container .progress-elm .progress { + background: #ebebeb url("/images/progress.gif") no-repeat scroll -60px 0; + border-color: #8a9079; + border-radius: 3px; + color: transparent; + display: inline-block; + height: 0; + margin-top: 3px; + padding: 3px 12px; + transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s; + width: 60px; + float: left; +} + +.progress-container .progress-elm .close { + background: rgba(0, 0, 0, 0) url("/images/sprite.png") repeat scroll -428px -487px; + cursor: pointer; + display: inline-block; + float: right; + height: 7px; + margin-right: 3px; + margin-top: 3px; + width: 7px; +} +.progress-container .progress-elm .close:hover { + border: 7px solid #333; + margin-top: -4px; + margin-right: -4px; + background-color: #333; +} +.progress-container .progress-elm .close:active { + border: 7px solid #FFCC00; + margin-top: -4px; + margin-right: -4px; + background-color: #FFCC00; +} +