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