github.com/GregorioDiStefano/go-file-storage@v0.0.0-20161001105139-5707ab351525/static/css/term.css (about) 1 #window{ 2 width: 90%; 3 margin-top:40px; 4 margin-left: auto; 5 margin-right: auto; 6 margin-bottom:40px; 7 min-width: 550px; 8 background: #fff; 9 border-radius: 5px; 10 -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.75); 11 -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.75); 12 /*-webkit-transition:all 0.5s; */ 13 overflow: hidden; 14 } 15 16 /* TOP BAR */ 17 #topbar{ 18 width: 100%; 19 height: 21px; 20 font-size: 16px; 21 font-family: "Myriad Pro", sans-serif; 22 text-shadow:0px 1px 0px rgba(255,255,255,0.25); 23 -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.5); 24 -moz-box-shadow:0 1px 0 rgba(0,0,0,0.5); 25 26 27 } 28 #topbar ul li { 29 float: left; 30 padding:0 10px; 31 height: 21px; 32 line-height: 24px; 33 } 34 #topbar ul li:first-child{ 35 font-size: 20px; 36 line-height: 26px; 37 margin-left: 5px; 38 } 39 #topbar ul li:nth-child(2){ 40 font-family: "Myriad-Semi", sans-serif; 41 } 42 #topbar ul li:active{ 43 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4a82ff),color-stop(0, #0052fc)); 44 color: #fff; 45 text-shadow: none; 46 } 47 #toolbar{ 48 width: 100%; 49 height: 25px; 50 background: grey; 51 border-radius:5px 5px 0 0; 52 53 background: #cfcfcf; /* Old browsers */ 54 background: -moz-linear-gradient(top, #cfcfcf 0%, #a8a8a8 100%); /* FF3.6+ */ 55 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfcfcf), color-stop(100%,#a8a8a8)); /* Chrome,Safari4+ */ 56 background: -webkit-linear-gradient(top, #cfcfcf 0%,#a8a8a8 100%); /* Chrome10+,Safari5.1+ */ 57 background: -o-linear-gradient(top, #cfcfcf 0%,#a8a8a8 100%); /* Opera 11.10+ */ 58 background: -ms-linear-gradient(top, #cfcfcf 0%,#a8a8a8 100%); /* IE10+ */ 59 background: linear-gradient(top, #cfcfcf 0%,#a8a8a8 100%); /* W3C */ 60 61 -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset,0px 1px 0px #515151; 62 -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset,0px 1px 0px #515151; 63 box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset,0px 1px 0px #515151; 64 65 } 66 #toolbar .top{ 67 float: left; 68 width: 100%; 69 height: 23px; 70 } 71 #toolbar .bottom{ 72 float: left; 73 width: 100%; 74 height: 30px; 75 } 76 77 /*-----TRAFFIC LIGHTS-----*/ 78 #toolbar #lights{ 79 float: left; 80 position:relative; 81 top:4px; 82 left:7px; 83 } 84 .light{ 85 float:left; 86 width:14px; 87 height:14px; 88 border-radius:14px; 89 -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5),0px 0px 3px #000 inset; 90 -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5),0px 0px 3px #000 inset; 91 box-shadow:0px 1px 0px rgba(255,255,255,0.5),0px 0px 3px #000 inset; 92 overflow: hidden; 93 } 94 #lights:hover .glyph{ 95 opacity: 1; 96 cursor:default; 97 98 } 99 .light .shine{ 100 width: 4px; 101 height:3px; 102 border-radius:10px; 103 /*background-image: -webkit-gradient(radial, center center, 0, center center, 3, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));*/ 104 background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 105 background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ 106 background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 107 background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */ 108 background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ 109 background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */ 110 111 } 112 .light .glow{ 113 width:14px; 114 height:8px; 115 background-image: -webkit-gradient(radial, center bottom, 0, center center, 5, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0))); 116 background: 0px 0px -moz-radial-gradient(bottom, cover, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0) 80%); /* FF3.6+ */ 117 118 } 119 /*--RED--*/ 120 .red{ 121 background: #f41b16; /* Old browsers */ 122 background: -moz-linear-gradient(top, #f41b16 0%, #fc7471 100%); /* FF3.6+ */ 123 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f41b16), color-stop(100%,#fc7471)); /* Chrome,Safari4+ */ 124 background: -webkit-linear-gradient(top, #f41b16 0%,#fc7471 100%); /* Chrome10+,Safari5.1+ */ 125 background: -o-linear-gradient(top, #f41b16 0%,#fc7471 100%); /* Opera 11.10+ */ 126 background: -ms-linear-gradient(top, #f41b16 0%,#fc7471 100%); /* IE10+ */ 127 background: linear-gradient(top, #f41b16 0%,#fc7471 100%); /* W3C */ 128 } 129 .red:active{ 130 131 background: #972f2e; /* Old browsers */ 132 background: -moz-linear-gradient(top, #972f2e 0%, #fc7471 100%); /* FF3.6+ */ 133 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#972f2e), color-stop(100%,#fc7471)); /* Chrome,Safari4+ */ 134 background: -webkit-linear-gradient(top, #972f2e 0%,#fc7471 100%); /* Chrome10+,Safari5.1+ */ 135 background: -o-linear-gradient(top, #972f2e 0%,#fc7471 100%); /* Opera 11.10+ */ 136 background: -ms-linear-gradient(top, #972f2e 0%,#fc7471 100%); /* IE10+ */ 137 background: linear-gradient(top, #972f2e 0%,#fc7471 100%); /* W3C */ 138 } 139 .red .shine{ 140 position: relative; 141 top: -23px; 142 left: 5px; 143 } 144 .red .glow{ 145 position: relative; 146 top: -22px; 147 } 148 .red .glyph{ 149 position: relative; 150 top: -6px; 151 left: 3px; 152 font-size: 14px; 153 font-weight: bold; 154 color: #9b3a36; 155 z-index: 50; 156 opacity: 0; 157 } 158 /*--YELLOW--*/ 159 .yellow{ 160 background: #f4a316; /* Old browsers */ 161 background: -moz-linear-gradient(left, #f4a316 0%, #fcc371 100%); /* FF3.6+ */ 162 background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f4a316), color-stop(100%,#fcc371)); /* Chrome,Safari4+ */ 163 background: -webkit-linear-gradient(left, #f4a316 0%,#fcc371 100%); /* Chrome10+,Safari5.1+ */ 164 background: -o-linear-gradient(left, #f4a316 0%,#fcc371 100%); /* Opera 11.10+ */ 165 background: -ms-linear-gradient(left, #f4a316 0%,#fcc371 100%); /* IE10+ */ 166 background: linear-gradient(left, #f4a316 0%,#fcc371 100%); /* W3C */ 167 margin:0px 7px; 168 } 169 .yellow:active{ 170 background: #ae4f1e; /* Old browsers */ 171 background: -moz-linear-gradient(top, #ae4f1e 0%, #fcc371 100%); /* FF3.6+ */ 172 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ae4f1e), color-stop(100%,#fcc371)); /* Chrome,Safari4+ */ 173 background: -webkit-linear-gradient(top, #ae4f1e 0%,#fcc371 100%); /* Chrome10+,Safari5.1+ */ 174 background: -o-linear-gradient(top, #ae4f1e 0%,#fcc371 100%); /* Opera 11.10+ */ 175 background: -ms-linear-gradient(top, #ae4f1e 0%,#fcc371 100%); /* IE10+ */ 176 background: linear-gradient(top, #ae4f1e 0%,#fcc371 100%); /* W3C */ 177 } 178 .yellow .shine{ 179 position: relative; 180 top: -23px; 181 left: 5px; 182 } 183 .yellow .glow{ 184 position: relative; 185 top: -22px; 186 } 187 188 189 .yellow .glyph{ 190 position: relative; 191 top: -7px; 192 left: 4px; 193 font-size: 24px; 194 color: #854322; 195 z-index: 50; 196 opacity: 0; 197 -webkit-transform: scaleY(1.5) scaleX(1.3); 198 } 199 200 /*--GREEN--*/ 201 .green{ 202 203 background: #4cae2e; /* Old browsers */ 204 background: -moz-linear-gradient(top, #4cae2e 0%, #dafc71 100%); /* FF3.6+ */ 205 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4cae2e), color-stop(100%,#dafc71)); /* Chrome,Safari4+ */ 206 background: -webkit-linear-gradient(top, #4cae2e 0%,#dafc71 100%); /* Chrome10+,Safari5.1+ */ 207 background: -o-linear-gradient(top, #4cae2e 0%,#dafc71 100%); /* Opera 11.10+ */ 208 background: -ms-linear-gradient(top, #4cae2e 0%,#dafc71 100%); /* IE10+ */ 209 background: linear-gradient(top, #4cae2e 0%,#dafc71 100%); /* W3C */ 210 211 } 212 .green:active{ 213 background: #48752b; /* Old browsers */ 214 background: -moz-linear-gradient(top, #48752b 0%, #dafc71 100%); /* FF3.6+ */ 215 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48752b), color-stop(100%,#dafc71)); /* Chrome,Safari4+ */ 216 background: -webkit-linear-gradient(top, #48752b 0%,#dafc71 100%); /* Chrome10+,Safari5.1+ */ 217 background: -o-linear-gradient(top, #48752b 0%,#dafc71 100%); /* Opera 11.10+ */ 218 background: -ms-linear-gradient(top, #48752b 0%,#dafc71 100%); /* IE10+ */ 219 background: linear-gradient(top, #48752b 0%,#dafc71 100%); /* W3C */ 220 221 } 222 .green .shine{ 223 position: relative; 224 top: -22px; 225 left: 5px; 226 } 227 .green .glow{ 228 position: relative; 229 top: -22px; 230 } 231 .green .glyph{ 232 position: relative; 233 top: -6px; 234 left: 3px; 235 font-size: 14px; 236 font-weight: bold; 237 color: #25571d; 238 z-index: 50; 239 opacity: 0; 240 } 241 242 /* Horrible to do this for firefox */ 243 @-moz-document url-prefix() { 244 245 .red .glyph { 246 position: relative; 247 top: -4px; 248 } 249 .yellow .glyph { 250 top: -4px; 251 left: 3px; 252 } 253 254 .green .glyph{ 255 position: relative; 256 top: -4px; 257 } 258 259 } 260 261 /*-----TITLE-----*/ 262 #title{ 263 float: left; 264 position: relative; 265 top:4px; 266 width:40%; 267 left: 30%; 268 font-family: "Myriad Pro", sans-serif; 269 font-size: 14px; 270 text-shadow: 0px 1px 0px rgba(255,255,255,0.5); 271 line-height: 14px; 272 } 273 .folder{ 274 float: left; 275 margin-right:5px; 276 } 277 .folder .tab{ 278 width:4px; 279 height:2px; 280 background:#a4c5da; 281 border:1px solid #728ea3; 282 border-bottom: none; 283 border-radius:2px 2px 0px 0px; 284 -webkit-box-shadow:0px -1px 0px #99b5c7 inset; 285 margin-left: 1px; 286 z-index: 5000; 287 margin-bottom: -1px; 288 } 289 .folder .body{ 290 width: 14px; 291 height: 10px; 292 border:1px solid #6e8ba1; 293 294 background: #b8cfe0; /* Old browsers */ 295 background: -moz-linear-gradient(top, #b8cfe0 0%, #86adc8 100%); /* FF3.6+ */ 296 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8cfe0), color-stop(100%,#86adc8)); /* Chrome,Safari4+ */ 297 background: -webkit-linear-gradient(top, #b8cfe0 0%,#86adc8 100%); /* Chrome10+,Safari5.1+ */ 298 background: -o-linear-gradient(top, #b8cfe0 0%,#86adc8 100%); /* Opera 11.10+ */ 299 background: -ms-linear-gradient(top, #b8cfe0 0%,#86adc8 100%); /* IE10+ */ 300 background: linear-gradient(top, #b8cfe0 0%,#86adc8 100%); /* W3C */ 301 302 z-index: -50; 303 304 -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.25) inset,0px 1px 0px rgba(0,0,0,0.2); 305 -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.25) inset,0px 1px 0px rgba(0,0,0,0.2); 306 } 307 308 309 #nav{ 310 margin: 1px 8px; 311 float: left; 312 } 313 #view{ 314 margin: 2px 0 0 110px; 315 display: inline-block; 316 } 317 318 .control_box{ 319 height:20px; 320 border-radius: 3px; 321 border: 1px solid #555; 322 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #fefefe),color-stop(0, #b8b8b8)); 323 box-shadow:0px 1px 0px rgba(255,255,255,0.25); 324 } 325 .control_box .control{ 326 height:20px; 327 border-right: 1px solid #2e2e2e; 328 float: left; 329 text-align: center; 330 width: 27px; 331 } 332 .control:last-child{ 333 border-right: 0px solid !important; 334 } 335 .control:active{ 336 background: #b0afb0; 337 -webkit-box-shadow:0px 0px 4px #000 inset; 338 } 339 .active{ 340 background: #707070 !important; 341 -webkit-box-shadow:0px 3px 4px rgba(0,0,0,0.6) inset !important; 342 } 343 344 345 #body { 346 font-family: Andale Mono, monospace; line-height: 1em; 347 font-size:13px; 348 float: left; 349 width: 100%; 350 min-height:130px; 351 background:#000; 352 padding:10px; 353 line-height:0.5em; 354 } 355 #body p, #body pre { 356 color: rgb(210, 223, 230) !important; 357 } 358 359 @keyframes blink 360 { 361 0% { background:rgba(99,222,0,100); } 362 100% { background:rgba(99,222,0,0); } 363 } 364 365 @-webkit-keyframes blink { 366 0% { background:rgba(99,222,0,100); } 367 100% { background:rgba(99,222,0,0); } 368 } 369 @-moz-keyframes blink { 370 0% { background:rgba(99,222,0,100); } 371 100% { background:rgba(99,222,0,0); } 372 } 373 .cursor { 374 background:#63de00; 375 display:inline-block; 376 width:11px; 377 height:19px; 378 margin-bottom:-3px; 379 } 380 #body:hover .cursor { 381 -webkit-animation-name: blink; 382 -webkit-animation-duration: 1.5s; 383 -webkit-animation-iteration-count: infinite; 384 -moz-animation-name: blink; 385 -moz-animation-duration: 1.5s; 386 -moz-animation-iteration-count: infinite; 387 } 388 389 #body p::-webkit-selection { 390 background:#0b209e; 391 } 392 #body p::selection { background:#0b209e; } 393 #body p::-moz-selection { background:#0b209e; } 394 395 #body p { 396 margin-top:5px; 397 margin-bottom:5px; 398 font-size:13px; 399 } 400 401 #content{ 402 float: left; 403 margin-top: 1px; 404 } 405 #foot{ 406 height: 23px; 407 width: 100%; 408 float: left; 409 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #cbcbcb),color-stop(0, #a7a7a7)); 410 border-top:1px solid #515151; 411 border-radius:0 0 5px 5px; 412 } 413 #foot .handle{ 414 width: 11px; 415 height: 11px; 416 float: right; 417 margin: 6px; 418 overflow: hidden; 419 } 420 .handle .grip{ 421 -webkit-transform: rotate(45deg) scaley(3); 422 margin: 2px 0 0 2px; 423 color: #646464; 424 text-shadow: 1px 1px 0 #c6c6c6; 425 font-size: 14px; 426 } 427 428 .icon{ 429 width: 86px; 430 height: 100px; 431 margin: 20px; 432 float: left; 433 font-family: "Myriad Pro", sans-serif; 434 text-align: center; 435 font-size: 12px; 436 } 437 .icon .frame{ 438 width: 82px; 439 height: 82px; 440 border-radius: 5px; 441 border: 2px solid transparent; 442 } 443 .icon .name{ 444 color: #000; 445 padding-top: 3px; 446 border-radius:15px; 447 width: 55px; 448 margin: 5px 0 0 15px; 449 } 450 .icon .folder{ 451 margin:15px 0 0 6px; 452 } 453 454 #body > pre { 455 background-color: black; 456 border: 0; 457 }