You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by nm...@apache.org on 2021/07/22 09:14:33 UTC
[ofbiz-framework] branch trunk updated: Improved: Add theme
orientation color on Helveticus (OFBIZ-12288)
This is an automated email from the ASF dual-hosted git repository.
nmalin pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ofbiz-framework.git
The following commit(s) were added to refs/heads/trunk by this push:
new 1d2902b Improved: Add theme orientation color on Helveticus (OFBIZ-12288)
1d2902b is described below
commit 1d2902be6694a827d833823afa53f11b8f5e3d86
Author: Nicolas Malin <ni...@nereide.fr>
AuthorDate: Thu Jul 22 11:12:55 2021 +0200
Improved: Add theme orientation color on Helveticus (OFBIZ-12288)
Some few improvement on Helveticus theme, where we add three other color red, yellow and green and increase the contrast on blue color.
Thanks to Marine Desmarchelier for this improvement
---
themes/helveticus/data/HelveticusThemeData.xml | 5 +-
themes/helveticus/webapp/helveticus/docbook.css | 2 +-
.../webapp/helveticus/helveticus-amber.less | 13 +
.../webapp/helveticus/helveticus-emerald.less | 13 +
.../webapp/helveticus/helveticus-main-theme.less | 298 +++++++++++----------
.../webapp/helveticus/helveticus-ruby.less | 13 +
.../webapp/helveticus/helveticus-saphir.less | 13 +
.../helveticus/webapp/helveticus/helveticus.less | 73 +++--
.../webapp/helveticus/images/themeHelveticus.png | Bin 127072 -> 0 bytes
.../helveticus/images/themeHelveticus_amber.png | Bin 0 -> 95633 bytes
.../helveticus/images/themeHelveticus_emerald.png | Bin 0 -> 101992 bytes
.../helveticus/images/themeHelveticus_ruby.png | Bin 0 -> 100522 bytes
.../helveticus/images/themeHelveticus_saphir.png | Bin 0 -> 101749 bytes
themes/helveticus/webapp/helveticus/javascript.css | 2 +-
themes/helveticus/widget/Theme.xml | 18 +-
15 files changed, 259 insertions(+), 191 deletions(-)
diff --git a/themes/helveticus/data/HelveticusThemeData.xml b/themes/helveticus/data/HelveticusThemeData.xml
index 745627d..21f4378 100644
--- a/themes/helveticus/data/HelveticusThemeData.xml
+++ b/themes/helveticus/data/HelveticusThemeData.xml
@@ -19,5 +19,8 @@ under the License.
-->
<entity-engine-xml>
- <VisualTheme visualThemeId="HELVETICUS" visualThemeSetId="BACKOFFICE" description="Helveticus"/>
+ <VisualTheme visualThemeId="HELVETICUS_SAPHIR" visualThemeSetId="BACKOFFICE" description="Helveticus - Sapphire"/>
+ <VisualTheme visualThemeId="HELVETICUS_RUBY" visualThemeSetId="BACKOFFICE" description="Helveticus - Ruby"/>
+ <VisualTheme visualThemeId="HELVETICUS_EMERALD" visualThemeSetId="BACKOFFICE" description="Helveticus - Emerald"/>
+ <VisualTheme visualThemeId="HELVETICUS_AMBER" visualThemeSetId="BACKOFFICE" description="Helveticus - Amber"/>
</entity-engine-xml>
diff --git a/themes/helveticus/webapp/helveticus/docbook.css b/themes/helveticus/webapp/helveticus/docbook.css
index dc67ad9..1ed98b0 100644
--- a/themes/helveticus/webapp/helveticus/docbook.css
+++ b/themes/helveticus/webapp/helveticus/docbook.css
@@ -24,7 +24,7 @@ body {
font-size: .75em;
line-height: 1.5em;
padding: 50px 0 0;
- background-color: #ffffcc;
+ bgcolor: #ffffcc;
}
a:hover {
diff --git a/themes/helveticus/webapp/helveticus/helveticus-amber.less b/themes/helveticus/webapp/helveticus/helveticus-amber.less
new file mode 100644
index 0000000..e35f647
--- /dev/null
+++ b/themes/helveticus/webapp/helveticus/helveticus-amber.less
@@ -0,0 +1,13 @@
+/*helveticus AMBER colors */
+@yellow: #FFA800;
+@yellow-light: #FFF4DE;
+@yellow-dark: #574217;
+
+@header-color: @yellow;
+@footer-color: @yellow;
+@light-color-theme : @yellow-light;
+@main-color-theme : @yellow;
+@dark-color-theme : @yellow-dark;
+
+/* include main less theme file */
+@import (less) "helveticus-main-theme.less";
\ No newline at end of file
diff --git a/themes/helveticus/webapp/helveticus/helveticus-emerald.less b/themes/helveticus/webapp/helveticus/helveticus-emerald.less
new file mode 100644
index 0000000..d6cd9a3
--- /dev/null
+++ b/themes/helveticus/webapp/helveticus/helveticus-emerald.less
@@ -0,0 +1,13 @@
+/*helveticus EMERALD colors */
+@green: #1BC5BD;
+@green-light: #dcfffd;
+@green-dark: #133d3b;
+
+@header-color: @green;
+@footer-color: @green;
+@light-color-theme : @green-light;
+@main-color-theme : @green;
+@dark-color-theme : @green-dark;
+
+/* include main less theme file */
+@import (less) "helveticus-main-theme.less";
\ No newline at end of file
diff --git a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
index 351e3e0..078ec00 100644
--- a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
+++ b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
@@ -1,21 +1,22 @@
-/*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- *******************************************************************************/
+/**COMMON COLOR**/
+@grey-lighter: #f2f3f7;
+@grey-light: #dfe0e4;
+@grey: #b3b3b3;
+@grey-medium: #d7dae7;
+@grey-dark: #3F4254;
+@grey-darker: #181c32;
+
+@danger: #f65644;
+@dangerLight: #FEDFDF;
+@success: #1BC5BD;
+@successLight: #C9F7F5;
+@warning: #ff9100;
+@warningLight: #fff6ec;
+
+@font-color-for-dark : @grey;
+@font-color-for-main : @grey-darker;
+@border-color:@grey-light;
+@shadow-color : rgba(72, 90, 117, 0.05);
@app-bar-height: 60px;
@footer-height: 20px;
@@ -29,10 +30,10 @@
html{font-size: 10px;}
body {
- font-family: 'Quicksand', sans-serif;
+ font-family: 'Quicksand', sans-serif;
font-weight:400;
font-size: 1.2rem;
- background: @grey-light;
+ background: @grey-lighter;
}
ul, li{list-style-type:none}
@@ -45,7 +46,7 @@ div.clear{
hr{
margin:0.3rem 0;
border:none;
- border-bottom: 1px solid @font-color-for-dark ;
+ border-bottom: 1px solid @border-color ;
}
.no-padding {
@@ -77,32 +78,33 @@ span.label{
}
/*** BUTTON /LINK / NAV STYLES ***/
-a, a:hover, * {
+a, a:hover, * {
text-decoration:none;
- -o-transition:.5s;
- -ms-transition:.5s;
- -moz-transition:.5s;
- -webkit-transition:.5s;
+ -o-transition:.5s;
+ -ms-transition:.5s;
+ -moz-transition:.5s;
+ -webkit-transition:.5s;
}
-a {
- color:@dark-color-theme;
+a {
+ color:@main-color-theme;
+ font-weight:500;
&:hover{
- color:@shadow-color-light;
+ color:@grey-dark;
}
}
input[type="submit"], .smallSubmit{
display: inline-block;
- background-color: @dark-color-theme;
+ background-color: @main-color-theme;
border:none;
border-radius: 0.4rem;
- color: @main-color-theme;
+ color: @light-color-theme;
padding:0.5rem 0.8rem;
font-size:1.2rem;
cursor:pointer;
&:hover{
- color: @dark-color-theme;
- background-color: @main-color-theme;
+ color: @main-color-theme;
+ background-color: @light-color-theme;
}
}
.in-line-bar ul{
@@ -125,10 +127,10 @@ input[type="submit"], .smallSubmit{
display: flex;
align-items: center;
justify-content: center;
- background-color: @dark-color-theme;
+ background-color: @main-color-theme;
height: @home-menu-tile-height;
padding: 5px 10px 5px 10px;
- border-bottom: solid 1px black;
+ border-bottom: solid 1px @border-color;
span {
font-family: 'Quicksand', sans-serif !important;
font-size: 15px;
@@ -151,13 +153,13 @@ input[type="submit"], .smallSubmit{
position: relative;
margin-left: 5px;
margin-right: 5px;
- border: solid 2px @grey-light;
+ border: solid 2px @border-color;
border-radius: 8px;
height: @home-menu-tile-height - 4px;
min-width: @home-menu-tile-min-width;
max-width: @home-menu-tile-max-width;
&.favoriteItem {
- border: solid 2px @dark-color-theme;
+ border: solid 2px @border-color;
}
.menu-link {
font-size: 10px;
@@ -171,7 +173,7 @@ input[type="submit"], .smallSubmit{
right: 5px;
}
&:hover {
- box-shadow: 3px 3px 12px @shadow-color;
+ box-shadow: 0 0 15px @shadow-color;
a {
text-decoration: none;
}
@@ -180,7 +182,7 @@ input[type="submit"], .smallSubmit{
.button-bar, .tab-bar {
&.tab-bar{
- border-bottom:1px solid @light2-color-theme;
+ border-bottom:1px solid @border-color;
padding-bottom:0.8rem;
}
margin-bottom:0.8rem;
@@ -189,36 +191,36 @@ input[type="submit"], .smallSubmit{
flex-wrap: wrap;
align-items: center;
column-gap: 0.5rem;
- row-gap: 1rem;
+ row-gap: 1rem;
li {
a {
display:block;
background-color: white;
border-radius: 0.5rem;
padding:0.5rem 0.6rem;
- color:@medium-color-theme;
+ color:@dark-color-theme;
font-weight: 600;
font-size:1.2rem;
}
&.selected a, &:hover a{
- color: @main-color-theme;
- background-color:@dark-color-theme
+ color: @light-color-theme;
+ background-color:@main-color-theme
}
}
.buttontext{
a{
- background: @main-color-theme;
- color:@dark-color-theme;
+ background: @light-color-theme;
+ color:@main-color-theme;
&:hover{
- color: @main-color-theme;
- background:@dark-color-theme;
+ color: @light-color-theme;
+ background:@main-color-theme;
}
}
}
}
&.button-style-1 > a{
- background: @main-color-theme;
- color:@dark-color-theme;
+ background: @light-color-theme;
+ color:@main-color-theme;
padding:0.5rem 0.8rem;
column-gap:1rem;
border-radius: 0.5rem;
@@ -226,13 +228,13 @@ input[type="submit"], .smallSubmit{
margin-right:0.5rem;
font-weight: 600;
&:hover{
- color: @main-color-theme;
- background:@dark-color-theme;
- }
+ color: @light-color-theme;
+ background:@main-color-theme;
+ }
}
&.button-style-2 > a{
background: white;
- color:@medium-color-theme;
+ color:@dark-color-theme;
padding:0.5rem 0.8rem;
column-gap:1rem;
border-radius: 0.5rem;
@@ -240,15 +242,15 @@ input[type="submit"], .smallSubmit{
margin-right:0.5rem;
font-weight: 600;
&:hover{
- color: @main-color-theme;
- background:@dark-color-theme;
- }
+ color: @light-color-theme;
+ background:@main-color-theme;
+ }
}
}
a.buttontext{
- background: @main-color-theme;
- color:@dark-color-theme;
+ background: @light-color-theme;
+ color:@main-color-theme;
padding:0.5rem 0.8rem;
column-gap:1rem;
border-radius: 0.5rem;
@@ -257,9 +259,9 @@ a.buttontext{
font-weight: 600;
margin:0.3rem;
&:hover{
- color: @main-color-theme;
- background:@dark-color-theme;
- }
+ color: @light-color-theme;
+ background:@main-color-theme;
+ }
}
/*** HEADER STYLE ***/
@@ -292,15 +294,15 @@ a.buttontext{
align-items: center;
margin-left: 1rem;
.app-btn{
- opacity:0.85;
+ opacity:0.85;
padding:1.8rem 0.9rem;
border-top-left-radius :0.4rem;
border-top-right-radius :0.4rem;
&.selected{
- opacity:1;
+ opacity:1;
background-color:white;
&:hover{
- opacity:1;
+ opacity:1;
background-color:white;
}
#app-selected {
@@ -308,7 +310,7 @@ a.buttontext{
color: @font-color-for-main
}
}
- }
+ }
&:hover{
opacity:1;
}
@@ -338,7 +340,7 @@ a.buttontext{
font-weight: 500;
span{
width:4rem;
- opacity:0.85;
+ opacity:0.85;
padding:0.5rem 0.9rem;
border-top-left-radius :0.4rem;
border-top-right-radius :0.4rem;
@@ -346,13 +348,13 @@ a.buttontext{
&:hover span{
opacity: 1;
cursor: pointer;
- background-color: @main-color-theme;
+ background-color: @light-color-theme;
color: @font-color-for-main;
}
- }
+ }
#more-app:hover #more-app-list {
display: block;
- }
+ }
#more-app-list {
display: none;
position: absolute;
@@ -361,29 +363,29 @@ a.buttontext{
background-color: rgba(255, 255, 255, .9);
border-radius: 4px;
padding:0 2rem;
- box-shadow: 0 0 50px 0 rgba(82,63,105,.15);
- li {
- margin:1rem 0.5rem;
+ box-shadow: 0 0 50px 0 @shadow-color;
+ li {
+ margin:1rem 0.5rem;
a {
display:block;
padding:0.2rem 0.5rem;
color: @font-color-for-main;
&:hover{
- color: @dark-color-theme;
+ color: @main-color-theme;
}
}
- }
+ }
li.selected {
background-color: rgba(255, 255, 255, .9);
a {
- color: @dark-color-theme;
+ color: @main-color-theme;
}
a:hover {
color: @font-color-for-main;
- background-color: @main-color-theme;
+ background-color: @light-color-theme;
}
}
- }
+ }
}
}
#main-nav-bar-right {
@@ -419,11 +421,11 @@ a.buttontext{
font-size: 1.4rem;
position: absolute;
top:@app-bar-height;
- right:2rem;
+ right:2rem;
background-color: rgba(255, 255, 255, .9);
border-radius: 4px;
padding:0 2rem;
- box-shadow: 0 0 50px 0 rgba(82,63,105,.15);
+ box-shadow: 0 0 50px 0 @shadow-color;
padding:2rem;
z-index: 15;
color: @font-color-for-main;
@@ -432,23 +434,23 @@ a.buttontext{
justify-content: center;
align-items: center;
}
- #user-lang{
+ #user-lang{
span{
padding-left: 2rem;
background-position: left center;
}
}
#logout {
- color: @dark-color-theme;
+ color: @main-color-theme;
}
- }
+ }
}
}
}
#app-navigation {
width: 100%;
background-color: white;
- box-shadow: 0 10px 30px 0 rgba(82,63,105,.08);
+ box-shadow: 0 0 15px 0 @shadow-color;
h2 {
display: none;
}
@@ -458,23 +460,21 @@ a.buttontext{
column-gap: 0.5rem;
padding: 1rem;
li {
- li{
- &.selected, &:hover{
+ li{
+ &.selected, &:hover{
a{
- background-color: @main-color-theme;
+ background-color: @light-color-theme;
border-radius: 0.5rem;
- color: @dark-color-theme;
- display: flex;
+ color: @main-color-theme;
}
}
a{
padding:0.5rem 0.8rem;
- color:@medium-color-theme;
+ color:@dark-color-theme;
font-weight: 600;
font-size:1.2rem;
- display: flex;
}
- }
+ }
}
}
}
@@ -496,9 +496,9 @@ a.buttontext{
margin-left:1%
}
}
- .left {
- float:left;
- width: 12%;
+ .left {
+ float:left;
+ width: 12%;
input[type="text"]{
width: ~"calc(100% - 2rem)"
}
@@ -522,7 +522,7 @@ a.buttontext{
}
.nocolumns {
width: auto;
- }
+ }
}
.lefthalf {
float: left;
@@ -544,17 +544,17 @@ a.buttontext{
/* ----------------------------------- */
.screenlet {
border-radius: 0.5rem;
- box-shadow:0 0 30px 0 rgba(82,63,105,.05) ;
+ box-shadow:0 0 15px 0 @shadow-color;
margin-bottom: 2rem;
overflow:auto;
.screenlet-title-bar {
position: relative;
- color: @dark-color-theme;
+ color: @main-color-theme;
background-color: white;
padding:1.2rem 0.8rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
- border-bottom: 1px solid @font-color-for-dark ;
+ border-bottom: 1px solid @border-color;
h1, .h1, h2, .h2, h3, .h3{
background: none;
color:@font-color-for-main;
@@ -569,7 +569,7 @@ a.buttontext{
padding: 0.2rem 0.3rem;
font-size: 1.35rem;
font-weight: 600;
- color:@medium-color-theme
+ color:@dark-color-theme
}
.basic-nav{
margin-right:2.7rem;
@@ -582,12 +582,12 @@ a.buttontext{
color: white;
font-size: 1.2rem;
font-weight: 600;
- background: @font-color-for-light;
+ background: @main-color-theme;
border-radius:0.3rem;
text-transform: uppercase;
&:hover{
- background: @main-color-theme;
- color: @font-color-for-light;
+ background: @light-color-theme;
+ color: @main-color-theme;
}
}
}
@@ -597,20 +597,17 @@ a.buttontext{
display:flex;
justify-content: space-between;
align-items:center;
- li {
- display: flex;
- }
a {
color: #222;
display: block;
&:hover {
- color: @main-color-theme;
+ color: @light-color-theme;
text-decoration: none;
}
}
.disabled {
opacity:0.75;
- }
+ }
.collapsed, .collapsed:hover {
background: url("images/plus-circle.svg") no-repeat center center / cover;
display: inline-block;
@@ -650,10 +647,10 @@ a.buttontext{
h3{
font-size: 1.4rem;
font-weight: 600;
- color:@medium-color-theme;
+ color:@dark-color-theme;
position: relative;
padding:1.4rem 1.1rem;
- border-bottom: 1px solid @font-color-for-dark ;
+ border-bottom: 1px solid @border-color ;
}
form{
fieldset{
@@ -663,10 +660,10 @@ a.buttontext{
>div {
margin-bottom: 1rem;
label{
- color:@shadow-color-light;
+ color:@grey-dark;
font-weight:500;
- font-size:1.3rem;
- }
+ font-size:1.3rem;
+ }
}
}
}
@@ -698,14 +695,14 @@ a.buttontext{
/* Fieldgroup Style */
/*------------------------------------ */
.fieldgroup {
- border-bottom: 1px solid @font-color-for-dark ;
+ border-bottom: 1px solid @border-color ;
padding: 0.5rem;
}
.fieldgroup-title-bar {
padding: 0.2rem 0.3rem;
font-size: 1.3rem;
font-weight: 600;
- color: @medium-color-theme;
+ color: @dark-color-theme;
ul {
.expanded .expanded:hover {
background: url("https://localhost:8443/helveticus/images/minus-circle.svg") no-repeat center left/ 14px 14px ;
@@ -739,9 +736,9 @@ a.buttontext{
align-items: center;
a {
display: block;
- background: @main-color-theme;
+ background: @light-color-theme;
border-radius: 0.5rem;
- color: @dark-color-theme;
+ color: @main-color-theme;
padding:0.5rem 0.8rem;
font-weight: 600;
font-size:1.2rem;
@@ -751,7 +748,7 @@ a.buttontext{
padding: 0 1em 0 1em;
text-decoration: none;
&:hover {
- background-color: @main-color-theme;
+ background-color: @light-color-theme;
color: @font-color-for-main;
}
}
@@ -775,10 +772,10 @@ a.buttontext{
background-position: center center;
background-size: 16px;
&:hover{
- background-color: @dark-color-theme ;
+ background-color: @main-color-theme ;
}
}
- }
+ }
.nav-first-disabled,
.nav-previous-disabled,
.nav-next-disabled,
@@ -793,7 +790,7 @@ a.buttontext{
background-position: center center;
background-size: 16px;
}
- }
+ }
.nav-first a,
.nav-first-disabled span{
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%233699ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>');
@@ -822,7 +819,7 @@ a.buttontext{
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23e1f0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>');
}
}
-
+
.nav-first-disabled,
.nav-previous-disabled,
.nav-next-disabled,
@@ -855,7 +852,7 @@ input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
- border: 0.15rem solid @font-color-for-dark ;
+ border: 0.15rem solid @border-color;
padding: 0.5rem 0.8rem;
border-radius: 0.5rem;
}
@@ -918,7 +915,7 @@ span.tooltip{
content: "";
width: 150px;
min-width: 150px;
- background-color: @light-color-theme;
+ background-color: @grey-lighter;
padding: 2px 20px 2px 20px;
border-radius: 8px 8px 8px 8px;
cursor: pointer;
@@ -928,7 +925,7 @@ span.tooltip{
content: "";
position: relative;
left:-35px;
- background-color: @dark-color-theme;
+ background-color: @main-color-theme;
min-height: 10px;
min-width: 10px;
padding-left: 4px;
@@ -948,17 +945,17 @@ span.tooltip{
color: #000000;
margin-bottom: 1em;
width: 100%;
- tr{
- th{
+ tr{
+ th{
font-weight: 600;
text-align: left;
- }
+ }
&.header-row{
font-weight: 600;
text-align: left;
td {
padding:1rem 0.5rem;
- border-bottom: 0.1em solid @grey-medium;
+ border-bottom: 0.1em solid @border-color;
color:@font-color-for-main;
text-transform: uppercase;
a {
@@ -982,13 +979,13 @@ span.tooltip{
color: white;
font-size: 1.2rem;
font-weight: 600;
- background: @font-color-for-light;
+ background: @main-color-theme;
border-radius:0.3rem;
text-transform: uppercase;
margin:0.5rem 0;
&:hover{
- background: @main-color-theme;
- color: @font-color-for-light
+ background: @light-color-theme;
+ color: @main-color-theme
}
}
}
@@ -1008,7 +1005,7 @@ span.tooltip{
}
}
.alternate-row {
- background-color: @grey-light;
+ background-color: @grey-lighter;
}
.selected {
background: @warningLight;
@@ -1021,7 +1018,7 @@ span.tooltip{
}
.alternate-rowValidate {
background: @successLight;
- }
+ }
.Warn {
background: @danger;
}
@@ -1035,24 +1032,27 @@ span.tooltip{
th, td{
padding:1rem 0.5rem;
font-weight: 600;
- color:@shadow-color-light;
+ color:@grey-dark;
text-transform: uppercase;
- background-color: @light2-color-theme;
+ background-color: @grey-light;
.sort-order-asc{
background: url(/images/arrow-gr-up.png) no-repeat right;
- padding-right: 20px;
+ padding-right: 20px;
}
.sort-order-desc{
background: url(/images/arrow-gr-dw.png) no-repeat right;
- padding-right: 20px;
+ padding-right: 20px;
}
.sort-order{
background: url(/images/arrow-gr.png) no-repeat right;
- padding-right: 20px;
- color:@shadow-color-light
+ padding-right: 20px;
+ color:@grey-dark;
}
}
}
+ .select2-container--default .select2-search--inline input.select2-search__field {
+ width: auto !important;
+ }
}
form table,
form .basic-table,
@@ -1065,10 +1065,10 @@ form .basic-table,
width: auto;
tr {
>td {
- padding:0.5rem;
+ padding:0.5rem;
&.has-tooltip{
padding-bottom:1.7rem;
- }
+ }
}
&.has-tooltip td{
padding-bottom: 2.5rem;
@@ -1098,7 +1098,7 @@ form .basic-table,
width: 0;
height: 0;
border-right: 10px solid transparent;
- border-bottom: 10px solid @grey-dark;
+ border-bottom: 10px solid @border-color;
border-left: 10px solid transparent;
}
&:after{
@@ -1108,17 +1108,17 @@ form .basic-table,
width: 0;
height: 0;
border-right: 10px solid transparent;
- border-top: 10px solid @grey-dark;
+ border-top: 10px solid @border-color;
border-left: 10px solid transparent;
@media screen and (max-width: 1349px) {
right: -5px;
}
}
&.btn-sort-asc:before{
- border-bottom: 10px solid @main-color-theme;
+ border-bottom: 10px solid @light-color-theme;
}
&.btn-sort-desc:after{
- border-top: 10px solid @main-color-theme;
+ border-top: 10px solid @light-color-theme;
}
}
.has-tooltip{
@@ -1167,9 +1167,9 @@ form .basic-table,
padding:0.3rem;
font-size: 1.8rem;
font-weight: 600;
- color:@medium-color-theme
+ color:@dark-color-theme
}
-}
+}
.webToolList{
margin-left:2rem;
li{
@@ -1226,3 +1226,7 @@ form .basic-table,
#EditProdCatalog .basic-table td span.tooltip{
position:static
}
+
+.select2-container--default .select2-selection--multiple{
+ border-color: @border-color !important
+}
\ No newline at end of file
diff --git a/themes/helveticus/webapp/helveticus/helveticus-ruby.less b/themes/helveticus/webapp/helveticus/helveticus-ruby.less
new file mode 100644
index 0000000..9863aca
--- /dev/null
+++ b/themes/helveticus/webapp/helveticus/helveticus-ruby.less
@@ -0,0 +1,13 @@
+/*Helveticus RUBY colors */
+@red: #f65644;
+@red-light: #ffe2e5;
+@red-dark: #382a28;
+
+@header-color: @red;
+@footer-color: @red;
+@light-color-theme : @red-light;
+@main-color-theme : @red;
+@dark-color-theme : @red-dark;
+
+/* include main less theme file */
+@import (less) "helveticus-main-theme.less";
\ No newline at end of file
diff --git a/themes/helveticus/webapp/helveticus/helveticus-saphir.less b/themes/helveticus/webapp/helveticus/helveticus-saphir.less
new file mode 100644
index 0000000..6aef459
--- /dev/null
+++ b/themes/helveticus/webapp/helveticus/helveticus-saphir.less
@@ -0,0 +1,13 @@
+/* Helveticus SAPHIR colors */
+@blue: #3699ff;
+@blue-light: #e1f0ff;
+@blue-dark: #5d5f69;
+
+@header-color: @blue;
+@footer-color: @blue;
+@light-color-theme : @blue-light;
+@main-color-theme : @blue;
+@dark-color-theme : @blue-dark;
+
+/* include main less theme file */
+@import (less) "helveticus-main-theme.less";
\ No newline at end of file
diff --git a/themes/helveticus/webapp/helveticus/helveticus.less b/themes/helveticus/webapp/helveticus/helveticus.less
index d1ad438..e6f3f39 100644
--- a/themes/helveticus/webapp/helveticus/helveticus.less
+++ b/themes/helveticus/webapp/helveticus/helveticus.less
@@ -1,30 +1,6 @@
-/*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- *******************************************************************************/
-
-/* helveticus colors */
-@blue: #00b6d1;
-@blue-dark: #3699ff;
-@blue-main: #e1f0ff;
-@blue-medium: #7e8299;
-@blue-light: #f1f7ff;
-@blue-light2: #E4E6EF;
-@grey-light: #f2f3f7;
+/**COMMON COLOR**/
+@grey-lighter: #f2f3f7;
+@grey-light: #dfe0e4;
@grey: #b3b3b3;
@grey-medium: #d7dae7;
@grey-dark: #3F4254;
@@ -37,20 +13,41 @@
@warning: #ff9100;
@warningLight: #fff6ec;
+@font-color-for-dark : @grey;
+@font-color-for-main : @grey-darker;
+@border-color:@grey-light;
+@shadow-color : rgba(72, 90, 117, 0.05);
+
+/************************************************/
+
+/* SAPHIR colors */
+@blue: #3699ff;
+@blue-light: #e1f0ff;
+@blue-dark: #5d5f69;
+
+/* RUBY colors */
+@red: #f65644;
+@red-light: #ffe2e5;
+@red-dark: #382a28;
+
+/* EMERALD colors */
+@green: #1BC5BD;
+@green-light: #dcfffd;
+@green-dark: #133d3b;
+
+/* AMBER colors */
+@yellow: #FFA800;
+@yellow-light: #FFF4DE;
+@yellow-dark: #574217;
+
+
/* helveticus theme */
@header-color: @blue;
@footer-color: @blue;
-@main-color-theme : @blue-main;
-@dark-color-theme : @blue-dark;
-@medium-color-theme : @blue-medium;
@light-color-theme : @blue-light;
-@light2-color-theme : @blue-light2;
-@font-color-for-dark : @grey;
-@font-color-for-main : @grey-darker;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : black;
-@shadow-color-light : @grey-dark;
+@main-color-theme : @blue;
+@dark-color-theme : @blue-dark;
+
/* include main less theme file */
-@import (less) "helveticus-main-theme.less";
+@import (less) "helveticus-main-theme.less";
\ No newline at end of file
diff --git a/themes/helveticus/webapp/helveticus/images/themeHelveticus.png b/themes/helveticus/webapp/helveticus/images/themeHelveticus.png
deleted file mode 100644
index 9727bdd..0000000
Binary files a/themes/helveticus/webapp/helveticus/images/themeHelveticus.png and /dev/null differ
diff --git a/themes/helveticus/webapp/helveticus/images/themeHelveticus_amber.png b/themes/helveticus/webapp/helveticus/images/themeHelveticus_amber.png
new file mode 100644
index 0000000..3f1a934
Binary files /dev/null and b/themes/helveticus/webapp/helveticus/images/themeHelveticus_amber.png differ
diff --git a/themes/helveticus/webapp/helveticus/images/themeHelveticus_emerald.png b/themes/helveticus/webapp/helveticus/images/themeHelveticus_emerald.png
new file mode 100644
index 0000000..47a6d2e
Binary files /dev/null and b/themes/helveticus/webapp/helveticus/images/themeHelveticus_emerald.png differ
diff --git a/themes/helveticus/webapp/helveticus/images/themeHelveticus_ruby.png b/themes/helveticus/webapp/helveticus/images/themeHelveticus_ruby.png
new file mode 100644
index 0000000..b28a2cd
Binary files /dev/null and b/themes/helveticus/webapp/helveticus/images/themeHelveticus_ruby.png differ
diff --git a/themes/helveticus/webapp/helveticus/images/themeHelveticus_saphir.png b/themes/helveticus/webapp/helveticus/images/themeHelveticus_saphir.png
new file mode 100644
index 0000000..deeef6f
Binary files /dev/null and b/themes/helveticus/webapp/helveticus/images/themeHelveticus_saphir.png differ
diff --git a/themes/helveticus/webapp/helveticus/javascript.css b/themes/helveticus/webapp/helveticus/javascript.css
index 0555a40..af77e63 100644
--- a/themes/helveticus/webapp/helveticus/javascript.css
+++ b/themes/helveticus/webapp/helveticus/javascript.css
@@ -18,7 +18,7 @@
*/
/* ----------------------------------------------------------------------- */
-/* This CSS file is used for the Helveticus visual theme JavaScript styles.*/
+/* This CSS file is used for the Flat Grey visual theme JavaScript styles. */
/* ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
diff --git a/themes/helveticus/widget/Theme.xml b/themes/helveticus/widget/Theme.xml
index 0567553..e2b1587 100644
--- a/themes/helveticus/widget/Theme.xml
+++ b/themes/helveticus/widget/Theme.xml
@@ -22,9 +22,21 @@ under the License.
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://ofbiz.apache.org/Widget-Theme" xsi:schemaLocation="http://ofbiz.apache.org/Widget-Theme http://ofbiz.apache.org/dtds/widget-theme.xsd">
<visual-themes>
- <visual-theme id="HELVETICUS" display-name="Helveticus">
- <description>${util:label('CommonEntityLabels', 'VisualTheme.description.HELVETICUS', locale)}</description>
- <screenshot location="/helveticus/images/themeHelveticus.png"/>
+ <visual-theme id="HELVETICUS_SAPHIR" display-name="Helveticus - Sapphire">
+ <description>${util:label('CommonEntityLabels', 'VisualTheme.description.HELVETICUS_SAPHIR', locale)}</description>
+ <screenshot location="/helveticus/images/themeHelveticus_saphir.png"/>
+ </visual-theme>
+ <visual-theme id="HELVETICUS_AMBER" display-name="Helveticus - Amber">
+ <description>${util:label('CommonEntityLabels', 'VisualTheme.description.HELVETICUS_AMBER', locale)}</description>
+ <screenshot location="/helveticus/images/themeHelveticus_amber.png"/>
+ </visual-theme>
+ <visual-theme id="HELVETICUS_RUBY" display-name="Helveticus - Ruby">
+ <description>${util:label('CommonEntityLabels', 'VisualTheme.description.HELVETICUS_RUBY', locale)}</description>
+ <screenshot location="/helveticus/images/themeHelveticus_ruby.png"/>
+ </visual-theme>
+ <visual-theme id="HELVETICUS_EMERALD" display-name="Helveticus - Emerald">
+ <description>${util:label('CommonEntityLabels', 'VisualTheme.description.HELVETICUS_EMERALD', locale)}</description>
+ <screenshot location="/helveticus/images/themeHelveticus_emerald.png"/>
</visual-theme>
</visual-themes>