UNPKG

cronapp-framework-js

Version:
1,506 lines (1,300 loc) 43.8 kB
@import 'button-aquamarine.css'; @import 'navbar-aquamarine.css'; @import 'checkbox-aquamarine.css'; @import 'panel-aquamarine.css'; /* Fonts */ @import '../../../fonts/WorkSans/WorkSans.css'; @import '../../../fonts/helvetica-neue/HelveticaNeue.css'; /* ==== VARIABLES ==== */ :root { /* Font */ --fontFamily: "Work Sans", "Helvetica Neue", Arial, sans-serif; --textColor: #111111; --backgroundColor: #ffffff; --textSmallSize: 13px; --textNormalSize: 15px; --textMediumSize: 19px; --textBigSize: 26px; --textExtraBigSize: 32px; --textFullSize: 39px; --textColor10: #d6d6d6; --textColor20: #aeaeae; --textColor30: #7c7c7c; --textColor40: #111111; --textColor50: #0f0f0f; --textColor60: #0c0c0c; --textColor70: #090909; /* Icon Size */ --iconSizeDefault: 28px; --iconSizeSmall: calc(var(--iconSizeDefault) - 3px); --iconSizeBig: calc(var(--iconSizeDefault) + 3px); --iconSizeExtraBig: calc(var(--iconSizeDefault) + 6px); /* Menus - Sizes and Distances */ --menuVerticalWidth: 270px; --menuVerticalCollapsedWidth: 225px; --menuSideSize: 20px; --menuItemBarSize: 6px; --menuElementOverallPadding: 10px; --menuItemPaddingSize: calc(var(--menuElementOverallPadding) + 5px); --menuItemIconWidth: 25px; /* Background */ --backgroundColor10: #fbfbfb; --backgroundColor20: #f8f8f8; --backgroundColor30: #f4f4f4; --backgroundColor40: #f1f1f1; --backgroundColor50: #d3d3d3; --backgroundColor60: #b1b1b1; --backgroundColor70: #848484; /* Background Login */ --backgroundLogin10: #fbfbfb; --backgroundLogin20: #f8f8f8; --backgroundLogin30: #f4f4f4; --backgroundLogin40: #f1f1f1; --backgroundLogin50: #d3d3d3; --backgroundLogin60: #b1b1b1; --backgroundLogin70: #848484; /* Distances */ --distanceNone: 0; --distanceSmallest: 5px; --distanceExtraSmall: 10px; --distanceSmall: 15px; --distanceMedium: 20px; --distanceBig: 30px; --distanceGiant: 40px; --distanceTitan: 60px; /* Border Radius */ --borderRadiusNone: 0; --borderRadiusSmallest: 5px; --borderRadiusExtraSmall: 10px; --borderRadiusSmall: 15px; --borderRadiusMedium: 20px; --borderRadiusBig: 30px; --borderRadiusGiant: 40px; --borderRadiusTitan: 60px; --borderRadiusFull: 99999px; /* Color - Default */ --colorDefault10: #d7e7e8; --colorDefault20: #b1d3d5; --colorDefault30: #81bdc0; --colorDefault40: #2ca4a8; --colorDefault50: #279093; --colorDefault60: #20787b; --colorDefault70: #185a5c; --textColorDefault10: #8c8c8c; --textColorDefault20: #bbbbbb; --textColorDefault30: #dfdfdf; --textColorDefault40: #ffffff; --textColorDefault50: #ffffff; --textColorDefault60: #ffffff; --textColorDefault70: #ffffff; /* Color - Primary */ --colorPrimary10: #d7dee8; --colorPrimary20: #b1c1d5; --colorPrimary30: #819fc0; --colorPrimary40: #2c72a8; --colorPrimary50: #276493; --colorPrimary60: #20547b; --colorPrimary70: #183e5c; --textColorPrimary10: #8c8c8c; --textColorPrimary20: #bbbbbb; --textColorPrimary30: #dfdfdf; --textColorPrimary40: #ffffff; --textColorPrimary50: #ffffff; --textColorPrimary60: #ffffff; --textColorPrimary70: #ffffff; /* Color - Success */ --colorSuccess10: #d8e8d7; --colorSuccess20: #b2d5b1; --colorSuccess30: #85c081; --colorSuccess40: #38a82c; --colorSuccess50: #319327; --colorSuccess60: #297b20; --colorSuccess70: #1f5c18; --textColorSuccess10: #8c8c8c; --textColorSuccess20: #bbbbbb; --textColorSuccess30: #dfdfdf; --textColorSuccess40: #ffffff; --textColorSuccess50: #ffffff; --textColorSuccess60: #ffffff; --textColorSuccess70: #ffffff; /* Color - Warning */ --colorWarning10: #f4e7d6; --colorWarning20: #ecd3af; --colorWarning30: #e3bd7e; --colorWarning40: #daa31f; --colorWarning50: #bf8f1b; --colorWarning60: #a07717; --colorWarning70: #775911; --textColorWarning10: #8c8c8c; --textColorWarning20: #bbbbbb; --textColorWarning30: #dfdfdf; --textColorWarning40: #ffffff; --textColorWarning50: #ffffff; --textColorWarning60: #ffffff; --textColorWarning70: #ffffff; /* Color - Danger */ --colorDanger10: #e8d7d7; --colorDanger20: #d5b1b1; --colorDanger30: #c08181; --colorDanger40: #a82c2c; --colorDanger50: #932727; --colorDanger60: #7b2020; --colorDanger70: #5c1818; --textColorDanger10: #8c8c8c; --textColorDanger20: #bbbbbb; --textColorDanger30: #dfdfdf; --textColorDanger40: #ffffff; --textColorDanger50: #ffffff; --textColorDanger60: #ffffff; --textColorDanger70: #ffffff; /* Color - Royal (mobile) */ --colorRoyal10: #e0dbf8; --colorRoyal20: #c5bbf3; --colorRoyal30: #a594ee; --colorRoyal40: #7e5ee8; --colorRoyal50: #6e52cb; --colorRoyal60: #5c45aa; --colorRoyal70: #45337f; --textColorRoyal10: #8c8c8c; --textColorRoyal20: #bbbbbb; --textColorRoyal30: #dfdfdf; --textColorRoyal40: #ffffff; --textColorRoyal50: #ffffff; --textColorRoyal60: #ffffff; --textColorRoyal70: #ffffff; /* Color - Calm (mobile) */ --colorCalm10: #d6eefb; --colorCalm20: #aee0f9; --colorCalm30: #7cd1f6; --colorCalm40: #11c1f3; --colorCalm50: #0fa9d5; --colorCalm60: #0c8db2; --colorCalm70: #096a85; --textColorCalm10: #8c8c8c; --textColorCalm20: #bbbbbb; --textColorCalm30: #dfdfdf; --textColorCalm40: #ffffff; --textColorCalm50: #ffffff; --textColorCalm60: #ffffff; --textColorCalm70: #ffffff; /* Color - Light (mobile) */ --colorLight10: #f5f5f5; --colorLight20: #ededed; --colorLight30: #e5e5e5; --colorLight40: #dddddd; --colorLight50: #c2c2c2; --colorLight60: #a2a2a2; --colorLight70: #797979; --textColorLight10: #252525; --textColorLight20: #323232; --textColorLight30: #3c3c3c; --textColorLight40: #444444; --textColorLight50: #898989; --textColorLight60: #b5b5b5; --textColorLight70: #d9d9d9; /* Color - Stable (mobile) */ --colorStable10: #ebebeb; --colorStable20: #d9d9d9; --colorStable30: #c7c7c7; --colorStable40: #b2b2b2; --colorStable50: #9c9c9c; --colorStable60: #828282; --colorStable70: #616161; --textColorStable10: #252525; --textColorStable20: #323232; --textColorStable30: #3c3c3c; --textColorStable40: #444444; --textColorStable50: #898989; --textColorStable60: #b5b5b5; --textColorStable70: #d9d9d9; /* Color - Dark (mobile) */ --colorDark10: #d9d9d9; --colorDark20: #b5b5b5; --colorDark30: #898989; --colorDark40: #444444; --colorDark50: #3c3c3c; --colorDark60: #323232; --colorDark70: #252525; --textColorDark10: #8c8c8c; --textColorDark20: #bbbbbb; --textColorDark30: #dfdfdf; --textColorDark40: #ffffff; --textColorDark50: #ffffff; --textColorDark60: #ffffff; --textColorDark70: #ffffff; /* Color - Neutral */ --colorNeutral00: #FFFFFF; --colorNeutral10: #F1F1F1; --colorNeutral20: #E3E3E3; --colorNeutral30: #D5D5D5; --colorNeutral40: #C7C7C7; --colorNeutral50: #B9B9B9; --colorNeutral60: #ACACAC; --colorNeutral70: #9E9E9E; --colorNeutral80: #909090; --colorNeutral90: #828282; --colorNeutral100: #747474; --colorNeutral110: #666666; --colorNeutral120: #5D5D5D; --colorNeutral130: #535353; --colorNeutral140: #4A4A4A; --colorNeutral150: #414141; --colorNeutral160: #383838; --colorNeutral170: #2E2E2E; --colorNeutral180: #252525; --colorNeutral190: #1C1C1C; --colorNeutral200: #131313; --colorNeutral210: #090909; --colorNeutral220: #000000; /* === Variables used exclusively in the color palette property === */ /* Components - Button */ --btnLink: transparent; --btnDefault: linear-gradient(90deg, var(--colorDefault40, #2ca4a8) 40%, var(--colorDefault30, #81bdc0) 100%); --btnPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%); --btnSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%); --btnCalm: transparent; --btnWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%); --btnDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%); --btnLight: transparent; --btnStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%); --btnRoyal: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%); --btnDark: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%); --textColorDefault: var(--textColorDefault40, #ffffff); --textColorPrimary: var(--textColorPrimary40, #ffffff); --textColorSuccess: var(--textColorSuccess40, #ffffff); --textColorCalm: var(--colorCalm40, #11c1f3); --textColorWarning: var(--textColorWarning40, #ffffff); --textColorDanger: var(--textColorDanger40, #ffffff); --textColorLight: var(--textColorLight40, #444444); --textColorStable: var(--textColorStable40, #444444); --textColorRoyal: var(--textColorRoyal40, #ffffff); --textColorDark: var(--textColorDark40, #ffffff); --borderBtnLink: var(--colorPrimary40, #2c72a8); --borderBtnDefault: transparent; --borderBtnPrimary: transparent; --borderBtnSuccess: transparent; --borderBtnCalm: var(--colorCalm40, #11c1f3); --borderBtnWarning: transparent; --borderBtnDanger: transparent; --borderBtnLight: var(--textColorLight40, #444444); --borderBtnStable: transparent; --borderBtnRoyal: transparent; --borderBtnDark: transparent; /* Components - Text color */ --colorDefault: var(--colorDefault40, #2ca4a8); --colorPrimary: var(--colorPrimary40, #2c72a8); --colorSuccess: var(--colorSuccess40, #38a82c); --colorCalm: var(--colorDefault40, #2ca4a8); --colorWarning: var(--colorWarning40, #daa31f); --colorDanger: var(--colorDanger40, #ce3a36); --colorLight: var(--colorLight50, #c2c2c2); --colorStable: var(--colorStable40, #b2b2b2); --colorRoyal: var(--colorRoyal40, #7e5ee8); --colorDark: var(--colorDark40, #444444); /* Components - Checkbox */ --checkboxDefault: var(--colorDefault40, #2ca4a8); --checkboxPrimary: var(--colorPrimary40, #2c72a8); --checkboxSuccess: var(--colorSuccess40, #38a82c); --checkboxCalm: var(--colorCalm40, #11c1f3); --checkboxWarning: var(--colorWarning40, #daa31f); --checkboxDanger: var(--colorDanger40, #ce3a36); --checkboxLight: var(--colorLight40, #dddddd); --checkboxStable: var(--colorStable40, #b2b2b2); --checkboxRoyal: var(--colorRoyal40, #7e5ee8); --checkboxDark: var(--colorDark40, #444444); --borderCheckboxDefault: transparent; --borderCheckboxPrimary: transparent; --borderCheckboxSuccess: transparent; --borderCheckboxCalm: transparent; --borderCheckboxWarning: transparent; --borderCheckboxDanger: transparent; --borderCheckboxLight: transparent; --borderCheckboxStable: transparent; --borderCheckboxRoyal: transparent; --borderCheckboxDark: transparent; /* Components - Combobox */ --comboboxDefault: var(--colorDefault40, #2ca4a8); --comboboxPrimary: var(--colorPrimary40, #2c72a8); --comboboxSuccess: var(--colorSuccess40, #38a82c); --comboboxCalm: var(--colorCalm40, #11c1f3); --comboboxWarning: var(--colorWarning40, #daa31f); --comboboxDanger: var(--colorDanger40, #ce3a36); --comboboxLight: transparent; --comboboxStable: var(--colorStable40, #b2b2b2); --comboboxRoyal: var(--colorRoyal40, #7e5ee8); --comboboxDark: var(--colorDark40, #444444); --borderComboboxDefault: var(--colorDefault50, #3b448e); --borderComboboxPrimary: var(--colorPrimary50, #5665be); --borderComboboxSuccess: var(--colorSuccess50, #257d25); --borderComboboxCalm: var(--colorCalm50, #11c1f3); --borderComboboxWarning: var(--colorWarning50, #f0ad4e); --borderComboboxDanger: var(--colorDanger50, #ce3a36); --borderComboboxLight: var(--textColorLight40, #444444); --borderComboboxStable: var(--colorStable50, #b2b2b2); --borderComboboxRoyal: var(--colorRoyal50, #886aea); --borderComboboxDark: var(--colorDark50, #444444); /* Components - Radio input */ --optionDefault: var(--colorDefault40, #2ca4a8); --optionPrimary: var(--colorPrimary40, #2c72a8); --optionSuccess: var(--colorSuccess40, #38a82c); --optionCalm: var(--colorCalm40, #11c1f3); --optionWarning: var(--colorWarning40, #daa31f); --optionDanger: var(--colorDanger40, #ce3a36); --optionLight: var(--colorLight40, #dddddd); --optionStable: var(--colorStable40, #b2b2b2); --optionRoyal: var(--colorRoyal40, #7e5ee8); --optionDark: var(--colorDark40, #444444); --borderOptionDefault: transparent; --borderOptionPrimary: transparent; --borderOptionSuccess: transparent; --borderOptionCalm: transparent; --borderOptionWarning: transparent; --borderOptionDanger: transparent; --borderOptionLight: transparent; --borderOptionStable: transparent; --borderOptionRoyal: transparent; --borderOptionDark: transparent; /* Components - Panel */ --panelDefault: linear-gradient(90deg, var(--colorDefault70, #185a5c) 0%, var(--colorPrimary60, #20547b) 100%); --panelPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%); --panelSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%); --panelCalm: var(--colorCalm40, #11c1f3); --panelWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%); --panelDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%); --panelLight: transparent; --panelStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%); --panelRoyal: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%); --panelDark: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%); --borderPanelDefault: transparent; --borderPanelPrimary: transparent; --borderPanelSuccess: transparent; --borderPanelCalm: transparent; --borderPanelWarning: transparent; --borderPanelDanger: transparent; --borderPanelLight: transparent; --borderPanelStable: transparent; --borderPanelRoyal: transparent; --borderPanelDark: transparent; /* === End - Variables used exclusively in the color palette property === */ } .text-color-info { color: var(--colorCalm40, #11c1f3); } body { background: var(--backgroundColor40, #f1f1f1); font-family: var(--fontFamily, "Work Sans", Helvetica, Arial, sans-serif); font-weight: 400; font-size: var(--textNormalSize, 16px); color: var(--textColor40, #111111); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--textColor40, #111111); font-weight: 500; } label { font-weight: 400; } .h1 { margin-left: 20px; } .h1::before { content: ''; height: 40px; background: linear-gradient(180deg, var(--colorDefault40, #2ca4a8) 0%, var(--colorPrimary40, #2c72a8) 100%); border-radius: var(--borderRadiusSmallest, 5px); margin-left: calc(var(--distanceExtraSmall, 10px) * 2); width: 12px; position: absolute; margin-left: -16px; } .btn.btn-fab, .btn-fab { border-radius: var(--borderRadiusSmall, 15px); } .color-light { color: var(--colorLight50, #c2c2c2); } /* Disabled */ .k-button.disabled, .k-button.disabled span, .k-button.disabled i, .k-button.disabled.active, .k-button.disabled.focus, .k-button.disabled:active, .k-button.disabled:focus, .k-button.disabled:hover, .btn.disabled, .btn.disabled span, .btn.disabled i, .btn.disabled.active, .btn.disabled.focus, .btn.disabled:active, .btn.disabled:focus, .btn.disabled:hover { background: var(--colorNeutral80, #909090); border-color: var(--colorNeutral80, #909090); color: var(--colorNeutral150, #414141); } /* Link */ a, a:focus, a:active { color: var(--colorPrimary40, #2c72a8); } a:hover { color: var(--colorPrimary30, #819fc0); } /* Login */ .siginPanel { background: var(--backgroundLogin40, #f1f1f1); } .login-view { flex-direction: column-reverse; background: var(--textColorDefault40, #ffffff); border-radius: var(--borderRadiusMedium, 20px); padding: var(--distanceSmall, 15px); margin-top: 20px; } .bg-login #container-second { background: linear-gradient(-140deg, var(--colorPrimary20, #b1c1d5), var(--colorPrimary30, #819fc0), var(--colorPrimary40, #2c72a8), var(--colorPrimary50, #276493), var(--colorPrimary60, #20547b)); } .bg-login #container-first #crn-botao-signup { color: var(--colorPrimary40, #2c72a8); } .bg-login #container-first #crn-botao-signup:hover { color: var(--colorPrimary50, #276493); } /* Checkbox - radio */ .k-checkbox-label:before { border-radius: var(--borderRadiusSmallest, 5px); } /* Form */ .form-control, .form-control.k-textbox, .input-group .form-control:last-child, .k-textbox, input.k-textbox, textarea.k-textbox, .k-multiselect, .k-combobox .k-dropdown-wrap, .k-autocomplete, .k-autocomplete.k-state-default, .mce-tinymce.mce-panel, .cronDynamicSelect .k-dropdown-wrap, .k-animation-container .k-dropdown .k-dropdown-wrap { background: var(--textColorDefault40, #ffffff); color: var(--textColor40, #111111); border-radius: var(--borderRadiusSmall, 15px); padding: var(--distanceExtraSmall, 10px) var(--distanceMedium, 20px); box-shadow: none; height: auto; text-indent: 0; font-size: var(--textMediumSize, 18px); border: 1px solid var(--colorLight50, #c2c2c2); } .form-control, .form-control.k-textbox, .input-group .form-control:last-child, .k-textbox, input.k-textbox, textarea.k-textbox { min-height: calc(var(--textNormalSize, 16px) * 3.5); } .k-multiselect-wrap.k-state-hover, .k-state-hover>.k-multiselect-wrap, .k-multiselect, .k-autocomplete.k-state-focused, .k-dropdown-wrap.k-state-focused, .k-multiselect.k-header.k-state-focused, .k-numeric-wrap.k-state-focused, .k-picker-wrap.k-state-focused, .k-textbox:focus, .k-input, .k-textbox>input, input.k-textbox, input.k-textbox:hover, textarea.k-textbox, textarea.k-textbox:hover, .k-dropdown .k-state-focused, .k-filebrowser-dropzone, .k-list>.k-state-hover, .k-listbox .k-item:hover:not(.k-state-disabled), .k-mobile-list .k-edit-label.k-check:active, .k-mobile-list .k-item>.k-label:active, .k-mobile-list .k-item>.k-link:active, .k-mobile-list .k-recur-view .k-check:active, .k-pager-wrap .k-link:hover, .k-scheduler .k-scheduler-toolbar ul li.k-state-hover, .k-splitbar-horizontal-hover:hover, .k-splitbar-vertical-hover:hover, .k-state-hover, .k-state-hover:hover { background: var(--textColorDefault40, #ffffff); box-shadow: none; color: var(--textColor40, #111111); } .k-multiselect { border: 1px solid var(--colorLight50, #c2c2c2); border-radius: var(--borderRadiusMedium, 20px); width: auto !important; } .k-multiselect .k-multiselect-wrap { border-color: transparent; } .k-autocomplete.k-state-focused, .k-dropdown-wrap.k-state-focused, .k-multiselect.k-header.k-state-focused, .k-numeric-wrap.k-state-focused, .k-picker-wrap.k-state-focused, .k-textbox:focus, .k-dropdown .k-state-focused, .k-mobile-list .k-edit-label.k-check:active, .k-mobile-list .k-item>.k-label:active, .k-mobile-list .k-item>.k-link:active, .k-mobile-list .k-recur-view .k-check:active { border-color: var(--colorDefault40, #2ca4a8); } .k-draghandle.k-state-selected:hover, .k-ghost-splitbar-horizontal, .k-ghost-splitbar-vertical, .k-list>.k-state-highlight, .k-list>.k-state-selected, .k-marquee-color, .k-panel>.k-state-selected, .k-scheduler .k-scheduler-toolbar .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-state-selected, .k-state-selected:link, .k-state-selected:visited, .k-tool.k-state-selected { background: var(--colorDefault40, #2ca4a8); color: var(--textColorDefault40, #ffffff); } .k-scheduler .k-scheduler-toolbar .k-state-selected, .k-scheduler .k-today.k-state-selected { border-color: var(--colorDefault40, #2ca4a8); } .k-scheduler-footer .k-link, .k-scheduler-toolbar .k-link { padding-top: 5px; padding-bottom: 5px; } .k-popup .k-list .k-state-hover, .k-listbox .k-item { padding: 10px; } .k-list .k-state-hover, .k-list .k-state-hover:hover { background: var(--colorDefault10, #d7e7e8); padding: 10px; border-radius: var(--borderRadiusMedium, 20px); } .k-list .k-state-selected, .k-list .k-item.k-state-hover.k-state-selected, .k-list .k-item:hover.k-state-selected, .k-popup .k-list .k-state-focused { border-radius: var(--borderRadiusMedium, 20px); } .k-popup .k-list .k-item, .k-popup .k-list .k-item.k-state-hover, .k-popup .k-list .k-item.k-state-hover:hover { padding: 0 10px; } .k-list-optionlabel:hover.k-state-selected, .cardinput:focus-within { border: 1px solid var(--colorDefault40, #2ca4a8); } .cronSelect .k-icon, .cronSelect .k-tool-icon { height: 4em; } .cronMultiSelect .k-icon, .cronMultiSelect .k-tool-icon { height: 27px; } .k-multiselect-wrap.k-state-focused, .k-state-focused>.k-multiselect-wrap { box-shadow: none; } .k-multiselect .k-multiselect-wrap, span.k-dropdown, .k-combobox { background: transparent; } .k-multiselect-wrap .k-input { min-height: auto; } .k-multiselect .k-multiselect-wrap li { padding: 4px 41px 4px 12px; margin-right: 5px; } .k-multiselect-wrap .k-select { padding: 4px 10px; } /* color - multiselect */ .k-button:before { background: var(--colorDefault40, #2ca4a8); } .k-multiselect .k-button.k-state-hover, .k-multiselect .k-button { border-color: var(--colorDefault50, #279093); background: var(--colorDefault40, #2ca4a8); color: var(--textColorDefault40, #ffffff); } .k-multiselect-wrap .k-button.k-state-hover .k-select, .k-multiselect-wrap .k-button:hover { background: var(--colorDefault60, #20787b); color: var(--textColorDefault40, #ffffff); } .k-multiselect .k-button:active { color: var(--textColorDefault40, #ffffff); box-shadow: inset 0 0 10px 3px var(--colorDefault50, #279093); } /* text input icon */ .input-group .k-button { background: linear-gradient(90deg, var(--colorDefault50, #279093) 0%, var(--colorDefault30, #81bdc0) 100%); color: var(--textColorDefault40, #ffffff); } .input-group .k-button.active, .input-group .k-button:active, .input-group .k-button:focus, .input-group .k-button:hover { color: var(--colorDefault40, #2ca4a8); box-shadow: none; background: var(--colorDefault20, #d7d7d7); } .k-dropdown .k-state-hover .k-input, .k-dropdown .k-input, .k-dropdown .k-state-focused .k-input, .k-menu .k-popup { color: var(--textColor40, #111111); } /* password input */ .cardinput { background: var(--textColorDefault40, #ffffff); border-radius: var(--borderRadiusSmall, 15px); padding: 0; border-color: var(--colorLight50, #c2c2c2); } /* Calendar */ cron-calendar.k-calendar .k-footer, cron-calendar.k-calendar .k-header, .k-calendar .k-header, .k-calendar .k-footer .k-nav-today { background: var(--colorDefault40, #2f2f2f); color: var(--textColorDefault40, #ffffff); } cron-calendar.k-widget { border-color: var(--colorDefault40, #2f2f2f); } .k-widget.k-calendar .k-nav-next.k-state-hover, .k-widget.k-calendar .k-nav-prev.k-state-hover, .k-calendar .k-nav-fast.k-state-hover, .k-calendar .k-footer .k-nav-today.k-state-hover, .k-calendar .k-footer .k-nav-today:hover { background: var(--colorDefault60, #3e3e3e); box-shadow: none; } .k-calendar th { background: var(--colorDefault10, #3e3e3e); } .k-calendar td.k-state-focused.k-state-selected.k-state-hover, .k-calendar .k-state-selected.k-state-hover, .k-listview>.k-state-focused.k-state-selected, .k-state-selected td.k-state-focused, td.k-state-focused.k-state-selected, .k-state-selected { box-shadow: inset 0 0 10px 3px var(--colorDefault40, #5665be); } .k-calendar .k-today.k-state-selected.k-state-hover { background-color: var(--colorDefault60, #3e3e3e); } /* Date */ .bootstrap-datetimepicker-widget.dropdown-menu { color: var(--textColor40, #111111); background: var(--textColorDefault40, #ffffff); } /* seta do modal do calendario */ .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: var(--textColorDefault40, #ffffff); } .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: var(--textColorDefault40, #ffffff); } /* Dynamic Image */ .dynamic-image-container { border-radius: var(--borderRadiusMedium, 20px); padding: 12px; border-width: 3px; border-color: var(--textColor40, #111111); } .dynamic-image-container .btn { background: linear-gradient(90deg, var(--colorDefault50, #279093) 0%, var(--colorDefault30, #81bdc0) 100%); color: var(--textColorDefault40, #ffffff); border: 0; display: initial; padding: 3px 28px; } .dynamic-image-container .btn.btn-info { padding: 3px 24px; margin-left: 0; } .dynamic-image-container .btn.btn-info.active, .dynamic-image-container .btn.btn-info:active, .dynamic-image-container .btn.btn-info:focus, .dynamic-image-container .btn.btn-info:hover { border: 0; } .dynamic-image-container .btn.active, .dynamic-image-container .btn:active, .dynamic-image-container .btn:focus, .dynamic-image-container .btn:hover { color: var(--colorDefault40, #2ca4a8); box-shadow: none; background: var(--colorDefault20, #b1d3d5); } /* Dynamic input upload */ .dynamic-input-upload { border: 1px dashed var(--colorDefault40, #3b448e); } .dynamic-input-upload btn{ border-color: transparent; box-shadow: none; margin: 0; } .k-autocomplete.k-state-default .k-input, .k-combobox .k-state-default .k-input, .k-multiselect-wrap, .k-numeric-wrap.k-state-default .k-input, .k-picker-wrap.k-state-default .k-input, .k-progress-status-wrap, .k-slider-selection, .k-slider-track { box-shadow: none; } /* upload */ *[id^='crn-upload'] .btn, *[id^='crn-upload'] .k-button { display: inline-flex; } /* Grid */ .k-grid .k-grid-header .k-header .k-checkbox-label:before { border-color: var(--textColorDefault40, #ffffff); color: var(--textColorDefault40, #ffffff); } .k-widget { box-shadow: none; } .k-grid { border: 0; background: transparent; box-shadow: none; } .k-grid .k-header.k-grid-toolbar { background: var(--colorLight30, #e5e5e5); border-radius: var(--borderRadiusMedium, 20px); margin-bottom: var(--distanceSmall, 15px); padding: var(--distanceMedium, 20px); border: 0; } .k-grid table thead th.k-header, table.table thead th { background: var(--colorDefault40, #2ca4a8); } .k-grid table { border: 1px solid #ccc; overflow: hidden; border-radius: var(--borderRadiusMedium, 20px); } .k-grid-toolbar .k-button { background: linear-gradient(90deg, var(--colorDefault50, #279093) 0%, var(--colorDefault30, #81bdc0) 100%); color: var(--textColorDefault40, #ffffff); display: inline-flex; } .k-grid-toolbar .k-button:focus, .k-grid-toolbar .k-button:hover { color: var(--colorDefault40, #2ca4a8); box-shadow: none; background: var(--colorDefault20, #b1d3d5); } .k-grid-toolbar .k-button.active, .k-grid-toolbar .k-button:active { background: var(--colorDefault40, #2ca4a8); color: var(--textColorDefault40, #ffffff); } .k-grid table thead th.k-header, .k-grid table thead th.k-header a.k-link, table.table thead th { color: var(--textColorDefault40, #ffffff); font-weight: 500; font-size: 16px; text-transform: initial; } .k-grid table thead th.k-header, table.table thead th { background: var(--colorDefault40, #2ca4a8); padding: var(--distanceSmall, 15px) var(--distanceMedium, 20px); } .k-grid .k-grid-pager .k-pager-nav.k-pager-first { border-radius: var(--borderRadiusMedium, 20px) 0 0 var(--borderRadiusMedium, 20px); } .k-grid .k-grid-pager .k-pager-nav.k-pager-first+.k-link+ul { border-left: 0; position: static; } .k-grid .k-grid-pager .k-pager-nav.k-pager-first+.k-link+ul .k-pager-nav { border-radius: var(--borderRadiusNone, 0); border-right: 0; border-left: 0; } .k-grid .k-grid-pager .k-pager-nav.k-pager-last { border-radius: 0 var(--borderRadiusMedium, 20px) var(--borderRadiusMedium, 20px) 0; } .k-grid .k-grid-pager .k-link, .k-grid .k-grid-pager .k-pager-nav.k-pager-first+.k-link { border-radius: var(--borderRadiusNone, 0); } .k-grid .k-grid-pager .k-link { border-color: var(--colorDefault20, #b1d3d5); color: var(--colorDefault20, #b1d3d5); margin: 0; } .k-grid .k-grid-pager .k-link:hover { background: var(--backgroundColor40, #F1F1F1); } .k-grid .k-grid-pager .k-link .k-icon { font-size: var(--menuItemIconWidth, 25px); } .k-grid .k-grid-pager .k-link.k-pager-refresh { border-color: var(--colorDefault20, #b1d3d5); border-radius: var(--borderRadiusFull, 99999px); background: transparent; color: var(--colorDefault40, #2ca4a8); } .k-grid .k-grid-pager .k-link.k-pager-refresh:hover { background: var(--colorDefault10, #d7e7e8); } .k-grid .k-grid-pager ul .k-link { border-left: 0; } .k-grid .k-grid-pager .k-pager-numbers a { color: var(--colorDefault40, #2ca4a8); } .k-grid .k-dropdown .k-dropdown-wrap { border-radius: var(--borderRadiusMedium, 20px); background: var(--textColorDefault40, #ffffff); } .k-pager-sizes .k-widget.k-dropdown { background: transparent; } .k-grid .k-widget { background: transparent; border: 0; } .k-grid table .k-button { display: inherit; min-height: 33px; min-width: 33px; margin-right: 10px; } .k-button-with-label .btn .btn-info .k-grid { background: transparent; border: 2px solid var(--colorCalm40, #11c1f3); color: var(--colorCalm40, #11c1f3); } .k-grid table .k-button.active, .k-grid table .k-button:active, .k-grid table .k-button:focus, .k-grid table .k-button:hover { box-shadow: none; } .k-grid table .k-button, .k-grid table .k-button:focus:active { padding: 5px; margin: 0; margin-right: 5px; display: inline-flex; } .k-grid-header th.k-header>.k-link { display: inline-block; } .k-grid .k-grid-header th .k-i-sort-asc-sm, .k-grid .k-grid-header th .k-i-sort-desc-sm, .k-grid .k-grid-header th .k-sort-order { color: var(--textColorDefault40, #ffffff); } .k-grid table thead th.k-header:hover, table.table thead th:hover, .k-grid table thead th.k-header:hover a.k-link, .k-grid .k-grid-header th:hover .k-i-sort-asc-sm, .k-grid .k-grid-header th:hover .k-i-sort-desc-sm, .k-grid .k-grid-header th:hover .k-sort-order { color: yellow; } .k-button.k-grid-edit.k-grid:hover { background: var(--colorDefault50, #279093); } .k-state-selected, .k-state-selected:link, .k-state-selected:visited, .k-tool.k-state-selected, .k-grid td.k-state-selected:hover, .k-grid tr.k-state-selected:hover td { background: var(--colorDefault20, #b1d3d5); color: var(--coloNeutral160, #383838); box-shadow: none; } .k-grid tr.k-state-selected:hover td { border-color: #ccc; } .k-state-selected:link .k-button:hover, .k-state-selected:visited .k-button:hover, .k-tool.k-state-selected .k-button:hover, .k-grid td.k-state-selected .k-button { border: 1px solid var(--colorDefault50, #279093); } .k-grid .k-grid-pager .k-link .k-icon.k-i-reload { font-size: inherit; } .crn-grid-title { line-height: 36px; color: var(--textColor40, #111111); } /* Jumbotron */ .container .jumbotron, .container-fluid .jumbotron { background: var(--colorDefault20, #b1d3d5); border-radius: var(--borderRadiusMedium, 20px); } /* tabs */ .ctn-tab .nav-tabs { background: var(--colorDefault20, #b1d3d5); color: var(--textColorDefault40, #ffffff); padding: var(--distanceExtraSmall, 10px); border-radius: var(--borderRadiusMedium, 20px); } .ctn-tab .nav-tabs li.active { background: var(--colorDefault50, #279093); border-radius: var(--borderRadiusSmall, 15px); border: 0; } .ctn-tab .nav-tabs li.active a, .ctn-tab .nav-tabs li.active a:hover { color: var(--textColorDefault40, #ffffff); } .ctn-tab .nav-tabs li a { color: var(--colorDefault50, #279093); } .ctn-tab .nav-tabs li a:hover { background: var(--colorDefault30, #81bdc0); color: var(--textColorDefault40, #ffffff); border-radius: var(--borderRadiusSmall, 15px); border: 0; } /* table */ .table-bordered>thead>tr>td:first-child { border-top-left-radius: var(--borderRadiusMedium, 20px); border-top-right-radius: var(--borderRadiusMedium, 20px); } .table-bordered>thead>tr>td:last-child { border-bottom-right-radius: var(--borderRadiusMedium, 20px); border-bottom-left-radius: var(--borderRadiusMedium, 20px); } /* simple table */ .table thead th:first-child { border-top-left-radius: var(--borderRadiusMedium, 20px); border-left: 0; } .table thead th:last-child { border-top-right-radius: var(--borderRadiusMedium, 20px); border-right: 0; } .table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--borderRadiusMedium, 20px); display: block; } .table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--borderRadiusMedium, 20px); display: block; } .k-grid table thead th.k-header, .k-grid table tbody td, table.table thead th, table.table tbody td { padding: var(--distanceSmall, 15px) var(--distanceMedium, 20px); } .table-bordered { border: 0; } .table tr.table-content { background: var(--textColorDefault40, #ffffff); } .k-grid table tbody tr:nth-child(odd), table.table tbody tr:nth-child(odd) { background: var(--backgroundColor40, #F1F1F1); } .k-grid table tbody tr:nth-child(even), table.table tbody tr:nth-child(even) { background: var(--colorLight30, #e5e5e5); } .k-grid table tbody tr.k-state-selected { background: var(--colorDefault20, #b1d3d5); color: var(--coloNeutral160, #383838); box-shadow: none; } .k-grid table tbody tr:hover { background: var(--colorDefault10, #d7e7e8); } /* filter - grid */ .k-filter-menu-container .k-dropdown .k-dropdown-wrap, .k-filter-menu-container .k-textbox { padding: 0; } .k-grid-header:first-child th.k-header:first-child, .k-rtl thead.k-grid-header th.k-header:last-child, thead.k-grid-header th.k-header:first-child { border-top-left-radius: var(--borderRadiusMedium, 20px); } .k-rtl .k-grid-header:first-child th.k-header:first-child, .k-rtl thead.k-grid-header th.k-header:first-child, thead.k-grid-header th.k-header:last-child { border-top-right-radius: var(--borderRadiusMedium, 20px); } .k-grid tr:last-child td:first-child { border-bottom-left-radius: var(--borderRadiusMedium, 20px); } .k-grid tr:last-child td:last-child { border-bottom-right-radius: var(--borderRadiusMedium, 20px); } /* Agendador */ .k-scheduler { background: var(--textColorDefault40, #ffffff); border-radius: var(--borderRadiusMedium, 20px); border-color: var(--backgroundColor60, #bbbbbb); overflow: hidden; } .k-scheduler .k-header { background: var(--textColorDefault40, #ffffff); } .k-scheduler-edit-form .k-edit-field .k-button, .k-scheduler .k-state-selected>.k-link, .k-scheduler .k-scheduler-toolbar .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-scheduler-navigation .k-nav-prev .k-link, .k-scheduler div.k-scheduler-footer .k-link, .k-scheduler div.k-scheduler-footer ul li { border-radius: var(--borderRadiusMedium, 20px); background: linear-gradient(90deg, var(--colorDefault40, #2ca4a8) 40%, var(--colorDefault30, #81bdc0) 100%); color: var(--textColorDefault40, #ffffff); border-color: transparent; } .k-scheduler-navigation .k-nav-prev { border-color: transparent; } .k-scheduler-navigation .k-nav-prev .k-link:hover, .k-scheduler div.k-scheduler-footer .k-link:hover, .k-scheduler div.k-scheduler-footer ul li:hover, .k-scheduler-edit-form .k-edit-field .k-button:hover{ color: var(--colorDefault40, #2ca4a8); box-shadow: none; background: var(--colorDefault20, #b1d3d5); } .k-scheduler div.k-scheduler-footer .k-link:hover .k-icon, .k-scheduler div.k-scheduler-footer ul li:hover .k-icon { color: var(--colorDefault40, #2ca4a8); } .k-scheduler div.k-scheduler-footer .k-link .k-icon, .k-scheduler div.k-scheduler-footer ul li .k-icon { color: var(--textColorPrimary40, #ffffff); } .k-scheduler .k-scheduler-toolbar ul.k-scheduler-views li.k-state-hover a, .k-scheduler .k-scheduler-toolbar ul.k-scheduler-views li.k-state-hover, .k-gantt-toolbar ul.k-gantt-views li:last-child, .k-gantt-toolbar ul.k-gantt-views li:last-child .k-link, .k-scheduler-toolbar .k-nav-next, .k-scheduler-toolbar .k-nav-next .k-link, .k-scheduler-toolbar ul+ul li:last-child, .k-scheduler-toolbar>ul>li, .k-scheduler-toolbar ul+ul li:last-child .k-link, .k-gantt-toolbar>ul.k-gantt-views li:first-child+li, .k-gantt-toolbar>ul.k-gantt-views li:first-child+li .k-link, .k-scheduler-toolbar>ul li:first-child, .k-scheduler-toolbar>ul li:first-child .k-link, .k-scheduler-toolbar>ul.k-scheduler-views li:first-child+li, .k-scheduler-toolbar>ul.k-scheduler-views li:first-child+li .k-link { border-radius: var(--borderRadiusMedium, 20px); } .k-edit-form-container .k-edit-buttons .k-scheduler-cancel { background: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%); color: var(--textColorDanger40, #ffffff); border-radius: var(--borderRadiusMedium, 20px); } .k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover { color: var(--colorDanger40, #a82c2c); box-shadow: none; background: var(--colorDanger20, #d5b1b1); } .k-calendar .k-today.k-state-selected, .k-calendar td.k-state-focused.k-state-selected.k-state-hover, .k-calendar .k-state-selected.k-state-hover, .k-listview>.k-state-focused.k-state-selected, .k-state-selected td.k-state-focused, td.k-state-focused.k-state-selected { background: transparent; box-shadow: inset 0 0 10px 3px var(--colorDefault40, #5665be); } .k-window-titlebar .k-window-action { min-height: 30px; } .k-scheduler .k-scheduler-layout.k-scheduler-monthview .k-state-selected>.k-link, .k-scheduler .k-scheduler-layout.k-scheduler-monthview .k-today.k-state-selected { border-radius: var(--borderRadiusNone, 0); } .k-scheduler .k-scheduler-layout.k-scheduler-monthview .k-state-selected>.k-link { background: transparent; background: none; } .k-scheduler .k-scheduler-toolbar ul li.k-state-hover, .k-scheduler .k-scheduler-toolbar ul.k-scheduler-views li.k-state-hover a, .k-scheduler .k-scheduler-toolbar ul.k-scheduler-views li.k-state-hover { color: var(--colorDefault40, #2ca4a8); background: var(--colorDefault20, #b1d3d5); border-color: transparent; } .k-scheduler-footer>ul>li, .k-scheduler-toolbar>ul>li { border-width: 1px; } .k-scheduler-navigation .k-nav-next, .k-scheduler-navigation .k-nav-today { background: transparent; border-color: var(--colorDefault40, #2ca4a8); color: var(--colorDefault40, #2ca4a8); } .k-scheduler-navigation .k-nav-next .k-link span { color: var(--colorDefault40, #2ca4a8); } .k-scheduler-navigation .k-nav-prev .k-icon { color: var(--textColorDefault40, #ffffff); } .k-scheduler-toolbar>ul>li { background: transparent; border-color: var(--colorDefault40, #2ca4a8); margin-left: 1px; } .k-scheduler-toolbar>ul>li .k-link { color: var(--colorDefault40, #2ca4a8); } .k-scheduler-toolbar .k-nav-current .k-lg-date-format, .k-scheduler-toolbar .k-nav-current .k-sm-date-format { color: var(--textColor40, #393939); } .k-scheduler-toolbar .k-nav-current.k-state-hover .k-icon, .k-scheduler-toolbar .k-nav-current.k-state-hover .k-lg-date-format, .k-scheduler-toolbar .k-nav-current.k-state-hover .k-sm-date-format { color: var(--colorDefault40, #2a9fd6); } .k-window-titlebar { background: transparent; } /* Slider */ .k-slider-buttons .k-slider-items { display: flex; margin-top: 17px; } .k-slider-wrap { margin-top: 24px; } .k-slider .k-button { min-height: auto; } .k-slider-horizontal .k-tick { margin-top: 32px; } .k-slider-horizontal .k-label { top: 10px; } div[data-component^='crn-slider'] .form-control { display: block; height: max-content; margin-bottom: 28px; } /* Modal button - password */ #forgotPasswordModal .modal-footer .k-button.k-success, #forgotPasswordModal .modal-footer .btn.btn-success, #modalPassword .modal-footer .k-button.k-success, #modalPassword .modal-footer .btn.btn-success { background: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%); color: var(--textColorPrimary40, #ffffff); } #forgotPasswordModal .modal-footer .k-button.k-success:hover, #forgotPasswordModal .modal-footer .btn.btn-success:hover, #modalPassword .modal-footer .k-button.k-success:hover, #modalPassword .modal-footer .btn.btn-success:hover { color: var(--colorPrimary40, #2c72a8); box-shadow: none; background: var(--colorPrimary20, #b1c1d5); } #forgotPasswordModal .modal-footer .k-button.k-danger, #forgotPasswordModal .modal-footer .btn.btn-danger, #modalPassword .modal-footer .k-button.k-danger, #modalPassword .modal-footer .btn.btn-danger { background: linear-gradient(90deg, var(--colorDefault40, #2ca4a8) 40%, var(--colorDefault30, #81bdc0) 100%); color: var(--textColorDefault40, #ffffff); } #forgotPasswordModal .modal-footer .k-button.k-danger:hover, #forgotPasswordModal .modal-footer .btn.btn-danger:hover, #modalPassword .modal-footer .k-button.k-danger:hover, #modalPassword .modal-footer .btn.btn-danger:hover { color: var(--colorDefault40, #2ca4a8); box-shadow: none; background: var(--colorDefault20, #b1d3d5); } /* Combobox */ .combobox-light .k-button:before { background: transparent; } .combobox-light .k-multiselect .k-button.k-state-hover, .combobox-light .k-multiselect .k-button { border: 1.8px solid; border-color: var(--textColorLight40, #444444); background: transparent; color: var(--textColorLight40, #444444); } .combobox-light .k-multiselect-wrap .k-button.k-state-hover .k-select, .combobox-light .k-multiselect-wrap .k-button:hover { background: transparent; color: var(--textColorLight60, #b5b5b5); border-color: var(--textColorLight60, #b5b5b5); } /* Option */ .option-light .k-radio-label:before { border-color: var(--textColorLight40, #444444); } .option-light .k-radio-label:after, .option-light .k-radio:checked+.k-radio-label:after { background: var(--textColorLight40, #444444); border-color: var(--textColorLight40, #444444); } .option-light .k-radio:checked+.k-radio-label:before { border-color: var(--textColorLight40, #444444); } .option-light .k-radio:focus+.k-radio-label::before, .option-light .k-radio:hover+.k-radio-label::before { box-shadow: 0 0 5px 0 var(--textColorLight40, #444444); border-color: var(--textColorLight40, #444444); } #cron-breadcrumbs{ background: transparent; }