source: OpenWorkouts-current/ow/static/less/modules/workout.less @ 035792a

current
Last change on this file since 035792a was 035792a, checked in by Borja Lopez <borja@…>, 5 years ago

Fixed typo, s/cotent/content

  • Property mode set to 100644
File size: 8.5 KB
Line 
1.workout-content {
2    padding: 2em  1em;
3    display: flex;
4    flex-direction: column;
5    @media (min-width: @screen-s){
6        padding: 2em 6em;
7    }
8    @media (min-width: @screen-m){
9        display: flex;
10        flex-direction: row;
11        justify-content:space-between;
12    }
13}
14
15/* list mode */
16.workout-list {
17    margin-right: 2em;
18    width: 100%;
19    >h2{
20        font-weight: 300;
21        margin: 0 0 1.5em;
22    }
23    order: 2;
24    @media (min-width: @screen-m){
25        order: 1;
26    }
27    /* provisional layout, replace this with grid layout system based on final content */
28}
29
30/* Module resume on dashboard workouts */
31.workout-resume {
32    padding: 1.5em 0;
33    position: relative;
34    max-width: 700px;
35    @media (min-width: @screen-m){
36        padding-left: 2em;
37        border-left: 1px solid @color-main-light;
38        transition: all 250ms ease-in-out;
39    }
40    &:hover{
41        border-color: @color-main;
42        .workout-title{
43            &:before{
44                color: @color-main;
45            }
46        }
47    }
48    ul{
49        padding: 0;
50        list-style-type: none;
51        .font-size(13);
52        a{
53            display: block;
54            text-decoration: none;
55        }
56    }
57}
58.bike{
59    &:before{
60        display: block;
61        //position: absolute;
62        content: "";
63        width: 30px;
64        height: 30px;
65        //left:-3.25em;
66        //top: 1.6em;
67        background-image: url('../media/img/bike.svg');
68        background-size: 100%;
69    }
70}
71
72.workout-title{
73    .font-size(14);
74    margin: 0 0 0em 0;
75    position: relative;
76    &:before{
77        transition: all 250ms ease-in-out;
78        content: "▶";
79        position: absolute;
80        left: -3.25em;
81        top:.35em;
82        color:@color-main-light;
83        .font-size(10);
84    }
85    a{
86        color: @color-main;
87        text-decoration: none;
88        &:hover {
89            color: @color-app;
90        }
91    }
92}
93
94.workout-info {
95    display: flex;
96    flex-flow: row wrap;
97    //align-items:center;
98    margin: .25em 0;
99    li{
100        color: @color-main-medium;
101        margin-bottom: .25em;
102        &:after{
103            content: "|";
104            margin: 0 .5em;
105        }
106        &:last-child{
107            &:after{
108                content: "";
109                margin:0;
110            }
111        }
112    }
113}
114
115.workout-map {
116    margin-top: 1em;
117    img {
118        width: 100%;
119    }
120}
121
122.workout-intro {
123    .font-size(13);
124    color: @color-main;
125}
126
127.workout-options{
128    display: inline-block;
129    border:1px solid @color-main-light;
130    margin-bottom: 0;
131    border-radius: 4px;
132    padding: 0;
133    width: auto;
134    background-color: white;
135    li{
136        display: inline-block;
137        border-right: 1px solid @color-main-light;
138        &:last-child{
139            border-right:none;
140        }
141    }
142    a{
143        display: block;
144        color: @color-main-medium;
145        padding: .5em .75em;
146        text-decoration: none;
147        &:hover{
148            color: @color-main;
149        }
150        &.is-active {
151            background-color: @color-main-medium;
152            color: white;
153        }
154    }
155}
156
157.owo-del{
158    a{
159        &:hover{
160            color: red;
161        }
162    }
163}
164
165.workout-aside{
166    width: 100%;
167    order: 1;
168    @media (min-width: @screen-m){
169        order: 2;
170        max-width: 300px;
171        padding-left: 1.5em;
172        border-left:1px solid @color-main-light;
173    }
174}
175
176
177
178.aside-profile {
179    margin-bottom: 1em;
180    img {
181        width: 80px;
182        height: 80px;
183        object-fit: cover;
184        border-radius: 50%;
185    }
186    h2 {
187        font-weight: 400;
188        .font-size(18);
189         margin: 0 0 .5em 0;
190    }
191    ul {
192        list-style-type: none;
193        margin:0;
194        padding:0;
195        .font-size(13);
196        color: @color-main-dark;
197    }
198    a {
199        text-decoration: none;
200        color: @color-main;
201        &:hover {
202            color: @color-main-medium;
203        }
204    }
205}
206
207
208
209/* Workout detail */
210#map {
211    width: 100%;
212    height: 400px;
213    @media (min-width: @screen-s){
214        height: calc(100vh - 465px);
215    }
216}
217
218.workout-detail {
219    padding: 0em  1em;
220    @media (min-width: @screen-s){
221        max-width: 1280px;
222        margin: 0 auto;
223    }
224     @media (min-width: @screen-m){
225        display: flex;
226        justify-content:space-between;
227    }
228}
229
230.workout-detail-resume {
231    max-width: 500px;
232    margin-bottom: 2em;
233    padding-top: 2em;
234    @media (min-width: @screen-m){
235        margin-right: 6em;
236    }
237    h3 {
238        margin-top: 0;
239        margin-bottom: .5em;
240        & + div {
241            .font-size(14);
242            color: @color-main-medium;
243            line-height: 1.35em;
244        }
245    }
246    .workout-options {
247        .font-size(13);
248    }
249}
250
251.workout-detail-info {
252    max-width: 600px;
253    @media (min-width: @screen-m){
254        border-right: 1px solid @color-main-light;
255        border-left: 1px solid @color-main-light;
256        padding:2em 1em 2em 2em;
257    }
258    ul {
259        list-style-type: none;
260        padding:0;
261        margin: 0;
262        display: flex;
263        justify-content:space-between;
264        flex-flow: row wrap;
265        span {
266            display: block;
267            .font-size(13);
268            color: @color-main-medium;
269            margin-bottom: .25em;
270            &.min,
271            &.avg,
272            &.max {
273                display: inline-block;
274                color: white;
275                padding: .5em .85em;
276                border-radius: 3px;
277                background-color: @color-main-light;
278                color: @color-main-medium;
279            }
280
281            /* color for future features */
282            // &.max {
283            //     background-color: @color-app;
284            // }
285            // &.min {
286            //     background-color: #1395CA;
287            //     margin-right: .5em;
288            // }
289
290            // &.avg {
291            //     background-color: #17C898;
292            //     margin-right: .5em;
293            // }
294        }
295    }
296    li {
297        margin-bottom: 1em;
298        margin-right: 1em;
299        color: @color-main-medium;
300        .font-size(15);
301        &.important {
302            .font-size(21);
303            color: @color-main;
304        }
305    }
306}
307
308
309
310/* Week report */
311.svg-content {
312    svg {
313        width: 100%;
314        height: 100%;
315    }
316
317    .label {
318        .font-size(13);
319        text-anchor: middle;
320    }
321    .tick {
322        .font-size(13);
323    }
324
325}
326
327/* dashboard graphics*/
328.x-axis path, .x-axis line {
329    fill: none;
330    stroke: none;
331}
332
333.bar {
334    fill: #f8b5be;
335    &:hover {
336        fill: #ee4056;
337    }
338}
339
340.current {
341    fill: #ee4056;
342}
343
344
345
346.week-stats {
347    border: 1px solid @color-main-light;
348    background-color: fade(@color-main-light, 10%);
349    padding: .75em;
350    border-radius: 4px;
351    margin-bottom: 2em;
352    h3 {
353        margin: 0;
354        .font-size(14);
355        & + p {
356            margin: .25em 0 2em 0;
357            color: @color-main-medium;
358            .font-size(13);
359        }
360    }
361}
362
363.workout-activity-summary {
364    list-style-type: none;
365    padding: 0;
366    margin: 0;
367    background-color: fade(@color-main, 80%);
368    margin-bottom: .75em;
369    li {
370        color: @color-main-light;
371        border-bottom: 1px solid @color-main-medium;
372        padding: .75em 1em;
373        display: flex;
374        justify-content: space-between;
375        &:last-child {
376            margin-bottom: 0;
377            border: none;
378        }
379        span {
380            &:first-child {
381                font-weight: bold;
382            }
383        }
384    }
385}
386
387.workout-activity-tree {
388    list-style-type: none;
389    padding: 0;
390    margin: 0;
391    transition:all 250ms ease-in-out;
392    .font-size(13);
393    >li {
394        margin-bottom: .5em;
395        padding-bottom: .5em;
396        border-bottom: 1px solid @color-main-light;
397    }
398    a {
399        text-decoration: none;
400        display: block;
401        color: @color-app;
402        &:hover{
403            color: @color-main;
404        }
405
406        &.viewing-year {
407            color: @color-main;
408            font-weight: 700;
409            margin-bottom: .5em;
410            .font-size(16);
411        }
412        &.viewing-month {
413            background-color: @color-main-light;
414            color: @color-main;
415            font-weight: 700;
416        }
417    }
418}
419
420
421.workout-activity-tree-year {
422    list-style-type: none;
423    padding: 0;
424    margin: 0;
425    >li {
426        display: block;
427        margin-bottom: .5em;
428    }
429    a {
430        display: flex;
431        justify-content: space-between;
432        padding: .5em;
433        background-color: @color-main-xtralight;
434        color: @color-main-dark;
435        &:hover {
436            background-color: @color-main-light;
437        }
438    }
439}
Note: See TracBrowser for help on using the repository browser.