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

     1  /*--------------------------
     2      Sidebar
     3  ----------------------------*/
     4  .fe-sidebar {
     5  	width: @fe-sidebar-width;
     6  	background-color: @fe-sidebar-bg;
     7  	position: fixed;
     8  	height: 100%;
     9  	overflow: hidden;
    10  	padding: 25px;
    11  
    12  	@media(min-width: @screen-md-min) {
    13  		.translate3d(0, 0, 0);
    14  	}
    15  
    16  	@media(max-width: @screen-sm-max) {
    17  		padding-top: 85px;
    18  		z-index: 9;
    19  		box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
    20  		.transition(all);
    21  		.transition-duration(300ms);
    22  		.translate3d((-@fe-sidebar-width - 15px), 0, 0);
    23  
    24  		&.toggled {
    25  			.translate3d(0, 0, 0);
    26  		}
    27  	}
    28  
    29  	a {
    30  		color: rgba(255, 255, 255, 0.75);
    31  
    32  		&:hover {
    33  			color: @white;
    34  		}
    35  	}
    36  }
    37  
    38  /*--------------------------
    39      Header
    40  ----------------------------*/
    41  .fes-header {
    42  	margin-bottom: 40px;
    43  
    44  	img,
    45  	h2 {
    46  		float: left;
    47  	}
    48  
    49  	h2 {
    50  		margin: 6px 0 0 13px;
    51  		font-weight: normal;
    52  		color: @white;
    53  		font-size: 20px;
    54  	}
    55  
    56  	img {
    57  		width: 20px;
    58  	}
    59  }
    60  
    61  /*--------------------------
    62      List
    63  ----------------------------*/
    64  .fesl-inner {
    65  	height: ~"calc(100vh - 260px)";
    66  	overflow: auto;
    67  	padding: 0;
    68  	margin: 0 -25px;
    69  
    70  	& li {
    71  		position: relative;
    72  
    73  		& > a {
    74  			display: block;
    75  			padding: 10px 45px 12px 55px;
    76  			word-wrap: break-word;
    77  
    78  			&:before {
    79  				font-family: 'Font Awesome 5 Free';
    80  				content: '\f0a0';
    81  				font-size: 17px;
    82  				position: absolute;
    83  				top: 10px;
    84  				left: 25px;
    85  				.opacity(0.8);
    86  			}
    87  
    88  			&.fesli-loading {
    89  				&:before {
    90  					.list-loader(20px, 20px, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
    91  					left: 32px;
    92  					top: 0;
    93  					bottom: 0;
    94  					margin: auto;
    95  				}
    96  			}
    97  		}
    98  
    99  		&.active {
   100  			background-color: rgba(0,0,0,0.1);
   101  
   102  			& > a {
   103  				color: @white;
   104  			}
   105  		}
   106  
   107  		&:not(.active):hover {
   108  			background-color: rgba(0, 0, 0, 0.05);
   109  
   110  			& > a {
   111  				color: @white;
   112  			}
   113  		}
   114  
   115  		&:hover {
   116  			.bucket-dropdown .dropdown-toggle {
   117  				.opacity(0.6);
   118  
   119  				&:hover {
   120  					.opacity(1);
   121  				}
   122  			}
   123  		}
   124  	}
   125  
   126  	ul {
   127  		list-style: none;
   128  		padding: 0;
   129  		margin: 0;
   130  	}
   131  
   132  	&:hover .scrollbar-vertical {
   133  		opacity: 1;
   134  	}
   135  }
   136  
   137  /* Dropdown */
   138  .bucket-dropdown {
   139  	position: absolute;
   140  	top: 0px;
   141  	right: 0px;
   142  	width: 35px;
   143  	height: 100%;
   144  	cursor: pointer;
   145  	color: @white;
   146  
   147  	.dropdown-toggle {
   148  		.opacity(0);
   149  		.transition(all);
   150  		.transition-duration(200ms);
   151  		font-size: 20px;
   152  		background-color: transparent;
   153  	}
   154  
   155  	.dropdown-menu-right {
   156  		padding: 15px 0;
   157  		margin-top: -1px;
   158  		& li {
   159  			a:before {
   160  				content: none;
   161  				-webkit-box-shadow: @dropdown-shadow;
   162  				box-shadow: @dropdown-shadow;	
   163  			}
   164  			&:not(.active):hover {
   165  				& > a {
   166  					color: @dropdown-link-hover-color;
   167  				}
   168  			}
   169  		}
   170  	}
   171  }
   172  
   173  /* Scrollbar */
   174  .scrollbar-vertical {
   175  	position: absolute;
   176  	right: 5px;
   177  	width: 4px;
   178  	height: 100%;
   179  	opacity: 0;
   180  	.transition(opacity);
   181  	.transition-duration(300ms);
   182  
   183  	div {
   184  		border-radius: 1px !important;
   185  		background-color: #6a6a6a !important;
   186  	}
   187  }
   188  
   189  /*--------------------------
   190      Host
   191  ----------------------------*/
   192  .fes-host {
   193  	position: fixed;
   194  	left: 0;
   195  	bottom: 0;
   196  	z-index: 1;
   197  	background-color: rgba(0,0,0,0.1);
   198  	font-size: 15px;
   199  	font-weight: 400;
   200  	width: @fe-sidebar-width;
   201  	padding: 20px;
   202  	.text-overflow();
   203  
   204  	& > i {
   205  		margin-right: 10px;
   206  	}
   207  }
   208  
   209  
   210  
   211