polar-clock/screen.css at master · morrow/polar-clock · 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
html {
  background:#000;
  color:#999;
  font-size:12px;
  font-family:arial;
  font-weight:bold;
}

body {
  overflow-x:hidden;
}

body.rotating {
  overflow-y:hidden;
}

a, a:visited {
  color:inherit;
  text-decoration:none;
  border-bottom:2px solid #444;
}

hr {
  margin-top:20px;
  opacity:.25;
}

button {
  cursor:pointer;
}


input[type=range] {
  position:relative;
  top:7px;
  margin-right:15px;
}

input[type=number], input.birthday {
  width:50px;
  font-weight:bold;
  background:#111;
  padding:5px;
  color:#aaa;
  border:1px solid #333;
  margin-right:15px;
}
input.birthday {
  width:100px;
}

.output {
  width: 20px;
  display:inline-block;
}

#controls button {
  margin:2px 15px;
}

#clock {
  width:680px;
  height:680px;
  margin:5px auto;
  display:block;
  background:#000;
  z-index:1;
}

#personal-options {
  margin-top:20px;
  border-top:1px dashed #444;
}

#options {
  position:absolute;
  left:15px;
  top:45px;
  width:300px;
  z-index:10;
  background:rgba(15,15,15,.9);
  border:1px solid #222;
  border-radius:5px;
  text-align:center;
  padding:.7em 2em;
  text-align:left;
}

#options #okay, #options #reset {
  float:right;
  position:relative;
  top:-15px;
}

#options #reset {
  color:red;
  right:7px;
}

#options-toggle {
  color:#aaa;
  position:absolute;
  top:15px;
  left:15px;
  background:#151515;
  color:#666;
  padding:.6em .8em;
  cursor:pointer;
  border-radius:3px;
}

#options-toggle:hover {
  background:#222;
  color:#fff;
}

#options label {
  clear:left;
  width:50%;
  margin-top:15px;
  display:inline-block;
}