TimeTrex Community Edition v16.2.0

interface/html5/theme/default/css/global/widgets/awesomebox/AComboBox.css

@@ -0,0 +1,176 @@
+:root {
+    --combobox-border-color: var(--ttprimevue-border-color); /* Previously #bdbdbd */
+    --combobox-font-color: var(--ttprimevue-font-color); /* Previously #000000 */
+}
+
+.a-combobox {
+	display: inline-block;
+	height: 24px;
+	cursor: pointer;
+	text-align: left;
+	margin-right: 1px;
+	font-size: 0;
+	vertical-align: middle;
+}
+
+.a-combobox > * {
+	pointer-events: none;
+}
+
+/*.a-combobox:hover .a-combobox-left-bg {*/
+/*background: #e2e2e2;*/
+/*}*/
+
+/*.a-combobox:hover .a-combobox-mid-bg {*/
+/*background: #e2e2e2;*/
+/*}*/
+
+/*.a-combobox:hover .clickable-space {*/
+/*background: #e2e2e2;*/
+/*}*/
+
+.a-combobox .a-combobox-left-bg {
+	background: #ffffff;
+	border-top: 1px solid var(--combobox-border-color);
+	border-right: none;
+	border-left: 1px solid var(--combobox-border-color);
+	border-bottom: 1px solid var(--combobox-border-color);
+	color: #000000;
+	height: 24px;
+	width: 7px;
+	display: inline-block;
+}
+
+.a-combobox .a-combobox-mid-bg {
+	background: #ffffff;
+	border-top: 1px solid var(--combobox-border-color);
+	border-right: none;
+	border-left: none;
+	border-bottom: 1px solid var(--combobox-border-color);
+	color: #000000;
+	height: 24px;
+	display: inline-block;
+}
+
+.a-combobox .clickable-space {
+	background: #ffffff;
+	border-top: 1px solid var(--combobox-border-color);
+	border-right: 1px solid var(--combobox-border-color);
+	border-left: none;
+	border-bottom: 1px solid var(--combobox-border-color);
+	position: relative;
+	display: inline-block;
+	width: 23px;
+	height: 24px;
+}
+
+.a-combobox .clickable-space:before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-top: 6px solid #000000;
+}
+
+.a-error-tip .a-combobox-left-bg,
+.a-error-tip .a-combobox-mid-bg,
+.a-error-tip .clickable-space {
+	border-color: #f22403;
+	background: #f78b83 !important;
+}
+
+.a-warning-tip .a-combobox-left-bg,
+.a-warning-tip .a-combobox-mid-bg,
+.a-warning-tip .clickable-space {
+	border-color: #e7be00;
+	background: #ffff00 !important;
+}
+
+.a-combobox-readonly .a-combobox-left-bg,
+.a-combobox-readonly .a-combobox-mid-bg,
+.a-combobox-readonly .clickable-space {
+	background: none;
+	border: none;
+}
+
+.a-combobox-readonly .clickable-space:before {
+	display: none;
+}
+
+.a-combobox-readonly {
+	background: #eaeaea;
+	cursor: default;
+}
+
+.a-combobox .focus-input {
+	width: 1px;
+	height: 1px;
+	border: 0;
+	padding: 0;
+	position: absolute;
+	opacity: 0;
+}
+
+.a-combobox .a-combobox-label {
+	color: var(--combobox-font-color);
+	height: 24px;
+    font-family: var(--ttprimevue-font-family); /* Move this more global in future, matches PrimeVue */
+	font-size: var(--ttprimevue-widget-label-font-size);
+	line-height: 22px;
+	overflow: hidden;
+	display: inline-block;
+	word-wrap: break-word;
+	word-break: break-all;
+	padding-right: 3px;
+	max-width: 200px;
+	vertical-align: text-bottom;
+	min-width: 100px;
+
+}
+
+.a-combobox-label-hide .a-combobox-label {
+	display: none;
+}
+
+.focus {
+	outline: 1px dotted;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+}
+
+.a-combobox .edit-columnIcon-div {
+	display: inline-block;
+	margin-left: 3px;
+	margin-top: 5px;
+	width: 20px;
+
+}
+
+.a-combobox .edit-columnIcon-div .edit_column_icon {
+
+}
+
+.a-dropdown-div {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	cursor: default;
+	position: absolute;
+	top: 400px;
+	background: none repeat scroll 0 0 #eaeaea;
+	border: 1px solid #bdbdbd;
+	border-radius: 4px;
+	padding: 5px;
+	box-shadow: 6px 6px 10px 0 #666666;
+	-moz-box-shadow: 6px 6px 10px 0 #666666;
+	-webkit-box-shadow: 6px 6px 10px 0 #666666;
+	z-index: 100;
+	opacity: 0;
+}

interface/html5/theme/default/css/global/widgets/awesomebox/ADropDown.css

@@ -0,0 +1,336 @@
+.a-dropdown {
+	float: left;
+	margin-bottom: 5px;
+	white-space: nowrap;
+}
+
+.a-dropdown .unselect-grid-div {
+	background-color: #34628d;
+	border-radius: 4px;
+	height: auto;
+	/*padding-bottom: 10px;*/
+	width: 450px;
+	float: left;
+}
+
+.a-dropdown .search-input-place-holder {
+	opacity: 0;
+}
+
+.a-dropdown .search-input {
+	outline: none;
+	border-style: solid;
+	border-right: none;
+	border-width: 1px;
+	height: 20px;
+}
+
+.a-dropdown .search-input-focus-out {
+
+	font-size: 12px;
+	text-align: center;
+	color: #777777;
+}
+
+.a-dropdown .search-input-focus-in {
+
+	font-size: 12px;
+	text-align: left;
+	color: #333333;
+}
+
+.a-dropdown .unselect-grid-div .unselect-grid-title-bar {
+	height: 30px;
+	left: 10px;
+	position: relative;
+	top: 7px;
+	color: #ffffff;
+}
+
+.a-dropdown .unselect-grid-div .unselect-grid-search-div {
+	position: relative;
+
+}
+
+.a-dropdown .unselect-grid-div .unselect-grid-border-div {
+	position: relative;
+	left: 10px;
+	border: 2px solid red;
+	width: 432px;
+	overflow-x: auto;
+
+}
+
+.a-dropdown .unselect-grid-div .single-mode-border {
+	border: 2px solid #00ff00;
+}
+
+.a-dropdown .unselect-grid-div .unselect-grid-bottom-bar {
+	height: 25px;
+	text-align: center;
+	position: relative;
+}
+
+.a-dropdown .unselect-grid-div .disable-unselect-grid-bottom-bar {
+	height: 10px;
+	text-align: center;
+}
+
+.a-dropdown .unselect-grid-div .unselect-grid-bottom-bar .total-number-span {
+	color: #ffffff;
+	line-height: 25px;
+	vertical-align: middle;
+	font-size: 10px;
+	float: left;
+	width: 260px;
+	left: 50%;
+	position: absolute;
+	margin-left: -130px;
+}
+
+.a-dropdown .ui-jqgrid {
+	min-height: 100px;
+}
+
+.a-dropdown .unselect-grid-div .ui-jqgrid {
+	position: relative;
+	border-radius: 0;
+}
+
+.a-dropdown .select-grid-div {
+	background-color: #34628d;
+	border-radius: 4px;
+	height: auto;
+	padding-bottom: 10px;
+	width: 450px;
+	display: inline-block;
+}
+
+.a-dropdown .select-grid-div .select-grid-title-bar {
+	height: 30px;
+	left: 10px;
+	position: relative;
+	top: 7px;
+	color: #ffffff;
+}
+
+.a-dropdown .select-grid-div .select-grid-border-div {
+	position: relative;
+	left: 10px;
+	border: 2px solid #00ff00;
+	width: 432px;
+	overflow: auto;
+
+}
+
+.a-dropdown .select-grid-div .select-grid-search-div {
+
+}
+
+.a-dropdown .select-grid-div .ui-jqgrid {
+	position: relative;
+	border-radius: 0;
+
+}
+
+.a-dropdown .left-and-right-div {
+
+	background-color: #34628d;
+	float: left;
+	height: 60px;
+	position: relative;
+	text-align: center;
+	top: 75px;
+	width: 30px;
+}
+
+.a-dropdown .left-and-right-div .right-arrow-div {
+
+	margin-top: 6px;
+}
+
+.a-dropdown .left-and-right-div .left-arrow-div {
+
+}
+
+.a-dropdown .left-and-right-div .right-arrow-div .a-grid-right-arrow {
+	cursor: pointer;
+}
+
+.a-dropdown .left-and-right-div .left-arrow-div .a-grid-left-arrow {
+	cursor: pointer;
+
+}
+
+.a-dropdown .a-grid-title {
+	font-size: 13px;
+	float: left;
+
+}
+
+.a-dropdown .a-grid-button {
+	position: relative;
+	top: -2px;
+	background-color: #1b3e60;
+	border: 1px solid #6687a6;
+	border-radius: 4px;
+	color: #ffffff;
+	font-size: 10px;
+	padding-bottom: 2px;
+	padding-top: 2px;
+	float: right;
+	right: 20px;
+	cursor: pointer;
+	margin-left: 2px;
+}
+
+.a-dropdown .a-grid-close-button {
+	background: url("images/close.png") repeat scroll 0 0 transparent;
+	border: medium none;
+	cursor: pointer;
+	float: right;
+	height: 18px;
+	position: relative;
+	right: 18px;
+	width: 18px;
+}
+
+.a-dropdown .a-grid-checkbox {
+	float: right;
+	position: relative;
+	right: 25px;
+	top: -2px;
+}
+
+.a-dropdown .a-grid-checkbox-label {
+	float: right;
+	font-size: 11px;
+	position: relative;
+	right: 25px;
+	top: 1px;
+}
+
+.a-dropdown .left-buttons-div {
+	float: left;
+	color: #ffffff;
+	margin-left: 10px;
+	margin-top: 1px;
+
+}
+
+.a-dropdown .right-buttons-div {
+	float: right;
+	color: #ffffff;
+	margin-right: 7px;
+	margin-top: 1px;
+
+}
+
+.a-dropdown .disabled {
+	color: #999999;
+	-webkit-filter: grayscale(100%);
+	-moz-filter: grayscale(100%);
+	-ms-filter: grayscale(100%);
+	-o-filter: grayscale(100%);
+
+	filter: grayscale(100%);
+	/*filter: url(gray.svg#grayscale);*/
+
+	filter: gray;
+}
+
+.a-dropdown .double-left-arrow {
+	background: url("../../../../images/double_left_arrow.png");
+	height: 14px;
+	width: 17px;
+	float: left;
+	margin-top: 4px;
+
+}
+
+.a-dropdown .double-right-arrow {
+	float: left;
+	background: url("../../../../images/double_right_arrow.png");
+	height: 14px;
+	width: 17px;
+	float: left;
+	margin-top: 4px;
+}
+
+.a-dropdown .right-arrow {
+	background: url("../../../../images/right_arrow.png");
+	height: 14px;
+	width: 12px;
+	float: left;
+	margin-top: 4px;
+}
+
+.a-dropdown .left-arrow {
+	background: url("../../../../images/left_arrow.png");
+	height: 14px;
+	width: 12px;
+	float: left;
+	margin-top: 4px;
+}
+
+.a-dropdown .paging-2-span {
+	float: left;
+	margin-right: 2px;
+	margin-top: 3px;
+	cursor: pointer;
+	font-size: 11px;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.a-dropdown .drop-position {
+	background: red;
+}
+
+.a-dropdown .search-input-close {
+	position: relative;
+	right: -6px;
+	color: #ffffff;
+	cursor: pointer;
+	background: url("../../../../images/close.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
+	width: 12px;
+	height: 12px;
+}
+
+.a-dropdown .close-btn {
+	background: rgba(0, 0, 0, 0);
+	border: medium none;
+	cursor: pointer;
+	height: 12px;
+	position: relative;
+	padding: 0;
+	width: 21px !important;
+}
+
+.a-dropdown .edit-columnIcon-div {
+	float: left;
+	width: 20px;
+
+}
+
+.a-dropdown .edit-columnIcon-div .edit_column_icon {
+
+}
+
+.a-dropdown .selected-tree-cell {
+	color: #8c8c8c;
+}
+
+.a-dropdown .a-grid-button {
+	top: -3px;
+	padding-bottom: 4px;
+	padding-top: 4px;
+}
+
+.a-dropdown .a-grid-close-button {
+	top: -2px;
+}

interface/html5/theme/default/css/global/widgets/awesomebox/gray.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <filter id="grayscale">
+        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
+    </filter>
+</svg>

interface/html5/theme/default/css/global/widgets/column_editor/ColumnEditor.css

@@ -0,0 +1,34 @@
+.column-editor {
+
+	width: 958px;
+	background: none repeat scroll 0 0 #eaeaea;
+	border: 1px solid #bdbdbd;
+	border-radius: 4px;
+	padding: 5px;
+	box-shadow: 6px 6px 10px 0 #666666;
+	-moz-box-shadow: 6px 6px 10px 0 #666666;
+	-webkit-box-shadow: 6px 6px 10px 0 #666666;
+	position: absolute;
+	z-index: 100;
+
+}
+
+.column-editor .layout-name-div {
+
+}
+
+.column-editor .column-editor-drop-down-div {
+
+	float: left;
+
+}
+
+.column-editor .rows-per-page-div {
+	float: left;
+	margin-top: 5px;
+}
+
+.column-editor .bottom-action-div {
+	margin-top: 10px;
+
+}

interface/html5/theme/default/css/global/widgets/datepicker/TDatePicker.css

@@ -0,0 +1,160 @@
+:root {
+    --datepicker-border-color: var(--ttprimevue-border-color);
+    --datepicker-font-color: var(--ttprimevue-font-color);
+}
+
+.t-date-picker-div {
+	position: relative;
+	width: 185px;
+	text-align: left;
+	height: 22px;
+	display: inline-block;
+	vertical-align: top;
+}
+
+.t-date-picker-div .t-date-picker {
+	outline: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	line-height: 20px;
+	width: 100%;
+	padding: 0;
+	padding-left: 3px;
+	box-sizing: border-box;
+	margin: 0;
+	display: inline;
+	height: 24px;
+    font-size: var(--ttprimevue-input-label-font-size);
+    font-family: var(--ttprimevue-font-family);
+    color: var(--ttprimevue-font-color);
+    border: 1px solid var(--ttprimevue-border-color);
+}
+
+.t-date-picker-div .t-date-picker-readonly {
+	background: transparent;
+	border: none;
+	height: 100%;
+	pointer-events: none;
+}
+
+.t-date-picker-div .t-date-picker-icon {
+	position: absolute;
+	top: 3px;
+	cursor: pointer;
+	right: 3px;
+	height: 18px;
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+.ui-timepicker-div .ui-widget-header {
+	margin-bottom: 8px;
+}
+
+.ui-timepicker-div dl {
+	text-align: left;
+	padding-left: 10px;
+}
+
+.ui-timepicker-div dl dt {
+	height: 25px;
+	margin-bottom: -25px;
+}
+
+.ui-timepicker-div dl dd {
+	margin: 0 10px 10px 65px;
+}
+
+.ui-timepicker-div td {
+	font-size: 90%;
+}
+
+.ui-tpicker-grid-label {
+	background: none;
+	border: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ui-timepicker-rtl {
+	direction: rtl;
+}
+
+.ui-timepicker-rtl dl {
+	text-align: right;
+}
+
+.ui-timepicker-rtl dl dd {
+	margin: 0 65px 10px 10px;
+}
+
+.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close {
+
+}
+
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	margin-left: 81px;
+}
+
+.t-range-picker-div {
+	background: none !important;
+	width: auto !important;
+	height: auto !important;
+}
+
+.t-range-picker-div .t-range-picker-tab-bar {
+	width: 500px !important;
+	height: 300px !important;
+	min-width: 500px !important;
+}
+
+.t-range-picker-div .col-section {
+	display: inline-block;
+}
+
+.t-range-picker-div .col-section .label {
+
+}
+
+.ui-datepicker .ui-state-default {
+	border: 1px solid #aed0ea;
+	background: #d7ebf9 url(../../../jquery-ui/images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #2779aa;
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+.ui-datepicker .ui-state-active {
+	border: 1px solid #2694e8;
+	background: #3baae3 50% 50% repeat-x !important;
+	font-weight: bold;
+	/*color: #ffffff;*/
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+.ui-datepicker .ui-state-hover {
+	background: #ccf2ff !important;
+}
+
+.ui-datepicker .ui-datepicker-buttonpane button {
+	padding: .6em;
+}
+
+.edit-view.t-range-picker-div .close-icon {
+    top: 2px;
+    right: 3px;
+}
+
+.edit-view.t-range-picker-div .edit-view-tab-outside.ui-tabs-panel {
+    height: 88%;
+}
+
+.edit-view.t-range-picker-div .edit-view-tab-bar.t-range-picker-tab-bar {
+    margin: auto;
+}

interface/html5/theme/default/css/global/widgets/error_tip/ErrorTipBox.css

@@ -0,0 +1,25 @@
+.errortip-box {
+	background-color: #cb2e2e;
+	border: 1px solid #cb2e2e;
+	position: absolute;
+	padding-left: 4px;
+	padding-right: 4px;
+	line-height: 22px;
+	z-index: 100;
+	max-width: 500px;
+	border-radius: 4px;
+}
+
+.warningtip-box {
+	background-color: #ffff00 !important;
+	border: 1px solid #e7be00 !important;
+}
+
+.errortip-box .errortip-label {
+	font-size: 11px;
+	color: #ffffff;
+}
+
+.warningtip-box .errortip-label {
+	color: #362b36 !important;
+}

interface/html5/theme/default/css/global/widgets/filebrowser/TImageBrowser.css

@@ -0,0 +1,81 @@
+.file-browser {
+
+}
+
+.file-browser .browser-form {
+
+}
+
+.file-browser .file-browser-btn {
+}
+
+.file-browser .browser {
+	max-width: 200px;
+}
+
+.edit-view-form-item-input-div .file-browser .browser {
+	margin-top: 3px;
+}
+
+.file-browser .image {
+	max-width: 500px;
+}
+
+.t-image-cut {
+	padding-top: 10px;
+}
+
+.t-image-cut .before-div {
+	display: inline-block;
+	width: 400px;
+	height: 300px;
+}
+
+.t-image-cut .after-div {
+	display: inline-block;
+	width: 200px;
+	height: 150px;
+	margin-left: 20px;
+}
+
+.t-image-cut .label {
+	display: block;
+	width: 100%;
+	text-align: center;
+}
+
+.t-image-cut .before-img {
+	display: block;
+	max-width: 400px;
+	max-height: 300px;
+}
+
+.t-image-cut .after-img {
+	display: block;
+	max-width: 200px;
+	max-height: 150px;
+}
+
+.file-browser .video-div {
+	margin: auto;
+	position: relative;
+	width: 400px;
+}
+
+.file-browser .video-display {
+	background: none repeat scroll 0 0 #666666;
+	position: relative;
+}
+
+.file-browser .video-capture {
+	background: none repeat scroll 0 0 #ffffff;
+	left: 0;
+	top: 0;
+	position: absolute;
+	z-index: -1;
+}
+
+.file-browser .buttons {
+
+}
+

interface/html5/theme/default/css/global/widgets/inside_editor/InsideEditor.css

@@ -0,0 +1,125 @@
+.inside-editor {
+	text-align: center;
+}
+
+.inside-editor .title {
+	font-weight: bold;
+
+}
+
+.inside-editor .render-div {
+	margin-top: 10px;
+}
+
+.inside-editor-render {
+	border-collapse: collapse;
+}
+
+.inside-editor-render .title {
+	font-weight: bold;
+
+}
+
+.inside-editor-render .cell {
+	text-align: center;
+	width: 15px;
+	position: relative;
+}
+
+.inside-editor-render .awesome-box-cell {
+	padding-left: 20px;
+}
+
+.inside-editor-render td {
+	border-collapse: collapse;
+}
+
+.inside-editor-row {
+
+}
+
+.inside-editor-row td {
+	vertical-align: top;
+	padding-bottom: 5px;
+	padding-top: 5px;
+	border-bottom: 1px solid #c7c7c7;
+	position: relative;
+}
+
+.inside-editor .no-line {
+	border-bottom: none !important;
+}
+
+.tblList {
+	/*background: none repeat scroll 0 0 #7a9bbd;*/
+	background: none repeat scroll 0 0 #eaeaea;
+	/*background: none repeat scroll 0 0 #c7c7c7;*/
+
+	border: 0 none;
+	border-spacing: 1px;
+	border-collapse: separate;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0;
+	width: 100%;
+}
+
+.tblHeader, .tblSepHeader {
+	/*background-color: #b8cadb;*/
+	background-color: #375a7c;
+
+	/*color: #369;*/
+	color: #ffffff;
+	font-size: 12px;
+	font-weight: bold;
+	padding: 3px;
+	text-align: center;
+	vertical-align: middle;
+}
+
+.tblSepHeader {
+	height: 20px;
+}
+
+
+.tblDataWhite {
+	background-color: #ffffff;
+	color: #000000;
+	padding: 5px;
+	text-align: center;
+}
+
+.grid-inside-editor-render {
+
+}
+
+.grid-inside-editor-render .title {
+	background: #375979 !important;
+
+}
+
+.grid-inside-editor-render .title td {
+	color: #ffffff;
+	font-size: 11px;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	cursor: default;
+}
+
+.grid-inside-editor-render tbody {
+	background: #ffffff;
+}
+
+.grid-inside-editor-render td {
+	border-right: 1px solid rgb(221, 221, 221);
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.grid-inside-editor-render td:first-child {
+	/*border-left: 1px solid rgb(221, 221, 221);*/
+}
+
+.grid-inside-editor-render tr:nth-child(odd) {
+	background: rgba(221, 221, 221, 0.3);
+}

interface/html5/theme/default/css/global/widgets/jqgrid/TGridHeader.css

@@ -0,0 +1,7 @@
+.t-grid-header-sort-icon {
+	padding-left: 5px;
+}
+
+.t-grid-header-sort-number {
+	font-size: 8px;
+}

interface/html5/theme/default/css/global/widgets/loading_bar/LoadingBox.css

@@ -0,0 +1,161 @@
+/* start .lds-spinner loading spinner code */
+.lds-spinner {
+	display: inline-block;
+	position: relative;
+	width: 4em;
+	height: 150px; /* 150px is used instead of 4em, so that the time&percentage based counters are positioned correctly. TODO-future: improve positioning of those elements and set this back to 4em. */
+	top: 40px;
+	font-size: 16px; /* Edit only this to change spinner size - Everything has been updated to work off em's so that all you need to change is the font size here to adjust spinner size */
+}
+
+.lds-spinner div {
+	transform-origin: 2em 2em;
+	animation: lds-spinner 1.2s linear infinite;
+}
+
+.lds-spinner div:after {
+	content: ' ';
+	display: block;
+	position: absolute;
+	top: 0.2em;
+	left: 1.8em;
+	width: 0.3em;
+	height: 0.9em;
+	border-radius: 20%;
+	background: #ffffff;
+}
+
+.lds-spinner div:nth-child(1) {
+	transform: rotate(0deg);
+	animation-delay: -1.1s;
+}
+
+.lds-spinner div:nth-child(2) {
+	transform: rotate(30deg);
+	animation-delay: -1s;
+}
+
+.lds-spinner div:nth-child(3) {
+	transform: rotate(60deg);
+	animation-delay: -0.9s;
+}
+
+.lds-spinner div:nth-child(4) {
+	transform: rotate(90deg);
+	animation-delay: -0.8s;
+}
+
+.lds-spinner div:nth-child(5) {
+	transform: rotate(120deg);
+	animation-delay: -0.7s;
+}
+
+.lds-spinner div:nth-child(6) {
+	transform: rotate(150deg);
+	animation-delay: -0.6s;
+}
+
+.lds-spinner div:nth-child(7) {
+	transform: rotate(180deg);
+	animation-delay: -0.5s;
+}
+
+.lds-spinner div:nth-child(8) {
+	transform: rotate(210deg);
+	animation-delay: -0.4s;
+}
+
+.lds-spinner div:nth-child(9) {
+	transform: rotate(240deg);
+	animation-delay: -0.3s;
+}
+
+.lds-spinner div:nth-child(10) {
+	transform: rotate(270deg);
+	animation-delay: -0.2s;
+}
+
+.lds-spinner div:nth-child(11) {
+	transform: rotate(300deg);
+	animation-delay: -0.1s;
+}
+
+.lds-spinner div:nth-child(12) {
+	transform: rotate(330deg);
+	animation-delay: 0s;
+}
+
+@keyframes lds-spinner {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+/* end .lds-spinner loading spinner code */
+
+.popup-loading {
+	background: rgba(0, 0, 0, 0.8);
+	/*position: absolute;*/
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	margin: -100px 0 0 -100px;
+	border: 1px solid;
+	height: 200px;
+	width: 200px;
+	/*line-height:200px;*/
+	font-size: 16px;
+	text-align: center;
+	z-index: 101;
+	border-radius: 4px;
+}
+
+.popup-loading .processing {
+	position: relative;
+	top: 10%;
+	color: #ffffff;
+	max-height: 20px;
+
+
+}
+
+.popup-loading .close-icon {
+	color: #ffffff;
+	cursor: pointer;
+	font-size: 12px;
+	position: absolute;
+	right: 7px;
+	top: 3px;
+}
+
+.popup-loading .complete-info {
+	color: #ffffff;
+	cursor: pointer;
+	font-size: 11px;
+	position: relative;
+	text-align: center;
+	top: -15px;
+}
+
+.popup-loading .progress-bar {
+	left: 10px;
+	position: absolute;
+	bottom: 50px;
+	width: 180px;
+	background-color: #eaeaea;
+}
+
+.popup-loading .time-remaining {
+	color: #ffffff;
+	cursor: pointer;
+	font-size: 11px;
+	position: relative;
+	top: -10px;
+}
+
+.popup-loading .sonic {
+
+}

interface/html5/theme/default/css/global/widgets/message_box/NoResultBox.css

@@ -0,0 +1,49 @@
+.no-result-div {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	/* Fallback for web browsers that doesn't support RGBa */
+	background: rgb(0, 0, 0);
+	/* RGBa with 0.6 opacity */
+	background: rgba(0, 0, 0, 0.6);
+	/* For IE 5.5 - 7*/
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+	/* For IE 8*/
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+	z-index: 2;
+	text-align: center;
+}
+
+.no-result-div .message {
+	color: #ffffff;
+	display: block;
+	font-size: 36px;
+	font-weight: bold;
+	height: 50px;
+	left: 0;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: -50px;
+	position: absolute;
+	right: 0;
+	top: 50%;
+}
+
+.dashlet .no-result-div .message {
+    margin-top: -2%;
+}
+
+.no-result-div .p-button {
+    left: 0;
+    margin-left: auto;
+    margin-right: auto;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 75px;
+}
+
+.no-result-div .ribbon-button .label {
+
+}

interface/html5/theme/default/css/global/widgets/ribbon/RibbonView.css

@@ -0,0 +1,385 @@
+.ribbon-view {
+
+	padding: 0;
+	height: 170px;
+}
+
+.ribbon-view .ribbon {
+	position: absolute;
+	top: 27px;
+	height: 100%;
+	width: 100%;
+}
+
+.ribbon-view .left-logo {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: pointer;
+	z-index: 1;
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+.ribbon-view .right-logo {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	max-width: 170px;
+	max-height: 42px;
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+/* This section contains the logic for the double curved left edge of the white logo box.
+ * It is made up of 3 sections:
+ * - The main white rectangle which has the bottom left white corner
+ * - The blue square with the top right blue corner
+ * - The white square which sits behind the small blue square as the background on the curve.
+*/
+
+/* This is the majority of the white rectangle that sits on the navbar under part of the company logo */
+.top-container .right-tab-bg {
+	position: absolute;
+	top: 27px;
+	height: 24px; /* This can adjusted freely, other aspects should update. If smaller than before+after, then update those manually */
+	width: 186px;
+	border: 0px solid;
+	right: 0;
+	background: #ffffff;
+	border-bottom-left-radius: 8px; /* Set to preferred bottom left curve size */
+}
+
+/* This is the white square that will sit behind the blue corner */
+.top-container .right-tab-bg:before, .top-container .right-tab-bg:after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: -10px;
+	width: 10px;
+	height: 15px;
+	background: inherit;
+}
+
+/* This is the blue square with top right corner curved */
+.top-container .right-tab-bg:after {
+	background: #32689b; /* Set this to the parent background color */
+	border-top-right-radius: 8px; /* Set to preferred top right curve size */
+}
+
+.top-container .ribbon-tab-out-side {
+	padding: 0;
+}
+
+.top-container .ribbon-tab {
+	border: none;
+	background: #e6e6e6;
+	border-bottom: 1px solid #c7c7c7;
+	height: 100%;
+}
+
+.top-container .context-ribbon-tab {
+	border: none;
+	background: #d8e7f4;
+	border-bottom: 1px solid #c7c7c7;
+	height: 100%;
+}
+
+.top-container .ribbon-sub-menu {
+	border: none;
+	overflow: auto;
+	white-space: nowrap;
+	display: block;
+	height: 107px;
+	overflow-y: hidden;
+}
+
+.menu {
+
+}
+
+.top-container .top-ribbon-menu {
+	border: 1px solid #c2c2c2;
+	padding: 5px;
+	border-radius: 4px;
+	margin-right: 10px;
+	padding-bottom: 10px;
+	display: inline-block;
+	height: 97px;
+	background: #f9f9f9;
+	margin-top: 5px;
+	margin-left: 5px;
+	margin-bottom: 5px;
+	position: relative;
+	vertical-align: top;
+}
+
+.menu .menu-bottom {
+	border: 0px solid #999999;
+	border-bottom: 0;
+	border-left: 0;
+	border-right: 0;
+	position: absolute;
+	height: 16px;
+	border-radius: 4px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	background: #32689b;
+	text-align: center;
+	color: #ffffff;
+	bottom: 0;
+	left: 0;
+	clear: both;
+	font-size: 10px;
+	width: 100%;
+}
+
+.menu .menu-bottom span {
+	font-size: 10px;
+	line-height: 15px;
+}
+
+.menu ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	font-size: 10px;
+
+}
+
+.menu ul li {
+	display: inline-block;
+	padding-right: 0;
+	vertical-align: top;
+
+}
+
+.menu ul li div {
+	text-align: center;
+	padding-top: 6px;
+	padding-bottom: 6px;
+	padding-left: 5px;
+	padding-right: 5px;
+	cursor: pointer;
+
+}
+
+.menu ul li div:not(.ribbon-sub-menu-nav-icon):hover {
+	/*background: #b5dafe;*/
+	background-image: -moz-linear-gradient(top, #d9eafa, #c8dcf0);
+	/* Safari & Chrome */
+	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #c8dcf0), color-stop(1, #d9eafa));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9eafa', endColorstr='#c8dcf0', grandientType=1);
+	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9eafa', endColorstr='#c8dcf0', grandientType=1);
+	background-image: -ms-linear-gradient(#d9eafa, #c8dcf0, #c8dcf0);
+	background: -ms-linear-gradient(top, #d9eafa 0%, #c8dcf0 100%);
+	border-radius: 4px;
+}
+
+.menu ul li .selected-menu {
+	/*background: #b5dafe;*/
+	background-image: -moz-linear-gradient(top, #c4e1fc, #b4d2ee);
+	/* Safari & Chrome */
+	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #b4d2ee), color-stop(1, #c4e1fc));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4e1fc', endColorstr='#b4d2ee', grandientType=1);
+	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4e1fc', endColorstr='#b4d2ee', grandientType=1);
+	background: -ms-linear-gradient(top, #c4e1fc 0%, #b4d2ee 100%);
+	border: 1px solid #32689b;
+	border-radius: 4px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-left: 4px;
+	padding-right: 4px;
+}
+
+.menu ul li .ribbon-sub-menu-icon {
+
+}
+
+.menu ul li .ribbon-sub-menu-nav-icon {
+	background: url("images/arrow.png") no-repeat;
+	background-position: center bottom;
+}
+
+.menu ul li .ribbon-sub-menu-nav {
+	background: none repeat scroll 0 0 #fefefe;
+	border: 1px solid #aaaaaa;
+	position: fixed;
+	z-index: 100;
+}
+
+.menu ul li .ribbon-sub-menu-nav-item {
+	clear: both;
+	display: block;
+	width: 100%;
+	cursor: pointer;
+
+}
+
+.menu ul li .ribbon-sub-menu-nav-item .label {
+	display: block;
+	padding: 3px 10px;
+	font-size: 11px;
+}
+
+.menu ul li .ribbon-sub-menu-nav-item:hover {
+	background: #c6dcef;
+}
+
+.menu ul li div img {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 3px;
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+/*override css styles*/
+.top-container .ui-tabs .ui-tabs-nav {
+	margin: 0;
+	padding: 0 60px 0;
+	padding-right: 0;
+	border-radius: 0;
+	height: 30px;
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+.top-container .ui-widget-content {
+	background: #ffffff;
+	border: 0px solid #dddddd;
+	color: #000000;
+	height: 107px;
+}
+
+.top-container .ui-widget-header {
+	background: #32689b;
+	border: 0px solid #aed0ea;
+	color: #222222;
+	font-weight: bold;
+}
+
+.top-container .ui-tabs .ui-tabs-nav li.context-menu-active {
+	background: #d8e7f4 !important;
+
+}
+
+.top-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
+	margin-bottom: 0;
+	padding-bottom: 0;
+}
+
+.top-container .ui-tabs .ui-tabs-nav li {
+	top: 5px;
+	height: 24px;
+}
+
+.top-container .ui-state-default a, .top-container .ui-state-default a:link, .top-container .ui-state-default a:visited {
+	color: #ffffff;
+	text-decoration: none;
+}
+
+.top-container .ui-state-default {
+	border: none;
+	background: none;
+}
+
+/*.top-container .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {*/
+/*border: none;*/
+/*background: none;*/
+/*color: #ffffff;*/
+/*}*/
+
+.top-container .ui-state-hover a {
+	color: #ffffff;
+	text-decoration: none;
+
+}
+
+.top-container .ui-state-active, .top-container .ui-widget-content .ui-state-active, .top-container .ui-widget-header .ui-state-active {
+	border: 1px solid #c0bfbf;
+	background: #e9e9e9 !important;
+	font-weight: bold;
+	color: #204175;
+
+}
+
+.top-container .ui-tabs .ui-tabs-nav li a {
+	float: left;
+	font-size: 11px;
+	padding: 3px 6px 4px; /* Padding supplimented by border size on the parent li in SearchPanel.css (#2710) */
+	text-decoration: none;
+	font-weight: bold;
+	user-drag: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+}
+
+.top-container .ui-state-active a, .top-container .ui-state-active a:link, .top-container .ui-state-active a:visited {
+	color: #204175;
+	text-decoration: none;
+	/*padding: 100px 9px 4px;*/
+}
+
+.top-container .ui-corner-all, .top-container .ui-corner-top, .top-container .ui-corner-right, .top-container .ui-corner-tr {
+	border-top-right-radius: 4px;
+}
+
+.top-container .ui-corner-all, .top-container .ui-corner-top, .top-container .ui-corner-left, .top-container .ui-corner-tl {
+	border-top-left-radius: 4px;
+}
+
+.top-container .context-menu a, .top-container .context-menu a:link, .top-container .context-menu a:visited {
+	color: #00ff00;
+	text-decoration: none;
+	/*padding: 100px 9px 4px;*/
+}
+
+.top-container .context-menu-active a, .top-container .context-menu-active a:link, .top-container .context-menu-active a:visited {
+	color: #204175;
+	text-decoration: none;
+	/*padding: 100px 9px 4px;*/
+}
+
+.disable-image {
+	-webkit-filter: grayscale(100%);
+	-moz-filter: grayscale(100%);
+	-ms-filter: grayscale(100%);
+	-o-filter: grayscale(100%);
+
+	filter: grayscale(100%);
+	/* Chrome 53 throws 404 instead of making them grey. */
+	/*filter: url(gray.svg#grayscale);*/
+
+	filter: gray;
+	opacity: 0.5;
+}
+
+.top-container .invisible-image {
+	display: none;
+}
+
+.top-container .ribbon-label {
+	font-size: 10px;
+}
+
+.top-container .ui-state-hover {
+	background: none !important;
+	font-weight: bold;
+	color: #000000;
+}
+
+/**
+Workaround for selenium screen-shot unit testing due to inconsistent corner rounding in google chrome
+see issue 2157 for detils.
+**/
+.UNIT_TEST_MODE * {
+	-webkit-border-radius: 0 !important;
+	-moz-border-radius: 0 !important;
+	border-radius: 0 !important;
+}

interface/html5/theme/default/css/global/widgets/ribbon/gray.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <filter id="grayscale">
+        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
+    </filter>
+</svg>