Refine launcher admin workspace
This commit is contained in:
parent
496df474b8
commit
9cac265444
2 changed files with 1256 additions and 465 deletions
380
src/index.css
380
src/index.css
|
|
@ -108,16 +108,35 @@ body {
|
|||
.launcher-hero-stack {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 16px;
|
||||
gap: 14px;
|
||||
padding: 22px 28px 18px;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.launcher-hero-stack::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border: 1px solid rgba(79, 121, 175, 0.7);
|
||||
border-radius: 42px;
|
||||
background:
|
||||
radial-gradient(circle at top center, rgba(109, 169, 245, 0.22) 0%, rgba(109, 169, 245, 0) 52%),
|
||||
linear-gradient(180deg, rgba(16, 28, 50, 0.82) 0%, rgba(9, 17, 31, 0.9) 100%);
|
||||
box-shadow:
|
||||
0 18px 34px rgba(3, 8, 18, 0.32),
|
||||
inset 0 0 0 1px rgba(180, 214, 255, 0.08);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.launcher-title-bubble {
|
||||
padding: 16px 24px;
|
||||
padding: 14px 24px;
|
||||
border: 1px solid #4f79af;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, #13233f 84%, transparent);
|
||||
background: color-mix(in srgb, #13233f 92%, transparent);
|
||||
box-shadow:
|
||||
0 16px 34px rgba(3, 8, 18, 0.34),
|
||||
0 12px 26px rgba(3, 8, 18, 0.26),
|
||||
inset 0 0 0 1px rgba(180, 214, 255, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
|
@ -215,13 +234,22 @@ body {
|
|||
}
|
||||
|
||||
.launcher-board-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
display: inline-grid;
|
||||
grid-template-columns: repeat(2, minmax(128px, 1fr));
|
||||
gap: 4px;
|
||||
width: fit-content;
|
||||
padding: 4px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 14px;
|
||||
background: rgba(8, 16, 31, 0.76);
|
||||
}
|
||||
|
||||
.launcher-board-tab {
|
||||
min-height: 40px;
|
||||
min-height: 42px;
|
||||
min-width: 128px;
|
||||
padding: 10px 18px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.launcher-board-tab.is-active {
|
||||
|
|
@ -292,10 +320,81 @@ body {
|
|||
gap: 10px;
|
||||
}
|
||||
|
||||
.launcher-request-filter {
|
||||
.launcher-request-filter-bar {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 190px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.launcher-request-filter-bar-admin {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.launcher-request-search-input {
|
||||
min-height: 40px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 12px;
|
||||
padding: 0 12px;
|
||||
background: rgba(8, 16, 31, 0.88);
|
||||
color: #eef6ff;
|
||||
}
|
||||
|
||||
.launcher-request-filter-menu-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.launcher-request-filter-icon-btn {
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.launcher-request-filter-icon-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.launcher-request-filter-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 8px);
|
||||
z-index: 20;
|
||||
width: min(320px, 82vw);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 12px;
|
||||
background: rgba(8, 16, 31, 0.96);
|
||||
box-shadow: 0 18px 34px rgba(3, 8, 18, 0.34);
|
||||
}
|
||||
|
||||
.launcher-request-filter-menu-admin {
|
||||
width: min(300px, 72vw);
|
||||
}
|
||||
|
||||
.launcher-request-filter-group {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.launcher-request-filter-group-title {
|
||||
color: #9fd8ff;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.launcher-request-filter-option {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
color: #d7e7ff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.launcher-request-filter-label {
|
||||
|
|
@ -325,8 +424,8 @@ body {
|
|||
|
||||
.launcher-request-admin-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border: 1px solid #476d9d;
|
||||
border-radius: 12px;
|
||||
background:
|
||||
|
|
@ -337,6 +436,10 @@ body {
|
|||
inset 0 0 0 1px rgba(10, 16, 32, 0.14);
|
||||
}
|
||||
|
||||
.launcher-shell-admin .launcher-request-admin-panel {
|
||||
min-height: calc(100dvh - 126px);
|
||||
}
|
||||
|
||||
.launcher-request-admin-unlock {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
|
|
@ -399,12 +502,20 @@ body {
|
|||
.launcher-request-admin-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.launcher-request-admin-sidebar {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
|
|
@ -420,10 +531,12 @@ body {
|
|||
grid-template-columns: 320px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.launcher-shell-admin .launcher-request-admin-grid {
|
||||
grid-template-columns: 320px minmax(0, 1fr);
|
||||
min-height: calc(100dvh - 224px);
|
||||
}
|
||||
|
||||
.launcher-request-admin-card {
|
||||
|
|
@ -431,16 +544,26 @@ body {
|
|||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
padding: 10px;
|
||||
padding: 9px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 12px;
|
||||
background: rgba(8, 16, 31, 0.74);
|
||||
}
|
||||
|
||||
.launcher-request-admin-list-card {
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.launcher-shell-admin .launcher-request-admin-sidebar,
|
||||
.launcher-shell-admin .launcher-request-admin-card,
|
||||
.launcher-shell-admin .launcher-request-admin-detail-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.launcher-request-admin-card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -461,6 +584,7 @@ body {
|
|||
.launcher-request-admin-log-list {
|
||||
min-height: 0;
|
||||
max-height: 320px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
|
@ -469,7 +593,7 @@ body {
|
|||
|
||||
.launcher-shell-admin .launcher-request-admin-request-list,
|
||||
.launcher-shell-admin .launcher-request-admin-log-list {
|
||||
max-height: 31dvh;
|
||||
max-height: calc(100dvh - 250px);
|
||||
}
|
||||
|
||||
.launcher-request-admin-request-row,
|
||||
|
|
@ -500,6 +624,13 @@ body {
|
|||
gap: 4px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-request-headline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-request-title,
|
||||
.launcher-request-admin-log-title {
|
||||
color: #eef6ff;
|
||||
|
|
@ -550,22 +681,51 @@ body {
|
|||
|
||||
.launcher-request-admin-detail {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.launcher-request-admin-detail-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-detail-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.launcher-request-admin-detail-tabs {
|
||||
display: inline-grid;
|
||||
grid-template-columns: repeat(2, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 4px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 16px;
|
||||
background: rgba(17, 32, 63, 0.78);
|
||||
}
|
||||
|
||||
.launcher-request-admin-tab {
|
||||
min-height: 42px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 14px;
|
||||
background: rgba(24, 37, 59, 0.94);
|
||||
color: #eef6ff;
|
||||
font-size: 0.94rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.launcher-request-admin-tab.is-active {
|
||||
border-color: rgba(110, 255, 173, 0.52);
|
||||
background: linear-gradient(135deg, rgba(33, 146, 86, 0.88) 0%, rgba(24, 108, 123, 0.88) 100%);
|
||||
color: #f3fff8;
|
||||
box-shadow: inset 0 0 0 1px rgba(210, 255, 227, 0.14);
|
||||
}
|
||||
|
||||
.launcher-request-admin-detail-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -612,17 +772,27 @@ body {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.launcher-request-admin-tab-panel {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-query-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.launcher-request-admin-editor-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-editor-grid-wide {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.launcher-request-admin-tag-grid {
|
||||
|
|
@ -643,8 +813,8 @@ body {
|
|||
|
||||
.launcher-request-admin-analysis-item {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
gap: 7px;
|
||||
padding: 8px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 12px;
|
||||
background: rgba(8, 16, 31, 0.72);
|
||||
|
|
@ -659,15 +829,69 @@ body {
|
|||
}
|
||||
|
||||
.launcher-request-admin-textarea {
|
||||
min-height: 96px;
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-textarea-sm {
|
||||
min-height: 58px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.launcher-request-admin-textarea-xs {
|
||||
min-height: 46px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.launcher-chip-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.launcher-chip-field-head {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.launcher-chip-list {
|
||||
min-height: 42px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 12px;
|
||||
background: rgba(8, 16, 31, 0.88);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.launcher-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 9px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 999px;
|
||||
background: rgba(25, 48, 87, 0.76);
|
||||
color: #d7e7ff;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.launcher-chip-remove {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.launcher-chip-empty {
|
||||
color: #9fb8e5;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.launcher-request-composer-label {
|
||||
|
|
@ -678,7 +902,7 @@ body {
|
|||
|
||||
.launcher-request-textarea {
|
||||
width: 100%;
|
||||
min-height: 110px;
|
||||
min-height: 84px;
|
||||
resize: vertical;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 10px;
|
||||
|
|
@ -849,6 +1073,70 @@ body {
|
|||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.launcher-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: rgba(4, 8, 15, 0.72);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.launcher-modal {
|
||||
width: min(980px, 100%);
|
||||
max-height: min(82dvh, 920px);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid #365782;
|
||||
border-radius: 14px;
|
||||
background: rgba(8, 16, 31, 0.96);
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
.launcher-modal-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.launcher-modal-console {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
border: 1px solid #24364e;
|
||||
border-radius: 12px;
|
||||
background: #07101d;
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
.launcher-modal-console-row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #17304e;
|
||||
border-radius: 10px;
|
||||
background: rgba(10, 18, 31, 0.88);
|
||||
}
|
||||
|
||||
.launcher-modal-console-time {
|
||||
color: #7ea2d2;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.launcher-modal-console-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.launcher-request-expanded {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
|
@ -968,6 +1256,19 @@ body {
|
|||
background: #263149;
|
||||
}
|
||||
|
||||
.launcher-primary-btn svg,
|
||||
.launcher-secondary-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.launcher-secondary-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
width: min(960px, 93vw);
|
||||
margin: 24px auto;
|
||||
|
|
@ -2067,12 +2368,23 @@ button.danger:not(:disabled):hover {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.launcher-board-tabs,
|
||||
.launcher-request-admin-detail-tabs {
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.launcher-request-hero-actions {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.launcher-request-admin-head,
|
||||
.launcher-request-filter-bar,
|
||||
.launcher-request-filter-bar-admin {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.launcher-request-admin-toolbar,
|
||||
.launcher-request-admin-card-head,
|
||||
.launcher-request-admin-log-head {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -2101,6 +2413,14 @@ button.danger:not(:disabled):hover {
|
|||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.launcher-request-admin-detail-top {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.launcher-modal-console-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.launcher-request-admin-analysis-head {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue