Sven/JuConnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Plugin erweitert, um die CSS-Datei zu aktualisieren und die neuen Styles für die Juconnect Patterns hinzuzufügen. Außerdem wurden einige Anpassungen am Footer und den Funktionen des Juconnect Strict Themes vorgenommen, um die Kompatibilität mit den neuen Patterns zu gewährleisten. Alle Änderungen wurden in den entsprechenden ZIP-Dateien aktualisiert, um sicherzustellen, dass die neuesten Versionen der Plugins und Themes bereitgestellt werden können.
Some checks failed
Deploy static site to pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Sven Steinert
2026-02-19 20:09:15 +01:00
parent 60cade23b2
commit 41e4f5b591
7 changed files with 791 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
juconnect-patterns-plugin/juconnect-patterns/assets/css/juconnect-patterns.css Normal file
View File

@@ -0,0 +1,219 @@
.ju-process-flow {
--ju-flow-gap: var(--s4, 18px);
--ju-step-stack-gap: var(--s4, 18px);
--ju-step-body-mt: var(--s2, 10px);
}
.ju-process-flow__steps,
.ju-process-flow__steps > .wp-block-group__inner-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);
gap: var(--ju-flow-gap);
align-items: start;
counter-reset: ju-flow-step;
}
.ju-process-flow__steps {
position: relative;
overflow-x: auto;
padding: 2px calc(var(--s6, 32px) + 6px) var(--s3, 14px) 2px;
}
.ju-process-flow__steps::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 30px;
height: 2px;
background: linear-gradient(90deg, rgba(29, 53, 79, 0.12) 0%, rgba(29, 53, 79, 0.3) 50%, rgba(29, 53, 79, 0.12) 100%);
pointer-events: none;
}
.ju-process-flow__steps > .wp-block-group__inner-container {
width: max(100%, max-content);
min-width: 100%;
max-width: none !important;
margin: 0 !important;
}
.ju-process-flow__steps > .ju-process-step,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
counter-increment: ju-flow-step;
display: grid;
grid-template-rows: auto 1fr;
gap: var(--ju-step-stack-gap);
min-width: 260px;
max-width: none;
--ju-step-head: var(--primary, #1d354f);
}
.ju-process-flow__steps > .ju-process-step:nth-child(2),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(2) {
--ju-step-head: #255683;
}
.ju-process-flow__steps > .ju-process-step:nth-child(3),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(3) {
--ju-step-head: #2b6cb0;
}
.ju-process-flow__steps > .ju-process-step:nth-child(4),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(4) {
--ju-step-head: #235e9a;
}
.ju-process-flow__steps > .ju-process-step:nth-child(5),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(5) {
--ju-step-head: #1f4d7e;
}
.ju-process-flow__steps > .ju-process-step:nth-child(6),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(6) {
--ju-step-head: #183d64;
}
.ju-process-step__head,
.ju-process-step > .ju-process-step__label {
position: relative;
z-index: 1;
margin: 0;
min-height: 58px;
display: flex;
align-items: center;
padding: 11px 72px 11px 16px;
border: 1px solid rgba(16, 25, 34, 0.16);
border-radius: 12px;
color: #ffffff !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
var(--ju-step-head) !important;
box-shadow: 0 10px 22px rgba(16, 25, 34, 0.14);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 12px 50%);
transition: transform 0.16s ease, box-shadow 0.2s ease;
}
.ju-process-step__head > .wp-block-group__inner-container {
display: flex;
align-items: center;
min-height: 36px;
}
.ju-process-step__head::after,
.ju-process-step > .ju-process-step__label::after {
content: counter(ju-flow-step, decimal-leading-zero);
position: absolute;
right: 26px;
top: 50%;
transform: translateY(-50%);
font-size: 1.65rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.94);
font-variant-numeric: tabular-nums;
}
.ju-process-flow__steps > .ju-process-step:last-child .ju-process-step__head,
.ju-process-flow__steps > .ju-process-step:last-child > .ju-process-step__label,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child .ju-process-step__head,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child > .ju-process-step__label {
margin-right: var(--s2, 10px);
}
.ju-process-step__label {
margin: 0;
color: inherit;
font-size: var(--fs-s, 0.92rem);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.ju-process-step__body.card,
.ju-process-step > .card {
position: relative;
margin-top: var(--ju-step-body-mt) !important;
min-height: 212px;
padding: var(--s4, 18px);
border: 1px solid var(--line, #d7dee5);
border-top: 4px solid var(--ju-step-head);
border-radius: 16px;
background: var(--surface, #ffffff) !important;
color: var(--text2, #3c4a58) !important;
box-shadow: var(--shadow-sm, 0 6px 16px rgba(16, 25, 34, 0.08));
overflow: hidden;
transition: transform 0.16s ease, box-shadow 0.2s ease;
}
.ju-process-step__body.card::before,
.ju-process-step > .card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(29, 53, 79, 0.06) 0%, rgba(29, 53, 79, 0) 42%);
pointer-events: none;
}
.ju-process-step__body.card > .wp-block-group__inner-container,
.ju-process-step > .card > .wp-block-group__inner-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--s2, 10px);
}
.ju-process-step__body.card .muted,
.ju-process-step > .card .muted {
margin: 0;
color: var(--text2, #3c4a58) !important;
}
@media (hover: hover) {
.ju-process-step:hover .ju-process-step__head,
.ju-process-step:hover > .ju-process-step__label,
.ju-process-step:hover .ju-process-step__body.card,
.ju-process-step:hover > .card {
transform: translateY(-2px);
}
.ju-process-step:hover .ju-process-step__head,
.ju-process-step:hover > .ju-process-step__label {
box-shadow: 0 12px 24px rgba(16, 25, 34, 0.17);
}
.ju-process-step:hover .ju-process-step__body.card,
.ju-process-step:hover > .card {
box-shadow: 0 12px 24px rgba(16, 25, 34, 0.12);
}
}
.ju-process-flow__steps::-webkit-scrollbar {
height: 8px;
}
.ju-process-flow__steps::-webkit-scrollbar-thumb {
background: rgba(29, 53, 79, 0.24);
border-radius: 999px;
}
@media (max-width: 1020px) {
.ju-process-flow__steps::before {
display: none;
}
.ju-process-flow__steps,
.ju-process-flow__steps > .wp-block-group__inner-container {
grid-auto-flow: row;
grid-template-columns: 1fr;
width: 100%;
min-width: 0;
}
.ju-process-flow__steps > .ju-process-step,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
min-width: 0;
}
}