mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-19 01:04:25 +08:00
add desktop frontend framework
This commit is contained in:
MaysWind
@@ -0,0 +1,42 @@
|
||||
/** Base class **/
|
||||
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: inherit;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
:root {
|
||||
--v-theme-overlay-multiplier: 1;
|
||||
--v-scrollbar-offset: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: inter,sans-serif,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;
|
||||
line-height: 1.5;
|
||||
font-size: 1rem;
|
||||
overflow-x: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
html.overflow-y-hidden {
|
||||
overflow-y: hidden!important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.disabled {
|
||||
opacity: 0.55 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.readonly {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/** Text size class **/
|
||||
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
|
||||
|
||||
.text-xs {
|
||||
font-size: .75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: .875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-7xl {
|
||||
font-size: 4.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-8xl {
|
||||
font-size: 6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-9xl {
|
||||
font-size: 8rem;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -0,0 +1,362 @@
|
||||
/** Gap size class **/
|
||||
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
|
||||
|
||||
.gap-0 {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.gap-x-0 {
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
.gap-y-0 {
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.gap-x-1 {
|
||||
column-gap: .25rem;
|
||||
}
|
||||
|
||||
.gap-y-1 {
|
||||
row-gap: .25rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.gap-x-2 {
|
||||
column-gap: .5rem;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: .5rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.gap-x-3 {
|
||||
column-gap: .75rem;
|
||||
}
|
||||
|
||||
.gap-y-3 {
|
||||
row-gap: .75rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-x-4 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-y-4 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-5 {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.gap-x-5 {
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
|
||||
.gap-y-5 {
|
||||
row-gap: 1.25rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-x-6 {
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-y-6 {
|
||||
row-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-7 {
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
.gap-x-7 {
|
||||
column-gap: 1.75rem;
|
||||
}
|
||||
|
||||
.gap-y-7 {
|
||||
row-gap: 1.75rem;
|
||||
}
|
||||
|
||||
.gap-8 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-x-8 {
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-y-8 {
|
||||
row-gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-9 {
|
||||
gap: 2.25rem;
|
||||
}
|
||||
|
||||
.gap-x-9 {
|
||||
column-gap: 2.25rem;
|
||||
}
|
||||
|
||||
.gap-y-9 {
|
||||
row-gap: 2.25rem;
|
||||
}
|
||||
|
||||
.gap-10 {
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.gap-x-10 {
|
||||
column-gap: 2.5rem;
|
||||
}
|
||||
|
||||
.gap-y-10 {
|
||||
row-gap: 2.5rem;
|
||||
}
|
||||
|
||||
.gap-11 {
|
||||
gap: 2.75rem;
|
||||
}
|
||||
|
||||
.gap-x-11 {
|
||||
column-gap: 2.75rem;
|
||||
}
|
||||
|
||||
.gap-y-11 {
|
||||
row-gap: 2.75rem;
|
||||
}
|
||||
|
||||
.gap-12 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.gap-x-12 {
|
||||
column-gap: 3rem;
|
||||
}
|
||||
|
||||
.gap-y-12 {
|
||||
row-gap: 3rem;
|
||||
}
|
||||
|
||||
.gap-14 {
|
||||
gap: 3.5rem;
|
||||
}
|
||||
|
||||
.gap-x-14 {
|
||||
column-gap: 3.5rem;
|
||||
}
|
||||
|
||||
.gap-y-14 {
|
||||
row-gap: 3.5rem;
|
||||
}
|
||||
|
||||
.gap-16 {
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.gap-x-16 {
|
||||
column-gap: 4rem;
|
||||
}
|
||||
|
||||
.gap-y-16 {
|
||||
row-gap: 4rem;
|
||||
}
|
||||
|
||||
.gap-20 {
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.gap-x-20 {
|
||||
column-gap: 5rem;
|
||||
}
|
||||
|
||||
.gap-y-20 {
|
||||
row-gap: 5rem;
|
||||
}
|
||||
|
||||
.gap-24 {
|
||||
gap: 6rem;
|
||||
}
|
||||
|
||||
.gap-x-24 {
|
||||
column-gap: 6rem;
|
||||
}
|
||||
|
||||
.gap-y-24 {
|
||||
row-gap: 6rem;
|
||||
}
|
||||
|
||||
.gap-28 {
|
||||
gap: 7rem;
|
||||
}
|
||||
|
||||
.gap-x-28 {
|
||||
column-gap: 7rem;
|
||||
}
|
||||
|
||||
.gap-y-28 {
|
||||
row-gap: 7rem;
|
||||
}
|
||||
|
||||
.gap-32 {
|
||||
gap: 8rem;
|
||||
}
|
||||
|
||||
.gap-x-32 {
|
||||
column-gap: 8rem;
|
||||
}
|
||||
|
||||
.gap-y-32 {
|
||||
row-gap: 8rem;
|
||||
}
|
||||
|
||||
.gap-36 {
|
||||
gap: 9rem;
|
||||
}
|
||||
|
||||
.gap-x-36 {
|
||||
column-gap: 9rem;
|
||||
}
|
||||
|
||||
.gap-y-36 {
|
||||
row-gap: 9rem;
|
||||
}
|
||||
|
||||
.gap-40 {
|
||||
gap: 10rem;
|
||||
}
|
||||
|
||||
.gap-x-40 {
|
||||
column-gap: 10rem;
|
||||
}
|
||||
|
||||
.gap-y-40 {
|
||||
row-gap: 10rem;
|
||||
}
|
||||
|
||||
.gap-44 {
|
||||
gap: 11rem;
|
||||
}
|
||||
|
||||
.gap-x-44 {
|
||||
column-gap: 11rem;
|
||||
}
|
||||
|
||||
.gap-y-44 {
|
||||
row-gap: 11rem;
|
||||
}
|
||||
|
||||
.gap-48 {
|
||||
gap: 12rem;
|
||||
}
|
||||
|
||||
.gap-x-48 {
|
||||
column-gap: 12rem;
|
||||
}
|
||||
|
||||
.gap-y-48 {
|
||||
row-gap: 12rem;
|
||||
}
|
||||
|
||||
.gap-52 {
|
||||
gap: 13rem;
|
||||
}
|
||||
|
||||
.gap-x-52 {
|
||||
column-gap: 13rem;
|
||||
}
|
||||
|
||||
.gap-y-52 {
|
||||
row-gap: 13rem;
|
||||
}
|
||||
|
||||
.gap-56 {
|
||||
gap: 14rem;
|
||||
}
|
||||
|
||||
.gap-x-56 {
|
||||
column-gap: 14rem;
|
||||
}
|
||||
|
||||
.gap-y-56 {
|
||||
row-gap: 14rem;
|
||||
}
|
||||
|
||||
.gap-60 {
|
||||
gap: 15rem;
|
||||
}
|
||||
|
||||
.gap-x-60 {
|
||||
column-gap: 15rem;
|
||||
}
|
||||
|
||||
.gap-y-60 {
|
||||
row-gap: 15rem;
|
||||
}
|
||||
|
||||
.gap-64 {
|
||||
gap: 16rem;
|
||||
}
|
||||
|
||||
.gap-x-64 {
|
||||
column-gap: 16rem;
|
||||
}
|
||||
|
||||
.gap-y-64 {
|
||||
row-gap: 16rem;
|
||||
}
|
||||
|
||||
.gap-72 {
|
||||
gap: 18rem;
|
||||
}
|
||||
|
||||
.gap-x-72 {
|
||||
column-gap: 18rem;
|
||||
}
|
||||
|
||||
.gap-y-72 {
|
||||
row-gap: 18rem;
|
||||
}
|
||||
|
||||
.gap-80 {
|
||||
gap: 20rem;
|
||||
}
|
||||
|
||||
.gap-x-80 {
|
||||
column-gap: 20rem;
|
||||
}
|
||||
|
||||
.gap-y-80 {
|
||||
row-gap: 20rem;
|
||||
}
|
||||
|
||||
.gap-96 {
|
||||
gap: 24rem;
|
||||
}
|
||||
|
||||
.gap-x-96 {
|
||||
column-gap: 24rem;
|
||||
}
|
||||
|
||||
.gap-y-96 {
|
||||
row-gap: 24rem;
|
||||
}
|
||||
@@ -0,0 +1,544 @@
|
||||
/** Layout class **/
|
||||
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
|
||||
|
||||
html,
|
||||
body {
|
||||
min-block-size: 100%;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
|
||||
margin-block: 0;
|
||||
margin-inline: 0 1.125rem;
|
||||
padding-block: 0;
|
||||
padding-inline: 1.375rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
|
||||
border-radius: .4rem;
|
||||
block-size: 2.75rem;
|
||||
margin-block-end: .375rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link .nav-item-icon,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-item-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
margin-inline-end: .625rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-item-icon,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-link .nav-item-icon {
|
||||
font-size: .9rem;
|
||||
margin-inline-end: .925rem;
|
||||
margin-inline-start: .3rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-link .nav-item-icon,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-group .nav-item-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :first-child:before {
|
||||
opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :hover:first-child .nav-group.active > :first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :hover:first-child .nav-group.active > :first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :hover:first-child .nav-group.open > :first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :hover:first-child .nav-group.open > :first-child:before {
|
||||
opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus-visible:first-child .nav-group.active > :first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus-visible:first-child .nav-group.active > :first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus-visible:first-child .nav-group.open > :first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus-visible:first-child .nav-group.open > :first-child:before {
|
||||
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus:first-child:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus:first-child:before {
|
||||
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
|
||||
block-size: 1.5rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-item-badge {
|
||||
display: inline-block;
|
||||
border-radius: 1.5rem;
|
||||
font-size: .8em;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
padding-block: .25em;
|
||||
padding-inline: .55em;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-item-title {
|
||||
letter-spacing: .15px;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > .router-link-exact-active {
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.layout-navbar {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .navbar-blur.layout-navbar .navbar-content-container,
|
||||
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .navbar-blur.layout-navbar .navbar-content-container {
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
background-color: rgb(var(--v-theme-surface), .9);
|
||||
}
|
||||
|
||||
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .layout-navbar .navbar-content-container,
|
||||
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .layout-navbar .navbar-content-container {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .layout-navbar .navbar-content-container,
|
||||
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .layout-navbar .navbar-content-container {
|
||||
box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
|
||||
padding-inline: 1.2rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > .router-link-exact-active {
|
||||
background: linear-gradient(-72.47deg, rgb(var(--v-theme-primary)) 22.16%, rgba(var(--v-theme-primary), .7) 76.47%) !important;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
column-gap: .625rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:before,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:after {
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
content: "";
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:after {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:before {
|
||||
flex: 0 1 .75rem;
|
||||
margin-inline-start: -1.375rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
|
||||
margin-inline: 4px 0;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
|
||||
block-size: 2.625rem !important;
|
||||
border-end-end-radius: 3.125rem !important;
|
||||
border-end-start-radius: 0 !important;
|
||||
border-start-end-radius: 3.125rem !important;
|
||||
border-start-start-radius: 0 !important;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
|
||||
transition: margin-inline .15s ease-in-out;
|
||||
will-change: margin-inline;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-link > :first-child,
|
||||
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-group > :first-child {
|
||||
margin-inline: 0 5px;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav {
|
||||
background-color: rgb(var(--v-theme-background));
|
||||
}
|
||||
|
||||
.layout-vertical-nav-collapsed.layout-nav-type-vertical .layout-vertical-nav.hovered {
|
||||
box-shadow: 0 4px 5px -2px var(--v-shadow-key-umbra-opacity), 0 2px 10px 1px var(--v-shadow-key-penumbra-opacity), 0 2px 16px 1px var(--v-shadow-key-ambient-opacity);
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-header {
|
||||
overflow: hidden;
|
||||
padding: 1rem .25rem 1rem 1.375rem;
|
||||
margin-inline: 0 1.125rem;
|
||||
min-block-size: 64px;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-header .app-logo {
|
||||
flex-shrink: 0;
|
||||
transition: transform .25s ease-in-out;
|
||||
}
|
||||
|
||||
.layout-vertical-nav-collapsed.layout-nav-type-vertical .layout-vertical-nav:not(.hovered) .nav-header .app-logo {
|
||||
transform: translate(-4px);
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-header .app-title {
|
||||
margin-inline-start: .9rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .vertical-nav-items-shadow {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: linear-gradient(rgb(var(--v-theme-background)) 5%, rgba(var(--v-theme-background), 75%) 45%, rgba(var(--v-theme-background), 20%) 80%, transparent);
|
||||
block-size: 55px;
|
||||
inline-size: 100%;
|
||||
inset-block-start: 62px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .15s ease-in-out;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav.scrolled .vertical-nav-items-shadow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .ps__rail-y {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
|
||||
margin-block-end: .5rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title:not(:first-child) {
|
||||
margin-block-start: 1.5rem;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .placeholder-icon {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link.disabled,
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.disabled {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:before {
|
||||
position: absolute;
|
||||
border-radius: inherit;
|
||||
background: currentcolor;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
inline-size: 100%;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:hover:before {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:focus-visible:before {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:focus:before {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group-arrow {
|
||||
flex-shrink: 0;
|
||||
transform-origin: center;
|
||||
transition: transform .15s ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > .nav-group-label .nav-group-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:before {
|
||||
position: absolute;
|
||||
border-radius: inherit;
|
||||
background: currentcolor;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
inline-size: 100%;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:hover:before {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:focus-visible:before {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:focus:before {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-nav-section-title-enter-active,
|
||||
.vertical-nav-section-title-leave-active {
|
||||
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
|
||||
}
|
||||
|
||||
.vertical-nav-section-title-enter-from,
|
||||
.vertical-nav-section-title-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(15px);
|
||||
}
|
||||
|
||||
.transition-slide-x-enter-active,
|
||||
.transition-slide-x-leave-active {
|
||||
transition: opacity .1s ease-in-out, transform .12s ease-in-out;
|
||||
}
|
||||
|
||||
.transition-slide-x-enter-from,
|
||||
.transition-slide-x-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(-15px);
|
||||
}
|
||||
|
||||
.vertical-nav-app-title-enter-active,
|
||||
.vertical-nav-app-title-leave-active {
|
||||
transition: opacity .1s ease-in-out, transform .12s ease-in-out;
|
||||
}
|
||||
|
||||
.vertical-nav-app-title-enter-from,
|
||||
.vertical-nav-app-title-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(-15px);
|
||||
}
|
||||
|
||||
.layout-vertical-nav ol, .layout-vertical-nav ul,
|
||||
.layout-horizontal-nav ol, .layout-horizontal-nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.scrollable-content.v-navigation-drawer .v-navigation-drawer__content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
|
||||
transition: padding .2s ease, background-color .18s ease;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-footer .footer-content-container {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer .footer-content-container {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
padding-block: 0;
|
||||
padding-inline: 1.2rem;
|
||||
box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .page-content-container > .v-layout:first-child {
|
||||
overflow: hidden;
|
||||
min-block-size: 100%;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .page-content-container > .v-layout:first-child > .v-main .v-main__wrap > :first-child {
|
||||
block-size: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-horizontal.layout-content-height-fixed > .layout-page-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layout-vertical-nav {
|
||||
position: fixed;
|
||||
z-index: 1004;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
block-size: 100%;
|
||||
inline-size: 260px;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
transition: transform .25s ease-in-out, inline-size .25s ease-in-out, box-shadow .25s ease-in-out;
|
||||
will-change: transform, inline-size;
|
||||
}
|
||||
|
||||
.layout-vertical-nav .nav-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layout-vertical-nav .app-title-wrapper {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.layout-vertical-nav .nav-items {
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.layout-vertical-nav .nav-item-title {
|
||||
overflow: hidden;
|
||||
margin-inline-end: auto;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) {
|
||||
inline-size: 68px
|
||||
}
|
||||
|
||||
.layout-vertical-nav.overlay-nav:not(.visible) {
|
||||
transform: translate(-260px);
|
||||
}
|
||||
|
||||
.layout-content-width-boxed.layout-wrapper.layout-nav-type-vertical .layout-navbar {
|
||||
inline-size: 100%;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 1440px;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-navbar {
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-navbar-hidden .layout-navbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky .layout-navbar {
|
||||
position: sticky;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
transition: padding-inline-start .2s ease-in-out;
|
||||
will-change: padding-inline-start;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-navbar {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
|
||||
block-size: 64px;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-overlay {
|
||||
position: fixed;
|
||||
z-index: 1003;
|
||||
background-color: #0009;
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .25s ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical .layout-overlay.visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical:not(.layout-overlay-nav) .layout-content-wrapper {
|
||||
padding-inline-start: 260px;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-content-wrapper {
|
||||
padding-inline-start: 68px;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-content-wrapper {
|
||||
max-block-size: calc(var(--vh) * 100);
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content .page-content-container {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content .page-content-container > :first-child {
|
||||
max-block-size: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layout-vertical-nav .nav-link a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layout-page-content {
|
||||
flex-grow: 1;
|
||||
padding-block: 1.5rem;
|
||||
}
|
||||
|
||||
.layout-page-content {
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
/** Vuetify class overrides **/
|
||||
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
|
||||
|
||||
.v-application__wrap {
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.text-h1,
|
||||
.text-h2,
|
||||
.text-h3,
|
||||
.text-h4,
|
||||
.text-h5,
|
||||
.text-h6,
|
||||
.text-button,
|
||||
.text-overline,
|
||||
.v-card-title {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.v-application,
|
||||
.text-body-1,
|
||||
.text-body-2,
|
||||
.text-subtitle-1,
|
||||
.text-subtitle-2 {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.v-row .v-col .v-input__details,
|
||||
.v-row [class^="v-col-*"] .v-input__details {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.v-btn--density-compact.v-btn--size-default .v-btn__content > svg {
|
||||
block-size: 22px;
|
||||
font-size: 22px;
|
||||
inline-size: 22px;
|
||||
}
|
||||
|
||||
.v-card-text + .v-card-text {
|
||||
padding-block-start: 0 !important;
|
||||
}
|
||||
|
||||
.v-checkbox.v-input,
|
||||
.v-switch.v-input {
|
||||
--v-input-control-height: auto;
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
.v-selection-control--density-comfortable.v-checkbox-btn .v-selection-control__wrapper,
|
||||
.v-selection-control--density-comfortable.v-radio .v-selection-control__wrapper,
|
||||
.v-selection-control--density-comfortable.v-radio-btn .v-selection-control__wrapper {
|
||||
margin-inline-start: -.5625rem;
|
||||
}
|
||||
|
||||
.v-selection-control--density-compact.v-radio .v-selection-control__wrapper,
|
||||
.v-selection-control--density-compact.v-radio-btn .v-selection-control__wrapper,
|
||||
.v-selection-control--density-compact.v-checkbox-btn .v-selection-control__wrapper {
|
||||
margin-inline-start: -.3125rem;
|
||||
}
|
||||
|
||||
.v-selection-control--density-default.v-checkbox-btn .v-selection-control__wrapper,
|
||||
.v-selection-control--density-default.v-radio .v-selection-control__wrapper,
|
||||
.v-selection-control--density-default.v-radio-btn .v-selection-control__wrapper {
|
||||
margin-inline-start: -.6875rem;
|
||||
}
|
||||
|
||||
.v-radio-group .v-selection-control-group .v-radio:not(:last-child) {
|
||||
margin-inline-end: .9rem;
|
||||
}
|
||||
|
||||
.disable-tab-transition {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
.disable-tab-transition .v-window__container {
|
||||
block-size: auto !important;
|
||||
}
|
||||
|
||||
.disable-tab-transition .v-window-item:not(.v-window-item--active) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.disable-tab-transition .v-window__container .v-window-item {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.v-list .v-list-item__prepend > .v-icon,
|
||||
.v-list .v-list-item__append > .v-icon {
|
||||
opacity: var(--v-high-emphasis-opacity);
|
||||
}
|
||||
|
||||
.card-list {
|
||||
--v-card-list-gap: 20px;
|
||||
}
|
||||
|
||||
.card-list.v-list {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.card-list .v-list-item {
|
||||
min-block-size: unset;
|
||||
min-block-size: auto !important;
|
||||
padding-block: 0 !important;
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.card-list .v-list-item > .v-ripple__container {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-list .v-list-item:not(:last-child) {
|
||||
padding-block-end: var(--v-card-list-gap) !important;
|
||||
}
|
||||
|
||||
.card-list .v-list-item: hover > .v-list-item__overlay,
|
||||
.card-list .v-list-item:focus > .v-list-item__overlay,
|
||||
.card-list .v-list-item:active > .v-list-item__overlay,
|
||||
.card-list .v-list-item.active > .v-list-item__overlay {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
color: rgb(var(--v-border-color));
|
||||
}
|
||||
|
||||
.v-data-table .v-checkbox-btn .v-selection-control__wrapper {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.v-data-table .v-selection-control {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.v-data-table .v-pagination {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.v-data-table-footer {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
.v-field:hover .v-field__outline {
|
||||
--v-field-border-opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
|
||||
.v-label {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.v-label:not(.v-field-label--floating) {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.v-messages {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.v-alert__close .v-btn--icon .v-icon {
|
||||
--v-icon-size-multiplier: 1.5;
|
||||
}
|
||||
|
||||
.v-badge__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.v-btn:focus-visible:after {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.v-input:not(.v-select--chips) .v-select__selection .v-chip {
|
||||
margin-block: 2px var(--select-chips-margin-bottom);
|
||||
}
|
||||
|
||||
.v-card-subtitle,
|
||||
.v-list-item-subtitle {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.v-field__input input::placeholder,
|
||||
input.v-field__input::placeholder,
|
||||
textarea.v-field__input::placeholder {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.v-card-item {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.v-card-text {
|
||||
letter-spacing: .0094rem;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.v-card--variant-elevated {
|
||||
box-shadow: 0 4px 5px -2px var(--v-shadow-key-umbra-opacity), 0 2px 10px 1px var(--v-shadow-key-penumbra-opacity), 0 2px 16px 1px var(--v-shadow-key-ambient-opacity);
|
||||
}
|
||||
|
||||
.v-card--variant-elevated,
|
||||
.v-card--variant-flat {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
Reference in New Issue
Block a user