showtimer/ShowTimer.css at master · R-Chandra/showtimer · 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

/* the default is not to show milliseconds in displays */
[data-st-role=millis] {
    visibility: hidden;
}

/* This was to demonstrate having the individual components of
    a displayed time have different colors */
/* span[data-STrole=hr], span[data-STrole=min], span[data-STrole=sec] {
    color: gray;
}

span[data-STrole=min] {
    color: cyan;
}

span[data-STrole=sec] {
    color: yellow;
}
*/

/* This was to show "subtables" with a white border */
/*
td {
    border: 3px white solid;
}
*/

.tdisp {
    border: none;
    margin-right:0;
    margin-left: auto;
    font-family: monospace;
}

/* The JS code ensures that there are no milliseconds kept
     track of in the main countdown timer, so there is no
     reason it needs to be displayed.  But code relies on
     ALL timing objects to have a "millis" member, so it
     has to be present.  Just make it invisible.
*/

#tmtilbreak [data-st-role="millis"],
#tmtilbreak td:nth-child(6){
    display: none;
}

#nxtbreaktm {
    font-size: x-large;
    background: black;
}

.tdisp td {
    /* width: 14px; */
    margin: 0 auto;
}


/* just an example of how to use nth-child(), highlight the
hours and seconds of a time <table>
*/
/*
.tdisp td:nth-child(5), .tdisp td:nth-child(1) {
    background: white;
    color: black;
}
*/

/* the dot between seconds and millis */
.tdisp td:nth-child(6) {
    visibility: hidden;
}

table {
/*
    margin: 0 auto;
*/
    border: 5px orange solid;
}

.mainclock {
    font-size: medium;
    font-family: monospace;
    color: green;
    background: black;
}

.countdown {
    font-size: 100px;
    font-family: monospace;
    display: inline-block;
    background: black;
    color: cyan;
}

.wallclock {
    color:green;
}

.timelabel {
    font-size: medium;
/*    font-family: cursive, serif, sans-serif, helvetica;
 */
    font-family: monospace, system-ui, Vibur, serif ;
    color: white;
    background: maroon;
}

.reminder {
    font-size: xx-large;
    color: white;
    background: black;
    border: 2px white solid;
}

/* We set up the reminders area as a timer object so that we can make
it flash easily, so therefore it must have the hr, min, etc. elements
*/

#remindermsg [data-st-role] {
    display: none;
}

#remindermsg {
    height: 1em;
}

#remindDismiss {
    visibility: hidden;
    /* putting a button in that box makes it blend in with the
	white border around the last table row, so increase margin
     */
    margin-bottom: 15px;
    margin-left: 5px;
}