-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
executable file
·151 lines (137 loc) · 2.99 KB
/
style.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/* Set font family for entire document. */
html {
font-family: sans-serif;
}
/*
* Set the div containing the "create task" button and swim lanes to be a
* flex container who aligns the elements in a row.
* This helps the content adapt to different display resolutions/ratios.
*/
.flex-container {
display: flex;
flex-direction: row;
}
/*
* Set swim lane width to 100% so each lane isn't squashed to one side.
* Setting the margin is purely for consmetic purposes.
*/
main {
width: 100%;
margin: 1%;
}
/*
* Set the aside element (containing the "create task" button) to be a flex
* container. This ensures the button itself is vertically centred.
*/
aside {
margin: 1%;
display: flex;
align-items: center;
}
/*
* Ensure the swim lanes stretch make use of the full width of the <main>
* element. Also ensure the height is sufficient to allow elements to be
* "dropped" into the containing swim lanes.
*/
table {
width: 100%;
height: 100%;
}
/*
* Set each swim lane to use one third of the table's width so exaclty three
* can be fitted.
*/
td {
width: 33%;
}
/*
* Cosmetic styling of the swim lanes' headers.
*/
th {
font-size: 5ex;
background-color: #d9d9d9;
}
/*
* Light blue background colour of each swim lane.
*/
tr {
background-color: #b0fff3;
}
/*
* Disable the default "bullet" ul style.
* Setting the minimum height ensures Tasks can be dropped "anywhere" over the
* "blue" swim lane regions.
*/
ul {
list-style-type: none;
padding: 0;
min-height: 100%;
}
/*
* All cosmetic except:
* Force a word break for Tasks with names longer than the list width
* (i.e. the width of the "green" Task background).
*/
li {
background-color: #a9fe30;
margin-top: 5%;
margin-bottom: 5%;
width: 80%;
word-break: keep-all;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 0px 10px 0px 10px;
}
/*
* Styles the little red "X" button beside each Task displayed on the swim
* lanes.
*/
.delete-task {
float: right;
color: #fe1d1d;
cursor: pointer;
}
/*
* Styles the little "i" symbol beside each Task displayed on the swim
* lanes.
*/
.edit-task {
float: left;
color: #fe1d1d;
cursor: pointer;
font-style: italic;
}
/*
* Hide the "Edit task" pop-up and place it in front of the main view.
* The modal-overlay represents the entire "Edit task" pop-up, including
* the grey transparent background.
*/
.modal-overlay {
display: none;
z-index: 1;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(166, 166, 166, 0.6);
top: 0;
left: 0;
}
/*
* Styles the "Edit task" pop-up content. This only encompasses the white box
* in the centre of the screen containing the form.
*/
.modal-content {
background-color: #ffffff;
margin: auto;
width: 30%;
padding: 10px;
margin-top: 20%;
}
/*
* Styles the "close" button on the "Edit task" pop-up dialogue.
*/
.close-modal {
float: right;
cursor: pointer;
}