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

removed post icon and made button less wide

Browse source
This commit is contained in:
hacki 2024-02-27 01:16:25 +01:00 committed by Ema Albisson
parent 65aac63eeb
commit d2ba442a45
3 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
front/index.html
View file

@ -44,12 +44,7 @@
<option value="yml">YAML</option> <option value="yml">YAML</option>
</select> </select>
</label> </label>
<button title="Save plak" type="submit"> <button title="Save plak" type="submit">Save</button>
<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>
</div> </div>
<section id="recent-plaks"> <section id="recent-plaks">
<div class="title fr"> <div class="title fr">

12
front/style.scss
View file

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