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