Initial commit to release
This commit is contained in:
457
packages/editor-ui/src/n8n-theme.scss
Normal file
457
packages/editor-ui/src/n8n-theme.scss
Normal file
@@ -0,0 +1,457 @@
|
||||
// https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/table.scss
|
||||
|
||||
|
||||
@import "./n8n-theme-variables";
|
||||
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #faf9fe;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
button {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.primary-color {
|
||||
color: $--color-primary;
|
||||
}
|
||||
.text-light {
|
||||
color: $--custom-font-light;
|
||||
font-weight: 400;
|
||||
}
|
||||
.text-very-light {
|
||||
color: $--custom-font-very-light;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
// Dialog
|
||||
.v-modal {
|
||||
opacity: .85;
|
||||
background-color: lighten($--custom-table-background-main, 55% );
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
background-color: $--custom-dialog-background;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
.el-dialog__header {
|
||||
padding: 15px 20px;
|
||||
.el-dialog__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.el-dialog__headerbtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -50px;
|
||||
color: #fff;
|
||||
background-color: $--custom-table-background-main;
|
||||
border-radius: 0 18px 18px 0;
|
||||
z-index: 110;
|
||||
font-size: 1.7em;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
.el-dialog__close {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
.el-dialog__close:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
color: $--custom-dialog-text-color;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
.el-dialog__title {
|
||||
color: $--custom-dialog-text-color;
|
||||
}
|
||||
}
|
||||
.el-message-box {
|
||||
background-color: $--custom-dialog-background;
|
||||
border: none;
|
||||
.el-message-box__headerbtn {
|
||||
.el-message-box__close {
|
||||
color: $--custom-dialog-text-color;
|
||||
}
|
||||
}
|
||||
.el-message-box__content,
|
||||
.el-message-box__title {
|
||||
color: $--custom-dialog-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Menu
|
||||
.el-menu--vertical,
|
||||
.el-menu {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
|
||||
.el-menu--collapse {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.el-menu--popup,
|
||||
.el-menu--inline {
|
||||
font-size: 0.9em;
|
||||
li.el-menu-item {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
color: $--custom-dialog-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
color: $--color-primary;
|
||||
font-size: 1.2em;
|
||||
.el-submenu__icon-arrow {
|
||||
color: $--color-primary;
|
||||
font-weight: 800;
|
||||
font-size: 1em;
|
||||
}
|
||||
.svg-inline--fa {
|
||||
position: relative;
|
||||
right: -3px;
|
||||
}
|
||||
.item-title {
|
||||
position: absolute;
|
||||
left: 73px;
|
||||
}
|
||||
.item-title-root {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.el-menu--vertical {
|
||||
.el-menu-item {
|
||||
.item-title {
|
||||
position: absolute;
|
||||
left: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Notification Message
|
||||
.el-message p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
// Table
|
||||
.el-table {
|
||||
thead th {
|
||||
color: #fff;
|
||||
background-color: $--custom-table-background-main;
|
||||
}
|
||||
tr {
|
||||
color: #555;
|
||||
|
||||
td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.tr {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
.el-table--striped {
|
||||
.el-table__body {
|
||||
tr.el-table__row--striped {
|
||||
background-color: $--custom-table-background-alternative;
|
||||
td {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
tr.el-table__row:hover,
|
||||
tr.el-table__row:hover > td {
|
||||
background-color: $--custom-table-background-alternative2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select input
|
||||
.el-scrollbar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
font-size: 0.8em;
|
||||
color: #555;
|
||||
height: auto;
|
||||
line-height: 1.8em;
|
||||
margin: 0.25em 0;
|
||||
padding: 0.25em 1em;
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
font-weight: normal;
|
||||
}
|
||||
.el-select-dropdown__item + .el-select-dropdown__item {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
|
||||
// Color-Picker
|
||||
.color-picker {
|
||||
.el-color-picker__trigger {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 2px 0 0 4px;
|
||||
.el-color-picker__icon {
|
||||
color: $--color-primary;
|
||||
left: 14px;
|
||||
}
|
||||
}
|
||||
.el-color-picker__color {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
}
|
||||
.el-color-picker__color:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.el-color-picker__color-inner {
|
||||
border: none;
|
||||
border-radius: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Date selector
|
||||
.el-date-editor.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Select input
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-switch__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
// Input
|
||||
.el-input__inner {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
border-radius: 13px;
|
||||
}
|
||||
.el-input__inner,
|
||||
.el-input__inner:hover {
|
||||
background-color: $--custom-input-background;
|
||||
color: $--custom-input-font;
|
||||
border: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
// Number Input
|
||||
.el-input-number {
|
||||
background-color: $--custom-input-background;
|
||||
border-radius: 16px;
|
||||
width: calc(100% - 20px);
|
||||
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: $--custom-table-background-main;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 10px;
|
||||
margin: 3px;
|
||||
}
|
||||
.el-input-number__decrease:hover,
|
||||
.el-input-number__increase:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.el-input-number__decrease.is-disabled,
|
||||
.el-input-number__increase.is-disabled {
|
||||
background-color: $--custom-table-background-alternative2;
|
||||
}
|
||||
}
|
||||
|
||||
// Transfer list (nodes)
|
||||
.el-transfer {
|
||||
.el-transfer-panel {
|
||||
background-color: $--custom-input-background;
|
||||
// border: 1px solid #404040;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
|
||||
.el-transfer-panel__header {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.el-transfer__buttons button {
|
||||
border: 2px solid $--color-primary;
|
||||
}
|
||||
.el-transfer__buttons button.is-disabled {
|
||||
border: 2px solid #aaa;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.el-button,
|
||||
.el-button:active,
|
||||
.el-button:focus {
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
background-color: $--color-primary;
|
||||
|
||||
.next-icon-text {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.el-button.el-button--mini:not(.is-circle) {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
.el-button:hover {
|
||||
background-color: $--color-primary;
|
||||
color: #fff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner,
|
||||
.el-button.is-disabled,
|
||||
.el-button.is-disabled:hover,
|
||||
.el-button.is-disabled:focus {
|
||||
background-color: $--custom-input-background-disabled;
|
||||
border-color: #555;
|
||||
color: $--custom-input-font-disabled;
|
||||
}
|
||||
|
||||
|
||||
// Textarea
|
||||
.ql-editor,
|
||||
.el-textarea textarea,
|
||||
.el-textarea textarea:active,
|
||||
.el-textarea textarea:focus,
|
||||
.el-textarea textarea:hover {
|
||||
background-color: $--custom-input-background;
|
||||
color: $--custom-input-font;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
outline: 0;
|
||||
padding: 0.8em 1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: $--custom-input-background-disabled;
|
||||
color: $--custom-input-font-disabled;
|
||||
}
|
||||
|
||||
|
||||
// Tabs
|
||||
.type-selector:focus,
|
||||
.el-tabs__header:focus,
|
||||
.el-tabs__nav-wrap:focus,
|
||||
.el-tabs__nav-scroll:focus,
|
||||
.el-tabs__nav:focus {
|
||||
outline: none;
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: #555;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
// Loading Indicator
|
||||
.el-loading-mask {
|
||||
background-color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
// Pagination
|
||||
.el-pager li,
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next {
|
||||
background: none;
|
||||
color: #555;
|
||||
}
|
||||
.el-pagination button:disabled {
|
||||
background: none;
|
||||
color: $--custom-input-background-disabled;
|
||||
}
|
||||
.el-pager li.btn-quicknext,
|
||||
.el-pager li.btn-quickprev {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
// Tooltip
|
||||
.el-tooltip__popper.is-light {
|
||||
border: none;
|
||||
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
|
||||
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
|
||||
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
// Notification
|
||||
.el-notification {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
// Custom scrollbar
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ddd;
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $--color-primary;
|
||||
}
|
||||
Reference in New Issue
Block a user