ZK LESS Variables"
(Created page with "{{ZKStyleCustomizationGuidePageHeader}} __TOC__ The LESS variables defined here is for ZK default Theme (Breeze). You can change these variables when customizing a whole new lo...") |
|||
(6 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{ZKStyleCustomizationGuidePageHeader}} | {{ZKStyleCustomizationGuidePageHeader}} | ||
+ | |||
+ | {{Deprecated| url=[[ZK_Developer's_Reference/Theming_and_Styling/Creating_Custom_Themes/Theme_Template| ZK Developer's Reference ...Theme Template]]}} | ||
__TOC__ | __TOC__ | ||
− | + | LESS variables defined here are for ZK's default theme - Breeze. You can change these variables when customizing a theme with a new look and feel. | |
= Typography = | = Typography = | ||
− | Define base font styles | + | Define base font styles including font family, font size and line-height. |
<source lang="css"> | <source lang="css"> | ||
Line 74: | Line 76: | ||
= Icon Font = | = Icon Font = | ||
− | Define icon font color (all icon font used in ZK comes from [http://fortawesome.github.io/Font-Awesome/ font-awesome]). | + | Define icon's font color (all icon font used in ZK comes from [http://fortawesome.github.io/Font-Awesome/ font-awesome]). |
<source lang="css"> | <source lang="css"> | ||
Line 136: | Line 138: | ||
= Component Independent Variables = | = Component Independent Variables = | ||
− | + | Above described are common variables that are shared among every component. Below we will define independent variables that uniquely belongs to each individual component. | |
== Button, Input, Table == | == Button, Input, Table == | ||
− | Define global border and background style for specific DOM | + | Define global border and background style for specific DOM element buttons, inputs, and tables. |
<source lang="css"> | <source lang="css"> | ||
// Button | // Button | ||
Line 150: | Line 152: | ||
@inputBackgroundColor: @baseBackgroundColor; | @inputBackgroundColor: @baseBackgroundColor; | ||
// Table | // Table | ||
− | @ | + | @meshTitleBorderColor: @baseBorderColor; |
− | @ | + | @meshContentBorderColor: #FFFFFF; |
− | @ | + | @meshBackgroundColor: #FFFFFF; |
− | @ | + | @meshStripeBackgroundColor: #F7F7F7; |
− | @ | + | @meshFootBackgroundColor: #FAFAFA; |
+ | @meshTitleHoverStart: #F2F9FE; | ||
+ | @meshTitleHoverEnd: #D6F0FD; | ||
+ | @meshContentHoverStart: #F2F9FE; | ||
+ | @meshContentHoverEnd: #D6F0FD; | ||
</source> | </source> | ||
− | == | + | == Container Components == |
<source lang="css"> | <source lang="css"> | ||
// window | // window | ||
Line 163: | Line 169: | ||
@windowBackgroundColor: #D9E5EF; | @windowBackgroundColor: #D9E5EF; | ||
@windowFramePadding: 4px; | @windowFramePadding: 4px; | ||
+ | |||
+ | // tabbox | ||
+ | @tabSelectedBackgroundColor: #FFFFFF; | ||
+ | |||
+ | // panel | ||
+ | @panelBorderColor: #9C9C9C; | ||
+ | @panelBackgroundColor: #E1EDF4; | ||
+ | @panelBodyBackground: #F0F6F9; | ||
+ | </source> | ||
+ | |||
+ | == Data Components == | ||
+ | <source lang="css"> | ||
+ | // group (group, listgroup) | ||
+ | @groupGradientStart: #FFFFFF; | ||
+ | @groupGradientEnd: #E9F2FB; | ||
// paging | // paging | ||
@pagingColor: @textColorBlue; | @pagingColor: @textColorBlue; | ||
+ | @pagingSelectedColor: @textColorGrayDark; | ||
@pagingBorderColor: @baseBorderColor; | @pagingBorderColor: @baseBorderColor; | ||
+ | @pagingActiveBorderColor: #A9A9A9; | ||
@pagingBackgroundColor: #FAFAFA; | @pagingBackgroundColor: #FAFAFA; | ||
+ | @pagingSelectedBackgroundColor:#E6E6E6; | ||
+ | |||
+ | // biglistbox | ||
+ | @biglistboxBackgroundColor: #F0F0F0; | ||
+ | @biglistboxFrozenBackground: #E0E0E0; | ||
+ | |||
+ | // mesh for ie8 | ||
+ | @meshBackgroundColorIE8: #F5F5F5; | ||
+ | @meshHoverBackgroundColorIE8: #E5F7FF; | ||
+ | @meshSelectedBackgroundColorIE8: #E5F7FF; | ||
+ | @meshSelectedHoverBackgroundColorIE8: #D9F2FF; | ||
+ | @meshGroupBackgroundColorIE8: #EDF6FF; | ||
+ | @meshGroupFooterBackgroundColorIE8: #F2F9FF; | ||
+ | </source> | ||
+ | |||
+ | == Essential Components == | ||
+ | <source lang="css"> | ||
+ | // popup | ||
+ | @popupBorderColor: @baseBorderColor; | ||
+ | @popupBackgroundColor: @baseBackgroundColor; | ||
+ | @popupGradientStart: @baseBackgroundColor; | ||
+ | @popupGradientEnd: #F5F5F5; | ||
+ | |||
+ | // notification | ||
+ | @notificationInfoColor: rgba(33, 155, 166, 0.88); | ||
+ | @notificationWarningColor: rgba(234, 67, 23, 0.88); | ||
+ | @notificationErrorColor: rgba(190, 0, 5, 0.88); | ||
+ | @notificationArrowColor: rgba(51, 51, 51, 0.9); | ||
+ | @notificationInfoColorIE8: rgb(33, 155, 166); | ||
+ | @notificationWarningColorIE8: rgb(234, 67, 23); | ||
+ | @notificationErrorColorIE8: rgb(190, 0, 5); | ||
+ | @notificationArrowColorIE8: rgb(51, 51, 51); | ||
+ | |||
+ | // menu | ||
+ | @menuImageSize: 16px; | ||
+ | @menuActiveBorderColorTR: #838383; | ||
+ | @menuActiveBorderColorBL: #B6B6B6; | ||
+ | @menuPopupBackground: #FAFAFA; | ||
+ | @menuSeparatorBorderColor: #838383; | ||
+ | @menuSeparatorBackgroundColor: #B8B8B8; | ||
+ | @menuPopupSeparatorBorder: #FFFFFF; | ||
+ | @menuPopupSeparatorBackground: #E0E0E0; | ||
+ | |||
+ | // navbar | ||
+ | @navImageSize: 16px; | ||
+ | @navColor: #333333; | ||
+ | @navBorderColor: #F4F4F3; | ||
+ | @navBackgroundColor: #FFFFFF; //first level, each level is 3% darker (darken(@navBackgroundColor, 3 * level)); | ||
+ | @navHoverBackgroundColor: #E8E8E8; | ||
+ | @navSelectedColor: #FFFFFF; | ||
+ | @navSelectedBackgroundColor: #372F2B; | ||
+ | @navSeparatorColor: #838383; | ||
+ | @navCollapsedWidth: 32px; | ||
+ | </source> | ||
+ | |||
+ | == Input Components == | ||
+ | <source lang="css"> | ||
+ | // calendar | ||
+ | @calendarTitleColor: @textColorGrayLight; | ||
+ | @calendarTitleHoverColor: @textColorGrayLight; | ||
+ | @calendarCellColor: @textColorGrayLight; | ||
+ | @calendarSelectedColor: #008BB6; | ||
+ | @calendarSelectedHoverColor: #008BB6; | ||
+ | @weekendColor: @textColorOrange; | ||
+ | @weekendBackgroundColor: #F2F2F2; | ||
+ | @weekColor: @textColorGrayLight; | ||
+ | @weekofyearColor: #FFFFFF; | ||
+ | @weekofyearBackgroundColor: #636363; | ||
+ | |||
+ | // slider | ||
+ | @sliderBorderColor: @baseBorderColor; | ||
+ | @sliderActiveBorderColor: #838383; | ||
+ | |||
+ | // errorbox (input constraint) | ||
+ | @errorboxColor: #990000; | ||
+ | @errorboxBorderColor: #990000; | ||
+ | @errorboxBackgroundColor: #FFEEEE; | ||
+ | |||
+ | // progressmeter | ||
+ | @progressmeterGradientStart: #E8F6FD; | ||
+ | @progressmeterGradientEnd: #C6E9FA; | ||
+ | |||
+ | // colorbox | ||
+ | @colorboxBorderColor: #9C9C9C; | ||
+ | |||
+ | // chosenbox | ||
+ | @chosenboxItemBorderColor: #B3B3B3; | ||
+ | @chosenboxCreateIconColor: @textColorGreen; | ||
+ | </source> | ||
+ | |||
+ | == Layout Components == | ||
+ | <source lang="css"> | ||
+ | // splitter (hbox, vbox, borderlayout) | ||
+ | @splitterSize: 8px; | ||
+ | @splitterGradientStart: #FDFDFD; | ||
+ | @splitterGradientEnd: #F1F1F1; | ||
+ | |||
</source> | </source> | ||
+ | == Misc Components == | ||
+ | <source lang="css"> | ||
+ | // mask and loading | ||
+ | @maskBackgroundColor: #E0E1E3; | ||
+ | @loadingBackgroundColor: #E3E3E3; | ||
+ | |||
+ | // scrollbar | ||
+ | @scrollbarWidth: 16px; | ||
+ | @scrollbarHeight: 16px; | ||
+ | @scrollbarBorderColor: #838383; | ||
+ | @scrollbarBackgroundColor: #DDDDDD; | ||
+ | @scrollbarGradientStart: #FFFFFF; | ||
+ | @scrollbarGradientEnd: #CFCFCF; | ||
+ | |||
+ | // drag and drop | ||
+ | @dragColor: #FFFFFF; | ||
+ | @dragBackgroundColor: #E0EAF0; | ||
+ | @dragHoverBackgroundColor: #ADD2FF; | ||
+ | @dragAllowBorderColor: #11AA33; | ||
+ | @dragAllowBackgroundColor: #11AA33; | ||
+ | @dragDisAllowBorderColor: #C13634; | ||
+ | @dragDisAllowBackgroundColor: #C13634; | ||
+ | </source> | ||
=Version History= | =Version History= |
Latest revision as of 05:32, 7 April 2022
This article is out of date, please refer to ZK Developer's Reference ...Theme Template for more up to date information.
LESS variables defined here are for ZK's default theme - Breeze. You can change these variables when customizing a theme with a new look and feel.
Typography
Define base font styles including font family, font size and line-height.
// Font Family
@baseTitleFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseContentFontFamily: Arial, Sans-serif;
// Font Size
@baseFontSize: 14px;
@fontSizeLarge: floor(@baseFontSize * 1.15); // 16px
@fontSizeMedium: ceil(@baseFontSize * 0.85); // 12px
@fontSizeSmall: floor(@baseFontSize * 0.8); // 11px
// Line Height
@baseLineHeight: 14px;
Component sizing
Define base width and height.
// Component Height
@baseHeight: 8px;
@baseIconHeight: @baseHeight * 2; // 16px
@baseButtonHeight: @baseHeight * 3; // 24px
@baseBarHeight: @baseHeight * 4; // 32px
@baseTitleHeight: @baseHeight * 5; // 40px
// Component Width
@baseWidth: 8px;
@baseIconWidth: @baseWidth * 2; // 16px
@baseButtonWidth: @baseWidth * 3; // 24px
@baseBarWidth: @baseWidth * 4; // 32px
// Border Radius
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
Component Basic Coloring
Define text color, border color, background color and gradient colors.
// Text color
@baseTextColor: #000000;
@textColorGray: #555555;
@textColorGrayDark: #363636;
@textColorGrayLight: #636363;
// Border color
@baseBorderColor: #CFCFCF;
@headerBorderColor: #9C9C9C;
// Background color
@baseBackgroundColor: #FFFFFF;
@headerBackgroundColor: @baseBackgroundColor;
// Gradient background
@baseGradientStart: #FEFEFE;
@baseGradientEnd: #EEEEEE;
Icon Font
Define icon's font color (all icon font used in ZK comes from font-awesome).
// Icon Font
@iconColor: #636363;
@iconHoverColor: #636363;
@iconDisabledColor: #AAAAAA;
Component State
Define style for component states: active, focus, hover, disabled, invalid, read-only, selected, selectedhover, checked, and collapsed.
// Active
@activeColor: @baseTextColor;
@activeBorderColor: #499EB3;
@activeBackgroundColor: #86E2F9;
// Focus
@focusColor: @baseTextColor;
@focusBorderColor: #00B9FF;
@focusBackgroundColor: @baseGradientEnd;
// Hover
@hoverColor: @textColorGrayLight;
@hoverBorderColor: #8FB9D0;
@hoverBackgroundColor: #D6F0FD;
// Disabled
@disabledColor: #AAAAAA;
@disabledBackgroundColor: #F0F0F0;
// Invalid
@invalidBorderColor: #DD7777;
// Read-only
@readonlyBorderColor: #E6E6E6;
@readonlyBackgroundColor: #FAFAFA;
// Selected
@selectedColor: @textColorGrayLight;
@selectedBorderColor: @baseBorderColor;
@selectedBackgroundColor: #BEE7FC;
// Selected Hover
@selectedHoverColor: @textColorGrayLight;
@selectedHoverBorderColor: @baseBorderColor;
@selectedHoverBackgroundColor: #C5E7F8;
// Checked
@checkedColor: #2184BA;
@checkedBorderColor: #8E8F8F;
@checkedBackgroundColor: #F8F8F8;
// Collapsed
@collapsedBorderColor: @baseBorderColor;
@collapsedBackgroundColor: #FCFCFC;
Component Independent Variables
Above described are common variables that are shared among every component. Below we will define independent variables that uniquely belongs to each individual component.
Button, Input, Table
Define global border and background style for specific DOM element buttons, inputs, and tables.
// Button
@buttonBorderColor: #A9A9A9;
@buttonGradientStart: #FEFEFE;
@buttonGradientEnd: #EEEEEE;
// Input
@inputBorderColor: @baseBorderColor;
@inputBackgroundColor: @baseBackgroundColor;
// Table
@meshTitleBorderColor: @baseBorderColor;
@meshContentBorderColor: #FFFFFF;
@meshBackgroundColor: #FFFFFF;
@meshStripeBackgroundColor: #F7F7F7;
@meshFootBackgroundColor: #FAFAFA;
@meshTitleHoverStart: #F2F9FE;
@meshTitleHoverEnd: #D6F0FD;
@meshContentHoverStart: #F2F9FE;
@meshContentHoverEnd: #D6F0FD;
Container Components
// window
@windowBorderColor: #9C9C9C;
@windowBackgroundColor: #D9E5EF;
@windowFramePadding: 4px;
// tabbox
@tabSelectedBackgroundColor: #FFFFFF;
// panel
@panelBorderColor: #9C9C9C;
@panelBackgroundColor: #E1EDF4;
@panelBodyBackground: #F0F6F9;
Data Components
// group (group, listgroup)
@groupGradientStart: #FFFFFF;
@groupGradientEnd: #E9F2FB;
// paging
@pagingColor: @textColorBlue;
@pagingSelectedColor: @textColorGrayDark;
@pagingBorderColor: @baseBorderColor;
@pagingActiveBorderColor: #A9A9A9;
@pagingBackgroundColor: #FAFAFA;
@pagingSelectedBackgroundColor:#E6E6E6;
// biglistbox
@biglistboxBackgroundColor: #F0F0F0;
@biglistboxFrozenBackground: #E0E0E0;
// mesh for ie8
@meshBackgroundColorIE8: #F5F5F5;
@meshHoverBackgroundColorIE8: #E5F7FF;
@meshSelectedBackgroundColorIE8: #E5F7FF;
@meshSelectedHoverBackgroundColorIE8: #D9F2FF;
@meshGroupBackgroundColorIE8: #EDF6FF;
@meshGroupFooterBackgroundColorIE8: #F2F9FF;
Essential Components
// popup
@popupBorderColor: @baseBorderColor;
@popupBackgroundColor: @baseBackgroundColor;
@popupGradientStart: @baseBackgroundColor;
@popupGradientEnd: #F5F5F5;
// notification
@notificationInfoColor: rgba(33, 155, 166, 0.88);
@notificationWarningColor: rgba(234, 67, 23, 0.88);
@notificationErrorColor: rgba(190, 0, 5, 0.88);
@notificationArrowColor: rgba(51, 51, 51, 0.9);
@notificationInfoColorIE8: rgb(33, 155, 166);
@notificationWarningColorIE8: rgb(234, 67, 23);
@notificationErrorColorIE8: rgb(190, 0, 5);
@notificationArrowColorIE8: rgb(51, 51, 51);
// menu
@menuImageSize: 16px;
@menuActiveBorderColorTR: #838383;
@menuActiveBorderColorBL: #B6B6B6;
@menuPopupBackground: #FAFAFA;
@menuSeparatorBorderColor: #838383;
@menuSeparatorBackgroundColor: #B8B8B8;
@menuPopupSeparatorBorder: #FFFFFF;
@menuPopupSeparatorBackground: #E0E0E0;
// navbar
@navImageSize: 16px;
@navColor: #333333;
@navBorderColor: #F4F4F3;
@navBackgroundColor: #FFFFFF; //first level, each level is 3% darker (darken(@navBackgroundColor, 3 * level));
@navHoverBackgroundColor: #E8E8E8;
@navSelectedColor: #FFFFFF;
@navSelectedBackgroundColor: #372F2B;
@navSeparatorColor: #838383;
@navCollapsedWidth: 32px;
Input Components
// calendar
@calendarTitleColor: @textColorGrayLight;
@calendarTitleHoverColor: @textColorGrayLight;
@calendarCellColor: @textColorGrayLight;
@calendarSelectedColor: #008BB6;
@calendarSelectedHoverColor: #008BB6;
@weekendColor: @textColorOrange;
@weekendBackgroundColor: #F2F2F2;
@weekColor: @textColorGrayLight;
@weekofyearColor: #FFFFFF;
@weekofyearBackgroundColor: #636363;
// slider
@sliderBorderColor: @baseBorderColor;
@sliderActiveBorderColor: #838383;
// errorbox (input constraint)
@errorboxColor: #990000;
@errorboxBorderColor: #990000;
@errorboxBackgroundColor: #FFEEEE;
// progressmeter
@progressmeterGradientStart: #E8F6FD;
@progressmeterGradientEnd: #C6E9FA;
// colorbox
@colorboxBorderColor: #9C9C9C;
// chosenbox
@chosenboxItemBorderColor: #B3B3B3;
@chosenboxCreateIconColor: @textColorGreen;
Layout Components
// splitter (hbox, vbox, borderlayout)
@splitterSize: 8px;
@splitterGradientStart: #FDFDFD;
@splitterGradientEnd: #F1F1F1;
Misc Components
// mask and loading
@maskBackgroundColor: #E0E1E3;
@loadingBackgroundColor: #E3E3E3;
// scrollbar
@scrollbarWidth: 16px;
@scrollbarHeight: 16px;
@scrollbarBorderColor: #838383;
@scrollbarBackgroundColor: #DDDDDD;
@scrollbarGradientStart: #FFFFFF;
@scrollbarGradientEnd: #CFCFCF;
// drag and drop
@dragColor: #FFFFFF;
@dragBackgroundColor: #E0EAF0;
@dragHoverBackgroundColor: #ADD2FF;
@dragAllowBorderColor: #11AA33;
@dragAllowBackgroundColor: #11AA33;
@dragDisAllowBorderColor: #C13634;
@dragDisAllowBackgroundColor: #C13634;
Version History
Version | Date | Content |
---|---|---|