forked from hmqcnoesy/zwofactory
-
Notifications
You must be signed in to change notification settings - Fork 0
/
site.css
95 lines (87 loc) · 4.95 KB
/
site.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
html { font-family: Segoe UI, Arial, Helvetica, sans-serif; padding:0; color: #555; text-shadow: 0px 0px 5px rgba(150, 150, 150, 1); background-color: #468; }
body { margin: auto; max-width: 1200px; }
header,main,footer { background-color: white; padding: 1em; border-radius: 0.25em; border: 1px solid black; display: block; }
header { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; padding: 0.5em 0; margin-bottom: 10px; }
main { margin-bottom: 10px; }
footer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 1em; text-align: center; }
header a { text-decoration: none; }
a { display: block; color: #456; cursor:pointer; text-decoration: underline; }
h1 { padding: 0; margin: 0; text-align: center; }
hr { margin: 18px 0; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(68, 85, 102, 0.75), rgba(0, 0, 0, 0)); }
p {padding: 1em}
img { display: block; margin: 0 auto; max-width: 100%; }
li {padding: 0.3em;}
label { display: block; }
.grid { display: flex; flex-flow: row wrap; align-content: flex-start; letter-spacing: -.31em; vertical-align: bottom; }
.grid > * { display: inline-block; padding: 0.25em; box-sizing: border-box; letter-spacing: normal; }
.u-1 { width: 100%; }
.u-1-2 { width: 50%; }
.u-1-3 { width: 33.3%; }
.u-1-4 { width: 25%; }
.u-1-5 { width: 20%; }
.u-2-5 { width: 40%; }
.u-3-5 { width: 60%; }
.u-4-5 { width: 80%; }
.u-1-6 { width: 16.66%; }
.u-1-8 { width: 12.5%; }
.u-3-4 { width: 75%; }
.u-3-8 { width: 37.5%; }
.u-1-10 { width: 10%; }
.u-1-12 { width: 8.33%; }
.u-1-24 { width: 4.1666%; }
textarea { font-family: Segoe UI, Arial, Helvetica, sans-serif; font-size: 0.9em; width:100%; border: 1px solid #555; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); }
select,
input[type=text],
input[type=number] { width: 100%; box-sizing: border-box; padding: 0.5em; border: 1px solid #555; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);}
input[type=number] { text-align: center; min-width: 62px; }
*:focus { outline: none; }
button { width: 100%; padding: 0.5em; cursor: pointer; color: #555; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); border: 1px solid #555; border-radius: 10px; background-color: gainsboro; }
button.save { background-color: #456; color: white; font-weight: bold; }
.saved { opacity: 0; transition-property: opacity; transition-duration: 1s; }
svg { display: inline-block; }
.z0 { fill: gainsboro; }
.z1 { fill: #837C83; }
.z2 { fill: #3C8FD1; }
.z3 { fill: #4AC171; }
.z4 { fill: #FFCC3F; }
.z5 { fill: #F06D43; }
.z6 { fill: #D6270C; }
.wu { fill: #837C83; }
.cd { fill: #837C83; }
.fr { fill: #837C83; }
.template { display: none; }
.indicator { width: 1em; height: 1em; margin-top: auto; margin-bottom: auto; border-radius: 100%; vertical-align: bottom; line-height: 1em; }
.invisible { display: none; }
.striped > * { padding: 1em; }
.striped > *:nth-child(odd) { background-color: #eee; }
.striped > *:nth-child(even) { background-color: white; }
[data-workout] { white-space: nowrap; overflow-x: auto; }
#divSegmentChart { width: 100%; box-sizing: border-box; margin: 0; white-space: nowrap; background-color: white; height: 344px; vertical-align: bottom; padding: 10px; overflow-x: auto; border: 1px solid #555; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); }
#divSegmentChart div { display: inline-block; }
#divSegmentChart svg { cursor: pointer; margin-right: 1px; }
#divSegmentChart svg > path { stroke: black; stroke-width: 0.5; }
#divSegmentChart input { display: none; }
#divSegmentChart input:checked + label { border-bottom: 6px solid #456; }
#divSegmentChart label { display: inline; cursor: pointer; }
#divSegmentChart label:hover { border-bottom: 6px solid gainsboro; }
#divWorkoutDuration { position: relative; top: 6px; padding-right: 10px; text-align: right; float: right; height: 0; }
.transparent { opacity: 0; }
.opaque { transition-duration: 2s; transition-property: opacity; opacity: 1; }
.dragover { background-color: gainsboro !important; }
.overlay { z-index:998;position:fixed;top:0;right:0;bottom:0;left:0;background-color:black;opacity:0.5; }
.modal { display: none; width: 400px; max-height: 400px; overflow-y: auto; box-sizing: border-box; padding: 0.5em; background-color: white; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); border: 1px solid #555; border-radius: 10px; }
.modal.shown { z-index:999; display: block; position: fixed; margin: auto; top: 30%; left: 50%; margin-left: -200px; margin-right: -200px; }
@media only screen and (max-width:730px) {
.sm-hidden { display:none; }
.u-sm-1 { width: 100%; }
.u-sm-1-2 { width: 50%; }
.u-sm-1-3 { width: 33.3%; }
.u-sm-1-4 { width: 25%; }
.u-sm-1-5 { width: 20%; }
.u-sm-4-5 { width: 80%; }
.u-sm-1-6 { width: 16.66%; }
.u-sm-1-8 { width: 12.5%; }
.u-sm-3-8 { width: 37.5%; }
.u-sm-1-10 { width: 10%; }
.u-sm-1-12 { width: 8.33%; }
}