blek
/
bfile
1
0
Fork 0
Code Issues 6 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

cool input style

This commit is contained in:
blek 2023-09-30 12:57:28 +10:00
parent ca36c9388b
commit a10a181543
Signed by: blek
GPG Key ID: 14546221E3595D0C
2 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
filed/static/form.css Normal file
View File

@ -0,0 +1,34 @@
.form-input-partial {
background: var(--header-fg-color);
color: var(--header-color);
padding: 2px 6px;
border-radius: 6px;
width: fit-content;
}
.form-input-partial input[type=text] {
border: 0;
border-radius: 0;
padding: 0;
height: 100%;
transform: translateX(-4px);
font-family: 'Red Hat Display';
}
.form-input-label {
user-select: none;
font-size: 90%;
}
@media (max-width:667px) {
.form-input-label {
display: none;
}
.form-input-partial {
background: transparent;
padding: 0;
border-radius: 0;
}
.form-input-partial input[type=text] {
border-radius: 5px;
padding: 2px 4px;
margin-left: 5px;
}
}

3
filed/templates/base.html
View File

@ -2,11 +2,14 @@
<html lang="en_US"> <html lang="en_US">
<head> <head>
<meta charset="utf8" /> <meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/reset-css@5.0.1/reset.css" /> <link rel="stylesheet" href="https://unpkg.com/reset-css@5.0.1/reset.css" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/paint.css" /> <link rel="stylesheet" href="/paint.css" />
<link rel="stylesheet" href="/form.css" />
<script src="/delay.js"></script> <script src="/delay.js"></script>
<title>blek! File</title> <title>blek! File</title>
{% block head %}{% endblock %} {% block head %}{% endblock %}