EENE Dashboard upload to Gitea
This commit is contained in:
EENE Dashboard
@@ -10,8 +10,11 @@
|
||||
|
||||
--detail-header-bg: var(--app-header-bg);
|
||||
--detail-header-border: var(--app-header-border);
|
||||
--detail-page-bg: #fff;
|
||||
--detail-card-bg: linear-gradient(168deg, #ffffff 0%, var(--detail-ref-hub-soft) 100%);
|
||||
--detail-page-bg: #f2f5f9;
|
||||
--detail-aside-bg: #ffffff;
|
||||
--detail-panel-bg: #ffffff;
|
||||
--detail-zone-border: var(--detail-border);
|
||||
--detail-card-bg: #ffffff;
|
||||
--detail-text-title: var(--detail-ref-title);
|
||||
--detail-text-body: var(--detail-ref-title);
|
||||
--detail-text-secondary: var(--detail-ref-hub-dark);
|
||||
@@ -133,18 +136,31 @@
|
||||
|
||||
.detail-page-header__tab {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 3px 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
border-radius: 10px;
|
||||
font-family: inherit;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.detail-page-header__tab::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.detail-page-header__tab:hover:not(:disabled) {
|
||||
@@ -156,10 +172,14 @@
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
background: #fff;
|
||||
color: var(--detail-ref-title);
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.detail-page-header__tab.is-active::before {
|
||||
background: var(--detail-ref-hub-dark);
|
||||
}
|
||||
|
||||
.detail-page-header__tab:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: wait;
|
||||
@@ -168,6 +188,8 @@
|
||||
/* ─── 본문 타이포 (quarter-board project-field · board-project-title) ─── */
|
||||
.detail-section-label {
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid var(--detail-ref-hub);
|
||||
color: var(--detail-text-title);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
@@ -187,7 +209,7 @@
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--detail-border);
|
||||
flex-shrink: 0;
|
||||
@@ -330,10 +352,24 @@
|
||||
}
|
||||
|
||||
.detail-aside {
|
||||
background: var(--detail-card-bg);
|
||||
background: var(--detail-aside-bg);
|
||||
border-right: 1px solid var(--detail-border);
|
||||
}
|
||||
|
||||
.detail-aside > section {
|
||||
background: transparent;
|
||||
border-bottom-color: var(--detail-border);
|
||||
}
|
||||
|
||||
.detail-main-panel {
|
||||
background: var(--detail-panel-bg);
|
||||
border-left: 1px solid var(--detail-border);
|
||||
}
|
||||
|
||||
.detail-page-shell > .grid {
|
||||
background: var(--detail-page-bg);
|
||||
}
|
||||
|
||||
/* 프로젝트 상세 — 업무 일정 3단계 고정 노출, 업무내용 위로 */
|
||||
.detail-aside--project {
|
||||
--detail-stage-card-h: 80px;
|
||||
@@ -360,16 +396,49 @@
|
||||
}
|
||||
|
||||
.detail-overview {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-overview--has-detail .detail-overview__text {
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.detail-overview__text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-overview-detail {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
margin-top: 0;
|
||||
transition:
|
||||
max-height 0.28s ease,
|
||||
opacity 0.22s ease,
|
||||
margin-top 0.28s ease;
|
||||
}
|
||||
|
||||
.detail-overview-detail.is-expanded {
|
||||
max-height: min(42vh, 280px);
|
||||
opacity: 1;
|
||||
margin-top: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-overview-detail__text {
|
||||
margin: 0;
|
||||
padding-top: 2px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
color: var(--detail-text-body, #1e293b);
|
||||
font-size: var(--detail-body-size, 20px);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.detail-overview__text.is-clamped {
|
||||
@@ -377,6 +446,7 @@
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.detail-overview.is-expanded .detail-overview__text {
|
||||
@@ -387,17 +457,21 @@
|
||||
}
|
||||
|
||||
.detail-overview__more {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 2px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
background: var(--detail-card-bg, #fff);
|
||||
color: var(--detail-text-secondary);
|
||||
cursor: pointer;
|
||||
opacity: 0.72;
|
||||
@@ -454,7 +528,7 @@
|
||||
|
||||
.detail-stage-card {
|
||||
border-color: var(--detail-border);
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.detail-stage-card.is-selected {
|
||||
@@ -495,17 +569,29 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ─── 업무별 타임라인 (간트) — 게이지 4행 고정 ─── */
|
||||
/* ─── 업무별 타임라인 (간트) — 대시보드 타이포 기준 ─── */
|
||||
.milestone-timeline {
|
||||
--mt-row-height: 28px;
|
||||
--mt-row-gap: 4px;
|
||||
/* 타이포: 최소 18 / 내용 20 / 강조 24 */
|
||||
--mt-font-min: 18px;
|
||||
--mt-font-min-weight: 500;
|
||||
--mt-font-content: 20px;
|
||||
--mt-font-content-weight: 500;
|
||||
--mt-font-title: 24px;
|
||||
--mt-font-title-weight: 600;
|
||||
|
||||
--mt-row-height: 38px;
|
||||
--mt-bar-height: 28px;
|
||||
--mt-tick-height: 26px;
|
||||
--mt-row-gap: 6px;
|
||||
--mt-visible-rows: 4;
|
||||
--mt-chart-height: calc(
|
||||
var(--mt-visible-rows) * var(--mt-row-height)
|
||||
+ (var(--mt-visible-rows) - 1) * var(--mt-row-gap)
|
||||
+ 12px
|
||||
+ 14px
|
||||
);
|
||||
--mt-footer-height: calc(
|
||||
38px + 8px + var(--mt-tick-height) + 4px + var(--mt-chart-height) + 26px
|
||||
);
|
||||
--mt-footer-height: calc(26px + 33px + 8px + 22px + 4px + var(--mt-chart-height));
|
||||
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
@@ -516,7 +602,7 @@
|
||||
max-height: var(--mt-footer-height);
|
||||
padding: 12px 20px 14px;
|
||||
border-top: 1px solid var(--detail-border);
|
||||
background: linear-gradient(168deg, #ffffff 0%, var(--detail-ref-hub-soft) 100%);
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -530,16 +616,16 @@
|
||||
|
||||
.milestone-timeline__title {
|
||||
color: var(--detail-text-title);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-size: var(--mt-font-title);
|
||||
font-weight: var(--mt-font-title-weight);
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.milestone-timeline__subtitle {
|
||||
color: var(--detail-accent);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-size: var(--mt-font-content);
|
||||
font-weight: var(--mt-font-content-weight);
|
||||
letter-spacing: -0.1px;
|
||||
max-width: 45%;
|
||||
}
|
||||
@@ -555,8 +641,8 @@
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
color: var(--detail-text-muted);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-size: var(--mt-font-content);
|
||||
font-weight: var(--mt-font-content-weight);
|
||||
line-height: 1.45;
|
||||
opacity: 0.72;
|
||||
text-align: center;
|
||||
@@ -569,12 +655,13 @@
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.milestone-timeline__ticks {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: 22px;
|
||||
height: var(--mt-tick-height);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
@@ -583,8 +670,8 @@
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
color: var(--detail-text-body);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
@@ -601,7 +688,7 @@
|
||||
|
||||
.milestone-timeline__tick.is-today .milestone-timeline__tick-label {
|
||||
color: var(--detail-ref-hub-dark);
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--detail-ref-hub);
|
||||
text-underline-offset: 2px;
|
||||
@@ -614,12 +701,12 @@
|
||||
height: var(--mt-chart-height);
|
||||
min-height: var(--mt-chart-height);
|
||||
max-height: var(--mt-chart-height);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
margin: 0 4px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
border: 1px solid var(--detail-border);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.milestone-timeline__grid {
|
||||
@@ -656,7 +743,7 @@
|
||||
.milestone-timeline__bar {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 22px;
|
||||
height: var(--mt-bar-height);
|
||||
transform: translateY(-50%);
|
||||
padding: 0;
|
||||
border: none;
|
||||
@@ -672,6 +759,10 @@
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.milestone-timeline__bar.is-gantt {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.milestone-timeline__bar.is-expanded {
|
||||
z-index: 5;
|
||||
overflow: visible;
|
||||
@@ -689,8 +780,8 @@
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
@@ -732,12 +823,12 @@
|
||||
.milestone-timeline__bar-label {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0 8px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
line-height: var(--mt-bar-height);
|
||||
letter-spacing: -0.1px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@@ -763,3 +854,301 @@
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
/* ─── 타임라인 보기 전환 ─── */
|
||||
.milestone-timeline__view-toggle {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
padding: 3px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
border: 1px solid var(--detail-border);
|
||||
}
|
||||
|
||||
.milestone-timeline__view-toggle button {
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--detail-text-muted);
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.milestone-timeline__view-toggle button.is-active {
|
||||
background: var(--detail-ref-hub);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-panel--gantt {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.detail-page-grid--portfolio {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-panel--portfolio {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.detail-panel--gantt .milestone-timeline--gantt,
|
||||
.detail-panel--portfolio .milestone-timeline--portfolio {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
height: auto;
|
||||
--mt-visible-rows: max(4, var(--mt-row-count, 4));
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__gantt-layout,
|
||||
.milestone-timeline--portfolio .milestone-timeline__gantt-layout {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 32%) minmax(0, 1fr);
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__row-labels,
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
border-right: 1px solid var(--detail-border);
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__row-labels-head,
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-labels-head {
|
||||
flex-shrink: 0;
|
||||
height: var(--mt-tick-height);
|
||||
margin-bottom: 4px;
|
||||
padding: 0 10px;
|
||||
color: var(--detail-text-muted);
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
letter-spacing: 0.02em;
|
||||
line-height: var(--mt-tick-height);
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__row-labels-body,
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-labels-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--mt-row-gap);
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__row-label,
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-label {
|
||||
height: var(--mt-row-height);
|
||||
flex-shrink: 0;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--detail-text-title);
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
text-align: left;
|
||||
line-height: var(--mt-row-height);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__row-label.is-selected,
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-label.is-selected {
|
||||
color: var(--detail-ref-hub-dark);
|
||||
background: rgba(74, 144, 217, 0.1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__portfolio-layout {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__portfolio-head {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 32%) minmax(0, 1fr);
|
||||
gap: 0;
|
||||
flex-shrink: 0;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__portfolio-chart-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__body--ticks-only {
|
||||
position: relative;
|
||||
height: var(--mt-tick-height);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__viewport-range {
|
||||
padding: 0 8px 2px;
|
||||
color: var(--detail-text-muted);
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.milestone-timeline__viewport-range {
|
||||
padding: 0 8px 2px;
|
||||
color: var(--detail-text-muted);
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__portfolio-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 32%) minmax(0, 1fr);
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__group-label {
|
||||
height: var(--mt-row-height);
|
||||
flex-shrink: 0;
|
||||
padding: 0 10px;
|
||||
color: var(--detail-text-title);
|
||||
font-size: var(--mt-font-content);
|
||||
font-weight: 600;
|
||||
line-height: var(--mt-row-height);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: rgba(74, 144, 217, 0.06);
|
||||
border-bottom: 1px solid rgba(74, 144, 217, 0.1);
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-label--child {
|
||||
padding-left: 24px;
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
font-size: var(--mt-font-min);
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__row--group {
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.milestone-timeline__chart-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.milestone-timeline__focus-layout {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.milestone-timeline__chart--pannable {
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.milestone-timeline__chart--pannable.is-panning {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.milestone-timeline__pan-hint,
|
||||
.milestone-timeline--portfolio .milestone-timeline__portfolio-hint {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
padding: 0 4px 2px;
|
||||
color: var(--detail-text-muted);
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: var(--mt-font-min-weight);
|
||||
text-align: right;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__grid--rows {
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-label.is-other-task,
|
||||
.milestone-timeline--portfolio .milestone-timeline__row.is-other-task .milestone-timeline__bar {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.milestone-timeline--portfolio .milestone-timeline__row-labels-body {
|
||||
border-right: 1px solid var(--detail-border);
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__body,
|
||||
.milestone-timeline--portfolio .milestone-timeline__body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.milestone-timeline--gantt .milestone-timeline__chart,
|
||||
.milestone-timeline--portfolio .milestone-timeline__chart {
|
||||
flex: 1;
|
||||
min-height: calc(var(--mt-visible-rows) * var(--mt-row-height) + (var(--mt-visible-rows) - 1) * var(--mt-row-gap) + 14px);
|
||||
max-height: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.milestone-timeline__today-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--detail-ref-hub);
|
||||
box-shadow: 0 0 6px rgba(74, 144, 217, 0.35);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.milestone-timeline__bar-progress {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 3;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: var(--detail-ref-hub-dark);
|
||||
border: 1px solid rgba(74, 144, 217, 0.25);
|
||||
font-size: var(--mt-font-min);
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -485,14 +485,22 @@
|
||||
transition: stroke 0.2s ease;
|
||||
}
|
||||
|
||||
/* 선택(is-active) 시에만 연동 — 아이콘 직접 hover 없음 */
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item.is-active) .hub-diamond-icon {
|
||||
color: var(--ref-hub-routine-active);
|
||||
filter: drop-shadow(0 0 6px rgba(37, 99, 171, 0.35));
|
||||
transform: scale(1.1);
|
||||
.dummy-board-page .hub-diamond-icon:hover svg path,
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item:hover) .hub-diamond-icon svg path {
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
/* 선택(is-active) · hover — 색 진하게만, 그림자 없음 */
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item.is-active) .hub-diamond-icon,
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item:hover) .hub-diamond-icon {
|
||||
filter: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item.is-active) .hub-diamond-icon {
|
||||
color: var(--ref-hub-routine-active);
|
||||
}
|
||||
|
||||
/* quarter-board 녹색 path hover 덮어쓰기 */
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item.is-active) .hub-diamond-icon svg path {
|
||||
stroke: var(--ref-hub-routine-active) !important;
|
||||
filter: none !important;
|
||||
@@ -500,8 +508,6 @@
|
||||
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item:hover:not(.is-active)) .hub-diamond-icon {
|
||||
color: var(--ref-hub-routine-hover);
|
||||
filter: none;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-diamond-inner:has(.hub-routine-item:hover:not(.is-active)) .hub-diamond-icon svg path {
|
||||
@@ -532,33 +538,33 @@
|
||||
.dummy-board-page .hub-routine-item {
|
||||
color: var(--ref-hub-routine);
|
||||
padding: 2px 2px;
|
||||
transition: color 0.2s ease, text-shadow 0.2s ease;
|
||||
text-shadow: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease, font-weight 0.2s ease;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-routine-item::before {
|
||||
background: currentColor;
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: none;
|
||||
transition: background 0.2s ease;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-routine-item:hover {
|
||||
color: var(--ref-hub-routine-hover);
|
||||
text-shadow: none;
|
||||
font-weight: 700;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-routine-item.is-active {
|
||||
color: var(--ref-hub-routine-active);
|
||||
text-shadow: 0 0 6px rgba(37, 99, 171, 0.35);
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-routine-item:hover::before {
|
||||
transform: scale(1.05);
|
||||
font-weight: 700;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-routine-item:hover::before,
|
||||
.dummy-board-page .hub-routine-item.is-active::before {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 5px rgba(37, 99, 171, 0.4);
|
||||
box-shadow: none !important;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.dummy-board-page .hub-box--focus {
|
||||
@@ -1008,6 +1014,7 @@
|
||||
--dept-donut-size: 96px;
|
||||
--project-field-line-gap: 5px;
|
||||
--project-field-edge-pad: 10px;
|
||||
--project-week-row-font-size: 20px;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .dept-card {
|
||||
@@ -1020,12 +1027,12 @@
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: calc(var(--dept-icon-size-2slots) - var(--dept-icon-protrude) + 6px);
|
||||
padding: calc(var(--dept-icon-protrude) + 2px) var(--dept-slot-pad-x);
|
||||
padding: 14px var(--dept-slot-pad-x);
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .dept-head .dept-icon {
|
||||
left: var(--dept-slot-pad-x);
|
||||
top: calc(-1 * var(--dept-icon-protrude));
|
||||
top: calc(-0.9 * var(--dept-icon-protrude));
|
||||
width: var(--dept-icon-size-2slots);
|
||||
height: var(--dept-icon-size-2slots);
|
||||
}
|
||||
@@ -1050,7 +1057,7 @@
|
||||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
padding: var(--dept-head-list-gap) var(--dept-slot-pad-x) var(--dept-list-inner-bottom);
|
||||
padding: 4px var(--dept-slot-pad-x) var(--dept-list-inner-bottom);
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 var(--dept-card-inner-radius) var(--dept-card-inner-radius);
|
||||
background: var(--ref-soft, #f4f6f9);
|
||||
@@ -1125,7 +1132,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
transform: translateY(-50%);
|
||||
transform: translateY(-70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -1178,24 +1185,19 @@
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--issue-reserved {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-sub-title,
|
||||
.dummy-board-page--2slots .project-field {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 수행 기간 · 주요 내용 — 라벨 글씨만 숨김 (값은 표시) */
|
||||
.dummy-board-page--2slots .project-field:not(.project-field--issue) {
|
||||
/* 수행 기간 · 개요 — 라벨 글씨만 숨김. 주차 보기(--week-*)는 라벨 표시 */
|
||||
.dummy-board-page--2slots .project-field:not(.project-field--issue):not(.project-field--week-focus):not(.project-field--week-period):not(.project-field--week-empty) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
padding-left: var(--project-title-indent);
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field:not(.project-field--issue) .project-field-label {
|
||||
.dummy-board-page--2slots .project-field:not(.project-field--issue):not(.project-field--week-focus):not(.project-field--week-period):not(.project-field--week-empty) .project-field-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1225,7 +1227,32 @@
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field .project-field-value {
|
||||
.dummy-board-page--2slots .project-field--issue-reserved {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--overview:not(.project-field--overview-expanded) .project-field-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--overview-expanded .project-field-value {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.28;
|
||||
word-break: break-word;
|
||||
min-height: calc(2 * 1.28em + var(--project-field-line-gap));
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field:not(.project-field--overview) .project-field-value:not(.project-field-value--issue) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -1241,6 +1268,45 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--week-focus,
|
||||
.dummy-board-page--2slots .project-field--week-period {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
gap: 2px 10px;
|
||||
align-items: baseline;
|
||||
padding-left: var(--project-title-indent);
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--week-focus .project-field-label,
|
||||
.dummy-board-page--2slots .project-field--week-period .project-field-label,
|
||||
.dummy-board-page--2slots .project-field--week-focus .project-field-value,
|
||||
.dummy-board-page--2slots .project-field--week-period .project-field-value {
|
||||
font-family: inherit;
|
||||
font-size: var(--project-week-row-font-size);
|
||||
line-height: 1.28;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--week-focus .project-field-label,
|
||||
.dummy-board-page--2slots .project-field--week-period .project-field-label {
|
||||
display: block !important;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--week-focus .project-field-value,
|
||||
.dummy-board-page--2slots .project-field--week-period .project-field-value {
|
||||
color: #5a6b62;
|
||||
font-weight: 500;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--week-empty .project-field-value {
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dummy-board-page--2slots .project-field--issue {
|
||||
display: grid;
|
||||
grid-template-columns: 18px 1fr;
|
||||
|
||||
@@ -526,15 +526,15 @@
|
||||
--hub-band-h: min(calc(var(--hub-row-h) * 0.473), 171px);
|
||||
--hub-slogan-band-h: min(calc(var(--hub-row-h) * 0.567), 205px);
|
||||
/* 일정: 박스 top → 제목 (플래너·헤더 띠에서 역산) */
|
||||
--hub-title-top: 20px;
|
||||
--hub-title-top: 12px;
|
||||
/* 슬로건: 포스트잇 상단 = 부서 카드 헤더 상단 */
|
||||
--hub-slogan-pad-top: 0;
|
||||
--hub-slogan-postit-pad-top: 10px;
|
||||
--hub-slogan-postit-pad-bottom: 10px;
|
||||
/* 일정: 헤더 띠 + 플래너 (플래너 padding-top도 title-top에서 역산) */
|
||||
--hub-head-offset-top: -2px;
|
||||
--hub-head-pad-top: 8px;
|
||||
--hub-head-pad-bottom: 7px;
|
||||
--hub-head-pad-top: 5px;
|
||||
--hub-head-pad-bottom: 6px;
|
||||
--hub-card-pad-x: 12px;
|
||||
--hub-card-pad-bottom: 10px;
|
||||
--hub-postit-pad-x: 14px;
|
||||
@@ -605,24 +605,9 @@
|
||||
.hub-routine-focus-body {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hub-routine-focus-nav {
|
||||
flex: 0 0 20px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--hub-diamond-border, #2f8a66);
|
||||
opacity: 0.45;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.hub-routine-focus-nav:disabled {
|
||||
opacity: 0.15;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hub-focus-task-list {
|
||||
@@ -1075,8 +1060,8 @@
|
||||
}
|
||||
|
||||
.hub-box--focus .hub-schedule-planner {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@@ -1086,20 +1071,139 @@
|
||||
}
|
||||
|
||||
.hub-box--focus .hub-schedule-viewport {
|
||||
flex: 1 1 auto;
|
||||
flex: 0 0 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.hub-box--focus .hub-schedule-viewport {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
.hub-box--focus .hub-schedule-wheel-wrap {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
--hub-schedule-row-gap: 8px;
|
||||
--hub-schedule-row-h: 38px;
|
||||
--hub-schedule-row-step: calc(var(--hub-schedule-row-h) + var(--hub-schedule-row-gap));
|
||||
--hub-schedule-view-h: calc(var(--hub-schedule-row-step) * 3 - var(--hub-schedule-row-gap));
|
||||
}
|
||||
|
||||
.hub-box--focus .hub-schedule-list {
|
||||
.hub-schedule-wheel-viewport {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: var(--hub-schedule-view-h);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px 0 32px;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-viewport.is-scrollable {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-viewport.is-scrollable.is-dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-viewport.is-scrollable.is-dragging .hub-schedule-wheel-row {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-viewport--empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 56px;
|
||||
height: auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-viewport::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: var(--hub-schedule-row-h);
|
||||
border-radius: 4px;
|
||||
background: rgba(90, 107, 98, 0.06);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-track {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--hub-schedule-row-gap, 8px);
|
||||
transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-track.is-dragging {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-row {
|
||||
flex: 0 0 var(--hub-schedule-row-h);
|
||||
height: var(--hub-schedule-row-h);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px dashed #e8e0d4;
|
||||
transition: opacity 0.28s ease;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* hub-focus-task-item · board-project-desc 와 동일 본문 */
|
||||
.hub-schedule-wheel-date,
|
||||
.hub-schedule-wheel-text {
|
||||
font-size: 20px;
|
||||
line-height: 1.45;
|
||||
font-weight: 600;
|
||||
color: #5a6b62;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-date {
|
||||
flex: 0 0 auto;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto 2em;
|
||||
column-gap: 0.15em;
|
||||
align-items: baseline;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-text {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-row.is-past .hub-schedule-wheel-date,
|
||||
.hub-schedule-wheel-row.is-past .hub-schedule-wheel-text {
|
||||
color: #8a9690;
|
||||
}
|
||||
|
||||
.hub-schedule-wheel-row.is-today .hub-schedule-wheel-date,
|
||||
.hub-schedule-wheel-row.is-today .hub-schedule-wheel-text {
|
||||
color: #5a6b62;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hub-schedule-date-month {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hub-schedule-date-day {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hub-schedule-planner::before {
|
||||
@@ -1115,7 +1219,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
padding:
|
||||
calc(var(--hub-title-top) - var(--hub-head-pad-top) - var(--hub-head-offset-top))
|
||||
var(--hub-card-pad-x)
|
||||
@@ -1545,119 +1649,10 @@
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* ─── 분기 일정 캐러셀 (3건 표시 · 오늘 기준 · 좌우 탐색) ─── */
|
||||
.hub-schedule-viewport {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hub-schedule-viewport .hub-schedule-list {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 6px calc(var(--hub-body-inset) - var(--hub-card-pad-x)) 4px
|
||||
calc(var(--hub-body-inset) - var(--hub-card-pad-x));
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hub-schedule-viewport--empty {
|
||||
min-height: 56px;
|
||||
}
|
||||
/* (legacy hub-schedule-carousel rules removed — use hub-schedule-wheel-* in media block) */
|
||||
|
||||
.hub-schedule-empty {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.hub-schedule-item--past .hub-schedule-date,
|
||||
.hub-schedule-item--past .board-project-desc {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.hub-schedule-item--today .hub-schedule-date,
|
||||
.hub-schedule-item--today .hub-schedule-date-month,
|
||||
.hub-schedule-item--today .hub-schedule-date-day,
|
||||
.hub-schedule-item--today .board-project-desc {
|
||||
color: #5a6b62;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hub-schedule-date {
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hub-schedule-nav {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #5a5349;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0.55;
|
||||
pointer-events: auto;
|
||||
transition: opacity 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.hub-schedule-nav--prev {
|
||||
left: -6px;
|
||||
padding-right: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(242, 236, 227, 0.95) 0%,
|
||||
rgba(242, 236, 227, 0.55) 60%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.hub-schedule-nav--next {
|
||||
right: -6px;
|
||||
padding-left: 2px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(242, 236, 227, 0.95) 0%,
|
||||
rgba(242, 236, 227, 0.55) 60%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.hub-schedule-nav:hover:not(:disabled) {
|
||||
opacity: 0.85;
|
||||
color: #3d3832;
|
||||
}
|
||||
|
||||
.hub-schedule-nav-icon {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
line-height: 0.75;
|
||||
transform: scaleY(1.55);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.hub-schedule-nav:disabled {
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
.routine-detail {
|
||||
--rd-header-bg: linear-gradient(180deg, #37a184 0%, #29724f 20%, #07412e 100%);
|
||||
--rd-emerald-deep: #1e3a5f;
|
||||
--rd-bg-page: #fff;
|
||||
--rd-bg-page: #f2f5f9;
|
||||
--rd-bg-card: #ffffff;
|
||||
--rd-bg-card-hover: #f8fafc;
|
||||
--rd-bg-stage-selected: #f5faff;
|
||||
@@ -358,6 +358,19 @@
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.routine-detail .grid {
|
||||
background: var(--rd-bg-page);
|
||||
}
|
||||
|
||||
.routine-detail__panel .milestone-timeline {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.routine-detail__panel .milestone-timeline--gantt,
|
||||
.routine-detail__panel .milestone-timeline--portfolio,
|
||||
.detail-panel--gantt .milestone-timeline--gantt,
|
||||
.detail-panel--portfolio .milestone-timeline--portfolio {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
770
frontend/src/styles/task-manager.css
Normal file
770
frontend/src/styles/task-manager.css
Normal file
@@ -0,0 +1,770 @@
|
||||
/* ── 공통 업무 폼 (모달 · 업무관리) ── */
|
||||
|
||||
.task-form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.task-form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-form-row-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.task-form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.task-form-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-form-progress-val {
|
||||
margin-left: 6px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.task-form-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #dbe3ea;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.task-form-input:focus {
|
||||
border-color: #4a90d9;
|
||||
box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
|
||||
}
|
||||
|
||||
.task-form-input--title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-form-textarea {
|
||||
resize: vertical;
|
||||
min-height: 72px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.task-form-textarea--tall {
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.task-form-range {
|
||||
width: 100%;
|
||||
accent-color: #29724f;
|
||||
}
|
||||
|
||||
.task-form-people {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d4ebe3;
|
||||
background: rgba(232, 245, 240, 0.45);
|
||||
}
|
||||
|
||||
.task-form-assignees {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-form-assignee-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dbe3ea;
|
||||
background: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.task-form-assignee-chip.is-checked {
|
||||
background: #29724f;
|
||||
border-color: #29724f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.task-form-empty {
|
||||
margin: 0;
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px dashed #dbe3ea;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.task-form-issues {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-form-issue {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.task-form-issue-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.task-form-issue-date {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.task-form-issue-date-label {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-form-issue-date-input {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-form-issue-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-form-link-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #2563ab;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.task-form-link-btn:hover {
|
||||
background: rgba(74, 144, 217, 0.1);
|
||||
}
|
||||
|
||||
.task-form-link-btn--danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.task-form-link-btn--danger:hover {
|
||||
background: rgba(220, 38, 38, 0.08);
|
||||
}
|
||||
|
||||
.task-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.task-form-btn {
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.task-form-btn--ghost {
|
||||
background: #fff;
|
||||
border: 1px solid #dbe3ea;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.task-form-btn--ghost:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.task-form-btn--primary {
|
||||
background: #29724f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.task-form-btn--primary:hover {
|
||||
background: #1f5a3d;
|
||||
}
|
||||
|
||||
.task-form-btn--primary.is-routine {
|
||||
background: #0d4a38;
|
||||
}
|
||||
|
||||
.task-form-btn--danger {
|
||||
background: #fff;
|
||||
border: 1px solid #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.task-form-btn--danger:hover {
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
/* ── TaskModal ── */
|
||||
|
||||
.task-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(7, 33, 24, 0.55);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.task-modal-shell {
|
||||
width: min(540px, 94vw);
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 64px rgba(7, 33, 24, 0.28);
|
||||
}
|
||||
|
||||
.task-modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(120deg, #0d4a38 0%, #29724f 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.task-modal-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.task-modal-close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.task-modal-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.task-modal-body {
|
||||
overflow-y: auto;
|
||||
padding: 18px 20px 20px;
|
||||
}
|
||||
|
||||
/* ── 업무관리 ── */
|
||||
|
||||
.task-manager-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(7, 33, 24, 0.58);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.task-manager-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(1180px, 100%);
|
||||
height: min(calc(100dvh - 40px), 920px);
|
||||
max-height: calc(100dvh - 40px);
|
||||
min-height: 0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #f4f7f5;
|
||||
box-shadow: 0 28px 80px rgba(7, 33, 24, 0.32);
|
||||
}
|
||||
|
||||
.task-manager-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 22px;
|
||||
background: linear-gradient(120deg, #0d4a38 0%, #29724f 55%, #37a184 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.task-manager-header__title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.task-manager-header__quarter {
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.task-manager-close {
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #fff;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-manager-close:hover {
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.task-manager-toolbar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 18px;
|
||||
border-bottom: 1px solid #dbe3ea;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.task-manager-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.task-manager-tab {
|
||||
border: 1px solid #dbe3ea;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
border-radius: 999px;
|
||||
padding: 7px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.task-manager-tab.is-active {
|
||||
background: #29724f;
|
||||
border-color: #29724f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.task-manager-tab.is-active.is-routine {
|
||||
background: #0d4a38;
|
||||
border-color: #0d4a38;
|
||||
}
|
||||
|
||||
.task-manager-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.task-manager-chip {
|
||||
border: 1px solid #dbe3ea;
|
||||
background: #fff;
|
||||
color: #64748b;
|
||||
border-radius: 999px;
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-manager-chip.is-active {
|
||||
background: rgba(41, 114, 79, 0.12);
|
||||
border-color: #29724f;
|
||||
color: #1f5a3d;
|
||||
}
|
||||
|
||||
.task-manager-toolbar__spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.task-manager-search {
|
||||
min-width: 180px;
|
||||
max-width: 260px;
|
||||
flex: 1 1 180px;
|
||||
border: 1px solid #dbe3ea;
|
||||
border-radius: 999px;
|
||||
padding: 7px 14px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.task-manager-search:focus {
|
||||
border-color: #4a90d9;
|
||||
box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
|
||||
}
|
||||
|
||||
.task-manager-add {
|
||||
border: none;
|
||||
background: #29724f;
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-manager-add:hover {
|
||||
background: #1f5a3d;
|
||||
}
|
||||
|
||||
.task-manager-list {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 14px 18px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.task-manager-empty {
|
||||
margin: auto;
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-manager-row {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #dbe3ea;
|
||||
background: #fff;
|
||||
overflow: visible;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.task-manager-row.is-expanded {
|
||||
border-color: #7eb3e8;
|
||||
box-shadow: 0 4px 16px rgba(41, 114, 79, 0.08);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.task-manager-row--hrm {
|
||||
box-shadow: inset 4px 0 0 #29724f;
|
||||
}
|
||||
|
||||
.task-manager-row--hrd {
|
||||
box-shadow: inset 4px 0 0 #37a184;
|
||||
}
|
||||
|
||||
.task-manager-row--ex {
|
||||
box-shadow: inset 4px 0 0 #4a9480;
|
||||
}
|
||||
|
||||
.task-manager-row--ga {
|
||||
box-shadow: inset 4px 0 0 #0d4a38;
|
||||
}
|
||||
|
||||
.task-manager-row--routine {
|
||||
box-shadow: inset 4px 0 0 #5b2d8a;
|
||||
}
|
||||
|
||||
.task-manager-row__summary {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.task-manager-row__summary:hover {
|
||||
background: rgba(41, 114, 79, 0.04);
|
||||
}
|
||||
|
||||
.task-manager-row__chevron {
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
color: #94a3b8;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.task-manager-row.is-expanded .task-manager-row__chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.task-manager-row__title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-manager-row__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
flex: 1 1 180px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-manager-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-manager-badge--section {
|
||||
background: rgba(41, 114, 79, 0.1);
|
||||
color: #1f5a3d;
|
||||
}
|
||||
|
||||
.task-manager-badge--category {
|
||||
background: rgba(91, 45, 138, 0.1);
|
||||
color: #5b2d8a;
|
||||
}
|
||||
|
||||
.task-manager-badge--progress {
|
||||
background: rgba(74, 144, 217, 0.12);
|
||||
color: #2563ab;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.task-manager-badge--status {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.task-manager-badge--status.is-done {
|
||||
background: rgba(41, 114, 79, 0.12);
|
||||
color: #1f5a3d;
|
||||
}
|
||||
|
||||
.task-manager-badge--status.is-active {
|
||||
background: rgba(74, 144, 217, 0.12);
|
||||
color: #2563ab;
|
||||
}
|
||||
|
||||
.task-manager-panel {
|
||||
padding: 12px 16px 16px;
|
||||
border-top: 1px solid #eef2f6;
|
||||
animation: task-manager-panel-in 0.2s ease;
|
||||
}
|
||||
|
||||
.task-manager-row.is-expanded .task-manager-panel {
|
||||
max-height: min(78vh, 860px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.task-manager-section {
|
||||
margin-top: 18px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px dashed #dbe3ea;
|
||||
}
|
||||
|
||||
.task-manager-section__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.task-manager-section__title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #1f5a3d;
|
||||
}
|
||||
|
||||
.task-manager-subrow {
|
||||
margin-bottom: 6px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fafbfc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-manager-subrow.is-expanded {
|
||||
border-color: #b8d4c8;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.task-manager-subrow__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-manager-subrow__head:hover {
|
||||
background: rgba(41, 114, 79, 0.04);
|
||||
}
|
||||
|
||||
.task-manager-subrow__title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.task-manager-subrow__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-manager-subpanel {
|
||||
padding: 0 12px 12px;
|
||||
border-top: 1px solid #eef2f6;
|
||||
}
|
||||
|
||||
.task-manager-subpanel--new {
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px dashed #b8d4c8;
|
||||
border-radius: 10px;
|
||||
background: #f8fbf9;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes task-manager-panel-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.task-manager-panel__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #eef2f6;
|
||||
}
|
||||
|
||||
.task-manager-footer {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 18px;
|
||||
border-top: 1px solid #dbe3ea;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.task-manager-badge--status.is-legacy {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.task-manager-footer strong {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user