changeset 49:16aea8e5cb71

Improved CSS, added a third stylesheet option.
author Matti Hamalainen <ccr@tnsp.org>
date Wed, 17 Oct 2012 15:35:16 +0300
parents d41b51cd4ae5
children 2be3eec4c7a5
files index.php luk1.css luk3.css
diffstat 3 files changed, 211 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/index.php	Wed Oct 17 14:02:24 2012 +0300
+++ b/index.php	Wed Oct 17 15:35:16 2012 +0300
@@ -13,7 +13,7 @@
 $dayNames = array("Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai");
 
 $pageCSSData = array("cookie" => "lukcss", "prefix" => $baseURI."luk");
-$altCSS = array("blue" => "1", "old" => "2");
+$pageCSSAlts = array("blue" => "1", "old" => "2", "purple" => "3");
 
 $hourStamps = array(
   array( 8, 15),
@@ -432,7 +432,7 @@
 </div>
 <div id=\"csssel\">
 Style: ";
-foreach ($altCSS as $name => $id)
+foreach ($pageCSSAlts as $name => $id)
   echo "<a href=\"?css=".$id."\">".$name."</a>";
 echo "
 </div>
--- a/luk1.css	Wed Oct 17 14:02:24 2012 +0300
+++ b/luk1.css	Wed Oct 17 15:35:16 2012 +0300
@@ -91,7 +91,6 @@
 td {
 	padding: 4px;
 	margin: 2px;
-	background: rgba(0,84,103,0.7);
 	color: #ccc;
 	-moz-border-radius: 5pt;
 	border-radius: 5pt;
@@ -129,11 +128,12 @@
 	background: rgb(63,80,63);
 }
 
-td.clnothing {
+td.clnothing, td.clnothing * td {
 	background: rgb(0,84,103);
 }
 
-td.clnormal {
+td.clnormal, td.clnormal * td {
+	background: rgba(0,84,103,0.7);
 }
 
 div.nhours {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/luk3.css	Wed Oct 17 15:35:16 2012 +0300
@@ -0,0 +1,206 @@
+body {
+	margin: 1em;
+	background: black;
+	color: white;
+
+	font-family: Verdana, Arial, helvetica, sans-serif;
+	font-size: 10pt;
+}
+
+a, a:visited, a:active {
+	text-decoration: underline;
+	color: white;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #555;
+}
+
+h1, h2, h3 {
+	font-family: Arial, sans-serif;
+//	font-family: impact;
+	font-weight: normal;
+	color: white;
+	background: rgb(100,50,80);
+	padding: 5pt;
+	padding-bottom: 8px;
+	text-shadow: 2px 2px 2px #000;
+	-moz-border-radius: 8pt;
+	border-radius: 8pt;
+	box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
+}
+
+#csssel {
+	position: absolute;
+	right: 1em;
+	top: 1em;
+	font-size: 5pt;
+	background: rgb(100,50,80);
+	padding: 5pt;
+	-moz-border-radius: 5pt;
+	border-radius: 5pt;
+	box-shadow: 0px 0px 6px rgba(200,0,100,0.7);
+}
+
+#csssel a {
+	padding: 2pt;
+	color: #ccc;
+	text-decoration: none;
+}
+
+#csssel a:hover {
+	text-decoration: underline;
+}
+
+#contents {
+	z-index: 5;
+	position: absolute;
+	right: 0.5em;
+	left: 0.5em;
+	background: rgba(100,50,80,0.6);
+	padding: 10pt;
+	-moz-border-radius: 10pt;
+	border-radius: 10pt;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
+}
+
+
+table {
+	border: 0px;
+	padding: 0px;
+	margin: 0px;
+}
+
+tr {
+	border: 0px;
+	padding: 0px;
+	margin: 0px;
+}
+
+table.timetable th {
+	padding: 2px;
+	margin: 2px;
+	background: #444;
+	text-align: center;
+
+	background: rgba(100,50,80,0.6);
+	color: #ccc;
+	-moz-border-radius: 5pt;
+	border-radius: 5pt;
+}
+
+td {
+	padding: 4px;
+	margin: 2px;
+	color: #ccc;
+	-moz-border-radius: 5pt;
+	border-radius: 5pt;
+}
+
+table.timetable {
+	font-size: 10pt;
+}
+
+table.timetable td > a, table.timetable td > a:visited, table.timetable td > a:active {
+	text-decoration: none;
+	text-shadow: 2px 2px 2px #000;
+	color: #fff;
+}
+
+table.timetable td > a:hover {
+	color: yellow;
+}
+
+
+th.hours {
+	white-space: nowrap;
+}
+
+table.timetable * table {
+	width: 100%;
+	height: 100%;
+}
+
+table.timetable tr:hover th {
+	color: red;
+}
+
+td.clgrouped, td.clgrouped * td {
+	background: rgb(60,10,30);
+}
+
+td.clnothing, td.clnothing * td {
+}
+
+td.clnormal, td.clnormal * td {
+	background: rgba(90,40,60,0.7);
+}
+
+div.nhours {
+	text-align: right;
+}
+
+div.nhours span {
+	background: black;
+	padding: 2pt;
+	border: 1px solid gray;
+}
+
+#footer {
+	padding-top: 5pt;
+	font-size: 5pt;
+}
+
+#controls {
+	padding: 0px;
+	margin: 0px;
+}
+
+#controls table * {
+	padding: 0px;
+	margin: 0px;
+}
+
+#controls a {
+	padding: 5pt;
+	margin-bottom: 30pt;
+//	border: 1px solid rgba(10,114,133,0.3);
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+	text-decoration: none;
+	color: white;
+	background: rgba(255,255,255,0.2);
+	box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
+}
+
+#controls a:hover {
+	color: white;
+	background: rgba(255,255,255,0.5);
+}
+
+#controls select {
+	background: white;
+	border: 1px solid black;
+
+	padding: 5pt;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+	box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
+}
+
+#controls input.submit {
+	color: white;
+	background: rgba(200,255,200,0.2);
+	border: 1px solid rgba(255,255,255,0.3);
+
+	padding: 5pt;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+	box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
+}
+
+#controls input.submit:hover {
+	color: white;
+	background: rgba(200,255,200,0.5);
+}