compact styles

web/css/file_manager.css

@@ -179,8 +179,8 @@ ul.listing { list-style-type: none; padding: 18px 0 0; margin: 0;  border-left:
 .listing li.selected-inactive .mode,
 .listing li.selected-inactive .time,
 .listing li.selected-inactive .date { color: #999 !important; }
-.listing li.selected { background-color: #7FD5D9; }
 .window.active .listing li.selected.active { background-color: #73CAA0; }
+.listing li.selected { background-color: #7FD5D9; }
 
 
 .listing li.selected-inactive.selected.active { background-color: #dfc891;  border-top: 1px solid #cdb885; border-bottom: 1px solid #cdb885; }

web/css/styles.min.css

@@ -255,7 +255,7 @@ abbr[title] {
 b,
 strong {
   font-weight: bold;
-  color: #777;
+  color: #5f5f5f;
 }
 
 /**
@@ -721,6 +721,10 @@ input[type="checkbox"] {
 .lang-ar .l-menu__item a {
   padding: 11px 15px;
 }
+.lang-ar .l-menu__item a {
+  line-height: 35px;
+}
+
 .lang-de .l-menu__item a {
   padding: 11px 12px;
 }
@@ -907,7 +911,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
   margin: 0;
   overflow: hidden;
   top: 42px;
-  width: 148px;
+  width: 201px;
   background-color: #959593;
   list-style-type: none;
   padding-left: 0;
@@ -924,15 +928,15 @@ div.l-content > div.l-separator:nth-of-type(4) {
   padding: 12px;
 }
 .context-menu.sort-order span.name {
-  background: url("/images/flat_icons.png") repeat scroll -162px -105px rgba(0, 0, 0, 0);
+  background: url("/images/sprite.png") no-repeat scroll -292px -361px rgba(0, 0, 0, 0);
   display: inline-block;
   padding: 12px 28px 12px 12px;
-  width: 64px;
+  width: 117px;
   text-transform: uppercase;
   font-weight: bold;
 }
 .context-menu.sort-order span.up {
-  background: url("/images/flat_icons.png") repeat scroll -255px -141px rgba(0, 0, 0, 0);
+  background: url("/images/sprite.png") no-repeat scroll -434px -417px rgba(0, 0, 0, 0);
   display: inline-block;
   padding: 12px 14px;
   width: 16px;
@@ -970,7 +974,6 @@ div.l-content > div.l-separator:nth-of-type(4) {
   cursor: pointer;
   padding-top: 7px;
   padding-right: 40px;
-  display: none;
 }
 .l-sort-toolbar .sort-by:hover {
   color: #555;
@@ -985,6 +988,11 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #55c9c0;
 }
 
+.l-sort-toolbar .sort-by b {
+  text-transform: uppercase;
+  padding-left: 3px;
+}
+
 .l-sort-toolbar .toggle-all:hover {
   color: #555;
 }
@@ -1117,10 +1125,18 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .l-unit {
-  color: #929292;
+  color: #888;
   padding: 0 0 0 15px;
   overflow: hidden;
+  font-size: 13px;
 }
+
+.units .l-unit {
+  border-bottom: 1px solid #ddd;
+}
+
+
+
 .l-unit-ftl {
   color: #929292;
   padding: 0 0 0 15px;
@@ -1129,8 +1145,9 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .l-unit:hover .l-unit-toolbar__col--right {
   display: block;
 }
-.l-unit--orange {
+.l-unit--starred {
   border-left: 2px solid #ff6701;
+  padding-left: 13px;
 }
 .l-unit--blue {
   border-left: 2px solid #55c9c0;
@@ -1202,7 +1219,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
   background-color: #d1eddc;
 }
 .l-unit-toolbar{
-  height: 51px;
+  height: 38px;
 }
 .l-unit label {
   margin-bottom: 20px;
@@ -1219,6 +1236,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
   width: 124px;
   padding-right: 10px;
 }
+.units.compact .l-unit__col--left {
+  vertical-align: top;
+}
+
 .l-unit__col--left.step-left {
   padding-left: 30px;
 }
@@ -1247,6 +1268,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
   margin-bottom: 14px;
 }
 
+.units.compact .l-unit__suspended {
+  margin-top: 1px;
+}
+
 .l-unit--outdated .l-unit__suspended,
 .l-unit--suspended .l-unit__suspended {
   display: block;
@@ -1270,13 +1295,13 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .l-unit__name {
-  color: #343434;
+  color: #111;
   font-size: 32px;
   margin-bottom: 10px;
 }
 .l-unit__stats.separate,
 .l-unit__name.separate {
-  padding-bottom: 20px;
+  padding-bottom: 15px;
 }
 
 .l-unit__name.small {
@@ -1303,7 +1328,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .l-unit__ip {
-  margin-bottom: 34px;
+  margin-bottom: 26px;
   font-size: 12px;
   letter-spacing: 1px;
 }
@@ -1311,25 +1336,37 @@ div.l-content > div.l-separator:nth-of-type(4) {
   padding-left: 3px;
   padding-right: 3px;
 }
+.display-ip {
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.display-ip span {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
 .l-unit__stats {
-  margin-bottom: 53px;
+  margin-bottom: 50px;
 }
 .l-unit__stats table {
   width: 100%;
   table-layout: fixed;
 }
 .l-unit__stats td {
-  height: 25px;
+  height: 22px;
   padding-bottom: 3px;
   vertical-align: top;
 }
 .l-unit__stat-col--left {
   float: left;
-  width: 130px;
+  width: 124px;
 }
 .l-unit__stat-col--left.compact {
   width: 70px;
 }
+.l-unit__stat-col--left.compact-2 {
+  width: 95px;
+}
 .l-unit__stat-col--left.wide {
   width: 190px;
 }
@@ -1366,7 +1403,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
   float: left;
   margin-left: -15px;
   margin-top: 0;
-  padding-bottom: 8px;
+  padding-bottom: 0px;/* 8px */
   padding-left: 15px;
   padding-top: 15px;
   width: 30px;
@@ -1387,7 +1424,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
 .actions-panel__col {
   float: left;
   min-width: 95px;
-  min-height: 33px;
+  min-height: 31px;
   text-transform: uppercase;
   background-color: #dfdedd;
   border-right: 1px solid #d8d7d7;
@@ -1399,14 +1436,14 @@ div.l-content > div.l-separator:nth-of-type(4) {
   display: inline-block;
   float: right;
   content: '';
-  width: 33px;
-  height: 33px;
+  width: 31px;
+  height: 31px;
   position: absolute;
   top: 0;
   right: 0;
 }
 .actions-panel__col a {
-  line-height: 33px;
+  line-height: 31px;
   color: #777;
   font-weight: 700;
   font-size: 12px;
@@ -1440,7 +1477,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .actions-panel__edit i {
-  background-position: -1px -168px;
+  background-position: -1px -169px;
 }
 .actions-panel__edit:hover a {
   background-color: #9fbf0c;
@@ -1451,21 +1488,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #555;
 }
 .actions-panel__edit:hover a i {
-  background-position: -41px -168px;
+  background-position: -41px -169px;
 }
 .actions-panel__edit:active a i {
-  background-position: -81px -168px;
+  background-position: -81px -169px;
 }
 .actions-panel__edit--active a {
   background-color: #c0e60f;
   color: #fff;
 }
 .actions-panel__edit--active i {
-  background-position: -78px -168px;
+  background-position: -78px -169px;
 }
 
 .actions-panel__restart i {
-  background-position: -1px -519px;
+  background-position: -1px -520px;
 }
 .actions-panel__restart:hover a {
   background-color: #9fbf0c;
@@ -1476,21 +1513,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #555;
 }
 .actions-panel__restart:hover a i {
-  background-position: -41px -519px;
+  background-position: -41px -520px;
 }
 .actions-panel__restart:active a i {
-  background-position: -81px -519px;
+  background-position: -81px -520px;
 }
 .actions-panel__restart--active a {
   background-color: #c0e60f;
   color: #fff;
 }
 .actions-panel__restart--active i {
-  background-position: -78px -519px;
+  background-position: -78px -520px;
 }
 
 .actions-panel__add i {
-  background-position: -1px -284px;
+  background-position: -1px -285px;
 }
 .actions-panel__add:hover a {
   background-color: #9fbf0c;
@@ -1501,10 +1538,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #555;
 }
 .actions-panel__add:hover a i {
-  background-position: -41px -284px;
+  background-position: -41px -285px;
 }
 .actions-panel__add:active a i {
-  background-position: -81px -284px;
+  background-position: -81px -285px;
 }
 
 .actions-panel__add--active a {
@@ -1512,11 +1549,11 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__add--active i {
-  background-position: -78px -284px;
+  background-position: -78px -285px;
 }
 
 .actions-panel__update i {
-  background-position: -1px -480px;
+  background-position: -1px -481px;
 }
 .actions-panel__update:hover a {
   background-color: #9fbf0c;
@@ -1527,21 +1564,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #555;
 }
 .actions-panel__update:hover a i {
-  background-position: -41px -480px;
+  background-position: -41px -481px;
 }
 .actions-panel__update:active a i {
-  background-position: -81px -480px;
+  background-position: -81px -481px;
 }
 .actions-panel__update--active a {
   background-color: #c0e60f;
   color: #fff;
 }
 .actions-panel__update--active i {
-  background-position: -78px -480px;
+  background-position: -78px -481px;
 }
 
 .actions-panel__logs i {
-  background-position: -2px -129px;
+  background-position: -2px -130px;
 }
 .actions-panel__logs:hover a {
   background-color: #afafac;
@@ -1552,21 +1589,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__logs:hover a i {
-  background-position: -42px -129px;
+  background-position: -42px -130px;
 }
 .actions-panel__logs:active a i {
-  background-position: -82px -129px;
+  background-position: -82px -130px;
 }
 .actions-panel__logs--active a {
   background-color: #55c9c0;
   color: #fff;
 }
 .actions-panel__logs--active i {
-  background-position: -79px -129px;
+  background-position: -79px -130px;
 }
 
 .actions-panel__db i {
-  background-position: -2px -362px;
+  background-position: -2px -363px;
 }
 .actions-panel__db:hover a {
   background-color: #afafac;
@@ -1577,10 +1614,10 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__db:hover a i {
-  background-position: -42px -362px;
+  background-position: -42px -363px;
 }
 .actions-panel__db:active a i {
-  background-position: -82px -362px;
+  background-position: -82px -363px;
 }
 .actions-panel__db--active a {
   background-color: #55c9c0;
@@ -1591,7 +1628,7 @@ div.l-content > div.l-separator:nth-of-type(4) {
 }
 
 .actions-panel__suspend i {
-  background-position: -1px -50px;
+  background-position: -1px -51px;
 }
 .actions-panel__suspend:hover a {
   background-color: #afafac;
@@ -1602,21 +1639,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__suspend:hover a i {
-  background-position: -41px -50px;
+  background-position: -41px -51px;
 }
 .actions-panel__suspend:active a i {
-  background-position: -81px -50px;
+  background-position: -81px -51px;
 }
 .actions-panel__suspend--active a {
   background-color: #55c9c0;
   color: #fff;
 }
 .actions-panel__suspend--active i {
-  background-position: -78px -50px;
+  background-position: -78px -51px;
 }
 
 .actions-panel__unsuspend i {
-  background-position: -1px -11px;
+  background-position: -1px -12px;
 }
 .actions-panel__unsuspend:hover a {
   background-color: #afafac;
@@ -1627,22 +1664,22 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__unsuspend:hover a i {
-  background-position: -41px -11px;
+  background-position: -41px -12px;
 }
 .actions-panel__unsuspend:active a i {
-  background-position: -81px -11px;
+  background-position: -81px -12px;
 }
 .actions-panel__unsuspend--active a {
   background-color: #55c9c0;
   color: #fff;
 }
 .actions-panel__unsuspend--active i {
-  background-position: -78px -11px;
+  background-position: -78px -12px;
 }
 
 
 .actions-panel__loginas i {
-  background-position: -1px -244px;
+  background-position: -1px -245px;
 }
 .actions-panel__loginas:hover a {
   background-color: #afafac;
@@ -1653,21 +1690,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__loginas:hover a i {
-  background-position: -41px -244px;
+  background-position: -41px -245px;
 }
 .actions-panel__loginas:active a i {
-  background-position: -81px -244px;
+  background-position: -81px -245px;
 }
 .actions-panel__loginas--active a {
   background-color: #55c9c0;
   color: #fff;
 }
 .actions-panel__loginas--active i {
-  background-position: -78px -244px;
+  background-position: -78px -245px;
 }
 
 .actions-panel__download i {
-  background-position: -1px -401px;
+  background-position: -1px -402px;
 }
 .actions-panel__download:hover a {
   background-color: #9fbf0c;
@@ -1678,21 +1715,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #555;
 }
 .actions-panel__download:hover a i {
-  background-position: -41px -401px;
+  background-position: -41px -402px;
 }
 .actions-panel__download:active a i {
-  background-position: -81px -401px;
+  background-position: -81px -402px;
 }
 .actions-panel__download--active a {
   background-color: #c0e60f;
   color: #fff;
 }
 .actions-panel__download--active i {
-  background-position: -78px -401px;
+  background-position: -78px -402px;
 }
 
 .actions-panel__configure i {
-  background-position: -1px -441px;
+  background-position: -1px -442px;
 }
 .actions-panel__configure:hover a {
   background-color: #afafac;
@@ -1703,21 +1740,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__configure:hover a i {
-  background-position: -41px -441px;
+  background-position: -41px -442px;
 }
 .actions-panel__configure:active a i {
-  background-position: -81px -441px;
+  background-position: -81px -442px;
 }
 .actions-panel__configure--active a {
   background-color: #55c9c0;
   color: #fff;
 }
 .actions-panel__configure--active i {
-  background-position: -78px -441px;
+  background-position: -78px -442px;
 }
 
 .actions-panel__mail i {
-  background-position: -1px -323px;
+  background-position: -1px -324px;
 }
 .actions-panel__mail:hover a {
   background-color: #afafac;
@@ -1728,21 +1765,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__mail:hover a i {
-  background-position: -41px -323px;
+  background-position: -41px -324px;
 }
 .actions-panel__mail:active a i {
-  background-position: -81px -323px;
+  background-position: -81px -324px;
 }
 .actions-panel__mail--active a {
   background-color: #55c9c0;
   color: #fff;
 }
 .actions-panel__mail--active i {
-  background-position: -78px -323px;
+  background-position: -78px -324px;
 }
 
 .actions-panel__delete i {
-  background-position: -1px -206px;
+  background-position: -1px -207px;
 }
 .actions-panel__delete:hover a {
   background-color: #ff3438;
@@ -1753,21 +1790,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__delete:hover a i {
-  background-position: -41px -206px;
+  background-position: -41px -207px;
 }
 .actions-panel__delete:active a i {
-  background-position: -81px -206px;
+  background-position: -81px -207px;
 }
 .actions-panel__delete--active a {
   background-color: #ff5f5f;
   color: #fff;
 }
 .actions-panel__delete--active i {
-  background-position: -78px -206px;
+  background-position: -78px -207px;
 }
 
 .actions-panel__stop i {
-  background-position: -1px -560px;
+  background-position: -1px -561px;
 }
 .actions-panel__stop:hover a {
   background-color: #ff3438;
@@ -1778,21 +1815,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #fff;
 }
 .actions-panel__stop:hover a i {
-  background-position: -41px -560px;
+  background-position: -41px -561px;
 }
 .actions-panel__stop:active a i {
-  background-position: -81px -560px;
+  background-position: -81px -561px;
 }
 .actions-panel__stop--active a {
   background-color: #ff5f5f;
   color: #fff;
 }
 .actions-panel__stop--active i {
-  background-position: -78px -560px;
+  background-position: -78px -561px;
 }
 
 .actions-panel__start i {
-  background-position: -1px -481px;
+  background-position: -1px -482px;
 }
 .actions-panel__start:hover a {
   background-color: #9fbf0c;
@@ -1803,21 +1840,21 @@ div.l-content > div.l-separator:nth-of-type(4) {
   color: #555;
 }
 .actions-panel__start:hover a i {
-  background-position: -41px -481px;
+  background-position: -41px -482px;
 }
 .actions-panel__start:active a i {
-  background-position: -81px -481px;
+  background-position: -81px -482px;
 }
 .actions-panel__start--active a {
   background-color: #c0e60f;
   color: #fff;
 }
 .actions-panel__start--active i {
-  background-position: -78px -481px;
+  background-position: -78px -482px;
 }
 
 
-.l-icon-down-arrow, .l-icon-star, .l-icon-to-top, .l-icon-star-orange, .l-icon-star-blue {
+.l-icon-up-arrow, .l-icon-down-arrow, .l-icon-star, .l-icon-to-top, .l-icon-star-orange, .l-icon-star-blue {
   display: inline-block;
   vertical-align: middle;
   background-image: url("/images/sprite.png");
@@ -1829,12 +1866,44 @@ div.l-content > div.l-separator:nth-of-type(4) {
   background-position: -280px -128px;
 }
 
+.l-icon-up-arrow {
+  width: 7px;
+  height: 15px;
+  background-position: -299px -129px;
+}
+
+
 .l-icon-star {
-  width: 35px;
-  height: 35px;
-  background-position: 0 -85px;
+  width: 36px;
+  height: 36px;
+  background-position: -216px 560px;
+  display: none;
+  cursor: pointer;
+}
+.l-unit--starred .l-icon-star {
+  display: inline-block;
+  background-position: -174px 560px;
 }
 
+.units.compact .l-icon-star {
+  margin-top: -14px;
+}
+
+.l-icon-star:hover {
+  -background-position: -130px 560px;
+  background-position: 0px 560px;
+}
+
+.l-icon-star:active {
+  -background-position: -174px 560px;
+  background-position: -80px 562px;
+}
+
+.l-unit:hover .l-icon-star {
+  display: inline-block;
+}
+
+
 .l-icon-to-top {
   width: 35px;
   height: 35px;
@@ -2377,15 +2446,18 @@ td.hint {
   text-transform: uppercase;
 }
 .data-suspended b {
-  color: #de5543;
+  color: #A3A3A3;
   font-size: 11px;
-  letter-spacing: 1px;
+  letter-spacing: 3px;
+  font-weight: bold;
+  text-transform: uppercase;
 }
 .data-date {
   font-weight: normal;
-  color: #555;
-  font-size: 11px;
+  color: #777;
+  font-size: 12px;
   letter-spacing: 1px;
+  line-height: 23px;
 }
 .data-dotted {
   vertical-align: top;
@@ -2596,3 +2668,6 @@ form#vstobjects.suspended {
   float: right !important;
   padding-top: 3px;
 }
+.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
+  -background-color: #dfdedd;
+}