Fixed #1052 - Improve component styles on Luna, Nova and Rhea Themes

primefaces · Oct 18, 2019 · 9745c77 · 9745c77
1 parent d8ab5d6
commit 9745c77
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 65 deletions.
diff --git a/public/resources/themes/luna-amber/theme.css b/public/resources/themes/luna-amber/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: #ffd980;
     color: #212121; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #FFB300; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #FFB300; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,28 +2283,28 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #191919; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
+  background-color: #FFB300;
+  border: 1px solid #FFB300;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   margin: 0.2em;
-  color: #dedede;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s; }
+  color: #212121;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #FFB300; }
+    background-color: #FFA000;
+    color: #212121;
+    border-color: #FFA000; }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;
-  background-color: #b2c1cd;
+  background-color: #252525;
   margin: 0 0.2em; }
   body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
     content: ' '; }

diff --git a/public/resources/themes/luna-blue/theme.css b/public/resources/themes/luna-blue/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: #82bbec;
     color: #ffffff; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #1f7ed0; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #1f7ed0; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,28 +2283,28 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #191919; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
+  background-color: #1f7ed0;
+  border: 1px solid #1f7ed0;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   margin: 0.2em;
-  color: #dedede;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s; }
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #1f7ed0; }
+    background-color: #1b71bb;
+    color: #ffffff;
+    border-color: #1b71bb; }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;
-  background-color: #b2c1cd;
+  background-color: #252525;
   margin: 0 0.2em; }
   body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
     content: ' '; }
@@ -3236,4 +3238,4 @@ body .p-inplace {
       color: #dedede; }
 body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
   display: inline-block;
-  width: calc(100% - 2.357em); }
+  width: calc(100% - 2.357em); }
diff --git a/public/resources/themes/luna-green/theme.css b/public/resources/themes/luna-green/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: #5de18c;
     color: #ffffff; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #1ea04c; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #1ea04c; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,28 +2283,28 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #191919; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
+  background-color: #1ea04c;
+  border: 1px solid #1ea04c;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   margin: 0.2em;
-  color: #dedede;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s; }
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #1ea04c; }
+    background-color: #1b9044;
+    color: #ffffff;
+    border-color: #1b9044; }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;
-  background-color: #b2c1cd;
+  background-color: #252525;
   margin: 0 0.2em; }
   body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
     content: ' '; }

diff --git a/public/resources/themes/luna-pink/theme.css b/public/resources/themes/luna-pink/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: #e88ba9;
     color: #ffffff; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #cc285c; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #cc285c; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,28 +2283,28 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #191919; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
+  background-color: #cc285c;
+  border: 1px solid #cc285c;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   margin: 0.2em;
-  color: #dedede;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s; }
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #cc285c; }
+    background-color: #b72452;
+    color: #ffffff;
+    border-color: #b72452; }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;
-  background-color: #b2c1cd;
+  background-color: #252525;
   margin: 0 0.2em; }
   body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
     content: ' '; }

diff --git a/public/resources/themes/nova-colored/theme.css b/public/resources/themes/nova-colored/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: #f093b3;
     color: #ffffff; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #e02365; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #e02365; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,8 +2283,6 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #007ad9; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
   background-color: #ffffff;
@@ -2298,7 +2298,9 @@ body .p-carousel .p-carousel-content .p-carousel-next {
   transition: color 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #007ad9; }
+    background-color: #ffffff;
+    color: #007ad9;
+    border-color: solid 1px rgba(178, 193, 205, 0.64); }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;

diff --git a/public/resources/themes/nova-dark/theme.css b/public/resources/themes/nova-dark/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: #5ab7ff;
     color: #ffffff; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #007ad9; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #007ad9; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,8 +2283,6 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #333333; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
   background-color: #ffffff;
@@ -2298,7 +2298,9 @@ body .p-carousel .p-carousel-content .p-carousel-next {
   transition: color 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #007ad9; }
+    background-color: #ffffff;
+    color: #007ad9;
+    border-color: solid 1px rgba(178, 193, 205, 0.64); }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;

diff --git a/public/resources/themes/nova-light/theme.css b/public/resources/themes/nova-light/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: #5ab7ff;
     color: #ffffff; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #007ad9; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #007ad9; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,8 +2283,6 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #f4f4f4; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
   background-color: #ffffff;
@@ -2298,7 +2298,9 @@ body .p-carousel .p-carousel-content .p-carousel-next {
   transition: color 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #007ad9; }
+    background-color: #ffffff;
+    color: #007ad9;
+    border-color: solid 1px rgba(178, 193, 205, 0.64); }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;
@@ -3236,4 +3238,4 @@ body .p-inplace {
       color: #333333; }
 body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
   display: inline-block;
-  width: calc(100% - 2.357em); }
+  width: calc(100% - 2.357em); }
diff --git a/public/resources/themes/rhea/theme.css b/public/resources/themes/rhea/theme.css
@@ -1705,6 +1705,8 @@ body .p-datatable .p-datatable-tbody > tr {
   body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
     background-color: white;
     color: #385048; }
+  body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #AFD3C8; }
   body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
     box-shadow: inset 0 -2px 0 0 #AFD3C8; }
 body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
@@ -2281,24 +2283,24 @@ body .p-treetable .p-column-resizer-helper {
 body .p-treetable .p-treetable-scrollable-header,
 body .p-treetable .p-treetable-scrollable-footer {
   background-color: #7B95A3; }
-body .p-carousel .p-carousel-content .p-carousel-container {
-  background-color: #ffffff; }
 body .p-carousel .p-carousel-content .p-carousel-prev,
 body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
+  background-color: #7B95A3;
+  border: 1px solid #617c8a;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   margin: 0.2em;
-  color: #666666;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s; }
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
   body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-    color: #7B95A3; }
+    background-color: #6c8999;
+    color: #ffffff;
+    border-color: #6c8999; }
 body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
   width: 20px;
   height: 6px;