mirror of
https://github.com/txtdot/txtdot
synced 2024-10-18 14:40:19 +03:00
3b5f402d77
* fix: interface style improvements and components in ejs templates * fix: improvement of improvements * Redesign: kind of MD3 * Working url/search switch * formatting * Add switch animation, adjust sizes, adjust btn colors, rename bg2 to outline * Format --------- Co-authored-by: DarkCat09 <gh@dc09.ru>
107 lines
1.7 KiB
CSS
107 lines
1.7 KiB
CSS
.input-grid {
|
|
display: grid;
|
|
/* 2 columns: auto width, min-content width */
|
|
grid-template-columns: auto min-content;
|
|
|
|
/* gap: row column */
|
|
gap: 0.5rem 0.25rem;
|
|
|
|
width: fit-content;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.input-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem 0.75rem;
|
|
}
|
|
|
|
.input {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
|
|
font-size: 1rem;
|
|
}
|
|
|
|
label {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.switch-label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.switch-btn {
|
|
width: 3rem;
|
|
height: 1.75rem;
|
|
|
|
border-radius: 1rem;
|
|
|
|
background: var(--outline);
|
|
|
|
padding: 0.375rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
align-items: center;
|
|
}
|
|
|
|
.switch-btn::before {
|
|
content: '';
|
|
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
|
|
transform: translateX(0);
|
|
transition:
|
|
transform 0.15s ease-out,
|
|
opacity 0.15s ease-out;
|
|
|
|
border-radius: 1rem;
|
|
|
|
background: var(--bg);
|
|
}
|
|
|
|
.switch-btn:hover::before {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
#switch-search {
|
|
display: none;
|
|
}
|
|
|
|
#switch-search:checked ~ .switch-label > .switch-btn {
|
|
background: var(--accent);
|
|
}
|
|
|
|
#switch-search:checked ~ .switch-label > .switch-btn::before {
|
|
/* track width - handle width - (2 * horizontal track padding) */
|
|
transform: translateX(calc(3rem - 1rem - 2 * 0.375rem));
|
|
}
|
|
|
|
#switch-search:not(:checked) ~ .main-form-search {
|
|
display: none;
|
|
}
|
|
|
|
#switch-search:not(:checked) ~ .main-form-url {
|
|
display: grid;
|
|
}
|
|
|
|
#switch-search:checked ~ .main-form-search {
|
|
display: grid;
|
|
}
|
|
|
|
#switch-search:checked ~ .main-form-url {
|
|
display: none;
|
|
}
|