/** * EGroupware: CSS with less preprocessor * * FILEMANAGER * * Please do NOT change app.css directly, instead change app.less and compile it! * * @link http://www.egroupware.org * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @author Stefan Reinhardt * @package filemanager * @version $Id$ */ /** * EGroupware - CSS Styles used by filemanager app * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @package etemplate * @link http://www.egroupware.org * @author Ralf Becker * @version $Id$ */ /** * CSS for new eTemplate filemanager UI */ .mimeHuge img { width: 64px; height: 64px; } .fileName input { font-weight: bold; width: 100%; } .previewImage img { max-width: 430px; max-height: 275px; border: 1px solid black; } .pathSelection { font-weight: bold; } .pathSelection a { font-weight: bold; font-size: 120%; } .pathSelectionContainer { width: 640px; overflow: auto; } /** * Get path input to take all remaining width */ #filemanager-index_filemanager-index-header_left { width: 100%; } div.filemanager_navigation { position: relative; width: 100%; white-space: normal; margin: 5px 0 0 5px; } div.filemanager_navigation > * { vertical-align: middle; } div.filemanager_navigation > img { margin-top: 3px; } #filemanager-index_buttons { float: right; } #filemanager-index_buttons > * { vertical-align: middle; padding-left: 5px; margin: 0; } div.filemanager_navigation > label { position: absolute; left: 50px; right: 422px; padding-top: 3px; font-size: 140%; white-space: nowrap; } div.filemanager_navigation > label > input { width: 100%; } #filemanager-index_buttons div.et2_file { width: 130px; margin-top: 2px; } #filemanager-index_buttons div.et2_file .progress { width: auto; margin: 0; overflow: hidden; text-overflow: ellipsis; max-height: none; } /** * Tile view table.egwGridView_grid .tile .file_tile { height: 150px; } */ .egwGridView_grid .tile span.iconOverlayContainer { display: block; max-width: 140px; } .tile .file_tile img.vfsMimeIcon { height: auto; width: auto; max-height: 48px; display: block; margin: 0 auto; } .tile .file_tile .et2_label { word-wrap: break-word; } .tile .file_tile { position: relative; } .tile .file_tile[data-mime^="image"] .et2_label { display: none; } .tile .file_tile[data-mime^="image"]:hover .et2_label { display: block; position: absolute; top: 10px; color: white; text-shadow: 2px 2px 8px black; width: 100%; } .tile .file_tile[data-mime^="image"]:hover .et2_label[id*=comment] { top: 30px; } #filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon { height: auto; max-height: 100px; } /** * Select file dialog */ .selectPath { font-weight: bold; width: 98%; } .selectPathContainer { width: 470px; overflow: auto; } .selectName input { width: 100%; } .selectMime select { width: 100%; } .displayNone input, input.displayNone { display: none; } .selectFiles div { overflow-y: auto; } #filemanager-select_dir { height: 400px; overflow-y: scroll; display: inline-block; } /** * VFS mounts and versioning */ .filemanager_smallButton { font-size: 90%; margin: 0; } .filemanager_header { font-size: 120%; font-weight: bold; } .filemanager_config > * { margin-top: 20px; } .error { color: red; font-style: italic; } .createDir img { padding-right: 30px; } #filemanager-select_apps { width: 61px; height: 400px; margin-top: 44px; display: inline-block; overflow-y: scroll; } /*/***************************************************************** // sidebar */ /*//****************************************************************** // iframe*/ #filemanager-index_filemanager-index-header_left { float: left; height: 36px; width: 98%; } /*Up img*/ img#filemanager-index_up { position: relative; top: 5px; width: 16px; height: 16px; padding: 4px; background-color: #e6e6e6; } /*Home img*/ img#filemanager-index_home { position: relative; top: 5px; width: 16px; height: 16px; padding: 4px; background-color: #e6e6e6; } #filemanager-index_nm img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] { height: auto; } div.filemanager_navigation { position: relative; width: 100%; margin-top: -12px !important; margin-left: 6px !important; } div.filemanager_navigation img { width: 16px; height: 16px; /*.background_color_10_gray;*/ -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 0.2em; } div.filemanager_navigation img:hover { /*.background_color_20_gray;*/ -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.5); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.filemanager_navigation label { float: left; left: 74px; right: 421px; font-size: 140%; top: 5px; } div.filemanager_navigation label input { width: 99%; } /*div.filemanager_navigation > label > input { width: 95%; }*/ /*Buttons / Tarp / FileUpload*/ #filemanager-index_buttons { top: -3px; float: left; position: absolute; right: 0; } #filemanager-index_buttons img { width: 16px; height: 16px; padding: 4px; } #filemanager-index_buttons div.et2_file { /*.background_color_10_gray;*/ -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.15); padding: 0em; margin: 0; width: 16.5em; background-color: #e6e6e6; height: 24px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #filemanager-index_buttons div.et2_file:hover { background-color: #1aa200 !important; } #filemanager-index_buttons div.et2_file:active { background-color: #1aa200 !important; } #filemanager-index_buttons div.et2_file span.et2_file_span { background-size: 16px 16px; padding: 3px 0px 0px 10px; width: 14em; border: none; cursor: pointer; margin: 3px 0 0 2px; background-color: #e6e6e6; } #filemanager-index_buttons div.et2_file span.et2_file_span:hover { background-color: #1aa200 !important; } #filemanager-index_buttons div.et2_file span.et2_file_span:active { background-color: #1aa200 !important; } #filemanager-index_buttons div.et2_file input#filemanager-index_upload { color: #ffffff; cursor: pointer; background-color: transparent; /* &:hover {background-color: @color_positive_action_active !important;} &:active {background-color: @color_positive_action_active !important;}*/ } #filemanager-index_buttons div.et2_file div.progress { z-index: 1; width: auto; overflow: hidden; text-overflow: ellipsis; } #filemanager-index_buttons > * { padding-left: 3px; vertical-align: middle; margin-right: 0.2em; background-color: #e6e6e6; } #filemanager-index { width: auto; } #filemanager-index #filemanager-index_tarp { width: 32px !important; height: 32px !important; position: relative; top: 0px; background-color: #cdcdcd; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #filemanager-index #filemanager-index_tarp:hover { border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #cccccc; } #filemanager-index .filters { vertical-align: center; } #filemanager-index .filters #filemanager-index_filter { margin-top: 0.5em; } table.egwGridView_grid img { /*filter grey*/ filter: none; -webkit-filter: initial; -moz-filter: initial; -ms-filter: initial; -o-filter: initial; /*filter: url(grayscale.svg); Firefox 4+ */ filter: initial; /* IE 6-9 */ } /*// #####################################################*/ /*Dialog filemanager*/ #filemanager-select .dialogHeader .et2_button_icon { margin: 4px 4px 0 4px; border-top: solid 1px #ffffff; border-left: solid 1px #ffffff; border-right: solid 1px #ffffff; border-bottom: solid 1px #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #ffffff; height: auto; width: 24px; } #filemanager-select .dialogHeader .selectPathContainer { overflow: auto; width: 470px; margin-top: 0px; height: 32px; } #filemanager-select .dialogHeader .selectPathContainer input { height: 20px; } #filemanager-select #filemanager-select_apps { background-color: #d9d9d9; } #filemanager-select #filemanager-select_apps .et2_button_icon { height: auto; width: 24px; padding: 10px; } #filemanager-select table#filemanager-select_dir { border: 1px solid rgba(0, 0, 0, 0.15); } #filemanager-select table#filemanager-select_dir tr:nth-child(even) { background: #ffffff; } #filemanager-select table#filemanager-select_dir tr:nth-child(odd) { background: #f2f2f2; } /*// #####################################################*/ /*Dialog filemanager edit POPUP WINDOW*/ div#filemanager-file_tabs { /*eacl*/ /*Abonements*/ } div#filemanager-file_tabs span.ui-icon-search { /*.background_color_10_gray;*/ -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; top: 3px; margin-left: 3px; } div#filemanager-file_tabs span.ui-icon-search:hover { /*.background_color_20_gray;*/ -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.5); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div#filemanager-file_tabs span.ui-icon-search:active { /*.background_color_30_gray;*/ border: 1px solid rgba(0, 0, 0, 0.9); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); background-color: #1aa200; } div#filemanager-file_tabs #filemanager-file_filemanager-file-eacl { /*Owner*/ } div#filemanager-file_tabs #filemanager-file_filemanager-file-eacl td.filemanager-file_filemanager-file-eaclowner span { display: flex; margin-right: 1px; } div#filemanager-file_tabs #filemanager-file_filemanager-file-eacl td.filemanager-file_filemanager-file-eaclowner span.ui-icon-search { position: relative; top: 15px; margin-left: -3px; margin-right: 3px; } div#filemanager-file_tabs td.eaclAccount { width: 200px; } /*// #####################################################*/ /*Dialog filemanager upload POPUP WINDOW*/ div#stylite-filemanager-upload { margin: 0.5em; } div#stylite-filemanager-upload .et2_file { height: 24px; } div#stylite-filemanager-upload .et2_file input { color: #ffffff; width: 250px; background-color: #0c5da5; } div#stylite-filemanager-upload .et2_file input:hover { background-color: #189800 !important; color: #ffc200; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -webkit-border-radius: 3px; -webkit-border-top-left-radius: 10px; -moz-border-radius: 3px; -moz-border-radius-topleft: 10px; border-radius: 3px; border-top-left-radius: 10px; } div#stylite-filemanager-upload .et2_file input:active { background-color: #1aa200 !important; } div#stylite-filemanager-upload .et2_file div.progress { width: 0px; } div#stylite-filemanager-upload .th { background: none; } div#stylite-filemanager-upload .dialogFooterToolbar button { /*.border_normal;*/ /*.box_shadow_standard_light;*/ /*.rounded (3px);*/ color: #000000; -webkit-appearance: none; -webkit-transition-property: background-color; -moz-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; background-color: #b4b4b4; padding-left: 30px !important; background-position: 6px center !important; background-repeat: no-repeat !important; background-size: 20px auto !important; /*.Button_size_h32_auto;*/ height: 24px; } div#stylite-filemanager-upload .dialogFooterToolbar button:hover { background-color: #f5b301 !important; color: #000000; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } div#stylite-filemanager-upload .dialogFooterToolbar button:active { background-color: #fecc44 !important; color: #000000; -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); } /* tablets and smartphones */ @media only screen and (max-device-width: 1024px) { #filemanager-index_nm table.egwGridView_outer tbody span[id^='filemanager-index'][id$='size]'] { font-size: 8pt; text-align: right; } #filemanager-index_nm table.egwGridView_outer tbody label[id^='filemanager-index'][id$='name]'] { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #filemanager-index_nm table.egwGridView_outer tbody label[id^='filemanager-index'][id$='name]'] span { white-space: nowrap; } }