mirror of https://github.com/nocodb/nocodb
296 lines
5.6 KiB
296 lines
5.6 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'; |
|
|
|
:root { |
|
--header-height: 42px; |
|
--toolbar-height: 48px; |
|
--tw-text-opacity: 1; |
|
} |
|
|
|
.ant-layout-header { |
|
height: var(--header-height) !important; |
|
} |
|
|
|
html, |
|
body, |
|
#__nuxt, |
|
.ant-layout, |
|
main { |
|
@apply m-0 h-full w-full bg-white; |
|
} |
|
|
|
html { |
|
overflow-y: auto !important; |
|
} |
|
|
|
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; |
|
} |
|
|
|
// menu item styling |
|
.nc-menu-item { |
|
@apply cursor-pointer text-xs 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-project-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-primary bg-opacity-100 text-white !text-[9px] !z-21; |
|
} |
|
|
|
// for highlighting toolbar menu item |
|
.nc-active-btn > .ant-btn { |
|
@apply bg-primary bg-opacity-20 hover:(bg-primary bg-opacity-20); |
|
} |
|
|
|
// for highlighing toolbar kanban menu item |
|
|
|
.nc-kanban-btn > .ant-btn { |
|
@apply bg-green-400 bg-opacity-20 hover:(bg-primary bg-opacity-20); |
|
} |
|
|
|
.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-primary ring-opacity-100) focus:(ring-1 ring-accent ring-opacity-100); |
|
} |
|
|
|
.ant-modal { |
|
@apply !top-[50px]; |
|
} |
|
|
|
.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; |
|
}
|
|
|