← Back to branch summary

~widelands-dev/widelands-website/trunk

« back to all changes in this revision

Viewing changes to wlscheduling/static/css/scheduling.css

  • Committer: kaputtnik
  • Date: 2019-05-30 18:20:02 UTC
  • mto: This revision was merged to the branch mainline in revision 540.
  • Revision ID: kaputtnik-20190530182002-g7l91m1xo28clghv
adjusted README; first commit on the new server

Show diffs side-by-side

added added

removed removed

Lines of Context:
wlscheduling/static/css/scheduling.css
 
1
/* Main */
 
2
.main-choices {
 
3
    display: flex;
 
4
    justify-content: space-around;
 
5
    margin-top: 40px;
 
6
}
 
7
 
 
8
.main-choices a {
 
9
    width: calc(50% - 30px);
 
10
}
 
11
 
 
12
.main-choices button {
 
13
    width: 100%;
 
14
    height: 50px;
 
15
    font-size: 1em;
 
16
}
 
17
 
 
18
/* actual scheduling module */
 
19
#calender {
 
20
    display: flex;
 
21
    justify-content: center;
 
22
}
 
23
 
 
24
/*  Hours of each day display for the user  */
 
25
.day {
 
26
    margin-bottom: 15px;
 
27
    background-image: url("../img/black50.png");
 
28
    padding: 10px;
 
29
}
 
30
 
 
31
.day-title h3{
 
32
    color:white;
 
33
    font-weight: bold;
 
34
    margin-top: 0;
 
35
}
 
36
 
 
37
.hours-wrapper {
 
38
    display: flex;
 
39
}
 
40
 
 
41
.hours-title-wrapper {
 
42
    display: flex;
 
43
    width: 100%;
 
44
}
 
45
 
 
46
.hours-title-wrapper p {
 
47
    width: 42px;
 
48
    user-select: none;
 
49
}
 
50
 
 
51
.hours {
 
52
    border: 1px solid #909090;
 
53
    height:40px;
 
54
    width: 40px;
 
55
    cursor: pointer;
 
56
}
 
57
 
 
58
.hours.selected {
 
59
    background-color: #118811;
 
60
}
 
61
 
 
62
.hours:hover {
 
63
    background-color: lightgreen;
 
64
}
 
65
 
 
66
.hidden-hour {
 
67
    height: 40px;
 
68
    width: 40px;
 
69
}
 
70
 
 
71
/*********************************/
 
72
/*  Display for the other users  */
 
73
/*********************************/
 
74
#other-users-wrapper {
 
75
    display: flex;
 
76
    flex-wrap: wrap;
 
77
}
 
78
 
 
79
.other-user-div{
 
80
    width: 100%;
 
81
    border: 1px solid black;
 
82
    background-image: url(../img/black50.png);
 
83
    padding: 11px;
 
84
    margin-top: 5px;
 
85
    margin-right: 5px;
 
86
}
 
87
 
 
88
 
 
89
.other-days-container {
 
90
    display: flex;
 
91
    flex-wrap: wrap;
 
92
}
 
93
 
 
94
.other-days-container > div {
 
95
    margin-top: 14px;
 
96
    margin-right: 7px;
 
97
    width: 290px;
 
98
}
 
99
 
 
100
.other-user-div .title {
 
101
    height: 36px;
 
102
    display: flex;
 
103
    justify-content: space-between;
 
104
    margin-top: 0;
 
105
}
 
106
 
 
107
.other-user-div .title p {
 
108
    font-size: 20px;
 
109
    margin-top: 5px;
 
110
    white-space: nowrap;
 
111
    overflow: hidden !important;
 
112
    text-overflow: ellipsis;
 
113
    color: #feea72;
 
114
    font-weight: bold;
 
115
}
 
116
 
 
117
.other-user-div .title button {
 
118
    min-width: 114px;
 
119
}
 
120
 
 
121
.other-user-div .title button:hover {
 
122
    background-color:#118811;
 
123
}
 
124
 
 
125
.other-user-div .title img {
 
126
    margin-right: 4px;
 
127
}
 
128
 
 
129
 
 
130
.show-clock-btn {
 
131
    height: 35px;
 
132
    width: 100%;
 
133
    text-align: center;
 
134
    margin-top: 8px;
 
135
    padding-top: 5px;
 
136
}
 
137
 
 
138
.show-clock-btn:hover {
 
139
    background-color: #118811;
 
140
}
 
141
 
 
142
.show-clock-btn .arrow {
 
143
    width: 18px;
 
144
    height: 18px;
 
145
    font-size: inherit;
 
146
    border: none;
 
147
    color: rgba(254, 234, 138, 1);
 
148
    background-image: url(../img/arrow_up_short.png);
 
149
    background-repeat: no-repeat;
 
150
    padding: 0px 20px 3px 2px;
 
151
    background-position: center;
 
152
}
 
153
 
 
154
.hide .show-clock-btn .arrow {
 
155
    background-image: url(../img/arrow_down_short.png);
 
156
}
 
157
 
 
158
 
 
159
/**********  clock **********/
 
160
.other-user-div.hide .clocks-wrapper {
 
161
    display: none;
 
162
}
 
163
 
 
164
.clocks-wrapper {
 
165
    display:flex;
 
166
    flex-flow: row wrap;
 
167
    justify-content: space-around;
 
168
    margin-top: 20px;
 
169
    padding: 0px 22px;
 
170
    background-image: url("../img/black50.png");
 
171
}
 
172
 
 
173
.clocks-wrapper h2 {
 
174
    text-align: center;
 
175
}
 
176
 
 
177
svg.clock-svg {
 
178
    width: 120px;
 
179
    height: 120px;
 
180
}
 
181
 
 
182
.hour-area {
 
183
    stroke-linejoin:round;
 
184
    stroke-width:8;
 
185
    fill: #312925;
 
186
    stroke: black;
 
187
}
 
188
 
 
189
.hour-area.active {
 
190
    fill: #118811;
 
191
}
 
192
 
 
193
 
 
194
.number-wrapper {
 
195
    line-height:100%;
 
196
    stroke-width:3.7;
 
197
}
 
198
 
 
199
.number {
 
200
    -inkscape-font-specification: "sans-serif";
 
201
    font-family:"sans-serif";
 
202
    fill: white;
 
203
    stroke:black;
 
204
}
 
205
 
 
206
.circle {
 
207
    fill: #312925;
 
208
}
 
209
 
 
210
/* btn */
 
211
#validate-btn {
 
212
    margin-top: 10px;
 
213
}
 
214
 
 
215
 
 
216
/**************************/
 
217
/* CSS for the datepicker */
 
218
/**************************/
 
219
 
 
220
.ui-datepicker {
 
221
    background-image: url("../img/wood.png");
 
222
    border: 1px solid black;
 
223
    border-radius: 4px;
 
224
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
 
225
    padding: 0.8em;
 
226
    display: none;
 
227
}
 
228
 
 
229
.ui-datepicker-header {
 
230
    text-align: center;
 
231
    border: 1px inset darkgray;
 
232
    background-image: url("../img/black50.png");
 
233
    margin-bottom: 5px;
 
234
}
 
235
 
 
236
.ui-datepicker-calendar {
 
237
    border: 1px inset darkgray;
 
238
    background-image: url("../img/black20.png");
 
239
}
 
240
 
 
241
.ui-datepicker-prev {
 
242
    padding: 0 3em 0 0;
 
243
    cursor: pointer;
 
244
}
 
245
 
 
246
.ui-datepicker-next {
 
247
    padding: 0 0 0 3em;
 
248
    cursor: pointer;
 
249
}
 
250
 
 
251
.ui-widget-content {
 
252
    display: flex !important;
 
253
    justify-content: space-around;
 
254
    width: 540px !important;
 
255
}
 
256
 
 
257
.ui-datepicker-header {
 
258
    height: 42px;
 
259
    position: relative;
 
260
}
 
261
 
 
262
.ui-datepicker-title {
 
263
    position: absolute;
 
264
    transform: translateX(-50%);
 
265
    left: 50%;
 
266
    bottom: 0;
 
267
}
 
268
 
 
269
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
 
270
    background: #118811 none;
 
271
}
 
272
 
 
273