CodeSpace/Synergy-Legacy
3
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improved input label positioning & export bugfix

Browse source
This commit is contained in:
Filip Znachor 2023-10-22 14:34:53 +02:00
parent a9a3a0a371
commit 9a4bff99c5
4 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/button.css
View file

@ -6,7 +6,7 @@
.btn { .btn {
background-color: var(--synergy-btn-bg); background-color: var(--synergy-btn-bg);
padding: 12px 20px; padding: 9px 16px;
border: 0; border: 0;
color: var(--synergy-text-color); color: var(--synergy-text-color);
font: inherit; font: inherit;
@ -20,6 +20,10 @@
text-decoration: none; text-decoration: none;
} }
.btn.btn-large {
padding: 12px 20px;
}
.btn:hover { .btn:hover {
background-color: var(--synergy-btn-bg-hover); background-color: var(--synergy-btn-bg-hover);
} }

8
src/input.css
View file

@ -7,7 +7,7 @@
.inp label { .inp label {
position: absolute; position: absolute;
top: 11px; top: 9px;
left: 7px; left: 7px;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
@ -18,7 +18,7 @@
background: var(--synergy-bg); background: var(--synergy-bg);
padding: 3px 8px; padding: 3px 8px;
border-radius: 10px; border-radius: 10px;
line-height: 1; line-height: 1.2rem;
color: var(--synergy-label); color: var(--synergy-label);
} }
@ -29,7 +29,8 @@
), ),
.inp :is(input, textarea):focus + label { .inp :is(input, textarea):focus + label {
color: var(--synergy-label-active); color: var(--synergy-label-active);
transform: translate3d(0, -21px, 0) scale(.8); transform: scale(.8);
top: -.6rem;
} }
/* Common styles */ /* Common styles */
@ -37,7 +38,6 @@
.inp :is(input, textarea, select) { .inp :is(input, textarea, select) {
display: block; display: block;
width: 100%; width: 100%;
min-height: 47px;
font-family: inherit; font-family: inherit;
padding: 10px 12px; padding: 10px 12px;
font-size: 1rem; font-size: 1rem;

2
web/app.ts
View file

@ -36,7 +36,7 @@ applyPreset(pr);
createApp({ createApp({
applyPreset(p: Preset) { applyPreset(p: Preset) {
data.results = []; data.results = [];
applyPreset(p); data.theme = applyPreset(p);
}, },
async generateCSS() { async generateCSS() {
data.results = await Exporter.get(data.theme); data.results = await Exporter.get(data.theme);

2
web/demo.css
View file

@ -34,4 +34,4 @@ header h1 .color {background-clip: text; -webkit-background-clip: text; backgrou
.settings .close {width: 64px; height: 64px; cursor: pointer; padding: 20px; position: absolute; right: 0; top: 0; z-index: 10;} .settings .close {width: 64px; height: 64px; cursor: pointer; padding: 20px; position: absolute; right: 0; top: 0; z-index: 10;}
.btn.btn-download small {font-weight: 400; font-size: 12px; display: block;} .btn.btn-download small {font-weight: 400; font-size: 11px; display: block;}