Changeset 816820d in OpenWorkouts-current


Ignore:
Timestamp:
Jan 16, 2019, 1:35:50 PM (5 years ago)
Author:
Segundo Fdez <segun.2@…>
Branches:
current, feature/docs, master
Children:
55e98e4
Parents:
02048a6
Message:

Start to organize css structure. Added fake img for login

Location:
ow
Files:
6 added
3 edited
3 moved

Legend:

Unmodified
Added
Removed

  • ow/static/css/main.css

    r02048a6 r816820d  
    1 img,legend {
    2     border:0
    3 }
     1/* google fonts */
     2@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic,800";
    43
    5 legend,td,th {
    6     padding:0
    7 }
     4/* normalize */
     5@import "vendors/normalize.css";
    86
    9 .add-workout,.button,sub,sup {
    10     position:relative
    11 }
     7/* Variables */
     8@import "variables.css";
    129
    13 .button,.header-content a,.workout-resume ul a,.workout-title a {
    14     text-decoration:none
    15 }
     10/* Common styles */
     11@import "common.css";
    1612
    17 @font-face {
    18     font-family:'Open Sans';
    19     font-style:normal;
    20     font-weight:300;
    21     src:local('Open Sans Light'),local('OpenSans-Light'),url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
    22 }
    23 
    24 @font-face {
    25     font-family:'Open Sans';
    26     font-style:normal;
    27     font-weight:400;
    28     src:local('Open Sans'),local('OpenSans'),url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')
    29 }
    30 
    31 @font-face {
    32     font-family:'Open Sans';
    33     font-style:normal;
    34     font-weight:700;
    35     src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
    36 }
    37 
    38 @font-face {
    39     font-family:'Open Sans';
    40     font-style:normal;
    41     font-weight:800;
    42     src:local('Open Sans Extrabold'),local('OpenSans-Extrabold'),url(http://fonts.gstatic.com/s/opensans/v13/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
    43 }
    44 
    45 @font-face {
    46     font-family:'Open Sans';
    47     font-style:italic;
    48     font-weight:300;
    49     src:local('Open Sans Light Italic'),local('OpenSansLight-Italic'),url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxrfB31yxOzP-czbf6AAKCVo.ttf) format('truetype')
    50 }
    51 
    52 @font-face {
    53     font-family:'Open Sans';
    54     font-style:italic;
    55     font-weight:400;
    56     src:local('Open Sans Italic'),local('OpenSans-Italic'),url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf) format('truetype')
    57 }
    58 
    59 @font-face {
    60     font-family:'Open Sans';
    61     font-style:italic;
    62     font-weight:700;
    63     src:local('Open Sans Bold Italic'),local('OpenSans-BoldItalic'),url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf) format('truetype')
    64 }
    65 
    66 html {
    67     font-family:sans-serif;
    68     -ms-text-size-adjust:100%;
    69     -webkit-text-size-adjust:100%;
    70     box-sizing:border-box
    71 }
    72 
    73 article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    74     display:block
    75 }
    76 
    77 audio,canvas,progress,video {
    78     display:inline-block;
    79     vertical-align:baseline
    80 }
    81 
    82 audio:not([controls]) {
    83     display:none;
    84     height:0
    85 }
    86 
    87 .hide,[hidden],template {
    88     display:none
    89 }
    90 
    91 a {
    92     background-color:transparent
    93 }
    94 
    95 a:active,a:hover {
    96     outline:0
    97 }
    98 
    99 abbr[title] {
    100     border-bottom:1px dotted
    101 }
    102 
    103 b,optgroup,strong {
    104     font-weight:700
    105 }
    106 
    107 dfn {
    108     font-style:italic
    109 }
    110 
    111 h1 {
    112     font-size:2em;
    113     margin:.67em 0
    114 }
    115 
    116 mark {
    117     background:#ff0;
    118     color:#000
    119 }
    120 
    121 small {
    122     font-size:80%
    123 }
    124 
    125 sub,sup {
    126     font-size:75%;
    127     line-height:0;
    128     vertical-align:baseline
    129 }
    130 
    131 sup {
    132     top:-.5em
    133 }
    134 
    135 sub {
    136     bottom:-.25em
    137 }
    138 
    139 svg:not(:root) {
    140     overflow:hidden
    141 }
    142 
    143 figure {
    144     margin:1em 40px
    145 }
    146 
    147 hr {
    148     box-sizing:content-box;
    149     height:0
    150 }
    151 
    152 pre,textarea {
    153     overflow:auto
    154 }
    155 
    156 code,kbd,pre,samp {
    157     font-family:monospace,monospace;
    158     font-size:1em
    159 }
    160 
    161 button,input,optgroup,select,textarea {
    162     color:inherit;
    163     font:inherit;
    164     margin:0
    165 }
    166 
    167 button {
    168     overflow:visible
    169 }
    170 
    171 button,select {
    172     text-transform:none
    173 }
    174 
    175 button,html input[type=button],input[type=reset],input[type=submit] {
    176     -webkit-appearance:button;
    177     cursor:pointer
    178 }
    179 
    180 button[disabled],html input[disabled] {
    181     cursor:default
    182 }
    183 
    184 button::-moz-focus-inner,input::-moz-focus-inner {
    185     border:0;
    186     padding:0
    187 }
    188 
    189 input {
    190     line-height:normal
    191 }
    192 
    193 input[type=checkbox],input[type=radio] {
    194     box-sizing:border-box;
    195     padding:0
    196 }
    197 
    198 input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    199     height:auto
    200 }
    201 
    202 input[type=search] {
    203     -webkit-appearance:textfield;
    204     box-sizing:content-box
    205 }
    206 
    207 input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    208     -webkit-appearance:none
    209 }
    210 
    211 fieldset {
    212     border:1px solid silver;
    213     margin:0 2px;
    214     padding:.35em .625em .75em
    215 }
    216 
    217 table {
    218     border-collapse:collapse;
    219     border-spacing:0
    220 }
    221 
    222 body {
    223     margin:0;
    224     font-family:'Open Sans',sans-serif
    225 }
    226 
    227 *,:after,:before {
    228     box-sizing:inherit
    229 }
    230 
    231 .button {
    232     box-sizing:border-box;
    233     display:inline-block;
    234     text-align:center;
    235     vertical-align:middle;
    236     cursor:pointer;
    237     border:1px solid transparent;
    238     font-style:normal;
    239     white-space:nowrap;
    240     text-overflow:ellipsis;
    241     padding:.3em 1em;
    242     margin:0;
    243     overflow:hidden;
    244     background:#e1e1e1;
    245     color:#151515;
    246     font-size:1em;
    247     line-height:1.25;
    248     max-width:100%
    249 }
    250 
    251 .login-content {
    252     background-image:url(../media/img/back-01.jpg);
    253     background-size:cover;
    254     display:-webkit-flex;
    255     display:-ms-flexbox;
    256     display:flex;
    257     -webkit-justify-content:center;
    258     -ms-flex-pack:center;
    259     justify-content:center;
    260     -webkit-align-items:center;
    261     -ms-flex-align:center;
    262     align-items:center;
    263     min-height:300px;
    264     padding:1em 0;
    265     transition:all 250ms ease-in-out
    266 }
    267 
    268 @media (min-width:1024px) {
    269     .login-content {
    270         min-height:550px
    271     }
    272 
    273 
    274 }
    275 
    276 @media (min-width:1440px) {
    277     .login-content {
    278         min-height:650px
    279     }
    280 
    281 
    282 }
    283 
    284 .login-content .message {
    285     padding:.5em;
    286     margin:0;
    287     text-align:center;
    288     font-size:13px;
    289     font-size:.8125rem
    290 }
    291 
    292 .login-content .message.message-error {
    293     color:#fff;
    294     background-color:red
    295 }
    296 
    297 .login-content form {
    298     width:100%;
    299     max-width:350px
    300 }
    301 
    302 .login-content legend {
    303     display:none
    304 }
    305 
    306 .login-content fieldset {
    307     border:none;
    308     background-color:rgba(21,21,21,.6);
    309     border-radius:6px;
    310     padding:2em
    311 }
    312 
    313 .login-content fieldset>div {
    314     margin-bottom:1.5em
    315 }
    316 
    317 .login-content input {
    318     width:100%;
    319     padding:.5em .75em;
    320     border:1px solid transparent;
    321     border-radius:2px
    322 }
    323 
    324 .login-content input:focus {
    325     border-color:#EE4056
    326 }
    327 
    328 .login-content label {
    329     display:block;
    330     font-size:14px;
    331     font-size:.875rem;
    332     color:#959595;
    333     margin-bottom:.25em
    334 }
    335 
    336 .login-content .button {
    337     transition:all .5s ease-in-out;
    338     background-color:#EE4056;
    339     color:#fff;
    340     margin-bottom:1em;
    341     text-transform:uppercase
    342 }
    343 
    344 .login-content .button:hover {
    345     background-color:#e6152f
    346 }
    347 
    348 .signup-content {
    349     background-image:url(../media/img/signup-01.jpg);
    350     background-size:cover;
    351     display:-webkit-flex;
    352     display:-ms-flexbox;
    353     display:flex;
    354     -webkit-justify-content:center;
    355     -ms-flex-pack:center;
    356     justify-content:center;
    357     -webkit-align-items:center;
    358     -ms-flex-align:center;
    359     align-items:center;
    360     min-height:300px;
    361     padding:1em 0;
    362     transition:all 250ms ease-in-out
    363 }
    364 
    365 @media (min-width:1024px) {
    366     .signup-content {
    367         min-height:550px
    368     }
    369 
    370 
    371 }
    372 
    373 @media (min-width:1440px) {
    374     .signup-content {
    375         min-height:650px
    376     }
    377 
    378 
    379 }
    380 
    381 .signup-content form {
    382     width:100%;
    383     max-width:40%
    384 }
    385 
    386 .signup-content ul.error li {
    387     color:#fff;
    388     background-color:red
    389 }
    390 
    391 .signup-content legend {
    392     display:none
    393 }
    394 
    395 .signup-content fieldset {
    396     border:none;
    397     background-color:rgba(21,21,21,.6);
    398     border-radius:6px;
    399     padding:2em
    400 }
    401 
    402 .signup-content fieldset>div {
    403     margin-bottom:1.5em
    404 }
    405 
    406 .signup-content input {
    407     width:100%;
    408     padding:.5em .75em;
    409     border:1px solid transparent;
    410     border-radius:2px
    411 }
    412 
    413 .signup-content input:focus {
    414     border-color:#EE4056
    415 }
    416 
    417 .signup-content label {
    418     display:block;
    419     font-size:14px;
    420     font-size:.875rem;
    421     color:#959595;
    422     margin-bottom:.25em
    423 }
    424 
    425 .signup-content .button {
    426     transition:all .5s ease-in-out;
    427     background-color:#EE4056;
    428     color:#fff;
    429     margin-bottom:1em;
    430     text-transform:uppercase
    431 }
    432 
    433 .logo span,.workout-title:before {
    434     transition:all 250ms ease-in-out
    435 }
    436 
    437 .logo-open,.logo:hover span {
    438     color:#EE4056
    439 }
    440 
    441 .header-content .description,.logo {
    442     margin:0
    443 }
    444 
    445 .signup-content .button:hover {
    446     background-color:#e6152f
    447 }
    448 
    449 .header-content {
    450     padding:1em 1.5em
    451 }
    452 
    453 .logo {
    454     font-size:24px;
    455     font-size:1.5rem;
    456     line-height:1em;
    457     font-weight:800;
    458     text-transform:uppercase;
    459     display:inline-block
    460 }
    461 
    462 .logo-open {
    463     display:block
    464 }
    465 
    466 .logo-outs,.logo-work {
    467     color:#f8b5be
    468 }
    469 
    470 .nav-site {
    471     font-size:13px;
    472     font-size:.8125rem
    473 }
    474 
    475 .nav-site ul {
    476     list-style-type:none;
    477     padding:0;
    478     margin:0;
    479     display:-webkit-flex;
    480     display:-ms-flexbox;
    481     display:flex;
    482     -webkit-flex-direction:row;
    483     -ms-flex-direction:row;
    484     flex-direction:row;
    485     -webkit-justify-content:space-between;
    486     -ms-flex-pack:justify;
    487     justify-content:space-between
    488 }
    489 
    490 .nav-site li {
    491     border-left:1px solid #e1e1e1;
    492     -webkit-flex-grow:1;
    493     -ms-flex-positive:1;
    494     flex-grow:1;
    495     text-align:center
    496 }
    497 
    498 .nav-site a {
    499     color:#959595;
    500     padding:1.25em;
    501     display:block
    502 }
    503 
    504 .nav-site .is-active a,.nav-site a:hover {
    505     color:#151515
    506 }
    507 
    508 .add-workout>a {
    509     color:#EE4056
    510 }
    511 
    512 .add-workout>a:before {
    513     content:"+";
    514     font-weight:800;
    515     font-size:32px;
    516     font-size:2rem;
    517     line-height:0;
    518     position:relative;
    519     top:8px
    520 }
    521 
    522 .add-workout:hover:after,.bike:before {
    523     content:""
    524 }
    525 
    526 .add-workout>a span {
    527     display:none
    528 }
    529 
    530 .add-workout>a:hover {
    531     background-color:#EE4056;
    532     color:#fff
    533 }
    534 
    535 .add-workout:hover:after {
    536     position:absolute;
    537     background-color:#fff;
    538     bottom:-1px;
    539     width:100%;
    540     height:1px;
    541     display:block;
    542     z-index:20
    543 }
    544 
    545 .add-workout:hover ul {
    546     display:inline-block
    547 }
    548 
    549 .add-workout ul {
    550     display:none;
    551     -webkit-flex-direction:column;
    552     -ms-flex-direction:column;
    553     flex-direction:column;
    554     position:absolute;
    555     background-color:rgba(255,255,255,.95);
    556     right:-1px;
    557     border:1px solid #e1e1e1;
    558     width:153px;
    559     z-index:10;
    560 }
    561 
    562 .add-workout ul li {
    563     border-left:transparent;
    564     text-align:left
    565 }
    566 
    567 .add-workout ul a:hover {
    568     background-color:#fbfbfb
    569 }
    570 
    571 .description {
    572     font-size:14px;
    573     font-size:.875rem;
    574     font-weight:300;
    575     letter-spacing:.025em;
    576     color:#959595
    577 }
    578 
    579 .is-login .header-content {
    580     border-bottom:1px solid #e1e1e1;
    581     display:-webkit-flex;
    582     display:-ms-flexbox;
    583     display:flex;
    584     padding:0 1.5em;
    585     -webkit-justify-content:space-between;
    586     -ms-flex-pack:justify;
    587     justify-content:space-between;
    588     -webkit-align-items:center;
    589     -ms-flex-align:center;
    590     align-items:center
    591 }
    592 
    593 .is-login .description {
    594     display:none
    595 }
    596 
    597 .is-login .logo-open {
    598     display:inline-block
    599 }
    600 
    601 .workout-content {
    602     padding:2em 1em
    603 }
    604 
    605 @media (min-width:480px) {
    606     .workout-content {
    607         padding:2em 6em
    608     }
    609 
    610 
    611 }
    612 
    613 .workout-list {
    614     margin-right:2em
    615 }
    616 
    617 .workout-list>h2 {
    618     font-weight:300;
    619     margin:0 0 1.5em
    620 }
    621 
    622 .workout-resume {
    623     max-width:540px;
    624     padding:1.5em 0;
    625     position:relative
    626 }
    627 
    628 @media (min-width:800px) {
    629     .workout-content {
    630         display:-webkit-flex;
    631         display:-ms-flexbox;
    632         display:flex;
    633         -webkit-justify-content:space-between;
    634         -ms-flex-pack:justify;
    635         justify-content:space-between
    636     }
    637 
    638     .workout-resume {
    639         padding-left:2em;
    640         border-left:1px solid #e1e1e1;
    641         transition:all 250ms ease-in-out
    642     }
    643 
    644 
    645 }
    646 
    647 .workout-resume:hover {
    648     border-color:#151515
    649 }
    650 
    651 .workout-resume:hover .workout-title:before {
    652     color:#151515
    653 }
    654 
    655 .workout-resume ul {
    656     padding:0;
    657     list-style-type:none;
    658     font-size:13px;
    659     font-size:.8125rem
    660 }
    661 
    662 .workout-resume ul a {
    663     display:block
    664 }
    665 
    666 .bike:before {
    667     display:block;
    668     width:30px;
    669     height:30px;
    670     background-image:url(../media/img/bike.svg);
    671     background-size:100%
    672 }
    673 
    674 .workout-title {
    675     font-size:14px;
    676     font-size:.875rem;
    677     margin:0;
    678     position:relative
    679 }
    680 
    681 .workout-title:before {
    682     content:"▶";
    683     position:absolute;
    684     left:-3.25em;
    685     top:.35em;
    686     color:#e1e1e1;
    687     font-size:10px;
    688     font-size:.625rem
    689 }
    690 
    691 .workout-title a {
    692     color:#151515
    693 }
    694 
    695 .workout-title a:hover {
    696     color:#EE4056
    697 }
    698 
    699 .workout-info {
    700     display:-webkit-flex;
    701     display:-ms-flexbox;
    702     display:flex;
    703     -webkit-align-items:center;
    704     -ms-flex-align:center;
    705     align-items:center;
    706     margin:.25em 0
    707 }
    708 
    709 .workout-info li {
    710     color:#959595
    711 }
    712 
    713 .workout-info li:after {
    714     content:"|";
    715     margin:0 .5em
    716 }
    717 
    718 .workout-info li:last-child:after {
    719     content:"";
    720     margin:0
    721 }
    722 
    723 .workout-intro {
    724     font-size:13px;
    725     font-size:.8125rem;
    726     color:#151515
    727 }
    728 
    729 .workout-options {
    730     display:inline-block;
    731     border:1px solid #e1e1e1;
    732     margin-bottom:0;
    733     border-radius:4px
    734 }
    735 
    736 .workout-options li {
    737     display:inline-block;
    738     border-right:1px solid #e1e1e1
    739 }
    740 
    741 .workout-options li:last-child {
    742     border-right:none
    743 }
    744 
    745 .workout-options a {
    746     color:#959595;
    747     padding:.5em .75em
    748 }
    749 
    750 .workout-options a:hover {
    751     color:#151515
    752 }
    753 
    754 .owo-del a:hover {
    755     color:red
    756 }
    757 
    758 .workout-aside {
    759     width:100%
    760 }
    761 
    762 .workout-activity-tree {
    763     padding:0;
    764     list-style-type: none;
    765     transition:all 250ms ease-in-out
    766                    list-style-type:none;
    767     font-size:13px;
    768     font-size:.8125rem;
    769     color: #959595;
    770 }
    771 
    772 .workout-activity-tree a {
    773     text-decoration: none;
    774     background-color: transparent;
    775     outline: 0;
    776     color: #959595;
    777 }
    778 
    779 
    780 .workout-activity-tree li a.viewing-year {
    781     font-size: 17px;
    782     color: #151515;
    783 }
    784 
    785 .workout-activity-tree ul.hidden {
    786     display: none;
    787 }
    788 
    789 .workout-activity-tree-year {
    790     list-style-type: none;
    791     padding: 0;
    792     padding-left: 15px;
    793     font-size:13px;
    794     font-size:.8125rem;
    795     color: #959595;
    796 }
    797 
    798 .workout-activity-tree-year a {
    799     text-decoration: none;
    800     background-color: transparent;
    801     outline: 0;
    802     color: #959595;
    803 }
    804 
    805 
    806 .workout-activity-tree-year li a.viewing-month {
    807     font-size: 17px;
    808     color: #151515;
    809 }
    810 
    811 .workout-activity-tree-month {
    812     list-style-type: none;
    813     padding: 0;
    814     padding-left: 15px;
    815     font-size:13px;
    816     font-size:.8125rem
    817     color: #959595;
    818 }
    819 
    820 .workout-activity-tree-month a {
    821     text-decoration: none;
    822     background-color: transparent;
    823     outline: 0;
    824     color: #959595;
    825 }
    826 
    827 
    828 
    829 @media (min-width:800px) {
    830     .workout-aside {
    831         max-width:300px;
    832         padding-left:1.5em;
    833         border-left:1px solid #e1e1e1
    834     }
    835 
    836 
    837 }
     13/* Pages */
     14@import "pages/login.css";

  • ow/templates/base_anonymous.pt

    r02048a6 r816820d  
    2525
    2626    <link rel="stylesheet"
    27           href="${request.static_url('ow:static/css/main.min.css')}" />
     27          href="${request.static_url('ow:static/css/main.css')}" />
    2828
    2929  </head>
    … …  
    3737          <a href="#" tal:attributes="href request.resource_url(request.root)">
    3838            <span class="logo-open">Open</span><span class="logo-work">work</span><span class="logo-outs">outs</span>
    39         </a>
     39          </a>
    4040        </h1>
    4141        <p class="description">tracking your workouts openly</p>
Note: See TracChangeset for help on using the changeset viewer.