removed post icon and made button less wide
This commit is contained in:
parent
44486ba59a
commit
767826f049
3 changed files with 19 additions and 17 deletions
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue