feat: ship self-hosted KOC LOOP workflows
This commit is contained in:
巫凤萍
588
app/globals.css
588
app/globals.css
@@ -1,6 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--font-geist-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
--font-geist-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
--ink: #172321;
|
||||
--ink-soft: #32423f;
|
||||
--nav: #13201e;
|
||||
@@ -242,6 +244,146 @@ a {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.task-type-picker {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin: 22px 0 6px;
|
||||
}
|
||||
|
||||
.task-type-picker button {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
padding: 16px;
|
||||
border: 1px solid #dbe4df;
|
||||
border-radius: 14px;
|
||||
color: #53625d;
|
||||
background: #fafcfb;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.task-type-picker button.active {
|
||||
border-color: #278b69;
|
||||
color: #123f31;
|
||||
background: #edf8f3;
|
||||
box-shadow: 0 0 0 3px rgb(39 139 105 / 0.08);
|
||||
}
|
||||
|
||||
.task-type-picker b {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.task-type-picker span {
|
||||
color: #87938f;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.screenshot-task-fields textarea {
|
||||
width: 100%;
|
||||
min-height: 108px;
|
||||
resize: vertical;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid #d8e0dc;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
font: inherit;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.screenshot-task-fields textarea:focus {
|
||||
border-color: #63a88e;
|
||||
box-shadow: 0 0 0 3px rgb(39 139 105 / 0.08);
|
||||
}
|
||||
|
||||
.task-example-picker {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
padding: 14px;
|
||||
border: 1px dashed #bdccc5;
|
||||
border-radius: 12px;
|
||||
background: #fafcfb;
|
||||
}
|
||||
|
||||
.task-example-picker.has-file {
|
||||
border-style: solid;
|
||||
border-color: #8ec3ae;
|
||||
background: #f0f8f4;
|
||||
}
|
||||
|
||||
.task-example-picker input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-example-picker strong {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-example-picker small {
|
||||
color: #8c9994;
|
||||
}
|
||||
|
||||
.screenshot-task-table .creator-screenshot-link {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-result-gallery {
|
||||
display: flex;
|
||||
min-width: 150px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.admin-result-gallery a,
|
||||
.admin-result-gallery button {
|
||||
display: block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dce5e0;
|
||||
border-radius: 8px;
|
||||
background: #f4f7f5;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.admin-result-gallery img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.admin-result-gallery > span {
|
||||
color: #74817c;
|
||||
font-size: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.task-type-picker {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
@@ -1566,6 +1708,22 @@ a {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.resource-heading-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.resource-heading-actions > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.resource-heading-actions .filter-chips {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.resource-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1658,6 +1816,224 @@ a {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.resource-import-modal {
|
||||
width: min(780px, calc(100vw - 32px));
|
||||
max-height: min(86vh, 820px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.import-guide-strip {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto auto 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: 18px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 11px;
|
||||
color: #687773;
|
||||
background: #f4f8f5;
|
||||
}
|
||||
|
||||
.import-guide-strip > span {
|
||||
display: grid;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
color: var(--green-deep);
|
||||
background: #dff0e9;
|
||||
font-size: 10px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.import-guide-strip p {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.import-guide-strip i {
|
||||
height: 1px;
|
||||
background: #d5e0db;
|
||||
}
|
||||
|
||||
.resource-import-dropzone {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 116px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
border: 1px dashed #9dc9b9;
|
||||
border-radius: 13px;
|
||||
color: var(--green-deep);
|
||||
background: #f8fcfa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.resource-import-dropzone:hover {
|
||||
border-color: var(--green);
|
||||
background: #f2faf6;
|
||||
}
|
||||
|
||||
.resource-import-dropzone input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.resource-import-dropzone strong {
|
||||
max-width: 88%;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.resource-import-dropzone span {
|
||||
color: #8a9893;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.import-template-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-top: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #edf0ee;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.import-template-note > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.import-template-note strong {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.import-template-note span {
|
||||
color: #8b9692;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.import-template-note a {
|
||||
flex: 0 0 auto;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.resource-import-preview {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.import-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.import-summary-grid > div {
|
||||
display: flex;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #e7ece9;
|
||||
border-radius: 10px;
|
||||
background: #fafbf9;
|
||||
}
|
||||
|
||||
.import-summary-grid span {
|
||||
color: #87938f;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.import-summary-grid strong {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.import-summary-grid .create strong { color: var(--green); }
|
||||
.import-summary-grid .update strong { color: #4c7890; }
|
||||
.import-summary-grid .error strong { color: #c86548; }
|
||||
|
||||
.import-preview-table {
|
||||
margin-top: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8ece9;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.import-preview-row {
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1.4fr 1fr 1.15fr 1.15fr;
|
||||
min-height: 50px;
|
||||
align-items: center;
|
||||
border-top: 1px solid #edf0ee;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.import-preview-row.head {
|
||||
min-height: 36px;
|
||||
border-top: 0;
|
||||
color: #8c9793;
|
||||
background: #f6f8f6;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.import-preview-row > span {
|
||||
min-width: 0;
|
||||
padding: 8px 10px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.import-preview-row > span:not(:last-child) {
|
||||
border-right: 1px solid #f0f2f1;
|
||||
}
|
||||
|
||||
.import-preview-row strong,
|
||||
.import-preview-row small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.import-preview-row small {
|
||||
margin-top: 3px;
|
||||
color: #9aa39f;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.import-result {
|
||||
color: #557269;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.import-result.create { color: var(--green); }
|
||||
.import-result.update { color: #47778d; }
|
||||
.import-result.error { color: #bd644b; font-weight: 520; }
|
||||
|
||||
.import-preview-more {
|
||||
margin: 8px 0 0;
|
||||
color: #919c98;
|
||||
font-size: 9px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #f0d5cc;
|
||||
border-radius: 9px;
|
||||
color: #a95037;
|
||||
background: #fff7f3;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -1905,27 +2281,19 @@ a {
|
||||
.recovery-title-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
max-width: 310px;
|
||||
color: #182822;
|
||||
color: #168565;
|
||||
text-decoration: none;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recovery-title-link strong {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.recovery-title-link::after {
|
||||
content: "↗";
|
||||
flex: none;
|
||||
color: #2b9875;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.recovery-title-link:hover strong {
|
||||
color: #168565;
|
||||
color: #116d54;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
@@ -2038,15 +2406,178 @@ a {
|
||||
}
|
||||
|
||||
.creator-screenshot-link {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dce5e0;
|
||||
border-radius: 8px;
|
||||
color: var(--green-deep);
|
||||
background: #f4f7f5;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.creator-screenshot-link:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
border-color: #9fc9b8;
|
||||
}
|
||||
|
||||
.creator-screenshot-link img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.creator-screenshot-link span {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
padding: 3px 5px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background: rgb(17 48 39 / 0.76);
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.admin-image-lightbox {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 22px;
|
||||
background: rgb(7 24 19 / 0.78);
|
||||
}
|
||||
|
||||
.admin-image-lightbox-card {
|
||||
width: min(980px, 100%);
|
||||
max-height: calc(100vh - 44px);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(255 255 255 / 0.18);
|
||||
border-radius: 16px;
|
||||
background: #f7faf8;
|
||||
box-shadow: 0 28px 90px rgb(0 0 0 / 0.34);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-heading {
|
||||
display: flex;
|
||||
min-height: 52px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #dce5e0;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-heading > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-heading strong {
|
||||
overflow: hidden;
|
||||
color: var(--green-deep);
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-heading span {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
color: #5f746b;
|
||||
background: #e9f1ed;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-heading button {
|
||||
flex: 0 0 auto;
|
||||
height: 32px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid #c7d8d0;
|
||||
border-radius: 8px;
|
||||
color: var(--green-deep);
|
||||
background: white;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
flex: 1;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #14231e;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
max-height: calc(100vh - 108px);
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage > button {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
min-width: 58px;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgb(255 255 255 / 0.42);
|
||||
border-radius: 999px;
|
||||
color: white;
|
||||
background: rgb(8 31 24 / 0.78);
|
||||
box-shadow: 0 6px 20px rgb(0 0 0 / 0.24);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
transform: translateY(-50%);
|
||||
transition: background 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage > button:hover,
|
||||
.admin-image-lightbox-stage > button:focus-visible {
|
||||
background: rgb(23 112 83 / 0.94);
|
||||
transform: translateY(-50%) scale(1.03);
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage > button.previous {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage > button.next {
|
||||
right: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.admin-image-lightbox-stage > button {
|
||||
min-width: 52px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage > button.previous {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.admin-image-lightbox-stage > button.next {
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.creator-screenshot-pending,
|
||||
@@ -3388,6 +3919,37 @@ label small {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.resource-heading-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.resource-heading-actions .filter-chips {
|
||||
width: 100%;
|
||||
margin: 4px 0 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.import-guide-strip {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.import-guide-strip i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.import-summary-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.import-preview-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.import-preview-row {
|
||||
min-width: 620px;
|
||||
}
|
||||
|
||||
.collection-schedule-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user