Changeset 594fbe8 in OpenWorkouts-current for ow/static/css/main.css
- Timestamp:
- Jan 29, 2019, 1:59:43 PM (5 years ago)
- Branches:
- current, feature/docs, master
- Children:
- 67fc2ed
- Parents:
- 22eb5de
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
ow/static/css/main.css
r22eb5de r594fbe8 408 408 max-width: 100%; 409 409 } 410 .header-content { 411 padding: 1em 1.5em; 412 } 413 .header-content a { 414 text-decoration: none; 415 } 416 .header-content .description { 417 margin: 0; 418 } 419 /* logo ----------------------------------------------------------------------*/ 420 .logo { 421 font-size: 24px; 422 font-size: 1.5rem; 423 line-height: 1em; 424 font-weight: 800; 425 text-transform: uppercase; 426 margin: 0; 427 display: inline-block; 428 } 429 .logo span { 430 transition: all 250ms ease-in-out; 431 } 432 .logo:hover span { 433 color: #EE4056; 434 } 435 .logo-open { 436 display: block; 437 color: #EE4056; 438 } 439 .logo-work, 440 .logo-outs { 441 color: #f8b5be; 442 } 443 /* menu navigation -----------------------------------------------------------*/ 444 .nav-site { 445 font-size: 13px; 446 font-size: 0.8125rem; 447 } 448 .nav-site ul { 449 list-style-type: none; 450 padding: 0; 451 margin: 0; 452 display: flex; 453 flex-direction: row; 454 justify-content: space-between; 455 } 456 .nav-site li { 457 border-left: 1px solid #e1e1e1; 458 flex-grow: 1; 459 text-align: center; 460 } 461 .nav-site a { 462 color: #959595; 463 padding: 1.25em; 464 display: block; 465 } 466 .nav-site a:hover { 467 color: #151515; 468 } 469 .nav-site .is-active a { 470 color: #151515; 471 } 472 /* Add workout button with submenu -------------------------------------------*/ 473 .add-workout { 474 position: relative; 475 /* submenu -------------------------------------------------------------- */ 476 } 477 .add-workout > a { 478 color: #EE4056; 479 } 480 .add-workout > a:before { 481 content: "+"; 482 font-weight: 800; 483 font-size: 32px; 484 font-size: 2rem; 485 line-height: 0; 486 position: relative; 487 top: 8px; 488 } 489 .add-workout > a span { 490 display: none; 491 } 492 .add-workout > a:hover { 493 background-color: #EE4056; 494 color: white; 495 } 496 .add-workout:hover:after { 497 content: ""; 498 position: absolute; 499 background-color: white; 500 bottom: -1px; 501 width: 100%; 502 height: 1px; 503 display: block; 504 z-index: 20; 505 } 506 .add-workout:hover ul { 507 display: inline-block; 508 } 509 .add-workout ul { 510 display: none; 511 flex-direction: column; 512 position: absolute; 513 background-color: rgba(255, 255, 255, 0.95); 514 right: -1px; 515 border: 1px solid #e1e1e1; 516 width: 153px; 517 } 518 .add-workout ul li { 519 border-left: transparent; 520 text-align: left; 521 } 522 .add-workout ul a:hover { 523 background-color: #fbfbfb; 524 } 525 /* description ---------------------------------------------------------------*/ 526 .description { 527 font-size: 14px; 528 font-size: 0.875rem; 529 font-weight: 300; 530 letter-spacing: 0.025em; 531 color: #959595; 532 } 533 /* ------------------------------ STATES ------------------------------------ */ 534 /* when user is login --------------------------------------------------------*/ 535 .is-login .header-content { 536 border-bottom: 1px solid #e1e1e1; 537 display: flex; 538 padding: 0em 1.5em; 539 justify-content: space-between; 540 align-items: center; 541 } 542 .is-login .description { 543 display: none; 544 } 545 .is-login .logo-open { 546 display: inline-block; 547 } 548 .workout-content { 549 padding: 2em 1em; 550 } 551 @media (min-width: 480px) { 552 .workout-content { 553 padding: 2em 6em; 554 } 555 } 556 @media (min-width: 800px) { 557 .workout-content { 558 display: flex; 559 justify-content: space-between; 560 } 561 } 562 /* list mode */ 563 .workout-list { 564 margin-right: 2em; 565 width: 100%; 566 /* provisional layout, replace this with grid layout system based on final content */ 567 } 568 .workout-list > h2 { 569 font-weight: 300; 570 margin: 0 0 1.5em; 571 } 572 /* Module resume on dashboard workouts */ 573 .workout-resume { 574 padding: 1.5em 0; 575 position: relative; 576 max-width: 700px; 577 } 578 @media (min-width: 800px) { 579 .workout-resume { 580 padding-left: 2em; 581 border-left: 1px solid #e1e1e1; 582 transition: all 250ms ease-in-out; 583 } 584 } 585 .workout-resume:hover { 586 border-color: #151515; 587 } 588 .workout-resume:hover .workout-title:before { 589 color: #151515; 590 } 591 .workout-resume ul { 592 padding: 0; 593 list-style-type: none; 594 font-size: 13px; 595 font-size: 0.8125rem; 596 } 597 .workout-resume ul a { 598 display: block; 599 text-decoration: none; 600 } 601 .bike:before { 602 display: block; 603 content: ""; 604 width: 30px; 605 height: 30px; 606 background-image: url('../media/img/bike.svg'); 607 background-size: 100%; 608 } 609 .workout-title { 610 font-size: 14px; 611 font-size: 0.875rem; 612 margin: 0 0 0em 0; 613 position: relative; 614 } 615 .workout-title:before { 616 transition: all 250ms ease-in-out; 617 content: "▶"; 618 position: absolute; 619 left: -3.25em; 620 top: 0.35em; 621 color: #e1e1e1; 622 font-size: 10px; 623 font-size: 0.625rem; 624 } 625 .workout-title a { 626 color: #151515; 627 text-decoration: none; 628 } 629 .workout-title a:hover { 630 color: #EE4056; 631 } 632 .workout-info { 633 display: flex; 634 align-items: center; 635 margin: 0.25em 0; 636 } 637 .workout-info li { 638 color: #959595; 639 } 640 .workout-info li:after { 641 content: "|"; 642 margin: 0 0.5em; 643 } 644 .workout-info li:last-child:after { 645 content: ""; 646 margin: 0; 647 } 648 .workout-map { 649 margin-top: 1em; 650 } 651 .workout-map img { 652 width: 100%; 653 } 654 .workout-intro { 655 font-size: 13px; 656 font-size: 0.8125rem; 657 color: #151515; 658 } 659 .workout-options { 660 display: inline-block; 661 border: 1px solid #e1e1e1; 662 margin-bottom: 0; 663 border-radius: 4px; 664 padding: 0; 665 } 666 .workout-options li { 667 display: inline-block; 668 border-right: 1px solid #e1e1e1; 669 } 670 .workout-options li:last-child { 671 border-right: none; 672 } 673 .workout-options a { 674 display: block; 675 color: #959595; 676 padding: 0.5em 0.75em; 677 text-decoration: none; 678 } 679 .workout-options a:hover { 680 color: #151515; 681 } 682 .owo-del a:hover { 683 color: red; 684 } 685 .workout-aside { 686 width: 100%; 687 } 688 @media (min-width: 800px) { 689 .workout-aside { 690 max-width: 300px; 691 padding-left: 1.5em; 692 border-left: 1px solid #e1e1e1; 693 } 694 } 695 .aside-profile { 696 margin-bottom: 1em; 697 } 698 .aside-profile img { 699 width: 80px; 700 height: 80px; 701 object-fit: cover; 702 border-radius: 50%; 703 } 704 .aside-profile h2 { 705 font-weight: 400; 706 font-size: 18px; 707 font-size: 1.125rem; 708 margin: 0 0 0.5em 0; 709 } 710 .aside-profile ul { 711 list-style-type: none; 712 margin: 0; 713 padding: 0; 714 font-size: 13px; 715 font-size: 0.8125rem; 716 color: #555555; 717 } 718 /* Week report */ 719 .svg-cotent svg { 720 width: 100%; 721 height: 100%; 722 } 723 .svg-cotent .label { 724 font-size: 13px; 725 font-size: 0.8125rem; 726 text-anchor: middle; 727 } 728 .svg-cotent .tick { 729 font-size: 13px; 730 font-size: 0.8125rem; 731 } 732 /* dashboard graphics*/ 733 .x-axis path, 734 .x-axis line { 735 fill: none; 736 stroke: none; 737 } 738 .bar { 739 fill: #f8b5be; 740 } 741 .bar:hover { 742 fill: #ee4056; 743 } 744 .current { 745 fill: #ee4056; 746 } 747 .week-stats { 748 border: 1px solid #e1e1e1; 749 background-color: rgba(225, 225, 225, 0.1); 750 padding: 0.75em; 751 border-radius: 4px; 752 margin-bottom: 2em; 753 } 754 .week-stats h3 { 755 margin: 0; 756 font-size: 14px; 757 font-size: 0.875rem; 758 } 759 .week-stats h3 + p { 760 margin: 0.25em 0 2em 0; 761 color: #959595; 762 font-size: 13px; 763 font-size: 0.8125rem; 764 } 765 .workout-activity-summary { 766 list-style-type: none; 767 padding: 0; 768 margin: 0; 769 background-color: rgba(21, 21, 21, 0.8); 770 margin-bottom: 0.75em; 771 } 772 .workout-activity-summary li { 773 color: #e1e1e1; 774 border-bottom: 1px solid #959595; 775 padding: 0.75em 1em; 776 display: flex; 777 justify-content: space-between; 778 } 779 .workout-activity-summary li:last-child { 780 margin-bottom: 0; 781 border: none; 782 } 783 .workout-activity-summary li span:first-child { 784 font-weight: bold; 785 } 786 .workout-activity-tree { 787 list-style-type: none; 788 padding: 0; 789 margin: 0; 790 transition: all 250ms ease-in-out; 791 font-size: 13px; 792 font-size: 0.8125rem; 793 } 794 .workout-activity-tree > li { 795 margin-bottom: 0.5em; 796 padding-bottom: 0.5em; 797 border-bottom: 1px solid #e1e1e1; 798 } 799 .workout-activity-tree a { 800 text-decoration: none; 801 display: block; 802 color: #EE4056; 803 } 804 .workout-activity-tree a:hover { 805 color: #151515; 806 } 807 .workout-activity-tree a.viewing-year { 808 color: #151515; 809 font-weight: 700; 810 margin-bottom: 0.5em; 811 font-size: 16px; 812 font-size: 1rem; 813 } 814 .workout-activity-tree a.viewing-month { 815 background-color: #e1e1e1; 816 color: #151515; 817 font-weight: 700; 818 } 819 .workout-activity-tree-year { 820 list-style-type: none; 821 padding: 0; 822 margin: 0; 823 } 824 .workout-activity-tree-year > li { 825 display: block; 826 margin-bottom: 0.5em; 827 } 828 .workout-activity-tree-year a { 829 display: flex; 830 justify-content: space-between; 831 padding: 0.5em; 832 background-color: #fbfbfb; 833 color: #555555; 834 } 835 .workout-activity-tree-year a:hover { 836 background-color: #e1e1e1; 837 } 410 838 .login-content { 411 839 background-image: url("../media/img/back-01.jpg"); … … 470 898 <a class="login-remember" href="#">Forgot your password?</a> 471 899 */ 472 .header-content { 473 padding: 1em 1.5em; 474 } 475 .header-content a { 476 text-decoration: none; 477 } 478 .header-content .description { 479 margin: 0; 480 } 481 /* logo ----------------------------------------------------------------------*/ 482 .logo { 483 font-size: 24px; 484 font-size: 1.5rem; 485 line-height: 1em; 486 font-weight: 800; 487 text-transform: uppercase; 488 margin: 0; 489 display: inline-block; 490 } 491 .logo span { 492 transition: all 250ms ease-in-out; 493 } 494 .logo:hover span { 495 color: #EE4056; 496 } 497 .logo-open { 498 display: block; 499 color: #EE4056; 500 } 501 .logo-work, 502 .logo-outs { 503 color: #f8b5be; 504 } 505 /* menu navigation -----------------------------------------------------------*/ 506 .nav-site { 507 font-size: 13px; 508 font-size: 0.8125rem; 509 } 510 .nav-site ul { 511 list-style-type: none; 512 padding: 0; 513 margin: 0; 514 display: flex; 515 flex-direction: row; 516 justify-content: space-between; 517 } 518 .nav-site li { 519 border-left: 1px solid #e1e1e1; 520 flex-grow: 1; 521 text-align: center; 522 } 523 .nav-site a { 524 color: #959595; 525 padding: 1.25em; 526 display: block; 527 } 528 .nav-site a:hover { 529 color: #151515; 530 } 531 .nav-site .is-active a { 532 color: #151515; 533 } 534 /* Add workout button with submenu -------------------------------------------*/ 535 .add-workout { 536 position: relative; 537 /* submenu -------------------------------------------------------------- */ 538 } 539 .add-workout > a { 540 color: #EE4056; 541 } 542 .add-workout > a:before { 543 content: "+"; 544 font-weight: 800; 545 font-size: 32px; 546 font-size: 2rem; 547 line-height: 0; 548 position: relative; 549 top: 8px; 550 } 551 .add-workout > a span { 552 display: none; 553 } 554 .add-workout > a:hover { 555 background-color: #EE4056; 556 color: white; 557 } 558 .add-workout:hover:after { 559 content: ""; 560 position: absolute; 561 background-color: white; 562 bottom: -1px; 563 width: 100%; 564 height: 1px; 565 display: block; 566 z-index: 20; 567 } 568 .add-workout:hover ul { 569 display: inline-block; 570 } 571 .add-workout ul { 572 display: none; 573 flex-direction: column; 574 position: absolute; 575 background-color: rgba(255, 255, 255, 0.95); 576 right: -1px; 577 border: 1px solid #e1e1e1; 578 width: 153px; 579 } 580 .add-workout ul li { 581 border-left: transparent; 582 text-align: left; 583 } 584 .add-workout ul a:hover { 585 background-color: #fbfbfb; 586 } 587 /* description ---------------------------------------------------------------*/ 588 .description { 589 font-size: 14px; 590 font-size: 0.875rem; 591 font-weight: 300; 592 letter-spacing: 0.025em; 593 color: #959595; 594 } 595 /* ------------------------------ STATES ------------------------------------ */ 596 /* when user is login --------------------------------------------------------*/ 597 .is-login .header-content { 598 border-bottom: 1px solid #e1e1e1; 599 display: flex; 600 padding: 0em 1.5em; 601 justify-content: space-between; 602 align-items: center; 603 } 604 .is-login .description { 605 display: none; 606 } 607 .is-login .logo-open { 608 display: inline-block; 609 } 610 .workout-content { 900 .user-profile { 611 901 padding: 2em 1em; 612 902 } 613 903 @media (min-width: 480px) { 614 . workout-content{904 .user-profile { 615 905 padding: 2em 6em; 616 906 } 617 907 } 618 @media (min-width: 800px) { 619 .workout-content { 620 display: flex; 621 justify-content: space-between; 622 } 623 } 624 /* list mode */ 625 .workout-list { 626 margin-right: 2em; 627 width: 100%; 628 /* provisional layout, replace this with grid layout system based on final content */ 629 } 630 .workout-list > h2 { 631 font-weight: 300; 632 margin: 0 0 1.5em; 633 } 634 /* Module resume on dashboard workouts */ 635 .workout-resume { 636 padding: 1.5em 0; 637 position: relative; 638 max-width: 700px; 639 } 640 @media (min-width: 800px) { 641 .workout-resume { 642 padding-left: 2em; 643 border-left: 1px solid #e1e1e1; 644 transition: all 250ms ease-in-out; 645 } 646 } 647 .workout-resume:hover { 648 border-color: #151515; 649 } 650 .workout-resume:hover .workout-title:before { 651 color: #151515; 652 } 653 .workout-resume ul { 654 padding: 0; 655 list-style-type: none; 656 font-size: 13px; 657 font-size: 0.8125rem; 658 } 659 .workout-resume ul a { 660 display: block; 661 text-decoration: none; 662 } 663 .bike:before { 664 display: block; 665 content: ""; 666 width: 30px; 667 height: 30px; 668 background-image: url('../media/img/bike.svg'); 669 background-size: 100%; 670 } 671 .workout-title { 672 font-size: 14px; 673 font-size: 0.875rem; 674 margin: 0 0 0em 0; 675 position: relative; 676 } 677 .workout-title:before { 678 transition: all 250ms ease-in-out; 679 content: "▶"; 680 position: absolute; 681 left: -3.25em; 682 top: 0.35em; 683 color: #e1e1e1; 684 font-size: 10px; 685 font-size: 0.625rem; 686 } 687 .workout-title a { 688 color: #151515; 689 text-decoration: none; 690 } 691 .workout-title a:hover { 692 color: #EE4056; 693 } 694 .workout-info { 695 display: flex; 696 align-items: center; 697 margin: 0.25em 0; 698 } 699 .workout-info li { 700 color: #959595; 701 } 702 .workout-info li:after { 703 content: "|"; 704 margin: 0 0.5em; 705 } 706 .workout-info li:last-child:after { 707 content: ""; 708 margin: 0; 709 } 710 .workout-map { 711 margin-top: 1em; 712 } 713 .workout-map img { 714 width: 100%; 715 } 716 .workout-intro { 717 font-size: 13px; 718 font-size: 0.8125rem; 719 color: #151515; 720 } 721 .workout-options { 722 display: inline-block; 723 border: 1px solid #e1e1e1; 724 margin-bottom: 0; 725 border-radius: 4px; 726 } 727 .workout-options li { 728 display: inline-block; 729 border-right: 1px solid #e1e1e1; 730 } 731 .workout-options li:last-child { 732 border-right: none; 733 } 734 .workout-options a { 735 color: #959595; 736 padding: 0.5em 0.75em; 737 } 738 .workout-options a:hover { 739 color: #151515; 740 } 741 .owo-del a:hover { 742 color: red; 743 } 744 .workout-aside { 745 width: 100%; 746 } 747 @media (min-width: 800px) { 748 .workout-aside { 749 max-width: 300px; 750 padding-left: 1.5em; 751 border-left: 1px solid #e1e1e1; 752 } 753 } 754 .aside-profile { 755 margin-bottom: 1em; 756 } 757 .aside-profile img { 758 width: 80px; 759 height: 80px; 908 .user-profile img { 909 width: 140px; 910 height: 140px; 760 911 object-fit: cover; 761 912 border-radius: 50%; 762 913 } 763 .aside-profile h2 { 764 font-weight: 400; 765 font-size: 18px; 766 font-size: 1.125rem; 767 margin: 0 0 0.5em 0; 768 } 769 .aside-profile ul { 770 list-style-type: none; 771 margin: 0; 772 padding: 0; 914 .user-profile .workout-options { 773 915 font-size: 13px; 774 916 font-size: 0.8125rem; 775 color: #555555;776 }777 /* Week report */778 .svg-cotent svg {779 width: 100%;780 height: 100%;781 }782 .svg-cotent .label {783 font-size: 13px;784 font-size: 0.8125rem;785 text-anchor: middle;786 }787 .svg-cotent .tick {788 font-size: 13px;789 font-size: 0.8125rem;790 }791 .week-stats {792 border: 1px solid #e1e1e1;793 background-color: rgba(225, 225, 225, 0.1);794 padding: 0.75em;795 border-radius: 4px;796 margin-bottom: 2em;797 }798 .week-stats h3 {799 margin: 0;800 font-size: 14px;801 font-size: 0.875rem;802 }803 .week-stats h3 + p {804 margin: 0.25em 0 2em 0;805 color: #959595;806 font-size: 13px;807 font-size: 0.8125rem;808 }809 .workout-activity-summary {810 list-style-type: none;811 padding: 0;812 margin: 0;813 background-color: rgba(21, 21, 21, 0.8);814 margin-bottom: 0.75em;815 }816 .workout-activity-summary li {817 color: #e1e1e1;818 border-bottom: 1px solid #959595;819 padding: 0.75em 1em;820 display: flex;821 justify-content: space-between;822 }823 .workout-activity-summary li:last-child {824 margin-bottom: 0;825 border: none;826 }827 .workout-activity-summary li span:first-child {828 font-weight: bold;829 }830 .workout-activity-tree {831 list-style-type: none;832 padding: 0;833 margin: 0;834 transition: all 250ms ease-in-out;835 font-size: 13px;836 font-size: 0.8125rem;837 }838 .workout-activity-tree > li {839 margin-bottom: 0.5em;840 padding-bottom: 0.5em;841 border-bottom: 1px solid #e1e1e1;842 }843 .workout-activity-tree a {844 text-decoration: none;845 display: block;846 color: #EE4056;847 }848 .workout-activity-tree a:hover {849 color: #151515;850 }851 .workout-activity-tree a.viewing-year {852 color: #151515;853 font-weight: 700;854 margin-bottom: 0.5em;855 font-size: 16px;856 font-size: 1rem;857 }858 .workout-activity-tree a.viewing-month {859 background-color: #e1e1e1;860 color: #151515;861 font-weight: 700;862 }863 .workout-activity-tree-year {864 list-style-type: none;865 padding: 0;866 margin: 0;867 }868 .workout-activity-tree-year > li {869 display: block;870 margin-bottom: 0.5em;871 }872 .workout-activity-tree-year a {873 display: flex;874 justify-content: space-between;875 padding: 0.5em;876 background-color: #fbfbfb;877 color: #555555;878 }879 .workout-activity-tree-year a:hover {880 background-color: #e1e1e1;881 917 } 882 918 /* Workout detail */ … … 884 920 height: 50vh; 885 921 } 886 /* dashboard graphics*/887 .x-axis path,888 .x-axis line {889 fill: none;890 stroke: none;891 }892 .bar {893 fill: #f8b5be;894 }895 .bar:hover {896 fill: #ee4056;897 }898 .current {899 fill: #ee4056;900 }
Note: See TracChangeset
for help on using the changeset viewer.