done/done.css at gh-pages · imsky/done · GitHub

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
html {font-family:Montserrat;background:#fff;color:#325675;}
body {padding-bottom:50px;min-width:300px;}
#container {position:relative;padding-top:50px;}

h1 {font-weight:normal;display:block;text-align:center;letter-spacing:-2px;font-size:50px;margin:0 auto;margin-bottom:50px;}
a {color:#325675;text-decoration:none;}
a:hover {text-decoration:underline;}

.inner {width:600px;margin:0 auto;}
.row, .col {overflow:hidden;}
.row .col {float:left;box-sizing:border-box;height:50px;}
.row .col input {height:40px;border:0;background:0;box-sizing:border-box;font-size:20px;}

#addtask .taskname, #tasks .taskname {width:57.5%;}
#addtask .tasktime  {width:12.5%}
#addtask .taskbutton {width:20%;margin-left:2.5%;}
#tasks .tasktime {width:22.5%;}
#tasks .taskbutton {width:9%;}

#addtask {font-size:20px;line-height:40px;}
#addtask input::-webkit-input-placeholder {color:rgba(50,86,117,0.5);}
#addtask .taskname, #addtask .tasktime {border:solid 5px #325675}
#addtask .tasktime {margin-left:2.5%;}
#addtask .col {border-radius:50px}
#addtask .col input {color:#325675}
#addtask .col.button {color:#fff;background:#325675;user-select:none;}
#addtask .tasktime {border-top-right-radius:0px;border-bottom-right-radius:0px}
#addtask .timebutton {width:5%;border-top-left-radius:0px;border-bottom-left-radius:0px;line-height:55px}
#addtask .timebutton span {display:block;text-indent:2px;}
#addtask .taskbutton span {text-align:center;display:block;line-height:50px;font-weight:bold;}
#taskname {width:96%;padding-left:4%;}
#tasktime {text-align:center;width:100%;display:block;text-indent:1px;user-select:none;}

#tasks {margin-top:50px;}
#tasks.running .task {opacity:0.5;}
#tasks.running .task.active {opacity:1;}
.task {font-size:20px;height:50px;line-height:50px;margin-bottom:25px}
.task .taskname {cursor:move}
#tasks .tasktime {text-align:center;}
#tasks .taskbutton {text-align:center;line-height:50px;font-size:30px;background:0}

.iconic.play {text-indent:4px;}
#tasks .deletebutton {margin-left:2%}
#tasks .notice {text-align:center;display:block;font-size:30px;margin:100px 0px;}
#tasks .task.finished .controlbutton {display:none;}
#tasks .task.finished .deletebutton {width:10%;margin-left:5%;}

#addtask .tasktime, .button {cursor:pointer;user-select:none;}

#settings-button {position:absolute;top:0px;left:0px;padding:8px 10px;font-size:30px;line-height:1;cursor:pointer;transition:top 1s ease-in-out;}

#settings input::-webkit-input-placeholder , #credentials input::-webkit-input-placeholder {color:rgba(255,255,255,0.5);}

body.settings #settings {height:50px;padding:25px 0px}
#settings {background:#325675;height:0px;text-align:center;overflow:hidden;transition:all 0.6s ease-in-out;padding:0px}
#settings .button {font-size:20px;background:#fff;color:#325675;text-align:center;border-radius:50px;height:50px;padding:0px 20px;display:inline-block;cursor:pointer;line-height:50px;margin:0 5px;}

#footer {margin-top:50px;font-size:15px;padding-top:10px;border-top:solid 1px #325675;text-align:center;}
#footer span {display:block;margin-bottom:10px;}

.textbar {height:0px;text-align:center;line-height:50px;overflow:hidden;transition:all 0.5s ease-out;}
.textbar.visible {height:50px;}

#error {background:#FF5500;color:#fff;}
#notification {background:#eee;color:#777;}

body.credentials #credentials {height:50px;padding:25px 0px}
#credentials {background:#325675;height:0px;padding:0px;overflow:hidden;transition:all 0.6s ease-in-out}
#credentials .col {border-radius:50px;}
#credentials .username, #credentials .password {width:35%;margin-right:2.5%;border:solid 5px #fff;}
#credentials .field input {padding-left:4%;width:96%;color:#fff;}
#credentials .loginbutton {width:25%;background:#fff;font-size:20px;line-height:50px;text-align:center}

#xdm {display:none;}

body.big #addtask {display:none;}
body.big #tasks.running .task {display:none;}
body.big #tasks.running .task.active {display:block;}
body.big #footer {display:none;}
body.big #container .inner {width:auto;margin:10%;}
body.big #tasks .task .taskname {cursor:default;width:auto;float:none;text-align:center;font-size:2em;}
body.big #tasks .task.active .taskname {font-size:3em;}

body.big #tasks .row .col {height:auto;}
body.big #tasks .task {height:auto;line-height:inherit;margin-bottom:30px;}
body.big .tasktime {line-height:50px}
body.big .taskbutton {display:none;}
body.big .tasktime {float:none;width:auto !important;text-align:center;margin-top:20px;}
body.big h1 {position:absolute;top:10px;right:10px;font-size:20px;line-height:20px;}
body.big #bigbutton {background:#eee;color:#325675;}


/* Autogenerated by cssFx */

.row .col{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box}
.row .col input{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box}
#addtask .col{-moz-border-radius:50px;-webkit-border-radius:50px}
#addtask .col.button{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none}
#addtask .tasktime{-moz-border-radius-topright:0px;-webkit-border-top-right-radius:0px;-moz-border-radius-bottomright:0px;-webkit-border-bottom-right-radius:0px}
#addtask .timebutton{-moz-border-radius-topleft:0px;-webkit-border-top-left-radius:0px;-moz-border-radius-bottomleft:0px;-webkit-border-bottom-left-radius:0px}
#tasktime{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none}
#tasks.running .task{-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter: alpha(opacity=50);-moz-opacity:0.5;-webkit-opacity:0.5}
#tasks.running .task.active{-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter: alpha(opacity=100);-moz-opacity:1;-webkit-opacity:1}
#addtask .tasktime, .button{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none}
#settings-button{-moz-transition:top 1s ease-in-out;-webkit-transition:top 1s ease-in-out;-o-transition:top 1s ease-in-out;-ms-transition:top 1s ease-in-out}
#settings{-moz-transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out}
#settings .button{-moz-border-radius:50px;-webkit-border-radius:50px;display:-moz-inline-stack;zoom:1;*display:inline}
.textbar{-moz-transition:all 0.5s ease-out;-webkit-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out}
#credentials{-moz-transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out}
#credentials .col{-moz-border-radius:50px;-webkit-border-radius:50px}


@media only screen and (max-width: 600px) {
@-ms-viewport { width: device-width; }

body.settings #settings {height:auto;padding:0;}
#settings .button {display:block !important;margin:20px auto;width:50%;padding:0;float:none;clear;both}

body.credentials #credentials {height:auto;padding:0;}
#credentials .col {float:none;margin:20px auto;width:50%;}

.textbar {line-height:25px;height:0px;}
.textbar.visible {height:auto;}

.inner {width:auto}
#container {margin:10px;}
#addtask .taskname {width:100%;margin-bottom:20px}
#addtask .tasktime {width:30%;margin-left:0;}
#addtask .timebutton {width:10%;}
#addtask.row .taskbutton {width:55%;margin-left:5%;}

#tasks .task {height:auto;margin-bottom:50px;}
#tasks .taskname {height:auto;line-height:25px;text-align:center;clear:both;width:100%;}
#tasks .controls .col {float:left;text-align:center}
#tasks .controls .col.tasktime {width:30%;margin-left:5%;margin-right:5%;}
#tasks .taskbutton {width:30%;}
#tasks .controls {overflow:hidden;width:200px;margin:0 auto;}
body.big #tasks .taskname {line-height:1;}
body.big #tasks .tasktime {text-align:center;width:auto !important;float:none;}
#tasks .controlbutton, #tasks .deletebutton {margin-left:0;width:25%;}
#tasks .task.finished .deletebutton {width:50%;margin-left:0;}
}