Some more beauty fixes for dark-clouds. :)

git-svn-id: https://znc.svn.sourceforge.net/svnroot/znc/trunk@1884 726aef4b-f618-498e-8847-2d620e286838

modules/www/notes/index.tmpl

@@ -1,22 +1,28 @@
 <? INC Header.tmpl ?>
 
-<form method="POST" action="/mods/notes/addnote">
-<table>
-	<tr>
-		<td>Key:</td>
-		<td>Note:</td>
-		<td>&nbsp;</td>
-	</tr>
-	<tr>
-		<td><input type="text" name="key" size="8"></td>
-		<td><input type="text" name="note" size="32"></td>
-		<td><input type="submit" name="add" value="Add Note"></td>
-	</tr>
-</table>
+<form method="post" action="/mods/notes/addnote">
+	<div class="section">
+		<h3>Add A Note</h3>
+		<div class="sectionbg">
+			<div class="sectionbody">
+				<div class="subsection third">
+					<div class="inputlabel">Key:</div>
+					<div><input type="text" name="key" size="8" /></div>
+				</div>
+				<div class="subsection full">
+					<div class="inputlabel">Note:</div>
+					<div><input type="text" name="note" size="40" /></div>
+				</div>
+				<div class="subsection submitline">
+					<input type="submit" name="add" value="Add Note" />
+				</div>
+			</div>
+		</div>
+	</div>
 </form>
 
 <? IF !NotesLoop ?>
-You have no notes to display
+<p>You have no notes to display.</p>
 <? ELSE ?>
 
 <table class="data">
@@ -29,8 +35,8 @@ You have no notes to display
 	</thead>
 	<tbody>
 		<? LOOP NotesLoop ?>
-		<tr class="<? IF __EVEN__ ?>altrow<? ENDIF ?>">
-			<td><a href="/mods/notes/delnote?key=<? VAR Key ESC=URL,HTML ?>"><img src="/modfiles/<? VAR ModName TOP ?>/trash.gif" alt="[del]"></a>&nbsp;&nbsp;&nbsp;</td>
+		<tr class="<? IF __EVEN__ ?>evenrow<? ELSE ?>oddrow<? ENDIF ?>">
+			<td><a href="/mods/notes/delnote?key=<? VAR Key ESC=URL,HTML ?>"><img src="/modfiles/<? VAR ModName TOP ?>/trash.gif" alt="[del]" /></a></td>
 			<td><? VAR Key ?></td>
 			<td><? VAR Note ?></td>
 		</tr>

webskins/dark-clouds/pub/dark-clouds.css

@@ -19,9 +19,19 @@ img {
 
 table {
 	font-size: 12px;
-	width: 100%;
-	margin-bottom: 15px;
 	border-collapse: collapse;
+	width: 100%;
+}
+
+.section table {
+	/* we can't selectively remove the border from left,right and bottom
+		so we make it look consistent at least */
+	border-top: 2px solid black;
+}
+
+.subsection table {
+	margin-bottom: 15px;
+	border-top: 1px solid black;
 }
 
 table thead td {
@@ -36,6 +46,10 @@ table td {
 	border: 1px solid #000;
 }
 
+td.mod_name {
+	white-space: nowrap;
+}
+
 /* !TABLES */
 
 /* SECTIONS */
@@ -43,7 +57,7 @@ table td {
 .section {
 	border: 1px solid #000;
 	padding: 0;
-	margin-bottom: 1em;
+	margin: 0 0 2em 0;
 }
 
 h3 {
@@ -76,10 +90,23 @@ h3 {
 	vertical-align: top;
 }
 
-.subsection .info {
+.section .info {
 	display: block;
+	padding: 5px 8px;
+	font-style: italic;
+	background-color: #777;
+	border-top: 1px solid #000;
+	color: #000;
+}
+
+.subsection .info {
 	margin: 2px 0 2px 0;
+	padding: 0;
+	font-style: normal;
 	font-size: 80%;
+	background: transparent;
+	border: none;
+	color: #fff;
 }
 
 /* !SECTIONS */
@@ -127,6 +154,22 @@ input.third, textarea.third,
 	width: 100px;
 }
 
+.checkboxandlabel {
+	white-space: nowrap;
+}
+
+.section .lotsofcheckboxes {
+	margin: 0.5em 5px 1em 10px;
+	overflow: hidden;
+}
+
+.lotsofcheckboxes .checkboxandlabel {
+	display: block;
+	float: left;
+	width: 200px;
+	margin-top: 0.5em;
+}
+
 /* !FORMS */
 
 .nowrap {
@@ -156,7 +199,7 @@ table thead td a:hover {
 	text-decoration: none;
 }
 
-#menu a, #logoutbox a, #footerbar a {
+#menu a, #logoutbox a {
 	color: #000;
 }
 
@@ -189,8 +232,8 @@ table thead td a:hover {
 
 #infobar {
 	width: 800px;
-	height: 20px;
-	line-height: 20px;
+	height: 24px;
+	line-height: 24px;
 	border-bottom: 1px solid #000;
 	border-right: 1px solid #000;
 }
@@ -205,7 +248,7 @@ table thead td a:hover {
 	text-align: right;
 	padding-right: 5px;
 	border-left: 1px solid #000000;
-	width: 250px;
+	width: 270px;
 	float: right;
 }
 
@@ -219,7 +262,8 @@ table thead td a:hover {
 }
 
 #infobar .loginbox input.submit {
-	width: 40px;
+	width: 50px;
+	padding: 1px;
 }
 
 #infobar_ident .user_name {
@@ -273,7 +317,7 @@ table thead td a:hover {
 #menu li.parent span.title {
 	display: block;
 	text-align: left;
-	padding-left: 3px;
+	padding-left: 10px;
 	background-color: #333;
 	font-weight: bold;
 }
@@ -294,7 +338,8 @@ table thead td a:hover {
 	border: none;
 }
 
-#menu .modtitle.active {
+#menu .modtitle.active,
+#menu .topitem.active {
 	background-color: #D49712;
 	font-weight: bold;
 }
@@ -326,7 +371,12 @@ table thead td a:hover {
 	padding-right: 5px;
 }
 
+#footerbar a {
+	color: #fff;
+}
+
 #breadcrumb {
-	padding: 5px 10px;
+	margin: 5px 10px;
+	padding: 5px 1px;
 	border-bottom: 1px solid #000;
 }

webskins/forest/pub/forest.css

@@ -10,7 +10,8 @@ table thead td {
 	background-image: url('forest-header.png');
 }
 
-#menu .modtitle.active {
+#menu .modtitle.active,
+#menu .topitem.active {
 	background-color: #049712;
 	font-weight: bold;
 }