mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-07 00:36:41 +08:00
重构scss文件结构
This commit is contained in:
jxxghp
@@ -1,67 +1,88 @@
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
@use "@configured-variables" as variables;
|
||||
@use "../mixins";
|
||||
|
||||
// 👉 Apex chart
|
||||
.apexcharts-canvas {
|
||||
&line[stroke="transparent"] {
|
||||
display: "none";
|
||||
// For RTL alignment
|
||||
.apexcharts-yaxis-texts-g {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
// Tooltip
|
||||
.apexcharts-tooltip {
|
||||
@include mixins_elevation.elevation(3);
|
||||
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
line-height: 1.5;
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
font-weight: 500;
|
||||
margin-block-end: 0.25rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
font-size: inherit;
|
||||
gap: 0.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-label,
|
||||
.apexcharts-tooltip-text-value {
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group {
|
||||
padding-block: 0 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
|
||||
&:last-child {
|
||||
padding-block-end: 1rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.apexcharts-theme-light {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&.apexcharts-theme-dark {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group:first-of-type {
|
||||
padding-block-end: 0;
|
||||
border-color: rgb(var(--v-border-color));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
box-shadow: none;
|
||||
|
||||
.apexcharts-tooltip-text-label,
|
||||
.apexcharts-tooltip-text-value {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-grey-50));
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
|
||||
&::after {
|
||||
border-block-end-color: rgb(var(--v-theme-grey-50));
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.apexcharts-marker {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// 👉 stroke-dasharray
|
||||
.apexcharts-radialbar,
|
||||
.apexcharts-radialbar-slice-current {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip,
|
||||
.apexcharts-yaxistooltip {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-grey-50));
|
||||
|
||||
&::after {
|
||||
border-inline-start-color: rgb(var(--v-theme-grey-50));
|
||||
}
|
||||
border-color: rgb(var(--v-border-color));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-block-end-color: rgb(var(--v-border-color));
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-text,
|
||||
.apexcharts-yaxistooltip-text {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
// 👉 Text color
|
||||
.apexcharts-text,
|
||||
.apexcharts-tooltip-text,
|
||||
.apexcharts-datalabel-label,
|
||||
@@ -69,19 +90,16 @@
|
||||
.apexcharts-xaxistooltip-text,
|
||||
.apexcharts-yaxistooltip-text,
|
||||
.apexcharts-legend-text {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label {
|
||||
fill: white;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.apexcharts-marker {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.apexcharts-legend-marker {
|
||||
margin-inline-end: 0.3875rem;
|
||||
// 👉 Annotation Label
|
||||
.apexcharts-annotation-rect {
|
||||
&.apexcharts-xaxis-annotation-rect,
|
||||
&.apexcharts-yaxis-annotation-rect {
|
||||
fill-opacity: 0.05;
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,246 @@
|
||||
@use "../mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
.v-application .fc {
|
||||
--fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
|
||||
--fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
--fc-neutral-bg-color: rgb(var(--v-theme-background));
|
||||
--fc-list-event-hover-bg-color: rgba(var(--v-theme-on-surface), 0.02);
|
||||
--fc-page-bg-color: rgb(var(--v-theme-surface));
|
||||
--fc-event-border-color: currentcolor;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fc-timegrid-divider {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-toolbar-title {
|
||||
display: inline-block;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
.fc-col-header-cell-cushion {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.fc-timegrid-event {
|
||||
.fc-event-title {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-prev-button {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.fc-prev-button,
|
||||
.fc-next-button {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.fc-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
|
||||
padding: 0.5rem;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||||
block-size: 3rem;
|
||||
}
|
||||
|
||||
// Removed double border on left in list view
|
||||
.fc-list {
|
||||
border-inline-start: none;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.fc-list-day-cushion.fc-cell-shaded {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc-list-event-time,
|
||||
.fc-list-event-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.fc-list-day .fc-list-day-text,
|
||||
.fc-list-day .fc-list-day-side-text {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-axis {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.75rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot-label-frame {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
flex-wrap: wrap;
|
||||
margin: 1.25rem;
|
||||
gap: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
// 👉 Toolbar Chunk and Button Group
|
||||
.fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fc-button-group {
|
||||
.fc-button-primary {
|
||||
&,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:not(.disabled):active {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
box-shadow: none !important;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 sidebar toggler
|
||||
.fc-drawerToggler-button {
|
||||
display: none;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
block-size: 1.5625rem;
|
||||
font-size: 0;
|
||||
inline-size: 1.5625rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
|
||||
@media (width <= 1264px) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.v-theme--dark & {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
// Special styling for the last toolbar chunk
|
||||
&:last-child {
|
||||
.fc-button-group {
|
||||
border: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 0.375rem;
|
||||
|
||||
.fc-button {
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.0187rem;
|
||||
padding-inline: 1rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-inline-end: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
&.fc-button-active {
|
||||
background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-scrollgrid-section {
|
||||
th {
|
||||
border-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar content container
|
||||
.fc-view-harness {
|
||||
min-block-size: 40.625rem;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border-color: transparent;
|
||||
margin-block-end: 0.3rem;
|
||||
padding-block: 0.1875rem;
|
||||
padding-inline: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-event-main {
|
||||
color: inherit;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
tbody[role="rowgroup"] {
|
||||
> tr > td[role="presentation"] {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-scrollgrid {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
padding: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.fc-list-event-dot {
|
||||
color: inherit;
|
||||
|
||||
--fc-event-border-color: currentcolor;
|
||||
}
|
||||
|
||||
.fc-list-event {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
@include mixins.elevation(3);
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
.fc-popover-header,
|
||||
.fc-popover-body {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.fc-popover-title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
|
||||
.fc-col-header,
|
||||
.fc-daygrid-body,
|
||||
.fc-scrollgrid-sync-table,
|
||||
.fc-timegrid-body,
|
||||
.fc-timegrid-body table {
|
||||
inline-size: 100% !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
$ps-size: 0.25rem;
|
||||
$ps-hover-size: 0.375rem;
|
||||
$ps-track-size: 0.5rem;
|
||||
|
||||
.ps__thumb-x,
|
||||
.ps__thumb-y {
|
||||
background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
inline-size: $ps-size;
|
||||
inset-inline-end: 0.0625rem;
|
||||
}
|
||||
|
||||
.ps__thumb-x {
|
||||
block-size: $ps-size !important;
|
||||
}
|
||||
|
||||
.ps__rail-x {
|
||||
background: transparent !important;
|
||||
block-size: $ps-track-size;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
background: transparent !important;
|
||||
inline-size: $ps-track-size !important;
|
||||
inset-inline-end: 0.125rem !important;
|
||||
inset-inline-start: unset !important;
|
||||
}
|
||||
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y:hover > .ps__thumb-y {
|
||||
inline-size: $ps-hover-size;
|
||||
}
|
||||
|
||||
// fix bug
|
||||
@media(hover: none) {
|
||||
.ps > .ps__rail-x,
|
||||
.ps > .ps__rail-y {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
@use "@core/scss/utils";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "../../utils";
|
||||
|
||||
// 👉 Application
|
||||
// ℹ️ We need accurate vh in mobile devices as well
|
||||
@@ -45,6 +45,17 @@ h6,
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Button
|
||||
@if variables.$vuetify-reduce-default-compact-button-icon-size {
|
||||
.v-btn--density-compact.v-btn--size-default {
|
||||
.v-btn__content > svg {
|
||||
block-size: 22px;
|
||||
font-size: 22px;
|
||||
inline-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Card
|
||||
// Removes padding-top for immediately placed v-card-text after itself
|
||||
.v-card-text {
|
||||
@@ -71,7 +82,9 @@ h6,
|
||||
&.v-checkbox-btn,
|
||||
&.v-radio,
|
||||
&.v-radio-btn {
|
||||
margin-inline-start: -0.5625rem;
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: -0.5625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,7 +92,9 @@ h6,
|
||||
&.v-radio,
|
||||
&.v-radio-btn,
|
||||
&.v-checkbox-btn {
|
||||
margin-inline-start: -0.3125rem;
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: -0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,7 +102,9 @@ h6,
|
||||
&.v-checkbox-btn,
|
||||
&.v-radio,
|
||||
&.v-radio-btn {
|
||||
margin-inline-start: -0.6875rem;
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: -0.6875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,13 +171,131 @@ h6,
|
||||
padding-block: 0 !important;
|
||||
padding-inline: 0 !important;
|
||||
|
||||
> .v-ripple__container {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-block-end: var(--v-card-list-gap) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item:hover,
|
||||
.v-list-item:focus,
|
||||
.v-list-item:active,
|
||||
.v-list-item.active {
|
||||
> .v-list-item__overlay {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Table
|
||||
.v-table {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
// 👉 Divider
|
||||
.v-divider {
|
||||
color: rgb(var(--v-border-color));
|
||||
}
|
||||
|
||||
// 👉 DataTable
|
||||
.v-data-table {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.v-checkbox-btn .v-selection-control__wrapper {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.v-selection-control {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.v-pagination {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 v-field
|
||||
.v-field:hover .v-field__outline {
|
||||
--v-field-border-opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
|
||||
// 👉 VLabel
|
||||
.v-label {
|
||||
opacity: 1 !important;
|
||||
|
||||
&:not(.v-field-label--floating) {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Overlay
|
||||
.v-overlay__scrim,
|
||||
.v-navigation-drawer__scrim {
|
||||
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
// 👉 VMessages
|
||||
.v-messages {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// 👉 Alert close btn
|
||||
.v-alert__close {
|
||||
.v-btn--icon .v-icon {
|
||||
--v-icon-size-multiplier: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Badge icon alignment
|
||||
.v-badge__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 👉 Dialog
|
||||
.v-dialog--fullscreen {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
// For dialog card title
|
||||
.v-card-item + .v-card-text {
|
||||
padding-block-start: 0 !important;
|
||||
}
|
||||
|
||||
// 👉 v-slide-group (List of chips)
|
||||
.v-slide-group {
|
||||
.v-slide-group__container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// Spacing between buttons in v-slide-group
|
||||
.v-slide-group-item:not(:last-child) {
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Expansion Panel
|
||||
.v-expansion-panels {
|
||||
.v-expansion-panel-title {
|
||||
min-block-size: unset !important;
|
||||
padding-block: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 v-textarea
|
||||
.v-textarea {
|
||||
textarea {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Cursor
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,24 @@
|
||||
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
|
||||
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
|
||||
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
|
||||
/* stylelint-disable-next-line max-line-length */
|
||||
$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
// 👉 Card transition properties
|
||||
$card-transition-property-custom: box-shadow, opacity;
|
||||
|
||||
@forward "vuetify/settings" with (
|
||||
// 👉 General settings
|
||||
// 👉 General settings
|
||||
$color-pack: false !default,
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !default,
|
||||
|
||||
// 👉 Shadow opacity
|
||||
// 👉 Shadow opacity
|
||||
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
|
||||
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
|
||||
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
|
||||
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !default,
|
||||
|
||||
$shadow-key-umbra: (
|
||||
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
||||
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
@@ -119,6 +121,18 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
|
||||
) !default,
|
||||
|
||||
// 👉 Card
|
||||
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$card-elevation: 6 !default,
|
||||
$card-title-line-height: 2rem !default,
|
||||
$card-actions-min-height: unset !default,
|
||||
$card-text-padding: 1.25rem !default,
|
||||
$card-item-padding: 1.25rem !default,
|
||||
$card-actions-padding: 0 12px 12px !default,
|
||||
$card-transition-property: $card-transition-property-custom !default,
|
||||
$card-subtitle-opacity: 1 !default,
|
||||
$card-title-letter-spacing: 0.0094rem !default,
|
||||
|
||||
// 👉 Typography
|
||||
$typography: (
|
||||
"h1": (
|
||||
@@ -170,29 +184,14 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
)
|
||||
) !default,
|
||||
|
||||
// 👉 States
|
||||
$states: ("activated": 0.08) !default,
|
||||
|
||||
// 👉 Card
|
||||
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$card-elevation: 6 !default,
|
||||
$card-title-line-height: 1.6 !default,
|
||||
$card-actions-min-height: unset !default,
|
||||
$card-text-padding: 20px !default,
|
||||
$card-item-padding: 15px 20px !default,
|
||||
$card-actions-padding: 0 12px 12px !default,
|
||||
$card-title-letter-spacing: 0.0094rem !default,
|
||||
$card-subtitle-opacity: 1 !default,
|
||||
$card-transition-property: $card-transition-property-custom !default,
|
||||
|
||||
// 👉 Navigation Drawer
|
||||
$navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
||||
|
||||
// 👉 Table
|
||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
||||
// 👉 List
|
||||
$list-item-icon-margin-end: 16px !default,
|
||||
$list-item-icon-margin-start: 16px !default,
|
||||
$list-item-subtitle-opacity: 1 !default,
|
||||
$list-subheader-text-opacity: 1 !default,
|
||||
|
||||
// 👉 Tooltip
|
||||
$tooltip-background-color:#212121 !default,
|
||||
$tooltip-background-color: #212121 !default,
|
||||
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
||||
$tooltip-font-size: 0.75rem !default,
|
||||
$tooltip-border-radius: 4px !default,
|
||||
@@ -205,6 +204,8 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
|
||||
// 👉 Badge
|
||||
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
||||
$badge-dot-height: 0.5rem !default,
|
||||
$badge-dot-width: 0.5rem !default,
|
||||
|
||||
// 👉 Button
|
||||
$button-height: 38px !default,
|
||||
@@ -212,6 +213,7 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
$button-border-radius: 5px !default,
|
||||
$button-padding-ratio: 1.7 !default,
|
||||
$button-text-letter-spacing: 0.025rem !default,
|
||||
$button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
|
||||
|
||||
// 👉 Dialog
|
||||
$dialog-card-header-padding: 20px !default,
|
||||
@@ -220,6 +222,7 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
|
||||
// 👉 Chip
|
||||
$chip-label-border-radius: 4px !default,
|
||||
$chip-close-size: 20px !default,
|
||||
|
||||
// 👉 Expansion panel
|
||||
$expansion-panel-title-padding: 16px 20px !default,
|
||||
@@ -232,9 +235,6 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
// 👉 Menu
|
||||
$menu-content-border-radius: 5px !default,
|
||||
|
||||
// 👉 List
|
||||
$list-subheader-text-opacity: 1 !default,
|
||||
|
||||
// 👉 Snackbar
|
||||
$snackbar-background:#212121 !default,
|
||||
$snackbar-border-radius: 4px !default,
|
||||
@@ -243,7 +243,12 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
// 👉 Tabs
|
||||
$tabs-height: 40px !default,
|
||||
|
||||
// 👉 Timeline
|
||||
// 👉 Slider
|
||||
$slider-track-active-size: 4px !default,
|
||||
$slider-thumb-label-padding: 4px 12px !default,
|
||||
$slider-thumb-label-font-size: 0.875rem !default,
|
||||
|
||||
// 👉 Timeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
$timeline-dot-divider-background: transparent !default,
|
||||
|
||||
@@ -252,4 +257,7 @@ $card-transition-property-custom: box-shadow, opacity;
|
||||
|
||||
// 👉 Navigation Drawer
|
||||
$navigation-drawer-scrim-opacity:0.5 !default,
|
||||
|
||||
// 👉 Table
|
||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
|
||||
);
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
@use "variables";
|
||||
@use "overrides";
|
||||
|
||||
Reference in New Issue
Block a user