-
Notifications
You must be signed in to change notification settings - Fork 7
/
site.css
127 lines (115 loc) · 7.65 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
html { font-family: Segoe UI, Arial, Helvetica, sans-serif; font-size: 1em; padding:0; color: #333; background: #000428; background: linear-gradient(to right, #000428, #336688, #000428); /*! background-repeat: repeat; */ }
body { margin: auto; max-width: 1040px; }
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; }
#divMessage:not(:empty) { text-align: center; background-color: rgba(194,165,103,.6); padding: 0.6em; }
#divMessage:not(:empty) a { display: inline; }
footer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 1em; text-align: center; }
header a { text-decoration: none; color: #000428;}
a { display: block; color: #000428; 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; }
.display-none { display: none !important; }
.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-18 { width: 5.56%; }
.u-1-24 { width: 4.1666%; }
textarea { font-family: Segoe UI, Arial, Helvetica, sans-serif; font-size: 1em; width:100%; border: 1px solid #333; border-radius: 3px; }
select,
input[type=text],
input[type=number] { width: 100%; font-size: 1em; box-sizing: border-box; padding: 0.5em; border: 1px solid #333; border-radius: 3px; }
input[type=number] { text-align: center; min-width: 62px; }
label { font-size: 75%; }
*:focus { outline: none; }
button { font-family: inherit; font-size: 90%; width: 100%; padding: 0.5em; cursor: pointer; color: #333; border: 1px solid #333; border-radius: 3px; background-color: #e7e7e7; }
button.save { background-color: #284a6c; color: white; font-weight: bold; border-color: #000428;}
.saved { opacity: 0; transition-property: opacity; transition-duration: 1s; }
svg { display: inline-block; }
.z0 { color: black; background-color: gainsboro;fill: gainsboro; }
.z1 { color: white; background-color: #7b7971; fill: #7b7971; }
.z2 { color: white; background-color: #284a6c; fill: #284a6c; }
.z3 { color: black; background-color: #80b139; fill: #80b139; }
.z4 { color: black; background-color: yellow; fill: yellow; }
.z5 { color: black; background-color: #f26418; fill: #f26418; }
.z6 { color: white; background-color: #D23430; fill: #D23430; }
.wu { color: black; background-color: #837C83; fill: #837C83; }
.cd { color: black; background-color: #837C83; fill: #837C83; }
.fr { color: black; background-color: #837C83; 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: 0.75em; border: 1px solid #000428; border-radius: 3px; margin-bottom: 3px;}
[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 #333; border-radius: 3px; /*! 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 #000428; }
#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; }
#aSettings { position: relative; top: 6px; padding-left: 10px; text-align: left; 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: 360px; box-sizing: border-box; padding: 0.5em; background-color: white; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8); border: 1px solid #333; border-radius: 3px; }
.modal.shown { z-index:999; display: block; position: fixed; margin: auto; top: 5%; left: 50%; margin-left: -180px; margin-right: -180px; }
.modal-header { padding-bottom: 0.5em; }
.modal-body { max-height: 400px; overflow-y: auto; }
.modal-footer {padding-top: 0.5em; }
.tooltip { display:inline-block; position:relative; }
.tooltip .left { width:240px; top:-6px; right:100%; margin-right:0.5em; padding: 0.5em; background-color:#E7e7e7; border-radius: 3px; position: absolute; z-index: 99999999; box-sizing: border-box; border: 1px solid #284a6c; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.8); display:none; color: #333; }
.tooltip:hover .left { display:block; }
.infoCircle { text-decoration: none; border-radius: 50%; width: 1em; height: 1em; border: 1px solid #000428; padding: 2px; color: #000428; text-align: center; cursor: help; margin-left: 0.5em; float: right; font-size: 75%; }
.calculated-info { float: right; margin-top: 2px; font-size: 75%; font-weight: bold; border-radius: 3px; padding: 1px 6px; border: 1px solid black; white-space: nowrap; }
.tss { font-size: 65%; border-radius: 3px; margin-left: 8px; padding: 1px 6px; border: 1px solid #333; white-space: nowrap; }
.tss:empty { display: none; }
.xp { font-size: 65%; border-radius: 3px; margin-left: 8px; padding: 1px 6px; border: 1px solid #284a6c; background-color: #284a6c; color: white; white-space: nowrap; }
.xp:empty { display: none; }
.dd-label { padding: 4px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.dd-button { font-size: 0.9rem !important; text-align: center; width: 100%; padding: 0.5em 0; cursor: pointer; color: #333; /*! box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); */ border: 1px solid #333; border-radius: 3px; background-color: #e7e7e7; }
.dd-input { display: none; }
.dd-menu { display: none; text-align: left; list-style: none; padding-left: 1em; }
.dd-input:checked + .dd-menu { display: block; }
.dd-menu > li { margin-left: 0.5em; }
@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%; }
.modal.shown { top: 20px; }
.modal-body { max-height: 220px; }
}
@media only screen and (max-width:880px) {
.sm-hidden { display:none; }
.calculated-info { padding: 1px 2px; }
}