1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16export const SpRecordPerfHtml = `
17<style>
18input {
19   height: 25px;
20   border-radius: 16px;
21   outline:none;
22   text-indent:2%
23}
24
25input::-webkit-input-placeholder{
26    color:var(--bark-prompt,#999999);
27}
28
29 :host([startSamp]) .record-perf-input {
30    background: var(--dark-background5,#FFFFFF);
31}
32
33:host(:not([startSamp])) .record-perf-input {
34    color: #999999;
35}
36
37:host{
38    width: 100%;
39    display: inline-block;
40    height: 100%;
41    background: var(--dark-background3,#FFFFFF);
42    border-radius: 0px 16px 16px 0px;
43}
44
45.record-perf-config-div {
46   display: flex;
47   flex-direction: column;
48   gap: 15px;
49   width: 80%;
50}
51
52.root {
53    padding-top: 30px;
54    margin-right: 30px;
55    padding-left: 54px;
56    font-size:16px;
57    margin-bottom: 30px;
58}
59
60:host([show]) .record-perf-config-div {
61   display: flex;
62   flex-direction: column;
63   margin-bottom: 1vh;
64}
65
66:host(:not([show])) .record-perf-config-div {
67   margin-top: 5vh;
68   margin-bottom: 5vh;
69   gap: 25px;
70}
71
72:host(:not([show])) .hidden {
73   display: none;
74}
75
76#addOptions {
77   border-radius: 15px;
78   border-color:rgb(0,0,0,0.1);
79   width: 150px;
80   height: 40px;
81   font-family: Helvetica;
82   font-size: 1em;
83   color: #FFFFFF;
84   text-align: center;
85   line-height: 20px;
86   font-weight: 400;
87   margin-right: 20%;
88   float: right;
89}
90
91:host(:not([startSamp])) #addOptions {
92   background: #999999;
93}
94:host([startSamp]) #addOptions {
95   background: #3391FF;
96}
97
98.record-perf-title {
99  opacity: 0.9;
100  font-family: Helvetica-Bold;
101  margin-right: 10px;
102  font-size: 18px;
103  text-align: center;
104  line-height: 40px;
105  font-weight: 700;
106}
107
108.record-perf-des {
109  opacity: 0.6;
110  font-family: Helvetica;
111  line-height: 35px;
112  font-size: 14px;
113  text-align: center;
114  font-weight: 400;
115}
116
117.record-perf-select {
118  border-radius: 15px;
119}
120
121lit-switch {
122  height: 38px;
123  margin-top: 10px;
124  display:inline;
125  float: right;
126}
127
128.record-perf-input {
129    line-height: 20px;
130    font-weight: 400;
131    border: 1px solid var(--dark-background5,#ccc);
132    font-family: Helvetica;
133    font-size: 14px;
134    color: var(--dark-color1,#212121);
135    text-align: left;
136}
137
138.sliderBody{
139    width: 100%;
140    height: min-content;
141    display: grid;
142    grid-template-columns: 1fr min-content;
143}
144
145.sliderInput {
146    margin: 0 0 0 0;
147    height: 40px;
148    background-color: var(--dark-background5,#F2F2F2);
149    -webkit-appearance:none;
150    outline:0;
151    font-size:14px;
152    border-radius:20px;
153    border:1px solid var(--dark-border,#c8cccf);
154    color:var(--dark-color,#6a6f77);
155    text-align: center;
156}
157</style>
158<div class="root">
159    <div class="record-perf-title" id="traceMode" style="text-align:left;">
160    <span style='color: red'>Long trace mode! If current data Trace is too large, it may not open!</span>
161  </div>
162  <div class="configList record-perf-config">
163  </div>
164  <button id ="addOptions">Advance Options</button>
165</div>
166`;
167