R524809
315 lines
17 KiB
CSS
315 lines
17 KiB
CSS
/* DCF workbench uses the application's paper, grey and brown palette. */
|
|
.dcf-calculator {
|
|
--df-bg:var(--bg);
|
|
--df-paper:var(--surface);
|
|
--df-ink:var(--ink);
|
|
--df-muted:#75716c;
|
|
--df-line:var(--line);
|
|
--df-accent:var(--accent);
|
|
--df-soft:var(--accent-soft);
|
|
--df-field:#faf9f7;
|
|
--df-accent-line:#d7c7b6;
|
|
--df-chart-secondary:#cbbba9;
|
|
--df-error:#a63f32;
|
|
--df-error-bg:#fff1ee;
|
|
--df-low:#c4e6d1;
|
|
--df-fair:#f1e0b3;
|
|
--df-high:#efc7bd;
|
|
--df-good:#287c54;
|
|
--df-fair-ink:#786950;
|
|
--df-high-ink:#b94c42;
|
|
--df-warning-bg:#f6f2eb;
|
|
display:grid;
|
|
grid-template-columns:minmax(0,1fr);
|
|
gap:20px;
|
|
min-width:0;
|
|
padding:26px;
|
|
background:var(--df-bg);
|
|
color:var(--df-ink);
|
|
border:1px solid var(--df-line);
|
|
border-radius:12px;
|
|
font-size:13px;
|
|
line-height:1.65;
|
|
}
|
|
.dcf-calculator * {box-sizing:border-box;}
|
|
.dcf-calculator>* {min-width:0;}
|
|
.dcf-calculator [hidden] {display:none!important;}
|
|
.dcf-calculator :is(h2,h3,h4,p) {margin:0;}
|
|
.dcf-calculator h2 {font-size:26px;font-weight:500;letter-spacing:-.7px;}
|
|
.dcf-calculator h3 {font-size:14px;font-weight:500;}
|
|
.dcf-calculator h4 {display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;}
|
|
.dcf-calculator h4>span {font-size:11px;color:var(--df-accent);}
|
|
.dcf-calculator b,.dcf-calculator strong {font-weight:500;font-variant-numeric:tabular-nums;}
|
|
.dcf-calculator .df-muted {font-size:11px;color:var(--df-muted);line-height:1.7;}
|
|
.dcf-calculator .df-header {display:flex;align-items:center;justify-content:space-between;gap:16px;}
|
|
.dcf-calculator .df-eyebrow {font-size:11px;letter-spacing:1.5px;color:var(--df-accent);margin-bottom:4px;}
|
|
.dcf-calculator .df-subtitle {margin-top:5px;font-size:12px;color:var(--df-muted);}
|
|
.dcf-calculator .df-header-actions {display:flex;align-items:center;gap:12px;flex-shrink:0;}
|
|
.dcf-calculator .df-header-mark {font-size:11px;white-space:nowrap;color:var(--df-muted);}
|
|
.dcf-calculator button {
|
|
font:inherit;
|
|
font-size:11px;
|
|
color:var(--df-accent);
|
|
background:var(--df-paper);
|
|
border:1px solid var(--df-line);
|
|
border-radius:6px;
|
|
padding:7px 11px;
|
|
cursor:pointer;
|
|
transition:background .15s,border-color .15s;
|
|
}
|
|
.dcf-calculator button:hover {background:var(--df-soft);border-color:var(--df-accent-line);}
|
|
.dcf-calculator button:disabled {opacity:.4;cursor:default;}
|
|
.dcf-calculator :is(input,select,button,summary):focus-visible {outline:2px solid var(--df-accent);outline-offset:3px;}
|
|
.dcf-calculator .df-help-trigger {display:grid;place-items:center;width:34px;height:34px;padding:0;color:var(--df-muted);border-radius:50%;}
|
|
.dcf-calculator .df-profile-bar {display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
|
|
.dcf-calculator .df-company-buttons {display:flex;flex-wrap:wrap;gap:10px;min-width:0;}
|
|
.dcf-calculator .df-company-chip {position:relative;display:inline-flex;min-width:0;max-width:100%;}
|
|
.dcf-calculator .df-company-buttons button {color:var(--df-muted);overflow-wrap:anywhere;max-width:100%;padding:7px 13px;}
|
|
.dcf-calculator .df-company-buttons button[aria-pressed=true] {background:var(--df-soft);border-color:var(--df-accent-line);color:var(--df-accent);font-weight:500;}
|
|
.dcf-calculator [data-new-company] {border-style:dashed;background:transparent;}
|
|
.dcf-calculator .df-save-status {margin-left:auto;color:var(--df-muted);font-size:11px;}
|
|
.dcf-calculator .df-new-company {display:flex;flex-wrap:wrap;align-items:end;gap:10px;}
|
|
.dcf-calculator .df-new-company label {flex:1;min-width:160px;}
|
|
.dcf-calculator .df-company-error {color:var(--df-error);font-size:12px;}
|
|
.dcf-calculator label {display:grid;align-content:start;gap:6px;min-width:0;font-size:11px;color:var(--df-muted);}
|
|
.dcf-calculator input,.dcf-calculator select {
|
|
min-width:0;
|
|
width:100%;
|
|
height:39px;
|
|
padding:8px 10px;
|
|
font:inherit;
|
|
font-size:13px;
|
|
font-variant-numeric:tabular-nums;
|
|
color:var(--df-ink);
|
|
background:var(--df-field);
|
|
border:1px solid var(--df-line);
|
|
border-radius:5px;
|
|
}
|
|
.dcf-calculator input:focus,.dcf-calculator select:focus {border-color:var(--df-accent);background:var(--df-paper);}
|
|
.dcf-calculator input::placeholder {font-size:11px;color:var(--muted);}
|
|
.dcf-calculator details {padding:0;border:0;}
|
|
.dcf-calculator summary {font-size:11px;color:var(--df-accent);cursor:pointer;}
|
|
.dcf-calculator .df-overview {display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;background:var(--df-paper);border:1px solid var(--df-line);border-radius:10px;overflow:hidden;}
|
|
.dcf-calculator .df-stat {display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px 18px;}
|
|
.dcf-calculator .df-stat+.df-stat {border-left:1px solid var(--df-line);}
|
|
.dcf-calculator .df-stat h3 {font-size:11px;color:var(--df-muted);font-weight:400;}
|
|
.dcf-calculator .df-stat-value {font-size:30px;font-weight:500;letter-spacing:-1px;line-height:1.4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
|
|
.dcf-calculator .df-stat-main {background:var(--df-soft);}
|
|
.dcf-calculator .df-stat-main .df-stat-value {color:var(--df-accent);}
|
|
.dcf-calculator [data-buy],.dcf-calculator [data-zone-low],.dcf-calculator [data-deviation][data-price-relation=discount] {color:var(--df-good);}
|
|
.dcf-calculator [data-zone-high],.dcf-calculator [data-deviation][data-price-relation=premium] {color:var(--df-high-ink);}
|
|
.dcf-calculator .df-stat-position .df-stat-value {display:flex;align-items:center;min-height:42px;font-size:22px;letter-spacing:-.5px;}
|
|
.dcf-calculator :is(.df-market,.df-form,.df-results,.df-cashflow-section) {min-width:0;padding:20px;background:var(--df-paper);border:1px solid var(--df-line);border-radius:10px;}
|
|
.dcf-calculator .df-section-head,.dcf-calculator .df-market-head {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
|
|
.dcf-calculator .df-section-head {margin-bottom:16px;}
|
|
.dcf-calculator .df-market-head p {margin-top:3px;}
|
|
.dcf-calculator .df-zone-badge {padding:3px 8px;font-size:11px;white-space:nowrap;border-radius:4px;}
|
|
.dcf-calculator .df-zone-badge[data-zone=低估] {background:var(--df-low);color:var(--df-good);}
|
|
.dcf-calculator .df-zone-badge[data-zone=合理] {background:var(--df-fair);color:var(--df-fair-ink);}
|
|
.dcf-calculator .df-zone-badge[data-zone=高估] {background:var(--df-high);color:var(--df-high-ink);}
|
|
.dcf-calculator .df-price-controls {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:16px;margin-top:14px;}
|
|
.dcf-calculator .df-price-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0;}
|
|
.dcf-calculator .df-interval-fields {min-width:0;}
|
|
.dcf-calculator .df-price-chart {width:100%;min-width:0;height:180px;overflow:hidden;}
|
|
.dcf-calculator .df-zone-keys {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
|
|
.dcf-calculator .df-zone-key {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px;padding:8px 10px;background:var(--df-field);border-radius:5px;font-size:11px;}
|
|
.dcf-calculator .df-zone-key strong {font-size:11px;}
|
|
.dcf-calculator .df-zone-dot {display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--df-good);}
|
|
.dcf-calculator .df-zone-key:nth-child(2) .df-zone-dot {background:var(--df-fair-ink);}
|
|
.dcf-calculator .df-zone-key:nth-child(3) .df-zone-dot {background:var(--df-high-ink);}
|
|
.dcf-calculator .df-market-message,.dcf-calculator .df-interval-note {margin-top:12px;}
|
|
.dcf-calculator .df-market .df-error {margin-top:12px;}
|
|
.dcf-calculator .df-layout {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;gap:20px;}
|
|
.dcf-calculator .df-parameter-group {border-top:1px solid var(--df-line);padding-top:18px;margin-top:18px;}
|
|
.dcf-calculator .df-parameter-group .df-section-head {margin-bottom:12px;}
|
|
.dcf-calculator .df-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
|
|
.dcf-calculator .df-parameter-group>h4 {margin-bottom:12px;}
|
|
.dcf-calculator .df-parameter-group>.df-muted {margin-top:10px;}
|
|
.dcf-calculator .df-quiet-button {border:0;background:transparent;padding:2px 0;}
|
|
.dcf-calculator .df-stages {display:grid;gap:8px;}
|
|
.dcf-calculator .df-stage-row {display:grid;grid-template-columns:minmax(55px,1fr) 65px minmax(70px,1fr) 22px;align-items:center;gap:8px;padding:10px;background:var(--df-field);border:1px solid var(--df-line);border-radius:6px;}
|
|
.dcf-calculator .df-stage-row input {height:34px;padding:6px;background:var(--df-paper);}
|
|
.dcf-calculator .df-stage-row button {padding:2px;border:0;background:transparent;color:var(--df-muted);font-size:17px;}
|
|
.dcf-calculator .df-stage-name {min-width:0;font-size:12px;}
|
|
.dcf-calculator .df-stage-name small {display:block;font-size:11px;color:var(--df-muted);}
|
|
.dcf-calculator .df-stage-key {font-size:11px;color:var(--df-muted);}
|
|
.dcf-calculator .df-total {margin-top:10px;}
|
|
.dcf-calculator .df-result-line {display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;font-size:12px;}
|
|
.dcf-calculator .df-result-line>* {min-width:0;overflow-wrap:anywhere;}
|
|
.dcf-calculator .df-result-line b {text-align:right;}
|
|
.dcf-calculator .df-sum {border-top:1px solid var(--df-line);margin:6px 0;}
|
|
.dcf-calculator .df-equity {border-top:1px solid var(--df-line);margin-top:7px;padding-top:13px;}
|
|
.dcf-calculator .df-equity b {font-size:22px;}
|
|
.dcf-calculator .df-shares-note {text-align:right;}
|
|
.dcf-calculator .df-value-per-share {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px;margin-top:14px;background:var(--df-soft);border-radius:6px;font-size:12px;}
|
|
.dcf-calculator .df-value-per-share strong {font-size:24px;color:var(--df-accent);overflow-wrap:anywhere;}
|
|
.dcf-calculator .df-value-per-share small {font-size:11px;}
|
|
.dcf-calculator .df-composition {display:flex;gap:2px;height:7px;margin:23px 0 8px;border-radius:4px;overflow:hidden;background:var(--df-line);}
|
|
.dcf-calculator .df-segment-a {background:var(--df-accent);}
|
|
.dcf-calculator .df-segment-b {background:var(--df-chart-secondary);}
|
|
.dcf-calculator .df-legend {display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--df-muted);}
|
|
.dcf-calculator .df-terminal-note {padding:12px;margin-top:18px;background:var(--df-field);border-radius:6px;font-size:11px;color:var(--df-muted);}
|
|
.dcf-calculator .df-cashflow-chart {height:300px;width:100%;min-width:0;}
|
|
.dcf-calculator .df-cashflow-section h3 {margin-bottom:4px;}
|
|
.dcf-calculator .df-table-section {margin-top:16px;padding-top:14px;border-top:1px solid var(--df-line);}
|
|
.dcf-calculator .df-table-wrap {max-width:100%;margin-top:12px;overflow-x:auto;}
|
|
.dcf-calculator table {border-collapse:collapse;white-space:nowrap;font-variant-numeric:tabular-nums;width:100%;font-size:11px;}
|
|
.dcf-calculator th,.dcf-calculator td {text-align:right;border-bottom:1px solid var(--df-line);padding:10px 8px;}
|
|
.dcf-calculator th {color:var(--df-muted);background:var(--df-field);font-weight:400;}
|
|
.dcf-calculator th:first-child,.dcf-calculator td:first-child {text-align:left;}
|
|
.dcf-calculator .df-foot {display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--df-muted);font-size:11px;}
|
|
.dcf-calculator .df-error {color:var(--df-error);background:var(--df-error-bg);border:1px solid var(--df-high);border-radius:6px;padding:12px 14px;font-size:12px;}
|
|
.dcf-calculator .df-warning {color:var(--df-fair-ink);background:var(--df-warning-bg);border-radius:6px;padding:12px 14px;font-size:12px;}
|
|
/* Keep the existing three-second dwell behavior for company deletion. */
|
|
.dcf-calculator .df-company-buttons .df-company-delete {position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid var(--df-accent-line);border-radius:50%;background:var(--df-paper);color:var(--df-muted);font-size:16px;line-height:1;z-index:1;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s;}
|
|
.dcf-calculator .df-company-chip:is(:hover,:focus-within) .df-company-delete {opacity:1;visibility:visible;transition:opacity .15s 3s,visibility 0s 3s;}
|
|
.dcf-calculator .df-company-buttons .df-company-delete:hover {color:var(--df-error);border-color:var(--df-error);background:var(--df-error-bg);}
|
|
.dcf-calculator .df-company-empty {padding:28px 20px;border:1px dashed var(--df-line);border-radius:10px;color:var(--df-muted);text-align:center;}
|
|
.dcf-calculator[data-empty=true] :is(.df-overview,.df-market,.df-layout,.df-cashflow-section,.df-foot,.df-error,.df-warning) {display:none!important;}
|
|
@media (width>=1500px) {.tools-layout .content:has(.dcf-calculator) {max-width:1280px;}}
|
|
@media (width<=1100px) {
|
|
.dcf-calculator {padding:20px;gap:18px;}
|
|
.dcf-calculator .df-stat {padding:16px 12px;}
|
|
.dcf-calculator .df-stat-value {font-size:27px;}
|
|
.dcf-calculator .df-stat-position .df-stat-value {font-size:20px;min-height:38px;}
|
|
.dcf-calculator .df-layout {gap:16px;}
|
|
.dcf-calculator :is(.df-form,.df-results) {padding:16px;}
|
|
.dcf-calculator .df-stage-row {grid-template-columns:minmax(48px,1fr) 52px minmax(65px,1fr) 20px;gap:6px;padding:8px;}
|
|
.dcf-calculator .df-save-status {width:100%;margin-left:0;}
|
|
}
|
|
@media (width<=950px) {
|
|
.dcf-calculator .df-layout {grid-template-columns:1fr;}
|
|
.dcf-calculator .df-overview {grid-template-columns:repeat(2,minmax(0,1fr));}
|
|
.dcf-calculator .df-stat:nth-child(3) {border-left:0;border-top:1px solid var(--df-line);}
|
|
.dcf-calculator .df-stat:nth-child(4) {border-top:1px solid var(--df-line);}
|
|
}
|
|
@media (width<=680px) {
|
|
.dcf-calculator {padding:16px;gap:16px;border-radius:10px;}
|
|
.dcf-calculator h2 {font-size:23px;}
|
|
.dcf-calculator .df-header-mark {display:none;}
|
|
.dcf-calculator .df-header-actions {gap:6px;}
|
|
.dcf-calculator .df-market {padding:16px;}
|
|
.dcf-calculator .df-price-controls {grid-template-columns:minmax(0,1fr);gap:12px;}
|
|
.dcf-calculator .df-zone-keys {gap:8px;}
|
|
.dcf-calculator .df-zone-key {display:grid;padding:8px;gap:4px;}
|
|
.dcf-calculator .df-cashflow-section {padding:16px;}
|
|
.dcf-calculator .df-cashflow-chart {height:260px;}
|
|
}
|
|
@media (width<=460px) {
|
|
.dcf-calculator {padding:12px;}
|
|
.dcf-calculator input,.dcf-calculator select {font-size:16px;}
|
|
.dcf-calculator .df-fields {gap:10px;}
|
|
.dcf-calculator .df-stage-row {grid-template-columns:minmax(42px,1fr) 48px minmax(56px,1fr) 20px;gap:5px;padding:7px;}
|
|
.dcf-calculator .df-stage-name {font-size:11px;}
|
|
.dcf-calculator .df-stage-name small {font-size:11px;}
|
|
.dcf-calculator .df-stat-value {font-size:25px;}
|
|
.dcf-calculator .df-stat-position .df-stat-value {font-size:20px;min-height:35px;}
|
|
}
|
|
@media (hover:none) {.dcf-calculator .df-company-buttons .df-company-delete {opacity:1;visibility:visible;transition:none;}}
|
|
@media (pointer:coarse) {
|
|
.dcf-calculator input,.dcf-calculator select {min-height:44px;height:auto;font-size:16px;}
|
|
.dcf-calculator button:not(.df-company-delete) {min-height:44px;}
|
|
.dcf-calculator .df-help-trigger {width:44px;}
|
|
}
|
|
@media (prefers-reduced-motion:reduce) {.dcf-calculator * {transition:none!important;}}
|
|
@media (prefers-reduced-motion:reduce) and (hover:hover) {.dcf-calculator .df-company-chip:is(:hover,:focus-within) .df-company-delete {transition:visibility 0s 3s!important;}}
|
|
|
|
/* Concept documentation dialog. */
|
|
.dcf-calculator .df-help-dialog {
|
|
width:min(860px,calc(100% - 32px));
|
|
max-width:none;
|
|
max-height:calc(100vh - 32px);
|
|
max-height:calc(100dvh - 32px);
|
|
margin:auto;
|
|
padding:0;
|
|
border:1px solid var(--df-line);
|
|
border-radius:12px;
|
|
background:var(--df-paper);
|
|
color:var(--df-ink);
|
|
box-shadow:0 18px 60px rgb(51 51 51 / 15%);
|
|
overflow:hidden}
|
|
.dcf-calculator .df-help-dialog[open] {
|
|
display:flex;
|
|
flex-direction:column}
|
|
.dcf-calculator .df-help-dialog::backdrop {
|
|
background:rgb(51 51 51 / 35%)}
|
|
.dcf-calculator .df-help-head {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:16px;
|
|
padding:20px 24px 16px;
|
|
border-bottom:1px solid var(--df-line)}
|
|
.dcf-calculator .df-help-head h2 {
|
|
margin:0 0 4px;
|
|
font-size:20px;
|
|
letter-spacing:0}
|
|
.dcf-calculator .df-help-close {
|
|
flex-shrink:0;
|
|
width:32px;
|
|
height:32px;
|
|
padding:0;
|
|
font-size:22px;
|
|
line-height:1;
|
|
color:var(--df-muted)}
|
|
.dcf-calculator .df-help-nav {
|
|
display:flex;
|
|
flex-shrink:0;
|
|
flex-wrap:wrap;
|
|
gap:8px;
|
|
padding:12px 24px;
|
|
border-bottom:1px solid var(--df-line);
|
|
background:var(--df-field)}
|
|
.dcf-calculator .df-help-body {
|
|
min-height:0;
|
|
overflow-y:auto;
|
|
overscroll-behavior:contain;
|
|
padding:20px 24px 24px;
|
|
font-size:13px;
|
|
line-height:1.85}
|
|
.dcf-calculator .df-help-lead {
|
|
padding:14px 16px;
|
|
background:var(--df-soft);
|
|
border-radius:7px}
|
|
.dcf-calculator .df-help-body section {
|
|
padding-top:24px;
|
|
outline-offset:-2px}
|
|
.dcf-calculator .df-help-body h3 {
|
|
margin-bottom:10px;
|
|
color:var(--df-accent);
|
|
font-size:15px}
|
|
.dcf-calculator .df-help-body section p+p {
|
|
margin-top:10px}
|
|
.dcf-calculator .df-help-formula {
|
|
margin:12px 0;
|
|
padding:12px 14px;
|
|
border-left:3px solid var(--df-accent-line);
|
|
background:var(--df-field);
|
|
font-variant-numeric:tabular-nums;
|
|
overflow-wrap:anywhere}
|
|
.dcf-calculator .df-help-table {
|
|
margin:12px 0;
|
|
overflow-x:auto}
|
|
.dcf-calculator .df-help-table table {
|
|
font-size:12px;
|
|
white-space:normal}
|
|
.dcf-calculator .df-help-table :is(th,td) {
|
|
padding:10px;
|
|
text-align:left}
|
|
.dcf-calculator .df-help-source {
|
|
margin-top:24px;
|
|
padding-top:14px;
|
|
border-top:1px solid var(--df-line);
|
|
font-size:11px;
|
|
color:var(--df-muted)}
|
|
.dcf-calculator .df-help-source a {
|
|
color:var(--df-accent);
|
|
text-underline-offset:3px}
|
|
@media (width<=680px) {
|
|
.dcf-calculator .df-header-actions {gap:6px}
|
|
.dcf-calculator .df-help-head {padding:16px}
|
|
.dcf-calculator .df-help-nav {padding:12px 16px;gap:6px}
|
|
.dcf-calculator .df-help-body {padding:16px}
|
|
.dcf-calculator .df-help-table :is(th,td) {padding:8px 6px}
|
|
}
|