dialswthtpanels.css

/* 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 {
	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 {
	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;
	}
}*/