544 lines
9.9 KiB
CSS
544 lines
9.9 KiB
CSS
/*
|
|
options.css - 设置页的样式
|
|
2022/09/23 - Stapx Steve [林槐]
|
|
*/
|
|
|
|
.st0 {
|
|
fill: var(--color-main);
|
|
}
|
|
|
|
.st1 {
|
|
fill: var(--color-font-1-r);
|
|
}
|
|
|
|
.opt-main {
|
|
height: 100%;
|
|
flex-direction: row;
|
|
display: flex;
|
|
padding: 20px;
|
|
}
|
|
|
|
.opt-main > div:first-child {
|
|
transition: all .3s;
|
|
overflow-y: scroll;
|
|
width: 350px;
|
|
}
|
|
|
|
.opt-main > div:first-child::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.opt-main > div:first-child>div:not(:first-child) {
|
|
padding: 10px 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.opt-main > div:last-child {
|
|
flex-direction: column;
|
|
margin-left: 20px;
|
|
display: flex;
|
|
flex: 1;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo-card {
|
|
color: var(--color-font);
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px 30px;
|
|
display: flex;
|
|
}
|
|
|
|
.logo-card>svg {
|
|
width: 25%;
|
|
}
|
|
|
|
.logo-card>a {
|
|
color: var(--color-font-1);
|
|
margin-top: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.logo-card>div {
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.logo-card>div>span {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.logo-card>div>a {
|
|
background: var(--color-main);
|
|
color: var(--color-font-r);
|
|
border-radius: 2rem;
|
|
margin-left: 10px;
|
|
display: block;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.logo-card>a[class=ss-button] {
|
|
color: var(--color-font-r);
|
|
text-align: center;
|
|
line-height: 35px;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.contributors-card>div {
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
}
|
|
|
|
.contributors-card>div>div {
|
|
background-size: 100%;
|
|
border-radius: 35px;
|
|
margin-right: 10px;
|
|
min-height: 35px;
|
|
min-width: 35px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.contributors-card>div>div.me {
|
|
outline: 2px solid var(--color-main);
|
|
border: 1px solid var(--color-card-1);
|
|
}
|
|
|
|
.opt-title {
|
|
transform: translateY(calc(100% + 14px));
|
|
margin-top: calc(-1rem - 10px);
|
|
color: var(--color-font);
|
|
pointer-events: none;
|
|
margin-left: 20px;
|
|
font-size: 1rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.opt-tab {
|
|
justify-content: flex-end;
|
|
color: var(--color-font);
|
|
display: flex;
|
|
padding: 5px;
|
|
border: 0;
|
|
}
|
|
|
|
.opt-tab>li {
|
|
transition: all .3s;
|
|
}
|
|
|
|
.opt-tab>li::after {
|
|
transition: all .3s;
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
.layui-this {
|
|
color: var(--color-main) !important;
|
|
}
|
|
|
|
.layui-this:after {
|
|
border-bottom: 3px solid var(--color-main) !important;
|
|
transform: scaleX(0.5) !important;
|
|
border-radius: 1px !important;
|
|
}
|
|
|
|
.bcd-about {
|
|
padding: 5px 20px 10px 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
flex: 1;
|
|
}
|
|
|
|
.bcd-about>div {
|
|
margin: 20px auto;
|
|
width: 240px;
|
|
}
|
|
|
|
.bcd-about>div>div {
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
height: 17px;
|
|
}
|
|
|
|
.bcd-about span {
|
|
color: var(--color-main);
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.bcd-about a {
|
|
color: var(--color-font-2);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.bcd-body {
|
|
background: var(--color-card-1);
|
|
}
|
|
|
|
.opt-body {
|
|
overflow-y: scroll;
|
|
margin-top: 20px;
|
|
padding: 0;
|
|
flex: 1;
|
|
}
|
|
.opt-body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.opt-body > div {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
padding-right: 7px;
|
|
}
|
|
|
|
.opt-body header {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.opt-body label[class=ss-switch] {
|
|
--switch-dot-border: 5px;
|
|
--switch-dot-margin: 8px;
|
|
--switch-height: 25px;
|
|
min-width: 45px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.opt-body label[class=ss-switch]>div>div {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.ss-switch>div>div {
|
|
margin-left: calc(var(--switch-dot-margin) - 5px);
|
|
}
|
|
|
|
.ss-switch input:checked~div>div {
|
|
border: var(--switch-dot-border) solid #fff;
|
|
margin-left: calc(100% - var(--switch-height) + var(--switch-dot-margin) - 5px);
|
|
}
|
|
|
|
.opt-page>div {
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.opt-page>div>header {
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.opt-page>div>div.tip {
|
|
background: var(--color-card-1);
|
|
color: var(--color-font-2);
|
|
border-radius: 7px;
|
|
margin: 5px 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.opt-page>div:not(:first-child) {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.opt-item {
|
|
transition: background .3s;
|
|
padding: 5px 15px 5px 20px;
|
|
align-items: center;
|
|
border-radius: 7px;
|
|
display: flex;
|
|
height: 45px;
|
|
}
|
|
|
|
.opt-item:hover {
|
|
background: var(--color-card-2);
|
|
}
|
|
|
|
.opt-item>div {
|
|
flex-direction: column;
|
|
margin-right: 20px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.opt-item select {
|
|
background: var(--color-card-1);
|
|
color: var(--color-font);
|
|
border: navajowhite;
|
|
border-radius: 7px;
|
|
font-size: 0.8rem;
|
|
padding: 0 10px;
|
|
height: 30px;
|
|
width: 150px;
|
|
}
|
|
|
|
.opt-item>div>span:last-child {
|
|
color: var(--color-font-1);
|
|
white-space: nowrap;
|
|
text-overflow: clip;
|
|
font-size: 0.8rem;
|
|
}
|
|
.opt-item>div>span:last-child > a {
|
|
color: var(--color-font-1);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.opt-item>svg {
|
|
fill: var(--color-font);
|
|
margin-right: 20px;
|
|
margin-top: 1px;
|
|
height: 1.1rem;
|
|
width: 1.1rem;
|
|
}
|
|
.opt-item input[type=text] {
|
|
line-height: 35px;
|
|
font-size: 0.8rem;
|
|
}
|
|
.opt-item div.ss-range {
|
|
--range-height: 30px !important;
|
|
max-width: 170px;
|
|
margin: 0;
|
|
}
|
|
.opt-item div.ss-range span {
|
|
font-size: 0.85rem;
|
|
}
|
|
.opt-item div.ss-range input::-webkit-slider-thumb,
|
|
.opt-item div.ss-range input::-moz-range-thumb {
|
|
opacity: 0;
|
|
}
|
|
.opt-item div.ss-range input::-webkit-slider-runnable-track {
|
|
opacity: 0;
|
|
}
|
|
|
|
.l10n-info {
|
|
border-left: 7px solid var(--color-main);
|
|
background: var(--color-card-1);
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
border-radius: 7px;
|
|
display: flex;
|
|
padding: 15px;
|
|
}
|
|
|
|
.l10n-info>svg {
|
|
fill: var(--color-font);
|
|
margin: 0 20px 0 10px;
|
|
min-width: 2.7rem;
|
|
width: 2.7rem;
|
|
}
|
|
|
|
.l10n-info span {
|
|
display: block;
|
|
}
|
|
|
|
.l10n-info>div {
|
|
flex: 1;
|
|
}
|
|
|
|
.l10n-info>div>span:first-child {
|
|
margin-bottom: 8px;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
.l10n-info>div>span:first-child>a {
|
|
color: var(--color-font-2);
|
|
font-weight: normal;
|
|
font-size: 0.7rem;
|
|
margin-left: 5px;
|
|
}
|
|
.l10n-info>div>span.author {
|
|
color: var(--color-font-1);
|
|
font-size: 0.8rem;
|
|
}
|
|
.l10n-info>div>span:last-child {
|
|
font-weight: unset;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.l10n-info>span {
|
|
color: var(--color-font-1);
|
|
margin-right: 10px;
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.theme-color-col {
|
|
flex-direction: row-reverse !important;
|
|
margin-right: 0 !important;
|
|
overflow: unset !important;
|
|
display: flex !important;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.theme-color-col>label {
|
|
--radio-size: 16px;
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.ss-radio:hover>div:nth-child(2) {
|
|
padding: calc((var(--radio-size) / 4) + 2px);
|
|
}
|
|
|
|
.ss-radio input:checked~div:nth-child(2) {
|
|
padding: calc(var(--radio-size) - 2px);
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.account-info {
|
|
background: var(--color-main);
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.account-info>img {
|
|
border: 2px solid var(--color-main);
|
|
outline: 3px solid var(--color-card-2);
|
|
border-radius: 100%;
|
|
height: 40px;
|
|
}
|
|
|
|
.account-info>div {
|
|
flex-direction: column;
|
|
margin-left: 20px;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.account-info>div>span {
|
|
color: var(--color-font-1-r);
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.account-info>div>div {
|
|
align-items: flex-end;
|
|
display: flex;
|
|
}
|
|
|
|
.account-info>div>div>span:first-child {
|
|
color: var(--color-font-r);
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.account-info>div>div>span:last-child {
|
|
color: var(--color-font-1-r);
|
|
margin-bottom: 2px;
|
|
margin-left: 10px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.account-info>svg {
|
|
background: var(--color-card-2);
|
|
fill: var(--color-main);
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
.end-card {
|
|
margin-bottom: 40px;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.end-card>div {
|
|
flex: 1;
|
|
}
|
|
|
|
.end-card>div>span {
|
|
margin-left: 20px;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.end-card>div>div {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.end-card>div>div>span {
|
|
letter-spacing: 0.1rem;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
text-indent: 0;
|
|
}
|
|
|
|
.end-card>div>div>a {
|
|
color: var(--color-font-1);
|
|
font-size: 0.6rem;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.ws-test-out {
|
|
min-height: 90px;
|
|
resize: vertical;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.bot-info > div > span {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.bot-info > div > span > span {
|
|
color: var(--color-font);
|
|
width: 50%;
|
|
}
|
|
.bot-info > div > span > span:first-child {
|
|
color: var(--color-main);
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.debug-info {
|
|
background: var(--color-card-1);
|
|
color: var(--color-font-1);
|
|
line-height: 1.3rem;
|
|
flex-direction: row;
|
|
border-radius: 7px;
|
|
padding: 10px 20px;
|
|
margin-top: -10px;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
}
|
|
|
|
.debug-info span {
|
|
font-size: unset;
|
|
width: 50%;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.opt-title {
|
|
display: none;
|
|
}
|
|
.opt-tab {
|
|
justify-content: center;
|
|
}
|
|
.opt-main {
|
|
height: 100%;
|
|
}
|
|
.opt-main > div:first-child {
|
|
margin-left: -20px;
|
|
width: 0;
|
|
}
|
|
|
|
.opt-item {
|
|
flex-wrap: wrap;
|
|
height: auto;
|
|
padding: 10px 15px 10px 20px;
|
|
}
|
|
|
|
.opt-item select,
|
|
.opt-item div.ss-range,
|
|
.opt-item input[type="text"],
|
|
.opt-item input[type="number"] {
|
|
margin-left: calc(1.1rem + 20px);
|
|
width: 100% !important;
|
|
margin-top: 10px;
|
|
}
|
|
.opt-item div.ss-range {
|
|
min-width: calc(100% - 40px);
|
|
}
|
|
} |