new theme (well the beginnings of such)

4 files changed, 790 insertions, 0 deletions

diff --git a/usr/local/www/themes/metallic/all.css b/usr/local/www/themes/metallic/all.css
new file mode 100644
index 0000000..5d33397
--- /dev/null
+++ b/usr/local/www/themes/metallic/all.css
@@ -0,0 +1,579 @@
+/* Element CSS Definitions */
+html, body, td, th, input, select {
+	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
+	font-size: 0.9em;
+}
+form {
+	margin: 0px;
+}
+a {
+	text-decoration: none;
+}
+form input {
+	font-size: 1.1em;
+}
+
+
+
+/* ID Based CSS Definitions */
+#wrapper {
+	
+}
+
+#header {
+	background: url('images/header.jpg') no-repeat;
+	background-position: 4px;
+	height: 88px;
+	width: 805px;
+	margin-bottom: 5px;
+}
+#header-left {
+	position: relative;
+	/* background: url('images/logo.gif') no-repeat; */
+	background-position: center;
+	height: 65px;
+	width: 145px;
+	left: 10px;
+	float: left;
+}
+#header-right {
+	position: relative;
+	/* background: url('images/header.gif') no-repeat; */
+	height: 70px;
+	color: #fff;
+	left: 0px;
+	margin-left: 165px;
+}
+#header-right .alert {
+	position: relative;
+	/* background: url('images/alert.gif') no-repeat; */
+	background-position: 4px 2px;
+	color: #fff;
+	height: 17px;
+	width: 500px;
+	padding: 4px;
+	padding-left: 27px;
+	float: left;
+}
+#header-right .normal {
+	position: relative;
+}
+#header-right .normal .left {
+	position: relative; 
+	float: left;
+	font-size: 1.3em;
+	font-weight: bold;
+	top: 15px;
+	left: 4px;
+	display: none;
+}
+#header-right .normal .right {
+	position: relative;
+	float: right;
+	top: 22px;
+	padding-right: 4px;
+}
+
+#content {
+	border-top: 1px solid #FFFFFF;
+	margin-top: 0px;
+	padding-top: 0px;
+	width: 800px;
+}
+
+#left {
+	width: 800px;
+	height: 1px;
+}
+#right {
+	width: 770px;
+	margin-top: 0px;
+	margin-left: 5px;
+	margin-right: 5px;
+	margin-bottom: 10px;
+	padding-top: 1px;
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+#footer {
+	top: 8px;
+	padding: 0px;
+	margin: 6px;
+	margin-left: 0px;
+	margin-top: 2px;
+	width: 805px;
+	background-color: #990000;
+	text-align: center;
+	color: #ffffff;
+	font-size: 0.75em;
+	clear: both;
+	margin-bottom: 20px;
+}
+#footer p {
+	padding: 0px;
+	margin: 0px;
+}
+
+/* Style the List */
+#navigation {
+	/* background: url('images/menu.gif') no-repeat; */
+	/* width: 693px; */
+	position: relative;
+	top: -30px;
+	left: 2px;
+	width: 800px;
+	padding: 0px;
+	height: 28px;
+}
+#navigation ul {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	text-align: center;
+}
+#navigation ul#menu {
+	padding-top: 3px;
+	padding-left: 5px;
+}
+
+/* Style the List Elements */
+#navigation ul li {
+	float: left;
+	position: relative;
+	/* width: 7.5em; */
+	width: 8.78em;
+}
+#navigation ul li div {
+	font-size: 1em;
+	font-weight: bold;
+}
+/* Make the List inside the List Elements */
+/* initially hidden with absolute position */
+#navigation ul li ul {
+	display: none;
+	position: absolute; 
+	top: 2em;
+	left: 0px;
+	font-weight: normal;
+	background: transparent bottom left no-repeat; /* This is key to making the menu maintain visibility when not on a link */
+	padding: 0em 0 1em 0;
+}
+/* to override top and left in browsers other than IE */
+/* which will position to the top right of the containing */
+/* li, rather than bottom left */
+#navigation ul li > ul {
+	top: auto;
+	left: auto;
+	left: -1px !important;
+}
+/* Show initial drop down upon mouse over, but do not show */
+/* nested side drop menus within listed elements */
+#navigation ul li:hover ul { 
+	display: block;
+	cursor: hand;
+}
+#navigation ul li:hover {
+	cursor: hand;
+	cursor: pointer;
+}
+#navigation ul li:hover div {
+	text-decoration: underline;
+}
+
+#navigation ul li {
+	background-color: transparent;
+	color: #FFF;
+}
+#navigation ul li ul li {
+	border: 1px solid #505050;
+	background-color: #505050;
+	color: #FFF;
+}
+#navigation ul li ul li a.navlnk:hover {
+	text-decoration: underline;
+}
+#navigation ul li.first {
+	border-right: 0px;
+}
+#navigation ul li.middle {
+	border-right: 0px;
+}
+#navigation ul li.last {
+
+}
+
+#navigation ul li.dropfirst {
+	border-bottom: 0px;
+}
+#navigation ul li.dropmiddle {
+	border-bottom: 0px;
+}
+#navigation ul li.droplast {
+}
+
+
+
+/* Class Based CSS Definitions */
+.pgtitle {
+	font-size: 18px;
+	color: #777777;
+	font-weight: bold;
+}
+.tfrtitle {
+	font-size: 18px;
+	color: #ffffff;
+	font-weight: bold;
+}
+.vncell {
+	background-color: #DDDDDD;
+	padding-right: 20px;
+	padding-left: 8px;
+	border-bottom: 1px solid #999999;
+}
+.formfld {
+
+}
+.formfldalias {
+	background-color: #990000;
+	color: #FFFFFF;
+}
+.formpre {
+	font-family: Courier New, Courier, monospaced;
+	font-size: 10px;
+}
+.formbtn {
+	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
+	font-size: 13px;
+	font-weight: bold;
+}
+.formbtns {
+	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
+	font-size: 10px;
+	font-weight: bold;
+}
+.vvcell {
+	background-color: #FFFFC6;
+}
+.errmsg {
+	font-weight: bold;
+	color: #CC0000;
+}
+.red {
+	color: #CC0000;
+}
+.gray {
+	color: #A0A0A0;
+}
+.vexpl {
+	font-size: 11px;
+}
+.navlnk {
+	color: #FFFFFF;
+	text-decoration: none;
+	font-size: 13px;
+}
+.navlnks {
+	color: #FFFFFF;
+	text-decoration: none;
+	font-size: 11px;
+}
+.tblnk {
+	color: #FFFFFF;
+	text-decoration: none;
+}
+.vncellreq {
+	background-color: #DDDDDD;
+	padding-right: 20px;
+	padding-left: 8px;
+	font-weight: bold;
+	border-bottom: 1px solid #999999;
+}
+.vncellt {
+	background-color: #DDDDDD;
+	padding-right: 20px;
+	padding-left: 8px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+	font-weight: bold;
+	border-bottom: 1px solid #999999;
+}
+.vtable {
+	border-bottom: 1px solid #999999;
+}
+.vnsepcell {
+	background-color: #BBBBBB;
+	padding-right: 20px;
+	padding-left: 8px;
+	font-weight: bold;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+}
+.cpline {
+	font-size: 11px;
+	color: #FFFFFF;
+}
+.hostname {
+	font-size: 11px;
+	color: #FFFFFF;
+}
+.vnsepcellr {
+	background-color: #BBBBBB;
+	padding-right: 20px;
+	padding-left: 8px;
+	font-weight: bold;
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+}
+.listr {
+	background-color: #FFFFFF;
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+	padding-right: 6px;
+	padding-left: 6px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+.listrpad {
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+	padding-right: 16px;
+	padding-left: 10px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+.listn {
+	font-size: 11px;
+	padding-right: 16px;
+	padding-left: 6px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+.listbg {
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+	background-color: #990000;
+	padding-right: 16px;
+	padding-left: 6px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+.listbggrey {
+	border-right: 1px solid #999999;
+        border-bottom: 1px solid #999999;
+        font-size: 11px;
+        background-color: #999999;
+        padding-right: 16px;
+        padding-left: 6px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+}
+.listhdr {
+	background-color: #BBBBBB;
+	padding-right: 16px;
+	padding-left: 6px;
+	font-weight: bold;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.listhdr a {
+	color: #000000;
+}
+.listhdrr {
+	background-color: #BBBBBB;
+	padding-right: 16px;
+	padding-left: 6px;
+	font-weight: bold;
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.listhdrr a {
+	color: #000000;
+}
+.listlr {
+	background-color: #FFFFFF;
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	border-left: 1px solid #999999;
+	font-size: 11px;
+	padding-right: 6px;
+	padding-left: 6px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+.listlrns {
+	background-color: #FFFFFF;
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	border-left: 1px solid #999999;
+	font-size: 11px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+.list {
+	font-size: 11px;
+	padding-left: 6px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+.listt {
+	font-size: 11px;
+	padding-top: 5px;
+}
+.listhdrrns {
+	background-color: #BBBBBB;
+	padding-left: 6px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-right: 6px;
+	font-weight: bold;
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+}
+.listbgns {
+	border-right: 1px solid #999999;
+	border-bottom: 1px solid #999999;
+	font-size: 11px;
+	background-color: #D9DEE8;
+	padding-left: 6px;
+	padding-right: 4px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+.listtopic {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #990000;
+	padding-right: 16px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.optsect_t {
+	border-right: 1px solid #999999;
+	background-color: #990000;
+	padding-right: 6px;
+	padding-left: 6px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+.optsect_s {
+	font-size: 11px;
+	color: #FFFFFF;
+	font-weight: bold;
+}
+.tabnavtbl {
+}
+
+
+/* MISC CSS Definitions */
+ul#tabnav {
+	font-size: 11px;
+	font-weight: bold;
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+ul#tabnav li.tabinact1 {
+	float: left;
+	background-color: #777777;
+	color: #FFFFFF;
+	padding: 0;
+	white-space: nowrap;
+}
+ul#tabnav li.tabinact {
+	float: left;
+	border-left: 1px solid #999999;
+	background-color: #777777;
+	color: #FFFFFF;
+	padding: 0;
+	white-space: nowrap;
+}
+ul#tabnav li.tabinact a {
+	float: left;
+	display: block;
+	text-decoration: none;
+	padding: 5px 8px 5px 8px;
+	color: #FFFFFF;
+}
+ul#tabnav li.tabinact1 a {
+	float: left;
+	display: block;
+	text-decoration: none;
+	padding: 5px 8px 5px 8px;
+	color: #FFFFFF;
+}
+ul#tabnav li.tabact {
+	float: left;
+	background-color: #EEEEEE;
+	color: #000000;
+	padding: 5px 8px 5px 8px;
+	white-space: nowrap;
+}
+.tabcont {
+	background-color: #EEEEEE;
+	padding-right: 12px;
+	padding-left: 12px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+}
+.tabact {
+	float: left;
+	background-color: #EEEEEE;
+	color: #000000;
+	padding: 5px 8px 5px 8px;
+	white-space: nowrap;
+}
+.tabinact {
+	font-weight: bold;
+	float: left;
+	border-left: 1px solid #999999;
+	background-color: #777777;
+	color: #FFFFFF;
+	padding: 0;
+	white-space: nowrap;
+}
+.menu {
+	background-color: #000000;
+	white-space: nowrap;
+	padding: 0px 5px 0px 5px;
+	width: 100%;
+	vertical-align: top;
+}
+
+
+
+/* Nifty Corners Crap */
+.rtop,.artop{display:block}
+.rtop *,.artop *{display:block;height:1px;overflow:hidden;font-size:1px}
+.artop *{border-style: solid;border-width:0 1px}
+.r1,.rl1,.re1,.rel1{margin-left:5px}
+.r1,.rr1,.re1,.rer1{margin-right:5px}
+.r2,.rl2,.re2,.rel2,.ra1,.ral1{margin-left:3px}
+.r2,.rr2,.re2,.rer2,.ra1,.rar1{margin-right:3px}
+.r3,.rl3,.re3,.rel3,.ra2,.ral2,.rs1,.rsl1,.res1,.resl1{margin-left:2px}
+.r3,.rr3,.re3,.rer3,.ra2,.rar2,.rs1,.rsr1,.res1,.resr1{margin-right:2px}
+.r4,.rl4,.rs2,.rsl2,.re4,.rel4,.ra3,.ral3,.ras1,.rasl1,.res2,.resl2{margin-left:1px}
+.r4,.rr4,.rs2,.rsr2,.re4,.rer4,.ra3,.rar3,.ras1,.rasr1,.res2,.resr2{margin-right:1px}
+.rx1,.rxl1{border-left-width:5px}
+.rx1,.rxr1{border-right-width:5px}
+.rx2,.rxl2{border-left-width:3px}
+.rx2,.rxr2{border-right-width:3px}
+.re2,.rel2,.ra1,.ral1,.rx3,.rxl3,.rxs1,.rxsl1{border-left-width:2px}
+.re2,.rer2,.ra1,.rar1,.rx3,.rxr3,.rxs1,.rxsr1{border-right-width:2px}
+.rxl1,.rxl2,.rxl3,.rxl4,.rxsl1,.rxsl2,.ral1,.ral2,.ral3,.ral4,.rasl1,.rasl2{border-right-width:0}
+.rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
+.r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
+.rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}
diff --git a/usr/local/www/themes/metallic/bottom-loader.js b/usr/local/www/themes/metallic/bottom-loader.js
new file mode 100644
index 0000000..72a3b09
--- /dev/null
+++ b/usr/local/www/themes/metallic/bottom-loader.js
@@ -0,0 +1,11 @@
+<!-- 
+
+NiftyCheck();
+Rounded("div#niftyMenu","top bottom","#FFFFFF","#000000","smooth");
+Rounded("div#mainarea","bl br tr","#FFF","#eeeeee","smooth");
+Rounded("div#boxarea","bl br tl tr","#FFF","#eeeeee","smooth");
+Rounded("tr#fend","bl br tl tr","#FFF","#990000","smooth");
+Rounded("div#topbox","all","#FFF","#990000","smooth");
+Rounded("div#footer","bl br tl tr","#FFF","#990000","smooth");
+
+//-->
diff --git a/usr/local/www/themes/metallic/javascript/niftyjsCode.js b/usr/local/www/themes/metallic/javascript/niftyjsCode.js
new file mode 100644
index 0000000..8093a48
--- /dev/null
+++ b/usr/local/www/themes/metallic/javascript/niftyjsCode.js
@@ -0,0 +1,174 @@
+function NiftyCheck(){
+if(!document.getElementById || !document.createElement)
+    return(false);
+isXHTML=/html\:/.test(document.getElementsByTagName('body')[0].nodeName);
+if(Array.prototype.push==null){Array.prototype.push=function(){
+      this[this.length]=arguments[0]; return(this.length);}}
+return(true);
+}
+
+function Rounded(selector,wich,bk,color,opt){
+var i,prefixt,prefixb,cn="r",ecolor="",edges=false,eclass="",b=false,t=false;
+
+if(color=="transparent"){
+    cn=cn+"x";
+    ecolor=bk;
+    bk="transparent";
+    }
+else if(opt && opt.indexOf("border")>=0){
+    var optar=opt.split(" ");
+    for(i=0;i<optar.length;i++)
+        if(optar[i].indexOf("#")>=0) ecolor=optar[i];
+    if(ecolor=="") ecolor="#666";
+    cn+="e";
+    edges=true;
+    }
+else if(opt && opt.indexOf("smooth")>=0){
+    cn+="a";
+    ecolor=Mix(bk,color);
+    }
+if(opt && opt.indexOf("small")>=0) cn+="s";
+prefixt=cn;
+prefixb=cn;
+if(wich.indexOf("all")>=0){t=true;b=true}
+else if(wich.indexOf("top")>=0) t="true";
+else if(wich.indexOf("tl")>=0){
+    t="true";
+    if(wich.indexOf("tr")<0) prefixt+="l";
+    }
+else if(wich.indexOf("tr")>=0){
+    t="true";
+    prefixt+="r";
+    }
+if(wich.indexOf("bottom")>=0) b=true;
+else if(wich.indexOf("bl")>=0){
+    b="true";
+    if(wich.indexOf("br")<0) prefixb+="l";
+    }
+else if(wich.indexOf("br")>=0){
+    b="true";
+    prefixb+="r";
+    }
+var v=getElementsBySelector(selector);
+var l=v.length;
+for(i=0;i<l;i++){
+    if(edges) AddBorder(v[i],ecolor);
+    if(t) AddTop(v[i],bk,color,ecolor,prefixt);
+    if(b) AddBottom(v[i],bk,color,ecolor,prefixb);
+    }
+}
+
+function AddBorder(el,bc){
+var i;
+if(!el.passed){
+    if(el.childNodes.length==1 && el.childNodes[0].nodeType==3){
+        var t=el.firstChild.nodeValue;
+        el.removeChild(el.lastChild);
+        var d=CreateEl("span");
+        d.style.display="block";
+        d.appendChild(document.createTextNode(t));
+        el.appendChild(d);
+        }
+    for(i=0;i<el.childNodes.length;i++){
+        if(el.childNodes[i].nodeType==1){
+            el.childNodes[i].style.borderLeft="1px solid "+bc;
+            el.childNodes[i].style.borderRight="1px solid "+bc;
+            }
+        }
+    }
+el.passed=true;
+}
+    
+function AddTop(el,bk,color,bc,cn){
+var i,lim=4,d=CreateEl("b");
+
+if(cn.indexOf("s")>=0) lim=2;
+if(bc) d.className="artop";
+else d.className="rtop";
+d.style.backgroundColor=bk;
+for(i=1;i<=lim;i++){
+    var x=CreateEl("b");
+    x.className=cn + i;
+    x.style.backgroundColor=color;
+    if(bc) x.style.borderColor=bc;
+    d.appendChild(x);
+    }
+el.style.paddingTop=0;
+el.insertBefore(d,el.firstChild);
+}
+
+function AddBottom(el,bk,color,bc,cn){
+var i,lim=4,d=CreateEl("b");
+
+if(cn.indexOf("s")>=0) lim=2;
+if(bc) d.className="artop";
+else d.className="rtop";
+d.style.backgroundColor=bk;
+for(i=lim;i>0;i--){
+    var x=CreateEl("b");
+    x.className=cn + i;
+    x.style.backgroundColor=color;
+    if(bc) x.style.borderColor=bc;
+    d.appendChild(x);
+    }
+el.style.paddingBottom=0;
+el.appendChild(d);
+}
+
+function CreateEl(x){
+if(isXHTML) return(document.createElementNS('http://www.w3.org/1999/xhtml',x));
+else return(document.createElement(x));
+}
+
+function getElementsBySelector(selector){
+var i,selid="",selclass="",tag=selector,f,s=[],objlist=[];
+
+if(selector.indexOf(" ")>0){  //descendant selector like "tag#id tag"
+    s=selector.split(" ");
+    var fs=s[0].split("#");
+    if(fs.length==1) return(objlist);
+    f=document.getElementById(fs[1]);
+    if(f) return(f.getElementsByTagName(s[1]));
+    return(objlist);
+    }
+if(selector.indexOf("#")>0){ //id selector like "tag#id"
+    s=selector.split("#");
+    tag=s[0];
+    selid=s[1];
+    }
+if(selid!=""){
+    f=document.getElementById(selid);
+    if(f) objlist.push(f);
+    return(objlist);
+    }
+if(selector.indexOf(".")>0){  //class selector like "tag.class"
+    s=selector.split(".");
+    tag=s[0];
+    selclass=s[1];
+    }
+var v=document.getElementsByTagName(tag);  // tag selector like "tag"
+if(selclass=="")
+    return(v);
+for(i=0;i<v.length;i++){
+    if(v[i].className.indexOf(selclass)>=0){
+        objlist.push(v[i]);
+        }
+    }
+return(objlist);
+}
+
+function Mix(c1,c2){
+var i,step1,step2,x,y,r=new Array(3);
+if(c1.length==4)step1=1;
+else step1=2;
+if(c2.length==4) step2=1;
+else step2=2;
+for(i=0;i<3;i++){
+    x=parseInt(c1.substr(1+step1*i,step1),16);
+    if(step1==1) x=16*x+x;
+    y=parseInt(c2.substr(1+step2*i,step2),16);
+    if(step2==1) y=16*y+y;
+    r[i]=Math.floor((x*50+y*50)/100);
+    }
+return("#"+r[0].toString(16)+r[1].toString(16)+r[2].toString(16));
+}
\ No newline at end of file
diff --git a/usr/local/www/themes/metallic/loader.js b/usr/local/www/themes/metallic/loader.js
new file mode 100644
index 0000000..28cad95
--- /dev/null
+++ b/usr/local/www/themes/metallic/loader.js
@@ -0,0 +1,26 @@
+<!-- 
+var browser     = '';
+var version     = '';
+var entrance    = '';
+var cond        = '';
+
+// BROWSER?
+if (browser == '') {
+	if (navigator.appName.indexOf('Microsoft') != -1)
+		browser = 'IE'
+	else if (navigator.appName.indexOf('Netscape') != -1)
+		browser = 'Netscape'
+	else
+		browser = 'IE';
+}
+if (version == '') {
+	version= navigator.appVersion;
+	paren = version.indexOf('(');
+	whole_version = navigator.appVersion.substring(0,paren-1);
+	version = parseInt(whole_version);
+}
+
+
+document.write('<script type="text/javascript" src="/themes/pfsense-dropdown/javascript/niftyjsCode.js"></script>'); 
+
+// -->
\ No newline at end of file