apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

config: extend basic customize theming options (#718)

Browse Source 
Customize link hover color
Customize loading color
Customize navigation menu color

Fixes #712
Fixes #713
Fixes #714

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Hoang Nguyen 2020-09-23 15:59:51 +07:00 committed by Rohit Yadav
parent 173b8e30ca
commit 8ad082ddb5
6 changed files with 160 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/docs/customize.md
View File

@ -47,7 +47,13 @@ Customize themes like colors, border color, etc.
}
```
- `@logo-background-color` changes the logo background color.
- `@navigation-background-color` changes the navigation menu background color.
- `@navigation-text-color` changes the navigation text color.
- `@primary-color` change the major background color of the page (background button, icon hover, etc).
- `@link-color` changes the link color.
- `@link-hover-color` changes the link hover color.
- `@loading-color` changes the message loading color and page loading bar at the top page.
- `@success-color` change success state color.
- `@processing-color` change processing state color. Exp: progress status.
- `@warning-color` change warning state color.

5
ui/public/config.json vendored
View File

@ -11,8 +11,13 @@
"500": "assets/500.png"
},
"theme": {
"@logo-background-color": "#ffffff",
"@navigation-background-color": "#ffffff",
"@navigation-text-color": "rgba(0, 0, 0, 0.65)",
"@primary-color": "#1890ff",
"@link-color": "#1890ff",
"@link-hover-color": "#40a9ff",
"@loading-color": "#1890ff",
"@processing-color": "#1890ff",
"@success-color": "#52c41a",
"@warning-color": "#faad14",

3
ui/src/assets/icons/kubernetes.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

2
ui/src/components/header/Logo.vue
View File

@ -56,12 +56,10 @@ export default {
line-height: 64px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
}
.sider.light .logo {
background: #fff;
box-shadow: 1px 1px 0px 0px #e8e8e8;
}

148
ui/src/style/vars.less
View File

@ -15,8 +15,6 @@
// specific language governing permissions and limitations
// under the License.
@import "~ant-design-vue/lib/style/themes/default.less";
@logo-width: 256px;
@logo-height: 64px;
@banner-width: 450px;
@ -24,6 +22,26 @@
@error-width: 256px;
@error-height: 256px;
@logo-background-color: #ffffff;
@navigation-background-color: #ffffff;
@navigation-text-color: rgba(0, 0, 0, 0.65);
@primary-color: #1890ff;
@link-color: @primary-color;
@link-hover-color: #40a9ff;
@processing-color: @primary-color;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;
@font-size-base: 14px;
@heading-color: rgba(0, 0, 0, 0.85);
@text-color: rgba(0, 0, 0, 0.65);
@text-color-secondary: rgba(0, 0, 0, 0.45);
@disabled-color: rgba(0, 0, 0, 0.25);
@border-color-base: #d9d9d9;
@border-radius-base: 4px;
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
@loading-color: @primary-color;
.ant-layout-sider-children .logo-image {
width: @logo-width;
height: @logo-height;
@ -48,10 +66,128 @@
a {
color: @link-color;
background-color: transparent;
&:hover {
color: @link-hover-color;
}
}
a:hover {
color: color(~`colorPalette("@{primary-color}", 5)`);
.ant-message-info .anticon,
.ant-message-loading .anticon {
color: @loading-color;
}
a:active {
color: color(~`colorPalette("@{primary-color}", 7)`);
#nprogress {
.bar {
background-color: @loading-color;
}
}
.sider .logo,
.sider.light .logo {
background-color: @logo-background-color;
box-shadow: 1px 1px 0px 0px #e8e8e8;
}
.ant-menu {
background: @navigation-background-color;
}
.ant-menu-submenu-popup,
.ant-menu-submenu > .ant-menu,
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
background-color: @navigation-background-color;
}
.ant-menu-item > a,
.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item > a {
color: @navigation-text-color;
}
.ant-menu-item-selected > a, .ant-menu-item-selected > a:hover {
color: @primary-color;
}
.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-inline .ant-menu-item,
.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-submenu-title {
color: @navigation-text-color;
}
.ant-menu-submenu-vertical ant-menu-submenu-selected,
.ant-menu-vertical .ant-menu-submenu-selected,
.ant-menu-vertical-left .ant-menu-submenu-selected,
.ant-menu-vertical-right .ant-menu-submenu-selected {
color: @primary-color;
.ant-menu-submenu-title {
color: @primary-color;
}
}
.kubernet-icon path {
color: @navigation-text-color;
}
.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover,
.ant-menu-dark .ant-menu-item:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover,
.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-submenu-title:hover
{
color: @primary-color;
.custom-icon path {
color: @primary-color;
}
}
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
background-color: @navigation-text-color;
}
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before {
background-color: @primary-color;
}

5
ui/theme.config.js
View File

@ -27,8 +27,13 @@ const options = {
antDir: resolve('./node_modules/ant-design-vue'),
varFile: resolve('./src/style/vars.less'),
themeVariables: [
'@logo-background-color',
'@navigation-background-color',
'@navigation-text-color',
'@primary-color',
'@link-color',
'@link-hover-color',
'@loading-color',
'@success-color',
'@warning-color',
'@processing-color',