M input.css => input.css +6 -0
@@ 2,6 2,12 @@
@tailwind components;
@tailwind utilities;
+@layer components {
+ .tixe-input {
+ @apply p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none;
+ }
+}
+
.scribble {
stroke-dasharray: 24;
stroke-dashoffset: 24;
M static/styles.css => static/styles.css +21 -25
@@ 534,6 534,27 @@ video {
--tw-backdrop-sepia: ;
}
+.tixe-input {
+ border-radius: 0.375rem;
+ border-width: 2px;
+ padding: 0.25rem;
+}
+
+.tixe-input::-moz-placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgb(148 163 184 / var(--tw-placeholder-opacity));
+}
+
+.tixe-input::placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgb(148 163 184 / var(--tw-placeholder-opacity));
+}
+
+.tixe-input:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
.pointer-events-none {
pointer-events: none;
}
@@ 880,26 901,6 @@ video {
color: transparent;
}
-.placeholder-slate-400::-moz-placeholder {
- --tw-placeholder-opacity: 1;
- color: rgb(148 163 184 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-slate-400::placeholder {
- --tw-placeholder-opacity: 1;
- color: rgb(148 163 184 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-slate-800::-moz-placeholder {
- --tw-placeholder-opacity: 1;
- color: rgb(30 41 59 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-slate-800::placeholder {
- --tw-placeholder-opacity: 1;
- color: rgb(30 41 59 / var(--tw-placeholder-opacity));
-}
-
.opacity-0 {
opacity: 0;
}
@@ 975,11 976,6 @@ video {
text-decoration-line: underline;
}
-.focus\:outline-none:focus {
- outline: 2px solid transparent;
- outline-offset: 2px;
-}
-
.group\/summary[open] .group-open\/summary\:rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
M template/templates/index.tmpl => template/templates/index.tmpl +2 -2
@@ 12,11 12,11 @@
<form class="flex flex-col p-1 origin-top group-open/summary:animate-[newlink_300ms_ease-in-out]" action="/api/link/new" method="POST">
<p class="text-sm" for="visual">Visual</p>
<div class="flex gap-2">
- <input class="w-full h-8 p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none" type="text" placeholder="..." name="visual" id="visual"/>
+ <input class="tixe-input h-8 w-full" type="text" placeholder="..." name="visual" id="visual"/>
</div>
<p class="text-sm" for="link">Link</p>
<div class="flex gap-2">
- <input class="w-full h-8 p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none" type="text" placeholder="..." name="link" id="link"/>
+ <input class="tixe-input h-8 w-full" type="text" placeholder="..." name="link" id="link"/>
<button class="group/submit w-fit h-8 p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
<svg class="absolute h-5 w-5 stroke-emerald-600 group-hover/submit:stroke-emerald-700 transition-colors" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke-width="1.5" stroke-linecap="round"/>
M template/templates/linkedit.tmpl => template/templates/linkedit.tmpl +2 -2
@@ 31,7 31,7 @@
<form class="flex flex-col" action="/api/link/{{ .data.Id }}/visual" method="POST">
<p class="text-sm" for="visual">Visual</p>
<div class="flex gap-2">
- <input class="w-full p-1 border-2 rounded-md placeholder-slate-800 focus:outline-none" type="text" value="{{ .data.Visual }}" name="visual" id="visual"/>
+ <input class="tixe-input w-full" type="text" value="{{ .data.Visual }}" name="visual" id="visual"/>
<button class="w-fit p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
Update
</button>
@@ 40,7 40,7 @@
<form class="flex flex-col" action="/api/link/{{ .data.Id }}/link" method="POST">
<p class="text-sm" for="link">Link</p>
<div class="flex gap-2">
- <input class="w-full p-1 border-2 rounded-md placeholder-slate-800 focus:outline-none" type="text" value="{{ .data.Link }}" name="link" id="link"/>
+ <input class="tixe-input w-full" type="text" value="{{ .data.Link }}" name="link" id="link"/>
<button class="w-fit p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
Update
</button>
M template/templates/settings.tmpl => template/templates/settings.tmpl +1 -1
@@ 9,7 9,7 @@
<form class="flex flex-col" action="/api/settings/user/display_name" method="POST">
<p class="text-sm" for="display_name">Display Name</p>
<div class="flex gap-2">
- <input class="w-full p-1 border-2 rounded-md placeholder-slate-800 focus:outline-none" type="text" placeholder="{{ .user.DisplayName }}" name="display_name" id="display_name"/>
+ <input class="tixe-input w-full" type="text" placeholder="{{ .user.DisplayName }}" name="display_name" id="display_name"/>
<button class="w-fit p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
Update
</button>
M template/templates/tags.tmpl => template/templates/tags.tmpl +1 -1
@@ 9,7 9,7 @@
<form class="flex flex-col" action="/api/tags/new" method="POST">
<p class="text-sm" for="tag">New Tag</p>
<div class="flex gap-2">
- <input class="w-full h-8 p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none" type="text" placeholder="..." name="tag" id="tag"/>
+ <input class="tixe-input h-8 w-full" type="text" placeholder="..." name="tag" id="tag"/>
<button class="group w-fit h-8 p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
<svg class="absolute h-5 w-5 stroke-emerald-600 group-hover:stroke-emerald-700 transition-colors" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke-width="1.5" stroke-linecap="round"/>