多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

819 lines
16 KiB

@import 'ant-design-vue/dist/antd.variable.min.css';
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
html {
overflow: hidden;
}
body {
line-height: 1.3125rem;
}
:root {
--toolbar-height: 2.25rem;
--topbar-height: 3.1rem;
--sidebar-bottom-height: 8.5rem;
--new-header-height: 3.5rem;
--tw-text-opacity: 1;
--navbar-bg: #fafafa;
--navbar-border: #e0e0e0;
--nc-grid-bg: #fdfdfd;
--ant-primary-color-hover: #5c85ff !important;
--ant-primary-color-active: #3366ff !important;
--ant-primary-color-outline: rgba(51, 102, 255, 0.24) !important;
}
::-moz-selection {
/* Code for Firefox */
color: inherit;
background-color: #3366ff20;
}
::selection {
color: inherit;
background-color: #3366ff20;
}
.ant-layout-content {
overflow-x: visible !important;
overflow-y: visible !important;
}
.rc-virtual-list-holder-inner {
@apply !px-1.5;
}
.ant-layout-header {
height: var(--topbar-height) !important;
}
html,
body,
#__nuxt,
.ant-layout,
main {
@apply m-0 h-full w-full bg-white;
}
.nc-input-md {
@apply !rounded-lg !py-2 !px-3 mb-1;
}
.mobile {
.nc-scrollbar-md,
.nc-scrollbar-lg,
.nc-scrollbar-x-md,
.nc-scrollbar-dark-md,
.nc-scrollbar-x-md-dark,
.nc-scrollbar-x-lg {
&::-webkit-scrollbar {
width: 0px;
}
}
}
.nc-scrollbar-md {
overflow-y: auto !important;
overflow-x: hidden;
scrollbar-width: thin !important;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track-piece {
width: 0px;
}
&::-webkit-scrollbar {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
width: 4px;
@apply bg-gray-200;
}
&::-webkit-scrollbar-thumb:hover {
@apply bg-gray-300;
}
}
.nc-scrollbar-lg {
overflow-y: auto !important;
overflow-x: hidden;
scrollbar-width: thin !important;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-track-piece {
width: 0px;
}
&::-webkit-scrollbar {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
width: 4px;
@apply bg-gray-200;
}
&::-webkit-scrollbar-thumb:hover {
@apply bg-gray-300;
}
}
.nc-scrollbar-x-md {
overflow-x: auto !important;
scrollbar-width: thin !important;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track-piece {
width: 0px;
}
&::-webkit-scrollbar {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
width: 4px;
@apply bg-gray-200;
}
&::-webkit-scrollbar-thumb:hover {
@apply bg-gray-300;
}
}
.nc-scrollbar-dark-md {
overflow-y: auto !important;
overflow-x: hidden;
scrollbar-width: thin !important;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
&::-webkit-scrollbar-track-piece {
width: 0px;
}
&::-webkit-scrollbar {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
width: 4px;
@apply bg-gray-300;
}
&::-webkit-scrollbar-thumb:hover {
@apply bg-gray-400;
}
}
.nc-scrollbar-x-md-dark {
overflow-x: auto !important;
scrollbar-width: thin !important;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track-piece {
width: 0px;
}
&::-webkit-scrollbar {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
width: 4px;
background-color: rgba(0, 0, 0, 0.3);
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
.nc-scrollbar-x-lg {
overflow-x: auto !important;
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track-piece {
width: 0px;
}
&::-webkit-scrollbar {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
width: 8px;
@apply bg-gray-200;
}
&::-webkit-scrollbar-thumb:hover {
@apply bg-gray-300;
}
}
main {
@apply flex-0 w-full relative scrollbar-thin-dull;
overflow-x: hidden;
}
a {
@apply !text-primary !underline hover:!text-accent;
}
.nc-icon {
@apply color-transition inline;
}
.ant-select {
@apply !rounded-md;
.ant-select-selector {
@apply !rounded-md;
}
}
// select dropdown border style
.ant-select-dropdown {
@apply border-1 border-gray-200 rounded-lg;
.rc-virtual-list-scrollbar {
@apply !w-1;
}
.rc-virtual-list-scrollbar-thumb {
@apply !bg-gray-200;
&:hover {
@apply !bg-gray-300;
}
}
}
// menu item styling
.nc-menu-item {
@apply cursor-pointer text-sm flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
&.disabled {
@apply text-black text-opacity-25 bg-[#f5f5f5] cursor-not-allowed text-shadow-none box-shadow-none border-[#d9d9d9];
}
}
.nc-base-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2;
// &:hover {
// .nc-icon {
// @apply text-accent;
// }
// }
}
.nc-workspace-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
&:hover {
.nc-icon {
@apply text-accent;
}
}
}
.nc-sidebar-right-item {
@apply relative flex items-center;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
content: '';
}
&:hover::after {
@apply ring shadow-2xl transform scale-110;
}
&.disabled-ring:hover::after {
@apply ring-0;
}
svg {
@apply z-1 text-xl p-1 text-gray-500;
}
.disabled {
@apply cursor-not-allowed border-none;
}
}
// show a dot badge if some change present
.nc-badge {
@apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20);
}
// badge with count
.nc-count-badge {
@apply absolute flex items-center top-[-6px] right-[-6px] px-1 min-w-[14px] h-[14px] rounded-full bg-gray-500 !text-[9px] text-white !z-21;
}
// for highlighting toolbar menu item
.nc-active-btn > .ant-btn {
@apply bg-gray-100;
}
// for highlighing toolbar kanban menu item
.nc-locked-overlay {
@apply absolute h-full w-full z-2 top-0 left-0;
}
.ant-modal-wrap {
@apply !scrollbar-thin-dull;
}
.animated-bg-gradient {
background: linear-gradient(122deg, #6f3381, #ec4899, #fedfe1, #4351e8);
background-size: 800% 800%;
-webkit-animation: gradient 4s ease infinite;
-moz-animation: gradient 4s ease infinite;
animation: gradient 4s ease infinite;
}
@-webkit-keyframes gradient {
0% {
background-position: 0% 22%;
}
50% {
background-position: 100% 79%;
}
100% {
background-position: 0% 22%;
}
}
@-moz-keyframes gradient {
0% {
background-position: 0% 22%;
}
50% {
background-position: 100% 79%;
}
100% {
background-position: 0% 22%;
}
}
@keyframes gradient {
0% {
background-position: 0% 22%;
}
50% {
background-position: 100% 79%;
}
100% {
background-position: 0% 22%;
}
}
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
@apply transition-all duration-200 ease;
}
.page-enter-from,
.page-leave-to,
.layout-enter-from,
.layout-leave-to {
@apply opacity-0;
}
.slide-enter-active,
.slide-leave-active {
@apply transition-all duration-200 ease-in-out;
}
.slide-enter-from,
.slide-leave-to {
transform: translate(-100%, 0);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 400ms ease;
}
.slide-right-enter-from,
.slide-right-leave-to {
transform: translate(100%, 0%);
opacity: 0;
}
.slide-left-enter-active,
.slide-left-leave-active {
transition: all 400ms ease;
}
.slide-left-enter-from,
.slide-left-leave-to {
transform: translate(-100%, 0%);
opacity: 0;
}
.glow-enter-active,
.glow-leave-active {
@apply transition-all duration-300 ease-in-out;
}
.glow-enter-active {
@apply ring ring-xl;
}
.glow-enter-from,
.glow-leave-to {
@apply opacity-0;
}
.scaling-btn {
@apply z-1 relative color-transition rounded-md px-4 py-2 text-white;
&::after {
@apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110;
}
}
.ant-dropdown-menu-submenu {
@apply !py-0;
&.ant-dropdown-menu-submenu-popup {
@apply border-1 border-gray-200;
}
.ant-dropdown-menu,
.ant-menu {
@apply m-0 p-0;
}
.ant-menu-item {
@apply !m-0 !px-2;
}
}
.ant-dropdown-menu {
@apply !p-0 !rounded-lg;
}
.ant-tabs-dropdown-menu-title-content {
@apply flex items-center;
}
.ant-dropdown-menu-item-group-list {
@apply !mx-0;
}
.ant-dropdown-menu-item-group-title {
@apply border-b-1;
}
.ant-dropdown-menu-item-group-list {
@apply m-0;
}
.ant-dropdown-menu-item,
.ant-menu-item {
@apply py-0;
}
.ant-dropdown-menu-title-content,
.ant-menu-title-content {
@apply !py-0;
}
.ant-dropdown-menu-submenu-title {
@apply !pr-2;
}
.vue-flow__minimap {
transform: scale(75%);
transform-origin: bottom right;
}
.nc-toolbar-btn {
@apply !shadow-none rounded hover:(bg-gray-50 !text-gray-800) focus:(!text-gray-800 bg-gray-50) text-gray-600 text-xs font-medium px-2 border-0;
}
.nc-toolbar-btn[disabled] {
@apply !text-gray-400 !cursor-not-allowed !hover:ring-0;
}
.nc-warning-info {
@apply !shadow-none rounded ring-1 ring-red-600;
}
.ant-modal-content {
@apply !p-6;
border-radius: 1rem;
}
.ant-modal-body {
@apply !p-0;
}
.ant-modal-confirm-body-wrapper {
@apply p-4;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled):hover,
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
@apply bg-gray-300 bg-opacity-20;
}
.ant-select-item-option:hover {
@apply !bg-gray-100;
}
.ant-select-item-option-selected {
@apply !bg-white;
}
/* Hide the element with id nc-selected-item-icon */
.ant-select-selection-item #nc-selected-item-icon {
@apply hidden;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
@apply bg-transparent;
}
.ant-select-selection-search-input:focus {
@apply !ring-0;
}
.nc-null {
@apply text-gray-300 italic;
input::placeholder {
@apply text-gray-300 italic;
}
}
.ant-btn-loading-icon {
& > span {
@apply block;
}
}
.nc-copy-failed-modal .ant-modal-confirm-content {
@apply pt-4 overflow-auto;
white-space: pre;
user-select: auto;
}
.nc-drawer-expanded-form .ant-drawer-content-wrapper {
transition: width 0.3s !important;
}
.nc-icon-transition {
@apply transform transition-transform !hover:(scale-115 text-shadow-sm) !active:(scale-100);
}
.nc-animation-pulse {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
0% {
opacity: 0.2;
}
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.nc-menu-item-wrapper {
@apply flex flex-row items-center py-3 gap-2;
}
.nc-click-transition {
@apply transform transition-transform transition-colors !text-gray-400 !hover:(scale-130 !text-gray-500) !active:(scale-100 !text-gray-500);
}
.nc-click-transition-1 {
@apply transform transition-transform !hover:(scale-120) !active:(scale-100);
}
@keyframes pop-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pop-in-animation {
-webkit-animation: pop-in 0.075s cubic-bezier(0, 0, 0.6, -0.13);
animation: pop-in 0.075s cubic-bezier(0, 0, 0.6, -0.13);
}
.pop-in-animation-med-delay {
-webkit-animation: pop-in 0.15s cubic-bezier(0, 0, 0.6, -0.13);
animation: pop-in 0.15s cubic-bezier(0, 0, 0.6, -0.13);
}
// button
.nc-btn {
@apply rounded py-2 px-4 border-gray-200 h-auto;
}
.ant-popover-inner {
@apply rounded-lg !p-0;
}
.ant-popover-inner-content {
@apply !px-1.5 !py-1 text-xs;
}
.ant-tooltip-inner {
@apply !px-1.5 !py-1 text-xs text-white bg-black;
min-height: 0 !important;
}
.ant-skeleton-input {
@apply !h-full;
}
.nc-toolbar-dropdown {
@apply !rounded-lg;
}
input[type='number'] {
@apply !outline-none !ring-0 !border-0;
}
.ant-pagination {
@apply !flex !flex-row !gap-1;
}
.ant-pagination .ant-pagination-prev {
@apply !border-1 !rounded-md !border-gray-200 transform scale-95;
}
.ant-pagination .ant-pagination-item {
@apply !bg-white !rounded-md !border-1 !scale-110 !border-gray-200 !flex !items-center !justify-center;
}
.ant-pagination .ant-pagination-item a {
@apply !no-underline !text-gray-700;
}
.ant-pagination .ant-pagination-item-active a {
@apply !text-brand-500;
}
.ant-pagination .ant-pagination-next {
@apply !border-1 !rounded-md !border-gray-200 scale-95;
}
.ant-pagination .ant-pagination-item-active {
@apply !bg-brand-50 !text-brand-500 !border-0 !scale-110;
}
.ant-pagination .ant-pagination-item-link {
@apply !flex !items-center !justify-center;
}
.ant-pagination .ant-pagination-jump-next-custom-icon .ant-pagination-item-link {
@apply !block;
}
.ant-pagination .ant-pagination-jump-prev-custom-icon .ant-pagination-item-link {
@apply !block;
}
.ant-pagination .ant-pagination-item-link-icon {
@apply !block !py-1.5;
}
.nc-sidebar-node {
@apply !xs:(min-h-12 max-h-12 hover:bg-gray-50 ml-1.5 w-[calc(100%-8px)]);
.nc-emoji {
@apply xs:(text-lg);
}
.material-symbols,
.nc-icon {
@apply !xs:(text-xl -mt-0.25);
}
.nc-sidebar-node-title {
@apply xs:(text-base);
}
.nc-sidebar-node-btn:not(.nc-sidebar-expand) {
@apply !xs:(hidden);
}
.nc-sidebar-node-btn.nc-sidebar-expand {
@apply !xs:(flex-none border-1 border-gray-200 w-6.5 h-6.5 mr-1);
}
}
.nc-button.ant-btn.nc-sidebar-node-btn {
@apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
}
.nc-button.ant-btn.nc-sidebar-node-btn:not(.nc-sidebar-expand):not(.nc-sidebar-view-node-context-btn) {
@apply hidden group-hover:(inline-block);
}
.nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
@apply xs:(opacity-100 hover:bg-gray-50);
.nc-icon {
@apply xs:(visible opacity-100 !text-gray-500);
}
}
.ant-message-notice-content {
@apply !rounded-md;
.ant-message-custom-content {
@apply flex items-center;
}
}
svg.nc-cell-icon,
svg.nc-virtual-cell-icon {
@apply w-1em h-1em flex-none;
font-size: 1rem;
}
// For select type field list layout
.nc-field-layout-list {
@apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
.ant-checkbox-wrapper {
@apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
&:hover {
.ant-checkbox-checked:after {
@apply !rounded;
}
}
.ant-checkbox {
@apply !top-0;
& + span {
@apply !flex !pl-4 max-w-[calc(100%_-_16px)];
}
.ant-checkbox-checked:after,
.ant-checkbox-inner {
@apply !rounded;
}
}
}
.ant-radio-wrapper {
@apply !m-0 !h-9 !mr-0 !flex !items-center w-full !max-w-full pl-2 rounded-lg hover:bg-gray-100;
.ant-radio {
@apply !top-0;
}
.ant-radio + span {
@apply !flex !pl-4 max-w-[calc(100%_-_16px)];
}
}
}
.nc-toolbar-dropdown-search-field-input {
@apply !rounded-lg;
.nc-search-icon {
@apply text-gray-400;
}
&:hover .nc-search-icon,
&.ant-input-affix-wrapper-focused .nc-search-icon {
@apply text-gray-800;
}
}
// switch - on tab focus show outline
.ant-switch:focus-visible,
.ant-switch-checked:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
}
.text-nowrap {
text-wrap: nowrap;
}