612 lines
10 KiB
Plaintext
612 lines
10 KiB
Plaintext
.feedback-page {
|
|
padding-top: 48rpx;
|
|
}
|
|
|
|
.feedback-form {
|
|
margin-top: 30rpx;
|
|
padding: 0;
|
|
}
|
|
|
|
.feedback-error-banner {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 16rpx;
|
|
border-color: rgba(209, 63, 58, 0.24);
|
|
background: #fff6f5;
|
|
}
|
|
|
|
.feedback-error-content {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 56rpx;
|
|
align-items: start;
|
|
width: 100%;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.feedback-error-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 10rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.feedback-error-actions-single {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.feedback-error-message {
|
|
display: block;
|
|
min-width: 0;
|
|
padding: 4rpx 0;
|
|
color: #9b2c27;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
line-height: 1.45;
|
|
word-break: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.feedback-error-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 56rpx;
|
|
min-width: 56rpx;
|
|
max-width: 56rpx;
|
|
height: 56rpx;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 12rpx;
|
|
background: transparent;
|
|
line-height: 1;
|
|
transition: transform 100ms ease-out, background-color 100ms ease-out;
|
|
}
|
|
|
|
.feedback-error-close::after {
|
|
border: 0;
|
|
}
|
|
|
|
.feedback-error-close:active {
|
|
transform: scale(0.94);
|
|
background: rgba(209, 63, 58, 0.08);
|
|
}
|
|
|
|
.feedback-error-copy,
|
|
.feedback-error-retry {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 62rpx;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 10rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
transition: transform 100ms ease-out, background-color 100ms ease-out;
|
|
}
|
|
|
|
.feedback-error-copy {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
padding: 0;
|
|
background: rgba(155, 44, 39, 0.08);
|
|
color: #9b2c27;
|
|
}
|
|
|
|
.feedback-error-retry {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
padding: 0;
|
|
background: #007aff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.feedback-error-copy::after,
|
|
.feedback-error-retry::after {
|
|
border: 0;
|
|
}
|
|
|
|
.feedback-error-retry[disabled] {
|
|
background: #7eb7f7;
|
|
color: #ffffff;
|
|
opacity: 1;
|
|
}
|
|
|
|
.feedback-error-copy:active,
|
|
.feedback-error-retry:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.feedback-error-copy:active {
|
|
background: rgba(155, 44, 39, 0.14);
|
|
}
|
|
|
|
.feedback-error-retry:active {
|
|
background: #006ee6;
|
|
}
|
|
|
|
.feedback-field,
|
|
.content-field {
|
|
padding: 24rpx;
|
|
background: transparent;
|
|
}
|
|
|
|
.feedback-field .form-label,
|
|
.feedback-field .form-value {
|
|
display: block;
|
|
}
|
|
|
|
.feedback-field .form-value {
|
|
margin-top: 10rpx;
|
|
color: #1c1c1e;
|
|
font-size: 30rpx;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.feedback-field + .feedback-field,
|
|
.content-field {
|
|
margin-top: 0;
|
|
border-top: 1rpx solid #e5e5ea;
|
|
}
|
|
|
|
.content-label-row,
|
|
.profiles-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.content-count {
|
|
color: #8e8e93;
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.content-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.content-clear-button,
|
|
.voice-record-text-button,
|
|
.voice-record-add-button {
|
|
width: auto;
|
|
min-width: 0;
|
|
height: 48rpx;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 23rpx;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.content-clear-button::after,
|
|
.voice-record-text-button::after,
|
|
.voice-record-add-button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.content-clear-button {
|
|
color: #b8322d;
|
|
}
|
|
|
|
.feedback-textarea {
|
|
width: 100%;
|
|
min-height: 280rpx;
|
|
margin-top: 16rpx;
|
|
padding: 18rpx;
|
|
border-radius: 12rpx;
|
|
background: #f1f3f6;
|
|
color: #1c1c1e;
|
|
font-size: 28rpx;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.voice-input-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.voice-button {
|
|
display: flex;
|
|
align-self: stretch;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12rpx;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
height: 84rpx;
|
|
margin: 0;
|
|
padding: 0 20rpx;
|
|
border: 0;
|
|
border-radius: 12rpx;
|
|
background: #eaf3ff;
|
|
color: #007aff;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.voice-button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.voice-button[disabled] {
|
|
background: #f1f3f6;
|
|
color: #aeaeb2;
|
|
opacity: 1;
|
|
}
|
|
|
|
.voice-button-recording,
|
|
.voice-button-recording[disabled] {
|
|
background: #fff0f0;
|
|
color: #d13f3a;
|
|
}
|
|
|
|
.voice-button:active {
|
|
transform: scale(0.98);
|
|
background: #dcecff;
|
|
}
|
|
|
|
.voice-button-recording:active {
|
|
background: #ffe2e1;
|
|
}
|
|
|
|
.voice-button-icon {
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.voice-state {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 40rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-width: 0;
|
|
color: #6e6e73;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.voice-status {
|
|
flex: 1;
|
|
overflow: visible;
|
|
line-height: 1.45;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.voice-state-actionable {
|
|
min-height: 64rpx;
|
|
padding: 14rpx 16rpx;
|
|
border: 1rpx solid #e5e5ea;
|
|
border-radius: 12rpx;
|
|
background: #f7f7f8;
|
|
transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
|
|
.voice-state-actionable:active {
|
|
transform: scale(0.99);
|
|
background: #ededf0;
|
|
}
|
|
|
|
.voice-state-arrow {
|
|
flex: none;
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
margin: -6rpx 6rpx 0 14rpx;
|
|
border-right: 3rpx solid #8e8e93;
|
|
border-bottom: 3rpx solid #8e8e93;
|
|
transform: rotate(45deg);
|
|
transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
|
|
.voice-state-arrow-expanded {
|
|
margin-top: 6rpx;
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.voice-record-list {
|
|
width: 100%;
|
|
border-top: 1rpx solid #d8d8dc;
|
|
border-bottom: 1rpx solid #d8d8dc;
|
|
}
|
|
|
|
.voice-record-list-heading,
|
|
.voice-record-header,
|
|
.voice-record-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.voice-record-list-heading {
|
|
min-height: 64rpx;
|
|
color: #6e6e73;
|
|
font-size: 23rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.voice-summary-selection-heading,
|
|
.voice-record-title-row,
|
|
.voice-summary-preview-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.voice-summary-selection-heading {
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.voice-record-title-row {
|
|
min-width: 0;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.voice-summary-checkbox {
|
|
flex: none;
|
|
width: 46rpx;
|
|
transform: scale(0.8);
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.voice-record-item {
|
|
padding: 18rpx 0;
|
|
border-top: 1rpx solid #e5e5ea;
|
|
}
|
|
|
|
.voice-record-header > view {
|
|
min-width: 0;
|
|
}
|
|
|
|
.voice-record-title {
|
|
color: #1c1c1e;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.voice-record-duration {
|
|
margin-left: 12rpx;
|
|
color: #8e8e93;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.voice-record-status {
|
|
flex: none;
|
|
color: #46715b;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.voice-record-transcript,
|
|
.voice-record-empty {
|
|
margin-top: 12rpx;
|
|
color: #3a3a3c;
|
|
font-size: 24rpx;
|
|
line-height: 1.55;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.voice-record-transcript {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
.voice-record-transcript-expanded {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
.voice-record-empty {
|
|
display: block;
|
|
color: #8e8e93;
|
|
}
|
|
|
|
.voice-record-actions {
|
|
min-height: 48rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.voice-record-text-button {
|
|
color: #6e6e73;
|
|
}
|
|
|
|
.voice-record-add-button {
|
|
margin-left: auto;
|
|
color: #007aff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.voice-record-add-button[disabled],
|
|
.content-clear-button[disabled] {
|
|
color: #aeaeb2;
|
|
opacity: 1;
|
|
}
|
|
|
|
.voice-summary-controls {
|
|
padding: 18rpx 0;
|
|
border-top: 1rpx solid #e5e5ea;
|
|
}
|
|
|
|
.voice-summary-button,
|
|
.voice-summary-apply-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 72rpx;
|
|
margin: 0;
|
|
padding: 0 20rpx;
|
|
border: 0;
|
|
border-radius: 8rpx;
|
|
font-size: 25rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
.voice-summary-button {
|
|
background: #eaf3ff;
|
|
color: #007aff;
|
|
}
|
|
|
|
.voice-summary-apply-button {
|
|
margin-top: 18rpx;
|
|
background: #007aff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.voice-summary-button::after,
|
|
.voice-summary-apply-button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.voice-summary-button[disabled],
|
|
.voice-summary-apply-button[disabled] {
|
|
background: #f1f3f6;
|
|
color: #aeaeb2;
|
|
opacity: 1;
|
|
}
|
|
|
|
.voice-summary-preview {
|
|
padding: 18rpx 0;
|
|
border-top: 1rpx solid #d8d8dc;
|
|
}
|
|
|
|
.voice-summary-preview-failed {
|
|
border-top-color: #e8b3b0;
|
|
}
|
|
|
|
.voice-summary-preview-heading {
|
|
justify-content: space-between;
|
|
gap: 18rpx;
|
|
color: #1c1c1e;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.voice-summary-preview-heading text:last-child {
|
|
color: #6e6e73;
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
}
|
|
|
|
.voice-summary-preview-failed .voice-summary-preview-heading text:last-child {
|
|
color: #b8322d;
|
|
}
|
|
|
|
.voice-summary-preview-content,
|
|
.voice-summary-preview-note {
|
|
display: block;
|
|
margin-top: 14rpx;
|
|
color: #3a3a3c;
|
|
font-size: 25rpx;
|
|
line-height: 1.65;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.voice-summary-preview-note {
|
|
color: #8e8e93;
|
|
}
|
|
|
|
.recording-time {
|
|
flex: none;
|
|
margin-left: 12rpx;
|
|
color: #d13f3a;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.voice-failure-recovery {
|
|
width: 100%;
|
|
padding: 16rpx;
|
|
border-left: 6rpx solid #d13f3a;
|
|
border-radius: 8rpx;
|
|
background: #fff7f6;
|
|
}
|
|
|
|
.voice-failure-hint {
|
|
display: block;
|
|
color: #6e3f3c;
|
|
font-size: 24rpx;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.voice-discard-button {
|
|
width: auto;
|
|
min-width: 0;
|
|
height: 56rpx;
|
|
margin: 12rpx 0 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #b8322d;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
line-height: 56rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
.voice-discard-button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.voice-discard-button[disabled] {
|
|
color: #aeaeb2;
|
|
opacity: 1;
|
|
}
|
|
|
|
.save-feedback {
|
|
width: calc(100% - 48rpx);
|
|
min-width: calc(100% - 48rpx);
|
|
max-width: calc(100% - 48rpx);
|
|
margin: 20rpx 24rpx 24rpx;
|
|
}
|
|
|
|
.profiles-hint {
|
|
margin-top: 22rpx;
|
|
padding: 20rpx 22rpx;
|
|
border: 1rpx solid #d1e3fb;
|
|
border-radius: 12rpx;
|
|
background: #f7fbff;
|
|
color: #6e6e73;
|
|
font-size: 24rpx;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.voice-button,
|
|
.voice-state-actionable,
|
|
.voice-state-arrow,
|
|
.feedback-error-copy,
|
|
.feedback-error-retry,
|
|
.feedback-error-close {
|
|
transition: none;
|
|
}
|
|
|
|
.voice-button:active,
|
|
.voice-state-actionable:active,
|
|
.feedback-error-copy:active,
|
|
.feedback-error-retry:active,
|
|
.feedback-error-close:active {
|
|
transform: none;
|
|
}
|
|
}
|