Material misc and media
parent
1506492bee
commit
21ae03bfce
|
@ -31,6 +31,7 @@ const theme = ({ dt }) => `
|
|||
.p-carousel-prev-button,
|
||||
.p-carousel-next-button {
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-carousel-indicator-list {
|
||||
|
|
|
@ -38,7 +38,7 @@ export default {
|
|||
style: 'none',
|
||||
color: 'unset',
|
||||
offset: '0',
|
||||
shadow: '0 0 1px 8px color-mix(in srgb, {surface.900}, transparent 88%)'
|
||||
shadow: '0 0 1px 4px color-mix(in srgb, {surface.900}, transparent 88%)'
|
||||
},
|
||||
disabledOpacity: '0.38',
|
||||
iconSize: '1rem',
|
||||
|
|
|
@ -7,18 +7,18 @@ export default {
|
|||
},
|
||||
indicatorList: {
|
||||
padding: '1rem',
|
||||
gap: '0.5rem'
|
||||
gap: '1rem'
|
||||
},
|
||||
indicator: {
|
||||
width: '2rem',
|
||||
height: '0.5rem',
|
||||
borderRadius: '{content.border.radius}',
|
||||
width: '1.25rem',
|
||||
height: '1.25rem',
|
||||
borderRadius: '50%',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
width: '0',
|
||||
style: 'none',
|
||||
color: 'unset',
|
||||
offset: '0',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
|
@ -36,5 +36,22 @@ export default {
|
|||
activeBackground: '{primary.color}'
|
||||
}
|
||||
}
|
||||
},
|
||||
style: ({ dt }) => `
|
||||
.p-carousel-indicator-button:hover {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
|
||||
}
|
||||
|
||||
.p-carousel-indicator-button:focus-visible {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
|
||||
}
|
||||
|
||||
.p-carousel-indicator-active .p-carousel-indicator-button:hover {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 92%);
|
||||
}
|
||||
|
||||
.p-carousel-indicator-active .p-carousel-indicator-button:focus-visible {
|
||||
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 84%);
|
||||
}
|
||||
`
|
||||
};
|
||||
|
|
|
@ -38,7 +38,7 @@ export default {
|
|||
},
|
||||
dark: {
|
||||
root: {
|
||||
background: '{surface.800}',
|
||||
background: '{surface.700}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
icon: {
|
||||
|
|
|
@ -35,7 +35,7 @@ export default {
|
|||
},
|
||||
thumbnailNavButton: {
|
||||
size: '2rem',
|
||||
borderRadius: '{content.border.radius}',
|
||||
borderRadius: '50%',
|
||||
gutter: '0.5rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
|
|
|
@ -2,7 +2,7 @@ export default {
|
|||
root: {
|
||||
background: '{content.border.color}',
|
||||
borderRadius: '{content.border.radius}',
|
||||
height: '1.25rem'
|
||||
height: '1rem'
|
||||
},
|
||||
value: {
|
||||
background: '{primary.color}'
|
||||
|
|
|
@ -13,28 +13,28 @@ export default {
|
|||
colorScheme: {
|
||||
light: {
|
||||
primary: {
|
||||
background: '{primary.100}',
|
||||
color: '{primary.700}'
|
||||
background: '{primary.color}',
|
||||
color: '{primary.contrast.color}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.100}',
|
||||
color: '{surface.600}'
|
||||
},
|
||||
success: {
|
||||
background: '{green.100}',
|
||||
color: '{green.700}'
|
||||
background: '{green.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
info: {
|
||||
background: '{sky.100}',
|
||||
color: '{sky.700}'
|
||||
background: '{sky.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.100}',
|
||||
color: '{orange.700}'
|
||||
background: '{orange.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
danger: {
|
||||
background: '{red.100}',
|
||||
color: '{red.700}'
|
||||
background: '{red.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.950}',
|
||||
|
@ -43,28 +43,28 @@ export default {
|
|||
},
|
||||
dark: {
|
||||
primary: {
|
||||
background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
|
||||
color: '{primary.300}'
|
||||
background: '{primary.color}',
|
||||
color: '{primary.contrast.color}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.800}',
|
||||
color: '{surface.300}'
|
||||
},
|
||||
success: {
|
||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
||||
color: '{green.300}'
|
||||
background: '{green.400}',
|
||||
color: '{green.950}'
|
||||
},
|
||||
info: {
|
||||
background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
|
||||
color: '{sky.300}'
|
||||
background: '{sky.400}',
|
||||
color: '{sky.950}'
|
||||
},
|
||||
warn: {
|
||||
background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
|
||||
color: '{orange.300}'
|
||||
background: '{orange.400}',
|
||||
color: '{orange.950}'
|
||||
},
|
||||
danger: {
|
||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
||||
color: '{red.300}'
|
||||
background: '{red.400}',
|
||||
color: '{red.950}'
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.0}',
|
||||
|
|
Loading…
Reference in New Issue