Replace custom transparent colors using tailwind syntax

This commit is contained in:
Björn Fromme
2022-08-31 16:22:17 +02:00
parent 416c363954
commit b1eba8e684
37 changed files with 81 additions and 126 deletions
-16
View File
@@ -53,7 +53,6 @@
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^3.1.8",
"tailwindcss-alt": "^3.0.0",
"tinycolor2": "^1.4.2",
"vue-custom-element": "^3.3.0",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
@@ -7917,15 +7916,6 @@
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
"dev": true
},
"node_modules/tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
"integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
"dev": true,
"engines": {
"node": "*"
}
},
"node_modules/tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -14534,12 +14524,6 @@
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
"dev": true
},
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
"integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
"dev": true
},
"tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-1
View File
@@ -56,7 +56,6 @@
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^3.1.8",
"tailwindcss-alt": "^3.0.0",
"tinycolor2": "^1.4.2",
"vue-custom-element": "^3.3.0",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
@@ -210,7 +210,7 @@
<div class="py-8 text-xl text-center font-bold" v-show="submitted">
Vielen Dank für Ihre Anfrage. Wir werden diese schnellstmöglich bearbeiten.
</div>
<div class="fixed top-0 left-0 inset-0 bg-overlay-white flex items-center justify-center" v-show="processing">
<div class="fixed top-0 left-0 inset-0 bg-white/85 flex items-center justify-center" v-show="processing">
<img :src="loaderUri" alt="Loading...">
</div>
</div>
@@ -21,7 +21,7 @@
<div class="p-4 mb-8 text-white" :class="{'bg-emerald-600': alert.success, 'bg-red-600': !alert.success}" v-if="alert.message" v-html="alert.message"></div>
<div class="relative">
<router-view @loaded="scrollTop()"></router-view>
<div class="absolute top-0 left-0 inset-0 bg-overlay-white" v-show="loading">
<div class="absolute top-0 left-0 inset-0 bg-white/85" v-show="loading">
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex items-center space-x-2 h-8">
<img :src="config.loaderUrl" alt="" class="block w-4 h-4">
<span v-text="statusMessage"></span>
@@ -64,7 +64,7 @@ tbody {
}
th {
@apply border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
@apply border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
}
td {
@@ -37,7 +37,7 @@
}
&:hover:after {
@apply sbw:bg-sbw-overlay-secondary uch:bg-uch-overlay-secondary;
@apply sbw:bg-sbw-overlay/55 uch:bg-uch-overlay/55;
}
}
@@ -7,6 +7,6 @@
}
.topnav__item {
@apply flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50;
@apply flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-white/50;
@apply ser:hover:bg-ser-secondary;
}
@@ -10,7 +10,7 @@
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -33,7 +33,7 @@
</f:else>
</f:if>
</f:alias>
<div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay">
<div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}/70">
<div class="flex h-full w-full p-4 items-end headline--3 text-white">
{concept.name}
</div>
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Top1"
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Top1"
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-2">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)} my-2">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
@@ -5,7 +5,7 @@
<div class="container lg:max-w-screen-2xl my-8">
<div class="bg-pattern">
<div class="pt-8 lg:py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}">
<div class="pt-8 lg:py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary/80\', snz: \'bg-snz-primary/80\', uch: \'bg-uch-primary/80\'}', key: settings.themekey)}">
<div class="flex flex-col space-y-4 lg:space-y-0 lg:flex-row items-center">
<div class="w-full lg:w-1/3 font-black uppercase text-white text-4xl lg:text-3xl text-center">
{headline -> f:format.raw()}
@@ -4,7 +4,7 @@
<div class="relative max-w-screen-2xl mx-auto">
<div class="absolute bottom-0 left-0 inset-x-0">
<div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay-secondary\', snz: \'bg-snz-primary-50\', uch: \'bg-uch-primary-50\'}', key: settings.themekey)}">
<div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay/55\', snz: \'bg-snz-primary/50\', uch: \'bg-uch-primary/50\'}', key: settings.themekey)}">
<div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
<div class="hidden sm:flex flex-col justify-center {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
<div class="text-white font-extrabold text-3xl lg:text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-8 md:px-16">
@@ -49,7 +49,7 @@
<div class="absolute top-0 right-0 mt-8 mr-4">
<svg viewBox="0 0 200 200"
class="w-40 h-40">
<circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary-50\', snz: \'text-snz-primary-50\', uch: \'text-uch-primary-50\'}', key: settings.themekey)}"/>
<circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary/50\', snz: \'text-snz-primary/50\', uch: \'text-uch-primary/50\'}', key: settings.themekey)}"/>
<circle id="bginner" cx="100" cy="100" r="70" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"/>
</svg>
<div class="absolute top-1/2 left-1/2 -translate-xy-1/2 flex flex-col items-center justify-around">
@@ -5,7 +5,7 @@
<f:if condition="{faqs}">
<div class="bg-winter my-2">
<div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 uch:bg-uch-primary-80">
<div class="bg-ep-primary/80 sbw:bg-sbw-primary/80 uch:bg-uch-primary/80">
<f:render partial="Disrupter/Outlines" section="Top2" arguments="{classes: 'hidden md:block text-white'}"/>
<div class="container"
data-controller="faq">
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary mt-8">
<div class="bg-ep-primary-dark sbw:bg-sbw-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary mt-8">
<f:if condition="{settings.themekey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: '-translate-y-2 text-white'}"/>
</f:if>
@@ -164,7 +164,7 @@
<button type="button"
data-controller="scroll-top"
data-action="scroll-top#scroll"
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80 ser:bg-ser-secondary">
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary/80 ser:bg-ser-secondary">
{ep:icon(icon: 'chevron-up', class: 'w-8 h-8 text-white')}
</button>
@@ -23,7 +23,7 @@
</f:alias>
<div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container px-0">
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-4 md:mb-8">
{slide.headline}
</span>
@@ -60,7 +60,7 @@
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -19,7 +19,7 @@
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container">
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl text-white uppercase">
{slide.headline}
</span>
@@ -54,7 +54,7 @@
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -70,7 +70,7 @@
</div>
</f:if>
<f:if condition="{slide.image.0.description}">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-zinc-700">
<div class="absolute bottom-0 right-0 bg-white/85 font-sm text-zinc-700">
{slide.image.0.description -> f:format.htmlspecialchars()}
</div>
</f:if>
@@ -123,7 +123,7 @@
</f:section>
<f:section name="Subnav">
<ul class="text-white uppercase{f:if(condition: '{level} == 2', then: ' pl-4 divide-y divide-overlay-white-50')}{f:if(condition: '{level} == 3', then: ' pl-6')}{f:if(condition: '{level} > 3', then: ' ml-4 divide-y divide-overlay-white-50')}">
<ul class="text-white uppercase{f:if(condition: '{level} == 2', then: ' pl-4 divide-y divide-white/50')}{f:if(condition: '{level} == 3', then: ' pl-6')}{f:if(condition: '{level} > 3', then: ' ml-4 divide-y divide-white/50')}">
<f:for each="{children}" as="subitem">
<f:if condition="{subitem.children}">
<f:then>
@@ -114,7 +114,7 @@
<div class="hidden fixed inset-0 w-full h-full z-50"
data-controller="modal"
data-action="pricetable:options-modal:open@window->modal#open">
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
<div class="absolute inset-0 w-full h-full bg-black/85 z-25"
data-action="click->modal#close"></div>
<div class="absolute top-1/2 left-1/2 -translate-xy-1/2 w-full max-w-xl px-4">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
@@ -33,7 +33,7 @@
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -23,7 +23,7 @@
</picture>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container">
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl font-bold text-white uppercase">
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
</span>
@@ -75,7 +75,7 @@
</div>
</f:if>
<f:if condition="{slide.image.0.description}">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-zinc-700">
<div class="absolute bottom-0 right-0 bg-white/85 font-sm text-zinc-700">
{slide.image.0.description -> f:format.htmlspecialchars()}
</div>
</f:if>
@@ -32,7 +32,7 @@
</f:else>
</f:if>
</a>
<div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}-overlay', else: 'bg-ep-primary-80')}">
<div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}/70', else: 'bg-ep-primary/80')}">
<div class="flex items-center space-x-2">
<f:if condition="{country.code}">
{ep:icon(class: 'product-teaser__flag', icon: 'flag-{country.code -> f:format.case(mode: \'lower\')}')}
@@ -53,7 +53,7 @@
</button>
</div>
<f:if condition="{concept.code} == 'evt'">
<div class="absolute bottom-0 left-0 inset-x-0 flex justify-between text-white {f:if(condition: landscape, else: 'text-sm')} bg-concept-evt-overlay px-2 py-1">
<div class="absolute bottom-0 left-0 inset-x-0 flex justify-between text-white {f:if(condition: landscape, else: 'text-sm')} bg-concept-evt/70 px-2 py-1">
<span>{hotel.name}</span>
<span class="uppercase">{hotel.category}</span>
</div>
@@ -35,7 +35,7 @@
{ep:icon(icon: 'calendar', class: 'w-6 h-6 text-white absolute top-0 right-0 translate-y-1/2 mr-2')}
</div>
<f:if condition="{settings.datePickerPresets}">
<div class="flex flex-col divide-y divide-overlay-white mt-2">
<div class="flex flex-col divide-y divide-white/85 mt-2">
<f:for each="{settings.datePickerPresets}" as="preset">
<button type="button"
class="flex items-center justify-between w-full text-white py-2"
@@ -71,7 +71,7 @@
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container"
class="p-4 border-t border-overlay-white bg-brand-gradient">
class="p-4 border-t border-white/85 bg-brand-gradient">
<ul class="mb-0 p-0 space-y-2">
<f:for each="{filterOptions.concepts}" as="concept">
<li>
@@ -17,7 +17,7 @@
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container px-0">
<div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
<div class="bg-ep-primary/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 uch:bg-uch-primary/80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
<span class="block text-xl md:text-2xl font-light text-white uppercase">
{topline}
</span>
@@ -49,7 +49,7 @@
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary/50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -12,7 +12,7 @@
{ep:icon(icon: 'home', class: 'w-5 h-5')}
</f:link.typolink>
<f:if condition="{settings.topNavPid}">
<div class="flex-1 flex items-center divide-x divide-overlay-white-50">
<div class="flex-1 flex items-center divide-x divide-white/85">
<f:for each="{topnav}" as="menuitem">
<a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
@@ -26,16 +26,16 @@
<table class="w-full mb-4 bg-zinc-200">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
Termin
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Nächte
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
inklusive
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
ab
</th>
<th></th>
@@ -220,7 +220,7 @@
<div class="hidden fixed inset-0 w-full h-full z-50"
data-controller="modal"
data-action="pricetable:services-modal:open@window->modal#open">
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
<div class="absolute inset-0 w-full h-full bg-black/85 z-25"
data-action="click->modal#close"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light ser:bg-ser-primary text-white rounded-t">
@@ -21,16 +21,16 @@
<table class="w-full mb-4 bg-zinc-200 text-sm xl:text-base">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
Zimmerart
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
Preis
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
inkl.
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
</th>
</tr>
</thead>
@@ -79,7 +79,7 @@
<div class="hidden fixed inset-0 w-full h-full z-50"
data-controller="modal"
data-action="daytrip:services-modal:open@window->modal#open">
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"
<div class="absolute inset-0 w-full h-full bg-black/85 z-25 flex items-center justify-center"
data-action="click->modal#close"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white shadow w-full max-w-xl rounded">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
@@ -23,10 +23,10 @@
<table class="w-full mb-4 bg-zinc-200">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
Zimmertyp {dateRange}
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
<span class="lg:hidden">
inkl.
</span>
@@ -34,7 +34,7 @@
inklusive
</span>
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
optional
</th>
<th class="px-2 py-1 md:p-2 text-sm md:text-base">
@@ -223,7 +223,7 @@
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<circle fill="currentColor" class="text-ep-pink-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-pink/50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-pink" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
@@ -239,7 +239,7 @@
<div class="hidden fixed inset-0 w-full h-full z-50"
data-controller="modal"
data-action="pricetable:options-modal:open@window->modal#open">
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
<div class="absolute inset-0 w-full h-full bg-black/85 z-25"
data-action="click->modal#close"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
@@ -17,7 +17,7 @@
</select>
<div class="mt-4"
data-calendar-target="container"></div>
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white"
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-white/85"
data-calendar-target="loadingIndicator">
<svg class="w-6 h-6 text-zinc-800 absolute top-1/2 left-1/2 transform -translate-xy-1/2">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
@@ -6,7 +6,7 @@
<f:section name="Main">
<div class="bg-winter my-2">
<div class="bg-ep-primary-80">
<div class="bg-ep-primary/80">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
@@ -317,7 +317,7 @@
</select>
<div class="mt-4"
data-calendar-target="container"></div>
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white"
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-white/85"
data-calendar-target="loadingIndicator">
<f:image class="absolute top-1/2 left-1/2 -translate-xy-1/2" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
</div>
@@ -41,7 +41,7 @@
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
data-collapse-collapsed-value="true">
<div class="relative border-b border-r border-overlay-white-50 mr-8">
<div class="relative border-b border-r border-white/50 mr-8">
<input type="text"
data-action="click->collapse#toggle"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
@@ -96,7 +96,7 @@
data-controller="collapse"
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
data-collapse-collapsed-value="true">
<div class="relative border-b border-r border-overlay-white-50 mr-8">
<div class="relative border-b border-r border-white/50 mr-8">
<input type="text"
data-action="click->collapse#toggle"
data-searchbar-target="paxLabel"
@@ -135,7 +135,7 @@
data-controller="collapse"
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
data-collapse-collapsed-value="true">
<div class="relative border-b border-r border-overlay-white-50 mr-8">
<div class="relative border-b border-r border-white/50 mr-8">
<input type="text"
data-action="click->collapse#toggle"
data-searchbar-target="destinationLabel"
@@ -210,7 +210,7 @@
data-controller="collapse"
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
data-collapse-collapsed-value="true">
<div class="relative border-r border-b border-overlay-white-50">
<div class="relative border-r border-b border-white/50">
<input type="text"
data-action="click->collapse#toggle"
data-searchbar-target="priceRangeLabel"
@@ -11,22 +11,22 @@
<table class="w-full mb-4 bg-zinc-200">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Gebiet
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Berg/Tal
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Qualität
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Geöffnete Lifte
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Letzter Schneefall
</th>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Letzte Akt.
</th>
</tr>
@@ -10,7 +10,7 @@
data-controller="watchlist"
data-watchlist-uri-value="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', pageUid: '{settings.defaultAjaxUid}')}">
<div data-watchlist-target="container"></div>
<div class="absolute top-0 left-0 inset-0 bg-overlay-white hidden"
<div class="absolute top-0 left-0 inset-0 bg-white/85 hidden"
data-watchlist-target="loadingIndicator">
<svg class="w-6 h-6 text-ep-primary-light absolute top-1/2 left-1/2 transform -translate-xy-1/2">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
+18 -46
View File
@@ -1,6 +1,5 @@
const postcss = require('postcss')
const plugin = require('tailwindcss/plugin')
const tinycolor = require('tinycolor2')
module.exports = {
content: [
@@ -17,18 +16,18 @@ module.exports = {
'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',
'bg-concept-bdg', 'bg-concept-bdg/70',
'bg-concept-skr', 'bg-concept-skr/70',
'bg-concept-evt', 'bg-concept-evt/70',
'bg-concept-fam', 'bg-concept-fam/70',
'bg-concept-grp', 'bg-concept-grp/70',
'bg-concept-prg', 'bg-concept-prg/70',
'bg-concept-ind', 'bg-concept-ind/70',
'bg-concept-wkd', 'bg-concept-wkd/70',
'bg-concept-kt', 'bg-concept-kt/70',
'bg-concept-spz', 'bg-concept-spz/70',
'bg-concept-epe', 'bg-concept-epe/70',
'bg-concept-sfl', 'bg-concept-sfl/70',
'flatpickr-input', 'flatpickr-calendar', 'flatpickr-day', 'flatpickr-day.selected',
'availability-full-to-none', 'availability-full-to-partial', 'availability-none-to-full',
'availability-partial-to-full', 'availability-none-to-partial', 'availability-partial-to-none',
@@ -52,34 +51,20 @@ module.exports = {
'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',
@@ -88,48 +73,35 @@ module.exports = {
'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(),
pink: '#fa1a8c',
'pink-50': tinycolor('#fa1a8c').setAlpha(0.5).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(),
'overlay': '#c20000',
},
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(),
'overlay': '#a6c62c',
},
ser: {
primary: '#006fb6',
secondary: '#e85243',
'primary-light': '#04A4CC',
'primary-80': tinycolor('#006fb6').setAlpha(0.8).toRgbString(),
},
},
opacity: {
'55': 0.5,
'85': 0.85,
},
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)',