forked from TrueCloudLab/frostfs-s3-gw
212 lines
3 KiB
Text
212 lines
3 KiB
Text
|
/*--------------------------
|
||
|
Sidebar
|
||
|
----------------------------*/
|
||
|
.fe-sidebar {
|
||
|
width: @fe-sidebar-width;
|
||
|
background-color: @fe-sidebar-bg;
|
||
|
position: fixed;
|
||
|
height: 100%;
|
||
|
overflow: hidden;
|
||
|
padding: 25px;
|
||
|
|
||
|
@media(min-width: @screen-md-min) {
|
||
|
.translate3d(0, 0, 0);
|
||
|
}
|
||
|
|
||
|
@media(max-width: @screen-sm-max) {
|
||
|
padding-top: 85px;
|
||
|
z-index: 9;
|
||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
|
||
|
.transition(all);
|
||
|
.transition-duration(300ms);
|
||
|
.translate3d((-@fe-sidebar-width - 15px), 0, 0);
|
||
|
|
||
|
&.toggled {
|
||
|
.translate3d(0, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: rgba(255, 255, 255, 0.75);
|
||
|
|
||
|
&:hover {
|
||
|
color: @white;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*--------------------------
|
||
|
Header
|
||
|
----------------------------*/
|
||
|
.fes-header {
|
||
|
margin-bottom: 40px;
|
||
|
|
||
|
img,
|
||
|
h2 {
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
margin: 6px 0 0 13px;
|
||
|
font-weight: normal;
|
||
|
color: @white;
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
width: 20px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*--------------------------
|
||
|
List
|
||
|
----------------------------*/
|
||
|
.fesl-inner {
|
||
|
height: ~"calc(100vh - 260px)";
|
||
|
overflow: auto;
|
||
|
padding: 0;
|
||
|
margin: 0 -25px;
|
||
|
|
||
|
& li {
|
||
|
position: relative;
|
||
|
|
||
|
& > a {
|
||
|
display: block;
|
||
|
padding: 10px 45px 12px 55px;
|
||
|
word-wrap: break-word;
|
||
|
|
||
|
&:before {
|
||
|
font-family: 'Font Awesome 5 Free';
|
||
|
content: '\f0a0';
|
||
|
font-size: 17px;
|
||
|
position: absolute;
|
||
|
top: 10px;
|
||
|
left: 25px;
|
||
|
.opacity(0.8);
|
||
|
}
|
||
|
|
||
|
&.fesli-loading {
|
||
|
&:before {
|
||
|
.list-loader(20px, 20px, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
|
||
|
left: 32px;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
margin: auto;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.active {
|
||
|
background-color: rgba(0,0,0,0.1);
|
||
|
|
||
|
& > a {
|
||
|
color: @white;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:not(.active):hover {
|
||
|
background-color: rgba(0, 0, 0, 0.05);
|
||
|
|
||
|
& > a {
|
||
|
color: @white;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
.bucket-dropdown .dropdown-toggle {
|
||
|
.opacity(0.6);
|
||
|
|
||
|
&:hover {
|
||
|
.opacity(1);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
&:hover .scrollbar-vertical {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* Dropdown */
|
||
|
.bucket-dropdown {
|
||
|
position: absolute;
|
||
|
top: 0px;
|
||
|
right: 0px;
|
||
|
width: 35px;
|
||
|
height: 100%;
|
||
|
cursor: pointer;
|
||
|
color: @white;
|
||
|
|
||
|
.dropdown-toggle {
|
||
|
.opacity(0);
|
||
|
.transition(all);
|
||
|
.transition-duration(200ms);
|
||
|
font-size: 20px;
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
|
||
|
.dropdown-menu-right {
|
||
|
padding: 15px 0;
|
||
|
margin-top: -1px;
|
||
|
& li {
|
||
|
a:before {
|
||
|
content: none;
|
||
|
-webkit-box-shadow: @dropdown-shadow;
|
||
|
box-shadow: @dropdown-shadow;
|
||
|
}
|
||
|
&:not(.active):hover {
|
||
|
& > a {
|
||
|
color: @dropdown-link-hover-color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* Scrollbar */
|
||
|
.scrollbar-vertical {
|
||
|
position: absolute;
|
||
|
right: 5px;
|
||
|
width: 4px;
|
||
|
height: 100%;
|
||
|
opacity: 0;
|
||
|
.transition(opacity);
|
||
|
.transition-duration(300ms);
|
||
|
|
||
|
div {
|
||
|
border-radius: 1px !important;
|
||
|
background-color: #6a6a6a !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/*--------------------------
|
||
|
Host
|
||
|
----------------------------*/
|
||
|
.fes-host {
|
||
|
position: fixed;
|
||
|
left: 0;
|
||
|
bottom: 0;
|
||
|
z-index: 1;
|
||
|
background-color: rgba(0,0,0,0.1);
|
||
|
font-size: 15px;
|
||
|
font-weight: 400;
|
||
|
width: @fe-sidebar-width;
|
||
|
padding: 20px;
|
||
|
.text-overflow();
|
||
|
|
||
|
& > i {
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|