gnouseu/plakken
5
2
Fork 0
Code Issues Pull requests 4 Packages 1 Activity

Revamped front #41

Merged
hacki merged 4 commits from hacki/front into main 2024-05-01 20:21:41 +02:00
Conversation 0 Commits 4 Files changed 15 +19 -17
3 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 767826f049 - Show all commits

7
front/index.html
View file

@ -44,12 +44,7 @@
<option value="yml">YAML</option>
</select>
</label>
<button title="Save plak" type="submit">
<svg viewBox="0 0 24 24">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
<button title="Save plak" type="submit">Save</button>
</div>
<section id="recent-plaks">
<div class="title fr">

12
front/style.scss
View file

@ -57,23 +57,26 @@ body {
}
}
button,
input,
select {
background-color: $background;
border: 2px solid $border;
color: $text;
font: 500 14px/2 "Inter", "system-ui", sans-serif;
max-width: 145px;
outline: none;
padding: 3px 10px;
width: 150px;
transition: .15s ease;
transition: border .15s ease;
width: min-content;
&::placeholder {
color: $placeholder;
}
&:hover {
border-color: #555;
border-color: #777;
}
&:focus-visible {
@ -90,7 +93,7 @@ select:focus {
background-color: $background;
transition: none;
}
²
option {
background-color: $background;
color: $text;
@ -101,7 +104,6 @@ option {
}
}
button,
textarea {
background-color: inherit;
border: none;

17
static/style.css
View file

@ -1,3 +1,4 @@
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono&display=swap");
section#recent-plaks {
bottom: 1rem;
@ -128,25 +129,30 @@ body {
width: 24px;
}
button,
input,
select {
background-color: #0f0f0f;
border: 2px solid #363636;
color: #e5e5e7;
font: 500 14px/2 "Inter", "system-ui", sans-serif;
max-width: 145px;
outline: none;
padding: 3px 10px;
width: 150px;
transition: 0.15s ease;
transition: border 0.15s ease;
width: min-content;
}
button::placeholder,
input::placeholder,
select::placeholder {
color: #888;
}
button:hover,
input:hover,
select:hover {
border-color: #555;
border-color: #777;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
border: 2px solid #bbb;
@ -162,16 +168,15 @@ select:focus {
transition: none;
}
option {
² option {
background-color: #0f0f0f;
color: #e5e5e7;
}
option:focus {
² option:focus {
background-color: #d30f45;
color: #0f0f0f;
}
button,
textarea {
background-color: inherit;
border: none;