Gsc/pomodoro1.css at master · Leedabord/Gsc · 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
/* Styles here */

#container{
  border:1px solid #333;
  border-radius :20px;
  width:400px;
  margin:20px auto;
  padding:20px;
  text-align:center;
  background : #333;
}

#timer{
  color:#f00;
  font-size:50px;
  margin:10px auto;
  border : 5px solid red;
  border-radius:50%;
  width:200px;
  height:200px;
  overflow:hidden;
  position:relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor:default;
}

#time{
  margin-top:70px;
  z-index : 1;
  position:relative;
}

/*
	filler width is set to 200px (i.e. equal to width of the timer) so that it completely covers 	the timer in background. The height is initially set to 0px and it increases as timer 		progresses to give background fill effect.
*/


#filler{
  background : #ddffcc;
  height: 0px;
  width: 200px;
  position:absolute;
  bottom:0;
}

#buttons button {
  background:#4da6ff;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:5px;
  width:90px;
  margin:10px auto;
  font-size:14px;
  height : 50px;
  border-radius : 50px;
}

#buttons button#shortBreak{
  background : #0c0;
}

#buttons button#longBreak{
  background : #080;
}

#buttons button#stop{
  background : #f00;
}