248 lines
21 KiB
CSS
248 lines
21 KiB
CSS
/* Customer workspace: navigation, welcome, conversation and composer. */
|
|
body { padding: 20px; height: 100dvh; overflow: hidden; }
|
|
.chat-container {
|
|
display: flex; width: min(1440px, 100%); height: 100%; margin: auto;
|
|
overflow: hidden; position: relative; border: 1px solid var(--border);
|
|
border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
|
|
}
|
|
.left-panel {
|
|
width: 248px; min-width: 0; flex-shrink: 0; display: flex; flex-direction: column;
|
|
padding: 28px 18px 18px; background: var(--surface-soft); border-right: 1px solid var(--border);
|
|
transition: width .2s, padding .2s, transform .2s; overflow: hidden;
|
|
}
|
|
.left-panel .brand { margin: 0 7px 30px; white-space: nowrap; }
|
|
.new-chat-btn {
|
|
min-height: 43px; width: 100%; padding: 10px; border: 0; border-radius: 9px;
|
|
color: white; background: var(--brand); font-weight: 600; white-space: nowrap;
|
|
box-shadow: 0 3px 8px rgba(49, 95, 213, .13);
|
|
}
|
|
.new-chat-btn::before { content: "+"; font-size: 20px; font-weight: 400; margin-right: 9px; line-height: 1; }
|
|
.new-chat-btn:hover { background: var(--brand-hover); }
|
|
.panel-title { color: var(--secondary); font-size: 12px; font-weight: 600; margin: 29px 9px 10px; letter-spacing: .05em; }
|
|
.history-search-wrap { position: relative; margin-bottom: 13px; }
|
|
.history-search-wrap svg { position: absolute; left: 12px; top: 12px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
|
|
.history-search {
|
|
width: 100%; height: 38px; padding: 8px 10px 8px 35px; border: 1px solid var(--border);
|
|
border-radius: 8px; color: var(--text); background: var(--surface); font-size: 12px;
|
|
}
|
|
.history-search::placeholder { color: var(--muted); }
|
|
.history-search:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
|
|
.history-wrap { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -5px; padding: 0 3px; }
|
|
.history-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 34px 5px; }
|
|
.history-empty::before { content: "◌"; display: block; font-size: 26px; color: var(--secondary); margin-bottom: 7px; }
|
|
.history-item { display: flex; align-items: center; gap: 3px; padding: 11px 9px; margin-bottom: 4px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; }
|
|
.history-item:hover { background: var(--surface); border-color: var(--border); }
|
|
.history-item.active { background: var(--brand-soft); border-color: var(--border); }
|
|
.history-text-wrap { flex: 1; min-width: 0; }
|
|
.history-title { color: var(--text); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.history-time { color: var(--muted); font-size: 10px; margin-top: 4px; }
|
|
.del-history-btn { flex-shrink: 0; width: 23px; height: 25px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 5px; font-size: 13px; opacity: 0; }
|
|
.history-item:hover .del-history-btn, .history-item:focus-within .del-history-btn { opacity: 1; }
|
|
.del-history-btn:hover { background: var(--surface-hover); color: var(--danger); }
|
|
.sidebar-footer { border-top: 1px solid var(--border); padding: 15px 7px 0; margin-top: 13px; white-space: nowrap; }
|
|
.clear-all-btn { border: 0; color: var(--muted); background: transparent; padding: 5px 0; font-size: 11px; }
|
|
.clear-all-btn:hover { color: var(--danger); }
|
|
.sidebar-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 10px; }
|
|
.left-panel-hide { width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; visibility: hidden; border: 0; }
|
|
.main-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
|
|
.chat-title { flex-shrink: 0; min-height: 75px; padding: 16px 26px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--border); background: var(--surface); z-index: 31; }
|
|
.header-copy { min-width: 0; flex: 1; }
|
|
.header-kicker { font-size: 10px; color: var(--muted); letter-spacing: .06em; margin-bottom: 3px; }
|
|
#app-title { display: block; color: var(--text); font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.toggle-divider { width: 32px; height: 32px; padding: 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--secondary); font-size: 0; }
|
|
.toggle-divider::before { content: "☰"; font-size: 16px; }
|
|
.toggle-divider:hover { background: var(--surface-soft); color: var(--brand-text); }
|
|
.title-actions { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
|
|
.theme-toggle { height: 32px; min-width: 33px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--secondary); background: var(--surface); font-size: 11px; }
|
|
.theme-toggle:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
|
|
.service-label { display: flex; gap: 7px; align-items: center; color: var(--secondary); font-size: 11px; margin-right: 8px; }
|
|
#chatDom { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; padding: 30px 38px 20px; }
|
|
.ai-welcome-card, .hot-questions, .recent-chat { max-width: 760px; margin-left: auto; margin-right: auto; }
|
|
.ai-welcome-card { padding-top: 22px; }
|
|
.ai-welcome-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
|
|
.ai-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: var(--brand-text); background: var(--brand-soft); margin-bottom: 18px; }
|
|
.ai-avatar svg { width: 27px; height: 27px; }
|
|
.welcome-eyebrow { color: var(--brand-text); font-size: 11px; font-weight: 600; letter-spacing: .06em; margin-bottom: 9px; }
|
|
.ai-welcome-card h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; letter-spacing: -.035em; font-weight: 650; color: var(--text); }
|
|
.ai-welcome-card p { color: var(--secondary); font-size: 13px; line-height: 1.8; margin-top: 10px; }
|
|
.suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 0; }
|
|
.suggest-item { display: flex; align-items: center; gap: 13px; min-height: 83px; padding: 17px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); text-align: left; width: 100%; }
|
|
.suggest-item:hover { border-color: #9ab6f5; background: var(--brand-soft); box-shadow: 0 3px 12px rgba(49, 95, 213, .04); }
|
|
.suggest-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--brand-text); background: var(--brand-soft); flex-shrink: 0; }
|
|
.suggest-icon svg { width: 19px; height: 19px; }
|
|
.suggest-copy { min-width: 0; }
|
|
.suggest-copy strong { display: block; font-size: 14px; font-weight: 600; }
|
|
.suggest-copy small { display: block; color: var(--secondary); font-size: 12px; margin-top: 4px; line-height: 1.6; }
|
|
.suggest-arrow { margin-left: auto; color: var(--muted); font-size: 17px; }
|
|
.hot-questions { margin-top: 24px; }
|
|
.hot-questions h4, .recent-chat h4 { color: var(--secondary); font-size: 12px; font-weight: 600; margin-bottom: 10px; }
|
|
.hot-capsule-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
|
|
.hot-capsule { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; padding: 6px 10px; color: var(--secondary); font-size: 11px; cursor: pointer; }
|
|
.hot-capsule:hover { color: var(--brand-text); background: var(--brand-soft); border-color: #a8bfef; }
|
|
.recent-chat { margin-top: 24px; }
|
|
#recentChatWrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
|
|
.recent-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 9px 0; font-size: 11px; color: var(--secondary); cursor: pointer; }
|
|
.recent-item > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.recent-item:hover { color: var(--brand-text); }
|
|
.recent-date { white-space: nowrap; color: var(--muted); font-size: 10px; }
|
|
.composer { flex-shrink: 0; align-self: center; width: min(820px, calc(100% - 76px)); padding: 12px 0 15px; background: var(--surface); }
|
|
.hot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
|
|
.human-session { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--brand-soft); color: var(--secondary); font-size: 12px; }
|
|
.human-session button { flex-shrink: 0; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--brand-text); font-size: 12px; }
|
|
.hot-bar-label { font-size: 10px; color: var(--muted); margin-right: 3px; }
|
|
.hot-bar .hot-capsule { border: 0; padding: 4px 8px; background: var(--surface-soft); font-size: 10px; }
|
|
.input-area { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 9px; background: var(--surface); box-shadow: 0 3px 15px rgba(28, 47, 80, .035); }
|
|
.input-area:focus-within { border-color: #7f9fe8; box-shadow: 0 0 0 3px var(--brand-soft); }
|
|
#upload-btn { flex: 0 0 36px; height: 38px; padding: 0; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--secondary); font-size: 18px; }
|
|
#upload-btn:hover { color: var(--brand-text); }
|
|
.service-rating { margin: 12px auto; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); text-align: center; color: var(--secondary); font-size: 13px; }
|
|
.rating-choices { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
|
|
.rating-choices button { padding: 3px 8px; background: transparent; border: 0; color: var(--muted); font-size: 28px; }
|
|
.rating-choices button.selected, .rating-choices button:focus-visible { color: #bd8610; }
|
|
.human-system-message { margin: 8px 0; text-align: center; color: var(--muted); font-size: 12px; }
|
|
#input-text { flex: 1; min-width: 0; min-height: 38px; max-height: 170px; padding: 9px 1px; border: 0; background: transparent; color: var(--text); font-size: 1em; line-height: 1.6; resize: none; outline: none; }
|
|
#input-text::placeholder { color: var(--muted); }
|
|
#send-button { min-width: 66px; height: 38px; flex-shrink: 0; padding: 0 15px; border: 0; border-radius: 8px; background: var(--brand); color: white; font-size: 12px; font-weight: 600; }
|
|
#send-button:hover { background: var(--brand-hover); }
|
|
#send-button.stop { background: var(--danger); }
|
|
.composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px 0; }
|
|
.disclaimer, .keyboard-hint { color: var(--muted); font-size: 11px; }
|
|
.keyboard-hint { white-space: nowrap; }
|
|
.msg-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 820px; margin: 0 auto 24px; }
|
|
.msg-row.user-line { align-items: flex-end; }
|
|
.message-author { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 4px; color: var(--secondary); font-size: 12px; font-weight: 600; }
|
|
.author-mark { width: 26px; height: 26px; display: grid; place-items: center; color: var(--brand-text); background: var(--brand-soft); border-radius: 8px; }
|
|
.author-mark svg { width: 16px; height: 16px; }
|
|
.user-message, .robot-message { max-width: 88%; border-radius: 12px; padding: 14px 17px; font-size: 1em; line-height: 1.8; overflow-wrap: anywhere; min-width: 0; }
|
|
.user-message { background: var(--brand); color: white; border-top-right-radius: 4px; white-space: pre-wrap; }
|
|
.robot-message { background: var(--surface-soft); border: 1px solid var(--border); color: var(--text); border-top-left-radius: 4px; }
|
|
.msg-time { color: var(--muted); font-size: 10px; padding: 0 3px; }
|
|
.robot-message p { margin: 4px 0; }
|
|
.robot-message ul, .robot-message ol { margin: 7px 0 7px 20px; padding: 0; }
|
|
.robot-message li { margin: 5px 0; }
|
|
.robot-message code { background: var(--surface-hover); color: var(--brand-text); padding: 2px 5px; border-radius: 4px; font-size: .93em; }
|
|
.msg-actions { display: flex; gap: 5px; flex-wrap: wrap; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--border); }
|
|
.msg-action-btn { min-height: 30px; border: 0; padding: 3px 8px; color: var(--secondary); background: transparent; border-radius: 5px; font-size: 12px; }
|
|
.msg-action-btn:hover, .msg-action-btn.voted { background: var(--surface-hover); color: var(--brand-text); }
|
|
.error-bubble { border-color: #e9b4bb; background: var(--danger-soft); color: var(--danger); }
|
|
.err-line { margin-bottom: 9px; }
|
|
.retry-btn { border: 1px solid currentColor; border-radius: 6px; padding: 4px 9px; color: inherit; background: transparent; font-size: 11px; }
|
|
.hint-bubble, .stopped-hint { color: var(--muted); font-size: 11px; }
|
|
.followup-list { display: grid; gap: 6px; margin-top: 13px; }
|
|
.followup-item { cursor: pointer; border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; color: var(--brand-text); font-size: 11px; background: var(--surface); }
|
|
.followup-item:hover { border-color: var(--brand); }
|
|
.robot-message.track-card { width: min(560px, 100%); max-width: 100%; background: var(--surface); padding: 16px 20px; }
|
|
.track-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }
|
|
.track-no { font-weight: 650; font-size: 17px; letter-spacing: .02em; }
|
|
.track-no span { display: block; font-size: 10px; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-bottom: 3px; }
|
|
.track-status { padding: 4px 10px; color: var(--success); background: var(--success-soft); border-radius: 6px; font-size: 12px; white-space: nowrap; }
|
|
.track-node { position: relative; padding: 0 0 12px 22px; font-size: 13px; color: var(--secondary); }
|
|
.track-node::before { content: ""; position: absolute; top: 12px; bottom: 0; left: 3px; width: 1px; background: var(--border); }
|
|
.track-node:last-child { padding-bottom: 0; }
|
|
.track-node:last-child::before { display: none; }
|
|
.track-dot { position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border: 2px solid var(--muted); border-radius: 50%; background: var(--surface); }
|
|
.track-node.active .track-dot { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
|
|
.track-node.active .track-text { color: var(--text); font-weight: 600; }
|
|
.track-text { display: grid; grid-template-columns: 126px 1fr; column-gap: 12px; line-height: 1.7; }
|
|
.track-event { font-size: 13px; font-weight: 500; }
|
|
.active .track-event { font-weight: 650; }
|
|
.track-time { color: var(--muted); font-size: 11px; font-weight: 400; padding-top: 2px; }
|
|
.track-place { grid-column: 2; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 2px; }
|
|
.track-expand { width: 100%; margin-top: 3px; padding: 7px 10px; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--brand-text); font-size: 12px; }
|
|
.track-expand:hover { background: var(--brand-soft); }
|
|
.track-card .msg-actions { margin-top: 8px; padding-top: 8px; }
|
|
.to-bottom { display: none; position: absolute; right: 24px; bottom: calc(var(--composer-height, 150px) + 12px); z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--secondary); box-shadow: var(--shadow); }
|
|
.to-bottom.show { display: block; }
|
|
.to-bottom:hover { color: var(--brand-text); border-color: var(--brand); }
|
|
.typing::after { content: " ···"; color: var(--brand-text); }
|
|
.sidebar-backdrop { display: none; }
|
|
.attachment-preview { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text); }
|
|
.attachment-preview img { height: 42px; width: 42px; object-fit: cover; border: 1px solid var(--border); border-radius: 7px; }
|
|
.attachment-file-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; font-size: 10px; font-weight: 650; border-radius: 7px; background: var(--brand-soft); color: var(--brand-text); }
|
|
.attachment-copy { flex: 1; min-width: 0; }
|
|
.attachment-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
|
|
.attachment-copy small { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
|
|
.attachment-remove { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; color: var(--secondary); background: transparent; font-size: 21px; }
|
|
.attachment-remove:hover { color: var(--danger); background: var(--danger-soft); }
|
|
.composer-status { font-size: 12px; color: var(--secondary); padding: 7px 3px 0; }
|
|
.composer-status.is-error { color: var(--danger); }
|
|
.message-image { display: block; max-width: min(240px, 100%); max-height: 320px; object-fit: contain; border-radius: 8px; }
|
|
.message-file { display: block; max-width: 100%; overflow-wrap: anywhere; color: inherit; padding: 6px 0; font-size: 13px; text-underline-offset: 3px; }
|
|
@media (min-width: 901px) and (max-height: 780px) {
|
|
#chatDom { padding-top: 22px; }
|
|
.ai-welcome-card { padding-top: 0; }
|
|
.ai-avatar { width: 42px; height: 42px; margin-bottom: 12px; }
|
|
.welcome-eyebrow { margin-bottom: 6px; }
|
|
.ai-welcome-card p { margin-top: 8px; }
|
|
.suggest-grid { margin-top: 20px; gap: 10px; }
|
|
.suggest-item { min-height: 72px; padding: 13px 16px; }
|
|
.hot-questions { margin-top: 18px; }
|
|
}
|
|
@media (min-width: 1500px) { #chatDom { padding-top: 48px; } .ai-welcome-card { padding-top: 35px; } }
|
|
@media (max-width: 1100px) {
|
|
body { padding: 12px; }
|
|
.left-panel { width: 220px; padding-left: 14px; padding-right: 14px; }
|
|
#chatDom { padding: 22px 25px; }
|
|
.composer { width: calc(100% - 50px); }
|
|
.service-label { display: none; }
|
|
.suggest-item { padding: 13px; gap: 10px; }
|
|
.suggest-copy small { font-size: 11px; }
|
|
}
|
|
@media (max-width: 900px) {
|
|
body { padding: 0; }
|
|
.chat-container { border: 0; border-radius: 0; height: 100dvh; }
|
|
.left-panel { position: absolute; left: 0; top: 72px; bottom: 0; width: 270px; max-width: 85vw; z-index: 30; box-shadow: 15px 0 40px rgba(20, 35, 60, .12); }
|
|
.left-panel .brand { display: none; }
|
|
.side-closed .left-panel { transform: translateX(-105%); visibility: hidden; pointer-events: none; }
|
|
.chat-container:not(.side-closed) .sidebar-backdrop { display: block; position: absolute; inset: 72px 0 0; border: 0; z-index: 20; background: rgba(16, 30, 52, .25); }
|
|
.main-chat { width: 100%; }
|
|
.chat-title { min-height: 72px; height: 72px; padding: 13px 18px; gap: 11px; }
|
|
#chatDom { padding: 24px 20px 15px; }
|
|
.ai-welcome-card { padding-top: 20px; }
|
|
.composer { width: calc(100% - 40px); }
|
|
.user-message, .robot-message { max-width: 94%; }
|
|
.del-history-btn { opacity: 1; }
|
|
}
|
|
@media (max-width: 520px) {
|
|
.header-kicker { font-size: 9px; }
|
|
#app-title { font-size: 13px; }
|
|
.chat-title { padding: 12px; gap: 8px; }
|
|
.title-actions { gap: 4px; }
|
|
.theme-toggle { padding: 0 6px; min-width: 29px; font-size: 10px; }
|
|
#font-toggle { display: none; }
|
|
#chatDom { padding: 20px 16px; }
|
|
.ai-avatar { display: none; }
|
|
.ai-welcome-card { padding-top: 12px; }
|
|
.ai-welcome-card h3 { font-size: 23px; }
|
|
.ai-welcome-card p { max-width: 300px; margin: 10px auto 0; font-size: 12px; }
|
|
.suggest-grid { gap: 9px; margin-top: 22px; }
|
|
.suggest-item { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 114px; padding: 13px; gap: 9px; }
|
|
.suggest-icon { width: 32px; height: 32px; border-radius: 8px; }
|
|
.suggest-copy strong { font-size: 13px; }
|
|
.suggest-copy small { font-size: 11px; }
|
|
.suggest-arrow { display: none; }
|
|
.hot-questions { margin-top: 22px; }
|
|
.hot-questions .hot-capsule-wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 3px; }
|
|
.hot-questions .hot-capsule { flex-shrink: 0; white-space: nowrap; }
|
|
.hot-capsule { font-size: 10px; padding: 6px 8px; }
|
|
#recentChatWrap { grid-template-columns: 1fr; gap: 0; }
|
|
.composer { width: calc(100% - 24px); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
|
|
.hot-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; margin-bottom: 8px; }
|
|
.hot-bar-label { display: none; }
|
|
.hot-bar .hot-capsule { white-space: nowrap; flex-shrink: 0; }
|
|
.input-area { gap: 7px; padding: 7px; }
|
|
#send-button { min-width: 57px; padding: 0 12px; }
|
|
#upload-btn { flex-basis: 36px; height: 42px; }
|
|
#input-text { font-size: 16px; }
|
|
#send-button { min-height: 42px; }
|
|
.attachment-remove { width: 40px; height: 40px; }
|
|
.keyboard-hint { display: none; }
|
|
.composer-footer { justify-content: center; padding-top: 7px; }
|
|
.disclaimer { font-size: 10px; }
|
|
.track-text { grid-template-columns: 1fr; gap: 2px; }
|
|
.track-place { grid-column: 1; }
|
|
.robot-message.track-card { padding: 16px; }
|
|
.track-no { font-size: 15px; }
|
|
.to-bottom { right: 15px; }
|
|
}
|