/******************************************************************/
/* CURRENT DIRECTORY STYLES */
/******************************************************************/
/* cwd container to avoid selectable on scrollbar */
.elfinder-cwd-wrapper-list {
.elfinder-ltr .elfinder-cwd {
.elfinder-rtl .elfinder-cwd {
.elfinder-cwd.elfinder-table-header-sticky {
position: -webkit-sticky;
width: -webkit-max-content;
.elfinder-cwd.elfinder-table-header-sticky table {
.elfinder-cwd.elfinder-table-header-sticky td {
.elfinder-droppable-active .elfinder-cwd.elfinder-table-header-sticky table {
border-top: 2px solid transparent;
/* fixed table header container */
.elfinder-cwd-fixheader .elfinder-cwd {
/* container active on dropenter */
.elfinder .elfinder-cwd-wrapper.elfinder-droppable-active {
outline: 2px solid #8cafed;
.elfinder-cwd-wrapper-empty .elfinder-cwd:after {
width: calc(100% - 20px);
-ms-transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
filter: Alpha(Opacity=60);
.elfinder-cwd-file .elfinder-cwd-select {
background-color: transparent;
filter: Alpha(Opacity=40);
.elfinder-mobile .elfinder-cwd-file .elfinder-cwd-select {
.elfinder-cwd-file.ui-selected .elfinder-cwd-select {
filter: Alpha(Opacity=80);
.elfinder-rtl .elfinder-cwd-file .elfinder-cwd-select {
.elfinder .elfinder-cwd-selectall {
filter: Alpha(Opacity=80);
.elfinder .elfinder-workzone.elfinder-cwd-wrapper-empty .elfinder-cwd-selectall {
/************************** ICONS VIEW ********************************/
.elfinder-ltr .elfinder-workzone .elfinder-cwd-selectall {
.elfinder-rtl .elfinder-workzone .elfinder-cwd-selectall {
.elfinder-ltr.elfinder-mobile .elfinder-workzone .elfinder-cwd-selectall {
.elfinder-rtl.elfinder-mobile .elfinder-workzone .elfinder-cwd-selectall {
.elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-select.ui-state-hover {
background-color: transparent;
.elfinder-cwd-view-icons .elfinder-cwd-file {
.elfinder-cwd-view-icons .elfinder-cwd-file .ui-state-active {
.elfinder-ltr .elfinder-cwd-view-icons .elfinder-cwd-file {
.elfinder-rtl .elfinder-cwd-view-icons .elfinder-cwd-file {
/* remove ui hover class border */
.elfinder-cwd-view-icons .elfinder-cwd-file .ui-state-hover {
/* icon wrapper to create selected highlight around icon */
.elfinder-cwd-view-icons .elfinder-cwd-file-wrapper {
margin: 1px auto 1px auto;
/*** Custom Icon Size size1 - size3 ***/
.elfinder-cwd-size1 .elfinder-cwd-icon:before,
.elfinder-cwd-size2 .elfinder-cwd-icon:before,
.elfinder-cwd-size3 .elfinder-cwd-icon:before {
.elfinder-cwd-size1.elfinder-cwd-view-icons .elfinder-cwd-file {
.elfinder-cwd-size1.elfinder-cwd-view-icons .elfinder-cwd-file-wrapper {
.elfinder-cwd-size1 .elfinder-cwd-icon {
-ms-transform-origin: top center;
-ms-transform: scale(1.5);
-webkit-transform-origin: top center;
-webkit-transform: scale(1.5);
transform-origin: top center;
.elfinder-cwd-size1 .elfinder-cwd-icon.elfinder-cwd-bgurl:before {
-ms-transform-origin: top left;
-ms-transform: scale(1.35) translate(-4px, 15%);
-webkit-transform-origin: top left;
-webkit-transform: scale(1.35) translate(-4px, 15%);
transform-origin: top left;
transform: scale(1.35) translate(-4px, 15%);
.elfinder-cwd-size1 .elfinder-cwd-icon.elfinder-cwd-bgurl:after {
-ms-transform: scale(1) translate(10px, -5px);
-webkit-transform: scale(1) translate(10px, -5px);
transform: scale(1) translate(10px, -5px);
.elfinder-cwd-size1 .elfinder-cwd-icon.elfinder-cwd-bgurl {
-ms-transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transform: scale(1);
transform-origin: center center;
-webkit-border-radius: 6px;
.elfinder-cwd-size2.elfinder-cwd-view-icons .elfinder-cwd-file {
.elfinder-cwd-size2.elfinder-cwd-view-icons .elfinder-cwd-file-wrapper {
.elfinder-cwd-size2 .elfinder-cwd-icon {
-ms-transform-origin: top center;
-webkit-transform-origin: top center;
-webkit-transform: scale(2);
transform-origin: top center;
.elfinder-cwd-size2 .elfinder-cwd-icon.elfinder-cwd-bgurl:before {
-ms-transform-origin: top left;
-ms-transform: scale(1.8) translate(-5px, 18%);
-webkit-transform-origin: top left;
-webkit-transform: scale(1.8) translate(-5px, 18%);
transform-origin: top left;
transform: scale(1.8) translate(-5px, 18%);
.elfinder-cwd-size2 .elfinder-cwd-icon.elfinder-cwd-bgurl:after {
-ms-transform: scale(1.1) translate(0px, 10px);
-webkit-transform: scale(1.1) translate(0px, 10px);
transform: scale(1.1) translate(0px, 10px);
.elfinder-cwd-size2 .elfinder-cwd-icon.elfinder-cwd-bgurl {
-ms-transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transform: scale(1);
transform-origin: center center;
-webkit-border-radius: 8px;
.elfinder-cwd-size3.elfinder-cwd-view-icons .elfinder-cwd-file {
.elfinder-cwd-size3.elfinder-cwd-view-icons .elfinder-cwd-file-wrapper {
.elfinder-cwd-size3 .elfinder-cwd-icon {
-ms-transform-origin: top center;
-ms-transform: scale(2.5);
-webkit-transform-origin: top center;
-webkit-transform: scale(2.5);
transform-origin: top center;
.elfinder-cwd-size3 .elfinder-cwd-icon.elfinder-cwd-bgurl:before {
-ms-transform-origin: top left;
-ms-transform: scale(2.25) translate(-6px, 20%);
-webkit-transform-origin: top left;
-webkit-transform: scale(2.25) translate(-6px, 20%);
transform-origin: top left;
transform: scale(2.25) translate(-6px, 20%);
.elfinder-cwd-size3 .elfinder-cwd-icon.elfinder-cwd-bgurl:after {
-ms-transform: scale(1.2) translate(-9px, 22px);
-webkit-transform: scale(1.2) translate(-9px, 22px);
transform: scale(1.2) translate(-9px, 22px);
.elfinder-cwd-size3 .elfinder-cwd-icon.elfinder-cwd-bgurl {
-ms-transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transform: scale(1);
transform-origin: center center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
.elfinder-cwd-view-icons .elfinder-cwd-filename {
-o-text-overflow: ellipsis;
-webkit-border-radius: 8px;
overflow-wrap: break-word;
-webkit-box-orient: vertical;
/* permissions/symlink markers */
.elfinder-cwd-view-icons .elfinder-perms {
.elfinder-cwd-view-icons .elfinder-lock {
.elfinder-cwd-view-icons .elfinder-symlink {
background-image: url('../img/icons-big.svg');
background-image: url('../img/icons-big.png') \9;
background-position: 0 0;
background-repeat: no-repeat;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/* volume icon of root in folder */
.elfinder-navbar-root-local .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-local.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-local td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_local.svg");
background-image: url("../img/volume_icon_local.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-cwd .elfinder-navbar-root-local.elfinder-droppable-active .elfinder-cwd-icon {
background-position: 1px -1px;
.elfinder-navbar-root-trash .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-trash.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-trash td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_trash.svg");
background-image: url("../img/volume_icon_trash.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-cwd .elfinder-navbar-root-trash.elfinder-droppable-active .elfinder-cwd-icon {
background-position: 1px -1px;
.elfinder-navbar-root-ftp .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-ftp.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-ftp td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_ftp.svg");
background-image: url("../img/volume_icon_ftp.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-cwd .elfinder-navbar-root-ftp.elfinder-droppable-active .elfinder-cwd-icon {
background-position: 1px -1px;
.elfinder-navbar-root-sql .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-sql.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-sql td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_sql.svg");
background-image: url("../img/volume_icon_sql.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-cwd .elfinder-navbar-root-sql.elfinder-droppable-active .elfinder-cwd-icon {
background-position: 1px -1px;
.elfinder-navbar-root-dropbox .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-dropbox.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-dropbox td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_dropbox.svg");
background-image: url("../img/volume_icon_dropbox.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-cwd .elfinder-navbar-root-dropbox.elfinder-droppable-active .elfinder-cwd-icon {
background-position: 1px -1px;
.elfinder-navbar-root-googledrive .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-googledrive.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-googledrive td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_googledrive.svg");
background-image: url("../img/volume_icon_googledrive.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-navbar-root-onedrive .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-onedrive.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-onedrive td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_onedrive.svg");
background-image: url("../img/volume_icon_onedrive.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-navbar-root-box .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-box.elfinder-droppable-active .elfinder-cwd-icon,
.elfinder-cwd-view-list .elfinder-navbar-root-box td .elfinder-cwd-icon {
background-image: url("../img/volume_icon_box.svg");
background-image: url("../img/volume_icon_box.png") \9;
background-position: 0 0;
background-size: contain;
.elfinder-navbar-root-zip .elfinder-cwd-icon,
.elfinder-cwd .elfinder-navbar-root-zip.elfinder-droppable-active .elfinder-cwd-icon,