storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/less/inc/header.less (about)

     1  /*--------------------------
     2      Header
     3  ----------------------------*/
     4  .fe-header {
     5      @media(min-width: (@screen-sm-min - 100)) {
     6          position: relative;
     7          padding: 40px 40px 20px 45px;
     8      }
     9  
    10      @media(max-width: (@screen-xs-max - 100)) {
    11          padding: 20px;
    12      }
    13  
    14      h2 {
    15          font-size: 16px;
    16          font-weight: normal;
    17          margin: 0;
    18  
    19          @media(min-width: (@screen-md-min)) {
    20              width: calc(100% - 60px);
    21          }
    22  
    23          & > span {
    24              margin-bottom: 7px;
    25              display: inline-block;
    26  
    27              &:not(:first-child) {
    28                  &:before {
    29                      content: '/';
    30                      margin: 0 4px;
    31                      color: @text-color;
    32                  }
    33              }
    34              &:last-of-type {
    35                  &:after {
    36                      content: '/';
    37                      margin: 0 4px;
    38                      color: @text-color;
    39                  }
    40              }
    41          }
    42      }
    43  
    44      p {
    45          margin-top: 7px;
    46      }
    47  }
    48  
    49  
    50  /*--------------------------
    51      Edit path
    52  ----------------------------*/
    53  .fe-edit {
    54      font-size: 20px;
    55      color: @link-color;
    56      margin-left: 4px;
    57  
    58      i {
    59          vertical-align: middle;
    60      }
    61  }
    62  
    63  /*--------------------------
    64      Disk used
    65  ----------------------------*/
    66  .feh-used {
    67      margin-top: 12px;
    68      max-width: 285px;
    69  
    70      @media(max-width: (@screen-xs-max - 100px)) {
    71          max-width: 100%;
    72          font-size: 12px;
    73      }
    74  
    75      & > ul {
    76          margin-top: 7px;
    77          list-style: none;
    78          padding: 0;
    79  
    80          & > li {
    81              padding-right: 0;
    82              display: inline-block;
    83          }
    84      }
    85  }
    86  
    87  .fehu-chart {
    88      height: 5px;
    89      background: #eee;
    90      position: relative;
    91      border-radius: 2px;
    92      overflow: hidden;
    93  
    94      & > div {
    95          position: absolute;
    96          left: 0;
    97          height: 100%;
    98          background: @link-color;
    99      }
   100  }
   101  
   102  /*--------------------------
   103      Header Actions
   104  ----------------------------*/
   105  .feh-actions {
   106      list-style: none;
   107      padding: 0;
   108      margin: 0;
   109      position: absolute;
   110      right: 35px;
   111      top: 30px;
   112      z-index: 11;
   113  
   114      @media(max-width: (@screen-sm-max)) {
   115          top: 7px;
   116          right: 10px;
   117          position: fixed;
   118      }
   119  
   120      & > li {
   121          display: inline-block;
   122          text-align: right;
   123          vertical-align: top;
   124          line-height: 100%;
   125  
   126          & > a,
   127          & > .btn-group > button {
   128              display: block;
   129              height: 45px;
   130              min-width: 45px;
   131              text-align: center;
   132              border-radius: 50%;
   133              padding: 0;
   134              border: 0;
   135              background: none;
   136  
   137              @media(min-width: @screen-md-min) {
   138                  color: #7B7B7B;
   139                  font-size: 21px;
   140                  line-height: 45px;
   141                  .transition(all);
   142                  .transition-duration(300ms);
   143  
   144                  &:hover {
   145                      background: rgba(0,0,0,0.09);
   146                  }
   147              }
   148  
   149              @media(max-width: (@screen-sm-max)) {
   150                  background: url(../../img/more-h-light.svg) no-repeat center;
   151  
   152                  .fa-bars {
   153                      display: none;
   154                  }
   155              }
   156  
   157          }
   158      }
   159  }
   160  
   161  
   162  /*--------------------------
   163      Mobile Header
   164  ----------------------------*/
   165  @media(max-width: @screen-sm-max) {
   166      .fe-header-mobile {
   167          background-color: @dark-gray;
   168          padding: 10px 50px 9px 12px;
   169          text-align: center;
   170          position: fixed;
   171          z-index: 10;
   172          box-shadow: 0 0 10px rgba(0,0,0,0.3);
   173          left: 0;
   174          top: 0;
   175          width: 100%;
   176  
   177          .mh-logo {
   178              height: 35px;
   179              position: relative;
   180              top: 4px;
   181          }
   182      }
   183  
   184      .feh-trigger {
   185          width: 41px;
   186          height: 41px;
   187          cursor: pointer;
   188          float: left;
   189          position: relative;
   190          text-align: center;
   191  
   192          &:before,
   193          &:after {
   194              content: "";
   195              position: absolute;
   196              top: 0;
   197              left: 0;
   198              width: 100%;
   199              height: 100%;
   200              border-radius: 50%;
   201  
   202          }
   203  
   204          &:after {
   205              z-index: 1;
   206          }
   207  
   208          &:before {
   209              background: rgba(255, 255, 255, 0.1);
   210              .transition(all);
   211              .transition-duration(300ms);
   212              .scale(0);
   213          }
   214      }
   215  
   216      .feht-toggled {
   217          &:before {
   218              .scale(1);
   219          }
   220  
   221          .feht-lines {
   222              .rotate(180deg);
   223  
   224              & > div {
   225                  &.top {
   226                      width: 12px;
   227                      transform: translateX(8px) translateY(1px) rotate(45deg);
   228                      -webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
   229                  }
   230  
   231                  &.bottom {
   232                      width: 12px;
   233                      transform: translateX(8px) translateY(-1px) rotate(-45deg);
   234                      -webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
   235                  }
   236              }
   237          }
   238      }
   239  
   240      .feht-lines,
   241      .feht-lines > div {
   242          .transition(all);
   243          .transition-duration(300ms);
   244      }
   245  
   246      .feht-lines {
   247          width: 18px;
   248          height: 12px;
   249          display: inline-block;
   250          margin-top: 14px;
   251  
   252          & > div {
   253              background-color: #EAEAEA;
   254              width: 18px;
   255              height: 2px;
   256  
   257              &.center {
   258                  margin: 3px 0;
   259              }
   260          }
   261      }
   262  }
   263  
   264