theme.css (10496B)
1 /* -------------------------------------------- 2 Antergos Greeter Default Theme Stylesheet 3 4 Author: Dustin Falgout 5 URL: http://antergos.com/ 6 Copyright: (c)2013 by Antergos Developers 7 License: GPL 8 ----------------------------------------------- */ 9 10 /* Global Styles */ 11 12 13 @font-face{ 14 font-family: Lato; 15 src: url('../../font-awesome/fonts/Lato-Regular.ttf'); 16 } 17 18 @font-face{ 19 font-family: LatoLight; 20 src: url('../../font-awesome/fonts/Lato-Light.ttf'); 21 } 22 23 @font-face{ 24 font-family: 'saxmono'; 25 src: url('../../saxmono-webfont.woff') format('woff'); 26 } 27 28 .hidden { 29 opacity: 0; 30 } 31 32 ::-webkit-scrollbar { 33 width: 12px; 34 } 35 ::-webkit-scrollbar-track { 36 background-color: #eaeaea; 37 border-left: 1px solid #ccc; 38 } 39 ::-webkit-scrollbar-thumb { 40 background-color: #5d5d5d; 41 } 42 ::-webkit-scrollbar-thumb:hover { 43 background-color: #b3b3b3; 44 } 45 46 .user-wrap2::-webkit-scrollbar { 47 width: 4px; 48 } 49 .user-wrap2::-webkit-scrollbar-track { 50 background-color: #eaeaea; 51 border-left: 1px solid #ccc; 52 } 53 .user-wrap2::-webkit-scrollbar-thumb { 54 background-color: #5d5d5d; 55 } 56 .user-wrap2::-webkit-scrollbar-thumb:hover { 57 background-color: #b3b3b3; 58 } 59 .close_wallpapers{ 60 padding: 2px 10px !important; 61 } 62 63 html, 64 body { 65 height: 100%; 66 width: 100%; 67 background-color: #212021; 68 font-family: "saxmono"; 69 } 70 71 i { 72 font-size: 17px; 73 } 74 75 h3, .panel-heading { 76 font-family: "Lato", "Open Sans", sans-serif; 77 font-size: 16px; 78 text-align: center; 79 font-weight: 400; 80 } 81 82 a { 83 text-decoration: none !important; 84 } 85 86 /* Background Switcher */ 87 88 .bg-switch { 89 position: relative; 90 top: 0; 91 right: 0; 92 bottom: 0; 93 left: 0; 94 width: 250px; 95 margin: 40px auto auto; 96 padding: 0px 53px; 97 color: #f5f5f5; 98 } 99 100 .bg-switch .bgs .bg { 101 text-align: center; 102 text-decoration: none; 103 } 104 105 .bg-switch .bgs .bg.active img { 106 border-color: #3d73c5; 107 } 108 109 .bg-switch .bgs .bg img { 110 width: 145px; 111 height: 95px; 112 border: 2px solid #ffffff; 113 margin-bottom: 10px; 114 cursor: pointer; 115 } 116 117 .hovered { 118 text-decoration: none; 119 background-color: #ecf0f1; 120 } 121 122 #user-list2 { 123 width: 100%; 124 } 125 126 #user-list2 span { 127 font-size: 19px; 128 } 129 130 #user-list2 img { 131 width: 40px; 132 margin-right: 10px; 133 } 134 135 #bg-switch-wrapper { 136 margin-right: -250px; 137 right: 0; 138 width: 250px; 139 background: rgba(0, 0, 0, 0.5); 140 position: fixed; 141 height: 100%; 142 overflow-y: auto; 143 z-index: 1000; 144 transition: all 0.4s ease 0s; 145 } 146 147 .bg-switch-container { 148 position: absolute; 149 top: 0; 150 width: 250px; 151 list-style: none; 152 margin: 0; 153 padding: 0; 154 } 155 156 #bg-switch-toggle { 157 top: 0; 158 right: -2px; 159 position: fixed; 160 z-index: 1; 161 } 162 163 #bg-switch-wrapper.active { 164 right: 250px; 165 width: 250px; 166 transition: all 0.4s ease 0s; 167 overflow-x: hidden; 168 } 169 170 .toggle { 171 margin: 5px 20px 0 0; 172 } 173 174 /* Full Page Image Header Area */ 175 176 .header { 177 display: table; 178 height: 100%; 179 width: 100%; 180 position: relative; 181 background-image: url(''); 182 background-size: cover !important; 183 background-repeat: no-repeat !important; 184 background-position: center !important; 185 186 } 187 188 #user-target2 i { 189 right: -21px; 190 color: #2c3e50; 191 font-size: 14px; 192 } 193 #trigger i { 194 color: #2c3e50; 195 font-size: 14px; 196 position: relative; 197 top: 9.5px; 198 right: 5px; 199 } 200 201 /* Clock Widget */ 202 203 .time { 204 font-family: "LatoLight", "Open Sans", sans-serif; 205 font-size: 96px; 206 line-height: 1em; 207 text-decoration: none; 208 color: #3d73c5; 209 background-color: rgb(252, 247, 247); 210 transition: 1s ease-out; 211 position: relative; 212 top: 10.5px; 213 214 } 215 216 #panelfix { 217 height: 170px !important; 218 overflow: visible; 219 } 220 221 .time-panel a { 222 display: block; 223 -webkit-animation: clkwiggle 10s infinite; 224 } 225 226 .time:hover { 227 cursor: pointer; 228 color: #77ADFF; 229 /* text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); */ 230 } 231 232 .time-panel { 233 background-color: rgb(252, 247, 247) !important; 234 border-color: transparent !important; 235 } 236 237 .time-panel:target { 238 -webkit-animation: flip 0.5s ease-out; 239 } 240 241 .time-panel:target:after { 242 visibility: hidden; 243 } 244 245 /* Login Dialog */ 246 247 248 .welcome { 249 font-weight:500; 250 font-size: 17px; 251 position: relative; 252 right: 9px; 253 } 254 255 256 .login-wrapper { 257 list-style-type: none; 258 display: table-row; 259 } 260 261 .login-cell { 262 display: table-cell; 263 vertical-align: middle; 264 } 265 266 .login-box { 267 min-height: 250px; 268 } 269 .panel-shadow { 270 box-shadow: none !important; 271 border: none !important; 272 } 273 274 .panel-default { 275 background-color: rgb(252, 247, 247); 276 } 277 278 .badge { 279 color: #2c3e50; 280 } 281 .badge, .badge i { 282 font-size: 10px !important; 283 display: none; 284 } 285 .list-group-item.hovered .badge, 286 .list-group-item.hovered .badge i { 287 display: block; 288 289 } 290 .panel-heading { 291 padding: 10px 20px !important; 292 } 293 .panel-footer { 294 height: 50px; 295 } 296 297 #sessions, #actionsArea { 298 transition: all ease 3s; 299 } 300 .panel-footer .btn { 301 padding-top: 6.5px; 302 padding-bottom: 6.5px; 303 padding-left: 12px; 304 padding-right: 12px; 305 } 306 307 .panel-body { 308 background-color: rgb(252, 247, 247); 309 padding: 10px; 310 } 311 312 .panel-footer { 313 padding: 5px 15px; 314 315 } 316 317 .panel-flow { 318 overflow:visible !important; 319 } 320 321 .password ul { 322 text-align: left; 323 } 324 325 div.password, div.status, div.timer { 326 text-align: center; 327 position: relative; 328 display: none; 329 width: 47%; 330 margin: 0 auto; 331 } 332 333 .password { 334 font-size: 14px !important; 335 padding-top: 5px !important; 336 padding-bottom: 5px !important; 337 } 338 .form-control { 339 height: 36px; 340 } 341 #passwordArea .btn { 342 padding-top: 6.5px; 343 padding-bottom: 6.5px; 344 padding-left: 12px; 345 padding-right: 12px; 346 } 347 #logArea { 348 position: absolute; 349 top: 25%; 350 left: 5%; 351 width: 25%; 352 height: 50%; 353 display: none; 354 overflow: auto; 355 color: #fff; 356 background: rgba(0,0,0,0.6); 357 border-radius: 10px; 358 font-size: 15px; 359 padding: 20px; 360 } 361 362 /* Animation */ 363 364 @-webkit-keyframes bounce { 365 0% { 366 -webkit-transform: translateY(0); 367 } 368 100% { 369 -webkit-transform: translateY(-20px); 370 } 371 } 372 373 @-webkit-keyframes clkwiggle { 374 0% {-webkit-transform: rotate(0deg);} 375 1% {-webkit-transform: rotate(-2deg);} 376 1.5% {-webkit-transform: rotate(2deg);} 377 2% {-webkit-transform: rotate(0deg);} 378 2.5% {-webkit-transform: rotate(-2deg);} 379 3.5% {-webkit-transform: rotate(2deg);} 380 4% {-webkit-transform: rotate(0deg);} 381 100% {-webkit-transform: rotate(0deg);} 382 } 383 384 385 /* User Selection */ 386 387 .user-selection { 388 389 width: 99%; 390 height: 125px; 391 text-align: center; 392 } 393 394 .user-selection ul { 395 position: relative; 396 display: inline-block; 397 padding: 0 5px; 398 margin: 15px 0 0; 399 400 } 401 402 /* User Selection Images */ 403 404 .user-selection li { 405 display: inline-block; 406 position: relative; 407 margin: 0 7px 15px; 408 vertical-align: baseline; 409 } 410 411 .user-selection a { 412 display: inline-block; 413 cursor: pointer; 414 outline: none; 415 } 416 417 .user-selection a i, .time-panel a i { 418 font-size: 15px; 419 color: #5e5e5e; 420 } 421 422 .user-toggle { 423 position: fixed; 424 } 425 426 427 /* Applies the bounce animation to the targeted user image. */ 428 .user-selection li:target a { 429 -webkit-animation: bounce .3s 6 alternate ease-out; 430 } 431 432 /* Generates the status indicator. */ 433 .user-selection li:after { 434 content: " "; 435 position: absolute; 436 bottom: -5px; 437 left: 50%; 438 width: 5px; 439 height: 5px; 440 opacity: 0; 441 visibility: hidden; 442 background-color: rgba(8, 51, 120, 0.80); 443 margin-left: -2px; 444 border-radius: 5px; 445 box-shadow: inset 0 1px 3px rgba(65, 140, 255, .4), 0 0 4px rgba(65, 140, 255, .5), 0 -1px 7px rgb(65, 140, 255); 446 transition: opacity .5s; 447 } 448 449 /* Displays the status indicator. */ 450 .user-selection li:target:after { 451 visibility: visible; 452 opacity: 1; 453 } 454 455 /* This is just a wrapper in order to center the actual label horizontally. You 456 may need to adjust the width negative margin if you have really long labels. */ 457 .user-selection em { 458 position: absolute; 459 top: -34px; 460 left: 50%; 461 display: none; 462 width: 150px; 463 margin-left: -75px; 464 text-align: center; 465 466 } 467 468 /* Generates the little arrow at the bottom of the label. */ 469 .user-selection em:after { 470 content: " "; 471 position: absolute; 472 bottom: -6px; 473 left: 50%; 474 margin-left: -6px; 475 width: 0; 476 height: 0; 477 border-left: 6px solid transparent; 478 border-right: 6px solid transparent; 479 border-top: 6px solid rgba(0, 0, 0, .6); 480 border-bottom: none; 481 z-index: 1000; 482 } 483 484 /* This is the actual label. */ 485 .user-selection em span { 486 display: inline-block; 487 padding: 5px 12px; 488 font-size: 14px; 489 font-style: normal; 490 color: #FFF; 491 background: #000; 492 background: rgba(0, 0, 0, .6); 493 text-shadow: 1px 1px 1px rgba(0, 0, 0, .9); 494 border-radius: 12px; 495 z-index: 1000; 496 } 497 498 .user-selection li:hover em { 499 display: block; 500 z-index: 1000; 501 } 502 503 /* Image Hover Effect */ 504 /* Sets the face images to a smaller width so they can be enlarged and applies 505 transitions for a smooth animation. Make sure to adjust the width so it 506 matches your images. */ 507 .user-selection img { 508 width: 72px; 509 height: auto; 510 transition: width .2s, height .2s; 511 } 512 513 .user-selection li:hover img { 514 width: 96px; 515 } 516 517 .user-selection li:active img { 518 opacity: .9; 519 } 520 521 .random { 522 background: rgba(111, 111, 111, 0.65); 523 text-align: center; 524 display: table; 525 color: rgba(255, 255, 255, 0.72); 526 width: 145px; 527 height: 95px; 528 border: 2px solid #ffffff; 529 margin-bottom: 10px; 530 cursor: pointer; 531 padding-top: 35px; 532 } 533 534 .random span { 535 font-size: 18px; 536 } 537 .random:hover { 538 color: white; 539 background: rgba(111, 111, 111, 0.85); 540 } 541 .random.active { 542 border: 2px solid #3d73c5; 543 } 544 545 .user-wrap2 { 546 max-width: 50%; 547 margin: 0 auto; 548 display: -webkit-box; 549 max-height: 124px; 550 overflow: auto; 551 } 552 553 #list-group { 554 padding: 0px; 555 overflow: visible; 556 } 557 558 559 @media (max-width: 1900px) { 560 561 .bg-switch { 562 position: relative; 563 width: 250px; 564 margin: 40px auto auto; 565 padding: 0px 74px; 566 } 567 568 .bg-switch .bgs .bg { 569 text-align: center; 570 text-decoration: none; 571 } 572 573 .bg-switch .bgs .bg img { 574 width: 102px; 575 height: 67px; 576 margin-bottom: 5px; 577 } 578 579 h3 { 580 margin-top: 10px; 581 margin-bottom: 8px; 582 } 583 584 #logArea { 585 top: 24%; 586 left: 2%; 587 } 588 589 .random { 590 width: 102px; 591 height: 67px; 592 margin-bottom: 5px; 593 padding-top: 18px; 594 } 595 }