Updated default font and added new styles for components in default.css

Author: pborissow

themes/default.css

@@ -18,8 +18,9 @@ body {
 }
 
 body, textarea, input, select, td, th {
-    font-family:helvetica,arial,verdana,sans-serif;
-    font-size:14px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
+    helvetica,arial,verdana,sans-serif;
+    font-size:13px;
 }
 
 input, select, textarea { /* Allows overriding native style of form elements on iPad */
@@ -74,7 +75,6 @@ input, select, textarea { /* Allows overriding native style of form elements on
     text-align: center;
     white-space: nowrap;
     text-transform: uppercase;
-    font-size: 16px;
     line-height: 36px; /*Should match panel-header height*/
 
     -webkit-user-select: none;
@@ -187,6 +187,63 @@ input, select, textarea { /* Allows overriding native style of form elements on
 
 
 
+/**************************************************************************/
+/** Button
+/**************************************************************************/
+
+.button {
+    border-radius: 3px;
+    color: #363636;
+    display: inline-block;
+    width: 80px;
+    height: 26px;
+    line-height: 24px;
+    vertical-align: middle;
+    background-color: #e4e4e4;
+    border: 1px solid #b4b4b4;
+    /*
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+    text-shadow: 1px 1px 0px rgb(255, 255, 255);
+    */
+    cursor: pointer;
+}
+
+.button-label {
+    white-space: nowrap;
+}
+
+.button-selected {
+
+}
+
+.button:disabled,
+.button[disabled]{
+    opacity:0.75;
+    color: #939393;
+    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2);
+    cursor:default;
+}
+
+.button:hover {
+    background-color: #d2e3ed;
+    border-color: rgba(82, 168, 236, 0.8);
+}
+
+.button:disabled:hover {
+    background-color: #e4e4e4;
+    border: 1px solid #b4b4b4;
+}
+
+.button:active {
+    box-shadow: none;
+}
+.button:focus {
+    outline:0;
+}
+
+
+
+
 /**************************************************************************/
 /** Form Inputs
 /**************************************************************************/
@@ -203,7 +260,6 @@ input, select, textarea { /* Allows overriding native style of form elements on
 
     color: #363636;
     display: inline-block;
-    font-size: 14px;
     height: 28px;
     line-height: 28px;
     padding: 2px 4px;
@@ -239,7 +295,6 @@ input, select, textarea { /* Allows overriding native style of form elements on
 
 .form-label {
     color: #636363;
-    font-size: 14px;
     white-space: nowrap;
     cursor: default;
     padding: 5px 10px 0 0;
@@ -329,7 +384,6 @@ input, select, textarea { /* Allows overriding native style of form elements on
     border-radius: 3px;
     color: #363636;
     display: inline-block;
-    font-size: 14px;
     width: 80px;
     height: 26px;
     line-height: 24px;
@@ -428,7 +482,6 @@ select:focus, textarea:focus, input:focus{
 
 .form-input-menu-item {
     color: #363636;
-    font-size: 14px;
     height: 28px;
     line-height: 28px;
     padding: 0px 6px;
@@ -451,6 +504,26 @@ select:focus, textarea:focus, input:focus{
 }
 
 
+/**************************************************************************/
+/** Form Error
+/**************************************************************************/
+
+.form-input-error {
+    background: #fff2f2;
+    border-color: #d66262;
+}
+
+
+/**************************************************************************/
+/** Form placeholder
+/**************************************************************************/
+
+.form-input::placeholder {
+  color: #a1a1a1;
+  font-style: italic;
+}
+
+
 /**************************************************************************/
 /** Form Group
 /**************************************************************************/
@@ -510,6 +583,35 @@ select:focus, textarea:focus, input:focus{
 }
 
 
+/**************************************************************************/
+/** Error Callout Panel
+/**************************************************************************/
+/** The following classes are used to define the style for pop-up callouts
+ *  generated using the javaxt.dhtml.Callout class.
+ */
+
+.error-callout-panel, .error-callout-arrow {
+    border: 1px solid #8c0000;
+    background-color: #921d1d;
+    color: #fff;
+    cursor: pointer;
+}
+
+.error-callout-panel {
+    border-radius: 3px;
+    padding: 5px !important;
+    box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.2), 0 13px 20px 0 rgba(0, 0, 0, 0.2);
+}
+
+.error-callout-arrow {
+    width: 7px;
+    height: 7px;
+    padding: 12px;
+}
+
+
+
+
 /**************************************************************************/
 /** Menu Buttons
 /**************************************************************************/
@@ -542,7 +644,7 @@ select:focus, textarea:focus, input:focus{
 }
 
 .menu-button-hover {
-    border-color: #cccccc;
+    border-color: #ccc;
     background-color: #f0f8ff;
 }
 
@@ -559,7 +661,7 @@ select:focus, textarea:focus, input:focus{
  */
 
 .window {
-    background-color: #ffffff;
+    background-color: #fff;
     border-radius: 8px;
     display: inline-block;
     box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.2), 0 13px 20px 0 rgba(0, 0, 0, 0.2);
@@ -571,25 +673,24 @@ select:focus, textarea:focus, input:focus{
     background-color: #0f6391;
     height: 36px;
     cursor: default;
-    border-bottom: 1px solid #6a9ebb;
 
     position: relative;
     border-radius: 7px 7px 0px 0px;
     border: 1px solid #2a79bf;
+    border-bottom: 0px;
     box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
     cursor: default;
     overflow: hidden;
 }
 
 .window-title {
-    color: white;
+    color: #fff;
     text-align: center;
     white-space: nowrap;
     text-transform: uppercase;
     line-height: 36px; /*Should match window-header height*/
 
     position: absolute;
-    font-size: 14px;
     text-align: left;
     cursor: default;
     padding-left: 9px;
@@ -622,6 +723,7 @@ select:focus, textarea:focus, input:focus{
 .window-body {
     padding: 7px;
     vertical-align: top;
+    color: #303131;
 }
 
 .alert-header { /* used in conjunction with window-header */
@@ -741,8 +843,6 @@ select:focus, textarea:focus, input:focus{
 }
 
 .table-col, .table-header-col {
-    font-family: helvetica,arial,verdana,sans-serif;
-    font-size: 14px;
     white-space: nowrap;
     color: #272727;
     height: 35px;