mirror of
https://github.com/firestar5683/StarPilot.git
synced 2026-07-15 06:12:11 +08:00
firestar5683
174 lines
4.1 KiB
CSS
174 lines
4.1 KiB
CSS
.toggle-control-button {
|
|
background-color: var(--input-bg);
|
|
border: none;
|
|
border-radius: var(--border-radius-lg);
|
|
color: var(--text-color);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-demi-bold);
|
|
padding: var(--border-radius-xl);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition: background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
|
|
width: 100%;
|
|
}
|
|
|
|
.toggle-control-button:hover {
|
|
box-shadow: var(--shadow-md);
|
|
color: var(--secondary-fg);
|
|
transform: var(--hover-scale-sm);
|
|
}
|
|
|
|
.toggle-control-button + .toggle-control-button {
|
|
margin-top: var(--padding-sm);
|
|
}
|
|
|
|
.toggle-control-button-save-me {
|
|
font-size: calc(var(--font-size-base) * 1.35);
|
|
letter-spacing: 0.08em;
|
|
margin-top: var(--padding-base);
|
|
min-height: 5.5rem;
|
|
}
|
|
|
|
.toggle-control-button-danger {
|
|
background-color: rgba(224, 85, 119, 0.2);
|
|
color: var(--danger-fg);
|
|
}
|
|
|
|
.toggle-control-button-danger:hover {
|
|
background-color: rgba(224, 85, 119, 0.35);
|
|
color: var(--danger-fg);
|
|
}
|
|
|
|
.toggle-control-button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: var(--disabled-opacity);
|
|
transform: none;
|
|
}
|
|
|
|
.toggle-control-text {
|
|
color: var(--text-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.toggle-control-danger-text {
|
|
color: var(--text-color);
|
|
margin: var(--padding-sm) 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.toggle-control-danger-title {
|
|
color: var(--danger-fg);
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-bold);
|
|
text-align: center;
|
|
}
|
|
|
|
.toggle-control-title {
|
|
background-color: var(--input-bg);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
color: var(--text-color);
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-bold);
|
|
padding: var(--padding-sm);
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.toggle-control-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggle-control-widget {
|
|
align-items: center;
|
|
background-color: var(--secondary-bg);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
color: var(--main-fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: var(--padding-xl);
|
|
max-width: var(--width-lg);
|
|
padding: var(--padding-lg);
|
|
transform-origin: top center;
|
|
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
|
|
}
|
|
|
|
.toggle-control-widget:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: var(--hover-scale-sm);
|
|
}
|
|
|
|
.toggle-control-danger-zone {
|
|
background-color: rgba(224, 85, 119, 0.12);
|
|
border: 1px solid rgba(224, 85, 119, 0.35);
|
|
border-radius: var(--border-radius-lg);
|
|
margin-top: var(--padding-sm);
|
|
padding: var(--padding-base);
|
|
width: 100%;
|
|
}
|
|
|
|
.toggle-control-status {
|
|
background-color: rgba(10, 12, 18, 0.35);
|
|
border: 1px solid rgba(94, 200, 200, 0.2);
|
|
border-radius: var(--border-radius-lg);
|
|
margin-top: var(--padding-base);
|
|
padding: var(--padding-base);
|
|
}
|
|
|
|
.toggle-control-status.error {
|
|
border-color: rgba(224, 85, 119, 0.4);
|
|
}
|
|
|
|
.toggle-control-status-title {
|
|
color: var(--text-color);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.toggle-control-status-line {
|
|
color: var(--text-color);
|
|
font-size: var(--font-size-sm);
|
|
margin: var(--margin-sm) 0 0;
|
|
}
|
|
|
|
.toggle-control-status-line.error {
|
|
color: var(--danger-fg);
|
|
}
|
|
|
|
.toggle-control-status-track {
|
|
background: var(--track-color);
|
|
border-radius: var(--border-radius-sm);
|
|
height: 10px;
|
|
margin-top: var(--margin-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toggle-control-status-track.error {
|
|
border: 1px solid var(--danger-bg);
|
|
}
|
|
|
|
.toggle-control-status-fill {
|
|
background: linear-gradient(90deg, #5ec8c8 0%, #8b6cc5 100%);
|
|
border-radius: var(--border-radius-sm);
|
|
height: 100%;
|
|
transition: width var(--transition-base);
|
|
}
|
|
|
|
.toggle-control-status-fill.error {
|
|
background: linear-gradient(90deg, #b43a3a 0%, #de5656 100%);
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) and (orientation: portrait) {
|
|
.toggle-control-wrapper {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.toggle-control-widget {
|
|
margin-left: 0 !important;
|
|
margin-top: 1.5rem;
|
|
}
|
|
}
|