mars3142
fbf40f75b2
- petrol watch - copilot usage Signed-off-by: Peter Siegmund <developer@mars3142.org>
353 lines
7.3 KiB
CSS
353 lines
7.3 KiB
CSS
:root {
|
|
--uspi-bodybg: #1e1f22; /* body背景色 */
|
|
--uspi-inputbg: #18191B; /* 输入框背景色 */
|
|
--uspi-textcolor: #fff; /* 文字颜色 */
|
|
--uspi-unitcolor: #A6A6A6; /* 单位字体颜色 */
|
|
--uspi-bordercolor: #3a3a3a; /* 边框颜色 */
|
|
--uspi-borderradius: 4px; /* 边框圆角 */
|
|
--uspi-width: 320px; /* 宽度 */
|
|
--uspi-height: 32px; /* 高度 */
|
|
--uspi-theme: #00FFE6; /* 主题颜色 */
|
|
--uspi-label-width: 112px; /* 标签宽度 */
|
|
}
|
|
|
|
|
|
*{
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
html,body{
|
|
font-family: 'Source Han Sans SC', system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: var(--uspi-textcolor);
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
a{
|
|
color: var(--uspi-theme);
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
input,
|
|
textarea {
|
|
color: var(--uspi-textcolor); /* 改变可编辑区域内文字的颜色 */
|
|
caret-color: #4AA3FF; /* 改变可编辑区域光标的颜色 */
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder,
|
|
select::placeholder {
|
|
color: #65686D;
|
|
}
|
|
button:focus,
|
|
textarea:focus,
|
|
input:focus,
|
|
select:focus,
|
|
option:focus,
|
|
details:focus,
|
|
summary:focus{
|
|
outline: none;
|
|
}
|
|
|
|
.uspi-item{
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 10px;
|
|
}
|
|
.uspi-item-label{
|
|
width: var(--uspi-label-width);
|
|
color: var(--uspi-textcolor);
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
|
|
}
|
|
.uspi-item-label:after {
|
|
content: ": ";
|
|
}
|
|
.uspi-item-label.empty:after {
|
|
content: "";
|
|
}
|
|
.uspi-item-value{
|
|
width: var(--uspi-width);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.uspi-item-value.no-label{
|
|
width: auto;
|
|
margin-left: var(--uspi-label-width);
|
|
display: inline-block;
|
|
}
|
|
|
|
select.uspi-item-value{
|
|
padding: 0 6px;
|
|
color: var(--uspi-textcolor);
|
|
height: var(--uspi-height);
|
|
background-color: var(--uspi-inputbg);
|
|
border: 1px solid var(--uspi-inputbg);
|
|
border-radius: var(--uspi-borderradius);
|
|
line-height: var(--uspi-height);
|
|
}
|
|
|
|
input.uspi-item-value{
|
|
padding: 0 10px;
|
|
height: var(--uspi-height);
|
|
background-color: var(--uspi-inputbg);
|
|
border: 1px solid var(--uspi-inputbg);
|
|
border-radius: var(--uspi-borderradius);
|
|
}
|
|
textarea.uspi-item-value {
|
|
resize: none;
|
|
height: 68px;
|
|
max-height: 132px;
|
|
background-color: var(--uspi-inputbg);
|
|
border: 1px solid var(--uspi-inputbg);
|
|
border-radius: var(--uspi-borderradius);
|
|
padding: 8px;
|
|
color: var(--uspi-textcolor);
|
|
}
|
|
[type="file"] .uspi-item-value{
|
|
/* padding: 0; */
|
|
height: var(--uspi-height);
|
|
background-color: var(--uspi-inputbg);
|
|
border: 1px solid var(--uspi-inputbg);
|
|
border-radius: var(--uspi-borderradius);
|
|
}
|
|
[type="file"] .uspi-file-info{
|
|
flex: 1;
|
|
padding: 0 10px;
|
|
color: var(--uspi-textcolor);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background-color: var(--uspi-inputbg);
|
|
border: 1px solid var(--uspi-inputbg);
|
|
}
|
|
[type="file"] .uspi-file-label{
|
|
display: flex;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"]{
|
|
display: none;
|
|
}
|
|
|
|
input[type="radio"]+label,
|
|
input[type="checkbox"]+label{
|
|
padding-left: 24px;
|
|
background: url(../assets/u_check_none.svg) no-repeat left center;
|
|
color: var(--uspi-textcolor);
|
|
}
|
|
|
|
input[type="radio"]:checked+label{
|
|
background: url(../assets/u_check_radio.svg) no-repeat left center;
|
|
}
|
|
input[type="checkbox"]:checked+label {
|
|
background: url(../assets/u_check_checkbox.svg) no-repeat left center;
|
|
}
|
|
input[type="range"]{
|
|
flex: 1;
|
|
height: 4px;
|
|
background: var(--uspi-inputbg);
|
|
border-radius: 8px;
|
|
outline: none;
|
|
}
|
|
input[type="range"]+span{
|
|
text-align: right;
|
|
min-width: 25px;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.uspi-heading {
|
|
display: flex;
|
|
flex-basis: 100%;
|
|
align-items: center;
|
|
color: inherit;
|
|
font-size: 14px;
|
|
margin: 8px 0px;
|
|
}
|
|
|
|
.uspi-heading::before,
|
|
.uspi-heading::after {
|
|
content: "";
|
|
flex-grow: 1;
|
|
background: var(--uspi-bordercolor);
|
|
height: 1px;
|
|
font-size: 0px;
|
|
line-height: 0px;
|
|
margin: 0px 16px;
|
|
}
|
|
|
|
|
|
button{
|
|
cursor: pointer;
|
|
padding: 0 16px;
|
|
height: var(--uspi-height);
|
|
background: none;
|
|
border: 1px solid var(--uspi-theme);
|
|
border-radius: 8px;
|
|
color: var(--uspi-theme);
|
|
width: 124px;
|
|
}
|
|
button.primary{
|
|
background-color: var(--uspi-theme);
|
|
border: 1px solid var(--uspi-theme);
|
|
color: var(--uspi-bodybg);
|
|
}
|
|
button.uspi-item-value{
|
|
display: inline-block;
|
|
margin-left: 108px;
|
|
width: 124px;
|
|
}
|
|
|
|
button.default{
|
|
border: 1px solid #fff;
|
|
background-color: #fff;
|
|
color: var(--uspi-bodybg);
|
|
}
|
|
|
|
button.default-border{
|
|
border: 1px solid #fff;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
button.disabled{
|
|
cursor: not-allowed;
|
|
/* opacity: 0.6; */
|
|
border: 1px solid #65686D;
|
|
color: #65686D;
|
|
}
|
|
|
|
|
|
hr{
|
|
margin: 12px 16px;
|
|
border-style: none;
|
|
background: var(--uspi-bordercolor);
|
|
height: 1px;
|
|
}
|
|
|
|
.tip{
|
|
font-size: 12px;
|
|
color: var(--uspi-unitcolor);
|
|
margin: 0 10px;
|
|
line-height: 16px;
|
|
padding-left: 20px;
|
|
}
|
|
.tip.info{
|
|
background: url(../assets/u_tip_info.svg) no-repeat left center;
|
|
background-size: 16px 16px;
|
|
}
|
|
.tip.success{
|
|
background: url(../assets/u_tip_success.svg) no-repeat left center;
|
|
background-size: 16px 16px;
|
|
}
|
|
.tip.error{
|
|
background: url(../assets/u_tip_error.svg) no-repeat left center;
|
|
background-size: 16px 16px;
|
|
}
|
|
.tip.warn{
|
|
background: url(../assets/u_tip_warn.svg) no-repeat left center;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
details{
|
|
color: var(--uspi-unitcolor);
|
|
}
|
|
|
|
.uspi-label-placeholder{
|
|
margin-left: var(--uspi-label-width);
|
|
}
|
|
.spinner {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 4px solid #555;
|
|
border-top: 4px solid rgba(255, 255, 255, 1);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 6px;
|
|
}
|
|
.loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
z-index: 999;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.hidden{
|
|
display: none;
|
|
}
|
|
|
|
/* 滚动条整体样式 */
|
|
::-webkit-scrollbar {
|
|
width: 4px; /* 垂直滚动条宽度 */
|
|
height: 4px; /* 水平滚动条高度 */
|
|
}
|
|
|
|
/* 滚动条轨道 */
|
|
::-webkit-scrollbar-track {
|
|
background: var(--uspi-bodybg); /* 轨道背景色 */
|
|
border-radius: 4px; /* 轨道圆角 */
|
|
}
|
|
|
|
/* 滚动条滑块 */
|
|
::-webkit-scrollbar-thumb {
|
|
background: #727476; /* 滑块背景色 */
|
|
border-radius: 4px; /* 滑块圆角 */
|
|
transition: background 0.3s; /* 过渡效果 */
|
|
}
|
|
|
|
/* 滚动条滑块悬停状态 */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8; /* 悬停时的滑块颜色 */
|
|
}
|
|
|
|
/* 滚动条滑块激活状态（点击时） */
|
|
::-webkit-scrollbar-thumb:active {
|
|
background: #888888; /* 激活时的滑块颜色 */
|
|
}
|
|
|
|
/* 滚动条角落（垂直和水平滚动条交汇处） */
|
|
::-webkit-scrollbar-corner {
|
|
background: #f1f1f1; /* 角落背景色 */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|