Radius/add network structure
This commit is contained in:
Luca Haid
@@ -0,0 +1,943 @@
|
||||
/**
|
||||
* TT-Core Component Library Styles
|
||||
* Modern, reusable styling for all TT-Core components
|
||||
*/
|
||||
|
||||
/* ===== CSS Variables ===== */
|
||||
:root {
|
||||
--tt-brand-blue: #005384;
|
||||
--tt-bg: #ffffff;
|
||||
--tt-card: #ffffff;
|
||||
--tt-card-2: #f8fafc;
|
||||
--tt-muted: #667085;
|
||||
--tt-text: #0b1320;
|
||||
--tt-accent: var(--tt-brand-blue);
|
||||
--tt-accent-2: #1e88c9;
|
||||
--tt-ok: #0f9d58;
|
||||
--tt-bad: #e03131;
|
||||
--tt-ring: rgba(0,83,132,.20);
|
||||
--tt-border: #e6e9ef;
|
||||
--tt-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--tt-radius: 10px;
|
||||
--tt-radius-pill: 999px;
|
||||
--tt-shadow: 0 8px 24px rgba(0, 83, 132, .08);
|
||||
--tt-line-offset: 32px;
|
||||
}
|
||||
|
||||
/* ===== Base Scoping ===== */
|
||||
.tt-scope a.link {
|
||||
color: var(--tt-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color .2s ease;
|
||||
}
|
||||
|
||||
.tt-scope a.link:hover {
|
||||
color: var(--tt-accent-2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== Utility Classes ===== */
|
||||
.tt-scope .muted { color: var(--tt-muted); }
|
||||
.tt-scope .small { font-size: 12px; }
|
||||
.tt-scope .mini { font-size: 11px; }
|
||||
.tt-scope .mono { font-family: var(--tt-mono); }
|
||||
.tt-scope .center { text-align: center; }
|
||||
.tt-scope .nowrap { white-space: nowrap; }
|
||||
.tt-scope .p-sm { padding: .5rem; }
|
||||
.tt-scope .p-lg { padding: 1.25rem; }
|
||||
.tt-scope .mt-2 { margin-top: .5rem; }
|
||||
.tt-scope .mt-3 { margin-top: .75rem; }
|
||||
.tt-scope .mt-between { margin-top: 12px; }
|
||||
|
||||
/* ===== Grid & Layout ===== */
|
||||
.tt-scope .grid { display: grid; }
|
||||
.tt-scope .g-2 { gap: 8px; }
|
||||
.tt-scope .g-3 { gap: 12px; }
|
||||
.tt-scope .g-4 { gap: 16px; }
|
||||
.tt-scope .g-6 { gap: 24px; }
|
||||
.tt-scope .cols-1 { grid-template-columns: 1fr; }
|
||||
.tt-scope .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.tt-scope .cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
.tt-scope .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
|
||||
.tt-scope .cluster { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
||||
|
||||
/* ===== Typography ===== */
|
||||
.tt-scope .h4 { font-size: 18px; font-weight: 800; letter-spacing: .2px; user-select: none; }
|
||||
.tt-scope .h5 { font-size: 16px; font-weight: 800; letter-spacing: .2px; user-select: none; }
|
||||
|
||||
/* ===== Cards ===== */
|
||||
.tt-scope .card {
|
||||
background: var(--tt-card);
|
||||
border: 1px solid var(--tt-border);
|
||||
border-radius: var(--tt-radius);
|
||||
box-shadow: var(--tt-shadow);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.tt-scope .tab-btn,
|
||||
.tt-scope .primary-btn,
|
||||
.tt-scope .ghost-btn,
|
||||
.tt-scope .icon-btn,
|
||||
.tt-scope .link-btn,
|
||||
.tt-scope .danger-btn {
|
||||
appearance: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tt-scope .tab-btn {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--tt-radius-pill);
|
||||
background: #f4f7fb;
|
||||
color: var(--tt-text);
|
||||
border: 1px solid var(--tt-border);
|
||||
}
|
||||
|
||||
.tt-scope .tab-btn.active,
|
||||
.tt-scope .tab-btn:hover {
|
||||
background: #eef6fb;
|
||||
border-color: #d6e8f5;
|
||||
box-shadow: 0 0 0 4px var(--tt-ring);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.tt-scope .tab-btn:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
background: #f4f7fb;
|
||||
border-color: var(--tt-border);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.tt-scope .primary-btn {
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--tt-radius);
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--tt-accent), var(--tt-accent-2));
|
||||
box-shadow: 0 6px 18px rgba(0,83,132,.25);
|
||||
height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tt-scope .primary-btn:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tt-scope .ghost-btn {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--tt-radius);
|
||||
color: var(--tt-accent);
|
||||
background: #f8fbff;
|
||||
border: 1px dashed #cfe4f3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.tt-scope .danger-btn {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--tt-radius);
|
||||
color: #c92a2a;
|
||||
background: #fff5f5;
|
||||
border: 1px dashed #ffc9c9;
|
||||
opacity: .9;
|
||||
transition: opacity .2s ease-in-out, transform .1s ease-in-out;
|
||||
}
|
||||
|
||||
.tt-scope .icon-btn {
|
||||
background: transparent;
|
||||
color: var(--tt-muted);
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tt-scope .icon-btn.sm {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.tt-scope .icon-btn:hover {
|
||||
color: var(--tt-text);
|
||||
background: #f2f6fa;
|
||||
}
|
||||
|
||||
.tt-scope .link-btn {
|
||||
background: transparent;
|
||||
color: var(--tt-accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tt-scope .primary-btn:not(:disabled):hover,
|
||||
.tt-scope .ghost-btn:not(:disabled):hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tt-scope .primary-btn:not(:disabled):hover {
|
||||
box-shadow: 0 8px 22px rgba(0,83,132,.3);
|
||||
}
|
||||
|
||||
/* ===== Input Fields ===== */
|
||||
.tt-scope .input-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tt-scope .ri {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 8px 38px 8px 36px;
|
||||
border-radius: var(--tt-radius);
|
||||
border: 1px solid var(--tt-border);
|
||||
background: #fff;
|
||||
color: var(--tt-text);
|
||||
transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
|
||||
}
|
||||
|
||||
.tt-scope .ri:hover:not(:focus) {
|
||||
border-color: #c4d1de;
|
||||
}
|
||||
|
||||
.tt-scope .ri:focus {
|
||||
border-color: #bcd9ee;
|
||||
box-shadow: 0 0 0 5px var(--tt-ring);
|
||||
outline: none;
|
||||
background: #fbfeff;
|
||||
}
|
||||
|
||||
.tt-scope .ri::placeholder {
|
||||
color: #9aa6b2;
|
||||
}
|
||||
|
||||
.tt-scope .input-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #7997ad;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tt-scope .btn-clear {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #5a7891;
|
||||
cursor: pointer;
|
||||
transition: all .2s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tt-scope .btn-clear:not(:disabled):hover {
|
||||
background: #e8f2f9;
|
||||
color: #2b5c7e;
|
||||
}
|
||||
|
||||
/* ===== Tables ===== */
|
||||
.tt-scope .table-wrap {
|
||||
overflow: auto;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--tt-border);
|
||||
background: var(--tt-card-2);
|
||||
max-height: 65vh;
|
||||
}
|
||||
|
||||
.tt-scope .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
.tt-scope .table-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
|
||||
.tt-scope .table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #f1f5f9; }
|
||||
.tt-scope .table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
|
||||
.tt-scope .tt-table {
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
table-layout: fixed;
|
||||
margin-bottom: unset !important;
|
||||
}
|
||||
|
||||
.tt-scope .tt-table.no-min-width {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.tt-scope .tt-table th,
|
||||
.tt-scope .tt-table td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tt-scope .tt-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f6f9fc;
|
||||
font-size: 12px;
|
||||
color: #344054;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
user-select: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tt-scope .tt-table.compact th,
|
||||
.tt-scope .tt-table.compact td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.tt-scope .tt-table.ultra-compact th,
|
||||
.tt-scope .tt-table.ultra-compact td {
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tt-scope .table-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 48px 24px;
|
||||
border: 1px solid var(--tt-border);
|
||||
border-radius: 12px;
|
||||
background: var(--tt-card-2);
|
||||
text-align: center;
|
||||
color: var(--tt-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tt-scope .table-placeholder i {
|
||||
font-size: 32px;
|
||||
color: var(--tt-brand-blue);
|
||||
}
|
||||
|
||||
.tt-scope .results-summary {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--tt-border);
|
||||
border-top: none;
|
||||
background: #f6f9fc;
|
||||
font-size: 13px;
|
||||
color: var(--tt-muted);
|
||||
border-radius: 0 0 12px 12px;
|
||||
min-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== Skeleton Loaders ===== */
|
||||
.tt-scope .skeleton-line {
|
||||
--h: 12px;
|
||||
height: var(--h);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #eaeef3, #f3f6fa, #eaeef3);
|
||||
background-size: 300% 100%;
|
||||
animation: shimmer 1.1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 0% 0; }
|
||||
100% { background-position: 100% 0; }
|
||||
}
|
||||
|
||||
.tt-scope .btn-loader {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #d5e7f4;
|
||||
border-top-color: var(--tt-brand-blue);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: spin .9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ===== Progress Bar ===== */
|
||||
.tt-scope .progress-bar {
|
||||
height: 8px;
|
||||
background: #eef4f8;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2ebf3;
|
||||
}
|
||||
|
||||
.tt-scope .progress-bar .bar {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: linear-gradient(90deg, var(--tt-accent), var(--tt-accent-2));
|
||||
transition: width .2s ease;
|
||||
}
|
||||
|
||||
/* ===== Modal / Dialog ===== */
|
||||
.tt-scope.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.tt-scope .modal-card {
|
||||
width: min(780px, 92vw);
|
||||
max-height: 88vh;
|
||||
overflow: auto;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--tt-border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tt-scope .modal-card-wide {
|
||||
width: min(1100px, 92vw);
|
||||
}
|
||||
|
||||
.tt-scope .modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--tt-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tt-scope .modal-title {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tt-scope .modal-body {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
/* ===== Autocomplete ===== */
|
||||
.tt-scope .ac-root {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tt-scope .ac-root .ri {
|
||||
padding: 8px 38px 8px 75px;
|
||||
}
|
||||
|
||||
.tt-scope .logo-switcher {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
height: calc(100% - 2px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 4px 0 8px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid var(--tt-border);
|
||||
transition: background-color .2s ease;
|
||||
border-radius: 9px 0 0 9px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tt-scope .logo-switcher:hover {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.tt-scope .input-icon-logo {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tt-scope .switcher-caret {
|
||||
font-size: 11px;
|
||||
color: var(--tt-muted);
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
.tt-scope .logo-switcher.is-open .switcher-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tt-scope .logo-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border: 1px solid var(--tt-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--tt-shadow);
|
||||
z-index: 25;
|
||||
padding: 6px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.tt-scope .logo-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tt-scope .logo-option:hover {
|
||||
background-color: #f3f8fc;
|
||||
}
|
||||
|
||||
.tt-scope .logo-option img {
|
||||
height: 18px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tt-scope .ac-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: auto;
|
||||
margin-top: 6px;
|
||||
z-index: 20;
|
||||
background: #fff;
|
||||
border: 1px solid var(--tt-border);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--tt-shadow);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.tt-scope .ac-panel.wide,
|
||||
.tt-scope [data-wide="1"] .ac-panel {
|
||||
left: -6px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.tt-scope .ac-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 260px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tt-scope .ac-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform .1s ease, background-color .1s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tt-scope .ac-item:hover,
|
||||
.tt-scope .ac-item.is-active {
|
||||
background: #f3f8fc;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.tt-scope .ac-empty {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* ===== File Dropzone ===== */
|
||||
.tt-scope .file-drop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px dashed #cfe4f3;
|
||||
border-radius: var(--tt-radius);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background: #f8fbff;
|
||||
cursor: pointer;
|
||||
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.tt-scope .file-drop.is-dragover {
|
||||
transform: scale(1.02);
|
||||
border-color: var(--tt-accent);
|
||||
background-color: #f0f8ff;
|
||||
box-shadow: 0 0 0 5px var(--tt-ring);
|
||||
}
|
||||
|
||||
.tt-scope .file-cta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #365972;
|
||||
}
|
||||
|
||||
/* ===== Status Chip ===== */
|
||||
.tt-scope .status-chip-wrap {
|
||||
min-height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.tt-scope .status-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--tt-radius);
|
||||
font-size: 12px;
|
||||
font-family: var(--tt-mono);
|
||||
border: 1px solid var(--tt-border);
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tt-scope .status-chip.is-clickable {
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
|
||||
.tt-scope .status-chip.is-clickable:hover {
|
||||
background-color: #f3f8fc;
|
||||
}
|
||||
|
||||
.tt-scope .status-chip.on {
|
||||
box-shadow: 0 0 0 3px rgba(15,157,88,.08);
|
||||
}
|
||||
|
||||
.tt-scope .status-chip.off {
|
||||
box-shadow: 0 0 0 3px rgba(224,49,49,.08);
|
||||
}
|
||||
|
||||
.tt-scope .status-chip .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
color: inherit;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tt-scope .status-chip.on .dot {
|
||||
background: var(--tt-ok);
|
||||
}
|
||||
|
||||
.tt-scope .status-chip.off .dot {
|
||||
background: var(--tt-bad);
|
||||
}
|
||||
|
||||
.tt-scope .status-chip .ip {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tt-scope .status-chip.skeleton {
|
||||
background: #f8fafc;
|
||||
color: #d1d9e4;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== Animations ===== */
|
||||
.tt-scope .row-fade-in {
|
||||
animation: rowIn .22s ease;
|
||||
}
|
||||
|
||||
@keyframes rowIn {
|
||||
from { opacity: 0; transform: translateY(2px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
.tt-scope .fade-enter-active,
|
||||
.tt-scope .fade-leave-active {
|
||||
transition: opacity .14s ease;
|
||||
}
|
||||
|
||||
.tt-scope .fade-enter,
|
||||
.tt-scope .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tt-scope .pop {
|
||||
animation: pop .16s ease;
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
from { transform: scale(.98); }
|
||||
to { transform: none; }
|
||||
}
|
||||
|
||||
.tt-scope .ac-pop-enter-active,
|
||||
.tt-scope .ac-pop-leave-active {
|
||||
transition: opacity .12s ease, transform .12s ease;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.tt-scope .ac-pop-enter,
|
||||
.tt-scope .ac-pop-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(.98);
|
||||
}
|
||||
|
||||
.tt-scope .animated-hourglass {
|
||||
animation: hourglass-turn 2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes hourglass-turn {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ===== Tooltips ===== */
|
||||
.tt-scope [data-tooltip] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tt-scope [data-tooltip]::before,
|
||||
.tt-scope [data-tooltip]::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all .18s ease-in-out;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.tt-scope [data-tooltip]::before {
|
||||
content: '';
|
||||
bottom: 100%;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #0b1320;
|
||||
}
|
||||
|
||||
.tt-scope [data-tooltip]::after {
|
||||
content: attr(data-tooltip);
|
||||
bottom: calc(100% + 5px);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
background: #0b1320;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tt-scope [data-tooltip]:hover::before,
|
||||
.tt-scope [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
}
|
||||
|
||||
/* ===== Copy Feedback ===== */
|
||||
@keyframes copy-feedback-pop {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.tt-scope .icon-btn .check-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tt-scope .icon-btn.is-copied,
|
||||
.tt-scope .icon-btn.is-copied:hover {
|
||||
background-color: #eaf7ef;
|
||||
color: var(--tt-ok);
|
||||
animation: copy-feedback-pop 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.tt-scope .icon-btn.is-copied .copy-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tt-scope .icon-btn.is-copied .check-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ===== View Switcher ===== */
|
||||
.tt-scope .view-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tt-scope .view-select-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.tt-scope .view-tabs {
|
||||
display: none;
|
||||
}
|
||||
.tt-scope .view-select-wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Select Dropdown ===== */
|
||||
.tt-scope .select select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--tt-radius);
|
||||
border: 1px solid var(--tt-border);
|
||||
background: #fff;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right .5rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
/* ===== Key-Value Redesign Layout ===== */
|
||||
.tt-scope .kv-redesign {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tt-scope .kv-redesign .kv-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 12px 4px;
|
||||
border-bottom: 1px solid var(--tt-border);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.tt-scope .kv-redesign .kv-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tt-scope .kv-redesign .kv-label {
|
||||
color: var(--tt-muted);
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.tt-scope .kv-redesign .kv-value {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tt-scope .kv-redesign .chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--tt-border);
|
||||
}
|
||||
|
||||
.tt-scope .kv-redesign .chip.ok {
|
||||
background: #eaf7ef;
|
||||
color: #206a42;
|
||||
border-color: #c9e6d8;
|
||||
}
|
||||
|
||||
.tt-scope .kv-redesign .chip.bad {
|
||||
background: #fdecec;
|
||||
color: #8a1d1d;
|
||||
border-color: #f6d2d2;
|
||||
}
|
||||
|
||||
/* ===== Info Card (TtInfoCard component) ===== */
|
||||
.tt-scope .router-info-card {
|
||||
background: var(--tt-card-2);
|
||||
border: 1px solid var(--tt-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
transition: all .18s ease;
|
||||
min-height: 68px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tt-scope .router-info-card:hover {
|
||||
border-color: #c4d1de;
|
||||
box-shadow: 0 2px 8px rgba(0, 83, 132, .08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tt-scope .info-card-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 10px;
|
||||
color: var(--tt-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
user-select: none;
|
||||
min-height: 15px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tt-scope .info-card-label i {
|
||||
font-size: 11px;
|
||||
color: var(--tt-accent);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tt-scope .info-card-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
min-height: 29px;
|
||||
}
|
||||
|
||||
.tt-scope .info-card-value code {
|
||||
font-family: var(--tt-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--tt-text);
|
||||
background: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e6e9ef;
|
||||
flex-grow: 1;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tt-scope .info-card-value .icon-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ===== Responsive Grid ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tt-scope .cols-4 {
|
||||
grid-template-columns: repeat(2, minmax(0,1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.tt-scope .cols-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user