diff --git a/web/src/assets/styles/views/overview-view.css b/web/src/assets/styles/views/overview-view.css index e9f8d60..b2f7600 100644 --- a/web/src/assets/styles/views/overview-view.css +++ b/web/src/assets/styles/views/overview-view.css @@ -1,6 +1,8 @@ .dashboard { + min-width: 0; display: grid; gap: 16px; + padding-bottom: 10px; animation: fadeUp 260ms var(--ease) both; } @@ -350,6 +352,32 @@ } } +@media (max-width: 1440px) { + .dashboard { + gap: 14px; + } + + .kpi-grid { + gap: 10px; + } + + .content-grid { + gap: 18px; + } + + .dashboard-card { + padding: 18px; + } + + .card-head { + margin-bottom: 14px; + } + + .card-head h3 { + font-size: 15px; + } +} + @media (max-width: 860px) { .kpi-grid, .content-grid { diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view.css b/web/src/assets/styles/views/travel-reimbursement-create-view.css index 7d46179..ec23d75 100644 --- a/web/src/assets/styles/views/travel-reimbursement-create-view.css +++ b/web/src/assets/styles/views/travel-reimbursement-create-view.css @@ -4,46 +4,58 @@ z-index: 9999; display: grid; place-items: center; - background: rgba(236, 243, 248, 0.42); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); + background: + radial-gradient(circle at 18% 14%, rgba(16, 185, 129, 0.18), transparent 24%), + radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.12), transparent 28%), + rgba(97, 110, 131, 0.34); + backdrop-filter: blur(18px) saturate(1.02); + -webkit-backdrop-filter: blur(18px) saturate(1.02); } .assistant-modal { - --assistant-base-width: 1430px; - --assistant-base-height: 820px; - --assistant-visual-scale: 1; - --assistant-scale: calc(var(--assistant-visual-scale) * var(--desktop-ui-inverse-scale, 1)); - width: calc(var(--assistant-base-width) * var(--assistant-scale)); - height: calc(var(--assistant-base-height) * var(--assistant-scale)); + --assistant-base-width: 1430; + --assistant-base-height: 820; + --assistant-base-width-px: 1430px; + --assistant-base-height-px: 820px; + --assistant-safe-offset-x: 64; + --assistant-safe-offset-y: 48; + --assistant-fit-scale-width: calc((var(--desktop-viewport-width, 1440) - var(--assistant-safe-offset-x)) / var(--assistant-base-width)); + --assistant-fit-scale-height: calc((var(--desktop-viewport-height, 900) - var(--assistant-safe-offset-y)) / var(--assistant-base-height)); + --assistant-scale: min(1, var(--assistant-fit-scale-width), var(--assistant-fit-scale-height)); + width: calc(var(--assistant-base-width-px) * var(--assistant-scale)); + height: calc(var(--assistant-base-height-px) * var(--assistant-scale)); display: block; background: transparent; box-shadow: none; border: 0; + border-radius: 30px; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; + isolation: isolate; } .assistant-modal-stage { - width: var(--assistant-base-width); - height: var(--assistant-base-height); + position: relative; + width: var(--assistant-base-width-px); + height: var(--assistant-base-height-px); display: grid; grid-template-rows: auto minmax(0, 1fr); transform: scale(var(--assistant-scale)); transform-origin: top left; border-radius: 30px; background: - radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 24%), - radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 22%), - linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(246, 250, 252, 0.66) 100%); + radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 26%), + radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 24%), + linear-gradient(180deg, rgba(241, 246, 245, 0.92) 0%, rgba(230, 237, 235, 0.88) 100%); box-shadow: - 0 24px 64px rgba(15, 23, 42, 0.14), - 0 6px 20px rgba(15, 23, 42, 0.05); - border: 1px solid rgba(255, 255, 255, 0.6); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); + 0 28px 72px rgba(15, 23, 42, 0.22), + 0 10px 28px rgba(15, 23, 42, 0.09), + inset 0 1px 0 rgba(255, 255, 255, 0.42); + border: 1px solid rgba(255, 255, 255, 0.44); + background-clip: padding-box; overflow: hidden; + isolation: isolate; } .assistant-header { @@ -52,8 +64,8 @@ justify-content: space-between; gap: 16px; padding: 22px 26px 18px; - border-bottom: 1px solid rgba(226, 232, 240, 0.72); - background: rgba(255, 255, 255, 0.46); + border-bottom: 1px solid rgba(203, 213, 225, 0.78); + background: linear-gradient(180deg, rgba(247, 250, 249, 0.82) 0%, rgba(240, 246, 244, 0.7) 100%); } .assistant-header-main { @@ -128,12 +140,12 @@ height: 38px; display: grid; place-items: center; - border: 1px solid #d7e0ea; + border: 1px solid rgba(193, 204, 216, 0.92); border-radius: 14px; - background: rgba(255, 255, 255, 0.96); + background: rgba(248, 251, 251, 0.94); color: #475569; font-size: 16px; - box-shadow: 0 6px 14px rgba(148, 163, 184, 0.1); + box-shadow: 0 8px 18px rgba(148, 163, 184, 0.18); } .assistant-layout { @@ -152,14 +164,14 @@ .insight-panel { min-width: 0; min-height: 0; - border: 1px solid rgba(231, 238, 246, 0.92); + border: 1px solid rgba(189, 201, 214, 0.74); border-radius: 24px; - background: rgba(255, 255, 255, 0.72); + background: rgba(248, 251, 251, 0.84); box-shadow: - 0 12px 30px rgba(226, 232, 240, 0.26), - 0 1px 4px rgba(15, 23, 42, 0.03); - backdrop-filter: blur(18px); - -webkit-backdrop-filter: blur(18px); + 0 14px 32px rgba(148, 163, 184, 0.16), + 0 2px 6px rgba(15, 23, 42, 0.05); + backdrop-filter: blur(22px); + -webkit-backdrop-filter: blur(22px); } .dialog-panel { @@ -167,8 +179,8 @@ grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: - radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 20%), - linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(251, 253, 255, 0.72) 100%); + radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 22%), + linear-gradient(180deg, rgba(252, 253, 253, 0.88) 0%, rgba(243, 247, 248, 0.84) 100%); } .dialog-toolbar { @@ -253,12 +265,12 @@ .message-bubble { max-width: min(100%, 720px); padding: 14px 16px; - border: 1px solid rgba(225, 232, 240, 0.96); + border: 1px solid rgba(210, 220, 230, 0.94); border-radius: 20px; - background: rgba(255, 255, 255, 0.96); + background: rgba(253, 254, 254, 0.94); color: #24324a; line-height: 1.65; - box-shadow: 0 8px 18px rgba(241, 245, 249, 0.72); + box-shadow: 0 10px 22px rgba(226, 232, 240, 0.48); } .message-meta { @@ -556,7 +568,7 @@ grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: - linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(251, 254, 252, 0.74) 100%); + linear-gradient(180deg, rgba(239, 245, 243, 0.9) 0%, rgba(231, 238, 236, 0.84) 100%); } .insight-panel::before { @@ -580,7 +592,7 @@ justify-content: space-between; gap: 14px; padding: 18px 18px 14px; - border-bottom: 1px solid rgba(238, 242, 247, 0.88); + border-bottom: 1px solid rgba(205, 215, 224, 0.82); position: relative; z-index: 1; } @@ -670,9 +682,9 @@ min-width: 92px; padding: 10px 12px; border-radius: 14px; - background: rgba(255, 255, 255, 0.9); - border: 1px solid rgba(226, 232, 240, 0.9); - box-shadow: 0 6px 14px rgba(241, 245, 249, 0.72); + background: rgba(250, 252, 252, 0.9); + border: 1px solid rgba(202, 213, 223, 0.9); + box-shadow: 0 8px 18px rgba(203, 213, 225, 0.3); text-align: right; } @@ -707,14 +719,14 @@ gap: 10px; padding: 14px; border-radius: 18px; - border: 1px solid rgba(226, 232, 240, 0.94); - background: rgba(255, 255, 255, 0.76); - box-shadow: 0 3px 10px rgba(241, 245, 249, 0.46); + border: 1px solid rgba(197, 209, 221, 0.88); + background: rgba(249, 251, 251, 0.88); + box-shadow: 0 10px 20px rgba(226, 232, 240, 0.3); } .review-side-overview-card { gap: 12px; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(249, 252, 255, 0.78) 100%); + background: linear-gradient(180deg, rgba(251, 252, 252, 0.92) 0%, rgba(240, 246, 244, 0.86) 100%); } .review-side-intent-row { @@ -754,8 +766,8 @@ align-items: center; padding: 12px; border-radius: 14px; - border: 1px solid rgba(226, 232, 240, 0.92); - background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(206, 216, 226, 0.88); + background: rgba(251, 252, 252, 0.82); position: relative; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; @@ -2241,41 +2253,7 @@ transform: translateX(18px); } -@media (min-width: 1920px) and (min-height: 980px) { - .assistant-modal { - --assistant-visual-scale: 1.05; - } -} - -@media (min-width: 2560px) and (min-height: 1280px) { - .assistant-modal { - --assistant-visual-scale: 1.12; - } -} - -@media (max-width: 1680px), (max-height: 980px) { - .assistant-modal { - --assistant-visual-scale: 0.94; - } -} - -@media (max-width: 1536px), (max-height: 920px) { - .assistant-modal { - --assistant-visual-scale: 0.88; - } -} - -@media (max-width: 1440px), (max-height: 860px) { - .assistant-modal { - --assistant-visual-scale: 0.82; - } -} - @media (max-width: 1366px), (max-height: 780px) { - .assistant-modal { - --assistant-visual-scale: 0.76; - } - .assistant-layout.has-insight { grid-template-columns: minmax(0, 1.34fr) 348px; } @@ -2286,10 +2264,6 @@ } @media (max-width: 1280px) { - .assistant-modal { - --assistant-visual-scale: 0.86; - } - .assistant-layout { grid-template-columns: 1fr; } @@ -2301,7 +2275,6 @@ @media (max-width: 760px) { .assistant-modal { - --assistant-visual-scale: 1; width: 100vw; height: 100vh; }