andrew
870c52b4a6
Added support for a dynamic 'Custom' theme button that appears when user settings diverge from predefined themes. Improved theme state management by tracking the active theme name in localStorage, updating button states, and refining the preview to better reflect customizations. Also updated the settings page layout and styles for better user experience and fixed the preview to always show the custom title.
143 lines
2.4 KiB
CSS
143 lines
2.4 KiB
CSS
:root {
|
|
--bg: #121418;
|
|
--dark-blue: #0B1C2B;
|
|
--dark-purple: #1B1035;
|
|
--primary: #7B2EFF;
|
|
--accent: #00C6FF;
|
|
--text: #E0E0E0;
|
|
}
|
|
|
|
/* Load InterVariable */
|
|
@font-face {
|
|
font-family: 'InterVariable';
|
|
src: url('../assets/images/fonts/InterVariable.ttf') format('truetype');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(145deg, var(--bg) 0%, var(--dark-purple) 100%);
|
|
color: var(--text);
|
|
font-family: 'InterVariable', sans-serif;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
background-color: var(--dark-purple);
|
|
padding: 2rem;
|
|
border-radius: 16px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
max-width: 500px;
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.setting-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
input {
|
|
padding: 0.6rem;
|
|
font-size: 1rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
margin-bottom: 0.75rem;
|
|
background-color: var(--dark-blue);
|
|
color: var(--text);
|
|
}
|
|
|
|
button {
|
|
padding: 0.6rem;
|
|
font-size: 1rem;
|
|
background-color: var(--primary);
|
|
color: var(--text);
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease-in-out;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
.note {
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.status {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background-color: rgba(18,20,24,0.8);
|
|
color: white;
|
|
padding: 0.8rem 1.2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
font-size: 1rem;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.status.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid transparent;
|
|
border-top: 2px solid white;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.setting-group input,
|
|
.setting-group button {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* small-screen adjustments */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 1rem;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|