ivanszabo/WorkFlowCheck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Arculat hozzáadása

Browse Source
This commit is contained in:
ivanszabo
2026-09-12 12:38:39 +02:00
parent 717becd1fc
commit b2faeb2986
42 changed files with 1442 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/WorkFlowCheck.Web/wwwroot/css/wfc-buttons.css
+2
View File
@@ -0,0 +1,2 @@
body {
}
src/WorkFlowCheck.Web/wwwroot/css/wfc-datatables.css
+2
View File
@@ -0,0 +1,2 @@
body {
}
src/WorkFlowCheck.Web/wwwroot/css/wfc-forms.css
+2
View File
@@ -0,0 +1,2 @@
body {
}
src/WorkFlowCheck.Web/wwwroot/css/wfc.css
+16
View File
@@ -0,0 +1,16 @@
@import url("wfc-datatables.css");
@import url("wfc-form.css");
@import url("wfc-buttons.css");
.sidebar-brand {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 90px;
padding: 12px 16px;
}
.sidebar-brand > a {
display: block;
flex: 1;
}
src/WorkFlowCheck.Web/wwwroot/css/workflow-check.css
+469
View File
@@ -0,0 +1,469 @@
:root {
--wfc-navy-950: #071629;
--wfc-navy-900: #0b1f3a;
--wfc-navy-800: #0e2c4f;
--wfc-navy-700: #123c69;
--wfc-blue-500: #38bdf8;
--wfc-blue-300: #7dd3fc;
--wfc-blue-200: #bae6fd;
--wfc-white: #fff;
--wfc-surface: #f5f8fc;
--wfc-border: #d7e2ee;
--wfc-text: #10243e;
--wfc-muted: #64748b;
--wfc-sidebar-expanded-width: 292px;
--wfc-sidebar-collapsed-width: 76px;
--wfc-topbar-height: 64px;
--wfc-radius: .625rem;
--wfc-shadow: 0 8px 24px rgb(11 31 58 / 10%);
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
overflow: hidden;
color: var(--wfc-text);
background: var(--wfc-surface);
font-family: Inter, "Segoe UI", Arial, sans-serif;
}
body.wfc-sidebar-open {
overflow: hidden;
}
a {
color: var(--wfc-navy-700);
}
.wfc-shell {
display: flex;
height: 100vh;
min-height: 0;
}
.wfc-sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 1045;
display: flex;
width: var(--wfc-sidebar-expanded-width);
min-width: 0;
flex-direction: column;
overflow: hidden;
color: var(--wfc-white);
background: linear-gradient(180deg, var(--wfc-navy-900), var(--wfc-navy-950));
box-shadow: 8px 0 24px rgb(7 22 41 / 16%);
transition: width .22s ease, transform .22s ease;
}
.wfc-sidebar-brand {
display: flex;
min-height: 78px;
flex: 0 0 78px;
align-items: center;
justify-content: space-between;
padding: 1rem 1.1rem;
border-bottom: 1px solid rgb(255 255 255 / 12%);
}
.wfc-sidebar-brand > a {
display: flex;
min-width: 0;
align-items: center;
}
.wfc-sidebar-logo {
display: block;
width: 100%;
max-width: 245px;
height: 46px;
object-fit: contain;
object-position: left center;
transition: opacity .14s ease;
}
.wfc-sidebar-close,
.wfc-sidebar-open,
.wfc-sidebar-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: .5rem;
}
.wfc-sidebar-close {
width: 38px;
height: 38px;
flex: 0 0 38px;
color: var(--wfc-white);
background: rgb(255 255 255 / 10%);
}
.wfc-sidebar-nav {
flex: 1 1 auto;
padding: .85rem .7rem 1rem;
overflow-x: hidden;
overflow-y: auto;
scrollbar-color: rgb(186 230 253 / 35%) transparent;
scrollbar-width: thin;
}
.wfc-sidebar-section {
margin: 1.1rem .75rem .45rem;
overflow: hidden;
color: var(--wfc-blue-300);
font-size: .69rem;
font-weight: 800;
letter-spacing: .095em;
white-space: nowrap;
}
.wfc-sidebar-link,
.wfc-sidebar-account a {
display: flex;
width: 100%;
min-width: 0;
align-items: center;
gap: .75rem;
margin: .16rem 0;
padding: .7rem .8rem;
overflow: hidden;
border: 0;
border-radius: .52rem;
color: #dcebfa;
background: transparent;
font-size: .92rem;
font-weight: 600;
line-height: 1.25;
text-align: left;
text-decoration: none;
white-space: nowrap;
transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.wfc-sidebar-link > i:first-child,
.wfc-sidebar-account a > i,
.wfc-sidebar-user > i {
width: 1.35rem;
flex: 0 0 1.35rem;
font-size: 1.1rem;
text-align: center;
}
.wfc-sidebar-link > span,
.wfc-sidebar-account a > span,
.wfc-sidebar-user > span {
overflow: hidden;
text-overflow: ellipsis;
}
.wfc-sidebar-link:hover,
.wfc-sidebar-account a:hover {
color: var(--wfc-white);
background: rgb(56 189 248 / 14%);
}
.wfc-sidebar-link.active {
color: var(--wfc-navy-950);
background: linear-gradient(90deg, var(--wfc-blue-200), #e5f7ff);
box-shadow: inset 4px 0 0 var(--wfc-blue-500), 0 4px 14px rgb(0 0 0 / 12%);
}
.wfc-collapse-toggle[aria-expanded="true"] .wfc-toggle-chevron {
transform: rotate(180deg);
}
.wfc-toggle-chevron {
font-size: .8rem;
transition: transform .18s ease;
}
.wfc-sidebar-submenu {
margin: .12rem 0 .42rem;
padding-left: .7rem;
}
.wfc-sidebar-submenu .wfc-sidebar-link {
padding-top: .58rem;
padding-bottom: .58rem;
padding-left: 1rem;
color: #c9def2;
font-size: .86rem;
}
.wfc-sidebar-submenu .wfc-sidebar-link > i:first-child {
font-size: .95rem;
}
.wfc-sidebar-divider {
margin: .45rem .8rem;
border-color: rgb(255 255 255 / 14%);
opacity: 1;
}
.wfc-sidebar-account {
flex: 0 0 auto;
padding: .75rem;
border-top: 1px solid rgb(255 255 255 / 12%);
background: rgb(0 0 0 / 9%);
}
.wfc-sidebar-user {
display: flex;
min-width: 0;
align-items: center;
gap: .75rem;
padding: .55rem .8rem .7rem;
overflow: hidden;
color: var(--wfc-blue-200);
font-size: .88rem;
font-weight: 700;
white-space: nowrap;
}
.wfc-content {
display: flex;
width: calc(100% - var(--wfc-sidebar-expanded-width));
height: 100vh;
min-height: 0;
flex-direction: column;
margin-left: var(--wfc-sidebar-expanded-width);
overflow: hidden;
transition: width .22s ease, margin-left .22s ease;
}
.wfc-topbar {
position: sticky;
top: 0;
z-index: 1030;
display: flex;
min-height: var(--wfc-topbar-height);
align-items: center;
gap: .8rem;
padding: 0 1.35rem;
border-bottom: 1px solid var(--wfc-border);
background: rgb(255 255 255 / 94%);
box-shadow: 0 3px 16px rgb(11 31 58 / 6%);
backdrop-filter: blur(10px);
}
.wfc-sidebar-open,
.wfc-sidebar-toggle {
width: 40px;
height: 40px;
flex: 0 0 40px;
color: var(--wfc-navy-700);
background: #eef6fc;
font-size: 1.25rem;
}
.wfc-sidebar-open:hover,
.wfc-sidebar-toggle:hover {
color: var(--wfc-navy-900);
background: var(--wfc-blue-200);
}
.wfc-topbar-title {
overflow: hidden;
color: var(--wfc-navy-900);
font-size: 1.15rem;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.wfc-main {
width: 100%;
max-width: 100%;
min-height: 0;
flex: 1 1 auto;
padding: 1.5rem;
overflow-x: hidden;
overflow-y: auto;
scrollbar-color: rgb(18 60 105 / 45%) transparent;
scrollbar-width: thin;
}
.wfc-footer {
position: relative;
z-index: 2;
flex: 0 0 auto;
min-height: 48px;
padding: .78rem 1.5rem;
border-top: 1px solid rgb(186 230 253 / 24%);
color: #dcebfa;
background:
radial-gradient(circle at 88% 10%, rgb(56 189 248 / 16%), transparent 20rem),
linear-gradient(90deg, var(--wfc-navy-900), var(--wfc-navy-950));
box-shadow: 0 -5px 18px rgb(7 22 41 / 12%);
font-size: .82rem;
}
.wfc-footer-content {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .45rem;
}
.wfc-footer-content a {
margin-left: auto;
color: var(--wfc-blue-200);
text-decoration: none;
}
.wfc-footer-content a:hover {
color: var(--wfc-white);
}
.wfc-footer-separator {
color: var(--wfc-blue-500);
}
.wfc-sidebar-backdrop {
position: fixed;
inset: 0;
z-index: 1040;
visibility: hidden;
background: rgb(7 22 41 / 58%);
opacity: 0;
transition: visibility .2s ease, opacity .2s ease;
}
.wfc-sidebar-backdrop.show {
visibility: visible;
opacity: 1;
}
.btn-primary {
border-color: var(--wfc-navy-700);
background-color: var(--wfc-navy-700);
}
.btn-primary:hover,
.btn-primary:focus {
border-color: var(--wfc-navy-900);
background-color: var(--wfc-navy-900);
}
.card {
border-color: var(--wfc-border);
border-radius: var(--wfc-radius);
box-shadow: var(--wfc-shadow);
}
html.wfc-sidebar-collapsed .wfc-sidebar {
width: var(--wfc-sidebar-collapsed-width);
}
html.wfc-sidebar-collapsed .wfc-content {
width: calc(100% - var(--wfc-sidebar-collapsed-width));
margin-left: var(--wfc-sidebar-collapsed-width);
}
html.wfc-sidebar-collapsed .wfc-sidebar-logo,
html.wfc-sidebar-collapsed .wfc-sidebar-section,
html.wfc-sidebar-collapsed .wfc-sidebar-link > span,
html.wfc-sidebar-collapsed .wfc-sidebar-link > .wfc-toggle-chevron,
html.wfc-sidebar-collapsed .wfc-sidebar-account span,
html.wfc-sidebar-collapsed .wfc-sidebar-divider,
html.wfc-sidebar-collapsed .wfc-sidebar-submenu {
display: none;
}
html.wfc-sidebar-collapsed .wfc-sidebar-brand {
justify-content: center;
padding-right: .7rem;
padding-left: .7rem;
}
html.wfc-sidebar-collapsed .wfc-sidebar-brand::before {
width: 42px;
height: 42px;
content: "";
background: url("../images/favicon/favicon.svg") center / contain no-repeat;
}
html.wfc-sidebar-collapsed .wfc-sidebar-link,
html.wfc-sidebar-collapsed .wfc-sidebar-account a,
html.wfc-sidebar-collapsed .wfc-sidebar-user {
justify-content: center;
gap: 0;
padding-right: .75rem;
padding-left: .75rem;
}
html.wfc-sidebar-initializing .wfc-sidebar,
html.wfc-sidebar-initializing .wfc-content {
transition: none !important;
}
@media (max-width: 991.98px) {
html,
body {
height: auto;
min-height: 100%;
}
body {
overflow-x: hidden;
overflow-y: auto;
}
body.wfc-sidebar-open {
overflow: hidden;
}
.wfc-shell {
height: auto;
min-height: 100vh;
}
.wfc-sidebar {
width: min(88vw, 320px);
transform: translateX(-102%);
}
.wfc-sidebar.open {
transform: translateX(0);
}
.wfc-content,
html.wfc-sidebar-collapsed .wfc-content {
width: 100%;
height: auto;
min-height: 100vh;
margin-left: 0;
overflow: visible;
}
.wfc-main {
min-height: auto;
flex: 1 0 auto;
padding: 1rem;
overflow: visible;
}
.wfc-topbar {
padding: 0 .85rem;
}
.wfc-footer {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wfc-sidebar,
.wfc-content,
.wfc-sidebar-backdrop,
.wfc-toggle-chevron {
transition: none !important;
}
}
src/WorkFlowCheck.Web/wwwroot/images/favicon/favicon-32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/WorkFlowCheck.Web/wwwroot/images/favicon/favicon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0B1F3A"/><path d="M13 33h8c4 0 4 7 8 7h7c5 0 5-8 10-8" fill="none" stroke="#BAE6FD" stroke-width="5" stroke-linecap="round"/><circle cx="12" cy="33" r="5" fill="#0B1F3A" stroke="#fff" stroke-width="4"/><circle cx="30" cy="40" r="6" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="4"/><circle cx="47" cy="27" r="8" fill="#0B1F3A" stroke="#38BDF8" stroke-width="4"/><path d="m43 27 3 3 8-9" fill="none" stroke="#38BDF8" stroke-width="4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 545 B

src/WorkFlowCheck.Web/wwwroot/images/logo/workflow-check-logo-dark.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 260" role="img" aria-labelledby="title">
<title id="title">Workflow Check – dark background</title>
<defs><linearGradient id="flow" x1="35" y1="95" x2="410" y2="95" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs>
<g transform="translate(5 10) scale(.78)"><path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round"/><circle cx="70" cy="128" r="30" fill="#0B1F3A" stroke="#fff" stroke-width="18"/><circle cx="245" cy="168" r="34" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="18"/><circle cx="394" cy="83" r="43" fill="#0B1F3A" stroke="#38BDF8" stroke-width="18"/><path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18"/></g>
<text x="385" y="157" fill="#FFFFFF" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="750" letter-spacing="-3">Workflow</text><text x="816" y="157" fill="#BAE6FD" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="450" letter-spacing="-3">Check</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB