Update redirector.css

Improve usability, improve accessibility for the visually disabled, comment code, update to newer standards.

1 files changed, 59 insertions, 65 deletions

diff --git a/chrome/css/redirector.css b/chrome/css/redirector.css
index 47b2028..2c7fb9d 100644
--- a/chrome/css/redirector.css
+++ b/chrome/css/redirector.css
@@ -1,74 +1,68 @@
-body { 
-	font-family: Tahoma, Arial, sans-serif; 
-	font-size:10pt; 
-	min-height:100%;
-	background:-moz-linear-gradient(top, #AFCFFE,#fff);
-	margin:0; padding:0;
-}
-html {
-	height:100%;
-	margin:0; 
-	padding:0;
-}
-h1 { text-align:center; color:#555; text-shadow:0px 0px 15px white; font-size:34pt; padding:0px; margin:20px 0px 0px 0px; letter-spacing:2px; }
-label { display:table-cell; }
-input { display:table-cell; }
-li { margin:0; padding:5px; border-top: dotted 1px grey;}
-li:first-child { border-top:none;} 
-#actions { width:600px; margin:10px auto; text-align:center; }
-#redirect-list { 
-	-moz-user-select: -moz-none;
+/* Redirector CSS */
 
-	border:solid 1px grey; 
-	margin:auto; 
-	padding:0px;
-	width: 700px; 
-	list-style-type:none; 
-	list-style-position:outside;
-	border-radius:3px; 
-	box-shadow: 0px 0px 2px grey;
-	text-shadow: 1px 1px 1px white;
-}
-#config { 
-	display:none; 
-	position:fixed; 
-	margin:auto;
-	width:300px;
-}
+/* entire page */
+html { font-family: "Segoe UI"; }
 
-h2 { text-align:center; margin-top:0px; }
-button { border:solid 1px grey; border-radius:4px; background:-moz-linear-gradient(top, #ccc, #fff); cursor:pointer;}
-h5 { text-align:center; margin:0px; padding-left:130px; }
-.pattern, .redirectTo { color:blue; font-style:italic;}
-.exampleUrl, .redirectResult { color:blue; }
-#redirect-list li:nth-child(odd) { background:#e5e5e5; }
-#redirect-list li:nth-child(even) { background-color:#fff; }
+/* main header */
+h1 { margin: 0px; text-align: center; font-size: 280%; line-height: 90%; font-style: italic; }
 
-#redirect-form div {  margin-top:5px; display:table-row; }
-#redirect-form div label{ text-align:right; padding:6px;}
-#redirect-form div input[type='text']{  margin-top:7px; width:300px; display:inline-block; }
+/* sub-header */
+h5 { margin: 0px; padding-left: 14em; text-align: center; }
 
+/* action buttons below header */
+#actions { margin-top: 12px; margin-bottom: 10px; text-align: center; }
 
-#config label{ display:inline; }
-#config input { margin-top:10px; }
-.button-row { text-align:center; display:block !important;}
+/* table (list) of redirect rules */
+#redirect-list { 
+  width: 96%; 
+  box-shadow: 0px 0px 2px gray;
+  border: solid 2px gray; 
+  margin: auto; 
+  padding: 0px;
+  list-style-type: none; 
+  list-style-position: outside;
+  -moz-user-select: -moz-none;
+}
+
+/* individual cells within table of rules */
+#redirect-list > li { margin: 0px; border-top: dotted 1px gray; padding: 8px 2px 12px 10px; font-size: 80%; }
+#redirect-list > li:first-child { border-top: none; }
+#redirect-list > li:nth-child(odd) { background-color: #f0f0f0; }
+
+/* rule within each cell */
+.disabled { font-weight: bold; color: red; }
+.description { font-weight: bold; }
+.patternLabel { display: inline-block; width: 4em; margin-left: 5px; margin-right: 4px; text-align: right; }
+.pattern, .redirectTo { color: blue; }
+.editdeleteRow { margin-top: 8px; }
+/* turn Edit and Delete functions into buttons, remove underlines and text shadows, apply useful colors */
+.edit, .delete { -moz-appearance: button; padding-left: 4px !important; padding-right: 4px !important;
+   text-decoration: none !important; }
+.edit { color: green !important; }
+.delete { margin-left: 6px; color: rgb(180,80,25) !important; }
 
+/* all dialog boxes */
 .dialog {
-	background:-moz-linear-gradient(top,#fff, #AFCFFE);
-	border-radius:8px;
-	display:none; 
-	position:fixed; 
-	margin:0 auto; 
-	padding:10px;
-	box-shadow: 0px 0px 4px black;
+  display: none; 
+  position: fixed; 
+  box-shadow: 0px 0px 4px black;
+  background: linear-gradient(to bottom, #fff, #afcffe);
+  border-radius: 8px;
+  margin: 0px auto; 
+  padding: 10px;
 }
+label, input { display: table-cell; }
+.button-row { text-align: center; display: block !important; }
+button { cursor: pointer; }
 
-#redirect-form {
-	background:-moz-linear-gradient(top,#fff, #AFCFFE);
-	border-radius:8px;
-	display:none; 
-	position:fixed; 
-	margin:0 auto; 
-	padding:10px;
-	box-shadow: 0px 0px 4px black;
-}
+/* New (and Edit) Redirect dialog box */
+#redirect-form > div { margin-top: 3px; display: table-row; }
+#redirect-form > div > label { text-align: right; padding: 6px; }
+#redirect-form > div > input[type='text'] { display: inline-block; width: 46em; margin-top: 7px; }
+
+/* Configuration dialog box */
+#config { padding-right: 18px; }
+h2 { text-align: center; margin-top: 0px; margin-bottom: 9px; }
+#config > .button-row { margin-top: 18px; }
+#config > label { display: inline; }
+#config > input { margin-top: 10px; }