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 CustomThemeColorHtml = ` 17 <style> 18 :host([hidden]) { 19 visibility: hidden; 20 } 21 :host { 22 width:100%; 23 visibility: visible; 24 overflow: auto; 25 background-color: #fff; 26 display: flex; 27 flex-direction: column; 28 } 29 .config-title { 30 height: 72px; 31 background-color: #0a59f7; 32 display: flex; 33 align-items: center; 34 justify-content: space-between; 35 } 36 .title-text { 37 font-family: Helvetica-Bold; 38 font-size: 16px; 39 color: #ffffff; 40 text-align: left; 41 font-weight: 700; 42 margin-left: 40px; 43 } 44 .page-close { 45 text-align: right; 46 cursor: pointer; 47 opacity: 1; 48 font-size: 24px; 49 margin-right: 20px; 50 } 51 .page-close:hover { 52 opacity: 0.7; 53 } 54 .theme { 55 opacity: 0.9; 56 font-family: Helvetica-Bold; 57 font-size: 16px; 58 color: #000000; 59 line-height: 28px; 60 font-weight: 700; 61 margin: 60px 40px 40px 40px; 62 display: flex; 63 flex-direction: row; 64 align-items: center; 65 justify-content: flex-start; 66 flex-flow: row wrap; 67 } 68 .theme span { 69 margin-right: 40px; 70 font-weight: 700; 71 } 72 .litRadio { 73 margin: 0px 40px 0px 0px; 74 } 75 #lightRadio([dis=round]) #lightRadio(:focus-within) .selected label:hover .selected{ 76 border-color: #0a59f7; 77 } 78 #lightRadio([dis=round]) .selected::before { 79 background: #0a59f7; 80 } 81 .describe { 82 font-family: Helvetica; 83 color: #000000; 84 line-height: 28px; 85 margin: 0px 0px 40px 40px; 86 } 87 .describe text:nth-child(1) { 88 opacity: 0.9; 89 font-size: 16px; 90 font-weight: 700; 91 } 92 .describe text:nth-child(2) { 93 opacity: 0.6; 94 font-size: 14px; 95 font-weight: 400; 96 margin-left: 12px; 97 } 98 .colors { 99 width: 50%; 100 display: flex; 101 flex-flow: row wrap; 102 align-content: space-around; 103 flex: 0 0 9%; 104 margin: 20px auto; 105 } 106 .color-wrap { 107 width: 32px; 108 height: 32px; 109 border-radius: 50%; 110 margin: 30px 10px; 111 overflow: hidden; 112 position: relative; 113 } 114 .color { 115 border: none; 116 outline: none; 117 width: 150%; 118 height: 150%; 119 padding: 0; 120 border-radius: 50%; 121 position: absolute; 122 top: -25%; 123 left: -25%; 124 } 125 .btns { 126 width: 60%; 127 max-width: 70%; 128 display: flex; 129 flex: 0 0 9%; 130 justify-content: space-around; 131 margin: 40px auto; 132 } 133 .btn { 134 width: 96px; 135 height: 32px; 136 font-size:14px; 137 text-align: center; 138 line-height: 20px; 139 color: #0a59f7; 140 background-color: #fff; 141 border-radius: 16px; 142 border: 1px solid #0a59f7; 143 } 144 .btn:hover { 145 background-color: #0a59f7; 146 color: #fff; 147 } 148 button.active { 149 background-color: blue; 150 color: white; 151 } 152 </style> 153 <div class="vessel"> 154 <div class="config-title"> 155 <span class="title-text">Color Setting</span> 156 <lit-icon class="page-close" name="close-light" title="Page Close" color='#fff'></lit-icon> 157 </div> 158 <div class="text-wrap"> 159 <div class="theme"> 160 <span>Appearance</span> 161 <lit-radio name='litRadio' dis="round" class='litRadio' id="lightRadio" type="0">light</lit-radio> 162 <lit-radio name='litRadio' dis="round" class='litRadio' id="darkRadio type="1">dark</lit-radio> 163 </div> 164 <div class="describe"> 165 <text>Color Customization</text> 166 <text> Please customize colors according to your preferences</text> 167 </div> 168 </div> 169 <div class="colors"> 170 </div> 171 <div class="btns"> 172 <button class="btn" id='reset'>Reset</button> 173 <button class="btn" id='preview'>Preview</button> 174 <button class="btn" id='confirm'>Confirm</button> 175 </div> 176 </div> 177 `; 178