mirror of https://github.com/nocodb/nocodb
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.
680 lines
13 KiB
680 lines
13 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 { |
|
--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; |
|
} |
|
|
|
::-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; |
|
} |
|
|
|
.ant-layout-header { |
|
height: var(--topbar-height) !important; |
|
} |
|
|
|
.anticon-check-circle { |
|
@apply !relative top-[-1px] left-0; |
|
} |
|
|
|
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-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg { |
|
&::-webkit-scrollbar { |
|
width: 0px; |
|
} |
|
} |
|
} |
|
|
|
.nc-scrollbar-md { |
|
overflow-y: scroll; |
|
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-x-md { |
|
overflow-x: scroll; |
|
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: scroll; |
|
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: scroll; |
|
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: scroll; |
|
|
|
&::-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; |
|
} |
|
} |
|
|
|
// 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, |
|
.ant-menu { |
|
@apply m-0 p-0; |
|
} |
|
|
|
.ant-menu-item { |
|
@apply !m-0 !px-2; |
|
} |
|
} |
|
|
|
.ant-dropdown-menu { |
|
@apply !p-0 !rounded; |
|
} |
|
|
|
.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:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) 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-active:not(.ant-select-item-option-disabled) { |
|
@apply bg-primary bg-opacity-20; |
|
} |
|
|
|
.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-color !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 { |
|
padding: 0 !important; |
|
} |
|
.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-2xl; |
|
} |
|
|
|
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-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.nc-sidebar-expand { |
|
@apply xs:(opacity-100 hover:bg-gray-50); |
|
|
|
.nc-icon { |
|
@apply xs:(visible opacity-100 !text-gray-500) |
|
} |
|
}
|
|
|