186 lines
8.1 KiB
JavaScript
186 lines
8.1 KiB
JavaScript
const plugin = require('tailwindcss/plugin')
|
|
const tinycolor = require('tinycolor2')
|
|
|
|
module.exports = {
|
|
purge: {
|
|
content: [
|
|
'./public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
|
|
'./public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
|
|
'./public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',
|
|
'./public/typo3conf/ext/ep_theme/Resources/Private/Templates/**/*.html',
|
|
'./public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.{js,vue}',
|
|
'./public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
|
|
],
|
|
safelist: [
|
|
'bg-red-600',
|
|
'bg-header-season-w',
|
|
'bg-header-season-s',
|
|
'bg-concept-bdg', 'bg-concept-bdg-overlay',
|
|
'bg-concept-skr', 'bg-concept-skr-overlay',
|
|
'bg-concept-evt', 'bg-concept-evt-overlay',
|
|
'bg-concept-fam', 'bg-concept-fam-overlay',
|
|
'bg-concept-grp', 'bg-concept-grp-overlay',
|
|
'bg-concept-prg', 'bg-concept-prg-overlay',
|
|
'bg-concept-ind', 'bg-concept-ind-overlay',
|
|
'bg-concept-wkd', 'bg-concept-wkd-overlay',
|
|
'bg-concept-kt', 'bg-concept-kt-overlay',
|
|
'bg-concept-spz', 'bg-concept-spz-overlay',
|
|
'bg-concept-epe', 'bg-concept-epe-overlay',
|
|
'bg-concept-sfl', 'bg-concept-sfl-overlay',
|
|
/^flatpickr-.*/,
|
|
],
|
|
},
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '1rem',
|
|
},
|
|
fontFamily: {
|
|
'sans': [ 'Lato', 'sans-serif' ],
|
|
},
|
|
screens: {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
},
|
|
extend: {
|
|
fontSize: {
|
|
'xs': '.8rem',
|
|
},
|
|
colors: {
|
|
overlay: {
|
|
black: tinycolor('#000000').setAlpha(0.85).toRgbString(),
|
|
white: tinycolor('#ffffff').setAlpha(0.85).toRgbString(),
|
|
'white-50': tinycolor('#ffffff').setAlpha(0.5).toRgbString(),
|
|
},
|
|
concept: {
|
|
default: '#0173A5',
|
|
bdg: '#0173A5',
|
|
skr: '#0173A5',
|
|
'skr-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
|
|
evt: '#BA034F',
|
|
'evt-overlay': tinycolor('#BA034F').setAlpha(0.70).toRgbString(),
|
|
fam: '#7ca7d5',
|
|
'fam-overlay': tinycolor('#7ca7d5').setAlpha(0.70).toRgbString(),
|
|
grp: '#576D02',
|
|
'grp-overlay': tinycolor('#576D02').setAlpha(0.70).toRgbString(),
|
|
prg: '#0173A5',
|
|
'prg-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
|
|
ind: '#1684DD',
|
|
'ind-overlay': tinycolor('#1684DD').setAlpha(0.70).toRgbString(),
|
|
wkd: '#96BB05',
|
|
'wkd-overlay': tinycolor('#96BB05').setAlpha(0.70).toRgbString(),
|
|
kt: '#576D02',
|
|
'kt-overlay': tinycolor('#576D02').setAlpha(0.70).toRgbString(),
|
|
spz: '#436a8a',
|
|
epe: '#436a8a',
|
|
sfl: '#4E4E51',
|
|
'sfl-overlay': tinycolor('#4E4E51').setAlpha(0.70).toRgbString(),
|
|
},
|
|
ep: {
|
|
primary: '#3d8ccb',
|
|
secondary: '#f9c700',
|
|
'primary-bg': '#ebf3fa',
|
|
'primary-light': '#009fff',
|
|
'primary-medium': '#165883',
|
|
'primary-dark': '#18527b',
|
|
'primary-10': tinycolor('#3d8ccb').setAlpha(0.1).toRgbString(),
|
|
'primary-50': tinycolor('#3d8ccb').setAlpha(0.5).toRgbString(),
|
|
'primary-80': tinycolor('#3d8ccb').setAlpha(0.8).toRgbString(),
|
|
'primary-dark-80': tinycolor('#18527b').setAlpha(0.8).toRgbString(),
|
|
'secondary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
|
|
'secondary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
|
|
},
|
|
sbw: {
|
|
primary: '#f0bc44',
|
|
secondary: '#ee525a',
|
|
'primary-dark': '#c7a20c',
|
|
'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
|
|
'primary-50': tinycolor('#f0bc44').setAlpha(0.5).toRgbString(),
|
|
'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
|
|
'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
|
|
},
|
|
snz: {
|
|
primary: '#82c3c6',
|
|
secondary: '#f9c33d',
|
|
'primary-dark': '#82c3c6',
|
|
'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
|
|
'primary-50': tinycolor('#82C3C6').setAlpha(0.5).toRgbString(),
|
|
'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
|
|
},
|
|
uch: {
|
|
primary: '#a6c62c',
|
|
secondary: '#19a3dc',
|
|
'primary-dark': '#a6c62c',
|
|
'primary-10': tinycolor('#a6c62c').setAlpha(0.1).toRgbString(),
|
|
'primary-50': tinycolor('#a6c62c').setAlpha(0.5).toRgbString(),
|
|
'primary-80': tinycolor('#a6c62c').setAlpha(0.8).toRgbString(),
|
|
'overlay-secondary': tinycolor('#a6c62c').setAlpha(0.55).toRgbString(),
|
|
},
|
|
},
|
|
backgroundImage: {
|
|
'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
|
|
'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',
|
|
},
|
|
height: {
|
|
'128': '32rem',
|
|
},
|
|
inset: {
|
|
'100': '100%',
|
|
'1/2': '50%',
|
|
},
|
|
zIndex: {
|
|
'-10': '-10',
|
|
'100': 100,
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
extend: {
|
|
backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'even', 'odd' ],
|
|
borderWidth: [ 'even', 'odd', 'first', 'last' ],
|
|
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
|
|
borderColor: [ 'sbw','snz', 'uch' ],
|
|
display: ['group-hover', 'reduced'],
|
|
visibility: [ 'group-hover' ],
|
|
opacity: [ 'group-hover' ],
|
|
rotate: [ 'group-hover' ],
|
|
flex: [ 'reduced' ],
|
|
flexDirection: [ 'even', 'odd', 'reduced' ],
|
|
alignItems: [ 'reduced' ],
|
|
padding: [ 'even', 'odd', 'first', 'last', 'reduced' ],
|
|
margin: [ 'even', 'odd', 'first', 'last', 'reduced' ],
|
|
maxWidth: [ 'reduced' ],
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/aspect-ratio'),
|
|
require('@tailwindcss/forms'),
|
|
require('tailwindcss-alt')({
|
|
variants: ['sbw', 'snz', 'uch'],
|
|
}),
|
|
plugin(function ({addVariant, e}) {
|
|
addVariant('first-type', ({modifySelectors, separator}) => {
|
|
modifySelectors(({className}) => {
|
|
return `.${e(`first-type${separator}${className}`)}:first-of-type`
|
|
})
|
|
})
|
|
}),
|
|
plugin(function ({addVariant, e}) {
|
|
addVariant('last-type', ({modifySelectors, separator}) => {
|
|
modifySelectors(({className}) => {
|
|
return `.${e(`last-type${separator}${className}`)}:last-of-type`
|
|
})
|
|
})
|
|
}),
|
|
plugin(function ({addVariant, e}) {
|
|
addVariant('reduced', ({modifySelectors, separator}) => {
|
|
modifySelectors(({className}) => {
|
|
return `.reduced .${e(`reduced${separator}${className}`)}`
|
|
})
|
|
})
|
|
}),
|
|
],
|
|
}
|