WIP Migrate event subsite styles

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss

@@ -4,36 +4,40 @@
     @apply transition-colors outline-none focus:outline-none;
     @apply bg-ep-secondary text-white;
     @apply sbw:bg-sbw-secondary;
+    @apply snz:bg-snz-secondary;
     @apply uch:bg-uch-secondary;
-
+    @apply hover:bg-ep-primary-dark group-hover:bg-ep-primary-dark;
-    &:hover {
+    @apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
-        @apply bg-ep-primary-dark;
+    @apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
-        @apply sbw:bg-sbw-primary-dark;
+    @apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
-        @apply uch:bg-uch-primary-dark;
-    }
 
     &--active,
     &--secondary {
         @apply bg-ep-primary;
         @apply sbw:bg-sbw-primary;
+        @apply snz:bg-snz-primary;
         @apply uch:bg-uch-primary;
     }
 
     &--muted {
-        @apply bg-gray-300;
+        @apply bg-gray-300 hover:bg-gray-300;
-
-        &:hover {
-            @apply bg-gray-300;
-        }
     }
 
     &--light {
-        @apply bg-white text-ep-primary border-2 border-ep-primary;
+        @apply bg-white border-2;
         @apply font-bold;
+        @apply border-ep-primary text-ep-primary;
+        @apply sbw:bg-white sbw:border-sbw-primary sbw:text-sbw-primary;
+        @apply snz:bg-white snz:border-snz-primary snz:text-snz-primary;
+        @apply uch:bg-white uch:border-uch-primary uch:text-uch-primary;
 
         &:hover,
         &.button--active {
-            @apply bg-white border-ep-secondary text-ep-secondary;
+            @apply bg-white;
+            @apply border-ep-secondary text-ep-secondary;
+            @apply sbw:bg-white sbw:border-sbw-secondary sbw:text-sbw-secondary;
+            @apply snz:bg-white snz:border-snz-secondary snz:text-snz-secondary;
+            @apply uch:bg-white uch:border-uch-secondary uch:text-uch-secondary;
         }
     }
 

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss

@@ -54,7 +54,7 @@
         &:after {
             content: "";
             @apply absolute top-100 left-0 mt-2 mb-2 border-b-4 w-48;
-            @apply border-ep-primary-dark sbw:border-sbw-primary-dark;
+            @apply border-ep-primary-dark sbw:border-sbw-primary-dark snz:border-snz-primary-dark uch:border-uch-primary-dark;
         }
     }
     .-translate-xy-1\/2 {

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html

@@ -4,7 +4,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <div class="bg-winter my-2">
-        <div class="bg-ep-primary-80">
+        <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
             <f:if condition="{settings.themeKey} == 'ep'">
                 <f:render partial="Disrupter/Outlines"
                           section="Top1"

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html

@@ -3,7 +3,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <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 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
             <f:render partial="Disrupter/Outlines"
                       section="Top1"
                       arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html

@@ -3,9 +3,8 @@
       xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-
     <div class="bg-winter my-2">
-        <div class="bg-ep-primary-80">
+        <div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
             <f:if condition="{settings.themeKey} == 'ep'">
                 <f:render partial="Disrupter/Outlines"
                           section="Top1"

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html

@@ -3,7 +3,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
 <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 snz:bg-snz-primary-80 uch:bg-uch-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\')}'}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html

@@ -3,7 +3,8 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <div class="container lg:max-w-screen-2xl my-8">
-        <div class="bg-pattern pt-8 lg:py-8">
+        <div class="bg-pattern">
+            <div class="pt-8 lg:py-8 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80">
                 <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()}
@@ -30,5 +31,6 @@
                 </div>
             </div>
         </div>
+    </div>
 
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html

@@ -58,7 +58,7 @@
                             </f:then>
                             <f:else>
                                 <a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')}
-                                   class="block text-gray-800 uppercase lg:text-lg"
+                                   class="block text-gray-800 uppercase lg:text-lg font-bold"
                                    title="{topitem.title}">
                                     {topitem.title}
                                 </a>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html

@@ -4,7 +4,7 @@
 
     <f:section name="Teaser">
         <f:link.typolink parameter="{data.header_link}"
-                         class="flex flex-col">
+                         class="flex flex-col group">
             <div class="relative">
                 <f:if condition="{context.country}">
                     <svg class="w-8 h-6 absolute top-0 left-0">

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/TwoColumn.html

@@ -5,7 +5,7 @@
 
     <f:section name="Teaser">
         <f:link.typolink parameter="{data.header_link}"
-                         class="teaserbox teaserbox--default">
+                         class="teaserbox teaserbox--default group">
             <div class="teasebox__image">
                 <f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
             </div>

tailwind.config.js

@@ -88,8 +88,9 @@ module.exports = {
                     'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
                 },
                 snz: {
-                    primary: '#82C3C6',
+                    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(),
@@ -119,7 +120,7 @@ module.exports = {
     },
     variants: {
         extend: {
-            backgroundColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'even', 'odd' ],
+            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' ],