← Back to branch summary

~widelands-dev/widelands-website/trunk

« back to all changes in this revision

Viewing changes to media/css/scheduling.css

  • Committer: gschmitlin at gmail
  • Date: 2017-12-23 09:15:02 UTC
  • mto: This revision was merged to the branch mainline in revision 480.
  • Revision ID: gschmitlin@gmail.com-20171223091502-j1zscwdies0625nv
added scheduling module in a clean way

Show diffs side-by-side

added added

removed removed

Lines of Context:
media/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 button {
 
9
    padding: 40px;
 
10
    font-size: 1em;
 
11
}
 
12
 
 
13
/* actual scheduling module */
 
14
#calandar {
 
15
    display: flex;
 
16
    justify-content: center;
 
17
}
 
18
 
 
19
/*  Hours of each day display for the user  */
 
20
.day {
 
21
    margin-bottom: 15px;
 
22
    background-image: url("../img/black50.png");
 
23
    padding: 10px;
 
24
}
 
25
 
 
26
.day-title h3{
 
27
    color:white;
 
28
    font-weight: bold;
 
29
    margin-top: 0;
 
30
}
 
31
 
 
32
.hours-wrapper {
 
33
    display: flex;
 
34
}
 
35
 
 
36
.hours-title-wrapper {
 
37
    display: flex;
 
38
    width: 100%;
 
39
}
 
40
 
 
41
.hours-title-wrapper p{
 
42
    width: 42px;
 
43
    user-select: none;
 
44
}
 
45
 
 
46
.hours {
 
47
    border: 1px solid #909090;
 
48
    height:40px;
 
49
    width: 40px;
 
50
    cursor: pointer;
 
51
}
 
52
 
 
53
.hours.selected {
 
54
    background-color: #118811;
 
55
}
 
56
 
 
57
.hours:hover {
 
58
    background-color: lightgreen;
 
59
}
 
60
 
 
61
.hidden-hour {
 
62
    height: 40px;
 
63
    width: 40px;
 
64
}
 
65
 
 
66
 
 
67
/*  Display for the other users  */
 
68
#other-users-wrapper {
 
69
    display: flex;
 
70
    flex-wrap: wrap;
 
71
    padding: 1%;
 
72
}
 
73
 
 
74
.other-user-div{
 
75
    width: 29%;
 
76
    border: 1px solid black;
 
77
    background-image: url("../img/black50.png");
 
78
    padding: 11px;
 
79
    margin-top: 5px;
 
80
    margin-right: 5px;
 
81
}
 
82
 
 
83
.other-user-div > div {
 
84
    margin-top: 14px;
 
85
}
 
86
 
 
87
.other-user-div .hours{
 
88
    height: 10px;
 
89
    width: 20px;
 
90
}
 
91
 
 
92
.other-user-div .title {
 
93
    height: 36px;
 
94
    display: flex;
 
95
    justify-content: space-between;
 
96
    margin-top: 0;
 
97
}
 
98
 
 
99
.other-user-div .title p {
 
100
    font-size: 20px;
 
101
    margin-top: 5px;
 
102
    text-transform: capitalize;
 
103
    white-space: nowrap;
 
104
    overflow: hidden !important;
 
105
    text-overflow: ellipsis;
 
106
    color: #feea72;;
 
107
    font-weight: bold;
 
108
}
 
109
 
 
110
.other-user-div .title button {
 
111
    min-width: 114px;
 
112
}
 
113
 
 
114
.other-user-div .title button:hover {
 
115
    background-color:#118811;;
 
116
}
 
117
 
 
118
.other-user-div .title img {
 
119
    margin-right: 4px;
 
120
}
 
121
 
 
122
 
 
123
/* btn */
 
124
#validate-btn {
 
125
    margin-top: 10px;
 
126
}
 
127
 
 
128
 
 
129
/**************************/
 
130
/* CSS for the datepicker */
 
131
/**************************/
 
132
 
 
133
.ui-datepicker {
 
134
    background-image: url("../img/wood.png");
 
135
    border: 1px solid black;
 
136
    border-radius: 4px;
 
137
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
 
138
    padding: 0.8em;
 
139
    display: none;
 
140
}
 
141
 
 
142
.ui-datepicker-header {
 
143
    text-align: center;
 
144
    border: 1px inset darkgray;
 
145
    background-image: url("../img/black50.png");
 
146
    margin-bottom: 5px;
 
147
}
 
148
 
 
149
.ui-datepicker-calendar {
 
150
    border: 1px inset darkgray;
 
151
    background-image: url("../img/black20.png");
 
152
}
 
153
 
 
154
.ui-datepicker-prev {
 
155
    padding: 0 3em 0 0;
 
156
    cursor: pointer;
 
157
}
 
158
 
 
159
.ui-datepicker-next {
 
160
    padding: 0 0 0 3em;
 
161
    cursor: pointer;
 
162
}
 
163
 
 
164
.ui-widget-content {
 
165
    display: flex !important;
 
166
    justify-content: space-around;
 
167
    width: 540px !important;
 
168
}
 
169
 
 
170
.ui-datepicker-header {
 
171
    height: 42px;
 
172
    position: relative;
 
173
}
 
174
 
 
175
.ui-datepicker-title {
 
176
    position: absolute;
 
177
    transform: translateX(-50%);
 
178
    left: 50%;
 
179
    bottom: 0;
 
180
}
 
 
b'\\ No newline at end of file'