Added RCUE sample files.

New CSS, font, and image files have been added from RCUE examples.

Ticket #654

22 files changed, 572 insertions, 6 deletions

diff --git a/base/server/share/webapps/pki/css/pki-base.css b/base/server/share/webapps/pki/css/pki-base.css
new file mode 100644
index 000000000..7c0791d5b
--- /dev/null
+++ b/base/server/share/webapps/pki/css/pki-base.css
@@ -0,0 +1,98 @@
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: normal;
+  src: url("/pki/font/OpenSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: bold;
+  src: url("/pki/font/OpenSans-Bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: normal;
+  src: url("/pki/font/OpenSans-Italic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: bold;
+  src: url("/pki/font/OpenSans-BoldItalic.ttf") format("truetype");
+}
+
+
+
+* {
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+html, body {
+  min-height: 800px;
+  min-width: 850px;
+  font-size: 13.5px;
+  height: 100%;
+  color: #4d5258;
+}
+
+small {
+  font-size: 11.5px;
+}
+
+
+/* Tabbed Headers TODO: Bundle Open Sans */
+
+h1 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 30px;
+}
+
+h2 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 13px;
+}
+
+
+/* Regular Headers */
+
+h3 {
+  font-family: "Open Sans", sans-serif;
+  font-weight: lighter;
+  margin: 4px;
+  color: #4d5258;
+  font-size: 27.5px;
+}
+
+h4 {
+  font-family: "Open Sans", sans-serif;
+}
+
+
+/* Links */
+
+a {
+  color: #0099d3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+
+/* Focus */
+
+input, textarea {
+  outline: none;
+}
diff --git a/base/server/share/webapps/pki/css/pki-dialogs.css b/base/server/share/webapps/pki/css/pki-dialogs.css
new file mode 100644
index 000000000..75e4cfe3e
--- /dev/null
+++ b/base/server/share/webapps/pki/css/pki-dialogs.css
@@ -0,0 +1,80 @@
+#dialog:target {
+  display: block;
+}
+
+#dialog {
+  display: none;
+}
+
+.rcue-dialog-background {
+  background-color: rgba(0,0,0, 0.39);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.rcue-dialog {
+  font-size: 12px;
+  padding: 16px 22px;
+  width: 560px;
+  height: 420px;
+  border: 1px solid #6e6d6d;
+  box-shadow: rgba(0,0,0, 0.39) 0 0 2px;
+  background-color: #fff;
+  position: absolute;
+  top:0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.rcue-dialog header {
+  margin-bottom: 48px;
+}
+
+.rcue-dialog header .rcue-button-close {
+  background-image: url("/pki/images/dialog-button-close.png");
+  width: 25px;
+  height: 25px;
+  background-repeat: no-repeat;
+  background-position: center;
+  float: right;
+  display: inline-block;
+  margin-top: -4px;
+  margin-right: -6px;
+}
+
+.rcue-dialog header h1 {
+  float: left;
+}
+
+.rcue-dialog header a {
+  float: right;
+}
+
+.rcue-dialog fieldset legend {
+  font-size: 13px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.rcue-dialog fieldset label {
+  min-width: 100px;
+  display: inline-block;
+}
+
+.rcue-dialog footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 16px;
+  padding-left: 22px;
+  width: 100%;
+}
+
+.rcue-dialog footer button {
+  float: right;
+}
diff --git a/base/server/share/webapps/pki/css/pki-forms.css b/base/server/share/webapps/pki/css/pki-forms.css
new file mode 100644
index 000000000..d6b5ada8a
--- /dev/null
+++ b/base/server/share/webapps/pki/css/pki-forms.css
@@ -0,0 +1,240 @@
+fieldset {
+  border: none;
+}
+
+/* Text Field */
+
+input[type="text"],
+input[type="password"] {
+  margin: 4px;
+  color: #4d5258;
+  padding: 3px 9px;
+  min-width: 200px;
+  height: 26px;
+  border: 1px #b6b6b6 solid;
+  border-radius: 2px;
+  background-image: url("/pki/images/input-background.png");
+  background-position: top left;
+  background-repeat: repeat-x;
+}
+
+input[type="text"]:enabled:hover,
+input[type="password"]:enabled:hover {
+  border-color: #62afdb;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+  border-color: #62afdb;
+  box-shadow: #62afdb 0 0 3.5px;
+}
+
+input[type="text"]:disabled,
+input[type="password"]:disabled {
+  background-image: none;
+  background-color: #f8f8f8;
+}
+
+::-webkit-input-placeholder {
+   font-style: italic;
+   color: #999;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+   font-style: italic;
+   color: #999;
+}
+
+::-moz-placeholder {  /* Firefox 19+ */
+   font-style: italic;
+   color: #999;
+}
+
+:-ms-input-placeholder {
+   font-style: italic;
+   color: #999;
+}
+
+
+/* Text Field Error State */
+
+input[type="text"].error,
+input[type="password"].error {
+  border-color: #e30000 !important;
+}
+
+
+input[type="text"].error:focus,
+input[type="password"].error:focus {
+  box-shadow: #f18080 0 0 3.5px;
+}
+
+
+/* Default Button */
+
+button + button {
+  margin-left: 0;
+}
+
+button {
+  border-color: #21799e;
+  background-image: linear-gradient(top, #fafafa 0%, #ededed 100%);
+  background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%);
+  background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%);
+  background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%);
+  background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%);
+  background-image: -webkit-gradient(
+	  linear,
+	  left top,
+	  left bottom,
+	  color-stop(0.0, #fafafa),
+	  color-stop(1,0, #ededed)
+  );
+  color: #fff;
+  padding: 4px 14px;
+  border: 1px #bbb solid;
+  border-radius: 2px;
+  color: #4d5258;
+  font-weight: bold;
+  min-width: 45px;
+  font-size: 12px;
+  letter-spacing: 0.4px;
+  cursor: pointer;
+  margin: 4px;
+}
+
+button:hover,
+button:focus {
+  background-image: none !important;
+  background-color: #eee;
+}
+
+button:disabled {
+  border-color: #cdcdcd !important;
+  background-color: #fff !important;
+  background-image: none !important;
+  color: #bbb !important;
+  font-weight: normal;
+  cursor: default;
+}
+
+button:enabled:active {
+  background-color: #eee;
+  box-shadow: inset 0 0 5px 3px #c6c6c6;
+}
+
+
+/* Primary Button */
+
+button.primary {
+  border-color: #21799e;
+  background-image: linear-gradient(top, #00A9EC 0%, #009BD3 100%);
+  background-image: -o-linear-gradient(top, #00A9EC 0%, #009BD3 100%);
+  background-image: -moz-linear-gradient(top, #00A9EC 0%, #009BD3 100%);
+  background-image: -webkit-linear-gradient(top, #00A9EC 0%, #009BD3 100%);
+  background-image: -ms-linear-gradient(top, #00A9EC 0%, #009BD3 100%);
+  background-image: -webkit-gradient(
+	  linear,
+	  left top,
+	  left bottom,
+	  color-stop(0.0, #00A9EC),
+	  color-stop(1,0, #009BD3)
+  );
+  color: #fff;
+}
+
+button.primary:hover,
+button.primary:focus {
+  background-color: #009BD3;
+}
+
+button.primary:enabled:active {
+  background-color: #0099d4;
+  box-shadow: inset 0 0 5px 3px #0074ae;
+}
+
+
+/* Destructive Button */
+
+button.destructive {
+  border-color: #350000;
+  background-image: linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -o-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -moz-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -webkit-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -ms-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -webkit-gradient(
+	  linear,
+	  left top,
+	  left bottom,
+	  color-stop(0.0, #d90000),
+	  color-stop(1,0, #ad0101)
+  );
+  color: #fff;
+}
+
+button.destructive:hover,
+button.destructive:focus {
+  background-color: #ad0101;
+}
+
+button.destructive:enabled:active {
+  background-color: #ad0101;
+  box-shadow: inset 0 0 5px 3px #750101;
+}
+
+
+/* Checkboxes and Radios */
+input[type="checkbox"],
+input[type="radio"] {
+  display: none;
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  display: inline-block;
+  margin: 4px;
+  padding: 0 24px;
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+input[type="checkbox"] + label {
+  background-image: url('/pki/images/checkbutton-background.png');
+}
+
+input[type="checkbox"]:hover + label {
+  background-image: url('/pki/images/checkbutton-background-hover.png');
+}
+
+input[type="checkbox"]:checked + label {
+  background-image: url('/pki/images/checkbutton-background-selected.png');
+}
+
+input[type="checkbox"]:disabled + label {
+  background-image: url('/pki/images/checkbutton-background-disabled.png');
+}
+
+input[type="checkbox"]:checked:disabled + label {
+  background-image: url('/pki/images/checkbutton-background-selected-disabled.png');
+}
+
+input[type="radio"] + label {
+  background-image: url('/pki/images/radiobutton-background.png');
+}
+
+input[type="radio"]:hover + label {
+  background-image: url('/pki/images/radiobutton-background-hover.png');
+}
+
+input[type="radio"]:checked + label {
+  background-image: url('/pki/images/radiobutton-background-selected.png');
+}
+
+input[type="radio"]:disabled + label {
+  background-image: url('/pki/images/radiobutton-background-disabled.png');
+}
+
+input[type="radio"]:checked:disabled + label {
+  background-image: url('/pki/images/radiobutton-background-selected-disabled.png');
+}
diff --git a/base/server/share/webapps/pki/css/pki-tables.css b/base/server/share/webapps/pki/css/pki-tables.css
new file mode 100644
index 000000000..b8534611e
--- /dev/null
+++ b/base/server/share/webapps/pki/css/pki-tables.css
@@ -0,0 +1,95 @@
+table {
+  width: 100%;
+  border: 1px #dcdcdc solid;
+  border-spacing: 0;
+
+}
+
+table caption {
+  text-align: left;
+  font-weight: bold;
+  padding: 11.5px;
+}
+
+table tbody tr:nth-child(even) {
+  background-color: #f6f6f6;
+}
+
+
+table tbody tr td,
+table thead tr th {
+  font-weight: normal;
+  padding: 6px 15px;
+  font-size: 11.5px;
+  border-top: 1px #ebebeb;
+  border-right: 1px #dcdcdc solid;
+  text-align: left;
+}
+
+.rcue-table-actions {
+  padding: 1px;
+  border-top: none;
+}
+
+.rcue-table-actions span:last-child {
+  float: right;
+}
+
+.rcue-table-actions {
+  padding: 1px;
+}
+
+.rcue-table-actions button {
+  padding: 3px 8px;
+  font-size: 11px;
+  box-shadow: 1px 2px 2px #e3e3e3;
+  margin: 4px;
+}
+
+.rcue-table-number {
+  text-align: right;
+  width: 100px;
+}
+
+table thead tr th {
+  font-weight: bold;
+  border: none;
+  border-right: 1px #dcdcdc solid;
+  background-image: linear-gradient(top, #fafafa 0%, #eee 100%);
+  background-image: -o-linear-gradient(top, #fafafa 0%, #eee 100%);
+  background-image: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
+  background-image: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
+  background-image: -ms-linear-gradient(top, #fafafa 0%, #eee 100%);
+  background-image: -webkit-gradient(
+	  linear,
+	  left top,
+	  left bottom,
+	  color-stop(0.0, #fafafa),
+	  color-stop(1,0, #eee)
+  );
+  border-bottom: 1px #cedede solid;
+}
+
+table tbody tr td:first-child {
+  color: #0099d3;
+}
+
+
+table thead tr th:last-child {
+  border-right: none;
+}
+
+table tbody tr:first-child td {
+  border-top: 1px solid #f2f2f2;
+  padding-top: 9px;
+}
+
+
+table tbody tr td:last-child {
+  border-right: none;
+}
+
+table tbody tr:hover {
+  cursor: pointer;
+  background-color: #ebebeb;
+}
diff --git a/base/server/share/webapps/pki/css/pki-tabs.css b/base/server/share/webapps/pki/css/pki-tabs.css
new file mode 100644
index 000000000..9648f04ab
--- /dev/null
+++ b/base/server/share/webapps/pki/css/pki-tabs.css
@@ -0,0 +1,51 @@
+ul.rcue-tabs {
+  border-bottom: 1px #e9e8e8 solid;
+  font-size: 12.5px;
+}
+
+ul.rcue-tabs li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+ul.rcue-tabs li:first-child {
+  margin-left: 0;
+}
+
+ul.rcue-tabs li a {
+  padding: 8px 4px;
+  color: #4d5258;
+  text-decoration: none;
+}
+
+ul.rcue-tabs li a:hover {
+  color: #777;
+}
+
+ul.rcue-tabs li.active {
+  border-bottom: 2px #0099d3 solid;
+  margin-bottom: -1px;
+}
+
+ul.rcue-tabs li.active a {
+  display: inline-block;
+  color: #0099d3;
+  font-weight: bold;
+}
+
+
+ul.rcue-breadcrumbs li {
+  display: inline-block;
+  margin-right: 8px;
+  padding-left: 8px;
+  font-size: 11.5px;
+}
+
+ul.rcue-breadcrumbs li:before {
+  padding-right: 12px;
+  content: '\00bb \0020 \0020 \0020 \0020'; /* Right pointing chevron */
+}
+
+ul.rcue-breadcrumbs li:first-child:before {
+  content: none;
+}
diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 63df0ffd2..5b0d3f1b2 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -19,11 +19,13 @@
  * @author Endi S. Dewata
  */
 
-table {
-    border: 1px solid black;
-    border-spacing: 0;
-}
+@import url("pki-base.css");
+@import url("pki-tabs.css");
+@import url("pki-forms.css");
+@import url("pki-tables.css");
+@import url("pki-dialogs.css");
 
-table td {
-    border: 1px solid black;
+body {
+  margin: 48px auto;
+  width: 850px;
 }
diff --git a/base/server/share/webapps/pki/font/OpenSans-Bold.ttf b/base/server/share/webapps/pki/font/OpenSans-Bold.ttf
new file mode 100755
index 000000000..2d94f0629
--- /dev/null
+++ b/base/server/share/webapps/pki/font/OpenSans-Bold.ttf
diff --git a/base/server/share/webapps/pki/font/OpenSans-BoldItalic.ttf b/base/server/share/webapps/pki/font/OpenSans-BoldItalic.ttf
new file mode 100755
index 000000000..f74e0e3ca
--- /dev/null
+++ b/base/server/share/webapps/pki/font/OpenSans-BoldItalic.ttf
diff --git a/base/server/share/webapps/pki/font/OpenSans-Italic.ttf b/base/server/share/webapps/pki/font/OpenSans-Italic.ttf
new file mode 100755
index 000000000..63f187e98
--- /dev/null
+++ b/base/server/share/webapps/pki/font/OpenSans-Italic.ttf
diff --git a/base/server/share/webapps/pki/font/OpenSans-Regular.ttf b/base/server/share/webapps/pki/font/OpenSans-Regular.ttf
new file mode 100755
index 000000000..05951e7b3
--- /dev/null
+++ b/base/server/share/webapps/pki/font/OpenSans-Regular.ttf
diff --git a/base/server/share/webapps/pki/images/checkbutton-background-disabled.png b/base/server/share/webapps/pki/images/checkbutton-background-disabled.png
new file mode 100644
index 000000000..6de1bf014
--- /dev/null
+++ b/base/server/share/webapps/pki/images/checkbutton-background-disabled.png
diff --git a/base/server/share/webapps/pki/images/checkbutton-background-hover.png b/base/server/share/webapps/pki/images/checkbutton-background-hover.png
new file mode 100644
index 000000000..b12873f9d
--- /dev/null
+++ b/base/server/share/webapps/pki/images/checkbutton-background-hover.png
diff --git a/base/server/share/webapps/pki/images/checkbutton-background-selected-disabled.png b/base/server/share/webapps/pki/images/checkbutton-background-selected-disabled.png
new file mode 100644
index 000000000..93a8dd7f1
--- /dev/null
+++ b/base/server/share/webapps/pki/images/checkbutton-background-selected-disabled.png
diff --git a/base/server/share/webapps/pki/images/checkbutton-background-selected.png b/base/server/share/webapps/pki/images/checkbutton-background-selected.png
new file mode 100644
index 000000000..501f2b34e
--- /dev/null
+++ b/base/server/share/webapps/pki/images/checkbutton-background-selected.png
diff --git a/base/server/share/webapps/pki/images/checkbutton-background.png b/base/server/share/webapps/pki/images/checkbutton-background.png
new file mode 100644
index 000000000..9b0ee2e38
--- /dev/null
+++ b/base/server/share/webapps/pki/images/checkbutton-background.png
diff --git a/base/server/share/webapps/pki/images/dialog-button-close.png b/base/server/share/webapps/pki/images/dialog-button-close.png
new file mode 100644
index 000000000..c938e7111
--- /dev/null
+++ b/base/server/share/webapps/pki/images/dialog-button-close.png
diff --git a/base/server/share/webapps/pki/images/input-background.png b/base/server/share/webapps/pki/images/input-background.png
new file mode 100644
index 000000000..7c7315955
--- /dev/null
+++ b/base/server/share/webapps/pki/images/input-background.png
diff --git a/base/server/share/webapps/pki/images/radiobutton-background-disabled.png b/base/server/share/webapps/pki/images/radiobutton-background-disabled.png
new file mode 100644
index 000000000..25ad41c6c
--- /dev/null
+++ b/base/server/share/webapps/pki/images/radiobutton-background-disabled.png
diff --git a/base/server/share/webapps/pki/images/radiobutton-background-hover.png b/base/server/share/webapps/pki/images/radiobutton-background-hover.png
new file mode 100644
index 000000000..656d7b350
--- /dev/null
+++ b/base/server/share/webapps/pki/images/radiobutton-background-hover.png
diff --git a/base/server/share/webapps/pki/images/radiobutton-background-selected-disabled.png b/base/server/share/webapps/pki/images/radiobutton-background-selected-disabled.png
new file mode 100644
index 000000000..d731cb3f0
--- /dev/null
+++ b/base/server/share/webapps/pki/images/radiobutton-background-selected-disabled.png
diff --git a/base/server/share/webapps/pki/images/radiobutton-background-selected.png b/base/server/share/webapps/pki/images/radiobutton-background-selected.png
new file mode 100644
index 000000000..144a9f359
--- /dev/null
+++ b/base/server/share/webapps/pki/images/radiobutton-background-selected.png
diff --git a/base/server/share/webapps/pki/images/radiobutton-background.png b/base/server/share/webapps/pki/images/radiobutton-background.png
new file mode 100644
index 000000000..ef28b9dc7
--- /dev/null
+++ b/base/server/share/webapps/pki/images/radiobutton-background.png