WIP Add styles for site ser

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

@@ -6,6 +6,7 @@
     @apply sbw:bg-sbw-secondary;
     @apply snz:bg-snz-secondary;
     @apply uch:bg-uch-secondary;
+    @apply ser:bg-ser-secondary;
     @apply hover:bg-ep-primary-dark group-hover:bg-ep-primary-dark;
     @apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
     @apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
@@ -17,6 +18,7 @@
         @apply sbw:bg-sbw-primary;
         @apply snz:bg-snz-primary;
         @apply uch:bg-uch-primary;
+        @apply ser:bg-ser-primary;
     }
 
     &--muted {
@@ -30,6 +32,7 @@
         @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;
+        @apply ser:bg-white ser:border-ser-primary ser:text-uch-primary;
 
         &:hover,
         &.button--active {
@@ -38,6 +41,7 @@
             @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;
+            @apply ser:bg-white ser:border-ser-secondary ser:text-ser-secondary;
         }
     }
 

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

@@ -9,28 +9,30 @@
         </f:if>
         <div class="py-4 relative">
             <div class="container grid grid-cols-2 lg:grid-cols-4 gap-8 pb-4">
-                <f:for each="{footernav}" as="menuheader">
+                <f:if condition="{settings.footerNavPid}">
-                    <div>
+                    <f:for each="{footernav}" as="menuheader">
-                        <span class="headline--4 text-white">
+                        <div>
-                            {menuheader.title}
+                            <span class="headline--4 text-white">
-                        </span>
+                                {menuheader.title}
-                        <f:if condition="{menuheader.children}">
+                            </span>
-                            <ul class="list-disc text-white mb-0 pl-4">
+                            <f:if condition="{menuheader.children}">
-                                <f:for each="{menuheader.children}" as="submenuitem">
+                                <ul class="list-disc text-white mb-0 pl-4">
-                                    <li>
+                                    <f:for each="{menuheader.children}" as="submenuitem">
-                                        <f:link.typolink parameter="{submenuitem.link}"
+                                        <li>
-                                                         title="{submenuitem.linktext}"
+                                            <f:link.typolink parameter="{submenuitem.link}"
-                                                         class="text-white">
+                                                             title="{submenuitem.linktext}"
-                                            {submenuitem.title}
+                                                             class="text-white">
-                                        </f:link.typolink>
+                                                {submenuitem.title}
-                                    </li>
+                                            </f:link.typolink>
-                                </f:for>
+                                        </li>
-                            </ul>
+                                    </f:for>
-                        </f:if>
+                                </ul>
-                    </div>
+                            </f:if>
-                </f:for>
+                        </div>
+                    </f:for>
+                </f:if>
             </div>
-            <div class="hidden md:block container border-t border-white pt-4">
+            <div class="hidden md:block container{f:if(condition: settings.footerNavPid, then: ' border-t border-white pt-4')}">
                 <div class="grid grid-cols-2 gap-16">
                     <div class="flex">
                         <div class="flex items-start space-x-2 pr-4">

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

@@ -10,7 +10,7 @@
                    class="block lg:pb-4"
                    title="{settings.defaultTitle}">
                     <f:image src="{settings.logoImage}"
-                             class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\'}', key: settings.themekey)}"
+                             class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\', ser: \'h-10 lg:h-12\'}', key: settings.themekey)}"
                              alt="{settings.defaultTitle}"/>
                 </a>
                 <div class="hidden lg:block">

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

@@ -4,23 +4,27 @@
 
     <f:if condition="{settings.hideAreaNavigation}">
         <f:else>
-            <div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-ep-primary-medium shadow">
+            <div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-ep-primary-medium ser:bg-ser-primary shadow">
                 <div class="container">
-                    <nav role="navigation" class="flex justify-between m-0 p-0 w-full divide-x divide-overlay-white-50 border-r border-l border-overlay-white-50">
+                    <nav role="navigation" class="flex justify-between m-0 p-0 w-full">
-                        <f:link.typolink parameter="9" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary" title="E&amp;P">
+                        <f:link.typolink parameter="9" class="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" title="E&amp;P">
                             <svg class="w-5 h-5">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-home"></use>
                             </svg>
                         </f:link.typolink>
-                        <f:for each="{topnav}" as="menuitem">
+                        <f:if condition="{settings.topNavPid}">
-                            <a class="block flex flex-grow h-8 justify-center items-center uppercase text-sm leading-none text-white hover:text-white focus:text-white hover:bg-ep-secondary{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')}"
+                            <div class="flex-1 flex items-center divide-x divide-overlay-white-50">
-                               href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
+                                <f:for each="{topnav}" as="menuitem">
-                               title="{menuitem.title}">
+                                    <a class="block flex flex-grow h-8 justify-center items-center uppercase text-sm leading-none text-white hover:text-white focus:text-white hover:bg-ep-secondary{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')}"
-                                {menuitem.title}
+                                       href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
-                            </a>
+                                       title="{menuitem.title}">
-                        </f:for>
+                                        {menuitem.title}
+                                    </a>
+                                </f:for>
+                            </div>
+                        </f:if>
                         <f:if condition="{settings.myEpPageUid}">
-                            <f:link.typolink parameter="{settings.myEpPageUid}" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary" title="My E&P">
+                            <f:link.typolink parameter="{settings.myEpPageUid}" class="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" title="My E&P">
                                 <svg class="w-5 h-5">
                                     <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-user"></use>
                                 </svg>

tailwind.config.js

@@ -123,6 +123,11 @@ module.exports = {
                     'primary-80': tinycolor('#a6c62c').setAlpha(0.8).toRgbString(),
                     'overlay-secondary': tinycolor('#a6c62c').setAlpha(0.55).toRgbString(),
                 },
+                ser: {
+                    primary: '#006fb6',
+                    secondary: '#e85243',
+                    'primary-light': '#04A4CC',
+                },
             },
             backgroundImage: {
                 'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
@@ -143,10 +148,10 @@ module.exports = {
     },
     variants: {
         extend: {
-            backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'even', 'odd' ],
+            backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'even', 'odd' ],
             borderWidth: [ 'even', 'odd', 'first', 'last' ],
-            textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
+            textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
-            borderColor: [ 'sbw','snz', 'uch' ],
+            borderColor: [ 'sbw','snz', 'uch', 'ser' ],
             display: ['group-hover', 'reduced'],
             visibility: [ 'group-hover' ],
             opacity: [ 'group-hover' ],
@@ -163,7 +168,7 @@ module.exports = {
         require('@tailwindcss/aspect-ratio'),
         require('@tailwindcss/forms'),
         require('tailwindcss-alt')({
-            variants: ['sbw', 'snz', 'uch'],
+            variants: ['sbw', 'snz', 'uch', 'ser'],
         }),
         plugin(function ({addVariant, e}) {
             addVariant('first-type', ({modifySelectors, separator}) => {