[Summary view] [Print] [Text view]

   1  // Media Tree
   2  
   3  ul.media-tree {
   4    padding: 0 0 5px;
   5    margin: 0;
   6    overflow-x: visible;
   7    list-style: none;
   8    ul {
   9      margin-left: 2px;
  10    }
  11    &:empty {
  12      display: none;
  13    }
  14  }
  15  
  16  .media-disk {
  17    position: sticky;
  18    top: 75px;
  19    left: 0;
  20    display: block;
  21    margin-bottom: 10px;
  22  }
  23  
  24  .media-drive {
  25    overflow-x: auto;
  26    background-color: $sidebar-drive-bg;
  27    border: 1px solid $border-color;
  28    + .media-drive {
  29      border-top: 0;
  30    }
  31  }
  32  
  33  .media-disk-name {
  34    padding: 4px 1px;
  35    font-size: 1rem;
  36    color: var(--template-bg-dark);
  37  
  38    &:empty {
  39      display: none;
  40    }
  41  }
  42  
  43  .media-tree-item {
  44    position: relative;
  45    display: block;
  46    &::before {
  47      position: absolute;
  48      top: $sidebar-tree-line-height * .5;
  49      left: 0;
  50      width: 10px;
  51      height: 1px;
  52      margin: auto;
  53      content: "";
  54      background-color: $sidebar-tree-line-color;
  55    }
  56    &::after {
  57      position: absolute;
  58      top: 0;
  59      bottom: 0;
  60      left: 0;
  61      width: 1px;
  62      height: 100%;
  63      content: "";
  64      background-color: $sidebar-tree-line-color;
  65    }
  66    &:last-child {
  67      &::after {
  68        height: $sidebar-tree-line-height * .5;
  69      }
  70    }
  71    li {
  72      padding-left: 10px;
  73      &::before, &::after {
  74        left: 5px;
  75      }
  76    }
  77  }
  78  
  79  .media-drive-name {
  80    padding: 4px 10px;
  81    &::before {
  82      content: none;
  83    }
  84    &::after {
  85      content: none;
  86    }
  87    &:hover {
  88      cursor: pointer;
  89    }
  90  }
  91  
  92  .media-tree-item a {
  93    display: block;
  94    padding: 0 7px;
  95    line-height: $sidebar-tree-line-height;
  96    text-decoration: none;
  97    white-space: nowrap;
  98    cursor: pointer;
  99  }
 100  
 101  .media-tree-item.active > a {
 102    &:hover {
 103      text-decoration: none;
 104      background-color: $sidebar-tree-item-hover-bg;
 105    }
 106  }
 107  
 108  .media-tree-item .item-icon {
 109    display: inline-block;
 110    padding-right: 2px;
 111    font-size: 15px;
 112    line-height: normal;
 113    color: var(--template-bg-dark-60);
 114    vertical-align: middle;
 115  }
 116  
 117  .media-tree-item.active > a .item-icon {
 118    color: $sidebar-active-icon-color;
 119  }
 120  
 121  .item-name {
 122    display: inline-block;
 123    overflow: hidden;
 124    font-size: .9em;
 125    text-overflow: ellipsis;
 126    white-space: nowrap;
 127    vertical-align: middle;
 128  }
 129  
 130  .media-tree-item.active > a .item-name {
 131    font-weight: bold;
 132  }
 133  
 134  // RTL override
 135  html[dir=rtl] {
 136    .media-browser-table .dimension, .media-browser-table .size {
 137      direction: ltr;
 138    }
 139  
 140    .media-browser-table .created, .media-browser-table .modified {
 141      direction: ltr;
 142    }
 143  
 144    .media-drive-name {
 145      padding-right: 2px;
 146    }
 147  
 148    .media-tree-item li::before, .media-tree-item li::after {
 149      right: 5px;
 150      left: 0;
 151      margin: 0;
 152    }
 153  
 154    .media-tree-item .item-icon {
 155      padding-right: 10px;
 156      padding-left: 2px;
 157    }
 158  
 159    ul.media-tree ul {
 160      margin-right: 15px;
 161    }
 162  }