-
Notifications
You must be signed in to change notification settings - Fork 1
/
dialsandpanels.css
143 lines (142 loc) · 3.2 KB
/
dialsandpanels.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
/* Styles for dials and panels applications
Main characteristics:
- items grouped in panels, arrange the size in order to hold on a smartphone
- most items centered
- use standard style of a CMS etc. */
/* Version M2022-11-04 Improve definition for .outbounds
M2021-01-11 Add a 'seton' class (aimed at buttons)
M2020-01-09 - Add .onborder, set default height 360 for square panels
M2020-12-15 Set panel for command and outdisplay for results
M2020-11-21 Created after milesian clocks
2020-1m-11 - flexible layout of basic panels
*/
/* Layout of general elements */
/* .panel is a comprehensive item; panels are applied in line or next line
The .panel section may be suppressed for panels inserted via a CMS */
.centered {
text-align: center;
}
.onborder {
text-align: left;
}
table.centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.panel {
width: 360px;
height: 360px;
/* these commands to be avoided: overflow : auto; justify-content: center; */
display: inline-table; /* ou inline-table ou table-cell; */
/* inline-block aligne à la même hauteur le DERNIER titre de tous les blocs, et non le PREMIER.
table-cell : cellule d'une table <td> ou <th>.
inline-table aligne en haut. En fixant les tailles, on obtient de vrais panneaux */
outline: double;
/* pas sûr que fixer les marges ait un sens. margin: auto; ou 3px */
text-align: center;
}
.panelhead { /* no line spacing, to be used with h1 to h6, set as class to avoid interactions */
text-align: center;
line-height: 1;
margin: 0.3em auto;
}
.outdisplay {
width: 360px;
height: 200px;
display: inline-table;
outline: double;
text-align: center;
/* width: 10pc; */
}
/*.autoscroll { overflow: auto; } to be deprecated */
/* Display a simple date as a line on a letter */
p.date {
text-align : right
}
/* Input appearance and field size */
.digit2 { /* for a simple date element - was daynum */
width: 3em;
}
.digit4 { /* for elements like years */
width: 5em;
}
.char8 { /* for elements like Julian days or identifier limited to 8 chars */
width : 7em;
}
input[disabled], select[disabled] {
background: white;
color: black;
border-style: none;
}
.bordered {
outline-style: solid;
outline-width: thin;
}
.outbounds, input.outbounds, select.outbounds {
color : antiquewhite;
background : firebrick;
}
button.textline {
background: darkblue;
color: antiquewhite;
}
.seton {
background: darkgreen;
color: antiquewhite;
}
button.symbol {
width: 3em;
}
.attention {
background-color: yellow;
}
/* Elements on dials */
.clockhand {
fill:orange;
stroke:darkgoldenrod;
stroke-width:4px;
stroke-linecap:round;
}
.dragon {
fill:blueviolet;
stroke:darkviolet;
stroke-width:4px;
stroke-linecap:round;
}
.seasonmark {
fill:forestgreen;
stroke:darkgreen;
stroke-width:1px;
stroke-linecap:round;
}
.motto {
font-family:Serif;
font-size:18px;
text-anchor:middle;
}
.clock {
font-family : Sans-Serif;
text-anchor : middle;
}
.ampm {
font-family : Sans-Serif;
font-size : 24px;
}
.yeardisplay {
font-size : 42px;
}
.shaded {
fill : dimgray;
opacity : 0.7
}
.lit {
fill : blanchedalmond
}
/* Responsive design
@media only screen and (max-width: 800px) {
.mtych {
display: flex;
flex-direction: column;
}
}*/